diff --git a/plugins/SimulationView/LayerSlider.qml b/plugins/SimulationView/LayerSlider.qml index 7916cd62b3..42b8cf0ba0 100644 --- a/plugins/SimulationView/LayerSlider.qml +++ b/plugins/SimulationView/LayerSlider.qml @@ -21,15 +21,12 @@ Item property color lowerHandleColor: UM.Theme.getColor("slider_handle") property color rangeHandleColor: UM.Theme.getColor("slider_groove_fill") property color handleActiveColor: UM.Theme.getColor("slider_handle_active") - property real handleLabelWidth: UM.Theme.getSize("slider_layerview_background").width property var activeHandle: upperHandle // Track properties property real trackThickness: UM.Theme.getSize("slider_groove").width // width of the slider track - property real trackRadius: trackThickness / 2 + property real trackRadius: UM.Theme.getSize("slider_groove_radius").width property color trackColor: UM.Theme.getColor("slider_groove") - property real trackBorderWidth: 1 - property color trackBorderColor: UM.Theme.getColor("slider_groove_border") // value properties property real maximumValue: 100 @@ -90,8 +87,6 @@ Item radius: sliderRoot.trackRadius anchors.centerIn: sliderRoot color: sliderRoot.trackColor - border.width: sliderRoot.trackBorderWidth - border.color: sliderRoot.trackBorderColor visible: sliderRoot.layersVisible } @@ -140,9 +135,10 @@ Item Rectangle { - width: sliderRoot.trackThickness - 2 * sliderRoot.trackBorderWidth + width: sliderRoot.trackThickness height: parent.height + sliderRoot.handleSize anchors.centerIn: parent + radius: sliderRoot.trackRadius color: sliderRoot.rangeHandleColor } diff --git a/plugins/SimulationView/PathSlider.qml b/plugins/SimulationView/PathSlider.qml index 701e54e398..c7a43c6407 100644 --- a/plugins/SimulationView/PathSlider.qml +++ b/plugins/SimulationView/PathSlider.qml @@ -23,10 +23,8 @@ Item // track properties property real trackThickness: UM.Theme.getSize("slider_groove").width - property real trackRadius: trackThickness / 2 + property real trackRadius: UM.Theme.getSize("slider_groove_radius").width property color trackColor: UM.Theme.getColor("slider_groove") - property real trackBorderWidth: 1 // width of the slider track border - property color trackBorderColor: UM.Theme.getColor("slider_groove_border") // value properties property real maximumValue: 100 @@ -68,8 +66,6 @@ Item radius: sliderRoot.trackRadius anchors.centerIn: sliderRoot color: sliderRoot.trackColor - border.width: sliderRoot.trackBorderWidth - border.color: sliderRoot.trackBorderColor visible: sliderRoot.pathsVisible } @@ -86,9 +82,10 @@ Item Rectangle { - height: sliderRoot.trackThickness - 2 * sliderRoot.trackBorderWidth + height: sliderRoot.trackThickness width: parent.width + sliderRoot.handleSize anchors.centerIn: parent + radius: sliderRoot.trackRadius color: sliderRoot.rangeColor } } diff --git a/plugins/SimulationView/SimulationViewMainComponent.qml b/plugins/SimulationView/SimulationViewMainComponent.qml index 784938e5c2..4e038a1cf1 100644 --- a/plugins/SimulationView/SimulationViewMainComponent.qml +++ b/plugins/SimulationView/SimulationViewMainComponent.qml @@ -18,7 +18,7 @@ Item { id: pathSlider height: UM.Theme.getSize("slider_handle").width - width: UM.Theme.getSize("layerview_menu_size").width + width: UM.Theme.getSize("slider_layerview_size").height anchors.bottom: parent.bottom anchors.bottomMargin: UM.Theme.getSize("default_margin").height @@ -166,7 +166,7 @@ Item id: layerSlider width: UM.Theme.getSize("slider_handle").width - height: UM.Theme.getSize("layerview_menu_size").height + height: UM.Theme.getSize("slider_layerview_size").height anchors { diff --git a/resources/qml/Account/AccountWidget.qml b/resources/qml/Account/AccountWidget.qml index e37523296f..d3bd6fd130 100644 --- a/resources/qml/Account/AccountWidget.qml +++ b/resources/qml/Account/AccountWidget.qml @@ -51,6 +51,9 @@ Button closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent + opacity: opened ? 1 : 0 + Behavior on opacity { NumberAnimation { duration: 100 } } + contentItem: AccountDetails { id: panel @@ -61,8 +64,6 @@ Button background: UM.PointingRectangle { - opacity: visible ? 1 : 0 - Behavior on opacity { NumberAnimation { duration: 100 } } color: UM.Theme.getColor("tool_panel_background") borderColor: UM.Theme.getColor("lining") borderWidth: UM.Theme.getSize("default_lining").width diff --git a/resources/qml/ActionPanel/ActionPanelWidget.qml b/resources/qml/ActionPanel/ActionPanelWidget.qml index 0db778de5a..a1cd81e9e9 100644 --- a/resources/qml/ActionPanel/ActionPanelWidget.qml +++ b/resources/qml/ActionPanel/ActionPanelWidget.qml @@ -23,7 +23,6 @@ Rectangle border.width: UM.Theme.getSize("default_lining").width border.color: UM.Theme.getColor("lining") radius: UM.Theme.getSize("default_radius").width - visible: CuraApplication.platformActivity property bool outputAvailable: UM.Backend.state == UM.Backend.Done || UM.Backend.state == UM.Backend.Disabled diff --git a/resources/qml/ActionPanel/OutputProcessWidget.qml b/resources/qml/ActionPanel/OutputProcessWidget.qml index 0ea956d1dc..f4e014b1ec 100644 --- a/resources/qml/ActionPanel/OutputProcessWidget.qml +++ b/resources/qml/ActionPanel/OutputProcessWidget.qml @@ -102,6 +102,8 @@ Column Cura.ActionButton { + id: previewStageShortcut + leftPadding: UM.Theme.getSize("default_margin").width rightPadding: UM.Theme.getSize("default_margin").width height: UM.Theme.getSize("action_panel_button").height @@ -111,11 +113,12 @@ Column textColor: UM.Theme.getColor("primary") textHoverColor: UM.Theme.getColor("text") onClicked: UM.Controller.setActiveStage("PreviewStage") + visible: UM.Controller.activeStage != null && UM.Controller.activeStage.stageId != "PreviewStage" } Cura.OutputDevicesActionButton { - width: UM.Theme.getSize("action_panel_button").width + width: previewStageShortcut.visible ? UM.Theme.getSize("action_panel_button").width : parent.width height: UM.Theme.getSize("action_panel_button").height } } diff --git a/resources/qml/ActionPanel/PrintInformationWidget.qml b/resources/qml/ActionPanel/PrintInformationWidget.qml index 620c3a408c..82707576e0 100644 --- a/resources/qml/ActionPanel/PrintInformationWidget.qml +++ b/resources/qml/ActionPanel/PrintInformationWidget.qml @@ -7,29 +7,30 @@ import QtQuick.Controls 2.1 import UM 1.1 as UM import Cura 1.0 as Cura -Button +UM.RecolorImage { id: widget - implicitHeight: UM.Theme.getSize("section_icon").height - implicitWidth: UM.Theme.getSize("section_icon").width + //implicitHeight: UM.Theme.getSize("section_icon").height + //implicitWidth: UM.Theme.getSize("section_icon").width - background: UM.RecolorImage + source: UM.Theme.getIcon("info") + width: UM.Theme.getSize("section_icon").width + height: UM.Theme.getSize("section_icon").height + + sourceSize.width: width + sourceSize.height: height + + color: popup.opened ? UM.Theme.getColor("primary") : UM.Theme.getColor("text_medium") + + MouseArea { - id: moreInformationIcon - - source: UM.Theme.getIcon("info") - width: UM.Theme.getSize("section_icon").width - height: UM.Theme.getSize("section_icon").height - - sourceSize.width: width - sourceSize.height: height - - color: widget.hovered ? UM.Theme.getColor("primary") : UM.Theme.getColor("text_medium") + anchors.fill: parent + hoverEnabled: true + onEntered: popup.open() + onExited: popup.close() } - onClicked: popup.opened ? popup.close() : popup.open() - Popup { id: popup @@ -39,6 +40,9 @@ Button closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent + opacity: opened ? 1 : 0 + Behavior on opacity { NumberAnimation { duration: 100 } } + contentItem: PrintJobInformation { id: printJobInformation @@ -47,8 +51,6 @@ Button background: UM.PointingRectangle { - opacity: visible ? 1 : 0 - Behavior on opacity { NumberAnimation { duration: 100 } } color: UM.Theme.getColor("tool_panel_background") borderColor: UM.Theme.getColor("lining") borderWidth: UM.Theme.getSize("default_lining").width diff --git a/resources/qml/Cura.qml b/resources/qml/Cura.qml index dc64aeee38..819d986ece 100644 --- a/resources/qml/Cura.qml +++ b/resources/qml/Cura.qml @@ -186,6 +186,7 @@ UM.MainWindow verticalCenter: parent.verticalCenter left: parent.left } + visible: CuraApplication.platformActivity } ObjectsList @@ -235,6 +236,7 @@ UM.MainWindow anchors.bottom: parent.bottom anchors.rightMargin: UM.Theme.getSize("thick_margin").width anchors.bottomMargin: UM.Theme.getSize("thick_margin").height + visible: CuraApplication.platformActivity } Loader diff --git a/resources/qml/ExtruderButton.qml b/resources/qml/ExtruderButton.qml index 2c1b80047e..7923521658 100644 --- a/resources/qml/ExtruderButton.qml +++ b/resources/qml/ExtruderButton.qml @@ -15,37 +15,36 @@ Button text: catalog.i18ncp("@label %1 is filled in with the name of an extruder", "Print Selected Model with %1", "Print Selected Models with %1", UM.Selection.selectionCount).arg(extruder.name) - style: UM.Theme.styles.tool_button; + style: UM.Theme.styles.toolbar_button iconSource: UM.Theme.getIcon("extruder_button") checked: Cura.ExtruderManager.selectedObjectExtruders.indexOf(extruder.id) != -1 enabled: UM.Selection.hasSelection && extruder.stack.isEnabled - property color customColor: base.hovered ? UM.Theme.getColor("button_hover") : UM.Theme.getColor("button"); - - Rectangle - { - anchors.fill: parent - anchors.margins: UM.Theme.getSize("default_lining").width; - - color: "transparent" - - border.width: base.checked ? UM.Theme.getSize("default_lining").width : 0; - border.color: UM.Theme.getColor("button_text") - } - Item { anchors.centerIn: parent width: UM.Theme.getSize("default_margin").width height: UM.Theme.getSize("default_margin").height + opacity: !base.enabled ? 0.2 : 1.0 Label { - anchors.centerIn: parent; - text: index + 1; - color: parent.enabled ? UM.Theme.getColor("button_text") : UM.Theme.getColor("button_disabled_text") - font: UM.Theme.getFont("default_bold"); + anchors.centerIn: parent + text: index + 1 + color: + { + if (base.checked) + { + return UM.Theme.getColor("toolbar_button_text_active") + } + else if(base.hovered) + { + return UM.Theme.getColor("toolbar_button_text_hover") + } + return UM.Theme.getColor("toolbar_button_text") + } + font: UM.Theme.getFont("default_bold") } } diff --git a/resources/qml/MainWindow/ApplicationMenu.qml b/resources/qml/MainWindow/ApplicationMenu.qml index d3bc115419..04c068cb54 100644 --- a/resources/qml/MainWindow/ApplicationMenu.qml +++ b/resources/qml/MainWindow/ApplicationMenu.qml @@ -86,7 +86,7 @@ Item Menu { id: plugin_menu - title: catalog.i18nc("@title:menu menubar:toplevel", "&Toolbox") + title: catalog.i18nc("@title:menu menubar:toplevel", "&Marketplace") MenuItem { action: Cura.Actions.browsePackages } } diff --git a/resources/qml/Toolbar.qml b/resources/qml/Toolbar.qml index a04b3650df..9955ceeba7 100644 --- a/resources/qml/Toolbar.qml +++ b/resources/qml/Toolbar.qml @@ -11,75 +11,113 @@ import Cura 1.0 as Cura Item { - id: base; + id: base - width: buttons.width; + width: buttons.width height: buttons.height property int activeY - Column + Item { - id: buttons; + id: buttons + width: parent.visible ? toolButtons.width : 0 + height: childrenRect.height - anchors.bottom: parent.bottom - anchors.left: parent.left - spacing: UM.Theme.getSize("button_lining").width + Behavior on width { NumberAnimation { duration: 100 } } - Repeater + // Used to create a rounded rectangle behind the toolButtons + Rectangle { - id: repeat + anchors.fill: toolButtons + anchors.leftMargin: -radius + radius: UM.Theme.getSize("default_radius").width + border.width: UM.Theme.getSize("default_lining").width + border.color: UM.Theme.getColor("lining") + color: UM.Theme.getColor("toolbar_background") + } - model: UM.ToolModel { } - width: childrenRect.width - height: childrenRect.height - Button + Column + { + id: toolButtons + + anchors.top: parent.top + anchors.right: parent.right + spacing: UM.Theme.getSize("button_lining").width + + Repeater { - text: model.name + (model.shortcut ? (" (" + model.shortcut + ")") : "") - iconSource: (UM.Theme.getIcon(model.icon) != "") ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon - checkable: true - checked: model.active - enabled: model.enabled && UM.Selection.hasSelection && UM.Controller.toolsEnabled - style: UM.Theme.styles.tool_button + id: repeat - onCheckedChanged: + model: UM.ToolModel { } + width: childrenRect.width + height: childrenRect.height + Button { - if (checked) - { - base.activeY = y; - } - } + text: model.name + (model.shortcut ? (" (" + model.shortcut + ")") : "") + iconSource: (UM.Theme.getIcon(model.icon) != "") ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon + checkable: true + checked: model.active + enabled: model.enabled && UM.Selection.hasSelection && UM.Controller.toolsEnabled + style: UM.Theme.styles.toolbar_button - //Workaround since using ToolButton's onClicked would break the binding of the checked property, instead - //just catch the click so we do not trigger that behaviour. - MouseArea - { - anchors.fill: parent; - onClicked: + onCheckedChanged: { - forceActiveFocus() //First grab focus, so all the text fields are updated - if(parent.checked) + if (checked) { - UM.Controller.setActiveTool(null); + base.activeY = y; } - else + } + + //Workaround since using ToolButton's onClicked would break the binding of the checked property, instead + //just catch the click so we do not trigger that behaviour. + MouseArea + { + anchors.fill: parent; + onClicked: { - UM.Controller.setActiveTool(model.id); + forceActiveFocus() //First grab focus, so all the text fields are updated + if(parent.checked) + { + UM.Controller.setActiveTool(null); + } + else + { + UM.Controller.setActiveTool(model.id); + } } } } } } - Item { height: UM.Theme.getSize("default_margin").height; width: UM.Theme.getSize("default_lining").width; visible: extruders.count > 0 } - - Repeater + // Used to create a rounded rectangle behind the extruderButtons + Rectangle { - id: extruders - width: childrenRect.width - height: childrenRect.height - property var _model: Cura.ExtrudersModel { id: extrudersModel } - model: _model.items.length > 1 ? _model : 0 - ExtruderButton { extruder: model } + anchors.fill: extruderButtons + anchors.leftMargin: -radius + radius: UM.Theme.getSize("default_radius").width + border.width: UM.Theme.getSize("default_lining").width + border.color: UM.Theme.getColor("lining") + color: UM.Theme.getColor("toolbar_background") + } + + Column + { + id: extruderButtons + + anchors.topMargin: UM.Theme.getSize("default_margin").height + anchors.top: toolButtons.bottom + anchors.right: parent.right + + Repeater + { + id: extruders + width: childrenRect.width + height: childrenRect.height + property var _model: Cura.ExtrudersModel { id: extrudersModel } + model: _model.items.length > 1 ? _model : 0 + ExtruderButton { extruder: model } + } } } @@ -91,7 +129,7 @@ Item anchors.leftMargin: UM.Theme.getSize("default_margin").width; anchors.top: base.top; anchors.topMargin: base.activeY - z: buttons.z -1 + z: buttons.z - 1 target: Qt.point(parent.right, base.activeY + Math.round(UM.Theme.getSize("button").height/2)) arrowSize: UM.Theme.getSize("default_arrow").width diff --git a/resources/themes/cura-dark/theme.json b/resources/themes/cura-dark/theme.json index 344efb6fd1..62b1dbfa0f 100644 --- a/resources/themes/cura-dark/theme.json +++ b/resources/themes/cura-dark/theme.json @@ -135,7 +135,6 @@ "slider_handle": [255, 255, 255, 255], "slider_handle_hover": [77, 182, 226, 255], "slider_handle_active": [68, 192, 255, 255], - "slider_handle_border": [39, 44, 48, 255], "slider_text_background": [255, 255, 255, 255], "checkbox": [43, 48, 52, 255], diff --git a/resources/themes/cura-light/styles.qml b/resources/themes/cura-light/styles.qml index dacff1b42b..6f099bf1c5 100755 --- a/resources/themes/cura-light/styles.qml +++ b/resources/themes/cura-light/styles.qml @@ -171,6 +171,81 @@ QtObject } } + property Component toolbar_button: Component + { + ButtonStyle + { + background: Item + { + implicitWidth: Theme.getSize("button").width; + implicitHeight: Theme.getSize("button").height; + + UM.PointingRectangle + { + id: button_tooltip + + anchors.left: parent.right + anchors.leftMargin: Theme.getSize("button_tooltip_arrow").width * 2 + anchors.verticalCenter: parent.verticalCenter + + target: Qt.point(parent.x, y + Math.round(height/2)) + arrowSize: Theme.getSize("button_tooltip_arrow").width + color: Theme.getColor("button_tooltip") + opacity: control.hovered ? 1.0 : 0.0; + visible: control.text != "" + + width: control.hovered ? button_tip.width + Theme.getSize("button_tooltip").width : 0 + height: Theme.getSize("button_tooltip").height + + Behavior on width { NumberAnimation { duration: 100; } } + Behavior on opacity { NumberAnimation { duration: 100; } } + + Label + { + id: button_tip + + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter; + + text: control.text; + font: Theme.getFont("button_tooltip"); + color: Theme.getColor("tooltip_text"); + } + } + } + + label: Item + { + UM.RecolorImage + { + anchors.centerIn: parent; + opacity: !control.enabled ? 0.2 : 1.0 + source: control.iconSource; + width: Theme.getSize("button_icon").width; + height: Theme.getSize("button_icon").height; + color: + { + if (control.checked && control.hovered) + { + return Theme.getColor("toolbar_button_text_active_hover"); + } + else if (control.checked) + { + return Theme.getColor("toolbar_button_text_active"); + } + else if(control.hovered) + { + return Theme.getColor("toolbar_button_text_hover"); + } + return Theme.getColor("toolbar_button_text"); + } + + sourceSize: Theme.getSize("button_icon") + } + } + } + } + property Component tool_button: Component { ButtonStyle @@ -915,47 +990,6 @@ QtObject } } - property Component slider: Component - { - SliderStyle - { - groove: Rectangle - { - implicitWidth: control.width - implicitHeight: Theme.getSize("slider_groove").height - - color: Theme.getColor("slider_groove") - border.width: Theme.getSize("default_lining").width - border.color: Theme.getColor("slider_groove_border") - - radius: Math.round(width / 2) - - Rectangle - { - anchors - { - left: parent.left - top: parent.top - bottom: parent.bottom - } - color: Theme.getColor("slider_groove_fill"); - width: Math.round((control.value / (control.maximumValue - control.minimumValue)) * parent.width); - radius: Math.round(width / 2); - } - } - handle: Rectangle - { - width: Theme.getSize("slider_handle").width; - height: Theme.getSize("slider_handle").height; - color: control.hovered ? Theme.getColor("slider_handle_hover") : Theme.getColor("slider_handle"); - border.width: Theme.getSize("default_lining").width - border.color: control.hovered ? Theme.getColor("slider_handle_hover_border") : Theme.getColor("slider_handle_border") - radius: Math.round(Theme.getSize("slider_handle").width / 2); //Round. - Behavior on color { ColorAnimation { duration: 50; } } - } - } - } - property Component text_field: Component { TextFieldStyle diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index f882277d65..a33ff87042 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -105,6 +105,8 @@ "action_panel_secondary": [27, 95, 202, 255], + "toolbar_background": [255, 255, 255, 255], + "text": [0, 0, 0, 255], "text_detail": [174, 174, 174, 128], "text_link": [50, 130, 255, 255], @@ -120,6 +122,11 @@ "error": [255, 140, 0, 255], "warning": [255, 190, 35, 255], + "toolbar_button_text": [10, 8, 80, 255], + "toolbar_button_text_hover": [50, 130, 255, 255], + "toolbar_button_text_active": [50, 130, 255, 255], + "toolbar_button_text_active_hover": [50, 130, 255, 255], + "button": [31, 36, 39, 255], "button_hover": [68, 72, 75, 255], "button_active": [68, 72, 75, 255], @@ -128,14 +135,12 @@ "button_text_hover": [255, 255, 255, 255], "button_text_active": [255, 255, 255, 255], "button_text_active_hover": [255, 255, 255, 255], - "button_disabled": [31, 36, 39, 255], - "button_disabled_text": [255, 255, 255, 101], - "small_button": [31, 36, 39, 0], - "small_button_hover": [68, 72, 75, 255], - "small_button_active": [68, 72, 75, 255], - "small_button_active_hover": [68, 72, 75, 255], - "small_button_text": [31, 36, 39, 197], + "small_button": [0, 0, 0, 0], + "small_button_hover": [10, 8, 80, 255], + "small_button_active": [10, 8, 80, 255], + "small_button_active_hover": [10, 8, 80, 255], + "small_button_text": [171, 171, 191, 255], "small_button_text_hover": [255, 255, 255, 255], "small_button_text_active": [255, 255, 255, 255], "small_button_text_active_hover": [255, 255, 255, 255], @@ -215,13 +220,11 @@ "progressbar_background": [245, 245, 245, 255], "progressbar_control": [50, 130, 255, 255], - "slider_groove": [245, 245, 245, 255], - "slider_groove_border": [127, 127, 127, 255], - "slider_groove_fill": [127, 127, 127, 255], - "slider_handle": [0, 0, 0, 255], + "slider_groove": [223, 223, 223, 255], + "slider_groove_fill": [10, 8, 80, 255], + "slider_handle": [10, 8, 80, 255], "slider_handle_hover": [77, 182, 226, 255], - "slider_handle_active": [68, 192, 255, 255], - "slider_handle_border": [39, 44, 48, 255], + "slider_handle_active": [50, 130, 255, 255], "slider_text_background": [255, 255, 255, 255], "quality_slider_unavailable": [179, 179, 179, 255], @@ -449,17 +452,12 @@ "scrollbar": [0.75, 0.5], - "quality_slider_bar": [1, 0.2], - - "slider_groove": [0.3, 0.3], - "slider_handle": [1.0, 1.0], - "slider_layerview_size": [1.0, 22.0], - "slider_layerview_background": [4.0, 0.0], - "slider_layerview_margin": [1.0, 1.5], + "slider_groove": [0.5, 0.5], + "slider_groove_radius": [0.15, 0.15], + "slider_handle": [1.5, 1.5], + "slider_layerview_size": [1.0, 26.0], "layerview_menu_size": [15, 20], - "layerview_menu_size_material_color_mode": [15, 16], - "layerview_menu_size_collapsed": [15, 6], "layerview_legend_size": [1.0, 1.0], "layerview_row": [11.0, 1.5], "layerview_row_spacing": [0.0, 0.5],