highlight current active account

1 files changed, 28 insertions, 17 deletions

diff --git a/components/kube/contents/ui/AccountsView.qml b/components/kube/contents/ui/AccountsView.qml
index b5d8d575..556e4b53 100644
--- a/components/kube/contents/ui/AccountsView.qml
+++ b/components/kube/contents/ui/AccountsView.qml
@@ -22,6 +22,8 @@ import QtQuick.Controls 1.3 as Controls
 import org.kube.framework 1.0 as Kube
 import org.kube.components.accounts 1.0 as KubeAccounts
 
+import QtQuick.Templates 2.0 as T
+
 Rectangle {
     color: Kube.Colors.backgroundColor
 
@@ -64,31 +66,40 @@ Rectangle {
 
                 model: Kube.AccountsModel {}
 
-                delegate: Rectangle {
+                delegate: T.ItemDelegate {
+                    id: delegateRoot
+
                     height: Kube.Units.gridUnit * 3
                     width: listView.width
 
-                    border.color: Kube.Colors.buttonColor
-                    border.width: 1
-                    color: Kube.Colors.viewBackgroundColor
+                    onClicked: {
+                        edit.accountId = model.accountId
+                    }
 
-                    Kube.Label {
-                        anchors {
-                            verticalCenter: parent.verticalCenter
-                            left: parent.left
-                            leftMargin: Kube.Units.largeSpacing
+                    contentItem: Item {
+                        Kube.Label {
+                            anchors {
+                                verticalCenter: parent.verticalCenter
+                                left: parent.left
+                                leftMargin: Kube.Units.largeSpacing
+                            }
+                            width: parent.width - Kube.Units.largeSpacing * 2
+
+                            text: model.name
+                            color: edit.accountId == model.accountId ? Kube.Colors.highlightedTextColor : Kube.Colors.textColor
                         }
-                        width: parent.width - Kube.Units.largeSpacing * 2
-
-                        text: model.name
                     }
 
-                    MouseArea {
-                        id: mouseArea
-                        anchors.fill: parent
+                    background: Rectangle {
+                        border.color: Kube.Colors.buttonColor
+                        border.width: 1
+                        color: Kube.Colors.viewBackgroundColor
 
-                        onClicked: {
-                            edit.accountId = model.accountId
+                        Rectangle {
+                            width: parent.width
+                            height: parent.height
+                            visible: edit.accountId == model.accountId
+                            color: Kube.Colors.highlightColor
                         }
                     }
                 }