15.10 restyling of the layerview slider

Adds a textfield to the handle for per layer selection and removes the display of the min- and maxvalue

Contributes to: issue CURA-60
This commit is contained in:
Tamara Hogenhout 2015-08-25 12:20:13 +02:00
parent 96c63ef6e9
commit 534c277b00
4 changed files with 44 additions and 51 deletions

View file

@ -19,7 +19,7 @@ Item
width: 10 width: 10
height: 250 height: 250
anchors.right : parent.right anchors.right : parent.right
anchors.rightMargin: UM.Theme.sizes.slider_layerview_margin.width anchors.rightMargin: UM.Theme.sizes.slider_layerview_margin.width/2
orientation: Qt.Vertical orientation: Qt.Vertical
minimumValue: 0; minimumValue: 0;
maximumValue: UM.LayerView.numLayers; maximumValue: UM.LayerView.numLayers;
@ -38,14 +38,16 @@ Item
height: UM.Theme.sizes.slider_layerview_background_extension.height height: UM.Theme.sizes.slider_layerview_background_extension.height
color: UM.Theme.colors.slider_text_background color: UM.Theme.colors.slider_text_background
} }
UM.AngledCornerRectangle { Rectangle {
anchors.right : parent.right anchors.right : parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
z: slider.z - 1 z: slider.z - 1
cornerSize: UM.Theme.sizes.default_margin.width;
width: UM.Theme.sizes.slider_layerview_background.width width: UM.Theme.sizes.slider_layerview_background.width
height: slider.height + UM.Theme.sizes.default_margin.height * 2 height: slider.height + UM.Theme.sizes.default_margin.height * 2
color: UM.Theme.colors.slider_text_background color: UM.Theme.colors.tool_panel_background;
border.width: UM.Theme.sizes.default_lining.width
border.color: UM.Theme.colors.lining
MouseArea { MouseArea {
id: sliderMouseArea id: sliderMouseArea
property double manualStepSize: slider.maximumValue / 11 property double manualStepSize: slider.maximumValue / 11

View file

@ -51,7 +51,7 @@ Item {
z: parent.z - 1 z: parent.z - 1
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
color: UM.Theme.colors.button_lining color: UM.Theme.colors.lining
} }
Rectangle { Rectangle {
@ -68,7 +68,7 @@ Item {
color: UM.Theme.colors.tool_panel_background; color: UM.Theme.colors.tool_panel_background;
border.width: UM.Theme.sizes.default_lining.width border.width: UM.Theme.sizes.default_lining.width
border.color: UM.Theme.colors.button_lining border.color: UM.Theme.colors.lining
Loader { Loader {
id: panel id: panel

View file

@ -67,10 +67,10 @@ QtObject {
Rectangle { Rectangle {
id: tool_button_background id: tool_button_background
anchors.top: parent.verticalCenter; anchors.top: parent.bottom
width: parent.width; width: label.width > parent.width ? label.width : parent.width
height: control.hovered ? parent.height / 2 + label.height : 0; height: control.hovered ? label.height : 0;
Behavior on height { NumberAnimation { duration: 100; } } Behavior on height { NumberAnimation { duration: 100; } }
opacity: control.hovered ? 1.0 : 0.0; opacity: control.hovered ? 1.0 : 0.0;
@ -416,26 +416,6 @@ QtObject {
color: UM.Theme.colors.slider_groove_fill; color: UM.Theme.colors.slider_groove_fill;
width: (control.value / (control.maximumValue - control.minimumValue)) * parent.width; width: (control.value / (control.maximumValue - control.minimumValue)) * parent.width;
} }
Label {
id: maxValueLabel
visible: UM.LayerView.getLayerActivity && Printer.getPlatformActivity ? true : false
text: control.maximumValue + 1
font: control.maximumValue > 998 ? UM.Theme.fonts.small : UM.Theme.fonts.default
transformOrigin: Item.BottomLeft
rotation: 90
x: parent.x + parent.width - maxValueLabel.height
y: control.maximumValue > 998 ? parent.y + UM.Theme.sizes.slider_layerview_smalltext_margin.width : parent.y
}
Label {
id: minValueLabel
visible: UM.LayerView.getLayerActivity && Printer.getPlatformActivity ? true : false
text: '1'
font: control.maximumValue > 998 ? UM.Theme.fonts.small : UM.Theme.fonts.default
transformOrigin: Item.BottomLeft
rotation: 90
x: parent.x
y: control.maximumValue > 998 ? parent.y + UM.Theme.sizes.slider_layerview_smalltext_margin.width : parent.y
}
} }
handle: Rectangle { handle: Rectangle {
id: layerSliderControl id: layerSliderControl
@ -443,26 +423,37 @@ QtObject {
height: UM.Theme.sizes.slider_handle.height; height: UM.Theme.sizes.slider_handle.height;
color: control.hovered ? UM.Theme.colors.slider_handle_hover : UM.Theme.colors.slider_handle; color: control.hovered ? UM.Theme.colors.slider_handle_hover : UM.Theme.colors.slider_handle;
Behavior on color { ColorAnimation { duration: 50; } } Behavior on color { ColorAnimation { duration: 50; } }
Label { TextField {
id: valueLabel id: valueLabel
property int unremovableSpacing: 5
property string maxValue: control.maximumValue + 1
placeholderText: control.value + 1
onEditingFinished: {
if (valueLabel.text != ''){
control.value = valueLabel.text - 1
valueLabel.text = ''
valueLabel.focus = false
}
}
validator: IntValidator {bottom: 1; top: control.maximumValue + 1;}
visible: UM.LayerView.getLayerActivity && Printer.getPlatformActivity ? true : false visible: UM.LayerView.getLayerActivity && Printer.getPlatformActivity ? true : false
text: control.value + 1
anchors.bottom: layerSliderControl.bottom anchors.bottom: layerSliderControl.bottom
anchors.right: layerSliderControl.left anchors.right: layerSliderControl.left
anchors.bottomMargin: parent.width + UM.Theme.sizes.default_margin.width anchors.rightMargin: valueLabel.unremovableSpacing / 2
font: UM.Theme.fonts.default anchors.bottomMargin: parent.width + (UM.Theme.sizes.default_margin.width / 2)
transformOrigin: Item.BottomRight transformOrigin: Item.BottomRight
rotation: 90 rotation: 90
Rectangle { style: TextFieldStyle{
width: (parent.width + UM.Theme.sizes.tooltip_margins.width) < 35 ? 35 : parent.width + UM.Theme.sizes.tooltip_margins.width textColor: UM.Theme.colors.setting_control_text;
height: parent.height + (UM.Theme.sizes.tooltip_margins.height / 2) font: UM.Theme.fonts.default;
anchors.verticalCenter: parent.verticalCenter background: Rectangle {
anchors.horizontalCenter: parent.horizontalCenter radius: 0
z: parent.z - 1 implicitWidth: control.maxValue.length * valueLabel.font.pixelSize
color: UM.Theme.colors.slider_text_background implicitHeight: UM.Theme.sizes.slider_handle.height + valueLabel.unremovableSpacing
border.width: 1 border.width: 1;
border.color: UM.Theme.colors.slider_groove_fill; border.color: UM.Theme.colors.slider_groove_border;
}
} }
} }
} }

View file

@ -54,6 +54,7 @@
"colors": { "colors": {
"sidebar": [255, 255, 255, 255], "sidebar": [255, 255, 255, 255],
"lining": [208, 210, 211, 255],
"primary": [12, 169, 227, 255], "primary": [12, 169, 227, 255],
"primary_hover": [34, 150, 190, 255], "primary_hover": [34, 150, 190, 255],
@ -67,10 +68,9 @@
"text_pressed": [12, 169, 227, 255], "text_pressed": [12, 169, 227, 255],
"button": [139, 143, 153, 255], "button": [139, 143, 153, 255],
"button_hover": [116, 120, 127, 255], "button_hover": [77, 184, 226, 255],
"button_active": [12, 169, 227, 255], "button_active": [32, 166, 219, 255],
"button_active_hover": [77, 184, 226, 255], "button_active_hover": [77, 184, 226, 255],
"button_lining": [208, 210, 211, 255],
"button_text": [255, 255, 255, 255], "button_text": [255, 255, 255, 255],
"button_disabled": [245, 245, 245, 255], "button_disabled": [245, 245, 245, 255],
"button_tooltip_text": [35, 35, 35, 255], "button_tooltip_text": [35, 35, 35, 255],
@ -107,10 +107,10 @@
"progressbar_control": [12, 169, 227, 255], "progressbar_control": [12, 169, 227, 255],
"slider_groove": [245, 245, 245, 255], "slider_groove": [245, 245, 245, 255],
"slider_groove_border": [160, 163, 171, 255], "slider_groove_border": [139, 143, 153, 255],
"slider_groove_fill": [160, 163, 171, 255], "slider_groove_fill": [139, 143, 153, 255],
"slider_handle": [12, 169, 227, 255], "slider_handle": [32, 166, 219, 255],
"slider_handle_hover": [34, 150, 190, 255], "slider_handle_hover": [77, 182, 226, 255],
"slider_text_background": [255, 255, 255, 255], "slider_text_background": [255, 255, 255, 255],
"checkbox": [255, 255, 255, 255], "checkbox": [255, 255, 255, 255],
@ -174,7 +174,7 @@
"slider_groove": [0.5, 0.5], "slider_groove": [0.5, 0.5],
"slider_handle": [1.5, 1.5], "slider_handle": [1.5, 1.5],
"slider_layerview_background": [6.0, 0.0], "slider_layerview_background": [4.0, 0.0],
"slider_layerview_smalltext_margin": [0.3, 0.00], "slider_layerview_smalltext_margin": [0.3, 0.00],
"slider_layerview_background_extension": [0.0, 2.2], "slider_layerview_background_extension": [0.0, 2.2],
"slider_layerview_margin": [3.0, 3.0], "slider_layerview_margin": [3.0, 3.0],