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,10 +13,15 @@ Column {
 
     property bool expanded: true
 
-    HRowLayout {
+    HHighlightRectangle {
         width: parent.width
         height: childrenRect.height
+
+        normalColor: theme.sidePane.account.background
+
+        HRowLayout {
             id: row
+            width: parent.width
 
             HUserAvatar {
                 id: avatar
@@ -34,7 +39,7 @@ Column {
                     elide: HLabel.ElideRight
                     maximumLineCount: 1
                     Layout.fillWidth: true
-                leftPadding: 6
+                    leftPadding: sidePane.currentSpacing
                     rightPadding: leftPadding
                 }
 
@@ -58,10 +63,12 @@ Column {
             }
 
             ExpandButton {
+                id: expandButton
                 expandableItem: accountDelegate
                 Layout.preferredHeight: row.height
             }
         }
+    }
 
     RoomCategoriesList {
         id: roomCategoriesList

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,22 +1,31 @@
 // 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
+        )
+    }
+
+    Row {
+        width: parent.width - sidePane.currentSpacing * 2
+        padding: sidePane.currentSpacing / 2
+        leftPadding: sidePane.currentSpacing
+        rightPadding: 0
 
         HRowLayout {
             width: parent.width
-        spacing: sidePane.collapsed ? 0 : sidePane.normalSpacing
+            spacing: sidePane.currentSpacing
 
             HRoomAvatar {
                 id: roomAvatar
@@ -31,7 +40,8 @@ MouseArea {
                 HLabel {
                     id: roomLabel
                     text: model.displayName || "<i>Empty room</i>"
-                textFormat: model.displayName? Text.PlainText : Text.StyledText
+                    textFormat:
+                        model.displayName? Text.PlainText : Text.StyledText
                     elide: Text.ElideRight
                     maximumLineCount: 1
                     verticalAlignment: Qt.AlignVCenter
@@ -69,4 +79,5 @@ MouseArea {
                 }
             }
         }
+    }
 }

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 }