Use Base components without namespace prefix

TODO.md

@@ -6,9 +6,9 @@
   - 100% CPU usage when hitting top edge to trigger messages loading
   - Sending `![A picture](https://picsum.photos/256/256)` → not clickable?
   - Icons aren't reloaded
-  - Bug when resizing window being tiled (i3), can't figure it out
   - HStyle singleton isn't reloaded
   - `MessageDelegate.qml:63: TypeError: 'reloadPreviousItem' not a function`
+  - Bug when resizing window being tiled (i3), can't figure it out
 
 - UI
   - Use nested listview for categories instead of section property
@@ -17,17 +17,13 @@
   - Scaling
     - See [Text.fontSizeMode](https://doc.qt.io/qt-5/qml-qtquick-text.html#fontSizeMode-prop)
   - Test HGlassRectangle elements when no effects are available
+  - Add room
   - Leave room
   - Forget room warning popup
-  - Use HRowLayout and its totalSpacing wherever possible
   - Spacer component
-  - One line label componant
-  - Proper button background componant
-  - Collapsible roomList sections, + button
   - Prevent using the SendBox if no permission (power levels)
   - Spinner when loading past room events, images or clicking buttons
-  - Reorganize SidePane
+  - Better theming/styling system
-  - Proper theme, with components taking their colors from theme settings
   - Settings page
     - Multiaccount aliases
 
@@ -69,4 +65,4 @@
 
 - Distribution
   - Review setup.py, add dependencies
-  - REAMDE.md
+  - README.md

harmonyqml/components/Base/HAvatar.qml

@@ -1,7 +1,7 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.4
-import "../Base" as Base
+import "../Base"
 
 Rectangle {
     property bool hidden: false
@@ -23,12 +23,12 @@ Rectangle {
     opacity: hidden ? 0 : 1
 
     color: resolvedName === "?" ?
-           Base.HStyle.avatar.background.unknown :
+           HStyle.avatar.background.unknown :
            Qt.hsla(
                Backend.hueFromString(resolvedName),
-               Base.HStyle.avatar.background.saturation,
+               HStyle.avatar.background.saturation,
-               Base.HStyle.avatar.background.lightness,
+               HStyle.avatar.background.lightness,
-               Base.HStyle.avatar.background.alpha
+               HStyle.avatar.background.alpha
             )
 
     HLabel {
@@ -37,7 +37,7 @@ Rectangle {
         visible: ! hidden
 
         text: resolvedName.charAt(0)
-        color: Base.HStyle.avatar.letter
+        color: HStyle.avatar.letter
         font.pixelSize: parent.height / 1.4
     }
 

harmonyqml/components/Base/HNoticeLabel.qml

@@ -1,16 +1,16 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
-import "../Base" as Base
+import "../Base"
 
-Base.HRowLayout {
+HRowLayout {
     property alias text: noticeLabel.text
     property alias color: noticeLabel.color
     property alias font: noticeLabel.font
     property alias backgroundColor: noticeLabelBackground.color
     property alias radius: noticeLabelBackground.radius
 
-    Base.HLabel {
+    HLabel {
         id: noticeLabel
         horizontalAlignment: Text.AlignHCenter
         wrapMode: Text.Wrap
@@ -24,8 +24,8 @@ Base.HRowLayout {
 
         background: Rectangle {
             id: noticeLabelBackground
-            color: Base.HStyle.box.background
+            color: HStyle.box.background
-            radius: Base.HStyle.box.radius
+            radius: HStyle.box.radius
         }
     }
 }

harmonyqml/components/Chat/Banners/Banner.qml

@@ -1,9 +1,9 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
-import "../../Base" as Base
+import "../../Base"
 
-Base.HGlassRectangle {
+HGlassRectangle {
     id: banner
     Layout.fillWidth: true
     Layout.preferredHeight: 32
@@ -14,16 +14,16 @@ Base.HGlassRectangle {
     property alias buttonModel: bannerRepeater.model
     property var buttonCallbacks: []
 
-    Base.HRowLayout {
+    HRowLayout {
         id: bannerRow
         anchors.fill: parent
 
-        Base.HAvatar {
+        HAvatar {
             id: bannerAvatar
             dimension: banner.Layout.preferredHeight
         }
 
-        Base.HLabel {
+        HLabel {
             id: bannerLabel
             textFormat: Text.StyledText
             maximumLineCount: 1
@@ -43,7 +43,7 @@ Base.HGlassRectangle {
 
         Item { Layout.fillWidth: true }
 
-        Base.HRowLayout {
+        HRowLayout {
             id: bannerButtons
 
             function getButtonsWidth() {
@@ -68,7 +68,7 @@ Base.HGlassRectangle {
                 id: bannerRepeater
                 model: []
 
-                Base.HButton {
+                HButton {
                     id: button
                     text: modelData.text
                     iconName: modelData.iconName

harmonyqml/components/Chat/Banners/InviteBanner.qml

@@ -1,12 +1,12 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
-import "../../Base" as Base
+import "../../Base"
 
 Banner {
     property var inviter: null
 
-    color: Base.HStyle.chat.inviteBanner.background
+    color: HStyle.chat.inviteBanner.background
 
     avatarName: inviter ? inviter.displayname : ""
     //avatarSource: inviter ? inviter.avatar_url : ""

harmonyqml/components/Chat/Banners/LeftBanner.qml

@@ -1,13 +1,13 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
-import "../../Base" as Base
+import "../../Base"
 import "../utils.js" as ChatJS
 
 Banner {
     property var leftEvent: null
 
-    color: Base.HStyle.chat.leftBanner.background
+    color: HStyle.chat.leftBanner.background
 
     avatarName: ChatJS.getLeftBannerAvatarName(leftEvent, chatPage.userId)
     labelText: ChatJS.getLeftBannerText(leftEvent)

harmonyqml/components/Chat/Chat.qml

@@ -1,11 +1,11 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
-import "../Base" as Base
+import "../Base"
 import "Banners"
 import "RoomEventList"
 
-Base.HColumnLayout {
+HColumnLayout {
     property string userId: ""
     property string roomId: ""
 

harmonyqml/components/Chat/RoomEventList/Daybreak.qml

@@ -1,9 +1,9 @@
 import QtQuick 2.7
-import "../../Base" as Base
+import "../../Base"
 
-Base.HNoticeLabel {
+HNoticeLabel {
     text: dateTime.toLocaleDateString()
-    color: Base.HStyle.chat.daybreak.foreground
+    color: HStyle.chat.daybreak.foreground
-    backgroundColor: Base.HStyle.chat.daybreak.background
+    backgroundColor: HStyle.chat.daybreak.background
-    radius: Base.HStyle.chat.daybreak.radius
+    radius: HStyle.chat.daybreak.radius
 }

harmonyqml/components/Chat/RoomEventList/EventContent.qml

@@ -1,41 +1,41 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.4
-import "../../Base" as Base
+import "../../Base"
 import "../utils.js" as ChatJS
 
-Base.HRowLayout {
+HRowLayout {
     id: eventContent
     spacing: standardSpacing / 2
     layoutDirection: isOwn ? Qt.RightToLeft : Qt.LeftToRight
 
-    Base.HAvatar {
+    HAvatar {
         id: avatar
         name: displayName
         hidden: combine
         dimension: 28
     }
 
-    Base.HLabel {
+    HLabel {
         id: contentLabel
         text: "<font color='" +
               Qt.hsla(Backend.hueFromString(displayName.value || dict.sender),
-                      Base.HStyle.chat.event.saturation,
+                      HStyle.chat.event.saturation,
-                      Base.HStyle.chat.event.lightness,
+                      HStyle.chat.event.lightness,
                       1) +
               "'>" +
               (displayName.value || dict.sender) + " " +
               ChatJS.getEventText(type, dict) +
 
               "&nbsp;&nbsp;" +
-              "<font size=" + Base.HStyle.fontSize.small + "px " +
+              "<font size=" + HStyle.fontSize.small + "px " +
-              "color=" + Base.HStyle.chat.event.date + ">" +
+              "color=" + HStyle.chat.event.date + ">" +
               Qt.formatDateTime(dateTime, "hh:mm:ss") +
               "</font> " +
               "</font>"
 
         textFormat: Text.RichText
-        background: Rectangle {color: Base.HStyle.chat.event.background}
+        background: Rectangle {color: HStyle.chat.event.background}
         wrapMode: Text.Wrap
 
         leftPadding: horizontalPadding

harmonyqml/components/Chat/RoomEventList/MessageContent.qml

@@ -1,26 +1,26 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.4
-import "../../Base" as Base
+import "../../Base"
 
 Row {
     id: row
     spacing: standardSpacing
     layoutDirection: isOwn ? Qt.RightToLeft : Qt.LeftToRight
 
-    Base.HAvatar { id: avatar; hidden: combine; name: displayName }
+    HAvatar { id: avatar; hidden: combine; name: displayName }
 
-    Base.HColumnLayout {
+    HColumnLayout {
         spacing: 0
 
-        Base.HLabel {
+        HLabel {
             visible: ! combine
             id: nameLabel
             text: displayName.value || dict.sender
-            background: Rectangle {color: Base.HStyle.chat.message.background}
+            background: Rectangle {color: HStyle.chat.message.background}
             color: Qt.hsla(Backend.hueFromString(text),
-                           Base.HStyle.displayName.saturation,
+                           HStyle.displayName.saturation,
-                           Base.HStyle.displayName.lightness,
+                           HStyle.displayName.lightness,
                            1)
             elide: Text.ElideRight
             maximumLineCount: 1
@@ -32,21 +32,21 @@ Row {
             topPadding: verticalPadding
         }
 
-        Base.HRichLabel {
+        HRichLabel {
             id: contentLabel
             text: (dict.formatted_body ?
                    Backend.htmlFilter.filter(dict.formatted_body) :
                    dict.body) +
-                  "&nbsp;&nbsp;<font size=" + Base.HStyle.fontSize.small +
+                  "&nbsp;&nbsp;<font size=" + HStyle.fontSize.small +
-                  "px color=" + Base.HStyle.chat.message.date + ">" +
+                  "px color=" + HStyle.chat.message.date + ">" +
                   Qt.formatDateTime(dateTime, "hh:mm:ss") +
                   "</font>" +
                   (isLocalEcho ?
-                   "&nbsp;<font size=" + Base.HStyle.fontSize.small +
+                   "&nbsp;<font size=" + HStyle.fontSize.small +
                    "px>⏳</font>" : "")
             textFormat: Text.RichText
-            background: Rectangle {color: Base.HStyle.chat.message.background}
+            background: Rectangle {color: HStyle.chat.message.background}
-            color: Base.HStyle.chat.message.body
+            color: HStyle.chat.message.body
             wrapMode: Text.Wrap
 
             leftPadding: horizontalPadding

harmonyqml/components/Chat/RoomEventList/RoomEventDelegate.qml

@@ -1,7 +1,7 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.4
-import "../../Base" as Base
+import "../../Base"
 import "../utils.js" as ChatJS
 
 Column {

harmonyqml/components/Chat/RoomEventList/RoomEventList.qml

@@ -1,13 +1,13 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
-import "../../Base" as Base
+import "../../Base"
 
-Base.HGlassRectangle {
+HGlassRectangle {
     property bool canLoadPastEvents: true
     property int space: 8
 
-    color: Base.HStyle.chat.roomEventList.background
+    color: HStyle.chat.roomEventList.background
 
     Layout.fillWidth: true
     Layout.fillHeight: true
@@ -40,7 +40,7 @@ Base.HGlassRectangle {
         }
     }
 
-    Base.HNoticeLabel {
+    HNoticeLabel {
         text: qsTr("Nothing to show here yet...")
 
         visible: roomEventListView.model.count < 1

harmonyqml/components/Chat/RoomHeader.qml

@@ -1,43 +1,43 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
-import "../Base" as Base
+import "../Base"
 
-Base.HGlassRectangle {
+HGlassRectangle {
     property string displayName: ""
     property string topic: ""
 
     id: roomHeader
-    color: Base.HStyle.chat.roomHeader.background
+    color: HStyle.chat.roomHeader.background
 
     Layout.fillWidth: true
     Layout.preferredHeight: 32
 
-    Base.HRowLayout {
+    HRowLayout {
         id: row
         spacing: 8
         anchors.fill: parent
 
-        Base.HAvatar {
+        HAvatar {
             id: avatar
             name: displayName
             dimension: roomHeader.height
             Layout.alignment: Qt.AlignTop
         }
 
-        Base.HLabel {
+        HLabel {
             id: roomName
             text: displayName
-            font.pixelSize: Base.HStyle.fontSize.big
+            font.pixelSize: HStyle.fontSize.big
             elide: Text.ElideRight
             maximumLineCount: 1
             Layout.maximumWidth: row.width - row.totalSpacing - avatar.width
         }
 
-        Base.HLabel {
+        HLabel {
             id: roomTopic
             text: topic
-            font.pixelSize: Base.HStyle.fontSize.small
+            font.pixelSize: HStyle.fontSize.small
             elide: Text.ElideRight
             maximumLineCount: 1
             Layout.maximumWidth:

harmonyqml/components/Chat/SendBox.qml

@@ -1,9 +1,9 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
-import "../Base" as Base
+import "../Base"
 
-Base.HGlassRectangle {
+HGlassRectangle {
     function setFocus() { textArea.forceActiveFocus() }
 
     id: root
@@ -12,18 +12,18 @@ Base.HGlassRectangle {
     Layout.preferredHeight: textArea.implicitHeight
     // parent.height / 2 causes binding loop?
     Layout.maximumHeight: pageStack.height / 2
-    color: Base.HStyle.chat.sendBox.background
+    color: HStyle.chat.sendBox.background
 
-    Base.HRowLayout {
+    HRowLayout {
         anchors.fill: parent
 
-        Base.HAvatar {
+        HAvatar {
             id: avatar
             name: Backend.getUserDisplayName(chatPage.userId)
             dimension: root.Layout.minimumHeight
         }
 
-        Base.HScrollableTextArea {
+        HScrollableTextArea {
             Layout.fillHeight: true
             Layout.fillWidth: true
 

harmonyqml/components/Chat/TypingUsersBar.qml

@@ -1,19 +1,19 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
-import "../Base" as Base
+import "../Base"
 import "utils.js" as ChatJS
 
-Base.HGlassRectangle {
+HGlassRectangle {
     property var typingUsers: chatPage.roomInfo.typingUsers
 
-    color: Base.HStyle.chat.typingUsers.background
+    color: HStyle.chat.typingUsers.background
 
     Layout.fillWidth: true
     Layout.minimumHeight: usersLabel.text ? usersLabel.implicitHeight : 0
     Layout.maximumHeight: Layout.minimumHeight
 
-    Base.HLabel {
+    HLabel {
         id: usersLabel
         anchors.fill: parent
 

harmonyqml/components/Pages/Default.qml

@@ -1,8 +1,8 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
-import "../Base" as Base
+import "../Base"
 
-Base.HNoticeLabel {
+HNoticeLabel {
     text: "Select or add a room to start."
 }

harmonyqml/components/Pages/RememberAccount.qml

@@ -1,13 +1,13 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
-import "../Base" as Base
+import "../Base"
 
 Item {
     property string loginWith: "username"
     property var client: null
 
-    Base.HInterfaceBox {
+    HInterfaceBox {
         id: rememberBox
         title: "Sign in"
         anchors.centerIn: parent
@@ -27,7 +27,7 @@ Item {
             "no": function(button) { pageStack.showPage("Default") },
         }
 
-        Base.HLabel {
+        HLabel {
             text: qsTr(
                 "Do you want to remember this account?\n\n" +
                 "If yes, the " + loginWith + " and an access token will be " +

harmonyqml/components/Pages/SignIn.qml

@@ -1,7 +1,7 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
-import "../Base" as Base
+import "../Base"
 
 Item {
     property string loginWith: "username"
@@ -10,7 +10,7 @@ Item {
     property int wi: x
     onWiChanged: console.log("loginI", wi)
 
-    Base.HInterfaceBox {
+    HInterfaceBox {
         id: signInBox
         title: "Sign in"
         anchors.centerIn: parent
@@ -42,7 +42,7 @@ Item {
             "forgot": function(button) {}
         }
 
-        Base.HRowLayout {
+        HRowLayout {
             spacing: signInBox.margins * 1.25
             Layout.margins: signInBox.margins
             Layout.alignment: Qt.AlignHCenter
@@ -50,7 +50,7 @@ Item {
             Repeater {
                 model: ["username", "email", "phone"]
 
-                Base.HButton {
+                HButton {
                     iconName: modelData
                     circle: true
                     checked: loginWith == modelData
@@ -60,7 +60,7 @@ Item {
             }
         }
 
-        Base.HTextField {
+        HTextField {
             id: identifierField
             placeholderText: qsTr(
                 loginWith === "email" ? "Email" :
@@ -73,7 +73,7 @@ Item {
             Layout.margins: signInBox.margins
         }
 
-        Base.HTextField {
+        HTextField {
             id: passwordField
             placeholderText: qsTr("Password")
             echoMode: TextField.Password

harmonyqml/components/SidePane/AccountDelegate.qml

@@ -1,24 +1,24 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.4
-import "../Base" as Base
+import "../Base"
 
-Base.HColumnLayout {
+HColumnLayout {
     id: accountDelegate
     width: parent.width
 
     property string roomListUserId: userId
 
-    Base.HRowLayout {
+    HRowLayout {
         id: row
 
-        Base.HAvatar { id: avatar; name: displayName; dimension: 36 }
+        HAvatar { id: avatar; name: displayName; dimension: 36 }
 
-        Base.HColumnLayout {
+        HColumnLayout {
             Layout.fillWidth: true
             Layout.fillHeight: true
 
-            Base.HLabel {
+            HLabel {
                 id: accountLabel
                 text: displayName.value || userId
                 elide: Text.ElideRight
@@ -28,11 +28,11 @@ Base.HColumnLayout {
                 rightPadding: leftPadding
             }
 
-            Base.HTextField {
+            HTextField {
                 id: statusEdit
                 text: statusMessage || ""
                 placeholderText: qsTr("Set status message")
-                font.pixelSize: Base.HStyle.fontSize.small
+                font.pixelSize: HStyle.fontSize.small
                 background: null
 
                 padding: 0
@@ -47,7 +47,7 @@ Base.HColumnLayout {
             }
         }
 
-        Base.HButton {
+        HButton {
             id: toggleExpand
             iconName: roomList.visible ? "up" : "down"
             iconDimension: 16

harmonyqml/components/SidePane/PaneToolBar.qml

@@ -1,23 +1,23 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
-import "../Base" as Base
+import "../Base"
 
-Base.HRowLayout {
+HRowLayout {
     id: toolBar
 
     Layout.fillWidth: true
     Layout.preferredHeight: 32
 
-    Base.HButton {
+    HButton {
         iconName: "settings"
-        backgroundColor: Base.HStyle.sidePane.settingsButton.background
+        backgroundColor: HStyle.sidePane.settingsButton.background
     }
 
-    Base.HTextField {
+    HTextField {
         id: filterField
         placeholderText: qsTr("Filter rooms")
-        backgroundColor: Base.HStyle.sidePane.filterRooms.background
+        backgroundColor: HStyle.sidePane.filterRooms.background
 
         Layout.fillWidth: true
         Layout.preferredHeight: 32

harmonyqml/components/SidePane/RoomCategoryDelegate.qml

@@ -1,7 +1,7 @@
 import QtQuick 2.7
-import "../Base" as Base
+import "../Base"
 
-Base.HLabel {
+HLabel {
     width: roomList.width
 
     // topPadding is provided by the roomList spacing

harmonyqml/components/SidePane/RoomDelegate.qml

@@ -1,7 +1,7 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.4
-import "../Base" as Base
+import "../Base"
 import "utils.js" as SidePaneJS
 
 MouseArea {
@@ -11,19 +11,19 @@ MouseArea {
 
     onClicked: pageStack.showRoom(roomList.userId, roomId)
 
-    Base.HRowLayout {
+    HRowLayout {
         anchors.fill: parent
         id: row
         spacing: 1
 
-        Base.HAvatar {
+        HAvatar {
             id: roomAvatar
             name: displayName
             dimension: roomDelegate.height
         }
 
-        Base.HColumnLayout {
+        HColumnLayout {
-            Base.HLabel {
+            HLabel {
                 id: roomLabel
                 text: displayName ? displayName : "<i>Empty room</i>"
                 textFormat: Text.StyledText
@@ -39,7 +39,7 @@ MouseArea {
                 rightPadding: leftPadding
             }
 
-            Base.HLabel {
+            HLabel {
                 function getText() {
                     return SidePaneJS.getLastRoomEventText(
                         roomId, roomList.userId
@@ -56,7 +56,7 @@ MouseArea {
                 text: getText()
                 textFormat: Text.StyledText
 
-                font.pixelSize: Base.HStyle.fontSize.small
+                font.pixelSize: HStyle.fontSize.small
                 elide: Text.ElideRight
                 maximumLineCount: 1
                 Layout.maximumWidth: roomLabel.Layout.maximumWidth

harmonyqml/components/SidePane/RoomList.qml

@@ -1,7 +1,7 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
-import "../Base" as Base
+import "../Base"
 
 ListView {
     property var userId: null

harmonyqml/components/SidePane/SidePane.qml

@@ -2,15 +2,15 @@ import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
 import QtGraphicalEffects 1.0
-import "../Base" as Base
+import "../Base"
 
-Base.HGlassRectangle {
+HGlassRectangle {
     id: sidePane
     clip: true  // Avoid artifacts when resizing pane width to minimum
 
     isPageStackDescendant: false
 
-    Base.HColumnLayout {
+    HColumnLayout {
         anchors.fill: parent
 
         AccountList {

harmonyqml/components/UI.qml

@@ -1,14 +1,13 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
-import "Base" as Base
+import "Base"
-import "SidePane" as SidePane
+import "SidePane"
-import "Chat" as Chat
 
 Item {
     id: mainUI
 
-    Base.HImage {
+    HImage {
         id: mainUIBackground
         fillMode: Image.PreserveAspectCrop
         source: "../images/login_background.jpg"
@@ -17,10 +16,10 @@ Item {
 
     property bool accountsLoggedIn: Backend.clientManager.clientCount > 0
 
-    Base.HSplitView {
+    HSplitView {
         anchors.fill: parent
 
-        SidePane.SidePane {
+        SidePane {
             property int parentWidth: parent.width
             onParentWidthChanged: width = Math.min(parent.width * 0.3, 300)