[ui] theming stub

18 files changed, 104 insertions, 42 deletions

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 @@
 
         <!-- gui components -->
         <file>themes/themes.js</file>
+        <file>themes/theme-riseup.js</file>
+        <file>themes/Riseup.qml</file>
+        <file>themes/theme-calyx.js</file>
+        <file>themes/Calyx.qml</file>
+        <file>themes/ThemeObject.qml</file>
+
         <file>components/MainView.qml</file>
         <file>components/ThemedPage.qml</file>
         <file>components/Splash.qml</file>
@@ -56,14 +62,22 @@
         <file>resources/reception-4@24.svg</file>
         <file>resources/arrow-left.svg</file>
         <file>resources/globe.svg</file>
-        <file>resources/ravens.svg</file>
-        <file>resources/ravens.gif</file>
-        <file>resources/riseup-icon.svg</file>
         <file>resources/spy.gif</file>
         <file>resources/quit.svg</file>
         <file>resources/alert.svg</file>
         <file>resources/angle-right.svg</file>
 
+        <!-- riseup assets -->
+        <file>resources/ravens.svg</file>
+        <file>resources/ravens.gif</file>
+        <file>resources/riseup-icon.svg</file>
+
+        <!-- calyx assets -->
+        <file>resources/calyx/calyx-shield-green.png</file>
+        <file>resources/calyx/calyx-hand.png</file>
+        <file>resources/calyx/calyx-red-shield.png</file>
+        <file>resources/calyx/calyx-yellow-shield.png</file>
+
         <!-- fonts -->
         <file alias="poppins-regular.ttf">resources/fonts/Poppins-Regular.ttf</file>
         <file alias="poppins-bold.ttf">resources/fonts/Poppins-Bold.ttf</file>
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
--- /dev/null
+++ b/gui/resources/calyx/calyx-hand.png
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
--- /dev/null
+++ b/gui/resources/calyx/calyx-red-shield.png
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
--- /dev/null
+++ b/gui/resources/calyx/calyx-shield-green.png
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
--- /dev/null
+++ b/gui/resources/calyx/calyx-yellow-shield.png
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";