Merge pull request 'ToggleSwtich' (#283) from sarah-ui into master

qml/panes/PeerSettingsPane.qml

@@ -5,6 +5,7 @@ import QtQuick.Controls.Material 2.0
 import QtQuick.Layouts 1.3
 import QtQuick.Window 2.11
 import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
 
 import "../widgets" as Widgets
 import "../styles"
@@ -109,20 +110,21 @@ Column { // peerSettingsPane
                     font.pointSize: 15 * gcd.themeScale
                 }
 
-                Widgets.Button {
-                    icon: "solid/hand-paper"
-                    text: root.blocked ? qsTr("unblock-btn") : qsTr("block-btn")
+                Widgets.ToggleSwitch {
+                    isToggled: root.blocked // ? qsTr("unblock-btn") : qsTr("block-btn")
                     anchors.right: parent.right
-                    onClicked: {
+                    onToggled: function() {
                         if (root.blocked) {
                             gcd.unblockPeer(txtOnion.text)
                         } else {
                             gcd.blockPeer(txtOnion.text)
                         }
                         root.blocked = !root.blocked
+                        isToggled = root.blocked
                     }
-
                 }
+
+
             }
 
         Widgets.HLine{}

qml/theme/CwtchDark.qml

@@ -31,4 +31,7 @@ ThemeType {
     portraitContactBadgeTextColor: whitePurple
     portraitProfileBadgeColor: mauvePurple
     dropShadowColor: darkGrayPurple
+    toggleColor: darkGrayPurple
+    toggleOnColor: whitePurple
+    toggleOffColor: mauvePurple
 }

qml/theme/CwtchLight.qml

@@ -31,4 +31,8 @@ ThemeType {
     portraitContactBadgeTextColor: whitePurple
     portraitProfileBadgeColor: brightPurple
     dropShadowColor: purple
+
+    toggleColor: whitePurple
+    toggleOnColor: hotPink
+    toggleOffColor: purple
 }

qml/theme/Theme.qml

@@ -27,6 +27,10 @@ Item {
     readonly property color portraitContactBadgeTextColor: theme.portraitContactBadgeTextColor
     readonly property color portraitProfileBadgeColor: theme.portraitProfileBadgeColor
 
+    readonly property color toggleColor: theme.toggleColor
+    readonly property color toggleOffColor: theme.toggleOffColor
+    readonly property color toggleOnColor: theme.toggleOnColor
+
     readonly property int headerSize: 50
     readonly property int usernameSize: 30
     readonly property int tabSize: 25
@@ -38,5 +42,5 @@ Item {
     readonly property int sidePaneMinSize: 700
     readonly property int doublePaneMinSize: 1000
 
-property ThemeType theme: CwtchDark { }
+property ThemeType theme: CwtchLight { }
 }

qml/theme/ThemeType.qml

@@ -23,6 +23,9 @@ QtObject {
     property color portraitContactBadgeTextColor: "red"
     property color portraitProfileBadgeColor: "red"
     property color dropShadowColor: "black"
+    property color toggleColor: "black"
+    property color toggleOnColor: "black"
+    property color toggleOffColor: "black"
 
 
     // ... more to come

qml/widgets/ToggleSwitch.qml

@@ -0,0 +1,32 @@
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+import QtQuick 2.12
+import "../theme"
+
+// ToggleSwtch implements a stylized toggle switch. It requires the user create a function called onToggled to
+// perform any additional operations needed to define the behavior of the toggle switch
+Switch {
+    property bool isToggled
+property var onToggled: function () { console.log("In Superclass") };
+
+    style: SwitchStyle {
+        handle: Rectangle {
+            implicitWidth: 25
+            implicitHeight: 25
+            radius: width*0.5
+            color: Theme.toggleColor
+            border.color: isToggled  ? Theme.toggleOnColor  :Theme.toggleOffColor
+            border.width:5
+        }
+        groove: Rectangle {
+            implicitWidth: 50
+            implicitHeight: 25
+            radius: 25*0.5
+            color: isToggled  ? Theme.toggleOnColor  :Theme.toggleOffColor
+        }
+    }
+
+    onClicked: function() {isToggled = !isToggled; onToggled()}
+}
+
+