diff --git a/resources/qml/SaveButton.qml b/resources/qml/SaveButton.qml index 07bc0a9ccc..e45d5b07b6 100644 --- a/resources/qml/SaveButton.qml +++ b/resources/qml/SaveButton.qml @@ -8,7 +8,7 @@ import QtQuick.Layouts 1.1 import UM 1.0 as UM -Button { +Rectangle { id: base; property Action saveAction; @@ -16,8 +16,6 @@ Button { property real progress: UM.Backend.progress; Behavior on progress { NumberAnimation { duration: 250; } } - enabled: progress >= 0.95; - property string currentDevice: "local_file" property bool defaultOverride: false; property bool defaultAmbiguous: false; @@ -25,9 +23,6 @@ Button { property variant printDuration: PrintInformation.currentPrintTime; property real printMaterialAmount: PrintInformation.materialAmount; - iconSource: UM.Theme.icons[Printer.outputDevices[base.currentDevice].icon]; - tooltip: Printer.outputDevices[base.currentDevice].description; - Connections { target: Printer; onOutputDevicesChanged: { @@ -51,161 +46,183 @@ Button { } } - style: ButtonStyle { - background: UM.AngledCornerRectangle { - implicitWidth: control.width; - implicitHeight: control.height; + Rectangle{ + id: background + implicitWidth: base.width; + implicitHeight: parent.height; + color: UM.Theme.colors.save_button_background; + border.width: UM.Theme.sizes.save_button_border.width + border.color: UM.Theme.colors.save_button_border - color: UM.Theme.colors.save_button_border; - cornerSize: UM.Theme.sizes.default_margin.width; + Rectangle { + id: infoBox + width: parent.width - UM.Theme.sizes.default_margin.width * 2; + height: UM.Theme.sizes.save_button_slicing_bar.height - UM.AngledCornerRectangle { - anchors.fill: parent; - anchors.margins: UM.Theme.sizes.save_button_border.width; - cornerSize: UM.Theme.sizes.default_margin.width; - color: UM.Theme.colors.save_button; - } + anchors.top: parent.top + anchors.topMargin: UM.Theme.sizes.default_margin.height; + anchors.left: parent.left + anchors.leftMargin: UM.Theme.sizes.default_margin.width; - UM.AngledCornerRectangle { - anchors { - left: parent.left; - top: parent.top; - bottom: parent.bottom; - } - - width: Math.max(parent.height + (parent.width - parent.height) * control.progress, parent.height); - cornerSize: UM.Theme.sizes.default_margin.width; - - color: !control.enabled ? UM.Theme.colors.save_button_inactive : control.hovered ? UM.Theme.colors.save_button_active_hover : UM.Theme.colors.save_button_active; - Behavior on color { ColorAnimation { duration: 50; } } - } - - UM.AngledCornerRectangle { - anchors.left: parent.left; - width: parent.height + UM.Theme.sizes.save_button_border.width; - height: parent.height; - cornerSize: UM.Theme.sizes.default_margin.width; - color: UM.Theme.colors.save_button; - } - - UM.AngledCornerRectangle { - anchors.left: parent.left; - width: parent.height + UM.Theme.sizes.save_button_border.width; - height: parent.height; - cornerSize: UM.Theme.sizes.default_margin.width; - - color: UM.Theme.colors.save_button; - } - - UM.AngledCornerRectangle { - id: icon; - - anchors.left: parent.left; - width: parent.height; - height: parent.height; - cornerSize: UM.Theme.sizes.default_margin.width; - color: !control.enabled ? UM.Theme.colors.save_button_inactive : control.hovered ? UM.Theme.colors.save_button_active_hover : UM.Theme.colors.save_button_active; - Behavior on color { ColorAnimation { duration: 50; } } - - Image { - anchors.centerIn: parent; - - width: UM.Theme.sizes.button_icon.width; - height: UM.Theme.sizes.button_icon.height; - - sourceSize.width: width; - sourceSize.height: height; - - source: control.iconSource; - } - } - } - - label: Column { + border.width: UM.Theme.sizes.save_button_border.width + border.color: UM.Theme.colors.save_button_border + color: UM.Theme.colors.save_button_estimated_text_background; Label { id: label; - anchors.left: parent.left; - anchors.leftMargin: control.height + UM.Theme.sizes.save_button_label_margin.width; - - color: UM.Theme.colors.save_button_text; - font: UM.Theme.fonts.default; - - text: control.text; + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: UM.Theme.sizes.save_button_text_margin.width; + visible: base.progress >= 0 && base.progress < 0.99 ? false : true + color: UM.Theme.colors.save_button_estimated_text; + font: UM.Theme.fonts.small; + text: + if(base.progress < 0) { + //: Save button label + return qsTr("Please load a 3D model"); + } else if (base.progress < 0.99) { + //: Save button label + return qsTr("Calculating Print-time"); + } else if (base.progress > 0.99){ + //: Save button label + return qsTr("Estimated Print-time"); + } else if (base.progress == null){ + return qsTr(""); + } } Label { - anchors.left: parent.left; - anchors.leftMargin: control.height + UM.Theme.sizes.save_button_label_margin.width; - - color: UM.Theme.colors.save_button_text; - font: UM.Theme.fonts.default; - - text: (!control.printDuration || !control.printDuration.valid) ? "" : control.printDuration.getDisplayString(UM.DurationFormat.Long) + id: printDurationLabel + anchors.verticalCenter: parent.verticalCenter + anchors.left: label.right; + anchors.leftMargin: UM.Theme.sizes.save_button_text_margin.width; + color: UM.Theme.colors.save_button_printtime_text; + font: UM.Theme.fonts.small; + visible: base.progress < 0.99 ? false : true + text: (!base.printDuration || !base.printDuration.valid) ? "" : base.printDuration.getDisplayString(UM.DurationFormat.Long); } Label { - anchors.left: parent.left; - anchors.leftMargin: control.height + UM.Theme.sizes.save_button_label_margin.width; - - color: UM.Theme.colors.save_button_text; - font: UM.Theme.fonts.default; - + id: printMaterialLabel + anchors.verticalCenter: parent.verticalCenter + anchors.left: printDurationLabel.right; + anchors.leftMargin: UM.Theme.sizes.save_button_text_margin.width; + color: UM.Theme.colors.save_button_printtime_text; + font: UM.Theme.fonts.small; + visible: base.progress < 0.99 ? false : true //: Print material amount save button label - text: control.printMaterialAmount < 0 ? "" : qsTr("%1m material").arg(control.printMaterialAmount); + text: base.printMaterialAmount < 0 ? "" : qsTr("%1m material").arg(base.printMaterialAmount); } } - } + Rectangle { + id: infoBoxOverlay + anchors { + left: infoBox.left; + top: infoBox.top; + bottom: infoBox.bottom; + } + width: Math.max(infoBox.width * base.progress); + color: UM.Theme.colors.save_button_active + visible: base.progress > 0.99 ? false : true + } - MouseArea { - anchors.fill: parent; + Button { + id: saveToButton + anchors.top: infoBox.bottom + anchors.topMargin: UM.Theme.sizes.save_button_text_margin.height; + anchors.left: parent.left + anchors.leftMargin: UM.Theme.sizes.default_margin.width; + tooltip: '' + enabled: progress >= 0.99; - acceptedButtons: Qt.RightButton; - - onClicked: devicesMenu.popup(); - } - - Menu { - id: devicesMenu; - - Instantiator { - model: Printer.outputDeviceNames; - MenuItem { - text: Printer.outputDevices[modelData].description; - checkable: true; - checked: base.defaultAmbiguous ? false : modelData == base.currentDevice; - exclusiveGroup: devicesMenuGroup; - onTriggered: { - base.defaultOverride = true; - base.currentDevice = modelData; - if(base.defaultAmbiguous) { - base.defaultAmbiguous = false; - Printer.writeToOutputDevice(modelData); + width: infoBox.width/6*4.5 + height: UM.Theme.sizes.save_button_save_to_button.height + style: ButtonStyle { + background: Rectangle { + color: !control.enabled ? UM.Theme.colors.save_button_inactive : control.hovered ? UM.Theme.colors.save_button_active_hover : UM.Theme.colors.save_button_active; + Label { + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + color: UM.Theme.colors.save_button_safe_to_text; + font: UM.Theme.fonts.sidebar_save_to; + text: Printer.outputDevices[base.currentDevice].description; } } } - onObjectAdded: devicesMenu.insertItem(index, object) - onObjectRemoved: devicesMenu.removeItem(object) + onClicked: + if(base.defaultAmbiguous) { + devicesMenu.popup(); + } else { + Printer.writeToOutputDevice(base.currentDevice); + } } - ExclusiveGroup { id: devicesMenuGroup; } - } + Button { + id: deviceSelectionMenu; + anchors.top: infoBox.bottom + anchors.topMargin: UM.Theme.sizes.save_button_text_margin.height + anchors.right: parent.right + anchors.rightMargin: UM.Theme.sizes.default_margin.width; + tooltip: '' - text: { - if(base.progress < 0) { - //: Save button label - return qsTr("Please load a 3D model"); - } else if (base.progress < 0.95) { - //: Save button label - return qsTr("Calculating Print-time"); - } else { - //: Save button label - return qsTr("Estimated Print-time"); + width: infoBox.width/6*1.3 - UM.Theme.sizes.save_button_text_margin.height; + height: UM.Theme.sizes.save_button_save_to_button.height + + style: ButtonStyle { + background: Rectangle { + color: UM.Theme.colors.save_button_background; + border.width: control.hovered ? UM.Theme.sizes.save_button_border.width : 0 + border.color: UM.Theme.colors.save_button_border + Rectangle { + id: deviceSelectionIcon + color: UM.Theme.colors.save_button_background; + anchors.left: parent.left + anchors.leftMargin: UM.Theme.sizes.save_button_text_margin.width / 2; + anchors.verticalCenter: parent.verticalCenter; + width: parent.height - UM.Theme.sizes.save_button_text_margin.width ; + height: parent.height - UM.Theme.sizes.save_button_text_margin.width; + UM.RecolorImage { + anchors.centerIn: parent; + width: parent.width; + height: parent.height; + sourceSize.width: width; + sourceSize.height: height; + color: UM.Theme.colors.save_button_active + source: UM.Theme.icons[Printer.outputDevices[base.currentDevice].icon]; + } + } + Label { + id: deviceSelectionArrow + anchors.right: parent.right; + anchors.rightMargin: UM.Theme.sizes.save_button_text_margin.height + anchors.verticalCenter: parent.verticalCenter; + text: "▼"; + font: UM.Theme.fonts.tiny; + color: UM.Theme.colors.save_button_active; + } + } + } + + menu: Menu { + id: devicesMenu; + Instantiator { + model: Printer.outputDeviceNames; + MenuItem { + text: Printer.outputDevices[modelData].description; + checkable: true; + checked: base.defaultAmbiguous ? false : modelData == base.currentDevice; + exclusiveGroup: devicesMenuGroup; + onTriggered: { + base.defaultOverride = true; + base.currentDevice = modelData; + if(base.defaultAmbiguous) { + base.defaultAmbiguous = false; + Printer.writeToOutputDevice(modelData); + } + } + } + onObjectAdded: devicesMenu.insertItem(index, object) + onObjectRemoved: devicesMenu.removeItem(object) + } + ExclusiveGroup { id: devicesMenuGroup; } + } } } - - onClicked: { - if(base.defaultAmbiguous) { - devicesMenu.popup(); - } else { - Printer.writeToOutputDevice(base.currentDevice); - } - } -} +} \ No newline at end of file diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index a40f1fdcb3..23ddfe4ed7 100644 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -8,15 +8,13 @@ import QtQuick.Layouts 1.1 import UM 1.0 as UM -UM.AngledCornerRectangle { +Rectangle { id: base; property Action addMachineAction; property Action configureMachinesAction; property alias saveAction: saveButton.saveAction; - cornerSize: UM.Theme.sizes.default_margin.width; - color: UM.Theme.colors.sidebar; function showTooltip(item, position, text) { @@ -41,7 +39,6 @@ UM.AngledCornerRectangle { ColumnLayout { anchors.fill: parent; anchors.topMargin: UM.Theme.sizes.default_margin.height; - anchors.bottomMargin: UM.Theme.sizes.window_margin.height; spacing: UM.Theme.sizes.default_margin.height; @@ -75,7 +72,7 @@ UM.AngledCornerRectangle { property Item sidebar: base; onLoaded: - { + { if(item) { item.configureSettings = base.configureMachinesAction; @@ -93,13 +90,11 @@ UM.AngledCornerRectangle { SaveButton { id: saveButton; - Layout.preferredWidth: base.width - UM.Theme.sizes.default_margin.width * 2; - Layout.preferredHeight: UM.Theme.sizes.button.height; - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter; + implicitWidth: base.width + implicitHeight: UM.Theme.sizes.save_button_text_margin.height * 2 + UM.Theme.sizes.save_button_slicing_bar.height + UM.Theme.sizes.save_button_save_to_button.height + UM.Theme.sizes.default_margin.height } - } - + SidebarTooltip { id: tooltip; } diff --git a/resources/themes/cura/theme.json b/resources/themes/cura/theme.json index 1e34028046..88a236d7ce 100644 --- a/resources/themes/cura/theme.json +++ b/resources/themes/cura/theme.json @@ -27,6 +27,10 @@ "capitalize": true, "family": "Roboto" }, + "sidebar_save_to": { + "size": 1.0, + "family": "Roboto" + }, "timeslider_time": { "size": 1.0, "bold": true, @@ -105,12 +109,15 @@ "tooltip": [255, 225, 146, 255], - "save_button": [255, 255, 255, 255], "save_button_border": [205, 202, 201, 255], "save_button_inactive": [205, 202, 201, 255], "save_button_active": [12, 159, 227, 255], "save_button_active_hover": [34, 150, 190, 255], - "save_button_text": [35, 35, 35, 255], + "save_button_safe_to_text": [255, 255, 255, 255], + "save_button_estimated_text": [140, 144, 154, 255], + "save_button_estimated_text_background": [255, 255, 255, 255], + "save_button_printtime_text": [12, 169, 227, 255], + "save_button_background": [249, 249, 249, 255], "message": [205, 202, 201, 255], "message_text": [35, 35, 35, 255], @@ -153,7 +160,10 @@ "tooltip_margins": [1.0, 1.0], "save_button_border": [0.06, 0.06], + "save_button_text_margin": [0.6, 0.6], + "save_button_slicing_bar": [0.0, 2.2], "save_button_label_margin": [0.5, 0.5], + "save_button_save_to_button": [0.3, 2.7], "message": [30.0, 5.0], "message_close": [1.25, 1.25]