From b782095f60d5136e15677dcc9f1302327b04337e Mon Sep 17 00:00:00 2001 From: Arjen Hiemstra Date: Wed, 1 Apr 2015 12:09:31 +0200 Subject: [PATCH] Update styling and functionality of sidebar in cura --- icons/down_arrow.svg | 67 --------------------------------------- styles.qml | 75 +++++++++++++++++++++++++++++++++++++++++--- theme.json | 29 +++++++++++++++-- 3 files changed, 96 insertions(+), 75 deletions(-) delete mode 100644 icons/down_arrow.svg diff --git a/icons/down_arrow.svg b/icons/down_arrow.svg deleted file mode 100644 index b9b38a3d4b..0000000000 --- a/icons/down_arrow.svg +++ /dev/null @@ -1,67 +0,0 @@ - - - - - - - - - - - - image/svg+xml - - - - - - - - - diff --git a/styles.qml b/styles.qml index 616f0a416c..8b63935844 100644 --- a/styles.qml +++ b/styles.qml @@ -8,11 +8,14 @@ QtObject { property Component sidebar_header_button: Component { ButtonStyle { background: Item { - Image { + Label { anchors.right: parent.right; - anchors.verticalCenter: parent.verticalCenter; + anchors.top: parent.top; - source: UM.Theme.icons.down_arrow; + text: "▼"; + + property bool down: control.pressed || (control.checkable && control.checked); + color: down ? UM.Theme.colors.text_pressed : control.hovered ? UM.Theme.colors.text_hover : UM.Theme.colors.text; } } @@ -35,6 +38,7 @@ QtObject { implicitWidth: UM.Theme.sizes.button.width; implicitHeight: UM.Theme.sizes.button.height; color: down ? UM.Theme.colors.button_down : control.hovered ? UM.Theme.colors.button_hover : UM.Theme.colors.button; + Behavior on color { ColorAnimation { duration: 50; } } cornerSize: UM.Theme.sizes.default_margin.width; } @@ -52,11 +56,23 @@ QtObject { } } - property Component category: Component { + property Component sidebar_category: Component { ButtonStyle { background: UM.AngledCornerRectangle { property bool down: control.pressed || (control.checkable && control.checked); - color: down ? UM.Theme.colors.button_down : control.hovered ? UM.Theme.colors.button_hover : UM.Theme.colors.button; + implicitHeight: UM.Theme.sizes.section.height; + color: { + if(!control.enabled) { + return UM.Theme.colors.button_disabled; + } else if(down) { + return UM.Theme.colors.button_down; + } 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: Row { @@ -68,4 +84,53 @@ QtObject { } } } + + property Component scrollview: Component { + ScrollViewStyle { + decrementControl: Item { } + incrementControl: Item { } + + scrollBarBackground: UM.AngledCornerRectangle { + implicitWidth: UM.Theme.sizes.scrollbar.width; + + cornerSize: UM.Theme.sizes.scrollbar.width; + + color: UM.Theme.colors.scrollbar_background; + } + + handle: UM.AngledCornerRectangle { + implicitWidth: UM.Theme.sizes.scrollbar.width; + + cornerSize: UM.Theme.sizes.scrollbar.width; + + color: styleData.pressed ? UM.Theme.colors.scrollbar_handle_down : styleData.hovered ? UM.Theme.colors.scrollbar_handle_hover : UM.Theme.colors.scrollbar_handle; + Behavior on color { ColorAnimation { duration: 50; } } + } + } + } + + property variant setting_item: UM.SettingItemStyle { + labelFont: UM.Theme.fonts.default; + labelColor: UM.Theme.colors.setting_label; + + spacing: UM.Theme.sizes.default_margin.width; + fixedHeight: UM.Theme.sizes.setting.height; + + controlWidth: UM.Theme.sizes.setting_control.width; + controlRightMargin: UM.Theme.sizes.setting_control_margin.width; + controlBorderWidth: 1; + controlColor: UM.Theme.colors.setting_control; + controlHighlightColor: UM.Theme.colors.setting_control_highlight; + controlBorderColor: UM.Theme.colors.setting_control_border; + controlTextColor: UM.Theme.colors.setting_control_text; + controlFont: UM.Theme.fonts.default; + + validationErrorColor: Qt.rgba(1.0, 0.0, 0.0, 1.0); + validationWarningColor: Qt.rgba(1.0, 1.0, 0.0, 1.0); + validationOkColor: Qt.rgba(1.0, 1.0, 1.0, 1.0); + + unitRightMargin: UM.Theme.sizes.setting_unit_margin.width; + unitColor: UM.Theme.colors.setting_unit; + unitFont: UM.Theme.fonts.default; + } } diff --git a/theme.json b/theme.json index 0be31dc519..c19168340c 100644 --- a/theme.json +++ b/theme.json @@ -37,19 +37,42 @@ "button": [205, 202, 201, 255], "button_hover": [174, 174, 174, 255], "button_down": [12, 169, 227, 255], - "button_text": [255, 255, 255, 255] + "button_text": [255, 255, 255, 255], + "button_disabled": [12, 169, 227, 255], + + "scrollbar_background": [245, 245, 245, 255], + "scrollbar_handle": [205, 202, 201, 255], + "scrollbar_handle_hover": [174, 174, 174, 255], + "scrollbar_handle_down": [12, 159, 227, 255], + + "setting_label": [174, 174, 174, 255], + "setting_control": [255, 255, 255, 255], + "setting_control_highlight": [245, 245, 245, 255], + "setting_control_border": [174, 174, 174, 255], + "setting_control_text": [35, 35, 35, 255], + "setting_control_hover": [35, 35, 35, 255], + "setting_unit": [174, 174, 174, 255] }, "sizes": { - "toolbar_button": [2.0, 2.0], "window_margin": [2.0, 2.0], "default_margin": [1.0, 1.0], "panel": [22.0, 10.0], + "toolbar_button": [2.0, 2.0], "toolbar_spacing": [1.0, 1.0], + "section": [22.0, 3.0], "section_icon": [2.14, 2.14], "section_text_margin": [0.33, 0.33], + + "setting": [21.0, 2.0], + "setting_control": [6.0, 2.0], + "setting_control_margin": [3.0, 3.0], + "setting_unit_margin": [0.5, 0.5], + "button": [4.25, 4.25], - "button_icon": [3.57, 3.57] + "button_icon": [3.57, 3.57], + + "scrollbar": [0.5, 0.5] } }