diff --git a/plugins/PreviewStage/PreviewMenu.qml b/plugins/PreviewStage/PreviewMenu.qml index b331ff69c5..7b3a3af4e3 100644 --- a/plugins/PreviewStage/PreviewMenu.qml +++ b/plugins/PreviewStage/PreviewMenu.qml @@ -3,7 +3,7 @@ import QtQuick 2.7 -import QtQuick.Controls 2.4 +import QtQuick.Controls 2.3 import UM 1.3 as UM import Cura 1.1 as Cura diff --git a/resources/qml/ActionButton.qml b/resources/qml/ActionButton.qml index 2a8b894867..08f4d9d679 100644 --- a/resources/qml/ActionButton.qml +++ b/resources/qml/ActionButton.qml @@ -12,6 +12,7 @@ Button id: button property alias cursorShape: mouseArea.cursorShape property alias iconSource: buttonIcon.source + property alias iconSourceRight: buttonIconRight.source property alias textFont: buttonText.font property alias cornerRadius: backgroundRect.radius property alias tooltip: tooltip.text @@ -29,7 +30,8 @@ Button // we elide the text to the right so the text will be cut off with the three dots at the end. property var fixedWidthMode: false - contentItem: Row + width: buttonIcon.width + buttonText.width + buttonIconRight.width + contentItem: Item { UM.RecolorImage { @@ -57,6 +59,20 @@ Button horizontalAlignment: Text.AlignHCenter elide: Text.ElideRight } + + UM.RecolorImage + { + id: buttonIconRight + source: "" + height: Math.round(0.6 * parent.height) + width: height + sourceSize.width: width + sourceSize.height: height + color: button.hovered ? button.textHoverColor : button.textColor + visible: source != "" + anchors.verticalCenter: parent.verticalCenter + anchors.right: source != "" ? parent.right : undefined + } } background: Rectangle diff --git a/resources/qml/MachineSelector.qml b/resources/qml/MachineSelector.qml index a464949192..c9756d93ba 100644 --- a/resources/qml/MachineSelector.qml +++ b/resources/qml/MachineSelector.qml @@ -2,7 +2,7 @@ // Cura is released under the terms of the LGPLv3 or higher. import QtQuick 2.2 -import QtQuick.Controls 2.4 +import QtQuick.Controls 2.3 import QtQuick.Controls.Styles 1.1 import QtQuick.Layouts 1.1 diff --git a/resources/qml/Menus/ConfigurationMenu/QuickConfigurationSelector.qml b/resources/qml/Menus/ConfigurationMenu/QuickConfigurationSelector.qml index 33610135fe..d428a05463 100644 --- a/resources/qml/Menus/ConfigurationMenu/QuickConfigurationSelector.qml +++ b/resources/qml/Menus/ConfigurationMenu/QuickConfigurationSelector.qml @@ -4,7 +4,7 @@ import QtQuick 2.7 import QtQuick.Controls 2.0 import QtQuick.Controls.Styles 1.4 -import QtQuick.Layouts 1.11 +import QtQuick.Layouts 1.3 import QtQuick.Controls 1.1 as OldControls diff --git a/resources/qml/PrintSetupSelector.qml b/resources/qml/PrintSetupSelector.qml index b843244147..ed09238b51 100644 --- a/resources/qml/PrintSetupSelector.qml +++ b/resources/qml/PrintSetupSelector.qml @@ -28,8 +28,15 @@ Cura.ExpandableComponent height: childrenRect.height iconSource: UM.Theme.getIcon("pencil") + popupPadding : 0 + onCurrentModeIndexChanged: UM.Preferences.setValue("cura/active_mode", currentModeIndex) + Component.onCompleted: + { + popupItemWrapper.width = base.width + } + UM.I18nCatalog { id: catalog @@ -109,142 +116,242 @@ Cura.ExpandableComponent } } - popupItem: Item + + Cura.ExtrudersModel { - height: settingsModeSelection.height + sidebarContents.height + 2 * UM.Theme.getSize("default_margin").height - width: UM.Theme.getSize("print_setup_widget").width - ListView - { - // Settings mode selection toggle - id: settingsModeSelection - model: modesListModel - height: UM.Theme.getSize("print_setup_mode_toggle").height - visible: !hideSettings + id: extrudersModel + } - anchors - { - right: parent.right - left: parent.left - margins: UM.Theme.getSize("thick_margin").width - } + popupItem: Rectangle + { + property var total_height: popupItemHeader.height + popupItemContent.height + 10 + separator_footer.height + id: popupItemWrapper + height: total_height - ButtonGroup - { - id: modeMenuGroup - } - - delegate: Button - { - id: control - - height: settingsModeSelection.height - width: Math.round(parent.width / 2) - - anchors.left: parent.left - anchors.leftMargin: model.index * Math.round(settingsModeSelection.width / 2) - anchors.verticalCenter: parent.verticalCenter - - ButtonGroup.group: modeMenuGroup - - checkable: true - checked: base.currentModeIndex == index - onClicked: base.currentModeIndex = index - - onHoveredChanged: - { - if (hovered) - { - tooltipDelayTimer.item = settingsModeSelection - tooltipDelayTimer.text = model.tooltipText - tooltipDelayTimer.start() - } - else - { - tooltipDelayTimer.stop() - base.hideTooltip() - } - } - - background: Rectangle - { - border.width: control.checked ? UM.Theme.getSize("default_lining").width * 2 : UM.Theme.getSize("default_lining").width - border.color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active_border") : control.hovered ? UM.Theme.getColor("action_button_hovered_border") : UM.Theme.getColor("action_button_border") - - // For some reason, QtQuick decided to use the color of the background property as text color for the contentItem, so here it is - color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active") : control.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button") - } - - contentItem: Label - { - text: model.text - font: UM.Theme.getFont("default") - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - renderType: Text.NativeRendering - elide: Text.ElideRight - color: - { - if(control.pressed) - { - return UM.Theme.getColor("action_button_active_text") - } - else if(control.hovered) - { - return UM.Theme.getColor("action_button_hovered_text") - } - return UM.Theme.getColor("action_button_text") - } - } - } - } + border.width: UM.Theme.getSize("default_lining").width + border.color: UM.Theme.getColor("lining") Item { - id: sidebarContents - anchors.top: settingsModeSelection.bottom - anchors.topMargin: UM.Theme.getSize("thick_margin").height - anchors.left: parent.left - anchors.right: parent.right - height: UM.Theme.getSize("print_setup_widget").height + id: popupItemHeader + height: 36 - visible: !hideSettings - - // We load both of them at once (instead of using a loader) because the advanced sidebar can take - // quite some time to load. So in this case we sacrifice memory for speed. - SidebarAdvanced + anchors { - anchors.fill: parent - visible: currentModeIndex == 1 - onShowTooltip: base.showTooltip(item, location, text) - onHideTooltip: base.hideTooltip() + top: parent.top + right: parent.right + left: parent.left } - SidebarSimple + Label { - anchors.fill: parent - visible: currentModeIndex != 1 - onShowTooltip: base.showTooltip(item, location, text) - onHideTooltip: base.hideTooltip() + id: popupItemHeaderText + text: catalog.i18nc("@label", "Print settings"); + font: UM.Theme.getFont("default") + verticalAlignment: Text.AlignVCenter + color: UM.Theme.getColor("text") + height: parent.height + anchors.topMargin: UM.Theme.getSize("sidebar_margin").height + anchors.bottomMargin: UM.Theme.getSize("sidebar_margin").height + anchors.left: parent.left + anchors.leftMargin: UM.Theme.getSize("print_setup_selector_margin").height + } + + Rectangle + { + width: parent.width + height: UM.Theme.getSize("default_lining").height + anchors.top: popupItemHeaderText.bottom + color: UM.Theme.getColor("action_button_border") + + } } - // Setting mode: Recommended or Custom - ListModel + Rectangle { - id: modesListModel + id: popupItemContent + width: parent.width + height: tabBar.height + sidebarContents.height + anchors + { + top: popupItemHeader.bottom + topMargin: 10 + right: parent.right + left: parent.left + leftMargin: 5 + rightMargin: 5 + } + + + TabBar + { + id: tabBar + onCurrentIndexChanged: Cura.ExtruderManager.setActiveExtruderIndex(currentIndex) + width: parent.width + height: UM.Theme.getSize("print_setup_tap_bar").width + z: 1 + Repeater + { + id: extruder_model_repeater + model: extrudersModel + + delegate: TabButton + { + z: 2 + width: ListView.view != null ? Math.round(ListView.view.width / extrudersModel.rowCount()): 0 + implicitHeight: parent.height + + contentItem: Rectangle + { + z: 2 + Cura.ExtruderIcon + { + anchors.horizontalCenter: parent.horizontalCenter + materialColor: model.color + extruderEnabled: model.enabled + width: parent.height + height: parent.height + } + + } + + background: Rectangle + { + + width: parent.width + z: 1 + border.width: UM.Theme.getSize("default_lining").width * 2 + border.color: UM.Theme.getColor("action_button_border") + + visible: + { + return index == tabBar.currentIndex + } + + // overlap bottom border + Rectangle + { + width: parent.width - 4 + height: 4 + anchors.bottom: parent.bottom + anchors.bottomMargin: -2 + anchors.leftMargin: 2 + anchors.left: parent.left + + } + } + } + } + } + + Rectangle + { + id: sidebarContents + anchors.top: tabBar.bottom + anchors.left: parent.left + anchors.right: parent.right + height: UM.Theme.getSize("print_setup_widget").height + + + border.width: UM.Theme.getSize("default_lining").width * 2 + border.color: UM.Theme.getColor("action_button_border") + + SidebarSimple + { + anchors.topMargin: UM.Theme.getSize("print_setup_content_top_margin").height + id: sidebar_simple_id + anchors.fill: parent + visible: currentModeIndex != 1 + onShowTooltip: base.showTooltip(item, location, text) + onHideTooltip: base.hideTooltip() + } + + SidebarAdvanced + { + anchors.topMargin: UM.Theme.getSize("print_setup_content_top_margin").height + anchors.bottomMargin: 2 //does not overlap bottom border + anchors.fill: parent + visible: currentModeIndex == 1 + onShowTooltip: base.showTooltip(item, location, text) + onHideTooltip: base.hideTooltip() + } + + } } + + Item + { + id: separator_footer + anchors.top: popupItemContent.bottom + anchors.topMargin: 10 + width: parent.width + height: settingControlButton.height + 4 + + Rectangle + { + width: parent.width + height: UM.Theme.getSize("default_lining").height + color: UM.Theme.getColor("action_button_border") + } + + Cura.ActionButton + { + id: settingControlButton + + leftPadding: UM.Theme.getSize("default_margin").width + rightPadding: UM.Theme.getSize("default_margin").width + height: UM.Theme.getSize("action_panel_button").height + text: catalog.i18nc("@button", "Custom") + color: UM.Theme.getColor("secondary") + hoverColor: UM.Theme.getColor("secondary") + textColor: UM.Theme.getColor("primary") + textHoverColor: UM.Theme.getColor("text") + iconSourceRight: UM.Theme.getIcon("arrow_right") + width: UM.Theme.getSize("print_setup_action_button").width + fixedWidthMode: true + visible: currentModeIndex == 0 + anchors + { + top: parent.top + topMargin: 10 + bottomMargin: 10 + right: parent.right + rightMargin: 5 + } + + onClicked: currentModeIndex = 1 + } + + Cura.ActionButton + { + height: UM.Theme.getSize("action_panel_button").height + text: catalog.i18nc("@button", "Recommended") + color: UM.Theme.getColor("secondary") + hoverColor: UM.Theme.getColor("secondary") + textColor: UM.Theme.getColor("primary") + textHoverColor: UM.Theme.getColor("text") + iconSource: UM.Theme.getIcon("arrow_left") + width: UM.Theme.getSize("print_setup_action_button").width + + + fixedWidthMode: true + visible: currentModeIndex == 1 + anchors + { + top: parent.top + topMargin: UM.Theme.getSize("print_setup_selector_margin").height * 2 + bottomMargin: UM.Theme.getSize("print_setup_selector_margin").height * 2 + left: parent.left + leftMargin: UM.Theme.getSize("print_setup_selector_margin").height + } + + onClicked: currentModeIndex = 0 + } + } Component.onCompleted: { - modesListModel.append({ - text: catalog.i18nc("@title:tab", "Recommended"), - tooltipText: "%1

