introduce icon button, use it in maillistview

2 files changed, 64 insertions, 10 deletions

diff --git a/framework/qml/IconButton.qml b/framework/qml/IconButton.qml
new file mode 100644
index 00000000..13f817a0
--- /dev/null
+++ b/framework/qml/IconButton.qml
@@ -0,0 +1,54 @@
+/*
+ *  Copyright (C) 2017 Michael Bohlender, <michael.bohlender@kdemail.net>
+ *
+ *  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.4
+import QtQuick.Layouts 1.1
+import QtQuick.Templates 2.0 as T
+import org.kube.framework 1.0 as Kube
+
+T.Button {
+    id: root
+
+    property var iconName
+
+    width: Kube.Units.gridUnit + padding * 2
+    height: Kube.Units.gridUnit + padding * 2
+
+    padding: Kube.Units.smallSpacing
+
+    clip: true
+    hoverEnabled: true
+
+    background: Rectangle {
+        color: Kube.Colors.buttonColor
+
+        Rectangle {
+            anchors.fill: parent
+            visible: root.hovered || root.pressed
+            color: root.pressed ? Kube.Colors.textColor : Kube.Colors.viewBackgroundColor
+            opacity: 0.2
+        }
+    }
+
+    contentItem: Kube.Icon {
+        width: root.height - Kube.Units.smallSpacing * 2
+        height: width
+        iconName: root.iconName
+    }
+}
+
diff --git a/framework/qml/MailListView.qml b/framework/qml/MailListView.qml
index b7b09d61..a0921a6e 100644
--- a/framework/qml/MailListView.qml
+++ b/framework/qml/MailListView.qml
@@ -261,40 +261,40 @@ Item {
                     spacing: Kube.Units.smallSpacing
                     opacity: 0.7
 
-                    Kube.Button {
+                    Kube.IconButton {
                         id: readButton
-                        text: "r"
+                        iconName: Kube.Icons.markAsRead
                         visible: enabled
                         enabled: model.unread
                         onClicked: Kube.Fabric.postMessage(Kube.Messages.markAsRead, {"mail": model.mail})
                     }
-                    Kube.Button {
+                    Kube.IconButton {
                         id: unreadButton
-                        text: "u"
+                        iconName: Kube.Icons.markAsUnread
                         visible: enabled
                         enabled: !model.unread
                         onClicked: Kube.Fabric.postMessage(Kube.Messages.markAsUnread, {"mail": model.mail})
                     }
 
-                    Kube.Button {
+                    Kube.IconButton {
                         id: importantButton
-                        text: "i"
+                        iconName: Kube.Icons.markImportant
                         visible: enabled
                         enabled: !!model.mail
                         onClicked: Kube.Fabric.postMessage(Kube.Messages.toggleImportant, {"mail": model.mail, "important": model.important})
                     }
 
-                    Kube.Button {
+                    Kube.IconButton {
                         id: deleteButton
-                        text: "d"
+                        iconName: Kube.Icons.moveToTrash
                         visible: enabled
                         enabled: !!model.mail
                         onClicked: Kube.Fabric.postMessage(Kube.Messages.moveToTrash, {"mail": model.mail})
                     }
 
-                    Kube.Button {
+                    Kube.IconButton {
                         id: restoreButton
-                        text: "re"
+                        iconName: Kube.Icons.undo
                         visible: enabled
                         enabled: !!model.trash
                         onClicked: Kube.Fabric.postMessage(Kube.Messages.restoreFromTrash, {"mail": model.mail})