From eea636c6f15bef929ab74750834aa34a86dc982d Mon Sep 17 00:00:00 2001 From: Evgeniy Alekseev Date: Wed, 12 Oct 2016 10:23:20 +0300 Subject: [PATCH] add html bar --- .../awesome-widget/package/contents/ui/qmldir | 10 ++ .../package/contents/ui/widget.qml | 151 +----------------- .../desktop-panel/package/contents/ui/qmldir | 10 ++ sources/qml/HtmlDefaultFunctionsBar.qml | 107 +++++++++++++ sources/qml/HtmlEditorButton.qml | 40 +++++ sources/qml/HtmlEditorColor.qml | 38 +++++ sources/qml/HtmlEditorFont.qml | 57 +++++++ sources/qml/qmldir.in | 4 + 8 files changed, 269 insertions(+), 148 deletions(-) create mode 100644 sources/qml/HtmlDefaultFunctionsBar.qml create mode 100644 sources/qml/HtmlEditorButton.qml create mode 100644 sources/qml/HtmlEditorColor.qml create mode 100644 sources/qml/HtmlEditorFont.qml diff --git a/sources/awesome-widget/package/contents/ui/qmldir b/sources/awesome-widget/package/contents/ui/qmldir index fe42c6d..ac87875 100644 --- a/sources/awesome-widget/package/contents/ui/qmldir +++ b/sources/awesome-widget/package/contents/ui/qmldir @@ -1,5 +1,11 @@ +# Do not edit qmldir directly it will be overrided during compilation, +# edit qml/qmldir.in file instead. + + +# common QML constants singleton general 1.0 file:///usr/share/awesomewidgets/qml/general.qml +# custom QML UI classes AboutTab file:///usr/share/awesomewidgets/qml/AboutTab.qml BugReport file:///usr/share/awesomewidgets/qml/BugReport.qml ButtonSelector file:///usr/share/awesomewidgets/qml/ButtonSelector.qml @@ -8,6 +14,10 @@ ColorSelector file:///usr/share/awesomewidgets/qml/ColorSelector.qml ComboBoxSelector file:///usr/share/awesomewidgets/qml/ComboBoxSelector.qml ExportDialog file:///usr/share/awesomewidgets/qml/ExportDialog.qml FontSelector file:///usr/share/awesomewidgets/qml/FontSelector.qml +HtmlDefaultFunctionsBar file:///usr/share/awesomewidgets/qml/HtmlDefaultFunctionsBar.qml +HtmlEditorButton file:///usr/share/awesomewidgets/qml/HtmlEditorButton.qml +HtmlEditorColor file:///usr/share/awesomewidgets/qml/HtmlEditorColor.qml +HtmlEditorFont file:///usr/share/awesomewidgets/qml/HtmlEditorFont.qml ImportDialog file:///usr/share/awesomewidgets/qml/ImportDialog.qml IntegerSelector file:///usr/share/awesomewidgets/qml/IntegerSelector.qml LineSelector file:///usr/share/awesomewidgets/qml/LineSelector.qml diff --git a/sources/awesome-widget/package/contents/ui/widget.qml b/sources/awesome-widget/package/contents/ui/widget.qml index 4819a36..726cd54 100644 --- a/sources/awesome-widget/package/contents/ui/widget.qml +++ b/sources/awesome-widget/package/contents/ui/widget.qml @@ -54,6 +54,7 @@ Item { Column { id: pageColumn anchors.fill: parent + QtControls.Label { width: parent.width horizontalAlignment: Text.AlignHCenter @@ -63,154 +64,8 @@ Item { onLinkActivated: Qt.openUrlExternally(link) } - Row { - height: implicitHeight - width: parent.width - QtControls.Button { - width: parent.width * 3 / 15 - text: i18n("Bgcolor") - - onClicked: backgroundDialog.visible = true - - QtDialogs.ColorDialog { - id: backgroundDialog - title: i18n("Select a color") - onAccepted: { - var text = textPattern.text - textPattern.text = "" + - text + "" - } - } - } - QtControls.Button { - width: parent.width * 3 / 15 - text: i18n("Font") - iconName: "font" - - onClicked: { - if (debug) console.debug("Font button") - var defaultFont = { - "color": plasmoid.configuration.fontColor, - "family": plasmoid.configuration.fontFamily, - "size": plasmoid.configuration.fontSize - } - var font = awActions.getFont(defaultFont) - if (font.applied != 1) { - if (debug) console.debug("No font selected") - return - } - - var selected = textPattern.selectedText - textPattern.remove(textPattern.selectionStart, textPattern.selectionEnd) - textPattern.insert(textPattern.cursorPosition, - "" + - selected + "") - } - } - QtControls.Button { - width: parent.width / 15 - iconName: "format-indent-more" - - onClicked: { - if (debug) console.debug("Indent button") - var selected = textPattern.selectedText - textPattern.remove(textPattern.selectionStart, textPattern.selectionEnd) - textPattern.insert(textPattern.cursorPosition, selected + "
\n") - } - } - - QtControls.Button { - width: parent.width / 15 - iconName: "format-text-bold" - - onClicked: { - if (debug) console.debug("Bold button") - var selected = textPattern.selectedText - textPattern.remove(textPattern.selectionStart, textPattern.selectionEnd) - textPattern.insert(textPattern.cursorPosition, "" + selected + "") - } - } - QtControls.Button { - width: parent.width / 15 - iconName: "format-text-italic" - - onClicked: { - if (debug) console.debug("Italic button") - var selected = textPattern.selectedText - textPattern.remove(textPattern.selectionStart, textPattern.selectionEnd) - textPattern.insert(textPattern.cursorPosition, "" + selected + "") - } - } - QtControls.Button { - width: parent.width / 15 - iconName: "format-text-underline" - - onClicked: { - if (debug) console.debug("Underline button") - var selected = textPattern.selectedText - textPattern.remove(textPattern.selectionStart, textPattern.selectionEnd) - textPattern.insert(textPattern.cursorPosition, "" + selected + "") - } - } - QtControls.Button { - width: parent.width / 15 - iconName: "format-text-strikethrough" - - onClicked: { - if (debug) console.debug("Strike button") - var selected = textPattern.selectedText - textPattern.remove(textPattern.selectionStart, textPattern.selectionEnd) - textPattern.insert(textPattern.cursorPosition, "" + selected + "") - } - } - - QtControls.Button { - width: parent.width / 15 - iconName: "format-justify-left" - - onClicked: { - if (debug) console.debug("Left button") - var selected = textPattern.selectedText - textPattern.remove(textPattern.selectionStart, textPattern.selectionEnd) - textPattern.insert(textPattern.cursorPosition, "

