Merge pull request 'ButtonTextField, Some Theme Updates and Bug Fixes' (#278) from sarah-ui into master

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
 

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
 		}
 	}
+
+
 }

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
 
@@ -30,4 +30,5 @@ ThemeType {
   portraitContactBadgeColor: hotPink
   portraitContactBadgeTextColor: whitePurple
   portraitProfileBadgeColor: mauvePurple
+  dropShadowColor: darkGrayPurple
 }

qml/theme/CwtchLight.qml

@@ -30,4 +30,5 @@ ThemeType {
   portraitContactBadgeColor: hotPink
   portraitContactBadgeTextColor: whitePurple
   portraitProfileBadgeColor: brightPurple
+  dropShadowColor: purple
 }

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

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
 

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
 		}

qml/widgets/ButtonTextField.qml

@@ -0,0 +1,47 @@
+import QtQuick 2.7
+
+import QtQuick.Controls 2.13
+import QtQuick.Controls.Styles 1.4
+import QtGraphicalEffects 1.12
+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
+        layer.enabled: true
+        layer.effect: DropShadow {
+            transparentBorder: true
+            horizontalOffset: 4
+            verticalOffset: 4
+            samples:10
+            color: Theme.dropShadowColor
+        }
+    }
+
+	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();
+		}
+	}
+
+}