Add style to the top header tabs.

Contributes to CURA-5784.

resources/qml/Skeleton/TopHeader.qml

@@ -41,7 +41,6 @@ Rectangle
             horizontalCenter: parent.horizontalCenter
             leftMargin: UM.Theme.getSize("default_margin").width
         }
-        spacing: UM.Theme.getSize("default_margin").width
 
         // The topheader is dynamically filled with all available stages
         Repeater
@@ -52,7 +51,7 @@ Rectangle
 
             delegate: Button
             {
-                text: model.name
+                text: model.name.toUpperCase()
                 checkable: true
                 checked: model.active
                 exclusiveGroup: topheaderMenuGroup

resources/themes/cura-light/images/logo.svg

@@ -1,4 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
@@ -7,15 +9,36 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="82px"
-   height="18px"
-   viewBox="0 0 82 18"
+   width="110mm"
+   height="33mm"
+   viewBox="0 0 110 33"
    version="1.1"
-   id="svg12"
-   sodipodi:docname="logo.svg"
-   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
+   id="svg8"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
+   sodipodi:docname="logo.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="-64.285714"
+     inkscape:cy="560"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1137"
+     inkscape:window-x="2872"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:pagecheckerboard="true" />
   <metadata
-     id="metadata18">
+     id="metadata5">
     <rdf:RDF>
       <cc:Work
          rdf:about="">
@@ -26,47 +49,124 @@
       </cc:Work>
     </rdf:RDF>
   </metadata>
-  <defs
-     id="defs16" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1156"
-     inkscape:window-height="480"
-     id="namedview14"
-     showgrid="false"
-     inkscape:zoom="3.4634146"
-     inkscape:cx="41"
-     inkscape:cy="9"
-     inkscape:window-x="3138"
-     inkscape:window-y="329"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg12" />
-  <polygon
-     fill="#20A6DB"
-     points="82 10.3797468 77.8757345 10.3797468 75.7721519 12.4764557 75.7721519 16.6075949 79.9067798 16.6075949 82 14.5108861"
-     id="polygon2" />
-  <path
-     fill="black"
-     d="M0,9.32538529 C0,14.168804 3.22511,17.6455696 8.53908129,17.6455696 L16.6075949,17.6455696 L16.6075949,13.294146 L8.53908129,13.294146 C5.8534025,13.2832128 4.53351762,11.4792306 4.53351762,9.32538529 C4.53351762,7.17153994 5.8534025,5.40035747 8.53908129,5.37849102 L16.6075949,5.37849102 L16.6075949,1.03800064 L8.53908129,1.03800064 C3.21363275,1.02706742 0,4.47103333 0,9.32538529 Z"
-     id="path4" />
-  <path
-     fill="black"
-     d="M33.004725,9.78605176 C33.004725,12.2613239 31.20074,13.5835846 29.0468913,13.5835846 C26.8930426,13.5835846 25.1218573,12.2613239 25.1218573,9.78605176 L25.1218573,1.03797468 L20.7594937,1.03797468 L20.7594937,9.78605176 C20.7594937,14.6837056 24.203465,17.6455696 29.0468913,17.6455696 C33.8903176,17.6455696 37.3670886,14.6731275 37.3670886,9.78605176 L37.3670886,1.03797468 L33.004725,1.03797468 L33.004725,9.78605176 L33.004725,9.78605176 Z"
-     id="path6" />
-  <path
-     fill="black"
-     d="M62.1251127,1.03797468 C57.0530042,1.03797468 53.9746835,4.47968021 53.9746835,9.31992005 C53.9746835,14.1601599 57.0530042,17.6346436 62.1251127,17.6346436 L63.9217127,17.6346436 L63.9217127,13.297002 L62.1251127,13.297002 C59.5616713,13.2860759 58.3018603,11.4832778 58.3018603,9.3308461 C58.3018603,7.17841439 59.5616713,5.4083944 62.1251127,5.38654231 L66.2112822,5.38654231 L66.2112822,11.0680879 L66.2112822,13.297002 L66.2112822,17.6455696 L70.5822785,17.6455696 L70.5822785,17.3942705 L70.5822785,13.297002 L70.5822785,5.38654231 L70.5822785,1.80279813 L70.5822785,1.03797468 L62.1251127,1.03797468 Z"
-     id="path8" />
-  <path
-     d="M 41.518987,9.13915 V 17.646 h 4.36332 V 9.13915 c 0,-2.1053391 1.273557,-3.8366328 3.86497,-3.8580068 h 3.189432 V 1.038405 h -3.189432 c -5.127454,0 -8.22829,3.3664044 -8.22829,8.100745 z"
-     id="path10"
-     inkscape:connector-curvature="0"
-     style="fill:#000000" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-264)">
+    <g
+       id="g4570"
+       transform="matrix(0.1443759,0,0,0.14575971,-5.7750359,237.12191)">
+      <polygon
+         id="polygon4506"
+         points="741.8,410.8 781.7,410.8 801.9,390.6 801.9,350.7 762,350.7 741.8,370.9 "
+         class="st0"
+         style="fill:#333333" />
+      <path
+         id="path4508"
+         d="m 40,334.7 c 0,44.3 28.1,76.1 74.4,76.1 h 70.3 V 371 H 114.4 C 91,370.9 79.5,354.4 79.5,334.7 79.5,315 91,298.8 114.4,298.6 h 70.3 V 258.9 H 114.4 C 68.1,258.9 40,290.4 40,334.7 Z"
+         class="st1"
+         inkscape:connector-curvature="0"
+         style="fill:#ffffff" />
+      <path
+         id="path4510"
+         d="m 336.7,338.8 c 0,22.6 -16.5,34.7 -36.2,34.7 -19.7,0 -35.9,-12.1 -35.9,-34.7 v -79.9 h -39.9 v 79.9 c 0,44.7 31.5,71.9 75.8,71.9 44.3,0 76.1,-27.1 76.1,-71.9 v -79.9 h -39.9 z"
+         class="st1"
+         inkscape:connector-curvature="0"
+         style="fill:#ffffff" />
+      <path
+         id="path4512"
+         d="m 624.1,258.9 c -46.3,0 -74.4,31.5 -74.4,75.8 0,44.3 28.1,76.1 74.4,76.1 h 16.4 V 371 h -16.4 c -23.4,-0.1 -34.9,-16.6 -34.9,-36.3 0,-19.7 11.5,-35.9 34.9,-36.1 h 37.3 v 52 20.4 39.8 h 39.9 v -2.3 -37.5 -72.4 -32.8 -7 h -77.2 z"
+         class="st1"
+         inkscape:connector-curvature="0"
+         style="fill:#ffffff" />
+      <path
+         id="path4514"
+         d="m 416.6,333 v 77.8 H 456 V 333 c 0,-19.3 11.5,-35.1 34.9,-35.3 h 28.8 V 258.8 H 491 c -46.3,0.1 -74.4,30.9 -74.4,74.2 z"
+         class="st1"
+         inkscape:connector-curvature="0"
+         style="fill:#ffffff" />
+      <g
+         id="g4542">
+        <path
+           id="path4518"
+           d="m 456.3,198.8 c -3.1,0 -5.3,1.8 -5.3,5.3 v 29.4 c 0,3.5 2.1,5.3 5.3,5.3 3.2,0 5.3,-1.8 5.3,-5.3 v -29.4 c -0.1,-3.5 -2.2,-5.3 -5.3,-5.3 z"
+           class="st1"
+           inkscape:connector-curvature="0"
+           style="fill:#ffffff" />
+        <path
+           id="path4520"
+           d="m 456.3,184.4 c -2.9,0 -5.3,2.4 -5.3,5.4 0,0 0,0.1 0,0.1 0,3 2.5,5.3 5.5,5.3 3,0 5.3,-2.5 5.3,-5.5 -0.1,-3 -2.6,-5.3 -5.5,-5.3 z"
+           class="st1"
+           inkscape:connector-curvature="0"
+           style="fill:#ffffff" />
+        <path
+           id="path4522"
+           d="m 408.8,184.6 v 0 l -9.4,-0.1 c -1.6,0 -3,1.3 -3,3 0,1.6 1.3,3 3,3 h 3.6 v 43 c 0,3.5 2.1,5.3 5.3,5.3 3.1,0 5.3,-1.8 5.3,-5.3 v -43.6 c -0.2,-3.4 -2,-5.1 -4.8,-5.3 z"
+           class="st1"
+           inkscape:connector-curvature="0"
+           style="fill:#ffffff" />
+        <path
+           id="path4524"
+           d="m 521.3,204.9 c -1.1,-2.9 -3.8,-4.8 -6.8,-4.7 -0.4,0 -0.7,0.1 -1.1,0.1 -2.6,0.3 -4.8,2 -5.7,4.5 l -6.4,15.2 -6.4,-15.3 c -1.1,-2.8 -3.8,-4.6 -6.8,-4.6 -0.2,0 -0.3,0 -0.5,0 h -8.9 c -1.6,0 -3,1.3 -3,3 0,1.6 1.3,3 3,3 h 2.2 l -9.2,25.8 c -1,2.7 0.4,5.7 3.1,6.7 0.6,0.2 1.1,0.3 1.7,0.3 2.2,0 4.1,-1.4 4.9,-3.5 l 6.9,-19.2 7.9,18.8 c 0.5,1.7 1.8,3 3.5,3.5 0,0 0.1,0 0.1,0 0.2,0.1 0.4,0.1 0.6,0.1 0.3,0 0.5,0.1 0.8,0.1 0,0 0,0 0.1,0 0,0 0,0 0,0 v 0 0.1 c 2.1,0 4,-1.3 4.8,-3.2 l 8.1,-19.5 6.9,19.3 c 0.7,2.1 2.7,3.4 4.9,3.5 h 0.1 c 0.6,0 1.2,-0.1 1.7,-0.3 0,0 0,0 0,0 2.7,-1 4.1,-3.9 3.1,-6.6 z"
+           class="st1"
+           inkscape:connector-curvature="0"
+           style="fill:#ffffff" />
+        <path
+           id="path4526"
+           d="m 476.5,238.8 c 0,0 0,0 0,0 0,0 0,0 0,0 z"
+           class="st1"
+           inkscape:connector-curvature="0"
+           style="fill:#ffffff" />
+        <path
+           id="path4528"
+           d="m 608.9,215.4 7.8,-8.1 c 1.1,-0.8 1.6,-2.1 1.6,-3.5 -0.2,-2.6 -2.3,-4.7 -5,-4.8 -1.6,0.1 -3,0.8 -4,2 l -9.1,10.2 c -1.1,1.3 -1.7,2.9 -1.7,4.6 v 0 c 0,3.2 2.8,6.3 2.8,6.3 l 10,14.1 c 1,1.6 2.8,2.5 4.7,2.5 2.8,-0.1 5,-2.3 5,-5.1 0,-1.2 -0.4,-2.4 -1.1,-3.4 z"
+           class="st1"
+           inkscape:connector-curvature="0"
+           style="fill:#ffffff" />
+        <path
+           id="path4530"
+           d="m 590.9,184.6 v 0 l -9.4,-0.1 c -1.6,0 -3,1.3 -3,3 0,1.7 1.3,3 3,3 h 3.6 v 42.9 c 0,3.5 2.1,5.3 5.3,5.3 3.2,0 5.3,-1.8 5.3,-5.3 v -8 -35.5 c -0.1,-3.4 -1.9,-5.1 -4.8,-5.3 z"
+           class="st1"
+           inkscape:connector-curvature="0"
+           style="fill:#ffffff" />
+        <path
+           id="path4532"
+           d="m 440.7,200.2 h -3.3 v -6.7 c 0,-3.5 -2.1,-5.3 -5.3,-5.3 -3.1,0 -5.3,1.8 -5.3,5.3 v 6.7 c -1.6,0 -3,1.3 -3,3 0,1.6 1.3,3 3,3 v 27.4 c 0,3.5 2.2,5.3 5.3,5.3 3.1,0 5.3,-1.8 5.3,-5.3 V 228 206.2 h 3.3 c 1.6,0 3,-1.3 3,-3 0,-1.7 -1.3,-3 -3,-3 z"
+           class="st1"
+           inkscape:connector-curvature="0"
+           style="fill:#ffffff" />
+        <path
+           id="path4534"
+           d="m 573.4,227.7 v -18.6 c 0,-7.6 -7.7,-11.2 -21.5,-10.1 -2.3,0.2 -9.2,1.5 -9.2,1.5 -2.1,0.5 -4.2,1.6 -4.2,4.2 -0.1,2 1.4,3.7 3.4,3.8 0,0 0,0 0,0 0.3,0 0.6,0 0.8,0 0,0 7.4,-1.4 10,-1.6 1.3,-0.1 2.7,-0.1 4,-0.1 3.5,0.1 6.2,0.5 6.2,3.6 v 13.8 c 0,3.9 -3.5,7.6 -9.3,7.6 -3.6,0 -5.8,-1.9 -5.8,-4.3 0,-3.2 2.4,-4.5 6.8,-5.2 1.6,-0.3 2.6,-1.8 2.3,-3.4 0,0 0,0 0,0 0,-0.1 -0.1,-0.3 -0.1,-0.4 -0.8,-3.1 -4.7,-2.7 -4.7,-2.7 -8.1,0.9 -14.7,3.4 -14.7,12.1 0,6.6 5.9,10.7 11.9,10.7 5.5,0 10.3,-1.6 14.4,-6.1 0.2,3.2 1.7,6.1 6.2,6.1 2.5,0 4.8,-1.7 4.8,-4 -0.2,-1.4 -1.3,-2.5 -1.3,-6.9 z"
+           class="st1"
+           inkscape:connector-curvature="0"
+           style="fill:#ffffff" />
+        <path
+           id="path4536"
+           d="m 387.8,213 -0.1,0.1 v -22.7 c -0.2,-3 -2.6,-5.4 -5.5,-5.5 -3.3,-0.2 -6.1,2.3 -6.3,5.5 v 28.5 c 0,7 -4,10.2 -10.7,10.2 -6.8,0 -10.7,-3.2 -10.7,-10.2 v -28.5 c 0,-0.2 0,-0.5 0,-0.7 0,0 0,0 0,0 -0.2,-3.1 -2.8,-5.4 -5.9,-5.2 v 0 0 h -0.7 -8.7 c -1.6,0 -3,1.3 -3,3 0,1.7 1.3,3 3,3 h 3.5 c 0,0 0,0 0,0 l 0.1,27.5 c 0,14.3 8.8,20.7 22.5,20.7 5.3,0 9.9,-1 13.5,-3 0.9,1.7 2.5,2.9 5.4,2.9 2.5,0 4.8,-1.7 4.8,-4 0,-1.7 -1.1,-2.7 -1.1,-7.1 V 213 Z"
+           class="st1"
+           inkscape:connector-curvature="0"
+           style="fill:#ffffff" />
+        <path
+           id="path4538"
+           d="m 645.5,199 c -12.5,0 -19.9,8.2 -19.9,20.5 0,9.2 5.4,19.1 20.3,19.1 2.9,0 12.5,-2.2 12.5,-2.2 2.5,-0.5 4.3,-1.7 3.7,-5 -0.5,-2.3 -2.3,-3.3 -5,-2.9 0,0 -8.3,1.6 -11.2,1.8 -6.1,0.5 -9.7,-4 -9.7,-9.6 0,0 -1.7,-14.4 9.6,-14.4 4.6,0 8.2,3.7 8.9,8.4 h -11.1 c -1.6,0 -3,1.3 -3,3 0,1.7 1.3,3 3,3 v 0 0 H 660 c 3.5,0 4.6,-0.9 4.6,-4.5 -0.1,-8.6 -7,-17.2 -19.1,-17.2 z"
+           class="st1"
+           inkscape:connector-curvature="0"
+           style="fill:#ffffff" />
+        <path
+           id="path4540"
+           d="m 696.9,198.9 c -0.3,0 -0.6,0 -0.9,0 h -5.5 c -2.9,0 -4.9,1.5 -5.2,4.4 -0.3,-2.9 -2.3,-4.3 -5.2,-4.3 h -9.4 c -1.6,0 -3,1.3 -3,3 0,1.6 1.3,3 3,3 h 4.2 v 28.6 c 0,3.5 2.1,5.3 5.3,5.3 3.1,0 5.3,-1.8 5.3,-5.3 v -21.1 c 0,-1.6 1.3,-3 3,-3 h 7.7 c 3.5,0 5.3,-2.1 5.3,-5.3 0,-2.8 -1.9,-5.1 -4.6,-5.3 z"
+           class="st1"
+           inkscape:connector-curvature="0"
+           style="fill:#ffffff" />
+      </g>
+    </g>
+  </g>
+  <style
+     id="style4504"
+     type="text/css">
+	.st0{fill:#333333;}
+	.st1{fill:#FFFFFF;}
+</style>
 </svg>

resources/themes/cura-light/styles.qml

@@ -90,92 +90,57 @@ QtObject {
         }
     }
 
-    property Component topheader_tab: Component {
-        ButtonStyle {
-            background: Item {
-                implicitHeight: Theme.getSize("topheader_button").height
-                implicitWidth: Theme.getSize("topheader_button").width + Theme.getSize("topheader_button_icon").width
-
-                Rectangle {
-                    id: buttonFace;
-                    anchors.fill: parent;
-
-                    color: "transparent"
-                    Behavior on color { ColorAnimation { duration: 50; } }
+    property Component topheader_tab: Component
+    {
+        ButtonStyle
+        {
+            // This property will be back-propagated when the width of the label is calculated
+            property var buttonWidth: 0
 
-                    Rectangle {
-                        id: underline;
+            background: Rectangle
+            {
+                id: buttonFace
+                implicitHeight: control.height
+                implicitWidth: buttonWidth
+                color: control.checked ? UM.Theme.getColor("topheader_button_background_active") : UM.Theme.getColor("topheader_button_background_inactive")
 
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        anchors.bottom: parent.bottom
-                        width: Theme.getSize("topheader_button").width + Theme.getSize("topheader_button_icon").width
-                        height: Theme.getSize("sidebar_header_highlight").height
-                        color: control.checked ? UM.Theme.getColor("sidebar_header_highlight") : UM.Theme.getColor("sidebar_header_highlight_hover")
-                        visible: control.hovered || control.checked
-                    }
-                }
+                Behavior on color { ColorAnimation { duration: 50 } }
             }
 
             label: Item
             {
-                implicitHeight: Theme.getSize("topheader_button_icon").height
-                implicitWidth: Theme.getSize("topheader_button").width + Theme.getSize("topheader_button_icon").width
-                Item
+                id: contents
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+                height: control.height
+                width: buttonLabel.width + 4 * UM.Theme.getSize("default_margin").width
+
+                Label
                 {
+                    id: buttonLabel
+                    text: control.text
+                    anchors.verticalCenter: parent.verticalCenter
                     anchors.horizontalCenter: parent.horizontalCenter
-                    anchors.verticalCenter: parent.verticalCenter;
-                    width: childrenRect.width
-                    height: Theme.getSize("topheader_button_icon").height
-                    Label
+                    font: UM.Theme.getFont("medium_bold")
+                    color:
                     {
-                        id: button_label
-                        text: control.text;
-                        anchors.verticalCenter: parent.verticalCenter;
-                        font: control.checked ? UM.Theme.getFont("large") : UM.Theme.getFont("large_nonbold")
-                        color:
+                        if (control.checked)
                         {
-                            if(control.hovered)
-                            {
-                                return UM.Theme.getColor("topheader_button_text_hovered");
-                            }
-                            if(control.checked)
-                            {
-                                return UM.Theme.getColor("topheader_button_text_active");
-                            }
-                            else
+                            return UM.Theme.getColor("topheader_button_text_active")
+                        }
+                        else
+                        {
+                            if (control.hovered)
                             {
-                                return UM.Theme.getColor("topheader_button_text_inactive");
+                                return UM.Theme.getColor("topheader_button_text_hovered")
                             }
+                            return UM.Theme.getColor("topheader_button_text_inactive")
                         }
                     }
-                    UM.RecolorImage
-                    {
-                        visible: control.iconSource != ""
-                        id: icon
-                        anchors.left: button_label.right
-                        anchors.leftMargin: (icon.visible || overlayIcon.visible) ? Theme.getSize("default_margin").width : 0
-                        color: UM.Theme.getColor("text_emphasis")
-                        opacity: !control.enabled ? 0.2 : 1.0
-                        source: control.iconSource
-                        width: visible ? Theme.getSize("topheader_button_icon").width : 0
-                        height: Theme.getSize("topheader_button_icon").height
-
-                        sourceSize: Theme.getSize("topheader_button_icon")
-                    }
-                    UM.RecolorImage
-                    {
-                        id: overlayIcon
-                        anchors.left: button_label.right
-                        anchors.leftMargin: (icon.visible || overlayIcon.visible) ? Theme.getSize("default_margin").width : 0
-                        visible: control.overlayIconSource != "" && control.iconSource != ""
-                        color: control.overlayColor
-                        opacity: !control.enabled ? 0.2 : 1.0
-                        source: control.overlayIconSource
-                        width: visible ? Theme.getSize("topheader_button_icon").width : 0
-                        height: Theme.getSize("topheader_button_icon").height
-
-                        sourceSize: Theme.getSize("topheader_button_icon")
-                    }
+                }
+                Component.onCompleted:
+                {
+                    buttonWidth = width
                 }
             }
         }

resources/themes/cura-light/theme.json

@@ -79,11 +79,13 @@
         "border": [127, 127, 127, 255],
         "secondary": [245, 245, 245, 255],
 
-        "topheader_background": [255, 255, 255, 255],
+        "topheader_background": [12, 169, 227, 255],
 
-        "topheader_button_text_active": [0, 0, 0, 255],
-        "topheader_button_text_inactive": [128, 128, 128, 255],
+        "topheader_button_text_active": [12, 169, 227, 255],
+        "topheader_button_text_inactive": [255, 255, 255, 255],
         "topheader_button_text_hovered": [0, 0, 0, 255],
+        "topheader_button_background_active": [255, 255, 255, 255],
+        "topheader_button_background_inactive": [255, 255, 255, 0],
 
         "text": [0, 0, 0, 255],
         "text_detail": [174, 174, 174, 128],
@@ -335,7 +337,7 @@
     "sizes": {
         "window_minimum_size": [70, 50],
 
-        "topheader": [0.0, 4.0],
+        "topheader": [0.0, 4.5],
         "topheader_button": [8, 4],
         "topheader_button_icon": [1.2, 1.2],
 
@@ -343,7 +345,7 @@
 
         "default_lining": [0.08, 0.08],
         "default_arrow": [0.8, 0.8],
-        "logo": [7.6, 1.6],
+        "logo": [8, 2.4],
 
         "default_margin": [1.0, 1.0],
         "wide_margin": [2.0, 2.0],