From ec6c2d7f826a4721e2e372c63098ad095decbe54 Mon Sep 17 00:00:00 2001 From: Dan Ballard Date: Mon, 24 Aug 2020 14:51:37 -0700 Subject: [PATCH] adding new widgets: Flickable, ScrollBar, Tab; Additional changes and fixes around messaging --- Button.qml | 12 ++++++------ EmojiDrawer.qml | 8 +++++--- Flickable.qml | 25 +++++++++++++++++++++++++ Icon.qml | 20 ++++++++++++++++---- ScrollBar.qml | 34 ++++++++++++++++++++++++++++++++++ Tab.qml | 42 ++++++++++++++++++++++++++++++++++++++++++ TextField.qml | 12 ++++++------ Toolbar.qml | 4 ++++ theme/CwtchDark.qml | 9 +++++++++ theme/CwtchLight.qml | 8 ++++++++ theme/Theme.qml | 9 +++++++++ theme/ThemeType.qml | 9 +++++++++ 12 files changed, 173 insertions(+), 19 deletions(-) create mode 100644 Flickable.qml create mode 100644 ScrollBar.qml create mode 100644 Tab.qml diff --git a/Button.qml b/Button.qml index 690f8d8..60b1e7b 100644 --- a/Button.qml +++ b/Button.qml @@ -16,8 +16,10 @@ Rectangle { height: 20 * gcd.themeScale Layout.minimumHeight: height Layout.maximumHeight: height - color: mousedown ? Theme.defaultButtonActiveColor : Theme.defaultButtonColor - border.color: mousedown ? Theme.defaultButtonActiveColor : Theme.defaultButtonColor + property color inactiveColor: Theme.defaultButtonColor + property color activeColor: Theme.defaultButtonActiveColor + color: mousedown ? activeColor : inactiveColor + border.color: mousedown ? activeColor : inactiveColor border.width: 1 radius: override_radius antialiasing: true @@ -31,14 +33,14 @@ Rectangle { property string tooltip signal clicked - RowLayout { anchors.centerIn: parent + spacing: 6 * gcd.themeScale Image { - anchors.left: parent.left id: ico source: icon!="" ? gcd.assetPath + "fontawesome/"+icon+".svg" : ""; + visible: icon != "" height: button.height / 2 sourceSize.height: button.height / 2 } @@ -49,8 +51,6 @@ Rectangle { font.styleName: "ExtraBold" font.pixelSize: button.height / 2 color: Theme.defaultButtonTextColor - anchors.left: ico.right - anchors.leftMargin: 6 visible: button.text != "" && button.text != undefined } diff --git a/EmojiDrawer.qml b/EmojiDrawer.qml index 9c1336a..41f860c 100644 --- a/EmojiDrawer.qml +++ b/EmojiDrawer.qml @@ -12,12 +12,14 @@ import "theme" Item { id: root - height: 0 + implicitHeight: 0 + height: implicitHeight property int size: 24 property int requestedHeight: size * 8 property string morph: "clw" property string color: "v1" property bool narrowMode: width < (txtSearch.width + root.size * 14 + btnX.width) + signal picked(string shortcode) signal slideopen() signal slideclosed() @@ -31,7 +33,7 @@ Item { PropertyAnimation { id: animClose; target: root; - properties: "height"; + properties: "implicitHeight"; to: 0; duration: 400; } @@ -39,7 +41,7 @@ Item { PropertyAnimation { id: animOpen; target: root; - properties: "height"; + properties: "implicitHeight"; to: requestedHeight; duration: 400; } diff --git a/Flickable.qml b/Flickable.qml new file mode 100644 index 0000000..bad36b9 --- /dev/null +++ b/Flickable.qml @@ -0,0 +1,25 @@ +//import QtGraphicalEffects 1.0 +//import QtQuick 2.7 +//import QtQuick.Controls 2.4 +//import QtQuick.Controls.Material 2.0 + +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import QtQuick.Controls.impl 2.12 + +import QtQuick.Templates 2.12 as T + +//import QtQuick.Layouts 1.3 + +import "../opaque" as Opaque +import "../opaque/theme" +import "../const" + +Flickable { + id: sv + clip: true + + boundsBehavior: Flickable.StopAtBounds + + ScrollBar.vertical: Opaque.ScrollBar {} +} diff --git a/Icon.qml b/Icon.qml index 697a5a9..34dc462 100644 --- a/Icon.qml +++ b/Icon.qml @@ -16,7 +16,7 @@ Rectangle { property bool isHover: false - color: isHover ? backgroundColor : hilightBackgroundColor + color: isHover ? hilightBackgroundColor : backgroundColor property alias iconColor: iconColorOverlay.color @@ -26,20 +26,32 @@ Rectangle { signal clicked() + //property int horizontalPadding: 0 + //property int verticalPadding: 0 + + property int size: Math.min(height, width) + + //property int innerHeight: height - (verticalPadding*2) + //property int innerWidth: width - (horizontalPadding*2) + Image { id: srcImg - anchors.fill: parent + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + height: size + width: size antialiasing: true smooth: true visible: false // Apparently qml can now only DOWN-SCALE/SHRINK the SVG, so with this hack it which won't cause blurriness/pixelation - sourceSize.width: root.width*2 - sourceSize.height: root.height*2 + sourceSize.width: size*2 + sourceSize.height: size*2 } ColorOverlay{ id: iconColorOverlay anchors.fill: srcImg + source: srcImg antialiasing: true diff --git a/ScrollBar.qml b/ScrollBar.qml new file mode 100644 index 0000000..24fe8f5 --- /dev/null +++ b/ScrollBar.qml @@ -0,0 +1,34 @@ +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import QtQuick.Controls.impl 2.12 + +import QtQuick.Templates 2.12 as T + +import "../opaque" as Opaque +import "../opaque/theme" +import "../const" + + +T.ScrollBar { + palette.dark: Theme.defaultButtonColor + palette.mid: Theme.dividerColor + + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding) + + padding: 2 + visible: control.policy !== T.ScrollBar.AlwaysOff && control.size < 1.0 + + contentItem: Rectangle { + implicitWidth: control.interactive ? 6 : 2 + implicitHeight: control.interactive ? 6 : 2 + + radius: width / 2 + color: control.pressed ? control.palette.dark : control.palette.mid + opacity: 1.0 + } +} diff --git a/Tab.qml b/Tab.qml new file mode 100644 index 0000000..9c29815 --- /dev/null +++ b/Tab.qml @@ -0,0 +1,42 @@ +import QtGraphicalEffects 1.0 +import QtQuick 2.7 +import QtQuick.Controls 2.4 +import QtQuick.Controls.Material 2.0 +import QtQuick.Layouts 1.3 + +import "fonts/Twemoji.js" as T +import "theme" +import "fonts" +import "." as Opaque + +Rectangle { + id: root + + property bool active: false + property alias text: label.text + + color: Theme.backgroundMainColor + + signal clicked + + height: label.height + + + Opaque.ScalingLabel { + id: label + anchors.horizontalCenter: parent.horizontalCenter + color: root.active ? Theme.mainTextColor : Theme.altTextColor + size: Theme.tabSize + + font.family: Fonts.applicationFontRegular.name + font.styleName: "Bold" + } + + MouseArea { + anchors.fill: parent + onClicked: { + parent.focus = true + parent.clicked() + } + } +} diff --git a/TextField.qml b/TextField.qml index 5469020..762f926 100644 --- a/TextField.qml +++ b/TextField.qml @@ -3,13 +3,13 @@ import QtQuick.Controls 2.13 import "theme" /*! - \qmltype TextField - \inqmlmodule Opaque - \inherits QtQuick::Item - \index Index - \brief Basic single-line text input box. +\qmltype TextField +\inqmlmodule Opaque +\inherits QtQuick::Item +\index Index +\brief Basic single-line text input box. - For example: +For example: */ TextField { diff --git a/Toolbar.qml b/Toolbar.qml index 8cb3ffd..65d55d0 100644 --- a/Toolbar.qml +++ b/Toolbar.qml @@ -7,6 +7,8 @@ import QtQuick.Layouts 1.3 import "fonts/Twemoji.js" as T import "." as Widgets import "theme" +import "../opaque/fonts" + Rectangle { // Global Toolbar id: toolbar @@ -74,6 +76,8 @@ Rectangle { // Global Toolbar color: Theme.mainTextColor size: Theme.tabSize * gcd.themeScale weight: Font.Bold + font.family: Fonts.applicationFontRegular.name + font.styleName: "Bold" text: "global toolbar" //extraPadding: btnRightMenu.width + 10 diff --git a/theme/CwtchDark.qml b/theme/CwtchDark.qml index c280ce7..0a4f150 100644 --- a/theme/CwtchDark.qml +++ b/theme/CwtchDark.qml @@ -15,12 +15,15 @@ ThemeType { backgroundPaneColor: deepPurple backgroundHilightElementColor: deepPurple + dividerColor: mauvePurple + mainTextColor: purple altTextColor: mauvePurple hilightElementTextColor: purple defaultButtonColor: mauvePurple defaultButtonActiveColor: pink defaultButtonTextColor: whitePurple + defaultButtonDisabledColor: softPurple portraitOnlineBorderColor: whitePurple portraitOnlineBackgroundColor: darkGreyPurple @@ -63,4 +66,10 @@ ThemeType { messageFromMeTextColor: darkGreyPurple messageFromOtherBackgroundColor: deepPurple messageFromOtherTextColor: whitePurple + + messageStatusNormalColor: mauvePurple + messageStatusBlockedColor: lightGrey + messageStatusBlockedTextColor: whitePurple + messageStatusAlertColor: darkGreyPurple + messageStatusAlertTextColor: whitePurple } diff --git a/theme/CwtchLight.qml b/theme/CwtchLight.qml index 57dacb7..f12e839 100644 --- a/theme/CwtchLight.qml +++ b/theme/CwtchLight.qml @@ -14,6 +14,7 @@ ThemeType { backgroundPaneColor: softPurple backgroundHilightElementColor: softPurple + dividerColor: purple mainTextColor: darkPurple altTextColor: purple @@ -21,6 +22,7 @@ ThemeType { defaultButtonColor: hotPink defaultButtonActiveColor: pink defaultButtonTextColor: whitePurple + defaultButtonDisabledColor: purple portraitOnlineBorderColor: darkPurple portraitOnlineBackgroundColor: darkPurple @@ -63,4 +65,10 @@ ThemeType { messageFromMeTextColor: whitePurple messageFromOtherBackgroundColor: purple messageFromOtherTextColor: darkPurple + + messageStatusNormalColor: purple + messageStatusBlockedColor: lightGrey + messageStatusBlockedTextColor: whitePurple + messageStatusAlertColor: darkPurple + messageStatusAlertTextColor: whitePurple } diff --git a/theme/Theme.qml b/theme/Theme.qml index 3e416be..b4f36de 100644 --- a/theme/Theme.qml +++ b/theme/Theme.qml @@ -7,12 +7,15 @@ Item { readonly property color backgroundPaneColor: theme.backgroundPaneColor readonly property color backgroundHilightElementColor: theme.backgroundHilightElementColor + readonly property color dividerColor: theme.dividerColor + readonly property color mainTextColor: theme.mainTextColor readonly property color altTextColor: theme.altTextColor readonly property color hilightElementTextColor: theme.hilightElementTextColor readonly property color defaultButtonColor: theme.defaultButtonColor readonly property color defaultButtonActiveColor: theme.defaultButtonActiveColor readonly property color defaultButtonTextColor: theme.defaultButtonTextColor + readonly property color defaultButtonDisabledColor: theme.defaultButtonDisabledColor readonly property color dropShadowColor: theme.dropShadowColor readonly property color dropShadowPaneColor: theme.dropShadowPaneColor @@ -57,6 +60,12 @@ Item { readonly property color messageFromOtherBackgroundColor: theme.messageFromOtherBackgroundColor readonly property color messageFromOtherTextColor: theme.messageFromOtherTextColor + readonly property color messageStatusNormalColor: theme.messageStatusNormalColor + readonly property color messageStatusBlockedColor: theme.messageStatusBlockedColor + readonly property color messageStatusBlockedTextColor: theme.messageStatusBlockedTextColor + readonly property color messageStatusAlertColor: theme.messageStatusAlertColor + readonly property color messageStatusAlertTextColor: theme.messageStatusAlertTextColor + readonly property int headerSize: 50 readonly property int usernameSize: 30 readonly property int tabSize: 25 diff --git a/theme/ThemeType.qml b/theme/ThemeType.qml index 512a594..da5a8c7 100644 --- a/theme/ThemeType.qml +++ b/theme/ThemeType.qml @@ -5,12 +5,15 @@ QtObject { property color backgroundPaneColor: "red" property color backgroundHilightElementColor: "red" + property color dividerColor: "red" + property color mainTextColor: "red" property color altTextColor: "red" property color hilightElementTextColor: "red" property color defaultButtonColor: "red" property color defaultButtonActiveColor: "red" property color defaultButtonTextColor: "red" + property color defaultButtonDisabledColor: "red" property color portraitOnlineBorderColor: "red" property color portraitOnlineBackgroundColor: "red" @@ -54,6 +57,12 @@ QtObject { property color messageFromOtherBackgroundColor: "red" property color messageFromOtherTextColor: "red" + property color messageStatusNormalColor: "red" + property color messageStatusBlockedColor: "red" + property color messageStatusBlockedTextColor: "red" + property color messageStatusAlertColor: "red" + property color messageStatusAlertTextColor: "red" + // ... more to come