15.10 restyling of the savebutton Area

More elaborate shortdescription for especially the outputdevices still have to be implemented. And the filename textfield is not finished.

Contributes to: issue CURA-60
This commit is contained in:
Tamara Hogenhout 2015-08-27 14:29:44 +02:00
parent f17cc811c4
commit 55f51a53b6
4 changed files with 150 additions and 129 deletions

View file

@ -305,7 +305,7 @@ UM.MainWindow {
anchors { anchors {
horizontalCenter: parent.horizontalCenter horizontalCenter: parent.horizontalCenter
horizontalCenterOffset: -(UM.Theme.sizes.panel.width / 2) horizontalCenterOffset: -(UM.Theme.sizes.sidebar.width / 2)
top: parent.top; top: parent.top;
} }
} }
@ -319,7 +319,7 @@ UM.MainWindow {
right: parent.right; right: parent.right;
} }
width: UM.Theme.sizes.panel.width; width: UM.Theme.sizes.sidebar.width;
addMachineAction: actions.addMachine; addMachineAction: actions.addMachine;
configureMachinesAction: actions.configureMachines; configureMachinesAction: actions.configureMachines;

View file

@ -14,115 +14,149 @@ Rectangle {
property real progress: UM.Backend.progress; property real progress: UM.Backend.progress;
property bool activity: Printer.getPlatformActivity; property bool activity: Printer.getPlatformActivity;
Behavior on progress { NumberAnimation { duration: 250; } } Behavior on progress { NumberAnimation { duration: 250; } }
property int totalHeight: childrenRect.height
property variant printDuration: PrintInformation.currentPrintTime; property variant printDuration: PrintInformation.currentPrintTime;
property real printMaterialAmount: PrintInformation.materialAmount; property real printMaterialAmount: PrintInformation.materialAmount;
Rectangle{ Rectangle{
id: background id: printJobRow
implicitWidth: base.width; implicitWidth: base.width;
implicitHeight: parent.height; implicitHeight: UM.Theme.sizes.sidebar_header.height
color: UM.Theme.colors.save_button_background; anchors.top: parent.top
border.width: UM.Theme.sizes.save_button_border.width color: UM.Theme.colors.sidebar_header_bar
border.color: UM.Theme.colors.save_button_border Label{
id: printJobTextfieldLabel
Rectangle { //: insert filename textfield label
id: infoBox text: qsTr("Printjob name");
width: parent.width - UM.Theme.sizes.default_margin.width * 2;
height: UM.Theme.sizes.save_button_slicing_bar.height
anchors.top: parent.top
anchors.topMargin: UM.Theme.sizes.default_margin.height;
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: UM.Theme.sizes.default_margin.width; anchors.leftMargin: UM.Theme.sizes.default_margin.width;
anchors.verticalCenter: parent.verticalCenter
border.width: UM.Theme.sizes.save_button_border.width font: UM.Theme.fonts.default;
border.color: UM.Theme.colors.save_button_border color: UM.Theme.colors.text_white
color: UM.Theme.colors.save_button_estimated_text_background; }
Label { TextField {
id: label; id: printJobTextfield
anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right
anchors.left: parent.left anchors.rightMargin: UM.Theme.sizes.default_margin.width;
anchors.leftMargin: UM.Theme.sizes.save_button_text_margin.width; anchors.verticalCenter: parent.verticalCenter
visible: base.progress >= 0 && base.progress < 0.99 ? false : true width: parent.width/100*55
color: UM.Theme.colors.save_button_estimated_text; height: UM.Theme.sizes.sidebar_inputFields.height
font: UM.Theme.fonts.small; property int unremovableSpacing: 5
text: { text: "UM2" + "_" + "filename" ///TODO KOMT NOG
if(base.activity == false) { onEditingFinished: {
//: Save button label if (printJobTextfield.text != ''){
return qsTr("Please load a 3D model"); printJobTextfield.focus = false
} else if (base.progress < 0.99) {
//: Save button label
return qsTr("Calculating Print-time");
} else if (base.printDuration.days > 0 || base.progress == null){
return qsTr("");
}
else if (base.progress > 0.99){
//: Save button label
return qsTr("Estimated Print-time");
}
return "";
} }
} }
Label { validator: RegExpValidator {
id: printDurationLabel regExp: /^[0-9a-zA-Z\_\-]*$/
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.activity == false || base.progress < 0.99 ? false : true
text: (!base.printDuration || !base.printDuration.valid) ? "" : base.printDuration.getDisplayString(UM.DurationFormat.Long);
} }
Label { style: TextFieldStyle{
id: printMaterialLabel textColor: UM.Theme.colors.setting_control_text;
anchors.verticalCenter: parent.verticalCenter font: UM.Theme.fonts.default;
anchors.left: printDurationLabel.right; background: Rectangle {
anchors.leftMargin: UM.Theme.sizes.save_button_text_margin.width; radius: 0
color: base.printDuration.days > 0 ? UM.Theme.colors.save_button_estimated_text : UM.Theme.colors.save_button_printtime_text; implicitWidth: parent.width
font: UM.Theme.fonts.small; implicitHeight: parent.height
property bool mediumLengthDuration: base.printDuration.hours > 9 && base.printMaterialAmount > 9.99 && base.printDuration.days == 0 border.width: 1;
width: mediumLengthDuration ? 50 : undefined border.color: UM.Theme.colors.slider_groove_border;
elide: mediumLengthDuration ? Text.ElideRight : Text.ElideNone }
visible: base.activity == false || base.progress < 0.99 ? false : true
//: Print material amount save button label
text: base.printMaterialAmount < 0 ? "" : qsTr("%1m of Material").arg(base.printMaterialAmount);
} }
} }
Rectangle { }
id: infoBoxOverlay
anchors { Rectangle {
left: infoBox.left; id: specsRow
top: infoBox.top; implicitWidth: base.width
bottom: infoBox.bottom; implicitHeight: UM.Theme.sizes.sidebar_specs_bar.height
anchors.top: printJobRow.bottom
Item{
id: time
width: (parent.width / 100 * 45) - UM.Theme.sizes.default_margin.width * 2
height: parent.height
anchors.left: parent.left
anchors.leftMargin: UM.Theme.sizes.default_margin.width
anchors.top: parent.top
visible: base.printMaterialAmount > 0 ? true : false
UM.RecolorImage {
id: timeIcon
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
width: UM.Theme.sizes.save_button_specs_icons.width
height: UM.Theme.sizes.save_button_specs_icons.height
sourceSize.width: width
sourceSize.height: width
color: UM.Theme.colors.text_hover
source: UM.Theme.icons.print_time;
}
Label{
id: timeSpec
anchors.verticalCenter: parent.verticalCenter
anchors.left: timeIcon.right
anchors.leftMargin: UM.Theme.sizes.default_margin.width/2
font: UM.Theme.fonts.default
color: UM.Theme.colors.text
text: (!base.printDuration || !base.printDuration.valid) ? "" : qsTr("%1 h:m").arg(base.printDuration.getDisplayString(UM.DurationFormat.Short))
} }
width: Math.max(infoBox.width * base.progress);
color: UM.Theme.colors.save_button_active
visible: progress > 0.99 ? false : true
} }
Item{
width: parent.width / 100 * 55
height: parent.height
anchors.left: time.right
anchors.top: parent.top
visible: base.printMaterialAmount > 0 ? true : false
UM.RecolorImage {
id: lengthIcon
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
width: UM.Theme.sizes.save_button_specs_icons.width
height: UM.Theme.sizes.save_button_specs_icons.height
sourceSize.width: width
sourceSize.height: width
color: UM.Theme.colors.text_hover
source: UM.Theme.icons.category_material;
}
Label{
id: lengthSpec
anchors.verticalCenter: parent.verticalCenter
anchors.left: lengthIcon.right
anchors.leftMargin: UM.Theme.sizes.default_margin.width/2
font: UM.Theme.fonts.default
color: UM.Theme.colors.text
text: base.printMaterialAmount <= 0 ? "" : qsTr("%1 m").arg(base.printMaterialAmount)
}
}
}
Item{
id: saveRow
implicitWidth: base.width / 100 * 55
implicitHeight: saveToButton.height + (UM.Theme.sizes.default_margin.height / 2) // height + bottomMargin
anchors.top: specsRow.bottom
anchors.right: parent.right
anchors.rightMargin: UM.Theme.sizes.default_margin.width
Button { Button {
id: saveToButton id: saveToButton
anchors.top: infoBox.bottom
anchors.topMargin: UM.Theme.sizes.save_button_text_margin.height;
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: UM.Theme.sizes.default_margin.width;
tooltip: UM.OutputDeviceManager.activeDeviceDescription; tooltip: UM.OutputDeviceManager.activeDeviceDescription;
enabled: progress > 0.99 && base.activity == true enabled: progress > 0.99 && base.activity == true
width: infoBox.width/6*4.5 width: parent.width - UM.Theme.sizes.save_button_save_to_button.height - 2
height: UM.Theme.sizes.save_button_save_to_button.height height: UM.Theme.sizes.save_button_save_to_button.height
text: UM.OutputDeviceManager.activeDeviceShortDescription; text: UM.OutputDeviceManager.activeDeviceShortDescription;
style: ButtonStyle { style: ButtonStyle {
background: Rectangle { 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; color: control.hovered ? UM.Theme.colors.load_save_button_hover : UM.Theme.colors.load_save_button
Behavior on color { ColorAnimation { duration: 50; } }
Label { Label {
anchors.centerIn: parent anchors.centerIn: parent
color: UM.Theme.colors.save_button_safe_to_text; color: UM.Theme.colors.load_save_button_text
font: UM.Theme.fonts.sidebar_save_to; font: UM.Theme.fonts.default
text: control.text; text: control.text;
} }
} }
@ -133,52 +167,35 @@ Rectangle {
Button { Button {
id: deviceSelectionMenu; 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: qsTr("Select the active output device"); tooltip: qsTr("Select the active output device");
anchors.right: parent.right
width: infoBox.width/6*1.3 - UM.Theme.sizes.save_button_text_margin.height; width: UM.Theme.sizes.save_button_save_to_button.height
height: UM.Theme.sizes.save_button_save_to_button.height height: UM.Theme.sizes.save_button_save_to_button.height
//iconSource: UM.Theme.icons[UM.OutputDeviceManager.activeDeviceIconName];
iconSource: UM.Theme.icons[UM.OutputDeviceManager.activeDeviceIconName];
style: ButtonStyle { style: ButtonStyle {
background: Rectangle { background: Rectangle {
color: UM.Theme.colors.save_button_background; id: deviceSelectionIcon
border.width: control.hovered ? UM.Theme.sizes.save_button_border.width : 0 color: control.hovered ? UM.Theme.colors.load_save_button_hover : UM.Theme.colors.load_save_button
border.color: UM.Theme.colors.save_button_border Behavior on color { ColorAnimation { duration: 50; } }
anchors.left: parent.left
anchors.leftMargin: UM.Theme.sizes.save_button_text_margin.width / 2;
width: parent.height
height: parent.height
Rectangle { UM.RecolorImage {
id: deviceSelectionIcon id: lengthIcon
color: UM.Theme.colors.save_button_background; anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left anchors.horizontalCenter: parent.horizontalCenter
anchors.leftMargin: UM.Theme.sizes.save_button_text_margin.width / 2; width: UM.Theme.sizes.standard_arrow.width
anchors.verticalCenter: parent.verticalCenter; height: UM.Theme.sizes.standard_arrow.height
width: parent.height - UM.Theme.sizes.save_button_text_margin.width ; sourceSize.width: width
height: parent.height - UM.Theme.sizes.save_button_text_margin.width; sourceSize.height: width
color: UM.Theme.colors.load_save_button_text
UM.RecolorImage { source: UM.Theme.icons.arrow_bottom
anchors.fill: parent;
sourceSize.width: width;
sourceSize.height: height;
color: UM.Theme.colors.save_button_active
source: control.iconSource;
}
}
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;
} }
} }
label: Item { } label: Label{ }
} }
menu: Menu { menu: Menu {
@ -200,9 +217,6 @@ Rectangle {
ExclusiveGroup { id: devicesMenuGroup; } ExclusiveGroup { id: devicesMenuGroup; }
} }
} }
UM.OutputDevicesModel { id: devicesModel; }
} }
}
UM.OutputDevicesModel {
id: devicesModel;
}
}

View file

@ -90,7 +90,7 @@ Rectangle {
SaveButton { SaveButton {
id: saveButton; id: saveButton;
implicitWidth: base.width 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 implicitHeight: totalHeight
} }
} }

View file

@ -32,10 +32,6 @@
"capitalize": true, "capitalize": true,
"family": "ProximaNova" "family": "ProximaNova"
}, },
"sidebar_save_to": {
"size": 1.0,
"family": "ProximaNova"
},
"timeslider_time": { "timeslider_time": {
"size": 1.0, "size": 1.0,
"bold": true, "bold": true,
@ -64,9 +60,12 @@
"text": [140, 144, 154, 255], "text": [140, 144, 154, 255],
"text_inactive": [174, 174, 174, 255], "text_inactive": [174, 174, 174, 255],
"text_white": [255, 255, 255, 255],
"text_hover": [35, 35, 35, 255], "text_hover": [35, 35, 35, 255],
"text_pressed": [12, 169, 227, 255], "text_pressed": [12, 169, 227, 255],
"sidebar_header_bar": [12, 169, 227, 255],
"button": [139, 143, 153, 255], "button": [139, 143, 153, 255],
"button_hover": [77, 184, 226, 255], "button_hover": [77, 184, 226, 255],
"button_active": [32, 166, 219, 255], "button_active": [32, 166, 219, 255],
@ -142,14 +141,20 @@
"window_margin": [2.0, 2.0], "window_margin": [2.0, 2.0],
"default_margin": [1.0, 1.0], "default_margin": [1.0, 1.0],
"default_lining": [0.1, 0.1], "default_lining": [0.1, 0.1],
"panel": [22.0, 10.0],
"logo": [9.5, 2.0], "logo": [9.5, 2.0],
"toolbar_button": [2.0, 2.0], "toolbar_button": [2.0, 2.0],
"toolbar_spacing": [1.0, 1.0], "toolbar_spacing": [1.0, 1.0],
"loadfile_button": [11.0, 2.4], "loadfile_button": [11.0, 2.4],
"loadfile_margin": [0.8, 0.4], "loadfile_margin": [0.8, 0.4],
"sidebar": [24.0, 10.0],
"sidebar_header": [0.0, 3.2],
"sidebar_subParts": [0.0, 2.4],
"sidebar_specs_bar": [0.0, 2.2],
"sidebar_inputFields": [0.0, 1.9],
"section": [22.0, 3.0], "section": [22.0, 3.0],
"section_icon": [2.14, 2.14], "section_icon": [2.14, 2.14],
"section_text_margin": [0.33, 0.33], "section_text_margin": [0.33, 0.33],
@ -162,6 +167,7 @@
"standard_list_lineheight": [1.5, 1.5], "standard_list_lineheight": [1.5, 1.5],
"standard_list_input": [20.0, 25.0], "standard_list_input": [20.0, 25.0],
"standard_arrow": [0.6, 0.6],
"button": [3.2, 3.2], "button": [3.2, 3.2],
"button_icon": [2.5, 2.5], "button_icon": [2.5, 2.5],
@ -189,6 +195,7 @@
"save_button_slicing_bar": [0.0, 2.2], "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], "save_button_save_to_button": [0.3, 2.7],
"save_button_specs_icons": [1.4, 1.4],
"modal_window_minimum": [30.0, 30.0], "modal_window_minimum": [30.0, 30.0],
"wizard_progress": [10.0, 0.0], "wizard_progress": [10.0, 0.0],