From 5512fab518bc47ac1d1a2d4d2b9e3873a5a387b7 Mon Sep 17 00:00:00 2001 From: Christian Mollekopf Date: Wed, 26 Jul 2017 12:34:08 -0600 Subject: Single background element to handle focus vs selected. And we're experimenting with only using a border when selected, and highlight otherwise. --- framework/qml/DelegateBackground.qml | 45 ++++++++++++++++++++++++++++++++++++ framework/qml/ListDelegate.qml | 16 +++---------- framework/qml/TreeView.qml | 18 +++------------ framework/qmldir | 1 + 4 files changed, 52 insertions(+), 28 deletions(-) create mode 100644 framework/qml/DelegateBackground.qml diff --git a/framework/qml/DelegateBackground.qml b/framework/qml/DelegateBackground.qml new file mode 100644 index 00000000..190c4803 --- /dev/null +++ b/framework/qml/DelegateBackground.qml @@ -0,0 +1,45 @@ +/* + * Copyright (C) 2017 Michael Bohlender, + * Copyright (C) 2017 Christian Mollekopf, + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 2 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License along + * with this program; if not, write to the Free Software Foundation, Inc., + * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ + +import QtQuick 2.7 +import org.kube.framework 1.0 as Kube + +Rectangle { + id: root + property bool focused: false + property bool selected: false + Rectangle { + anchors.fill: parent + visible: root.selected + color: Kube.Colors.highlightColor + } + Rectangle { + anchors.fill: parent + visible: root.focused && !root.selected + color: Kube.Colors.highlightColor + opacity: 0.4 + } + Rectangle { + anchors.fill: parent + visible: root.focused && root.selected + border.color: Kube.Colors.focusedButtonColor + border.width: 2 + color: "transparent" + } +} diff --git a/framework/qml/ListDelegate.qml b/framework/qml/ListDelegate.qml index 3db56ff3..fd654e4c 100644 --- a/framework/qml/ListDelegate.qml +++ b/framework/qml/ListDelegate.qml @@ -33,22 +33,12 @@ T.ItemDelegate { hoverEnabled: true highlighted: ListView.isCurrentItem - background: Rectangle { + background: Kube.DelegateBackground { id: background border.color: Kube.Colors.buttonColor border.width: 1 color: Kube.Colors.viewBackgroundColor - Rectangle { - anchors.fill: parent - visible: root.highlighted - color: Kube.Colors.highlightColor - } - Rectangle { - anchors.fill: parent - visible: root.hovered || root.activeFocus - border.color: Kube.Colors.focusedButtonColor - border.width: 2 - color: "transparent" - } + focused: root.hovered || root.activeFocus + selected: root.highlighted } } diff --git a/framework/qml/TreeView.qml b/framework/qml/TreeView.qml index ab3367bb..6063d8c1 100644 --- a/framework/qml/TreeView.qml +++ b/framework/qml/TreeView.qml @@ -169,23 +169,11 @@ FocusScope { width: parent.parent.parent ? parent.parent.parent.width : 0 focus: false hoverEnabled: true - Rectangle { + Kube.DelegateBackground { anchors.fill: parent - color: Kube.Colors.textColor - - Rectangle { - anchors.fill: parent - color: Kube.Colors.highlightColor - visible: isActive - } - Rectangle { - anchors.fill: parent - border.width: 2 - border.color: Kube.Colors.focusedButtonColor - color: "transparent" - visible: styleData.selected || delegateRoot.hovered - } + focused: styleData.selected || delegateRoot.hovered + selected: isActive } } diff --git a/framework/qmldir b/framework/qmldir index 83fc8d61..93f0fc59 100644 --- a/framework/qmldir +++ b/framework/qmldir @@ -30,6 +30,7 @@ Heading 1.0 Heading.qml View 1.0 View.qml AutocompleteLineEdit 1.0 AutocompleteLineEdit.qml AttachmentDelegate 1.0 AttachmentDelegate.qml +DelegateBackground 1.0 DelegateBackground.qml ListView 1.0 ListView.qml ListDelegate 1.0 ListDelegate.qml TreeView 1.0 TreeView.qml -- cgit v1.2.3