From 6a607fbe1523687ad106100dfa25ba9eeeaf8f13 Mon Sep 17 00:00:00 2001
From: Christian Mollekopf <chrigi_1@fastmail.fm>
Date: Tue, 25 Jul 2017 01:02:20 +0200
Subject: Standardized focus highlighting via AbstractButton for PositiveButton
 and Button

---
 framework/qml/AbstractButton.qml | 38 +++++++++++++++++++++++++++++--------
 framework/qml/Button.qml         | 38 +------------------------------------
 framework/qml/PositiveButton.qml | 41 +++-------------------------------------
 3 files changed, 34 insertions(+), 83 deletions(-)

(limited to 'framework')

diff --git a/framework/qml/AbstractButton.qml b/framework/qml/AbstractButton.qml
index a92ab5df..194812da 100644
--- a/framework/qml/AbstractButton.qml
+++ b/framework/qml/AbstractButton.qml
@@ -25,27 +25,49 @@ T.Button {
     id: root
 
     width: Math.max(Units.gridUnit, contentItem.implicitWidth + leftPadding + rightPadding)
-    height: contentItem.implicitHeight + Units.smallSpacing * 2
+    height: contentItem.implicitHeight + topPadding + bottomPadding
 
     padding: Units.largeSpacing
-    topPadding: Units.smallSpacing * 2
-    bottomPadding: Units.smallSpacing *2
+    topPadding: Units.smallSpacing
+    bottomPadding: Units.smallSpacing
 
     clip: true
     hoverEnabled: true
     Keys.onReturnPressed: root.clicked()
 
+    property color color: Colors.buttonColor
+    property color textColor: Colors.textColor
+
     background: Rectangle {
-        color: Colors.buttonColor
+        color: root.color
+
+        Rectangle {
+            anchors.fill: parent
+            visible: root.checked
+            color: Colors.highlightColor
+        }
 
-        border.width: 2
-        border.color:  root.activeFocus && !root.pressed ? Colors.highlightColor : Colors.buttonColor
+        Rectangle {
+            anchors.fill: parent
+            visible: root.hovered || root.visualFocus
+            color: "transparent"
+            border.width: 2
+            border.color: Colors.focusedButtonColor
+        }
 
         Rectangle {
             anchors.fill: parent
-            visible: root.hovered || root.pressed
-            color: root.pressed ? Colors.textColor : Colors.viewBackgroundColor
+            visible: root.pressed
+            color: Colors.textColor
             opacity: 0.2
         }
     }
+
+    contentItem: Label {
+        text: root.text
+        elide: Text.ElideRight
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        color: root.textColor
+    }
 }
diff --git a/framework/qml/Button.qml b/framework/qml/Button.qml
index 80b7451a..f3251f4f 100644
--- a/framework/qml/Button.qml
+++ b/framework/qml/Button.qml
@@ -16,43 +16,7 @@
  *  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
  */
 
-import QtQuick 2.7
-import QtQuick.Templates 2.0 as T
 import org.kube.framework 1.0
 
-T.Button {
-    id: root
-
-    width: Math.max(Units.gridUnit, contentItem.implicitWidth + leftPadding + rightPadding)
-    height: contentItem.implicitHeight + Units.smallSpacing * 2
-
-    padding: Units.largeSpacing
-    topPadding: Units.smallSpacing * 2
-    bottomPadding: Units.smallSpacing *2
-
-    clip: true
-    hoverEnabled: true
-    Keys.onReturnPressed: root.clicked()
-
-    background: Rectangle {
-        color: Colors.buttonColor
-
-        border.width: 2
-        border.color:  root.activeFocus && !root.pressed ? Colors.highlightColor : Colors.buttonColor
-
-        Rectangle {
-            anchors.fill: parent
-            visible: root.hovered || root.pressed
-            color: root.pressed ? Colors.textColor : Colors.viewBackgroundColor
-            opacity: 0.2
-        }
-    }
-
-    contentItem: Label {
-        text: root.text
-        font.underline: root.activeFocus
-        elide: Text.ElideRight
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-    }
+AbstractButton {
 }
diff --git a/framework/qml/PositiveButton.qml b/framework/qml/PositiveButton.qml
index a3b68d26..32bd7508 100644
--- a/framework/qml/PositiveButton.qml
+++ b/framework/qml/PositiveButton.qml
@@ -16,44 +16,9 @@
  *  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
  */
 
-import QtQuick 2.7
-import QtQuick.Templates 2.0 as T
 import org.kube.framework 1.0
 
-T.Button {
-    id: root
-
-    width: Math.max(Units.gridUnit, contentItem.implicitWidth + leftPadding + rightPadding)
-    height: contentItem.implicitHeight + Units.smallSpacing * 2
-
-    padding: Units.largeSpacing
-    topPadding: Units.smallSpacing * 2
-    bottomPadding: Units.smallSpacing *2
-
-    clip: true
-    hoverEnabled: true
-    Keys.onReturnPressed: root.clicked()
-
-    background: Rectangle {
-        color: Colors.positiveColor
-
-        border.width: 2
-        border.color: root.visualFocus && !root.pressed ? Colors.highlightColor : Colors.positiveColor
-
-        Rectangle {
-            anchors.fill: parent
-            visible: root.hovered || root.pressed
-            color: root.pressed ? Colors.textColor : Colors.viewBackgroundColor
-            opacity: 0.2
-        }
-    }
-
-    contentItem: Label {
-        text: root.text
-        font.underline: root.activeFocus
-        elide: Text.ElideRight
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-        color: Colors.highlightedTextColor
-    }
+AbstractButton {
+    color: Colors.positiveColor
+    textColor: Colors.highlightedTextColor
 }
-- 
cgit v1.2.3