diff --git a/gui/components/StatusBox.qml b/gui/components/StatusBox.qml index 2b8ab4dc320d58badca92ab81a593a1128fe268b..13709a6bca679e88b6ad89b216c0f0f4285759c0 100644 --- a/gui/components/StatusBox.qml +++ b/gui/components/StatusBox.qml @@ -134,26 +134,27 @@ Item { VerticalSpacer { id: spacerPostImg visible: true - height: 20 + height: 50 Layout.alignment: Qt.AlignBottom } - MaterialButton { + RoundButton { id: toggleVPN - // FIXME - this is a workaround. It will BREAK with i18n - width: 100 - spacing: 8 + width: 48 + height: 48 anchors.horizontalCenter: parent.horizontalCenter Layout.alignment: Qt.AlignBottom - font { - pixelSize: Theme.buttonFontSize - capitalization: Font.Capitalize - family: lightFont.name - bold: false - } + padding: 0 + display: AbstractButton.IconOnly HoverHandler { cursorShape: Qt.PointingHandCursor } + icon { + source: Theme.buttonDisconnected + height: 48 + width: 48 + color: "transparent" + } onClicked: { if (vpn.state === "on" | vpn.state === "starting") { diff --git a/gui/components/VPNState.qml b/gui/components/VPNState.qml index 72219b3a3dd6729c04b87108de7ddc24198920aa..ffbac277d569d9ab9f1599b26c5f8f0211e2980e 100644 --- a/gui/components/VPNState.qml +++ b/gui/components/VPNState.qml @@ -63,9 +63,7 @@ StateGroup { PropertyChanges { target: toggleVPN enabled: false - // XXX this is a fake cancel, won't do anything at this point. We need - // to queue this action for when the openvpn process becomes available. - text: ("Cancel") + icon.source: Theme.buttonConnecting } PropertyChanges { target: systray @@ -96,7 +94,7 @@ StateGroup { PropertyChanges { target: toggleVPN enabled: true - text: qsTr("Turn on") + icon.source: Theme.buttonDisconnected } PropertyChanges { target: systray @@ -131,7 +129,7 @@ StateGroup { PropertyChanges { target: toggleVPN enabled: true - text: qsTr("Turn off") + icon.source: Theme.buttonConnected } PropertyChanges { target: systray @@ -168,7 +166,7 @@ StateGroup { PropertyChanges { target: toggleVPN enabled: true - text: qsTr("Cancel") + icon.source: Theme.buttonConnecting } PropertyChanges { target: systray @@ -204,6 +202,10 @@ StateGroup { target: backgroundImage source: customTheme.bgConnecting } + PropertyChanges { + target: toggleVPN + icon.source: Theme.buttonConnecting + } PropertyChanges { target: systray tooltip: toHuman("stopping") diff --git a/gui/gui.qrc b/gui/gui.qrc index 26cd9a4afed395fde28b779f2f1120256780ecce..915373f3a01d694a77e53b5f3a5c9665cae78943 100644 --- a/gui/gui.qrc +++ b/gui/gui.qrc @@ -69,6 +69,9 @@ <file>resources/alert.svg</file> <file>resources/angle-right.svg</file> <file>resources/snowflake.svg</file> + <file>resources/button_green.png</file> + <file>resources/button_yellow.png</file> + <file>resources/button_red.png</file> <!-- riseup assets --> <file>resources/ravens.svg</file> diff --git a/gui/resources/button_green.png b/gui/resources/button_green.png new file mode 100644 index 0000000000000000000000000000000000000000..a6107b94782b8bef7587ea92316760782c8354b9 Binary files /dev/null and b/gui/resources/button_green.png differ diff --git a/gui/resources/button_red.png b/gui/resources/button_red.png new file mode 100644 index 0000000000000000000000000000000000000000..e9eb79a73c947531d33bdafbcdfaab80157185b1 Binary files /dev/null and b/gui/resources/button_red.png differ diff --git a/gui/resources/button_yellow.png b/gui/resources/button_yellow.png new file mode 100644 index 0000000000000000000000000000000000000000..99cd6015ad8df11018adf44c2875ce0ea4e07067 Binary files /dev/null and b/gui/resources/button_yellow.png differ diff --git a/gui/themes/themes.js b/gui/themes/themes.js index 4c4d3a92be67f8461e9570c3f1c8b4b38bf19131..a6b507f35f370e33302bcb1a31c0934908008f5e 100644 --- a/gui/themes/themes.js +++ b/gui/themes/themes.js @@ -64,5 +64,9 @@ const blueButton = { const buttonFontSize = 18; const buttonColor = "#eeeeee"; +const buttonDisconnected = "../resources/button_red.png"; +const buttonConnecting = "../resources/button_yellow.png"; +const buttonConnected = "../resources/button_green.png"; + const bgColor = "#f3f3f3"; const fgColor = "#ffffff";