Restyling of the save to toolpath button

Fixes #54
This commit is contained in:
Tamara Hogenhout 2015-06-24 13:44:36 +02:00
parent 2c139c4037
commit 27de74848d
3 changed files with 176 additions and 154 deletions

View file

@ -8,7 +8,7 @@ import QtQuick.Layouts 1.1
import UM 1.0 as UM import UM 1.0 as UM
Button { Rectangle {
id: base; id: base;
property Action saveAction; property Action saveAction;
@ -16,8 +16,6 @@ Button {
property real progress: UM.Backend.progress; property real progress: UM.Backend.progress;
Behavior on progress { NumberAnimation { duration: 250; } } Behavior on progress { NumberAnimation { duration: 250; } }
enabled: progress >= 0.95;
property string currentDevice: "local_file" property string currentDevice: "local_file"
property bool defaultOverride: false; property bool defaultOverride: false;
property bool defaultAmbiguous: false; property bool defaultAmbiguous: false;
@ -25,9 +23,6 @@ Button {
property variant printDuration: PrintInformation.currentPrintTime; property variant printDuration: PrintInformation.currentPrintTime;
property real printMaterialAmount: PrintInformation.materialAmount; property real printMaterialAmount: PrintInformation.materialAmount;
iconSource: UM.Theme.icons[Printer.outputDevices[base.currentDevice].icon];
tooltip: Printer.outputDevices[base.currentDevice].description;
Connections { Connections {
target: Printer; target: Printer;
onOutputDevicesChanged: { onOutputDevicesChanged: {
@ -51,161 +46,183 @@ Button {
} }
} }
style: ButtonStyle { Rectangle{
background: UM.AngledCornerRectangle { id: background
implicitWidth: control.width; implicitWidth: base.width;
implicitHeight: control.height; 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; Rectangle {
cornerSize: UM.Theme.sizes.default_margin.width; id: infoBox
width: parent.width - UM.Theme.sizes.default_margin.width * 2;
height: UM.Theme.sizes.save_button_slicing_bar.height
UM.AngledCornerRectangle { anchors.top: parent.top
anchors.fill: parent; anchors.topMargin: UM.Theme.sizes.default_margin.height;
anchors.margins: UM.Theme.sizes.save_button_border.width; anchors.left: parent.left
cornerSize: UM.Theme.sizes.default_margin.width; anchors.leftMargin: UM.Theme.sizes.default_margin.width;
color: UM.Theme.colors.save_button;
}
UM.AngledCornerRectangle { border.width: UM.Theme.sizes.save_button_border.width
anchors { border.color: UM.Theme.colors.save_button_border
left: parent.left; color: UM.Theme.colors.save_button_estimated_text_background;
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 {
Label { Label {
id: label; id: label;
anchors.left: parent.left; anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: control.height + UM.Theme.sizes.save_button_label_margin.width; anchors.left: parent.left
anchors.leftMargin: UM.Theme.sizes.save_button_text_margin.width;
color: UM.Theme.colors.save_button_text; visible: base.progress >= 0 && base.progress < 0.99 ? false : true
font: UM.Theme.fonts.default; color: UM.Theme.colors.save_button_estimated_text;
font: UM.Theme.fonts.small;
text: control.text; 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 { Label {
anchors.left: parent.left; id: printDurationLabel
anchors.leftMargin: control.height + UM.Theme.sizes.save_button_label_margin.width; anchors.verticalCenter: parent.verticalCenter
anchors.left: label.right;
color: UM.Theme.colors.save_button_text; anchors.leftMargin: UM.Theme.sizes.save_button_text_margin.width;
font: UM.Theme.fonts.default; color: UM.Theme.colors.save_button_printtime_text;
font: UM.Theme.fonts.small;
text: (!control.printDuration || !control.printDuration.valid) ? "" : control.printDuration.getDisplayString(UM.DurationFormat.Long) visible: base.progress < 0.99 ? false : true
text: (!base.printDuration || !base.printDuration.valid) ? "" : base.printDuration.getDisplayString(UM.DurationFormat.Long);
} }
Label { Label {
anchors.left: parent.left; id: printMaterialLabel
anchors.leftMargin: control.height + UM.Theme.sizes.save_button_label_margin.width; anchors.verticalCenter: parent.verticalCenter
anchors.left: printDurationLabel.right;
color: UM.Theme.colors.save_button_text; anchors.leftMargin: UM.Theme.sizes.save_button_text_margin.width;
font: UM.Theme.fonts.default; 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 //: 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 { Button {
anchors.fill: parent; 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; width: infoBox.width/6*4.5
height: UM.Theme.sizes.save_button_save_to_button.height
onClicked: devicesMenu.popup(); 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;
Menu { Label {
id: devicesMenu; anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
Instantiator { color: UM.Theme.colors.save_button_safe_to_text;
model: Printer.outputDeviceNames; font: UM.Theme.fonts.sidebar_save_to;
MenuItem { text: Printer.outputDevices[base.currentDevice].description;
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) onClicked:
onObjectRemoved: devicesMenu.removeItem(object) 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: { width: infoBox.width/6*1.3 - UM.Theme.sizes.save_button_text_margin.height;
if(base.progress < 0) { height: UM.Theme.sizes.save_button_save_to_button.height
//: Save button label
return qsTr("Please load a 3D model"); style: ButtonStyle {
} else if (base.progress < 0.95) { background: Rectangle {
//: Save button label color: UM.Theme.colors.save_button_background;
return qsTr("Calculating Print-time"); border.width: control.hovered ? UM.Theme.sizes.save_button_border.width : 0
} else { border.color: UM.Theme.colors.save_button_border
//: Save button label Rectangle {
return qsTr("Estimated Print-time"); 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);
}
}
}

View file

@ -8,15 +8,13 @@ import QtQuick.Layouts 1.1
import UM 1.0 as UM import UM 1.0 as UM
UM.AngledCornerRectangle { Rectangle {
id: base; id: base;
property Action addMachineAction; property Action addMachineAction;
property Action configureMachinesAction; property Action configureMachinesAction;
property alias saveAction: saveButton.saveAction; property alias saveAction: saveButton.saveAction;
cornerSize: UM.Theme.sizes.default_margin.width;
color: UM.Theme.colors.sidebar; color: UM.Theme.colors.sidebar;
function showTooltip(item, position, text) { function showTooltip(item, position, text) {
@ -41,7 +39,6 @@ UM.AngledCornerRectangle {
ColumnLayout { ColumnLayout {
anchors.fill: parent; anchors.fill: parent;
anchors.topMargin: UM.Theme.sizes.default_margin.height; anchors.topMargin: UM.Theme.sizes.default_margin.height;
anchors.bottomMargin: UM.Theme.sizes.window_margin.height;
spacing: UM.Theme.sizes.default_margin.height; spacing: UM.Theme.sizes.default_margin.height;
@ -75,7 +72,7 @@ UM.AngledCornerRectangle {
property Item sidebar: base; property Item sidebar: base;
onLoaded: onLoaded:
{ {
if(item) if(item)
{ {
item.configureSettings = base.configureMachinesAction; item.configureSettings = base.configureMachinesAction;
@ -93,13 +90,11 @@ UM.AngledCornerRectangle {
SaveButton { SaveButton {
id: saveButton; id: saveButton;
Layout.preferredWidth: base.width - UM.Theme.sizes.default_margin.width * 2; implicitWidth: base.width
Layout.preferredHeight: UM.Theme.sizes.button.height; 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
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter;
} }
} }
SidebarTooltip { SidebarTooltip {
id: tooltip; id: tooltip;
} }

View file

@ -27,6 +27,10 @@
"capitalize": true, "capitalize": true,
"family": "Roboto" "family": "Roboto"
}, },
"sidebar_save_to": {
"size": 1.0,
"family": "Roboto"
},
"timeslider_time": { "timeslider_time": {
"size": 1.0, "size": 1.0,
"bold": true, "bold": true,
@ -105,12 +109,15 @@
"tooltip": [255, 225, 146, 255], "tooltip": [255, 225, 146, 255],
"save_button": [255, 255, 255, 255],
"save_button_border": [205, 202, 201, 255], "save_button_border": [205, 202, 201, 255],
"save_button_inactive": [205, 202, 201, 255], "save_button_inactive": [205, 202, 201, 255],
"save_button_active": [12, 159, 227, 255], "save_button_active": [12, 159, 227, 255],
"save_button_active_hover": [34, 150, 190, 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": [205, 202, 201, 255],
"message_text": [35, 35, 35, 255], "message_text": [35, 35, 35, 255],
@ -153,7 +160,10 @@
"tooltip_margins": [1.0, 1.0], "tooltip_margins": [1.0, 1.0],
"save_button_border": [0.06, 0.06], "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_label_margin": [0.5, 0.5],
"save_button_save_to_button": [0.3, 2.7],
"message": [30.0, 5.0], "message": [30.0, 5.0],
"message_close": [1.25, 1.25] "message_close": [1.25, 1.25]