3 files changed, 51 insertions, 28 deletions

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, <bohlender@kolabsys.com>
+ *  Copyright (C) 2017 Christian Mollekopf, <mollekopf@kolabsys.com>
+ *
+ *  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
                     }
                 }