Update OutputGCodeButton with improved styling and different states for different output targets

This commit is contained in:
Arjen Hiemstra 2015-02-11 15:10:46 +01:00
parent a8454a48d1
commit 01bfe8410b

View file

@ -5,42 +5,93 @@ import QtQuick.Layouts 1.1
import UM 1.0 as UM import UM 1.0 as UM
Button { Rectangle {
id: saveButton; id: base;
text: "Save";
signal saveRequested();
iconSource: UM.Resources.getIcon('save.png');
onClicked: saveDialog.open();
style: ButtonStyle {
background: Rectangle {
color: UM.Theme.primaryColor; color: UM.Theme.primaryColor;
border.width: 1; border.width: 1;
border.color: UM.Theme.borderColor; border.color: UM.Theme.borderColor;
}
label: Item { signal saveRequested();
Label { Label {
id: label;
anchors.verticalCenter: parent.verticalCenter; anchors.verticalCenter: parent.verticalCenter;
anchors.left: parent.left; anchors.left: parent.left;
anchors.right: icon.left; anchors.right: icon.left;
text: control.text;
horizontalAlignment: Text.AlignHCenter; horizontalAlignment: Text.AlignHCenter;
font.pointSize: UM.Theme.largeTextSize; font.pointSize: UM.Theme.largeTextSize;
color: "white";
text: "Save";
} }
Rectangle { Rectangle {
id: icon; id: icon;
anchors.right: parent.right; anchors.right: parent.right;
anchors.verticalCenter: parent.verticalCenter; anchors.top: parent.top;
anchors.bottom: parent.bottom;
anchors.margins: 1;
width: control.height; color: "white";
height: control.height;
UM.RecolorImage { anchors.centerIn: parent; source: control.iconSource; color: "#f00"; } width: height;
Rectangle {
anchors { left: parent.left; top: parent.top; bottom: parent.bottom; }
width: 1;
color: UM.Theme.borderColor;
}
UM.RecolorImage { id: iconImage; anchors.centerIn: parent; width: 32; height: 32; source: UM.Resources.getIcon('save.png'); color: '#000'; }
}
MouseArea {
anchors.fill: parent;
onClicked: {
switch(base.state) {
case 'sdcard':
base.state = 'usb';
break;
case 'usb':
base.state = '';
break;
default:
base.saveRequested();
break;
} }
} }
} }
states: [
State {
name: 'sdcard';
PropertyChanges { target: label; text: 'Write to SD'; }
PropertyChanges { target: iconImage; source: UM.Resources.getIcon('sdcard.png'); }
},
State {
name: 'usb';
PropertyChanges { target: label; text: 'Send over USB'; }
PropertyChanges { target: iconImage; source: UM.Resources.getIcon('usb.png'); }
}
]
transitions: [
Transition {
SequentialAnimation {
ParallelAnimation {
NumberAnimation { target: label; property: 'opacity'; to: 0; duration: 250; }
NumberAnimation { target: iconImage; property: 'opacity'; to: 0; duration: 250; }
}
PropertyAction { target: label; property: 'text'; }
PropertyAction { target: iconImage; property: 'source'; }
ParallelAnimation {
NumberAnimation { target: label; property: 'opacity'; to: 1; duration: 250; }
NumberAnimation { target: iconImage; property: 'opacity'; to: 1; duration: 250; }
}
}
}
]
} }