From 8a887915ac778479daf8034f65295e151ba5c258 Mon Sep 17 00:00:00 2001 From: fieldOfView Date: Thu, 22 Jun 2017 18:07:34 +0200 Subject: [PATCH 1/5] Add tab navigation to sidebar --- resources/qml/Settings/SettingCheckBox.qml | 7 +++++++ resources/qml/Settings/SettingTextField.qml | 1 + 2 files changed, 8 insertions(+) diff --git a/resources/qml/Settings/SettingCheckBox.qml b/resources/qml/Settings/SettingCheckBox.qml index 97a72a026e..2a41f80d2c 100644 --- a/resources/qml/Settings/SettingCheckBox.qml +++ b/resources/qml/Settings/SettingCheckBox.qml @@ -17,6 +17,7 @@ SettingItem id: control anchors.fill: parent hoverEnabled: true + activeFocusOnTab: true property bool checked: { @@ -49,6 +50,12 @@ SettingItem } } + Keys.onSpacePressed: + { + forceActiveFocus(); + propertyProvider.setPropertyValue("value", !checked); + } + onClicked: { forceActiveFocus(); diff --git a/resources/qml/Settings/SettingTextField.qml b/resources/qml/Settings/SettingTextField.qml index 059980bba2..9ab23ad7c8 100644 --- a/resources/qml/Settings/SettingTextField.qml +++ b/resources/qml/Settings/SettingTextField.qml @@ -82,6 +82,7 @@ SettingItem right: parent.right verticalCenter: parent.verticalCenter } + activeFocusOnTab: true Keys.onReleased: { From b324e90ba5468b19070d4d1536d288572d276df1 Mon Sep 17 00:00:00 2001 From: fieldOfView Date: Thu, 22 Jun 2017 18:33:30 +0200 Subject: [PATCH 2/5] Show hover state on active focus --- resources/qml/Settings/SettingCheckBox.qml | 20 +++++++++++----- resources/qml/Settings/SettingComboBox.qml | 24 ++++++++++++------- resources/qml/Settings/SettingExtruder.qml | 14 ++++------- .../qml/Settings/SettingOptionalExtruder.qml | 16 +++++-------- resources/qml/Settings/SettingTextField.qml | 15 ++++++++++-- resources/themes/cura/styles.qml | 6 ++--- 6 files changed, 57 insertions(+), 38 deletions(-) diff --git a/resources/qml/Settings/SettingCheckBox.qml b/resources/qml/Settings/SettingCheckBox.qml index 2a41f80d2c..07b1f865be 100644 --- a/resources/qml/Settings/SettingCheckBox.qml +++ b/resources/qml/Settings/SettingCheckBox.qml @@ -74,7 +74,7 @@ SettingItem color: { - if (!enabled) + if(!enabled) { return UM.Theme.getColor("setting_control_disabled") } @@ -82,14 +82,22 @@ SettingItem { return UM.Theme.getColor("setting_control_highlight") } - else - { - return UM.Theme.getColor("setting_control") - } + return UM.Theme.getColor("setting_control") } border.width: UM.Theme.getSize("default_lining").width - border.color: !enabled ? UM.Theme.getColor("setting_control_disabled_border") : control.containsMouse ? UM.Theme.getColor("setting_control_border_highlight") : UM.Theme.getColor("setting_control_border") + border.color: + { + if(!enabled) + { + return UM.Theme.getColor("setting_control_disabled_border") + } + if(control.containsMouse || control.activeFocus) + { + return UM.Theme.getColor("setting_control_border_highlight") + } + return UM.Theme.getColor("setting_control_border") + } UM.RecolorImage { anchors.verticalCenter: parent.verticalCenter diff --git a/resources/qml/Settings/SettingComboBox.qml b/resources/qml/Settings/SettingComboBox.qml index c655630a8e..4c14d2032b 100644 --- a/resources/qml/Settings/SettingComboBox.qml +++ b/resources/qml/Settings/SettingComboBox.qml @@ -33,21 +33,29 @@ SettingItem { color: { - if (!enabled) + if(!enabled) { return UM.Theme.getColor("setting_control_disabled") } - if(control.hovered || base.activeFocus) + if(control.hovered || control.activeFocus) { return UM.Theme.getColor("setting_control_highlight") } - else - { - return UM.Theme.getColor("setting_control") - } + return UM.Theme.getColor("setting_control") + } + border.width: UM.Theme.getSize("default_lining").width + border.color: + { + if(!enabled) + { + return UM.Theme.getColor("setting_control_disabled_border") + } + if(control.hovered || control.activeFocus) + { + return UM.Theme.getColor("setting_control_border_highlight") + } + return UM.Theme.getColor("setting_control_border") } - border.width: UM.Theme.getSize("default_lining").width; - border.color: !enabled ? UM.Theme.getColor("setting_control_disabled_border") : control.hovered ? UM.Theme.getColor("setting_control_border_highlight") : UM.Theme.getColor("setting_control_border"); } label: Item { diff --git a/resources/qml/Settings/SettingExtruder.qml b/resources/qml/Settings/SettingExtruder.qml index 4a946d16f8..b00b6774be 100644 --- a/resources/qml/Settings/SettingExtruder.qml +++ b/resources/qml/Settings/SettingExtruder.qml @@ -53,7 +53,7 @@ SettingItem { color: { - if (!enabled) + if(!enabled) { return UM.Theme.getColor("setting_control_disabled"); } @@ -61,23 +61,19 @@ SettingItem { return UM.Theme.getColor("setting_control_highlight"); } - else - { - return UM.Theme.getColor("setting_control"); - } + return UM.Theme.getColor("setting_control"); } border.width: UM.Theme.getSize("default_lining").width border.color: { if(!enabled) { - return UM.Theme.getColor("setting_control_disabled_border"); + return UM.Theme.getColor("setting_control_disabled_border") } - if(control.hovered || base.activeFocus) + if(control.hovered || control.activeFocus) { - UM.Theme.getColor("setting_control_border_highlight") + return UM.Theme.getColor("setting_control_border_highlight") } - return UM.Theme.getColor("setting_control_border") } } diff --git a/resources/qml/Settings/SettingOptionalExtruder.qml b/resources/qml/Settings/SettingOptionalExtruder.qml index 1f546b518c..e2ca20571c 100644 --- a/resources/qml/Settings/SettingOptionalExtruder.qml +++ b/resources/qml/Settings/SettingOptionalExtruder.qml @@ -72,31 +72,27 @@ SettingItem { color: { - if (!enabled) + if(!enabled) { return UM.Theme.getColor("setting_control_disabled"); } - if(control.hovered || base.activeFocus) + if(control.hovered || control.activeFocus) { return UM.Theme.getColor("setting_control_highlight"); } - else - { - return UM.Theme.getColor("setting_control"); - } + return UM.Theme.getColor("setting_control"); } border.width: UM.Theme.getSize("default_lining").width border.color: { if(!enabled) { - return UM.Theme.getColor("setting_control_disabled_border"); + return UM.Theme.getColor("setting_control_disabled_border") } - if(control.hovered || base.activeFocus) + if(control.hovered || control.activeFocus) { - UM.Theme.getColor("setting_control_border_highlight") + return UM.Theme.getColor("setting_control_border_highlight") } - return UM.Theme.getColor("setting_control_border") } } diff --git a/resources/qml/Settings/SettingTextField.qml b/resources/qml/Settings/SettingTextField.qml index 9ab23ad7c8..b9f11ea80d 100644 --- a/resources/qml/Settings/SettingTextField.qml +++ b/resources/qml/Settings/SettingTextField.qml @@ -17,10 +17,21 @@ SettingItem anchors.fill: parent border.width: UM.Theme.getSize("default_lining").width - border.color: !enabled ? UM.Theme.getColor("setting_control_disabled_border") : hovered ? UM.Theme.getColor("setting_control_border_highlight") : UM.Theme.getColor("setting_control_border") + border.color: + { + if(!enabled) + { + return UM.Theme.getColor("setting_control_disabled_border") + } + if(hovered || input.activeFocus) + { + return UM.Theme.getColor("setting_control_border_highlight") + } + return UM.Theme.getColor("setting_control_border") + } color: { - if (!enabled) + if(!enabled) { return UM.Theme.getColor("setting_control_disabled") } diff --git a/resources/themes/cura/styles.qml b/resources/themes/cura/styles.qml index 496cc8e489..c4c441da43 100755 --- a/resources/themes/cura/styles.qml +++ b/resources/themes/cura/styles.qml @@ -368,11 +368,11 @@ QtObject { color: { if(!control.enabled) { return Theme.getColor("setting_category_disabled_border"); - } else if(control.hovered && control.checkable && control.checked) { + } else if((control.hovered || control.activeFocus) && control.checkable && control.checked) { return Theme.getColor("setting_category_active_hover_border"); } else if(control.pressed || (control.checkable && control.checked)) { return Theme.getColor("setting_category_active_border"); - } else if(control.hovered) { + } else if(control.hovered || control.activeFocus) { return Theme.getColor("setting_category_hover_border"); } else { return Theme.getColor("setting_category_border"); @@ -508,7 +508,7 @@ QtObject { { color: { - if (!enabled) + if(!enabled) { return UM.Theme.getColor("setting_control_disabled"); } From edee53b0b16950436878cc0be994744b9e943ae4 Mon Sep 17 00:00:00 2001 From: fieldOfView Date: Mon, 26 Jun 2017 13:00:59 +0200 Subject: [PATCH 3/5] Scroll setting with active focus into view --- resources/qml/Settings/SettingCategory.qml | 24 ++++++++++++++++--- resources/qml/Settings/SettingCheckBox.qml | 8 +++++++ resources/qml/Settings/SettingComboBox.qml | 14 ++++++++++- resources/qml/Settings/SettingExtruder.qml | 8 +++++++ resources/qml/Settings/SettingItem.qml | 5 ++-- .../qml/Settings/SettingOptionalExtruder.qml | 8 +++++++ resources/qml/Settings/SettingTextField.qml | 8 +++++++ resources/qml/Settings/SettingView.qml | 4 ++++ 8 files changed, 73 insertions(+), 6 deletions(-) diff --git a/resources/qml/Settings/SettingCategory.qml b/resources/qml/Settings/SettingCategory.qml index 75514e7c1b..6220d6429e 100644 --- a/resources/qml/Settings/SettingCategory.qml +++ b/resources/qml/Settings/SettingCategory.qml @@ -14,10 +14,11 @@ Button { style: UM.Theme.styles.sidebar_category; - signal showTooltip(string text); - signal hideTooltip(); + signal showTooltip(string text) + signal hideTooltip() signal contextMenuRequested() signal showAllHiddenInheritedSettings(string category_id) + signal focusReceived() text: definition.label iconSource: UM.Theme.getIcon(definition.icon) @@ -25,7 +26,24 @@ Button { checkable: true checked: definition.expanded - onClicked: { forceActiveFocus(); definition.expanded ? settingDefinitionsModel.collapse(definition.key) : settingDefinitionsModel.expandAll(definition.key) } + onClicked: + { + forceActiveFocus(); + if(definition.expanded) + { + settingDefinitionsModel.collapse(definition.key); + } else { + settingDefinitionsModel.expandAll(definition.key); + } + } + onActiveFocusChanged: + { + if(activeFocus) + { + base.focusReceived(); + } + } + UM.SimpleButton { id: settingsButton diff --git a/resources/qml/Settings/SettingCheckBox.qml b/resources/qml/Settings/SettingCheckBox.qml index 07b1f865be..8f21e19713 100644 --- a/resources/qml/Settings/SettingCheckBox.qml +++ b/resources/qml/Settings/SettingCheckBox.qml @@ -62,6 +62,14 @@ SettingItem propertyProvider.setPropertyValue("value", !checked); } + onActiveFocusChanged: + { + if(activeFocus) + { + base.focusReceived(); + } + } + Rectangle { anchors diff --git a/resources/qml/Settings/SettingComboBox.qml b/resources/qml/Settings/SettingComboBox.qml index 4c14d2032b..5d1cc287b3 100644 --- a/resources/qml/Settings/SettingComboBox.qml +++ b/resources/qml/Settings/SettingComboBox.qml @@ -94,7 +94,19 @@ SettingItem } } - onActivated: { forceActiveFocus(); propertyProvider.setPropertyValue("value", definition.options[index].key) } + onActivated: + { + forceActiveFocus(); + propertyProvider.setPropertyValue("value", definition.options[index].key); + } + + onActiveFocusChanged: + { + if(activeFocus) + { + base.focusReceived(); + } + } Binding { diff --git a/resources/qml/Settings/SettingExtruder.qml b/resources/qml/Settings/SettingExtruder.qml index b00b6774be..f4b85bdd99 100644 --- a/resources/qml/Settings/SettingExtruder.qml +++ b/resources/qml/Settings/SettingExtruder.qml @@ -27,6 +27,14 @@ SettingItem propertyProvider.setPropertyValue("value", model.getItem(index).index); } + onActiveFocusChanged: + { + if(activeFocus) + { + base.focusReceived(); + } + } + currentIndex: propertyProvider.properties.value MouseArea diff --git a/resources/qml/Settings/SettingItem.qml b/resources/qml/Settings/SettingItem.qml index 7108d2a04c..dca8f63076 100644 --- a/resources/qml/Settings/SettingItem.qml +++ b/resources/qml/Settings/SettingItem.qml @@ -32,9 +32,10 @@ Item { property var stackLevels: propertyProvider.stackLevels property var stackLevel: stackLevels[0] + signal focusReceived() signal contextMenuRequested() - signal showTooltip(string text); - signal hideTooltip(); + signal showTooltip(string text) + signal hideTooltip() signal showAllHiddenInheritedSettings(string category_id) property string tooltipText: { diff --git a/resources/qml/Settings/SettingOptionalExtruder.qml b/resources/qml/Settings/SettingOptionalExtruder.qml index e2ca20571c..f7f86a77c0 100644 --- a/resources/qml/Settings/SettingOptionalExtruder.qml +++ b/resources/qml/Settings/SettingOptionalExtruder.qml @@ -31,6 +31,14 @@ SettingItem propertyProvider.setPropertyValue("value", model.getItem(index).index); } + onActiveFocusChanged: + { + if(activeFocus) + { + base.focusReceived(); + } + } + Binding { target: control diff --git a/resources/qml/Settings/SettingTextField.qml b/resources/qml/Settings/SettingTextField.qml index b9f11ea80d..7f495aea02 100644 --- a/resources/qml/Settings/SettingTextField.qml +++ b/resources/qml/Settings/SettingTextField.qml @@ -105,6 +105,14 @@ SettingItem propertyProvider.setPropertyValue("value", text) } + onActiveFocusChanged: + { + if(activeFocus) + { + base.focusReceived(); + } + } + color: !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("setting_control_text") font: UM.Theme.getFont("default"); diff --git a/resources/qml/Settings/SettingView.qml b/resources/qml/Settings/SettingView.qml index 7cb45ff75f..752665f2b7 100644 --- a/resources/qml/Settings/SettingView.qml +++ b/resources/qml/Settings/SettingView.qml @@ -298,6 +298,10 @@ Item } Cura.SettingInheritanceManager.manualRemoveOverride(category_id) } + onFocusReceived: + { + contents.positionViewAtIndex(index, ListView.Contain); + } } } From 8917762ed506079929de3a1ca6ebf487f5185af2 Mon Sep 17 00:00:00 2001 From: fieldOfView Date: Mon, 26 Jun 2017 13:03:28 +0200 Subject: [PATCH 4/5] Animate scrolling focussed item into view --- resources/qml/Settings/SettingView.qml | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/resources/qml/Settings/SettingView.qml b/resources/qml/Settings/SettingView.qml index 752665f2b7..c4477460e4 100644 --- a/resources/qml/Settings/SettingView.qml +++ b/resources/qml/Settings/SettingView.qml @@ -300,13 +300,23 @@ Item } onFocusReceived: { + animateContentY.from = contents.contentY; contents.positionViewAtIndex(index, ListView.Contain); + animateContentY.to = contents.contentY; + animateContentY.running = true; } } } UM.I18nCatalog { id: catalog; name: "cura"; } + NumberAnimation { + id: animateContentY + target: contents + property: "contentY" + duration: 50 + } + add: Transition { SequentialAnimation { NumberAnimation { properties: "height"; from: 0; duration: 100 } From 0f9cfa0304474cce481316ddfa2b4ab4cad2b5b8 Mon Sep 17 00:00:00 2001 From: fieldOfView Date: Mon, 26 Jun 2017 14:35:37 +0200 Subject: [PATCH 5/5] Fix tab order after expanding categories or using search This reimplements the behavior of pressing tab/backtab to force the correct order of items in the listview. --- resources/qml/Settings/SettingCategory.qml | 12 ++++++++ resources/qml/Settings/SettingCheckBox.qml | 11 ++++++- resources/qml/Settings/SettingComboBox.qml | 10 +++++++ resources/qml/Settings/SettingExtruder.qml | 10 +++++++ resources/qml/Settings/SettingItem.qml | 1 + .../qml/Settings/SettingOptionalExtruder.qml | 10 +++++++ resources/qml/Settings/SettingTextField.qml | 11 ++++++- resources/qml/Settings/SettingView.qml | 30 +++++++++++++++++++ 8 files changed, 93 insertions(+), 2 deletions(-) diff --git a/resources/qml/Settings/SettingCategory.qml b/resources/qml/Settings/SettingCategory.qml index 6220d6429e..e8c0983398 100644 --- a/resources/qml/Settings/SettingCategory.qml +++ b/resources/qml/Settings/SettingCategory.qml @@ -19,6 +19,9 @@ Button { signal contextMenuRequested() signal showAllHiddenInheritedSettings(string category_id) signal focusReceived() + signal setActiveFocusToNextSetting(bool forward) + + property var focusItem: base text: definition.label iconSource: UM.Theme.getIcon(definition.icon) @@ -44,6 +47,15 @@ Button { } } + Keys.onTabPressed: + { + base.setActiveFocusToNextSetting(true) + } + Keys.onBacktabPressed: + { + base.setActiveFocusToNextSetting(false) + } + UM.SimpleButton { id: settingsButton diff --git a/resources/qml/Settings/SettingCheckBox.qml b/resources/qml/Settings/SettingCheckBox.qml index 8f21e19713..4ef7f59a77 100644 --- a/resources/qml/Settings/SettingCheckBox.qml +++ b/resources/qml/Settings/SettingCheckBox.qml @@ -11,13 +11,13 @@ import UM 1.2 as UM SettingItem { id: base + property var focusItem: control contents: MouseArea { id: control anchors.fill: parent hoverEnabled: true - activeFocusOnTab: true property bool checked: { @@ -62,6 +62,15 @@ SettingItem propertyProvider.setPropertyValue("value", !checked); } + Keys.onTabPressed: + { + base.setActiveFocusToNextSetting(true) + } + Keys.onBacktabPressed: + { + base.setActiveFocusToNextSetting(false) + } + onActiveFocusChanged: { if(activeFocus) diff --git a/resources/qml/Settings/SettingComboBox.qml b/resources/qml/Settings/SettingComboBox.qml index 5d1cc287b3..c29ac123d6 100644 --- a/resources/qml/Settings/SettingComboBox.qml +++ b/resources/qml/Settings/SettingComboBox.qml @@ -10,6 +10,7 @@ import UM 1.1 as UM SettingItem { id: base + property var focusItem: control contents: ComboBox { @@ -108,6 +109,15 @@ SettingItem } } + Keys.onTabPressed: + { + base.setActiveFocusToNextSetting(true) + } + Keys.onBacktabPressed: + { + base.setActiveFocusToNextSetting(false) + } + Binding { target: control diff --git a/resources/qml/Settings/SettingExtruder.qml b/resources/qml/Settings/SettingExtruder.qml index f4b85bdd99..15496eaa8b 100644 --- a/resources/qml/Settings/SettingExtruder.qml +++ b/resources/qml/Settings/SettingExtruder.qml @@ -11,6 +11,7 @@ import Cura 1.0 as Cura SettingItem { id: base + property var focusItem: control contents: ComboBox { @@ -35,6 +36,15 @@ SettingItem } } + Keys.onTabPressed: + { + base.setActiveFocusToNextSetting(true) + } + Keys.onBacktabPressed: + { + base.setActiveFocusToNextSetting(false) + } + currentIndex: propertyProvider.properties.value MouseArea diff --git a/resources/qml/Settings/SettingItem.qml b/resources/qml/Settings/SettingItem.qml index dca8f63076..112edb5049 100644 --- a/resources/qml/Settings/SettingItem.qml +++ b/resources/qml/Settings/SettingItem.qml @@ -33,6 +33,7 @@ Item { property var stackLevel: stackLevels[0] signal focusReceived() + signal setActiveFocusToNextSetting(bool forward) signal contextMenuRequested() signal showTooltip(string text) signal hideTooltip() diff --git a/resources/qml/Settings/SettingOptionalExtruder.qml b/resources/qml/Settings/SettingOptionalExtruder.qml index f7f86a77c0..0fd36564a1 100644 --- a/resources/qml/Settings/SettingOptionalExtruder.qml +++ b/resources/qml/Settings/SettingOptionalExtruder.qml @@ -11,6 +11,7 @@ import Cura 1.0 as Cura SettingItem { id: base + property var focusItem: control contents: ComboBox { @@ -39,6 +40,15 @@ SettingItem } } + Keys.onTabPressed: + { + base.setActiveFocusToNextSetting(true) + } + Keys.onBacktabPressed: + { + base.setActiveFocusToNextSetting(false) + } + Binding { target: control diff --git a/resources/qml/Settings/SettingTextField.qml b/resources/qml/Settings/SettingTextField.qml index 7f495aea02..2991c24d57 100644 --- a/resources/qml/Settings/SettingTextField.qml +++ b/resources/qml/Settings/SettingTextField.qml @@ -9,6 +9,7 @@ import UM 1.1 as UM SettingItem { id: base + property var focusItem: input contents: Rectangle { @@ -93,7 +94,15 @@ SettingItem right: parent.right verticalCenter: parent.verticalCenter } - activeFocusOnTab: true + + Keys.onTabPressed: + { + base.setActiveFocusToNextSetting(true) + } + Keys.onBacktabPressed: + { + base.setActiveFocusToNextSetting(false) + } Keys.onReleased: { diff --git a/resources/qml/Settings/SettingView.qml b/resources/qml/Settings/SettingView.qml index c4477460e4..06e53cc03b 100644 --- a/resources/qml/Settings/SettingView.qml +++ b/resources/qml/Settings/SettingView.qml @@ -168,6 +168,8 @@ Item onVisibilityChanged: Cura.SettingInheritanceManager.forceUpdate() } + property var indexWithFocus: -1 + delegate: Loader { id: delegate @@ -300,11 +302,39 @@ Item } onFocusReceived: { + contents.indexWithFocus = index; animateContentY.from = contents.contentY; contents.positionViewAtIndex(index, ListView.Contain); animateContentY.to = contents.contentY; animateContentY.running = true; } + onSetActiveFocusToNextSetting: + { + if(forward == undefined || forward) + { + contents.currentIndex = contents.indexWithFocus + 1; + while(contents.currentItem && contents.currentItem.height <= 0) + { + contents.currentIndex++; + } + if(contents.currentItem) + { + contents.currentItem.item.focusItem.forceActiveFocus(); + } + } + else + { + contents.currentIndex = contents.indexWithFocus - 1; + while(contents.currentItem && contents.currentItem.height <= 0) + { + contents.currentIndex--; + } + if(contents.currentItem) + { + contents.currentItem.item.focusItem.forceActiveFocus(); + } + } + } } }