Highlight account and room delegates

TODO.md

@@ -1,3 +1,11 @@
+- Qt 5.12
+  - New input handlers
+  - ECMAScript 7
+  - .mjs modules
+  - inset properties
+  - `ToolTip.hide()`/`show()`
+  - horizontal & vertical padding props
+
 - Refactoring
   - Don't bake in size properties for components
 

src/qml/Base/HAvatar.qml

@@ -6,7 +6,7 @@ import QtQuick.Controls 2.0
 import "../Base"
 import "../utils.js" as Utils
 
-Rectangle {
+HRectangle {
     property string name: ""
     property var imageUrl: null
     property var toolTipImageUrl: imageUrl

src/qml/Base/HHighlightRectangle.qml

@@ -0,0 +1,26 @@
+// Copyright 2019 miruka
+// This file is part of harmonyqml, licensed under LGPLv3.
+
+import QtQuick 2.12
+
+HRectangle {
+    property bool checkable: false  // TODO
+    property bool checked: false
+
+    property color normalColor: theme.controls.listEntry.background
+    property color hoveredColor: theme.controls.listEntry.hoveredBackground
+    property color pressedColor: theme.controls.listEntry.pressedBackground
+    property color checkedColor: theme.controls.listEntry.checkedBackground
+
+    color: checked ? checkedColor :
+           // tap.pressed ? pressedColor :
+           hover.hovered ? hoveredColor :
+           normalColor
+
+    Behavior on color {
+        ColorAnimation { duration: theme.animationDuration / 1.5 }
+    }
+
+    HoverHandler { id: hover }
+    TapHandler { id: tap }
+}

src/qml/Base/HRichLabel.qml

@@ -24,11 +24,5 @@ HLabel {
             mouse.accepted = Boolean(link)
             if (link) { Qt.openUrlExternally(link) }
         }
-
-        onPressAndHold: mouse.accepted = false
-        onDoubleClicked: mouse.accepted = false
-        onPressed: mouse.accepted = false
-        onReleased: mouse.accepted = false
-        onWheel: mouse.accepted = false
     }
 }

src/qml/SidePane/AccountDelegate.qml