" + selected + "

") - } - } - QtControls.Button { - width: parent.width / 15 - iconName: "format-justify-center" - - onClicked: { - if (debug) console.debug("Center button") - var selected = textPattern.selectedText - textPattern.remove(textPattern.selectionStart, textPattern.selectionEnd) - textPattern.insert(textPattern.cursorPosition, "

" + selected + "

") - } - } - QtControls.Button { - width: parent.width / 15 - iconName: "format-justify-right" - - onClicked: { - if (debug) console.debug("Right button") - var selected = textPattern.selectedText - textPattern.remove(textPattern.selectionStart, textPattern.selectionEnd) - textPattern.insert(textPattern.cursorPosition, "

" + selected + "

") - } - } - QtControls.Button { - width: parent.width / 15 - iconName: "format-justify-fill" - - onClicked: { - if (debug) console.debug("Justify button") - var selected = textPattern.selectedText - textPattern.remove(textPattern.selectionStart, textPattern.selectionEnd) - textPattern.insert(textPattern.cursorPosition, "

" + selected + "

") - } - } + HtmlDefaultFunctionsBar { + textArea: textPattern } Row { diff --git a/sources/desktop-panel/package/contents/ui/qmldir b/sources/desktop-panel/package/contents/ui/qmldir index fe42c6d..ac87875 100644 --- a/sources/desktop-panel/package/contents/ui/qmldir +++ b/sources/desktop-panel/package/contents/ui/qmldir @@ -1,5 +1,11 @@ +# Do not edit qmldir directly it will be overrided during compilation, +# edit qml/qmldir.in file instead. + + +# common QML constants singleton general 1.0 file:///usr/share/awesomewidgets/qml/general.qml +# custom QML UI classes AboutTab file:///usr/share/awesomewidgets/qml/AboutTab.qml BugReport file:///usr/share/awesomewidgets/qml/BugReport.qml ButtonSelector file:///usr/share/awesomewidgets/qml/ButtonSelector.qml @@ -8,6 +14,10 @@ ColorSelector file:///usr/share/awesomewidgets/qml/ColorSelector.qml ComboBoxSelector file:///usr/share/awesomewidgets/qml/ComboBoxSelector.qml ExportDialog file:///usr/share/awesomewidgets/qml/ExportDialog.qml FontSelector file:///usr/share/awesomewidgets/qml/FontSelector.qml +HtmlDefaultFunctionsBar file:///usr/share/awesomewidgets/qml/HtmlDefaultFunctionsBar.qml +HtmlEditorButton file:///usr/share/awesomewidgets/qml/HtmlEditorButton.qml +HtmlEditorColor file:///usr/share/awesomewidgets/qml/HtmlEditorColor.qml +HtmlEditorFont file:///usr/share/awesomewidgets/qml/HtmlEditorFont.qml ImportDialog file:///usr/share/awesomewidgets/qml/ImportDialog.qml IntegerSelector file:///usr/share/awesomewidgets/qml/IntegerSelector.qml LineSelector file:///usr/share/awesomewidgets/qml/LineSelector.qml diff --git a/sources/qml/HtmlDefaultFunctionsBar.qml b/sources/qml/HtmlDefaultFunctionsBar.qml new file mode 100644 index 0000000..97cee45 --- /dev/null +++ b/sources/qml/HtmlDefaultFunctionsBar.qml @@ -0,0 +1,107 @@ +/*************************************************************************** + * This file is part of awesome-widgets * + * * + * awesome-widgets is free software: you can redistribute it and/or * + * modify it under the terms of the GNU General Public License as * + * published by the Free Software Foundation, either version 3 of the * + * License, or (at your option) any later version. * + * * + * awesome-widgets is distributed in the hope that it will be useful, * + * but WITHOUT ANY WARRANTY; without even the implied warranty of * + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * + * GNU General Public License for more details. * + * * + * You should have received a copy of the GNU General Public License * + * along with awesome-widgets. If not, see http://www.gnu.org/licenses/ * + ***************************************************************************/ + +import QtQuick 2.2 + + +Row { + height: implicitHeight + width: parent.width + + property var textArea + + // selectors + HtmlEditorColor { + width: parent.width * 3 / 15 + text: i18n("Bgcolor") + textField: textArea + } + HtmlEditorFont { + width: parent.width * 3 / 15 + textField: textArea + defaultFontColor: plasmoid.configuration.fontColor + defaultFontFamily: plasmoid.configuration.fontFamily + defaultFontSize: plasmoid.configuration.fontSize + } + + // new line + HtmlEditorButton { + width: parent.width / 15 + iconName: "format-indent-more" + textField: textArea + end: "
\n" + } + // font properties + HtmlEditorButton { + width: parent.width / 15 + iconName: "format-text-bold" + textField: textArea + start: "" + end: "" + } + HtmlEditorButton { + width: parent.width / 15 + iconName: "format-text-italic" + textField: textArea + start: "" + end: "" + } + HtmlEditorButton { + width: parent.width / 15 + iconName: "format-text-underline" + textField: textArea + start: "" + end: "" + } + HtmlEditorButton { + width: parent.width / 15 + iconName: "format-text-strikethrough" + textField: textArea + start: "" + end: "" + } + + // indentation + HtmlEditorButton { + width: parent.width / 15 + iconName: "format-justify-left" + textField: textArea + start: "

