From 98aca201977a6760ded9dffc6524e8f79409c8d1 Mon Sep 17 00:00:00 2001 From: fieldOfView Date: Sun, 30 Apr 2017 22:27:07 +0200 Subject: [PATCH 1/4] Fix hover effect on "enable support" checkbox --- resources/qml/SidebarSimple.qml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/resources/qml/SidebarSimple.qml b/resources/qml/SidebarSimple.qml index 8f43e411ff..915530bbaf 100644 --- a/resources/qml/SidebarSimple.qml +++ b/resources/qml/SidebarSimple.qml @@ -240,6 +240,8 @@ Item CheckBox { id: enableSupportCheckBox + property alias _hovered: enableSupportMouseArea.containsMouse + anchors.top: parent.top anchors.left: enableSupportLabel.right anchors.leftMargin: UM.Theme.getSize("default_margin").width From 0c6a5328c8a1e1f4fcc986d8d904b4023de7e939 Mon Sep 17 00:00:00 2001 From: fieldOfView Date: Sun, 30 Apr 2017 22:52:54 +0200 Subject: [PATCH 2/4] Add hover effect to mode switch control While simplifying theme additions --- resources/qml/Sidebar.qml | 14 ++++++++++++-- resources/themes/cura/styles.qml | 30 ++++++++++++++++++------------ resources/themes/cura/theme.json | 17 +++++++++++------ 3 files changed, 41 insertions(+), 20 deletions(-) diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index ba5106c767..68427cad8c 100755 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -412,7 +412,7 @@ Rectangle { id: toggleLeftText anchors.right: modeToggleSwitch.left - anchors.rightMargin: UM.Theme.getSize("toggle_button_text_anchoring_margin").width + anchors.rightMargin: UM.Theme.getSize("default_margin").width anchors.verticalCenter: parent.verticalCenter text: "" color: UM.Theme.getColor("toggle_active_text") @@ -438,9 +438,19 @@ Rectangle id: modeToggleSwitch checked: false anchors.right: toggleRightText.left - anchors.rightMargin: UM.Theme.getSize("toggle_button_text_anchoring_margin").width + anchors.rightMargin: UM.Theme.getSize("default_margin").width anchors.verticalCenter: parent.verticalCenter + property alias _hovered: enableSupportMouseArea.containsMouse + + MouseArea + { + id: enableSupportMouseArea + anchors.fill: parent + hoverEnabled: true + acceptedButtons: Qt.NoButton + } + onClicked: { var index = 0; diff --git a/resources/themes/cura/styles.qml b/resources/themes/cura/styles.qml index 899ea3cf79..9d302c3494 100755 --- a/resources/themes/cura/styles.qml +++ b/resources/themes/cura/styles.qml @@ -11,16 +11,22 @@ QtObject { property Component toggle_button: Component { SwitchStyle { groove: Rectangle { - implicitWidth: UM.Theme.getSize("toggle_button_background_implicit_size").width - implicitHeight: UM.Theme.getSize("toggle_button_background_implicit_size").height - radius: UM.Theme.getSize("toggle_button_radius").width - border.color: { - if (control.pressed || (control.checkable && control.checked)) { - return UM.Theme.getColor("sidebar_header_active"); - } else if(control.hovered) { - return UM.Theme.getColor("sidebar_header_hover"); + implicitWidth: UM.Theme.getSize("toggle_button").width + implicitHeight: UM.Theme.getSize("toggle_button").height + radius: implicitHeight / 2 + color: { + if(control.hovered || control._hovered) { + return UM.Theme.getColor("toggle_button_hover"); } else { - return UM.Theme.getColor("sidebar_header_bar"); + return UM.Theme.getColor("toggle_button"); + } + } + Behavior on color { ColorAnimation { duration: 50; } } + border.color: { + if(control.hovered || control._hovered) { + return UM.Theme.getColor("toggle_button_border_hover"); + } else { + return UM.Theme.getColor("toggle_button_border"); } } Behavior on border.color { ColorAnimation { duration: 50; } } @@ -28,9 +34,9 @@ QtObject { } handle: Rectangle { - implicitWidth: UM.Theme.getSize("toggle_button_knob_implicit_size").width - implicitHeight: UM.Theme.getSize("toggle_button_knob_implicit_size").height - radius: UM.Theme.getSize("toggle_button_radius").width + implicitWidth: implicitHeight + implicitHeight: UM.Theme.getSize("toggle_button").height + radius: implicitHeight / 2 color: { if (control.pressed || (control.checkable && control.checked)) { diff --git a/resources/themes/cura/theme.json b/resources/themes/cura/theme.json index 084ee27bb2..531b233fec 100644 --- a/resources/themes/cura/theme.json +++ b/resources/themes/cura/theme.json @@ -175,6 +175,15 @@ "checkbox_mark": [24, 41, 77, 255], "checkbox_text": [24, 41, 77, 255], + "toggle_button": [255, 255, 255, 255], + "toggle_button_hover": [255, 255, 255, 255], + "toggle_button_border": [127, 127, 127, 255], + "toggle_button_border_hover": [12, 169, 227, 255], + "toggle_button_handle": [24, 41, 77, 255], + "toggle_button_text": [24, 41, 77, 255], + "toggle_button_text_hover": [24, 41, 77, 255], + "toggle_button_text_selected": [24, 41, 77, 255], + "tooltip": [12, 169, 227, 255], "tooltip_text": [255, 255, 255, 255], @@ -301,6 +310,7 @@ "layerview_row_spacing": [0.0, 0.5], "checkbox": [2.0, 2.0], + "toggle_button": [2.0, 1.0], "tooltip": [20.0, 10.0], "tooltip_margins": [1.0, 1.0], @@ -319,11 +329,6 @@ "infill_button_margin": [0.5, 0.5], - "jobspecs_line": [2.0, 2.0], - - "toggle_button_text_anchoring_margin": [1.0, 1.0], - "toggle_button_radius": [1.0, 1.0], - "toggle_button_background_implicit_size": [2.0, 1.0], - "toggle_button_knob_implicit_size": [1.0, 1.0] + "jobspecs_line": [2.0, 2.0] } } From 93197cd173cd095821c4c8781bf50c1665821fae Mon Sep 17 00:00:00 2001 From: fieldOfView Date: Sun, 30 Apr 2017 23:21:49 +0200 Subject: [PATCH 3/4] Add hover effect to mode switch text labels --- resources/qml/Sidebar.qml | 44 +++++++++++++++++++++++++++----- resources/themes/cura/theme.json | 2 +- 2 files changed, 39 insertions(+), 7 deletions(-) diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index 68427cad8c..f4d264b12c 100755 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -408,18 +408,34 @@ Rectangle } ExclusiveGroup { id: modeMenuGroup; } - Text + Label { id: toggleLeftText anchors.right: modeToggleSwitch.left anchors.rightMargin: UM.Theme.getSize("default_margin").width anchors.verticalCenter: parent.verticalCenter text: "" - color: UM.Theme.getColor("toggle_active_text") + color: + { + if(toggleLeftTextMouseArea.containsMouse) + { + return UM.Theme.getColor("toggle_button_text_hover"); + } + else if(!modeToggleSwitch.checked) + { + return UM.Theme.getColor("toggle_button_text_checked"); + } + else + { + return UM.Theme.getColor("toggle_button_text"); + } + } font: UM.Theme.getFont("default") MouseArea { + id: toggleLeftTextMouseArea + hoverEnabled: true anchors.fill: parent onClicked: { @@ -441,11 +457,11 @@ Rectangle anchors.rightMargin: UM.Theme.getSize("default_margin").width anchors.verticalCenter: parent.verticalCenter - property alias _hovered: enableSupportMouseArea.containsMouse + property bool _hovered: modeToggleSwitchMouseArea.containsMouse || toggleLeftTextMouseArea.containsMouse || toggleRightTextMouseArea.containsMouse MouseArea { - id: enableSupportMouseArea + id: modeToggleSwitchMouseArea anchors.fill: parent hoverEnabled: true acceptedButtons: Qt.NoButton @@ -470,17 +486,33 @@ Rectangle style: UM.Theme.styles.toggle_button } - Text + Label { id: toggleRightText anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter text: "" - color: UM.Theme.getColor("toggle_active_text") + color: + { + if(toggleRightTextMouseArea.containsMouse) + { + return UM.Theme.getColor("toggle_button_text_hover"); + } + else if(modeToggleSwitch.checked) + { + return UM.Theme.getColor("toggle_button_text_checked"); + } + else + { + return UM.Theme.getColor("toggle_button_text"); + } + } font: UM.Theme.getFont("default") MouseArea { + id: toggleRightTextMouseArea + hoverEnabled: true anchors.fill: parent onClicked: { diff --git a/resources/themes/cura/theme.json b/resources/themes/cura/theme.json index 531b233fec..37267046b0 100644 --- a/resources/themes/cura/theme.json +++ b/resources/themes/cura/theme.json @@ -182,7 +182,7 @@ "toggle_button_handle": [24, 41, 77, 255], "toggle_button_text": [24, 41, 77, 255], "toggle_button_text_hover": [24, 41, 77, 255], - "toggle_button_text_selected": [24, 41, 77, 255], + "toggle_button_text_checked": [12, 169, 227, 255], "tooltip": [12, 169, 227, 255], "tooltip_text": [255, 255, 255, 255], From f18947681a6ba9eefd24ddd024c41231057c07f6 Mon Sep 17 00:00:00 2001 From: fieldOfView Date: Sun, 30 Apr 2017 23:25:14 +0200 Subject: [PATCH 4/4] Disambiguate theme name --- resources/qml/Sidebar.qml | 14 +++++++------- resources/themes/cura/styles.qml | 16 ++++++++-------- resources/themes/cura/theme.json | 18 +++++++++--------- 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index f4d264b12c..132d1d2f41 100755 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -419,15 +419,15 @@ Rectangle { if(toggleLeftTextMouseArea.containsMouse) { - return UM.Theme.getColor("toggle_button_text_hover"); + return UM.Theme.getColor("mode_switch_text_hover"); } else if(!modeToggleSwitch.checked) { - return UM.Theme.getColor("toggle_button_text_checked"); + return UM.Theme.getColor("mode_switch_text_checked"); } else { - return UM.Theme.getColor("toggle_button_text"); + return UM.Theme.getColor("mode_switch_text"); } } font: UM.Theme.getFont("default") @@ -483,7 +483,7 @@ Rectangle UM.Preferences.setValue("cura/active_mode", index); } - style: UM.Theme.styles.toggle_button + style: UM.Theme.styles.mode_switch } Label @@ -496,15 +496,15 @@ Rectangle { if(toggleRightTextMouseArea.containsMouse) { - return UM.Theme.getColor("toggle_button_text_hover"); + return UM.Theme.getColor("mode_switch_text_hover"); } else if(modeToggleSwitch.checked) { - return UM.Theme.getColor("toggle_button_text_checked"); + return UM.Theme.getColor("mode_switch_text_checked"); } else { - return UM.Theme.getColor("toggle_button_text"); + return UM.Theme.getColor("mode_switch_text"); } } font: UM.Theme.getFont("default") diff --git a/resources/themes/cura/styles.qml b/resources/themes/cura/styles.qml index 9d302c3494..ffe866f2c6 100755 --- a/resources/themes/cura/styles.qml +++ b/resources/themes/cura/styles.qml @@ -8,25 +8,25 @@ import QtQuick.Controls.Styles 1.1 import UM 1.1 as UM QtObject { - property Component toggle_button: Component { + property Component mode_switch: Component { SwitchStyle { groove: Rectangle { - implicitWidth: UM.Theme.getSize("toggle_button").width - implicitHeight: UM.Theme.getSize("toggle_button").height + implicitWidth: UM.Theme.getSize("mode_switch").width + implicitHeight: UM.Theme.getSize("mode_switch").height radius: implicitHeight / 2 color: { if(control.hovered || control._hovered) { - return UM.Theme.getColor("toggle_button_hover"); + return UM.Theme.getColor("mode_switch_hover"); } else { - return UM.Theme.getColor("toggle_button"); + return UM.Theme.getColor("mode_switch"); } } Behavior on color { ColorAnimation { duration: 50; } } border.color: { if(control.hovered || control._hovered) { - return UM.Theme.getColor("toggle_button_border_hover"); + return UM.Theme.getColor("mode_switch_border_hover"); } else { - return UM.Theme.getColor("toggle_button_border"); + return UM.Theme.getColor("mode_switch_border"); } } Behavior on border.color { ColorAnimation { duration: 50; } } @@ -35,7 +35,7 @@ QtObject { handle: Rectangle { implicitWidth: implicitHeight - implicitHeight: UM.Theme.getSize("toggle_button").height + implicitHeight: UM.Theme.getSize("mode_switch").height radius: implicitHeight / 2 color: { diff --git a/resources/themes/cura/theme.json b/resources/themes/cura/theme.json index 37267046b0..da58af4c14 100644 --- a/resources/themes/cura/theme.json +++ b/resources/themes/cura/theme.json @@ -175,14 +175,14 @@ "checkbox_mark": [24, 41, 77, 255], "checkbox_text": [24, 41, 77, 255], - "toggle_button": [255, 255, 255, 255], - "toggle_button_hover": [255, 255, 255, 255], - "toggle_button_border": [127, 127, 127, 255], - "toggle_button_border_hover": [12, 169, 227, 255], - "toggle_button_handle": [24, 41, 77, 255], - "toggle_button_text": [24, 41, 77, 255], - "toggle_button_text_hover": [24, 41, 77, 255], - "toggle_button_text_checked": [12, 169, 227, 255], + "mode_switch": [255, 255, 255, 255], + "mode_switch_hover": [255, 255, 255, 255], + "mode_switch_border": [127, 127, 127, 255], + "mode_switch_border_hover": [12, 169, 227, 255], + "mode_switch_handle": [24, 41, 77, 255], + "mode_switch_text": [24, 41, 77, 255], + "mode_switch_text_hover": [24, 41, 77, 255], + "mode_switch_text_checked": [12, 169, 227, 255], "tooltip": [12, 169, 227, 255], "tooltip_text": [255, 255, 255, 255], @@ -310,7 +310,7 @@ "layerview_row_spacing": [0.0, 0.5], "checkbox": [2.0, 2.0], - "toggle_button": [2.0, 1.0], + "mode_switch": [2.0, 1.0], "tooltip": [20.0, 10.0], "tooltip_margins": [1.0, 1.0],