White theme

1 files changed, 225 insertions, 209 deletions

diff --git a/components/TitleBar.qml b/components/TitleBar.qml
index be1ef37c..e48feae8 100644
--- a/components/TitleBar.qml
+++ b/components/TitleBar.qml
@@ -26,304 +26,320 @@
 // STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import QtQuick 2.5
+import QtQuick 2.9
 import QtQuick.Window 2.0
-import QtQuick.Layouts 1.1
+import QtGraphicalEffects 1.0
+import QtQuick.Layouts 1.2
 
-Rectangle {
-    id: titleBar
-
-    height: {
-        if(!customDecorations || isMobile){
-            return 0;
-        }
-
-        if(small) return 38 * scaleRatio;
-        else return 50 * scaleRatio;
-    }
-    y: -height
-    z: 1
+import FontAwesome 1.0
+import "." as MoneroComponents
+import "effects/" as MoneroEffects
 
-    property string title
+Rectangle {
+    id: root
     property int mouseX: 0
-    property bool containsMouse: false
     property bool basicButtonVisible: false
     property bool customDecorations: persistentSettings.customDecorations
-    property bool showWhatIsButton: true
-    property bool showMinimizeButton: false
-    property bool showMaximizeButton: false
+    property bool showMinimizeButton: true
+    property bool showMaximizeButton: true
     property bool showCloseButton: true
-    property bool showMoneroLogo: false
-    property bool small: false
-    property alias titleBarGradientImageOpacity: titleBarGradientImage.opacity
-    property bool orange: false
-    property string buttonHoverColor: "#262626"
-    property string buttonHoverColorOrange: "#44FFFFFF"
+
+    height: {
+        if(!persistentSettings.customDecorations || isMobile) return 0;
+        return 50 * scaleRatio;
+    }
+
+    z: 1
+    color: "transparent"
 
     signal closeClicked
     signal maximizeClicked
     signal minimizeClicked
+    signal languageClicked
     signal goToBasicVersion(bool yes)
 
-    Item {
-        // Background gradient
-        width: parent.width
-        height: parent.height
-        z: parent.z + 1
-
-        Image {
-           id: titleBarGradientImage
-           visible: !titleBar.orange
-           anchors.fill: parent
-           height: titleBar.height
-           width: titleBar.width
-           source: "../images/titlebarGradient.jpg"
-        }
-
-        Rectangle {
-            visible: titleBar.orange
-            width: parent.width
-            height: parent.height
-            color: "#ff6600"
-        }
-    }
-
-    Item {
-        id: titlebarlogo
-        width: 125
-        height: parent.height
-        anchors.centerIn: parent
-        visible: customDecorations
-        z: parent.z + 1
-
-        Image {
-            visible: !isMobile && showMoneroLogo && !titleBar.orange
-            anchors.left: parent.left
-            anchors.top: parent.top
-            anchors.topMargin: 11
-            width: 125
-            height: 28
-            source: "../images/titlebarLogo.png"
+    state: "default"
+    states: [
+        State {
+            name: "default";
+            PropertyChanges { target: btnSidebarCollapse; visible: true}
+            PropertyChanges { target: btnLanguageToggle; visible: true}
+        }, State {
+            // show only theme switcher and window controls
+            name: "essentials";
+            PropertyChanges { target: btnSidebarCollapse; visible: false}
+            PropertyChanges { target: btnLanguageToggle; visible: false}
         }
+    ]
 
-        Image {
-            visible: !isMobile && showMoneroLogo && titleBar.orange
-            anchors.left: parent.left
-            anchors.top: parent.top
-            anchors.topMargin: 11
-            width: 132
-            height: 22
-            source: "../images/moneroLogo_white.png"
-        }
-    }
-
-    Label {
-        id: titleLabel
-        visible: !showMoneroLogo && customDecorations && titleBar.title !== ''
-        anchors.centerIn: parent
-        fontSize: 18
-        text: titleBar.title
-        z: parent.z + 1
+    MoneroEffects.GradientBackground {
+        anchors.fill: parent
+        duration: 300
+        fallBackColor: MoneroComponents.Style.middlePanelBackgroundColor
+        initialStartColor: MoneroComponents.Style.titleBarBackgroundGradientStart
+        initialStopColor: MoneroComponents.Style.titleBarBackgroundGradientStop
+        blackColorStart: MoneroComponents.Style._b_titleBarBackgroundGradientStart
+        blackColorStop: MoneroComponents.Style._b_titleBarBackgroundGradientStop
+        whiteColorStart: MoneroComponents.Style._w_titleBarBackgroundGradientStart
+        whiteColorStop: MoneroComponents.Style._w_titleBarBackgroundGradientStop
+        start: Qt.point(width, 0)
+        end: Qt.point(0, 0)
     }
 
     RowLayout {
-        anchors.left: parent.left
-        anchors.top: parent.top
-        width: 40
-        height: parent.height
-        spacing: 0
         z: parent.z + 2
+        spacing: 0
+        anchors.fill: parent
 
+        // collapse sidebar
         Rectangle {
+            id: btnSidebarCollapse
+            visible: root.basicButtonVisible
+            color: "transparent"
+            Layout.preferredWidth: parent.height
             Layout.preferredHeight: parent.height
-            Layout.preferredWidth: Layout.preferredHeight
-
-            id: goToBasicVersionButton
-            property bool containsMouse: titleBar.mouseX >= x && titleBar.mouseX <= x + width
-            property bool checked: false
-            color:  "transparent"
-            height: titleBar.height
-            width: height
-            visible: !titleBar.orange && titleBar.basicButtonVisible
 
-            Image {
-                width: 14
+            MoneroEffects.ImageMask {
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
                 height: 14
-                anchors.centerIn: parent
-                source: "../images/expand.png"
+                width: 14
+                image: MoneroComponents.Style.titleBarExpandSource
+                color: MoneroComponents.Style.defaultFontColor
+                fontAwesomeFallbackIcon: FontAwesome.cube
+                fontAwesomeFallbackSize: 14
+                fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.9
+                opacity: 0.75
             }
 
             MouseArea {
-                id: basicMouseArea
-                hoverEnabled: true
                 anchors.fill: parent
+                hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: { goToBasicVersionButton.color = titleBar.orange ? titleBar.buttonHoverColorOrange : titleBar.buttonHoverColor }
-                onExited: goToBasicVersionButton.color = "transparent";
-                onClicked: {
-                    releaseFocus()
-                    parent.checked = !parent.checked
-                    titleBar.goToBasicVersion(leftPanel.visible)
-                }
+                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                onExited: parent.color = "transparent"
+                onClicked: root.goToBasicVersion(leftPanel.visible)
             }
         }
 
         // language selection
         Rectangle {
+            id: btnLanguageToggle
+            color: "transparent"
+            Layout.preferredWidth: parent.height
             Layout.preferredHeight: parent.height
-            Layout.preferredWidth: Layout.preferredHeight
-            visible: !titleBar.orange && persistentSettings.customDecorations
-
-            id: languageSelection
-            property bool containsMouse: titleBar.mouseX >= x && titleBar.mouseX <= x + width
-            property bool checked: false
-            color:  "transparent"
-            height: titleBar.height
-            width: height
-            z: parent.z + 2
 
-            Image {
-                width: 14
-                height: 14
-                anchors.centerIn: parent
-                source: "../images/langFlagGrey.png"
+            Text {
+                text: FontAwesome.globe
+                font.family: FontAwesome.fontFamily
+                font.pixelSize: 16 * scaleRatio
+                color: MoneroComponents.Style.defaultFontColor
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                opacity: 0.75
             }
 
             MouseArea {
+                anchors.fill: parent
                 hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                onExited: parent.color = "transparent"
+                onClicked: root.languageClicked()
+            }
+        }
+
+        // switch theme
+        Rectangle {
+            color: "transparent"
+            Layout.preferredWidth: parent.height
+            Layout.preferredHeight: parent.height
+
+            Text {
+                text: MoneroComponents.Style.blackTheme ? FontAwesome.lightbulbO : FontAwesome.moonO
+                font.family: FontAwesome.fontFamily
+                font.pixelSize: 16 * scaleRatio
+                color: MoneroComponents.Style.defaultFontColor
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                opacity: 0.75
+            }
+
+            MouseArea {
                 anchors.fill: parent
+                hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: parent.color = "#262626";
-                onExited: parent.color = "transparent";
+                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                onExited: parent.color = "transparent"
                 onClicked: {
-                    releaseFocus();
-                    appWindow.toggleLanguageView();
+                    MoneroComponents.Style.blackTheme = !MoneroComponents.Style.blackTheme;
+                    persistentSettings.blackTheme = MoneroComponents.Style.blackTheme;
                 }
             }
         }
-    }
 
-    Row {
-        id: row
-        anchors.right: parent.right
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
-        visible: parent.customDecorations
-        z: parent.z + 2
+        Item {
+            // make dummy space when hiding buttons when titlebar
+            // state is 'essentials' in order for the
+            // monero logo to still be centered
+            Layout.preferredWidth: parent.height * 2  // amount of buttons we hide
+            Layout.preferredHeight: parent.height
+            visible: root.state == "essentials"
+        }
 
+        // monero logo
+        Item {
+            Layout.fillWidth: true
+            Layout.preferredHeight: parent.height
+
+            Image {
+                id: imgLogo
+                width: 125
+                height: 28
+
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+
+                source: MoneroComponents.Style.titleBarLogoSource
+                visible: {
+                    if(!isOpenGL) return true;
+                    if(!MoneroComponents.Style.blackTheme) return true;
+                    return false;
+                }
+            }
+
+            Colorize {
+                visible: isOpenGL && MoneroComponents.Style.blackTheme
+                anchors.fill: imgLogo
+                source: imgLogo
+                saturation: 0.0
+            }
+        }
+
+        // minimize
         Rectangle {
-            id: minimizeButton
-            visible: showMinimizeButton
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            width: 42
             color: "transparent"
+            visible: root.showMinimizeButton
+            Layout.preferredWidth: parent.height
+            Layout.preferredHeight: parent.height
 
-            Image {
-                anchors.centerIn: parent
-                source: "../images/minimize.png"
+            MoneroEffects.ImageMask {
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: 18
+                anchors.horizontalCenter: parent.horizontalCenter
+                height: 3
+                width: 15
+                image: MoneroComponents.Style.titleBarMinimizeSource
+                color: MoneroComponents.Style.defaultFontColor
+                fontAwesomeFallbackIcon: FontAwesome.minus
+                fontAwesomeFallbackSize: 18
+                fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 0.8 : 0.6
+                opacity: 0.75
             }
 
             MouseArea {
-                id: minimizeArea
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: {
-                    if(titleBar.orange){
-                        minimizeButton.color = titleBar.buttonHoverColorOrange;
-                    } else {
-                        minimizeButton.color = titleBar.buttonHoverColor;
-                    }
-                }
-                onExited: minimizeButton.color = "transparent";
-                onClicked: minimizeClicked();
+                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                onExited: parent.color = "transparent"
+                onClicked: root.minimizeClicked();
             }
         }
 
+        // maximize
         Rectangle {
-            id: maximizeButton
-            visible: showMaximizeButton
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            width: 42
-            color: "transparent";
+            id: test
+            visible: root.showMaximizeButton
+            color: "transparent"
+            Layout.preferredWidth: parent.height
+            Layout.preferredHeight: parent.height
 
             Image {
-                anchors.centerIn: parent
-                height: 16
-                width: 16
-                source: appWindow.visibility === Window.FullScreen ?  "../images/backToWindowIcon.png" :
-                                                                      "../images/fullscreen.png"
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                source: MoneroComponents.Style.titleBarFullscreenSource
+                sourceSize.width: 16
+                sourceSize.height: 16
+                smooth: true
+                mipmap: true
+                opacity: 0.75
+                rotation: appWindow.visibility === Window.FullScreen ? 180 : 0
             }
 
             MouseArea {
-                id: maximizeArea
+                id: buttonArea
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: {
-                    if(titleBar.orange){
-                        maximizeButton.color = titleBar.buttonHoverColorOrange;
-                    } else {
-                        maximizeButton.color = titleBar.buttonHoverColor;
-                    }
-                }
-                onExited: maximizeButton.color = "transparent";
-                onClicked: maximizeClicked();
+                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                onExited: parent.color = "transparent"
+                onClicked: root.maximizeClicked();
             }
         }
 
+        // close
         Rectangle {
-            id: closeButton
-            visible: showCloseButton
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            width: 42
-            color: containsMouse ? "#E04343" : "#00000000"
+            visible: root.showCloseButton
+            color: "transparent"
+            Layout.preferredWidth: parent.height
+            Layout.preferredHeight: parent.height
 
-            Image {
-                anchors.centerIn: parent
-                width: 16
+            MoneroEffects.ImageMask {
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
                 height: 16
-                source: "../images/close.png"
+                width: 16
+                image: MoneroComponents.Style.titleBarCloseSource
+                color: MoneroComponents.Style.defaultFontColor
+                fontAwesomeFallbackIcon: FontAwesome.timesRectangle
+                fontAwesomeFallbackSize: 18
+                fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 0.8 : 0.6
+                opacity: 0.75
             }
 
             MouseArea {
                 anchors.fill: parent
-                onClicked: closeClicked();
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: {
-                    if(titleBar.orange){
-                        closeButton.color = titleBar.buttonHoverColorOrange;
-                    } else {
-                        closeButton.color = titleBar.buttonHoverColor;
-                    }
-                }
-                onExited: closeButton.color = "transparent";
+                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                onExited: parent.color = "transparent"
+                onClicked: root.closeClicked();
             }
         }
     }
 
-    // window borders
     Rectangle {
-        visible: !titleBar.orange
+        z: parent.z + 3
         anchors.bottom: parent.bottom
-        anchors.right: parent.right
         anchors.left: parent.left
-        height: 1
-        color: "#2F2F2F"
-        z: parent.z + 1
+        anchors.right: parent.right
+        height: MoneroComponents.Style.blackTheme ? 1 : 1
+        color: MoneroComponents.Style.titleBarBackgroundBorderColor
+
+        MoneroEffects.ColorTransition {
+            targetObj: parent
+            blackColor: MoneroComponents.Style._b_titleBarBackgroundBorderColor
+            whiteColor: MoneroComponents.Style._w_titleBarBackgroundBorderColor
+        }
     }
 
-    Rectangle {
-        visible: titleBar.small && !titleBar.orange
-        anchors.top: parent.top
-        anchors.right: parent.right
-        anchors.left: parent.left
-        height: 1
-        color: "#2F2F2F"
-        z: parent.z + 1
+    MouseArea {
+        enabled: persistentSettings.customDecorations
+        property var previousPosition
+        anchors.fill: parent
+        propagateComposedEvents: true
+        onPressed: previousPosition = globalCursor.getPosition()
+        onPositionChanged: {
+            if (pressedButtons == Qt.LeftButton) {
+                var pos = globalCursor.getPosition()
+                var dx = pos.x - previousPosition.x
+                var dy = pos.y - previousPosition.y
+
+                appWindow.x += dx
+                appWindow.y += dy
+                previousPosition = pos
+            }
+        }
     }
 }