Add action buttons toolbar and placeholder pages

.gitignore

@@ -1,4 +1,5 @@
 __pycache__
+.mypy_cache
 build
 dist
 *.egg-info

harmonyqml/ActionBar.qml

@@ -0,0 +1,36 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.4
+
+Row {
+    id: "root"
+    width: parent.width
+    height: 31
+    spacing: 0
+
+    ActionButton {
+        iconName: "home";
+        tooltip: "Home page"
+        targetPage: "HomePage"
+    }
+
+    ActionButton {
+        iconName: "add_account";
+        tooltip: "Add new account"
+        targetPage: "AddAccountPage"
+    }
+    ActionButton {
+        iconName: "add_room";
+        tooltip: "Create or join chat room"
+        targetPage: "AddRoomPage"
+    }
+    ActionButton {
+        iconName: "set_status";
+        tooltip: "Set status for all accounts"
+    }
+    ActionButton {
+        iconName: "settings";
+        tooltip: "Settings"
+        targetPage: "SettingsPage"
+    }
+}

harmonyqml/ActionButton.qml

@@ -0,0 +1,34 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.4
+
+ToolButton {
+    property string tooltip: ""
+    property string iconName: ""
+    property string targetPage: ""
+
+    id: "root"
+    width: parent.width / parent.children.length
+    height: parent.height
+    display: ToolButton.IconOnly
+    icon.source: "icons/" + iconName + ".svg"
+    background: Rectangle { color: "transparent" }
+
+    onClicked: { toolTip.hide(); pageStack.show_page(targetPage) }
+
+    ToolTip {
+        id: "toolTip"
+        text: tooltip
+        delay: Qt.styleHints.mousePressAndHoldInterval
+        visible: text ? toolTipZone.containsMouse : false
+    }
+    MouseArea {
+        id: toolTipZone
+        anchors.fill: parent
+        hoverEnabled: true
+        acceptedButtons: Qt.NoButton  // Make button receive clicks normally
+
+        onEntered: root.background.color = "#656565"
+        onExited: root.background.color = "transparent"
+    }
+}

harmonyqml/AddAccountPage.qml

@@ -0,0 +1,8 @@
+import QtQuick 2.7
+
+Rectangle {
+    PlainLabel {
+        anchors.centerIn: parent
+        text: "Add account page"
+    }
+}

harmonyqml/AddRoomPage.qml

@@ -0,0 +1,8 @@
+import QtQuick 2.7
+
+Rectangle {
+    PlainLabel {
+        anchors.centerIn: parent
+        text: "Add room page"
+    }
+}

harmonyqml/HomePage.qml

@@ -3,6 +3,6 @@ import QtQuick 2.7
 Rectangle {
     PlainLabel {
         anchors.centerIn: parent
-        text: "Placeholder home page"
+        text: "Home page"
     }
 }

harmonyqml/RoomPane.qml

@@ -8,9 +8,12 @@ Rectangle {
     Layout.fillHeight: true
     color: "gray"
 
-    ListView {
+    Column {
-        id: roomListView
         anchors.fill: parent
+        ListView {
+            width: parent.width
+            height: parent.height - actionBar.height
+            id: roomListView
             model: Backend.roomsModel
             delegate: RoomDelegate {}
             //highlight: Rectangle {color: "lightsteelblue"; radius: 5}
@@ -18,4 +21,7 @@ Rectangle {
             section.property: "account_id"
             section.delegate: AccountDelegate {}
         }
+
+        ActionBar { id: "actionBar" }
+    }
 }

harmonyqml/SettingsPage.qml

@@ -0,0 +1,8 @@
+import QtQuick 2.7
+
+Rectangle {
+    PlainLabel {
+        anchors.centerIn: parent
+        text: "Settings page"
+    }
+}

harmonyqml/UI.qml

@@ -8,6 +8,9 @@ RowLayout {
     RoomPane {}
 
     StackView {
+        function show_page(componentName) {
+            pageStack.replace(componentName + ".qml")
+        }
         function show_room(room_obj) {
             pageStack.replace("ChatPage.qml", { room: room_obj })
         }

harmonyqml/icons/add_account.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.822 18.096c-3.439-.794-6.64-1.49-5.09-4.418 4.72-8.912 1.251-13.678-3.732-13.678-5.082 0-8.464 4.949-3.732 13.678 1.597 2.945-1.725 3.641-5.09 4.418-3.073.71-3.188 2.236-3.178 4.904l.004 1h23.99l.004-.969c.012-2.688-.092-4.222-3.176-4.935z"/></svg>

harmonyqml/icons/add_room.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 1h-24v16.981h4v5.019l7-5.019h13z"/></svg>

harmonyqml/icons/home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 13v10h-6v-6h-6v6h-6v-10h-3l12-12 12 12h-3zm-1-5.907v-5.093h-3v2.093l3 3z"/></svg>

harmonyqml/icons/set_status.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.963 8.261c-.566-.585-.536-1.503.047-2.07l5.948-5.768c.291-.281.664-.423 1.035-.423.376 0 .75.146 1.035.44l-8.065 7.821zm-9.778 14.696c-.123.118-.185.277-.185.436 0 .333.271.607.607.607.152 0 .305-.057.423-.171l.999-.972-.845-.872-.999.972zm8.44-11.234l-3.419 3.314c-1.837 1.781-2.774 3.507-3.64 5.916l1.509 1.559c2.434-.79 4.187-1.673 6.024-3.455l3.418-3.315-3.892-4.019zm9.97-10.212l-8.806 8.54 4.436 4.579 8.806-8.538c.645-.626.969-1.458.969-2.291 0-2.784-3.373-4.261-5.405-2.29z"/></svg>

harmonyqml/icons/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z"/></svg>