Make it possible to show flat tool buttons on the UI

4 files changed, 76 insertions, 11 deletions

diff --git a/discover/qml/Breadcrumbs.qml b/discover/qml/Breadcrumbs.qml
index abf9e9a..f941807 100644
--- a/discover/qml/Breadcrumbs.qml
+++ b/discover/qml/Breadcrumbs.qml
@@ -20,6 +20,7 @@
 import QtQuick 2.1
 import QtQuick.Controls 1.0
 import QtQuick.Layouts 1.0
+import org.kde.kquickcontrolsaddons 2.0
 
 Item {
     id: bread
@@ -45,18 +46,26 @@ Item {
         Repeater
         {
             model: bread.pageStack.depth
-            delegate: Button {
-                Layout.fillHeight: true
-                Layout.minimumWidth: height //workaround bug in the plasma style
-                Layout.minimumHeight: implicitHeight
+            delegate: RowLayout {
+                spacing: 0
+                QIconItem {
+                    visible: index > 0
+                    width: 16
+                    height: width
+                    icon: "arrow-right"
+                }
+                MuonToolButton {
+                    Layout.fillHeight: true
+                    Layout.minimumHeight: implicitHeight
 
-                property var currentPage: bread.pageStack.get(modelData, false)
+                    property var currentPage: bread.pageStack.get(modelData, false)
 
-                iconName: currentPage.icon
-                onClicked: doClick(index)
-                text: currentPage.title
-                enabled: bread.pageStack.depth!=(modelData+1)
-                checkable: checked
+                    iconName: currentPage.icon
+                    onClicked: doClick(index)
+                    text: currentPage.title
+                    enabled: bread.pageStack.depth!=(modelData+1)
+                    checkable: checked
+                }
             }
         }
     }
diff --git a/discover/qml/MuonToolButton.qml b/discover/qml/MuonToolButton.qml
new file mode 100644
index 0000000..ac918bc
--- /dev/null
+++ b/discover/qml/MuonToolButton.qml
@@ -0,0 +1,55 @@
+import QtQuick 2.5
+import QtQuick.Controls 1.1
+import QtQuick.Layouts 1.1
+import org.kde.kquickcontrolsaddons 2.0
+
+/**
+ * The reason for this shitty component is that it isn't possible to have QtQuick.Controls.ToolButton
+ * show both text and icon.
+ */
+
+Item
+{
+    id: root
+    property alias text: label.text
+    property alias iconName: icon.icon
+    property alias tooltip: button.tooltip
+    property alias checkable: button.checkable
+    property alias checked: button.checked
+    property alias exclusiveGroup: button.exclusiveGroup
+    Layout.minimumWidth: layout.Layout.minimumWidth
+    implicitHeight: layout.Layout.preferredHeight
+
+    clip: true
+
+    signal clicked()
+
+    ToolButton {
+        id: button
+        anchors.fill: parent
+        enabled: root.enabled
+        onClicked: { root.clicked() }
+
+        RowLayout {
+            id: layout
+            anchors {
+                fill: parent
+                margins: 3
+            }
+
+            Layout.preferredHeight: 32
+            QIconItem {
+                id: icon
+                Layout.alignment: Qt.AlignVCenter
+                anchors.verticalCenter: parent.verticalCenter
+                Layout.minimumWidth: layout.Layout.preferredHeight*0.8
+                height: Layout.minimumWidth
+            }
+            Label {
+                id: label
+                Layout.fillWidth: true
+                Layout.minimumWidth: text == "" ? 0 : (10+label.implicitWidth)
+            }
+        }
+    }
+}
diff --git a/discover/qml/MuonToolbar.qml b/discover/qml/MuonToolbar.qml
index 0047fdf..49a1dec 100644
--- a/discover/qml/MuonToolbar.qml
+++ b/discover/qml/MuonToolbar.qml
@@ -65,7 +65,7 @@ ToolBar
 
             Repeater {
                 model: window.awesome
-                delegate: Button {
+                delegate: MuonToolButton {
                     enabled: modelData.enabled
                     checkable: modelData.checkable
                     checked: modelData.checked
diff --git a/discover/resources.qrc b/discover/resources.qrc
index 41b3803..93c3cb8 100644
--- a/discover/resources.qrc
+++ b/discover/resources.qrc
@@ -36,6 +36,7 @@
     <file>qml/MessageAction.qml</file>
     <file>qml/ConditionalLoader.qml</file>
     <file>qml/MuonToolbar.qml</file>
+    <file>qml/MuonToolButton.qml</file>
     <file>qml/ApplicationDetails.qml</file>
     <file>qml/ApplicationScreenshots.qml</file>
     <file>qml/ApplicationIndicator.qml</file>