diff --git a/plugins/Toolbox/resources/qml/ToolboxTabButton.qml b/plugins/Toolbox/resources/qml/ToolboxTabButton.qml index 22fb6d73ca..58149e419a 100644 --- a/plugins/Toolbox/resources/qml/ToolboxTabButton.qml +++ b/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") diff --git a/resources/qml/Cura.qml b/resources/qml/Cura.qml index 62ec4799c9..b7245b1b65 100644 --- a/resources/qml/Cura.qml +++ b/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 diff --git a/resources/qml/Menus/ConfigurationMenu/ConfigurationItem.qml b/resources/qml/Menus/ConfigurationMenu/ConfigurationItem.qml index 942dd81d9c..517b69428e 100644 --- a/resources/qml/Menus/ConfigurationMenu/ConfigurationItem.qml +++ b/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") diff --git a/resources/qml/Skeleton/ApplicationViews.qml b/resources/qml/Skeleton/ApplicationViews.qml new file mode 100644 index 0000000000..8e0b6efc0b --- /dev/null +++ b/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 : "" + } +} diff --git a/resources/qml/Skeleton/OrientationViews.qml b/resources/qml/Skeleton/OrientationViews.qml new file mode 100644 index 0000000000..d1b370ed71 --- /dev/null +++ b/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) + } +} diff --git a/resources/qml/Skeleton/TopHeader.qml b/resources/qml/Skeleton/TopHeader.qml index d27d9865b8..bdc9afd0cc 100644 --- a/resources/qml/Skeleton/TopHeader.qml +++ b/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,36 +23,36 @@ 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 - model: UM.StageModel{} + model: UM.StageModel { } delegate: Button { 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 } + ExclusiveGroup { id: topheaderMenuGroup } } - - // 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 - } - } - - 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(); - } - } diff --git a/resources/themes/cura-dark/theme.json b/resources/themes/cura-dark/theme.json index 26e6c2ac8b..fa0da2851e 100644 --- a/resources/themes/cura-dark/theme.json +++ b/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] } } diff --git a/resources/themes/cura-light/styles.qml b/resources/themes/cura-light/styles.qml index b71ddd2d86..b54d12e07b 100755 --- a/resources/themes/cura-light/styles.qml +++ b/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") } } } diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 43d892c34c..74644c4de9 100644 --- a/resources/themes/cura-light/theme.json +++ b/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],