Create a component for the Views selector. This component contains the

list of the views and also the shortcuts for the camera position.

The theme colors, sizes and the styles have been updated.

Contributes to CURA-5784.

plugins/Toolbox/resources/qml/ToolboxTabButton.qml

@@ -32,15 +32,15 @@ Button
             {
                 if(control.hovered)
                 {
-                    return UM.Theme.getColor("topbar_button_text_hovered");
+                    return UM.Theme.getColor("toolbox_header_button_text_hovered");
                 }
                 if(control.active)
                 {
-                    return UM.Theme.getColor("topbar_button_text_active");
+                    return UM.Theme.getColor("toolbox_header_button_text_active");
                 }
                 else
                 {
-                    return UM.Theme.getColor("topbar_button_text_inactive");
+                    return UM.Theme.getColor("toolbox_header_button_text_inactive");
                 }
             }
             font: control.enabled ? (control.active ? UM.Theme.getFont("medium_bold") : UM.Theme.getFont("medium")) : UM.Theme.getFont("default_italic")

resources/qml/Cura.qml

@@ -191,6 +191,18 @@ UM.MainWindow
                 }
             }
 
+            ApplicationViews
+            {
+                id: applicationViews
+
+                visible: UM.Controller.activeStage.stageId != "MonitorStage"
+                anchors
+                {
+                    top: parent.top
+                    right: sidebar.left
+                }
+            }
+
             Loader
             {
                 id: main

resources/qml/Menus/ConfigurationMenu/ConfigurationItem.qml

@@ -77,8 +77,8 @@ Rectangle
             UM.RecolorImage {
                 id: buildplateIcon
                 anchors.left: parent.left
-                width: UM.Theme.getSize("topbar_button_icon").width
-                height: UM.Theme.getSize("topbar_button_icon").height
+                width: UM.Theme.getSize("topheader_button_icon").width
+                height: UM.Theme.getSize("topheader_button_icon").height
                 sourceSize.width: width
                 sourceSize.height: height
                 source: UM.Theme.getIcon("buildplate")

resources/qml/Skeleton/ApplicationViews.qml

@@ -0,0 +1,108 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Styles 1.1
+import QtQuick.Layouts 1.1
+
+import UM 1.4 as UM
+import Cura 1.0 as Cura
+
+// This item contains the views selector, a combobox that is dinamically created from
+// the list of available Views (packages that create different visualizactions of the
+// scene. Aside the selector, there is a row of buttons that change the orientation of the view.
+Item
+{
+    id: applicationViewsSelector
+
+    height: UM.Theme.getSize("views_selector").height
+
+    OrientationViews
+    {
+        id: orientationViews
+
+        anchors {
+            verticalCenter: parent.verticalCenter
+            right: viewModeButton.left
+            rightMargin: UM.Theme.getSize("default_margin").width
+        }
+    }
+
+    ComboBox
+    {
+        id: viewModeButton
+
+        anchors {
+            verticalCenter: parent.verticalCenter
+            right: parent.right
+            rightMargin: UM.Theme.getSize("default_margin").width
+        }
+
+        style: UM.Theme.styles.combobox
+
+        model: UM.ViewModel { }
+        textRole: "name"
+
+        // update the model's active index
+        function updateItemActiveFlags ()
+        {
+            currentIndex = getActiveIndex()
+            for (var i = 0; i < model.rowCount(); i++)
+            {
+                model.getItem(i).active = (i == currentIndex)
+            }
+        }
+
+        // get the index of the active model item on start
+        function getActiveIndex ()
+        {
+            for (var i = 0; i < model.rowCount(); i++)
+            {
+                if (model.getItem(i).active) {
+                    return i
+                }
+            }
+            return 0
+        }
+
+        // set the active index
+        function setActiveIndex (index)
+        {
+            UM.Controller.setActiveView(index)
+            // the connection to UM.ActiveView will trigger update so there is no reason to call it manually here
+        }
+
+        onCurrentIndexChanged:
+        {
+            if (model.getItem(currentIndex).id != undefined)
+            {
+                viewModeButton.setActiveIndex(model.getItem(currentIndex).id)
+            }
+        }
+        currentIndex: getActiveIndex()
+
+        // watch the active view proxy for changes made from the menu item
+        Connections
+        {
+            target: UM.ActiveView
+            onActiveViewChanged: viewModeButton.updateItemActiveFlags()
+        }
+    }
+
+    Loader
+    {
+        id: viewPanel
+
+        anchors.top: viewModeButton.bottom
+        anchors.topMargin: UM.Theme.getSize("default_margin").height
+        anchors.right: viewModeButton.right
+
+        property var buttonTarget: Qt.point(viewModeButton.x + Math.round(viewModeButton.width / 2), viewModeButton.y + Math.round(viewModeButton.height / 2))
+
+        height: childrenRect.height
+        width: childrenRect.width
+
+        source: UM.ActiveView.valid ? UM.ActiveView.activeViewPanel : ""
+    }
+}

resources/qml/Skeleton/OrientationViews.qml

@@ -0,0 +1,56 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Styles 1.1
+
+import UM 1.4 as UM
+
+// View orientation Item
+Row
+{
+    id: viewOrientationControl
+
+    spacing: 2 * screenScaleFactor
+
+    // #1 3d view
+    Button
+    {
+        iconSource: UM.Theme.getIcon("view_3d")
+        style: UM.Theme.styles.small_tool_button
+        onClicked:UM.Controller.rotateView("3d", 0)
+    }
+
+    // #2 Front view
+    Button
+    {
+        iconSource: UM.Theme.getIcon("view_front")
+        style: UM.Theme.styles.small_tool_button
+        onClicked: UM.Controller.rotateView("home", 0)
+    }
+
+    // #3 Top view
+    Button
+    {
+        iconSource: UM.Theme.getIcon("view_top")
+        style: UM.Theme.styles.small_tool_button
+        onClicked: UM.Controller.rotateView("y", 90)
+    }
+
+    // #4 Left view
+    Button
+    {
+        iconSource: UM.Theme.getIcon("view_left")
+        style: UM.Theme.styles.small_tool_button
+        onClicked: UM.Controller.rotateView("x", 90)
+    }
+
+    // #5 Right view
+    Button
+    {
+        iconSource: UM.Theme.getIcon("view_right")
+        style: UM.Theme.styles.small_tool_button
+        onClicked: UM.Controller.rotateView("x", -90)
+    }
+}

resources/qml/Skeleton/TopHeader.qml

@@ -12,38 +12,9 @@ import Cura 1.0 as Cura
 Rectangle
 {
     id: base
-    anchors.left: parent.left
-    anchors.right: parent.right
-    height: UM.Theme.getSize("sidebar_header").height
-    color: UM.Controller.activeStage.stageId == "MonitorStage" ? UM.Theme.getColor("topbar_background_color_monitoring") : UM.Theme.getColor("topbar_background_color")
 
-    property bool printerConnected: Cura.MachineManager.printerConnected
-    property bool printerAcceptsCommands: printerConnected && Cura.MachineManager.printerOutputDevices[0].acceptsCommands
-
-    property int rightMargin: UM.Theme.getSize("sidebar").width + UM.Theme.getSize("default_margin").width;
-    property int allItemsWidth: 0;
-
-    function updateMarginsAndSizes() {
-        if (UM.Preferences.getValue("cura/sidebar_collapsed"))
-        {
-            rightMargin = UM.Theme.getSize("default_margin").width;
-        }
-        else
-        {
-            rightMargin = UM.Theme.getSize("sidebar").width + UM.Theme.getSize("default_margin").width;
-        }
-        allItemsWidth = (
-            logo.width + UM.Theme.getSize("topbar_logo_right_margin").width +
-            UM.Theme.getSize("topbar_logo_right_margin").width + stagesMenuContainer.width +
-            UM.Theme.getSize("default_margin").width + viewModeButton.width +
-            rightMargin);
-    }
-
-    UM.I18nCatalog
-    {
-        id: catalog
-        name:"cura"
-    }
+    height: UM.Theme.getSize("topheader").height
+    color: UM.Theme.getColor("topheader_background")
 
     Image
     {
@@ -52,22 +23,22 @@ Rectangle
         anchors.leftMargin: UM.Theme.getSize("default_margin").width
         anchors.verticalCenter: parent.verticalCenter
 
-        source: UM.Theme.getImage("logo");
-        width: UM.Theme.getSize("logo").width;
-        height: UM.Theme.getSize("logo").height;
+        source: UM.Theme.getImage("logo")
+        width: UM.Theme.getSize("logo").width
+        height: UM.Theme.getSize("logo").height
 
-        sourceSize.width: width;
-        sourceSize.height: height;
+        sourceSize.width: width
+        sourceSize.height: height
     }
 
     Row
     {
         id: stagesMenuContainer
         anchors.left: logo.right
-        anchors.leftMargin: UM.Theme.getSize("topbar_logo_right_margin").width
+        anchors.leftMargin: UM.Theme.getSize("topheader_logo_right_margin").width
         spacing: UM.Theme.getSize("default_margin").width
 
-        // The topbar is dynamically filled with all available stages
+        // The topheader is dynamically filled with all available stages
         Repeater
         {
             id: stagesMenu
@@ -79,9 +50,9 @@ Rectangle
                 text: model.name
                 checkable: true
                 checked: model.active
-                exclusiveGroup: topbarMenuGroup
-                style: (model.stage.iconSource != "") ? UM.Theme.styles.topbar_header_tab_no_overlay : UM.Theme.styles.topbar_header_tab
-                height: UM.Theme.getSize("sidebar_header").height
+                exclusiveGroup: topheaderMenuGroup
+                style: UM.Theme.styles.topheader_tab
+                height: UM.Theme.getSize("topheader").height
                 onClicked: UM.Controller.setActiveStage(model.id)
                 iconSource: model.stage.iconSource
 
@@ -90,157 +61,6 @@ Rectangle
             }
         }
 
-        ExclusiveGroup { id: topbarMenuGroup }
-    }
-
-    // View orientation Item
-    Row
-    {
-        id: viewOrientationControl
-        height: 30
-
-        spacing: 2
-        visible: UM.Controller.activeStage.stageId != "MonitorStage"
-
-        anchors
-        {
-            verticalCenter: base.verticalCenter
-            right: viewModeButton.left
-            rightMargin: UM.Theme.getSize("default_margin").width
-        }
-
-        // #1 3d view
-        Button
-        {
-            iconSource: UM.Theme.getIcon("view_3d")
-            style: UM.Theme.styles.small_tool_button
-            anchors.verticalCenter: viewOrientationControl.verticalCenter
-            onClicked:UM.Controller.rotateView("3d", 0)
-            visible: base.width - allItemsWidth - 4 * this.width > 0
-        }
-
-        // #2 Front view
-        Button
-        {
-            iconSource: UM.Theme.getIcon("view_front")
-            style: UM.Theme.styles.small_tool_button
-            anchors.verticalCenter: viewOrientationControl.verticalCenter
-            onClicked: UM.Controller.rotateView("home", 0);
-            visible: base.width - allItemsWidth - 3 * this.width > 0
-        }
-
-        // #3 Top view
-        Button
-        {
-            iconSource: UM.Theme.getIcon("view_top")
-            style: UM.Theme.styles.small_tool_button
-            anchors.verticalCenter: viewOrientationControl.verticalCenter
-            onClicked: UM.Controller.rotateView("y", 90)
-            visible: base.width - allItemsWidth - 2 * this.width > 0
-        }
-
-        // #4 Left view
-        Button
-        {
-            iconSource: UM.Theme.getIcon("view_left")
-            style: UM.Theme.styles.small_tool_button
-            anchors.verticalCenter: viewOrientationControl.verticalCenter
-            onClicked: UM.Controller.rotateView("x", 90)
-            visible: base.width - allItemsWidth - 1 * this.width > 0
-        }
-
-        // #5 Right view
-        Button
-        {
-            iconSource: UM.Theme.getIcon("view_right")
-            style: UM.Theme.styles.small_tool_button
-            anchors.verticalCenter: viewOrientationControl.verticalCenter
-            onClicked: UM.Controller.rotateView("x", -90)
-            visible: base.width - allItemsWidth > 0
+        ExclusiveGroup { id: topheaderMenuGroup }
     }
 }
-
-    ComboBox
-    {
-        id: viewModeButton
-
-        anchors {
-            verticalCenter: parent.verticalCenter
-            right: parent.right
-            rightMargin: rightMargin
-        }
-
-        style: UM.Theme.styles.combobox
-        visible: UM.Controller.activeStage.stageId != "MonitorStage"
-
-        model: UM.ViewModel { }
-        textRole: "name"
-
-        // update the model's active index
-        function updateItemActiveFlags () {
-            currentIndex = getActiveIndex()
-            for (var i = 0; i < model.rowCount(); i++) {
-                model.getItem(i).active = (i == currentIndex)
-            }
-        }
-
-        // get the index of the active model item on start
-        function getActiveIndex () {
-            for (var i = 0; i < model.rowCount(); i++) {
-                if (model.getItem(i).active) {
-                    return i
-                }
-            }
-            return 0
-        }
-
-        // set the active index
-        function setActiveIndex (index) {
-            UM.Controller.setActiveView(index)
-            // the connection to UM.ActiveView will trigger update so there is no reason to call it manually here
-        }
-
-        onCurrentIndexChanged:
-        {
-            if (model.getItem(currentIndex).id != undefined)
-                viewModeButton.setActiveIndex(model.getItem(currentIndex).id)
-        }
-        currentIndex: getActiveIndex()
-
-        // watch the active view proxy for changes made from the menu item
-        Connections
-        {
-            target: UM.ActiveView
-            onActiveViewChanged: viewModeButton.updateItemActiveFlags()
-        }
-    }
-
-    Loader
-    {
-        id: view_panel
-
-        anchors.top: viewModeButton.bottom
-        anchors.topMargin: UM.Theme.getSize("default_margin").height
-        anchors.right: viewModeButton.right
-
-        property var buttonTarget: Qt.point(viewModeButton.x + Math.round(viewModeButton.width / 2), viewModeButton.y + Math.round(viewModeButton.height / 2))
-
-        height: childrenRect.height
-        width: childrenRect.width
-
-        source: UM.ActiveView.valid ? UM.ActiveView.activeViewPanel : "";
-    }
-
-    // Expand or collapse sidebar
-    Connections
-    {
-        target: Cura.Actions.expandSidebar
-        onTriggered: updateMarginsAndSizes()
-    }
-
-    Component.onCompleted:
-    {
-        updateMarginsAndSizes();
-    }
-
-}

resources/themes/cura-dark/theme.json

@@ -15,12 +15,11 @@
         "border": [127, 127, 127, 255],
         "secondary": [241, 242, 242, 255],
 
-        "topbar_background_color": [0, 0, 0, 0],
-        "topbar_background_color_monitoring": [31, 36, 39, 255],
+        "topheader_background": [31, 36, 39, 255],
 
-        "topbar_button_text_active": [255, 255, 255, 255],
-        "topbar_button_text_inactive": [128, 128, 128, 255],
-        "topbar_button_text_hovered": [255, 255, 255, 255],
+        "topheader_button_text_active": [255, 255, 255, 255],
+        "topheader_button_text_inactive": [128, 128, 128, 255],
+        "topheader_button_text_hovered": [255, 255, 255, 255],
 
         "text": [255, 255, 255, 204],
         "text_detail": [255, 255, 255, 172],
@@ -221,6 +220,10 @@
         "quality_slider_available": [255, 255, 255, 255],
         "quality_slider_handle": [255, 255, 255, 255],
         "quality_slider_handle_hover": [127, 127, 127, 255],
-        "quality_slider_text": [255, 255, 255, 255]
+        "quality_slider_text": [255, 255, 255, 255],
+
+        "toolbox_header_button_text_active": [255, 255, 255, 255],
+        "toolbox_header_button_text_inactive": [128, 128, 128, 255],
+        "toolbox_header_button_text_hovered": [255, 255, 255, 255]
     }
 }

