From 075a9a161fb77c999ad432666cd9b6d943f52cad Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Mon, 8 Oct 2018 12:57:16 +0200 Subject: [PATCH] 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. --- .../resources/qml/ToolboxTabButton.qml | 6 +- resources/qml/Cura.qml | 12 + .../ConfigurationMenu/ConfigurationItem.qml | 4 +- resources/qml/Skeleton/ApplicationViews.qml | 108 +++++++++ resources/qml/Skeleton/OrientationViews.qml | 56 +++++ resources/qml/Skeleton/TopHeader.qml | 208 ++---------------- resources/themes/cura-dark/theme.json | 15 +- resources/themes/cura-light/styles.qml | 106 ++------- resources/themes/cura-light/theme.json | 24 +- 9 files changed, 235 insertions(+), 304 deletions(-) create mode 100644 resources/qml/Skeleton/ApplicationViews.qml create mode 100644 resources/qml/Skeleton/OrientationViews.qml 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],