diff --git a/qml/panes/PeerSettingsPane.qml b/qml/panes/PeerSettingsPane.qml index 2ad18f39..660ec9a7 100644 --- a/qml/panes/PeerSettingsPane.qml +++ b/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{} diff --git a/qml/theme/CwtchDark.qml b/qml/theme/CwtchDark.qml index 1f273bdc..af40ec62 100644 --- a/qml/theme/CwtchDark.qml +++ b/qml/theme/CwtchDark.qml @@ -31,4 +31,7 @@ ThemeType { portraitContactBadgeTextColor: whitePurple portraitProfileBadgeColor: mauvePurple dropShadowColor: darkGrayPurple + toggleColor: darkGrayPurple + toggleOnColor: whitePurple + toggleOffColor: mauvePurple } diff --git a/qml/theme/CwtchLight.qml b/qml/theme/CwtchLight.qml index db5dd4a3..31684afc 100644 --- a/qml/theme/CwtchLight.qml +++ b/qml/theme/CwtchLight.qml @@ -31,4 +31,8 @@ ThemeType { portraitContactBadgeTextColor: whitePurple portraitProfileBadgeColor: brightPurple dropShadowColor: purple + + toggleColor: whitePurple + toggleOnColor: hotPink + toggleOffColor: purple } diff --git a/qml/theme/Theme.qml b/qml/theme/Theme.qml index c2c96fb2..8b760fbe 100644 --- a/qml/theme/Theme.qml +++ b/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 { } } diff --git a/qml/theme/ThemeType.qml b/qml/theme/ThemeType.qml index 8dfc6870..6064cb10 100644 --- a/qml/theme/ThemeType.qml +++ b/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 diff --git a/qml/widgets/ToggleSwitch.qml b/qml/widgets/ToggleSwitch.qml new file mode 100644 index 00000000..06abf801 --- /dev/null +++ b/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()} +} + +