Standardize spacings

TODO.md

@@ -1,7 +1,5 @@
 - Use childrenRect stuff
-- Account delegate name color
 - If avatar is set, name color from average color?
-- normalSpacing in Theme
 - banner button repair
 - Wrong avatar for group rooms
 - Make sure to not cache user images and that sourceSize is set everywhere

src/qml/Base/HLabeledTextField.qml

@@ -5,7 +5,7 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 
 Column {
-    spacing: 4
+    spacing: theme.spacing / 2
 
     property alias label: fieldLabel
     property alias field: textField

src/qml/Base/HNoticePage.qml

@@ -17,11 +17,11 @@ HRowLayout {
         id: noticeLabel
         horizontalAlignment: Text.AlignHCenter
         wrapMode: Text.Wrap
-        padding: 3
+        padding: theme.spacing / 2
-        leftPadding: 10
+        leftPadding: theme.spacing
-        rightPadding: 10
+        rightPadding: leftPadding
 
-        Layout.margins: 10
+        Layout.margins: theme.spacing
         Layout.alignment: Qt.AlignCenter
         Layout.maximumWidth:
             parent.width - Layout.leftMargin - Layout.rightMargin

src/qml/Base/HUIButton.qml

@@ -30,7 +30,7 @@ HBaseButton {
 
         HRowLayout {
             id: contentLayout
-            spacing: button.text && iconName ? 8 : 0
+            spacing: button.text && iconName ? theme.spacing : 0
             Component.onCompleted: contentWidth = implicitWidth
 
             HIcon {

src/qml/Chat/Banners/Banner.qml

@@ -29,7 +29,7 @@ HRectangle {
             dimension: bannerLabel.implicitHeight
             visible: Boolean(svgName)
 
-            Layout.leftMargin: 5
+            Layout.leftMargin: theme.spacing / 2
         }
 
         HLabel {
@@ -41,7 +41,7 @@ HRectangle {
                 bannerRow.width - bannerAvatar.width - bannerButtons.width > 30
 
             Layout.fillWidth: true
-            Layout.leftMargin: 5
+            Layout.leftMargin: bannerIcon.Layout.leftMargin
             Layout.rightMargin: Layout.leftMargin
         }
 

src/qml/Chat/Chat.qml

@@ -105,7 +105,7 @@ HColumnLayout {
                 )
            }
 
-            collapsed: width < theme.avatar.size + 8
+            collapsed: width < theme.avatar.size + theme.spacing
 
             property bool wasSnapped: false
             property int referenceWidth: roomHeader.buttonsWidth

src/qml/Chat/RoomHeader.qml

@@ -20,7 +20,7 @@ HRectangle {
 
     HRowLayout {
         id: row
-        spacing: 8
+        spacing: theme.spacing
         anchors.fill: parent
 
         HRoomAvatar {

src/qml/Chat/RoomSidePane/RoomSidePane.qml

@@ -10,9 +10,7 @@ HRectangle {
 
     property bool collapsed: false
     property var activeView: null
-
+    property int currentSpacing: collapsed ? 0 : theme.spacing
-    property int normalSpacing: 8
-    property int currentSpacing: collapsed ? 0 : normalSpacing
 
     Behavior on currentSpacing { HNumberAnimation {} }
 

src/qml/Chat/Timeline/EventContent.qml

@@ -8,7 +8,7 @@ import "../../utils.js" as Utils
 
 Row {
     id: messageContent
-    spacing: standardSpacing / 2
+    spacing: theme.spacing / 2
     layoutDirection: isOwn ? Qt.RightToLeft : Qt.LeftToRight
 
     HUserAvatar {

src/qml/Chat/Timeline/EventDelegate.qml

@@ -55,9 +55,8 @@ Column {
     )
 
 
-    property int standardSpacing: 16
+    readonly property int horizontalPadding: theme.spacing
-    property int horizontalPadding: 6
+    readonly property int verticalPadding: theme.spacing / 2
-    property int verticalPadding: 4
 
     ListView.onAdd: {
         var nextDelegate = eventList.contentItem.children[index]
@@ -68,10 +67,10 @@ Column {
 
     topPadding:
         isFirstEvent ? 0 :
-        dayBreak ? standardSpacing * 2 :
+        dayBreak ? theme.spacing * 4 :
-        talkBreak ? standardSpacing * 3 :
+        talkBreak ? theme.spacing * 6 :
-        combine ? standardSpacing / 4 :
+        combine ? theme.spacing / 2 :
-        standardSpacing
+        theme.spacing * 2
 
     Loader {
         source: dayBreak ? "Daybreak.qml" : ""

src/qml/Chat/Timeline/EventList.qml

@@ -8,8 +8,6 @@ import "../../Base"
 HRectangle {
     property alias listView: eventList
 
-    property int space: 8
-
     color: theme.chat.eventList.background
 
     HListView {
@@ -28,11 +26,11 @@ HRectangle {
         delegate: EventDelegate {}
 
         anchors.fill: parent
-        anchors.leftMargin: space
+        anchors.leftMargin: theme.spacing
-        anchors.rightMargin: space
+        anchors.rightMargin: theme.spacing
 
-        topMargin: space
+        topMargin: theme.spacing
-        bottomMargin: space
+        bottomMargin: theme.spacing
         verticalLayoutDirection: ListView.BottomToTop
 
         // Keep x scroll pages cached, to limit images having to be

src/qml/Chat/TypingMembersBar.qml

@@ -16,12 +16,12 @@ HRectangle {
     Behavior on implicitHeight { HNumberAnimation {} }
 
     HRowLayout {
-        spacing: 8
+        spacing: theme.spacing
         anchors.fill: parent
         Layout.leftMargin: spacing
         Layout.rightMargin: spacing
-        Layout.topMargin: 2
+        Layout.topMargin: spacing / 4
-        Layout.bottomMargin: 2
+        Layout.bottomMargin: spacing / 4
 
         HIcon {
             id: icon

src/qml/Pages/EditAccount/EditAccount.qml

@@ -12,9 +12,8 @@ Page {
 
     property bool wide: width > 414 + padding * 2
     property int avatarPreferredSize: theme.minimumSupportedWidth
-    property int normalSpacing: 8
     property int currentSpacing:
-        Math.min(normalSpacing * width / 400, normalSpacing * 2)
+        Math.min(theme.spacing * width / 400, theme.spacing * 2)
 
     property string userId: ""
     readonly property var userInfo: users.find(userId)
@@ -53,7 +52,7 @@ Page {
 
     background: null
 
-    leftPadding: currentSpacing < 8 ? 0 : currentSpacing
+    leftPadding: currentSpacing < theme.spacing ? 0 : currentSpacing
     rightPadding: leftPadding
     Behavior on leftPadding { HNumberAnimation {} }
 
@@ -67,7 +66,7 @@ Page {
 
         HColumnLayout {
             id: boxColumn
-            spacing: 16
+            spacing: theme.spacing * 2
             width: flickable.width
             height: flickable.height
 

src/qml/Pages/EditAccount/Profile.qml

@@ -71,7 +71,7 @@ HGridLayout {
                     Layout.alignment: Qt.AlignCenter
                 }
 
-                Item { Layout.preferredHeight: 8 }
+                Item { Layout.preferredHeight: theme.spacing }
 
                 HLabel {
                     text: qsTr("Upload profile picture")
@@ -95,10 +95,10 @@ HGridLayout {
 
     HColumnLayout {
         id: profileInfo
-        spacing: normalSpacing
+        spacing: theme.spacing
 
         HColumnLayout {
-            spacing: normalSpacing
+            spacing: theme.spacing
             Layout.margins: currentSpacing
 
             HLabel {

src/qml/SidePane/SidePane.qml

@@ -12,8 +12,7 @@ HRectangle {
     clip: true
 
     property bool collapsed: false
-    property int normalSpacing: 8
+    property int currentSpacing: collapsed ? 0 : theme.spacing
-    property int currentSpacing: collapsed ? 0 : normalSpacing
 
     Behavior on currentSpacing { HNumberAnimation {} }
 

src/qml/Theme.qml

@@ -6,12 +6,12 @@ import QtQuick 2.12
 QtObject {
     id: theme
 
-    property int animationDuration: 100
-
     property int minimumSupportedWidth: 240
     property int minimumSupportedHeight: 120
 
     property int baseElementsHeight: 36
+    property int spacing: 8
+    property int animationDuration: 100
 
     property QtObject fontSize: QtObject {
         property int smallest: 6

src/qml/UI.qml

@@ -39,7 +39,7 @@ Item {
         SidePane {
             id: sidePane
             visible: accountsPresent
-            collapsed: width < Layout.minimumWidth + normalSpacing
+            collapsed: width < Layout.minimumWidth + theme.spacing
 
             property int parentWidth: parent.width
             property int collapseBelow: 120