From c75887be80874c32b52113d0b9e22392cf088033 Mon Sep 17 00:00:00 2001 From: Lipu Fei Date: Tue, 18 Apr 2017 16:27:37 +0200 Subject: [PATCH 1/4] Use a toggle button for mode switching CURA-3574 --- resources/qml/Sidebar.qml | 54 ++++++++++++++++++++++++++++++++ resources/themes/cura/styles.qml | 38 ++++++++++++++++++++++ 2 files changed, 92 insertions(+) diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index f4f439439f..aeb86c9dbd 100644 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -407,6 +407,8 @@ Rectangle } } ExclusiveGroup { id: modeMenuGroup; } + + /* ListView{ id: modesList property var index: 0 @@ -415,6 +417,54 @@ Rectangle anchors.top: parent.top anchors.left: parent.left width: parent.width + }*/ + + Text + { + id: toggleLeftText + anchors.right: modeToggleSwitch.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + text: "" + color: UM.Theme.getColor("toggle_active_text") + font: UM.Theme.getFont("default") + } + + Switch + { + id: modeToggleSwitch + checked: false + anchors.right: toggleRightText.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + + onClicked: + { + var index = 0; + if (checked) + { + index = 1; + } + updateActiveMode(index); + } + + function updateActiveMode(index) + { + base.currentModeIndex = index; + UM.Preferences.setValue("cura/active_mode", index); + } + + style: UM.Theme.styles.toggle_button + } + + Text + { + id: toggleRightText + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + text: "" + color: UM.Theme.getColor("toggle_active_text") + font: UM.Theme.getFont("default") } } @@ -541,10 +591,14 @@ Rectangle }) sidebarContents.push({ "item": modesListModel.get(base.currentModeIndex).item, "immediate": true }); + toggleLeftText.text = modesListModel.get(0).text + toggleRightText.text = modesListModel.get(1).text + var index = parseInt(UM.Preferences.getValue("cura/active_mode")) if(index) { currentModeIndex = index; + modeToggleSwitch.checked = index > 0; } } diff --git a/resources/themes/cura/styles.qml b/resources/themes/cura/styles.qml index 64b4436622..18508a0055 100644 --- a/resources/themes/cura/styles.qml +++ b/resources/themes/cura/styles.qml @@ -8,6 +8,44 @@ import QtQuick.Controls.Styles 1.1 import UM 1.1 as UM QtObject { + property Component toggle_button: Component { + SwitchStyle { + groove: Rectangle { + implicitWidth: 40 + implicitHeight: 15 + radius: 9 + 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"); + } else { + return UM.Theme.getColor("sidebar_header_bar"); + } + } + Behavior on border.color { ColorAnimation { duration: 50; } } + border.width: 2 + } + + handle: Rectangle { + implicitWidth: Math.round((parent.parent.width - padding.left - padding.right)/2) + implicitHeight: implicitWidth + radius: 9 + + 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"); + } else { + return UM.Theme.getColor("sidebar_header_bar"); + } + } + Behavior on color { ColorAnimation { duration: 50; } } + } + } + } + property Component sidebar_header_button: Component { ButtonStyle { background: Rectangle { From 6bf096563246c1271f13c7e805b161071dabd788 Mon Sep 17 00:00:00 2001 From: Lipu Fei Date: Tue, 18 Apr 2017 16:52:17 +0200 Subject: [PATCH 2/4] Adjust toggle button size CURA-3574 --- resources/themes/cura/styles.qml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/resources/themes/cura/styles.qml b/resources/themes/cura/styles.qml index 18508a0055..9b553236c8 100644 --- a/resources/themes/cura/styles.qml +++ b/resources/themes/cura/styles.qml @@ -11,7 +11,7 @@ QtObject { property Component toggle_button: Component { SwitchStyle { groove: Rectangle { - implicitWidth: 40 + implicitWidth: 30 implicitHeight: 15 radius: 9 border.color: { @@ -24,12 +24,12 @@ QtObject { } } Behavior on border.color { ColorAnimation { duration: 50; } } - border.width: 2 + border.width: 1 } handle: Rectangle { - implicitWidth: Math.round((parent.parent.width - padding.left - padding.right)/2) - implicitHeight: implicitWidth + implicitHeight: 15 + implicitWidth: 15 radius: 9 color: { From 61c46312707faab26ed8d3cb9ecba9e4c0687a9a Mon Sep 17 00:00:00 2001 From: Lipu Fei Date: Wed, 19 Apr 2017 08:56:08 +0200 Subject: [PATCH 3/4] Put sizes and numbers for toggle button into theme CURA-3574 --- resources/qml/Sidebar.qml | 4 ++-- resources/themes/cura/styles.qml | 12 ++++++------ resources/themes/cura/theme.json | 7 ++++++- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index aeb86c9dbd..e4ad4ff305 100644 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -423,7 +423,7 @@ Rectangle { id: toggleLeftText anchors.right: modeToggleSwitch.left - anchors.rightMargin: 10 + anchors.rightMargin: UM.Theme.getSize("toggle_button_text_anchoring_margin").width anchors.verticalCenter: parent.verticalCenter text: "" color: UM.Theme.getColor("toggle_active_text") @@ -435,7 +435,7 @@ Rectangle id: modeToggleSwitch checked: false anchors.right: toggleRightText.left - anchors.rightMargin: 10 + anchors.rightMargin: UM.Theme.getSize("toggle_button_text_anchoring_margin").width anchors.verticalCenter: parent.verticalCenter onClicked: diff --git a/resources/themes/cura/styles.qml b/resources/themes/cura/styles.qml index 9b553236c8..a7c7dcb6cd 100644 --- a/resources/themes/cura/styles.qml +++ b/resources/themes/cura/styles.qml @@ -11,9 +11,9 @@ QtObject { property Component toggle_button: Component { SwitchStyle { groove: Rectangle { - implicitWidth: 30 - implicitHeight: 15 - radius: 9 + 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"); @@ -28,9 +28,9 @@ QtObject { } handle: Rectangle { - implicitHeight: 15 - implicitWidth: 15 - radius: 9 + 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 color: { if (control.pressed || (control.checkable && control.checked)) { diff --git a/resources/themes/cura/theme.json b/resources/themes/cura/theme.json index fa4bf2ee92..084ee27bb2 100644 --- a/resources/themes/cura/theme.json +++ b/resources/themes/cura/theme.json @@ -319,6 +319,11 @@ "infill_button_margin": [0.5, 0.5], - "jobspecs_line": [2.0, 2.0] + "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] } } From 232f9750920dbced5305d760df4531fcf9e3f0fb Mon Sep 17 00:00:00 2001 From: Jack Ha Date: Wed, 19 Apr 2017 10:28:16 +0200 Subject: [PATCH 4/4] Removed unused code, added ';' to end of lines. CURA-3574 --- resources/qml/Sidebar.qml | 21 +++++---------------- 1 file changed, 5 insertions(+), 16 deletions(-) mode change 100644 => 100755 resources/qml/Sidebar.qml diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml old mode 100644 new mode 100755 index e4ad4ff305..c37b3bf222 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -408,17 +408,6 @@ Rectangle } ExclusiveGroup { id: modeMenuGroup; } - /* - ListView{ - id: modesList - property var index: 0 - model: modesListModel - delegate: wizardDelegate - anchors.top: parent.top - anchors.left: parent.left - width: parent.width - }*/ - Text { id: toggleLeftText @@ -591,11 +580,11 @@ Rectangle }) sidebarContents.push({ "item": modesListModel.get(base.currentModeIndex).item, "immediate": true }); - toggleLeftText.text = modesListModel.get(0).text - toggleRightText.text = modesListModel.get(1).text + toggleLeftText.text = modesListModel.get(0).text; + toggleRightText.text = modesListModel.get(1).text; - var index = parseInt(UM.Preferences.getValue("cura/active_mode")) - if(index) + var index = parseInt(UM.Preferences.getValue("cura/active_mode")); + if (index) { currentModeIndex = index; modeToggleSwitch.checked = index > 0; @@ -621,4 +610,4 @@ Rectangle watchedProperties: [ "value" ] storeIndex: 0 } -} \ No newline at end of file +}