@@ -13,53 +13,60 @@ Column {
 
     property bool expanded: true
 
-    HRowLayout {
+    HHighlightRectangle {
         width: parent.width
         height: childrenRect.height
-        id: row
 
-        HUserAvatar {
+        normalColor: theme.sidePane.account.background
-            id: avatar
-            // Need to do this because conflict with the model property
-            Component.onCompleted: userId = model.userId
-        }
 
-        HColumnLayout {
+        HRowLayout {
-            Layout.fillWidth: true
+            id: row
-            Layout.fillHeight: true
+            width: parent.width
 
-            HLabel {
+            HUserAvatar {
-                id: accountLabel
+                id: avatar
-                text: userInfo.displayName || model.userId
+                // Need to do this because conflict with the model property
-                elide: HLabel.ElideRight
+                Component.onCompleted: userId = model.userId
-                maximumLineCount: 1
-                Layout.fillWidth: true
-                leftPadding: 6
-                rightPadding: leftPadding
             }
 
-            HTextField {
+            HColumnLayout {
-                id: statusEdit
-                text: userInfo.statusMessage
-                placeholderText: qsTr("Set status message")
-                font.pixelSize: theme.fontSize.small
-                background: null
-
-                padding: 0
-                leftPadding: accountLabel.leftPadding
-                rightPadding: leftPadding
                 Layout.fillWidth: true
+                Layout.fillHeight: true
 
-                onEditingFinished: {
+                HLabel {
-                    //Backend.setStatusMessage(model.userId, text)  TODO
+                    id: accountLabel
-                    pageStack.forceActiveFocus()
+                    text: userInfo.displayName || model.userId
+                    elide: HLabel.ElideRight
+                    maximumLineCount: 1
+                    Layout.fillWidth: true
+                    leftPadding: sidePane.currentSpacing
+                    rightPadding: leftPadding
+                }
+
+                HTextField {
+                    id: statusEdit
+                    text: userInfo.statusMessage
+                    placeholderText: qsTr("Set status message")
+                    font.pixelSize: theme.fontSize.small
+                    background: null
+
+                    padding: 0
+                    leftPadding: accountLabel.leftPadding
+                    rightPadding: leftPadding
+                    Layout.fillWidth: true
+
+                    onEditingFinished: {
+                        //Backend.setStatusMessage(model.userId, text)  TODO
+                        pageStack.forceActiveFocus()
+                    }
                 }
             }
-        }
 
-        ExpandButton {
+            ExpandButton {
-            expandableItem: accountDelegate
+                id: expandButton
-            Layout.preferredHeight: row.height
+                expandableItem: accountDelegate
+                Layout.preferredHeight: row.height
+            }
         }
     }
 

src/qml/SidePane/RoomCategoryDelegate.qml

@@ -30,6 +30,7 @@ Column {
             elide: Text.ElideRight
             maximumLineCount: 1
 
+            Layout.leftMargin: sidePane.currentSpacing
             Layout.fillWidth: true
         }
 

src/qml/SidePane/RoomDelegate.qml

@@ -1,71 +1,82 @@
 // Copyright 2019 miruka
 // This file is part of harmonyqml, licensed under LGPLv3.
 
-import QtQuick 2.7
+import QtQuick 2.12
 import QtQuick.Layouts 1.3
 import "../Base"
 import "../utils.js" as Utils
 
-MouseArea {
+HHighlightRectangle {
     id: roomDelegate
     width: roomList.width
     height: childrenRect.height
 
-    onClicked:
+    TapHandler {
-        pageStack.showRoom(roomList.userId, roomList.category, model.roomId)
+        onTapped: pageStack.showRoom(
+            roomList.userId, roomList.category, model.roomId
+        )
+    }
 
-    HRowLayout {
+    Row {
-        width: parent.width
+        width: parent.width - sidePane.currentSpacing * 2
-        spacing: sidePane.collapsed ? 0 : sidePane.normalSpacing
+        padding: sidePane.currentSpacing / 2
+        leftPadding: sidePane.currentSpacing
+        rightPadding: 0
 
-        HRoomAvatar {
+        HRowLayout {
-            id: roomAvatar
+            width: parent.width
-            roomId: model.roomId
+            spacing: sidePane.currentSpacing
-        }
 
-        HColumnLayout {
+            HRoomAvatar {
-            Layout.fillWidth: true
+                id: roomAvatar
-            Layout.maximumWidth:
+                roomId: model.roomId
-                parent.width - parent.totalSpacing - roomAvatar.width
-
-            HLabel {
-                id: roomLabel
-                text: model.displayName || "<i>Empty room</i>"
-                textFormat: model.displayName? Text.PlainText : Text.StyledText
-                elide: Text.ElideRight
-                maximumLineCount: 1
-                verticalAlignment: Qt.AlignVCenter
-
-                Layout.maximumWidth: parent.width
             }
 
-            HRichLabel {
+            HColumnLayout {
-                function getText(ev) {
+                Layout.fillWidth: true
-                    if (! ev) { return "" }
+                Layout.maximumWidth:
+                    parent.width - parent.totalSpacing - roomAvatar.width
 
-                    if (! Utils.eventIsMessage(ev)) {
+                HLabel {
-                        return Utils.translatedEventContent(ev)
+                    id: roomLabel
-                    }
+                    text: model.displayName || "<i>Empty room</i>"
+                    textFormat:
+                        model.displayName? Text.PlainText : Text.StyledText
+                    elide: Text.ElideRight
+                    maximumLineCount: 1
+                    verticalAlignment: Qt.AlignVCenter
 
-                    return Utils.coloredNameHtml(
+                    Layout.maximumWidth: parent.width
-                        users.find(ev.senderId).displayName,
-                        ev.senderId
-                    ) + ": " + py.callSync("inlinify", [ev.content])
                 }
 
-                // Have to do it like this to avoid binding loop
+                HRichLabel {
-                property var lastEv: timelines.lastEventOf(model.roomId)
+                    function getText(ev) {
-                onLastEvChanged: text = getText(lastEv)
+                        if (! ev) { return "" }
 
-                id: subtitleLabel
+                        if (! Utils.eventIsMessage(ev)) {
-                visible: Boolean(text)
+                            return Utils.translatedEventContent(ev)
-                textFormat: Text.StyledText
+                        }
 
-                font.pixelSize: theme.fontSize.small
+                        return Utils.coloredNameHtml(
-                elide: Text.ElideRight
+                            users.find(ev.senderId).displayName,
-                maximumLineCount: 1
+                            ev.senderId
+                        ) + ": " + py.callSync("inlinify", [ev.content])
+                    }
 
-                Layout.maximumWidth: parent.width
+                    // Have to do it like this to avoid binding loop
+                    property var lastEv: timelines.lastEventOf(model.roomId)
+                    onLastEvChanged: text = getText(lastEv)
+
+                    id: subtitleLabel
+                    visible: Boolean(text)
+                    textFormat: Text.StyledText
+
+                    font.pixelSize: theme.fontSize.small
+                    elide: Text.ElideRight
+                    maximumLineCount: 1
+
+                    Layout.maximumWidth: parent.width
+                }
             }
         }
     }

src/qml/SidePane/RoomList.qml

@@ -8,12 +8,11 @@ import "../Base"
 import "../utils.js" as Utils
 
 HListView {
+    id: roomList
+
     property string userId: ""
     property string category: ""
 
-    id: roomList
-    spacing: sidePane.collapsed ? 0 : sidePane.normalSpacing
-
     model: SortFilterProxyModel {
         sourceModel: rooms
         filters: AllOf {

src/qml/SidePane/SidePane.qml

@@ -12,6 +12,7 @@ HRectangle {
     clip: true
 
     property int normalSpacing: 8
+    property int currentSpacing: collapsed ? 0 : normalSpacing
     property bool collapsed: false
 
     HColumnLayout {
@@ -21,10 +22,8 @@ HRectangle {
             Layout.fillWidth: true
             Layout.fillHeight: true
 
-            spacing: collapsed ? 0 : normalSpacing * 3
+            spacing: currentSpacing
-            topMargin: collapsed ? 0 : normalSpacing
+            bottomMargin: currentSpacing
-            bottomMargin: topMargin
-            Layout.leftMargin: topMargin
 
             Behavior on spacing { HNumberAnimation {} }
         }

src/qml/Theme.qml

@@ -41,6 +41,13 @@ QtObject {
             property color background: colors.background2
         }
 
+        property QtObject listEntry: QtObject {
+            property color background: "transparent"
+            property color hoveredBackground: Qt.hsla(0, 0, 0, 0.2)
+            property color pressedBackground: Qt.hsla(0, 0, 0, 0.4)
+            property color checkedBackground: Qt.hsla(0, 0, 0, 0.4)
+        }
+
         property QtObject textField: QtObject {
             property color background: colors.background2
         }
@@ -53,6 +60,10 @@ QtObject {
     property QtObject sidePane: QtObject {
         property color background: colors.background2
 
+        property QtObject account: QtObject {
+            property color background: Qt.lighter(colors.background2, 1.05)
+        }
+
         property QtObject settingsButton: QtObject {
             property color background: colors.background2
         }

src/qml/Window.qml

@@ -28,6 +28,7 @@ ApplicationWindow {
 
     Python { id: py }
 
+    // Models
     Accounts       { id: accounts }
     Devices        { id: devices }
     RoomCategories { id: roomCategories }