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"; color: UM.Theme.primaryColor;
border.width: 1;
border.color: UM.Theme.borderColor;
signal saveRequested(); signal saveRequested();
iconSource: UM.Resources.getIcon('save.png');
onClicked: saveDialog.open(); Label {
id: label;
anchors.verticalCenter: parent.verticalCenter;
anchors.left: parent.left;
anchors.right: icon.left;
horizontalAlignment: Text.AlignHCenter;
font.pointSize: UM.Theme.largeTextSize;
color: "white";
style: ButtonStyle { text: "Save";
background: Rectangle { }
color: UM.Theme.primaryColor;
border.width: 1; Rectangle {
border.color: UM.Theme.borderColor; id: icon;
anchors.right: parent.right;
anchors.top: parent.top;
anchors.bottom: parent.bottom;
anchors.margins: 1;
color: "white";
width: height;
Rectangle {
anchors { left: parent.left; top: parent.top; bottom: parent.bottom; }
width: 1;
color: UM.Theme.borderColor;
} }
label: Item {
Label {
anchors.verticalCenter: parent.verticalCenter;
anchors.left: parent.left;
anchors.right: icon.left;
text: control.text;
horizontalAlignment: Text.AlignHCenter;
font.pointSize: UM.Theme.largeTextSize;
}
Rectangle { UM.RecolorImage { id: iconImage; anchors.centerIn: parent; width: 32; height: 32; source: UM.Resources.getIcon('save.png'); color: '#000'; }
id: icon; }
anchors.right: parent.right; MouseArea {
anchors.verticalCenter: parent.verticalCenter; anchors.fill: parent;
width: control.height; onClicked: {
height: control.height; switch(base.state) {
UM.RecolorImage { anchors.centerIn: parent; source: control.iconSource; color: "#f00"; } 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; }
}
}
}
]
} }