" + end: "

" + } + HtmlEditorButton { + width: parent.width / 15 + iconName: "format-justify-center" + textField: textArea + start: "

" + end: "

" + } + HtmlEditorButton { + width: parent.width / 15 + iconName: "format-justify-right" + textField: textArea + start: "

" + end: "

" + } + HtmlEditorButton { + width: parent.width / 15 + iconName: "format-justify-fill" + textField: textArea + start: "

" + end: "

" + } +} diff --git a/sources/qml/HtmlEditorButton.qml b/sources/qml/HtmlEditorButton.qml new file mode 100644 index 0000000..588d73d --- /dev/null +++ b/sources/qml/HtmlEditorButton.qml @@ -0,0 +1,40 @@ +/*************************************************************************** + * This file is part of awesome-widgets * + * * + * awesome-widgets is free software: you can redistribute it and/or * + * modify it under the terms of the GNU General Public License as * + * published by the Free Software Foundation, either version 3 of the * + * License, or (at your option) any later version. * + * * + * awesome-widgets is distributed in the hope that it will be useful, * + * but WITHOUT ANY WARRANTY; without even the implied warranty of * + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * + * GNU General Public License for more details. * + * * + * You should have received a copy of the GNU General Public License * + * along with awesome-widgets. If not, see http://www.gnu.org/licenses/ * + ***************************************************************************/ + +import QtQuick 2.2 +import QtQuick.Controls 1.3 as QtControls + + +QtControls.Button { + // parent object in which text will be replaced + property var textField + // start and end tags + property string start: "" + property string end: "" + + property var clickedEvent: function() { return updateText() } + onClicked: clickedEvent() + + function updateText() { + // get selected text + var selected = textField.selectedText + // remove it from widget + textField.remove(textField.selectionStart, textField.selectionEnd) + // insert edited text + textField.insert(textField.cursorPosition, start + selected + end) + } +} diff --git a/sources/qml/HtmlEditorColor.qml b/sources/qml/HtmlEditorColor.qml new file mode 100644 index 0000000..45365dc --- /dev/null +++ b/sources/qml/HtmlEditorColor.qml @@ -0,0 +1,38 @@ +/*************************************************************************** + * This file is part of awesome-widgets * + * * + * awesome-widgets is free software: you can redistribute it and/or * + * modify it under the terms of the GNU General Public License as * + * published by the Free Software Foundation, either version 3 of the * + * License, or (at your option) any later version. * + * * + * awesome-widgets is distributed in the hope that it will be useful, * + * but WITHOUT ANY WARRANTY; without even the implied warranty of * + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * + * GNU General Public License for more details. * + * * + * You should have received a copy of the GNU General Public License * + * along with awesome-widgets. If not, see http://www.gnu.org/licenses/ * + ***************************************************************************/ + +import QtQuick 2.2 +import QtQuick.Dialogs 1.1 as QtDialogs + + +HtmlEditorButton { + end: "" + + clickedEvent: function() { return colorDialog.open() } + + QtDialogs.ColorDialog { + id: colorDialog + title: i18n("Select a color") + + onAccepted: { + start = "" + textField.selectAll() + updateText() + } + } +} diff --git a/sources/qml/HtmlEditorFont.qml b/sources/qml/HtmlEditorFont.qml new file mode 100644 index 0000000..590a172 --- /dev/null +++ b/sources/qml/HtmlEditorFont.qml @@ -0,0 +1,57 @@ +/*************************************************************************** + * This file is part of awesome-widgets * + * * + * awesome-widgets is free software: you can redistribute it and/or * + * modify it under the terms of the GNU General Public License as * + * published by the Free Software Foundation, either version 3 of the * + * License, or (at your option) any later version. * + * * + * awesome-widgets is distributed in the hope that it will be useful, * + * but WITHOUT ANY WARRANTY; without even the implied warranty of * + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * + * GNU General Public License for more details. * + * * + * You should have received a copy of the GNU General Public License * + * along with awesome-widgets. If not, see http://www.gnu.org/licenses/ * + ***************************************************************************/ + +import QtQuick 2.2 + +import org.kde.plasma.private.awesomewidget 1.0 + + +HtmlEditorButton { + end: "" + iconName: "font" + text: i18n("Font") + + // backend + AWActions { + id: awActions + } + // default font properties + property string defaultFontColor + property string defaultFontFamily + property int defaultFontSize + + clickedEvent: function() { + // get new font + var defaultFont = { + "color": defaultFontColor, + "family": defaultFontFamily, + "size": defaultFontSize + } + // we are using custom selector as soon as we need to select color as well + var font = awActions.getFont(defaultFont) + + // check status + if (!font.applied) + return + + // apply font + start = "" + updateText() + } +} diff --git a/sources/qml/qmldir.in b/sources/qml/qmldir.in index 336c5b7..2261f07 100644 --- a/sources/qml/qmldir.in +++ b/sources/qml/qmldir.in @@ -14,6 +14,10 @@ ColorSelector file://@CMAKE_INSTALL_PREFIX@/@DATA_INSTALL_DIR@/@PROJECT_NAME@/qm ComboBoxSelector file://@CMAKE_INSTALL_PREFIX@/@DATA_INSTALL_DIR@/@PROJECT_NAME@/qml/ComboBoxSelector.qml ExportDialog file://@CMAKE_INSTALL_PREFIX@/@DATA_INSTALL_DIR@/@PROJECT_NAME@/qml/ExportDialog.qml FontSelector file://@CMAKE_INSTALL_PREFIX@/@DATA_INSTALL_DIR@/@PROJECT_NAME@/qml/FontSelector.qml +HtmlDefaultFunctionsBar file://@CMAKE_INSTALL_PREFIX@/@DATA_INSTALL_DIR@/@PROJECT_NAME@/qml/HtmlDefaultFunctionsBar.qml +HtmlEditorButton file://@CMAKE_INSTALL_PREFIX@/@DATA_INSTALL_DIR@/@PROJECT_NAME@/qml/HtmlEditorButton.qml +HtmlEditorColor file://@CMAKE_INSTALL_PREFIX@/@DATA_INSTALL_DIR@/@PROJECT_NAME@/qml/HtmlEditorColor.qml +HtmlEditorFont file://@CMAKE_INSTALL_PREFIX@/@DATA_INSTALL_DIR@/@PROJECT_NAME@/qml/HtmlEditorFont.qml ImportDialog file://@CMAKE_INSTALL_PREFIX@/@DATA_INSTALL_DIR@/@PROJECT_NAME@/qml/ImportDialog.qml IntegerSelector file://@CMAKE_INSTALL_PREFIX@/@DATA_INSTALL_DIR@/@PROJECT_NAME@/qml/IntegerSelector.qml LineSelector file://@CMAKE_INSTALL_PREFIX@/@DATA_INSTALL_DIR@/@PROJECT_NAME@/qml/LineSelector.qml