Update tool button styling for improved clarity

Fixes #35
This commit is contained in:
Arjen Hiemstra 2015-06-10 15:36:15 +02:00
parent 9d50b1fb26
commit fa671225c8
2 changed files with 33 additions and 26 deletions

View file

@ -86,45 +86,52 @@ QtObject {
property Component tool_button: Component {
ButtonStyle {
background: UM.AngledCornerRectangle {
property bool down: control.pressed || (control.checkable && control.checked);
background: Item {
implicitWidth: UM.Theme.sizes.button.width;
implicitHeight: UM.Theme.sizes.button.height;
color: {
if(!control.enabled) {
return UM.Theme.colors.button_disabled;
} else if(control.checkable && control.checked && control.hovered) {
return UM.Theme.colors.button_active_hover;
} else if(control.pressed || (control.checkable && control.checked)) {
return UM.Theme.colors.button_active;
} else if(control.hovered) {
return UM.Theme.colors.button_hover;
} else {
return UM.Theme.colors.button;
}
}
Behavior on color { ColorAnimation { duration: 50; } }
cornerSize: UM.Theme.sizes.default_margin.width;
Rectangle {
anchors.bottom: parent.top;
anchors.bottom: parent.verticalCenter;
width: parent.width;
height: control.hovered ? label.height : 0;
Behavior on height { NumberAnimation { duration: 75; } }
height: control.hovered ? parent.height / 2 + label.height : 0;
Behavior on height { NumberAnimation { duration: 100; } }
opacity: control.hovered ? 1.0 : 0.0;
Behavior on opacity { NumberAnimation { duration: 75; } }
Behavior on opacity { NumberAnimation { duration: 100; } }
Label {
id: label
anchors.horizontalCenter: parent.horizontalCenter;
text: control.text;
text: control.text.replace("&", "");
font: UM.Theme.fonts.button_tooltip;
color: UM.Theme.colors.button_tooltip_text;
}
}
UM.AngledCornerRectangle {
id: buttonFace;
anchors.fill: parent;
property bool down: control.pressed || (control.checkable && control.checked);
color: {
if(!control.enabled) {
return UM.Theme.colors.button_disabled;
} else if(control.checkable && control.checked && control.hovered) {
return UM.Theme.colors.button_active_hover;
} else if(control.pressed || (control.checkable && control.checked)) {
return UM.Theme.colors.button_active;
} else if(control.hovered) {
return UM.Theme.colors.button_hover;
} else {
return UM.Theme.colors.button;
}
}
Behavior on color { ColorAnimation { duration: 50; } }
cornerSize: UM.Theme.sizes.default_margin.width;
}
}
label: Item {

View file

@ -57,10 +57,10 @@
"text_hover": [35, 35, 35, 255],
"text_pressed": [12, 169, 227, 255],
"button": [205, 202, 201, 255],
"button_hover": [174, 174, 174, 255],
"button": [160, 163, 171, 255],
"button_hover": [140, 144, 154, 255],
"button_active": [12, 169, 227, 255],
"button_active_hover": [34, 150, 190, 255],
"button_active_hover": [34, 150, 199, 255],
"button_text": [255, 255, 255, 255],
"button_disabled": [245, 245, 245, 255],
"button_tooltip_text": [35, 35, 35, 255],