resources/themes/cura-light/styles.qml

@@ -90,85 +90,11 @@ QtObject {
         }
     }
 
-    property Component topbar_header_tab_no_overlay: Component {
-        ButtonStyle {
-            background: Rectangle {
-                implicitHeight: Theme.getSize("topbar_button").height
-                implicitWidth: Theme.getSize("topbar_button").width
-                color: "transparent"
-                anchors.fill: parent
-
-                Rectangle
-                {
-                    id: underline
-
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.bottom: parent.bottom
-                    width: parent.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
-                }
-            }
-
-            label: Rectangle {
-                implicitHeight: Theme.getSize("topbar_button_icon").height
-                implicitWidth: Theme.getSize("topbar_button").width
-                color: "transparent"
-                anchors.fill: parent
-
-                Item
-                {
-                    anchors.centerIn: parent
-                    width: Math.round(textLabel.width + icon.width + Theme.getSize("default_margin").width / 2)
-                    Label
-                    {
-                        id: textLabel
-                        text: control.text
-                        anchors.right: icon.visible ? icon.left : parent.right
-                        anchors.rightMargin: icon.visible ? Math.round(Theme.getSize("default_margin").width / 2) : 0
-                        anchors.verticalCenter: parent.verticalCenter;
-                        font: control.checked ? UM.Theme.getFont("large") : UM.Theme.getFont("large_nonbold")
-                        color:
-                        {
-                            if(control.hovered)
-                            {
-                                return UM.Theme.getColor("topbar_button_text_hovered");
-                            }
-                            if(control.checked)
-                            {
-                                return UM.Theme.getColor("topbar_button_text_active");
-                            }
-                            else
-                            {
-                                return UM.Theme.getColor("topbar_button_text_inactive");
-                            }
-                        }
-                    }
-                    Image
-                    {
-                        id: icon
-                        visible: control.iconSource != ""
-                        anchors.right: parent.right
-                        anchors.verticalCenter: parent.verticalCenter
-                        opacity: !control.enabled ? 0.2 : 1.0
-                        source: control.iconSource
-                        width: visible ? Theme.getSize("topbar_button_icon").width : 0
-                        height: Theme.getSize("topbar_button_icon").height
-
-                        sourceSize: Theme.getSize("topbar_button_icon")
-                    }
-                }
-            }
-        }
-    }
-
-    property Component topbar_header_tab: Component {
+    property Component topheader_tab: Component {
         ButtonStyle {
             background: Item {
-                implicitHeight: Theme.getSize("topbar_button").height
-                implicitWidth: Theme.getSize("topbar_button").width + Theme.getSize("topbar_button_icon").width
+                implicitHeight: Theme.getSize("topheader_button").height
+                implicitWidth: Theme.getSize("topheader_button").width + Theme.getSize("topheader_button_icon").width
 
                 Rectangle {
                     id: buttonFace;
@@ -182,7 +108,7 @@ QtObject {
 
                         anchors.horizontalCenter: parent.horizontalCenter
                         anchors.bottom: parent.bottom
-                        width: Theme.getSize("topbar_button").width + Theme.getSize("topbar_button_icon").width
+                        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
@@ -192,14 +118,14 @@ QtObject {
 
             label: Item
             {
-                implicitHeight: Theme.getSize("topbar_button_icon").height
-                implicitWidth: Theme.getSize("topbar_button").width + Theme.getSize("topbar_button_icon").width
+                implicitHeight: Theme.getSize("topheader_button_icon").height
+                implicitWidth: Theme.getSize("topheader_button").width + Theme.getSize("topheader_button_icon").width
                 Item
                 {
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.verticalCenter: parent.verticalCenter;
                     width: childrenRect.width
-                    height: Theme.getSize("topbar_button_icon").height
+                    height: Theme.getSize("topheader_button_icon").height
                     Label
                     {
                         id: button_label
@@ -210,15 +136,15 @@ QtObject {
                         {
                             if(control.hovered)
                             {
-                                return UM.Theme.getColor("topbar_button_text_hovered");
+                                return UM.Theme.getColor("topheader_button_text_hovered");
                             }
                             if(control.checked)
                             {
-                                return UM.Theme.getColor("topbar_button_text_active");
+                                return UM.Theme.getColor("topheader_button_text_active");
                             }
                             else
                             {
-                                return UM.Theme.getColor("topbar_button_text_inactive");
+                                return UM.Theme.getColor("topheader_button_text_inactive");
                             }
                         }
                     }
@@ -231,10 +157,10 @@ QtObject {
                         color: UM.Theme.getColor("text_emphasis")
                         opacity: !control.enabled ? 0.2 : 1.0
                         source: control.iconSource
-                        width: visible ? Theme.getSize("topbar_button_icon").width : 0
-                        height: Theme.getSize("topbar_button_icon").height
+                        width: visible ? Theme.getSize("topheader_button_icon").width : 0
+                        height: Theme.getSize("topheader_button_icon").height
 
-                        sourceSize: Theme.getSize("topbar_button_icon")
+                        sourceSize: Theme.getSize("topheader_button_icon")
                     }
                     UM.RecolorImage
                     {
@@ -245,10 +171,10 @@ QtObject {
                         color: control.overlayColor
                         opacity: !control.enabled ? 0.2 : 1.0
                         source: control.overlayIconSource
-                        width: visible ? Theme.getSize("topbar_button_icon").width : 0
-                        height: Theme.getSize("topbar_button_icon").height
+                        width: visible ? Theme.getSize("topheader_button_icon").width : 0
+                        height: Theme.getSize("topheader_button_icon").height
 
-                        sourceSize: Theme.getSize("topbar_button_icon")
+                        sourceSize: Theme.getSize("topheader_button_icon")
                     }
                 }
             }

resources/themes/cura-light/theme.json

@@ -79,12 +79,11 @@
         "border": [127, 127, 127, 255],
         "secondary": [245, 245, 245, 255],
 
-        "topbar_background_color": [255, 255, 255, 0],
-        "topbar_background_color_monitoring": [255, 255, 255, 255],
+        "topheader_background": [255, 255, 255, 255],
 
-        "topbar_button_text_active": [0, 0, 0, 255],
-        "topbar_button_text_inactive": [128, 128, 128, 255],
-        "topbar_button_text_hovered": [0, 0, 0, 255],
+        "topheader_button_text_active": [0, 0, 0, 255],
+        "topheader_button_text_inactive": [128, 128, 128, 255],
+        "topheader_button_text_hovered": [0, 0, 0, 255],
 
         "text": [0, 0, 0, 255],
         "text_detail": [174, 174, 174, 128],
@@ -317,6 +316,10 @@
         "printer_config_matched": [12, 169, 227, 255],
         "printer_config_mismatch": [127, 127, 127, 255],
 
+        "toolbox_header_button_text_active": [0, 0, 0, 255],
+        "toolbox_header_button_text_inactive": [128, 128, 128, 255],
+        "toolbox_header_button_text_hovered": [0, 0, 0, 255],
+
         "favorites_header_bar": [245, 245, 245, 255],
         "favorites_header_hover": [245, 245, 245, 255],
         "favorites_header_text": [31, 36, 39, 255],
@@ -332,6 +335,13 @@
     "sizes": {
         "window_minimum_size": [70, 50],
 
+        "topheader": [0.0, 4.0],
+        "topheader_logo_right_margin": [3, 0],
+        "topheader_button": [8, 4],
+        "topheader_button_icon": [1.2, 1.2],
+
+        "views_selector": [0.0, 4.0],
+
         "default_lining": [0.08, 0.08],
         "default_arrow": [0.8, 0.8],
         "logo": [7.6, 1.6],
@@ -390,10 +400,6 @@
         "printer_status_icon": [1.8, 1.8],
         "printer_sync_icon": [1.2, 1.2],
 
-        "topbar_logo_right_margin": [3, 0],
-        "topbar_button": [8, 4],
-        "topbar_button_icon": [1.2, 1.2],
-
         "button_tooltip": [1.0, 1.3],
         "button_tooltip_arrow": [0.25, 0.25],