New pane theming

TODO.md

@@ -1,8 +1,13 @@
 # TODO
 
+- update glass theme
+- back/front buttons in small window
+- minimum sizes
+- filter
 - save/restore swipeview current rooms for accounts
 - lag when switching accounts
 - message delegate too tall
+- unread counts on accounts
 
 - fix escape keybinds (filter rooms, message selection)
 - if last room event is a membership change, it won't be visible in timeline

src/gui/MainPane/Account.qml

@@ -9,7 +9,7 @@ import "../Base/HTile"
 HTile {
     id: account
     implicitHeight: theme.baseElementsHeight
-    backgroundColor: theme.mainPane.listView.account.background
+    backgroundColor: theme.accountView.account.background
     padded: false
 
     contentItem: ContentRow {
@@ -28,7 +28,7 @@ HTile {
             color:
                 hovered ?
                 utils.nameColor(model.display_name || model.id.substring(1)) :
-                theme.mainPane.listView.account.name
+                theme.accountView.account.name
 
             Behavior on color { HColorAnimation {} }
         }

src/gui/MainPane/AccountView.qml

@@ -52,7 +52,7 @@ HSwipeView {
 
                     placeholderText: qsTr("Filter rooms")
                     backgroundColor:
-                        theme.mainPane.bottomBar.filterFieldBackground
+                        theme.accountView.bottomBar.filterFieldBackground
                     bordered: false
                     opacity: width >= 16 * theme.uiScale ? 1 : 0
 

src/gui/MainPane/AccountsBar.qml

@@ -13,7 +13,7 @@ HColumnLayout {
 
     HButton {
         id: settingsButton
-        backgroundColor: "transparent"
+        backgroundColor: theme.accountsBar.settingsButtonBackground
         icon.name: "settings"
         toolTip.text: qsTr("Open config folder")
 
@@ -30,7 +30,7 @@ HColumnLayout {
         delegate: HTileDelegate {
             id: tile
             width: accountList.width
-            backgroundColor: theme.mainPane.listView.account.background
+            backgroundColor: theme.accountsBar.accountList.account.background
             leftPadding: 0
             rightPadding: leftPadding
 
@@ -45,7 +45,7 @@ HColumnLayout {
                     mxc: model.avatar_url
                     // compact: account.compact
 
-                    radius: theme.mainPane.listView.account.avatarRadius
+                    radius: theme.accountsBar.accountList.account.avatarRadius
                 }
             }
 
@@ -64,13 +64,19 @@ HColumnLayout {
             sequences: window.settings.keys.goToNextAccount
             onActivated: accountView.incrementWrapIndex()
         }
+
+        Rectangle {
+            anchors.fill: parent
+            z: -100
+            color: theme.accountsBar.accountList.background
+        }
     }
 
     HButton {
         id: addAccountButton
         icon.name: "add-account"
         toolTip.text: qsTr("Add another account")
-        backgroundColor: theme.mainPane.bottomBar.settingsButtonBackground
+        backgroundColor: theme.accountsBar.addAccountButtonBackground
         onClicked: pageLoader.showPage("AddAccount/AddAccount")
 
         Layout.preferredHeight: theme.baseElementsHeight

src/gui/MainPane/MainPane.qml

@@ -7,7 +7,7 @@ import "../Base"
 HDrawer {
     id: mainPane
     saveName: "mainPane"
-    color: theme.mainPane.background
+    background: null
     // minimumSize: bottomBar.addAccountButton.width
 
     // property alias filter: bottomBar.roomFilter

src/gui/MainPane/Room.qml

@@ -9,13 +9,9 @@ import "../Base/HTile"
 
 HTileDelegate {
     id: room
-    backgroundColor: theme.mainPane.listView.room.background
+    backgroundColor: theme.accountView.roomList.room.background
     opacity:
-        model.left ? theme.mainPane.listView.room.leftRoomOpacity : 1
-
-    // topPadding: theme.spacing / (model.index === 0 ? 1 : 1.5)
-    // bottomPadding:
-    //     theme.spacing / (model.index === view.count - 1 ? 1 : 1.5)
+        model.left ? theme.accountView.roomList.room.leftRoomOpacity : 1
 
     contentItem: ContentRow {
         tile: room
@@ -29,8 +25,8 @@ HTileDelegate {
 
             radius:
                 mainPane.small ?
-                theme.mainPane.listView.room.collapsedAvatarRadius :
-                theme.mainPane.listView.room.avatarRadius
+                theme.accountView.roomList.room.collapsedAvatarRadius :
+                theme.accountView.roomList.room.avatarRadius
 
             Behavior on radius { HNumberAnimation {} }
         }
@@ -41,7 +37,7 @@ HTileDelegate {
 
                 TitleLabel {
                     text: model.display_name || qsTr("Empty room")
-                    color: theme.mainPane.listView.room.name
+                    color: theme.accountView.roomList.room.name
                 }
 
                 HLabel {
@@ -63,7 +59,7 @@ HTileDelegate {
                         radius: theme.radius / 4
 
                         readonly property QtObject indicatorTheme:
-                            theme.mainPane.listView.room.unreadIndicator
+                            theme.accountView.roomList.room.unreadIndicator
 
                         Behavior on color { HColorAnimation {} }
                     }
@@ -84,7 +80,7 @@ HTileDelegate {
 
                 TitleRightInfoLabel {
                     tile: room
-                    color: theme.mainPane.listView.room.lastEventDate
+                    color: theme.accountView.roomList.room.lastEventDate
                     text: {
                         model.last_event_date < new Date(1) ?
                         "" :
@@ -106,7 +102,7 @@ HTileDelegate {
 
             SubtitleLabel {
                 tile: room
-                color: theme.mainPane.listView.room.subtitle
+                color: theme.accountView.roomList.room.subtitle
                 textFormat: Text.StyledText
                 font.italic:
                     lastEvent && lastEvent.event_type === "RoomMessageEmote"
@@ -128,7 +124,8 @@ HTileDelegate {
                         lastEvent.sender_name, lastEvent.sender_id
                     ) + ": " + lastEvent.inline_content
 
-                    const subColor = theme.mainPane.listView.room.subtitleQuote
+                    const subColor =
+                        theme.accountView.roomList.room.subtitleQuote
 
                     return text.replace(
                         /< *span +class=['"]?quote['"]? *>(.+?)<\/ *span *>/g,

src/gui/MainPane/RoomList.qml

@@ -75,4 +75,10 @@ HListView {
                 wheel.accepted = false
         }
     }
+
+    Rectangle {
+        anchors.fill: parent
+        z: -100
+        color: theme.accountView.roomList.background
+    }
 }

src/themes/Midnight.qpl

@@ -43,10 +43,12 @@ colors:
     real opacity: 0.7
 
     color weakBackground:
-        hsluv(hue, bgSaturation, intensity * 2.5, opacity)
+        hsluv(hue, bgSaturation, intensity * 10, opacity)
     color mediumBackground:
-        hsluv(hue, bgSaturation, intensity * 7, opacity)
+        hsluv(hue, bgSaturation, intensity * 8, opacity)
     color strongBackground:
+        hsluv(hue, bgSaturation, intensity * 3, opacity)
+    color strongerBackground:
         hsluv(hue, bgSaturation * 2, intensity, opacity)
 
     color accentBackground:    hsluv(hue, saturation, intensity * 40, 1)
@@ -272,23 +274,25 @@ ui:
     // color gradientEndColor: hsluv(0, 0, 0, 0.5)
 
 
-mainPane:
-    color background: "transparent"
+accountsBar:
+    color settingsButtonBackground: colors.strongerBackground
+    color addAccountButtonBackground: colors.strongerBackground
 
-    topBar:
-        color background:       colors.strongBackground
-        color nameVersionLabel: colors.text
-
-    listView:
-        color background: colors.mediumBackground
+    accountList:
+        color background: colors.strongerBackground
 
         account:
-            real collapsedOpacity:     0.3
             color background: "transparent"
+            int avatarRadius: controls.avatar.radius
+
+
+accountView:
+    account:
+        color background: colors.strongBackground
         color name:       colors.text
 
-            int avatarRadius:          controls.avatar.radius
-            int collapsedAvatarRadius: controls.avatar.size / 2
+    roomList:
+        color background: colors.mediumBackground
 
         room:
             real leftRoomOpacity: 0.65
@@ -308,9 +312,7 @@ mainPane:
                 color mentionBackground: colors.alertBackground
 
     bottomBar:
-        color background:               colors.strongBackground
-        color settingsButtonBackground: "transparent"
-        color filterFieldBackground:    "transparent"
+        color filterFieldBackground: colors.strongBackground
 
 
 chat:
@@ -367,8 +369,8 @@ chat:
         color focusedHighlight:       colors.accentBackground
         real focusedHighlightOpacity: 0.4
 
-        color background:        colors.weakBackground
-        color ownBackground:     colors.mediumBackground
+        color background:        colors.mediumBackground
+        color ownBackground:     colors.strongBackground
         color checkedBackground: colors.accentBackground
 
         color body: colors.text