%2".arg(catalog.i18nc("@tooltip:title", "Recommended Print Setup")).arg(catalog.i18nc("@tooltip", "Print with the recommended settings for the selected printer, material and quality.")) - }) - modesListModel.append({ - text: catalog.i18nc("@title:tab", "Custom"), - tooltipText: "%1

%2".arg(catalog.i18nc("@tooltip:title", "Custom Print Setup")).arg(catalog.i18nc("@tooltip", "Print with finegrained control over every last bit of the slicing process.")) - }) - var index = Math.round(UM.Preferences.getValue("cura/active_mode")) if(index != null && !isNaN(index)) @@ -257,4 +364,4 @@ Cura.ExpandableComponent } } } -} +} \ No newline at end of file diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index d28611529b..fc62edc480 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -528,6 +528,11 @@ "monitor_thick_lining": [0.16, 0.16], "monitor_corner_radius": [0.3, 0.3], "monitor_shadow_radius": [0.4, 0.4], - "monitor_shadow_offset": [0.15, 0.15] + "monitor_shadow_offset": [0.15, 0.15], + + "print_setup_selector_margin": [0.5, 0.5], + "print_setup_action_button": [13, 5], + "print_setup_tap_bar": [4, 4], + "print_setup_content_top_margin": [3, 3] } }