Browse Source

Add gradient to header bar

Jaime van Kessel 6 years ago
parent
commit
fb84b344ec

+ 26 - 1
resources/qml/Cura.qml

@@ -6,6 +6,7 @@ import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
 import QtQuick.Layouts 1.1
 import QtQuick.Dialogs 1.2
+import QtGraphicalEffects 1.0
 
 import UM 1.3 as UM
 import Cura 1.1 as Cura
@@ -153,7 +154,31 @@ UM.MainWindow
                 }
                 visible: stageMenu.source != ""
                 height: Math.round(UM.Theme.getSize("stage_menu").height / 2)
-                color: UM.Theme.getColor("main_window_header_background")
+
+                LinearGradient
+                {
+                    anchors.fill: parent
+                    start: Qt.point(0, 0)
+                    end: Qt.point(parent.width, 0)
+                    gradient: Gradient
+                    {
+                        GradientStop
+                        {
+                            position: 0.0
+                            color: UM.Theme.getColor("main_window_header_background")
+                        }
+                        GradientStop
+                        {
+                            position: 0.5
+                            color: UM.Theme.getColor("main_window_header_background_gradient")
+                        }
+                        GradientStop
+                        {
+                            position: 1.0
+                            color: UM.Theme.getColor("main_window_header_background")
+                        }
+                    }
+                }
             }
 
             Connections

+ 26 - 1
resources/qml/MainWindow/MainWindowHeader.qml

@@ -8,6 +8,7 @@ import QtQuick.Controls.Styles 1.1
 
 import UM 1.4 as UM
 import Cura 1.0 as Cura
+import QtGraphicalEffects 1.0
 
 import "../Account"
 
@@ -17,7 +18,31 @@ Rectangle
 
     implicitHeight: UM.Theme.getSize("main_window_header").height
     implicitWidth: UM.Theme.getSize("main_window_header").width
-    color: UM.Theme.getColor("main_window_header_background")
+
+    LinearGradient
+    {
+        anchors.fill: parent
+        start: Qt.point(0, 0)
+        end: Qt.point(parent.width, 0)
+        gradient: Gradient
+        {
+            GradientStop
+            {
+                position: 0.0
+                color: UM.Theme.getColor("main_window_header_background")
+            }
+            GradientStop
+            {
+                position: 0.5
+                color: UM.Theme.getColor("main_window_header_background_gradient")
+            }
+            GradientStop
+            {
+                position: 1.0
+                color: UM.Theme.getColor("main_window_header_background")
+            }
+        }
+    }
 
     Image
     {

+ 1 - 0
resources/themes/cura-light/theme.json

@@ -100,6 +100,7 @@
         "secondary_button_text": [30, 102, 215, 255],
 
         "main_window_header_background": [10, 8, 80, 255],
+        "main_window_header_background_gradient": [25, 23, 91, 255],
         "main_window_header_button_text_active": [10, 8, 80, 255],
         "main_window_header_button_text_inactive": [255, 255, 255, 255],
         "main_window_header_button_text_hovered": [255, 255, 255, 255],