From ce8e46a4dd40f4104271e90bc841977850ccaada Mon Sep 17 00:00:00 2001 From: Sarah Jamie Lewis Date: Mon, 27 Apr 2020 11:31:53 -0700 Subject: [PATCH 1/2] ButtonTextField, Some Theme Updates and Bug Fixes --- qml/main.qml | 2 +- qml/panes/PeerSettingsPane.qml | 67 ++++++++++++++++----------------- qml/theme/CwtchDark.qml | 4 +- qml/theme/Theme.qml | 2 +- qml/widgets/Button.qml | 7 ++-- qml/widgets/ButtonTextField.qml | 37 ++++++++++++++++++ 6 files changed, 78 insertions(+), 41 deletions(-) create mode 100644 qml/widgets/ButtonTextField.qml diff --git a/qml/main.qml b/qml/main.qml index c83d2948..64bdb244 100644 --- a/qml/main.qml +++ b/qml/main.qml @@ -144,7 +144,7 @@ ApplicationWindow { } Rectangle { // THE RIGHT PANE WHERE THE MESSAGES AND STUFF GO - color: "#EEEEFF" + color: Theme.backgroundPaneColor Layout.fillWidth: true Layout.fillHeight: true diff --git a/qml/panes/PeerSettingsPane.qml b/qml/panes/PeerSettingsPane.qml index 67659f70..64a33b70 100644 --- a/qml/panes/PeerSettingsPane.qml +++ b/qml/panes/PeerSettingsPane.qml @@ -8,12 +8,14 @@ import QtQuick.Controls 1.4 import "../widgets" as Widgets import "../styles" +import "../theme" ColumnLayout { // peerSettingsPane id: root anchors.fill: parent property bool blocked + Widgets.StackToolbar { id: toolbar aux.visible: false @@ -38,40 +40,34 @@ ColumnLayout { // peerSettingsPane leftPadding: 10 spacing: 5 - Widgets.ScalingLabel { + Widgets.EllipsisLabel { + color: Theme.mainTextColor text: qsTr("address-label") } - TextField { + Widgets.ButtonTextField { id: txtOnion - style: CwtchTextFieldStyle{ width: tehcol.width * 0.8 } + //style: CwtchTextFieldStyle{ width: tehcol.width * 0.8 } readOnly: true + button_text: qsTr("copy-btn") + onClicked: { + //: notification: copied to clipboard + gcd.popup(qsTr("copied-to-clipboard-notification")) + txtOnion.selectAll() + txtOnion.copy() + } } - Widgets.Button { - icon: "regular/clipboard" - text: qsTr("copy-btn") - onClicked: { - //: notification: copied to clipboard - gcd.popup(qsTr("copied-to-clipboard-notification")) - txtOnion.selectAll() - txtOnion.copy() - } - } - - Widgets.ScalingLabel{ + Widgets.EllipsisLabel { + color: Theme.mainTextColor text: qsTr("display-name-label") } - TextField { + + Widgets.ButtonTextField { id: txtDisplayName - style: CwtchTextFieldStyle{ width: tehcol.width * 0.8 } - } - - Widgets.Button { - text: qsTr("save-btn") - + button_text: qsTr("save-btn") onClicked: { gcd.savePeerSettings(txtOnion.text, txtDisplayName.text) theStack.title = txtDisplayName.text @@ -80,19 +76,20 @@ ColumnLayout { // peerSettingsPane } - Widgets.Button { - icon: "solid/hand-paper" - text: root.blocked ? qsTr("unblock-btn") : qsTr("block-btn") - onClicked: { - if (root.blocked) { - gcd.unblockPeer(txtOnion.text) - } else { - gcd.blockPeer(txtOnion.text) - } - root.blocked = !root.blocked - } - } + Widgets.Button { + icon: "solid/hand-paper" + text: root.blocked ? qsTr("unblock-btn") : qsTr("block-btn") + + onClicked: { + if (root.blocked) { + gcd.unblockPeer(txtOnion.text) + } else { + gcd.blockPeer(txtOnion.text) + } + root.blocked = !root.blocked + } + } Widgets.Button { icon: "regular/trash-alt" @@ -118,4 +115,6 @@ ColumnLayout { // peerSettingsPane root.blocked = blocked } } + + } \ No newline at end of file diff --git a/qml/theme/CwtchDark.qml b/qml/theme/CwtchDark.qml index 14d0ed2b..b3849ff6 100644 --- a/qml/theme/CwtchDark.qml +++ b/qml/theme/CwtchDark.qml @@ -10,10 +10,10 @@ ThemeType { readonly property color hotPink: "#D01972" backgroundMainColor: darkGrayPurple - backgroundPaneColor: mauvePurple + backgroundPaneColor: deepPurple mainTextColor: whitePurple - defaultButtonColor: hotPink + defaultButtonColor: mauvePurple defaultButtonActiveColor: pink defaultButtonTextColor: whitePurple diff --git a/qml/theme/Theme.qml b/qml/theme/Theme.qml index 5fc5685b..ce61e4ab 100644 --- a/qml/theme/Theme.qml +++ b/qml/theme/Theme.qml @@ -36,5 +36,5 @@ Item { readonly property int sidePaneMinSize: 700 readonly property int doublePaneMinSize: 1000 - property ThemeType theme: CwtchLight { } + property ThemeType theme: CwtchDark{ } } \ No newline at end of file diff --git a/qml/widgets/Button.qml b/qml/widgets/Button.qml index dacb9c17..4090c8ad 100644 --- a/qml/widgets/Button.qml +++ b/qml/widgets/Button.qml @@ -16,12 +16,13 @@ Rectangle { Layout.minimumHeight: height Layout.maximumHeight: height color: mousedown ? Theme.defaultButtonActiveColor : Theme.defaultButtonColor - border.color: Theme.defaultButtonColor + border.color: mousedown ? Theme.defaultButtonActiveColor : Theme.defaultButtonColor border.width: 1 - radius: (height / 2.0) + radius: override_radius antialiasing: true property bool checked: false + property double override_radius: (height / 2.0) property alias text: buttonText.text property alias font: buttonText.font.family property string icon @@ -36,7 +37,7 @@ Rectangle { Image { anchors.left: parent.left id: ico - source: gcd.assetPath + "fontawesome/"+(icon!=""?icon:"regular/window-maximize")+".svg" + source: icon!="" ? gcd.assetPath + "fontawesome/"+icon+".svg" : ""; height: button.height / 2 sourceSize.height: button.height / 2 } diff --git a/qml/widgets/ButtonTextField.qml b/qml/widgets/ButtonTextField.qml new file mode 100644 index 00000000..9f5227ef --- /dev/null +++ b/qml/widgets/ButtonTextField.qml @@ -0,0 +1,37 @@ +import QtQuick 2.7 + +import QtQuick.Controls 2.13 +import QtQuick.Controls.Styles 1.4 +import "." as Widgets +import "../theme" + + +// ButtonTextField integrates a text field and a button +TextField { + color: Theme.mainTextColor + font.pointSize: 10 * gcd.themeScale + width: parent.width - 20 + property string icon + property string button_text + signal clicked + smooth: true + + background: Rectangle { + radius: 10 + color: Theme.backgroundMainColor + border.color: Theme.backgroundMainColor + } + + Widgets.Button { + icon: "" + text: button_text + anchors { top: parent.top; right: parent.right } + override_radius: 10 + height: parent.height; width: parent.height * 4 + + onClicked: { + parent.focus = true; + parent.clicked(); + } + } +} \ No newline at end of file From 00522884ae15464c2d524edec762bf6fe4a38fec Mon Sep 17 00:00:00 2001 From: Sarah Jamie Lewis Date: Mon, 27 Apr 2020 11:56:41 -0700 Subject: [PATCH 2/2] Add DropShadow --- qml/theme/CwtchDark.qml | 1 + qml/theme/CwtchLight.qml | 1 + qml/theme/Theme.qml | 4 +++- qml/theme/ThemeType.qml | 2 ++ qml/widgets/ButtonTextField.qml | 10 ++++++++++ 5 files changed, 17 insertions(+), 1 deletion(-) diff --git a/qml/theme/CwtchDark.qml b/qml/theme/CwtchDark.qml index b3849ff6..e7e039af 100644 --- a/qml/theme/CwtchDark.qml +++ b/qml/theme/CwtchDark.qml @@ -30,4 +30,5 @@ ThemeType { portraitContactBadgeColor: hotPink portraitContactBadgeTextColor: whitePurple portraitProfileBadgeColor: mauvePurple + dropShadowColor: darkGrayPurple } \ No newline at end of file diff --git a/qml/theme/CwtchLight.qml b/qml/theme/CwtchLight.qml index aad84706..cf68189f 100644 --- a/qml/theme/CwtchLight.qml +++ b/qml/theme/CwtchLight.qml @@ -30,4 +30,5 @@ ThemeType { portraitContactBadgeColor: hotPink portraitContactBadgeTextColor: whitePurple portraitProfileBadgeColor: brightPurple + dropShadowColor: purple } \ No newline at end of file diff --git a/qml/theme/Theme.qml b/qml/theme/Theme.qml index ce61e4ab..859d0de4 100644 --- a/qml/theme/Theme.qml +++ b/qml/theme/Theme.qml @@ -11,6 +11,8 @@ Item { readonly property color defaultButtonActiveColor: theme.defaultButtonActiveColor readonly property color defaultButtonTextColor: theme.defaultButtonTextColor + readonly property color dropShadowColor: theme.dropShadowColor + readonly property color portraitOnlineBorderColor: theme.portraitOnlineBorderColor readonly property color portraitOnlineBackgroundColor: theme.portraitOnlineBackgroundColor readonly property color portraitOnlineTextColor: theme.portraitOnlineTextColor @@ -36,5 +38,5 @@ Item { readonly property int sidePaneMinSize: 700 readonly property int doublePaneMinSize: 1000 - property ThemeType theme: CwtchDark{ } + property ThemeType theme: CwtchLight { } } \ No newline at end of file diff --git a/qml/theme/ThemeType.qml b/qml/theme/ThemeType.qml index 174c190a..c4ff5af4 100644 --- a/qml/theme/ThemeType.qml +++ b/qml/theme/ThemeType.qml @@ -22,6 +22,8 @@ QtObject { property color portraitContactBadgeColor: "red" property color portraitContactBadgeTextColor: "red" property color portraitProfileBadgeColor: "red" + property color dropShadowColor: "black" + // ... more to come diff --git a/qml/widgets/ButtonTextField.qml b/qml/widgets/ButtonTextField.qml index 9f5227ef..e600c222 100644 --- a/qml/widgets/ButtonTextField.qml +++ b/qml/widgets/ButtonTextField.qml @@ -2,6 +2,7 @@ import QtQuick 2.7 import QtQuick.Controls 2.13 import QtQuick.Controls.Styles 1.4 +import QtGraphicalEffects 1.12 import "." as Widgets import "../theme" @@ -20,6 +21,14 @@ TextField { radius: 10 color: Theme.backgroundMainColor border.color: Theme.backgroundMainColor + layer.enabled: true + layer.effect: DropShadow { + transparentBorder: true + horizontalOffset: 4 + verticalOffset: 4 + samples:10 + color: Theme.dropShadowColor + } } Widgets.Button { @@ -34,4 +43,5 @@ TextField { parent.clicked(); } } + } \ No newline at end of file