From 68e9db0776225168bbb52d164b05b784466a28d8 Mon Sep 17 00:00:00 2001 From: "kali kaneko (leap communications)" Date: Wed, 8 Dec 2021 19:51:42 +0100 Subject: [ui] theming stub --- gui/components/Footer.qml | 6 ++-- gui/components/Header.qml | 2 +- gui/components/Splash.qml | 2 +- gui/components/StatusBox.qml | 6 ++-- gui/components/ThemedPage.qml | 2 +- gui/components/VPNState.qml | 8 ++--- gui/gui.qrc | 20 ++++++++++-- gui/main.cpp | 2 ++ gui/main.qml | 48 +++++++++++++--------------- gui/resources/calyx/calyx-hand.png | Bin 0 -> 17894 bytes gui/resources/calyx/calyx-red-shield.png | Bin 0 -> 61556 bytes gui/resources/calyx/calyx-shield-green.png | Bin 0 -> 26219 bytes gui/resources/calyx/calyx-yellow-shield.png | Bin 0 -> 73380 bytes gui/themes/Calyx.qml | 7 ++++ gui/themes/Riseup.qml | 7 ++++ gui/themes/ThemeObject.qml | 15 +++++++++ gui/themes/theme-calyx.js | 12 +++++++ gui/themes/theme-riseup.js | 9 ++++++ 18 files changed, 104 insertions(+), 42 deletions(-) create mode 100644 gui/resources/calyx/calyx-hand.png create mode 100644 gui/resources/calyx/calyx-red-shield.png create mode 100644 gui/resources/calyx/calyx-shield-green.png create mode 100644 gui/resources/calyx/calyx-yellow-shield.png create mode 100644 gui/themes/Calyx.qml create mode 100644 gui/themes/Riseup.qml create mode 100644 gui/themes/ThemeObject.qml create mode 100644 gui/themes/theme-calyx.js create mode 100644 gui/themes/theme-riseup.js diff --git a/gui/components/Footer.qml b/gui/components/Footer.qml index 0c772ef..e6eb264 100644 --- a/gui/components/Footer.qml +++ b/gui/components/Footer.qml @@ -8,8 +8,8 @@ import "../themes/themes.js" as Theme ToolBar { - Material.background: Theme.bgColor - Material.foreground: "black" + Material.background: customTheme.bgColor + Material.foreground: "black" // TODO customize too Material.elevation: 0 visible: isFooterVisible() @@ -20,7 +20,7 @@ ToolBar { ToolButton { id: gwButton - visible: hasMultipleGateways() + visible: true anchors { verticalCenter: parent.verticalCenter diff --git a/gui/components/Header.qml b/gui/components/Header.qml index d42ea26..ee2d886 100644 --- a/gui/components/Header.qml +++ b/gui/components/Header.qml @@ -8,7 +8,7 @@ import "../themes/themes.js" as Theme ToolBar { visible: stackView.depth > 1 Material.foreground: Material.Black - Material.background: Theme.bgColor + Material.background: customTheme.bgColor Material.elevation: 0 contentHeight: settingsButton.implicitHeight diff --git a/gui/components/Splash.qml b/gui/components/Splash.qml index 1bbb412..5e62ad9 100644 --- a/gui/components/Splash.qml +++ b/gui/components/Splash.qml @@ -84,7 +84,7 @@ Page { anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.bottom anchors.bottomMargin: 50 - source: "../resources/icon-noshield.svg" + source: customTheme.iconSplash fillMode: Image.PreserveAspectFit } diff --git a/gui/components/StatusBox.qml b/gui/components/StatusBox.qml index 1d3d720..23fc271 100644 --- a/gui/components/StatusBox.qml +++ b/gui/components/StatusBox.qml @@ -19,13 +19,13 @@ Item { } Rectangle { - color: Theme.bgColor + color: customTheme.bgColor anchors.fill: parent } Rectangle { id: statusBoxBackground - color: Theme.fgColor + color: customTheme.fgColor height: 300 radius: 10 antialiasing: true @@ -110,7 +110,7 @@ Item { id: connectionImage height: 160 speed: 0.8 - source: "../resources/icon-noshield.svg" + source: customTheme.iconOff anchors.horizontalCenter: parent.horizontalCenter fillMode: Image.PreserveAspectFit OpacityAnimator on opacity{ diff --git a/gui/components/ThemedPage.qml b/gui/components/ThemedPage.qml index f7ee647..ae358cd 100644 --- a/gui/components/ThemedPage.qml +++ b/gui/components/ThemedPage.qml @@ -5,7 +5,7 @@ import "../themes/themes.js" as Theme Page { Rectangle { - color: Theme.bgColor + color: customTheme.bgColor anchors.fill: parent } } diff --git a/gui/components/VPNState.qml b/gui/components/VPNState.qml index 4cacf2f..eeeb51d 100644 --- a/gui/components/VPNState.qml +++ b/gui/components/VPNState.qml @@ -31,7 +31,7 @@ StateGroup { } PropertyChanges { target: connectionImage - source: "../resources/ravens.gif" + source: customTheme.iconConnecting anchors.horizontalCenter: parent.horizontalCenter } PropertyChanges { @@ -63,7 +63,7 @@ StateGroup { } PropertyChanges { target: connectionImage - source: "../resources/icon-noshield.svg" + source: customTheme.iconOff } PropertyChanges { target: toggleVPN @@ -96,7 +96,7 @@ StateGroup { } PropertyChanges { target: connectionImage - source: "../resources/riseup-icon.svg" + source: customTheme.iconOn } PropertyChanges { target: toggleVPN @@ -130,7 +130,7 @@ StateGroup { } PropertyChanges { target: connectionImage - source: "../resources/ravens.gif" + source: customTheme.iconConnecting anchors.horizontalCenter: parent.horizontalCenter } PropertyChanges { diff --git a/gui/gui.qrc b/gui/gui.qrc index 120e94c..71a4422 100644 --- a/gui/gui.qrc +++ b/gui/gui.qrc @@ -6,6 +6,12 @@ themes/themes.js + themes/theme-riseup.js + themes/Riseup.qml + themes/theme-calyx.js + themes/Calyx.qml + themes/ThemeObject.qml + components/MainView.qml components/ThemedPage.qml components/Splash.qml @@ -56,14 +62,22 @@ resources/reception-4@24.svg resources/arrow-left.svg resources/globe.svg - resources/ravens.svg - resources/ravens.gif - resources/riseup-icon.svg resources/spy.gif resources/quit.svg resources/alert.svg resources/angle-right.svg + + resources/ravens.svg + resources/ravens.gif + resources/riseup-icon.svg + + + resources/calyx/calyx-shield-green.png + resources/calyx/calyx-hand.png + resources/calyx/calyx-red-shield.png + resources/calyx/calyx-yellow-shield.png + resources/fonts/Poppins-Regular.ttf resources/fonts/Poppins-Bold.ttf diff --git a/gui/main.cpp b/gui/main.cpp index b4051b2..c35f14d 100644 --- a/gui/main.cpp +++ b/gui/main.cpp @@ -204,6 +204,8 @@ int main(int argc, char **argv) { ctx->setContextProperty("jsonModel", model); ctx->setContextProperty("providers", providers); ctx->setContextProperty("desktop", desktop); + // we're relying on the binary name, for now, to switch themes + ctx->setContextProperty("flavor", argv[0]); /* set some useful flags */ ctx->setContextProperty("systrayVisible", !hideSystray); diff --git a/gui/main.qml b/gui/main.qml index 1424cc6..00a84fc 100644 --- a/gui/main.qml +++ b/gui/main.qml @@ -1,11 +1,3 @@ - - -/* - TODO (ui rewrite) - See https://0xacab.org/leap/bitmask-vpn/-/issues/523 - - [ ] control actions from systray - - [ ] add gateway to systray -*/ import QtQuick 2.0 import QtQuick.Controls 2.4 import QtQuick.Dialogs 1.2 @@ -21,6 +13,7 @@ ApplicationWindow { property int appHeight: 460 property int appWidth: 280 + property alias customTheme: themeLoader.item width: appWidth minimumWidth: appWidth @@ -84,6 +77,12 @@ ApplicationWindow { anchors.fill: parent } + Loader { + id: themeLoader + source: loadTheme() + } + + Systray { id: systray } @@ -114,24 +113,6 @@ ApplicationWindow { if (isAutoLocation()) { root.selectedGateway = "auto" } - - // TODO check donation - //if (needsDonate && !shownDonate) { - // donate.visible = true; - // shownDonate = true; - // // move this to onClick of "close" for widget - // backend.donateSeen(); - //} - - /* - TODO libraries need login - if (ctx.loginDialog == 'true') { - login.visible = true - } - if (ctx.loginOk == 'true') { - loginOk.visible = true - } - */ } } @@ -173,6 +154,21 @@ ApplicationWindow { requestActivate() } + function loadTheme() { + let arr = flavor.split("/") + var providerFlavor = arr[arr.length-1] + console.debug("flavor: " + providerFlavor) + if (providerFlavor == "riseup-vpn") { + return "themes/Riseup.qml" + } else if (providerFlavor== "calyx-vpn") { + return "themes/Calyx.qml" + } else { + // we should do a Default theme, with a fallback + // mechanism + return "Riseup.qml" + } + } + onSceneGraphError: function (error, msg) { console.debug("ERROR while initializing scene") console.debug(msg) diff --git a/gui/resources/calyx/calyx-hand.png b/gui/resources/calyx/calyx-hand.png new file mode 100644 index 0000000..04ee60d Binary files /dev/null and b/gui/resources/calyx/calyx-hand.png differ diff --git a/gui/resources/calyx/calyx-red-shield.png b/gui/resources/calyx/calyx-red-shield.png new file mode 100644 index 0000000..89beef2 Binary files /dev/null and b/gui/resources/calyx/calyx-red-shield.png differ diff --git a/gui/resources/calyx/calyx-shield-green.png b/gui/resources/calyx/calyx-shield-green.png new file mode 100644 index 0000000..5e4bf19 Binary files /dev/null and b/gui/resources/calyx/calyx-shield-green.png differ diff --git a/gui/resources/calyx/calyx-yellow-shield.png b/gui/resources/calyx/calyx-yellow-shield.png new file mode 100644 index 0000000..e1a9879 Binary files /dev/null and b/gui/resources/calyx/calyx-yellow-shield.png differ diff --git a/gui/themes/Calyx.qml b/gui/themes/Calyx.qml new file mode 100644 index 0000000..50b169c --- /dev/null +++ b/gui/themes/Calyx.qml @@ -0,0 +1,7 @@ +import QtQuick 2.3 + +import './theme-calyx.js' as Theme + +ThemeObject{ + theme: Theme +} diff --git a/gui/themes/Riseup.qml b/gui/themes/Riseup.qml new file mode 100644 index 0000000..842a41a --- /dev/null +++ b/gui/themes/Riseup.qml @@ -0,0 +1,7 @@ +import QtQuick 2.3 + +import './theme-riseup.js' as Theme + +ThemeObject { + theme: Theme +} diff --git a/gui/themes/ThemeObject.qml b/gui/themes/ThemeObject.qml new file mode 100644 index 0000000..bd558e1 --- /dev/null +++ b/gui/themes/ThemeObject.qml @@ -0,0 +1,15 @@ +import QtQuick 2.3 + +QtObject { + property var theme; + // here we expose any var contained in + // the js file. This object can be accessed as the global + // customTheme, since it's loaded in main.qml + // TODO it'd be real nice if we can implement a fallback mechanism so that any value defaults to the general theme. + property string bgColor: theme.bgColor + property string fgColor: theme.fgColor + property string iconOn: theme.iconOn + property string iconOff: theme.iconOff + property string iconConnecting: theme.iconConnecting + property string iconSplash: theme.iconSplash +} diff --git a/gui/themes/theme-calyx.js b/gui/themes/theme-calyx.js new file mode 100644 index 0000000..ffdb043 --- /dev/null +++ b/gui/themes/theme-calyx.js @@ -0,0 +1,12 @@ +.pragma library + +const iconOn = "../resources/calyx/calyx-shield-green.png"; +const iconOff = "../resources/calyx/calyx-red-shield.png"; +const iconConnecting = "../resources/calyx/calyx-yellow-shield.png"; +const iconSplash = "../resources/calyx/calyx-hand.png"; + +const lightGreen = "#F2FFDA"; +const darkGreen = "#D3E9AC"; + +const bgColor = darkGreen; +const fgColor = lightGreen; diff --git a/gui/themes/theme-riseup.js b/gui/themes/theme-riseup.js new file mode 100644 index 0000000..67fb0e1 --- /dev/null +++ b/gui/themes/theme-riseup.js @@ -0,0 +1,9 @@ +.pragma library + +const iconOn = "../resources/riseup-icon.svg"; +const iconOff = "../resources/icon-noshield.svg"; +const iconConnecting = "../resources/ravens.gif"; +const iconSplash = "../resources/riseup-icon.svg"; + +const bgColor = "#f3f3f3"; +const fgColor = "#ffffff"; -- cgit v1.2.3