From d2dfafb4e7d3d9c970245c388945637c0e4581cc Mon Sep 17 00:00:00 2001 From: miruka Date: Tue, 16 Jul 2019 05:29:47 -0400 Subject: [PATCH] Standardize spacings --- TODO.md | 2 -- src/qml/Base/HLabeledTextField.qml | 2 +- src/qml/Base/HNoticePage.qml | 8 ++++---- src/qml/Base/HUIButton.qml | 2 +- src/qml/Chat/Banners/Banner.qml | 4 ++-- src/qml/Chat/Chat.qml | 2 +- src/qml/Chat/RoomHeader.qml | 2 +- src/qml/Chat/RoomSidePane/RoomSidePane.qml | 4 +--- src/qml/Chat/Timeline/EventContent.qml | 2 +- src/qml/Chat/Timeline/EventDelegate.qml | 13 ++++++------- src/qml/Chat/Timeline/EventList.qml | 10 ++++------ src/qml/Chat/TypingMembersBar.qml | 6 +++--- src/qml/Pages/EditAccount/EditAccount.qml | 7 +++---- src/qml/Pages/EditAccount/Profile.qml | 6 +++--- src/qml/SidePane/SidePane.qml | 3 +-- src/qml/Theme.qml | 4 ++-- src/qml/UI.qml | 2 +- 17 files changed, 35 insertions(+), 44 deletions(-) diff --git a/TODO.md b/TODO.md index d9fcab27..a16c10db 100644 --- a/TODO.md +++ b/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 diff --git a/src/qml/Base/HLabeledTextField.qml b/src/qml/Base/HLabeledTextField.qml index b11e0027..71f31f94 100644 --- a/src/qml/Base/HLabeledTextField.qml +++ b/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 diff --git a/src/qml/Base/HNoticePage.qml b/src/qml/Base/HNoticePage.qml index a8bd7e72..b9caa485 100644 --- a/src/qml/Base/HNoticePage.qml +++ b/src/qml/Base/HNoticePage.qml @@ -17,11 +17,11 @@ HRowLayout { id: noticeLabel horizontalAlignment: Text.AlignHCenter wrapMode: Text.Wrap - padding: 3 - leftPadding: 10 - rightPadding: 10 + padding: theme.spacing / 2 + leftPadding: theme.spacing + rightPadding: leftPadding - Layout.margins: 10 + Layout.margins: theme.spacing Layout.alignment: Qt.AlignCenter Layout.maximumWidth: parent.width - Layout.leftMargin - Layout.rightMargin diff --git a/src/qml/Base/HUIButton.qml b/src/qml/Base/HUIButton.qml index e38402b7..47f77567 100644 --- a/src/qml/Base/HUIButton.qml +++ b/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 { diff --git a/src/qml/Chat/Banners/Banner.qml b/src/qml/Chat/Banners/Banner.qml index 8d681402..1f19d441 100644 --- a/src/qml/Chat/Banners/Banner.qml +++ b/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 } diff --git a/src/qml/Chat/Chat.qml b/src/qml/Chat/Chat.qml index c2bade3c..7ce12716 100644 --- a/src/qml/Chat/Chat.qml +++ b/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 diff --git a/src/qml/Chat/RoomHeader.qml b/src/qml/Chat/RoomHeader.qml index 261278f6..6a05ae23 100644 --- a/src/qml/Chat/RoomHeader.qml +++ b/src/qml/Chat/RoomHeader.qml @@ -20,7 +20,7 @@ HRectangle { HRowLayout { id: row - spacing: 8 + spacing: theme.spacing anchors.fill: parent HRoomAvatar { diff --git a/src/qml/Chat/RoomSidePane/RoomSidePane.qml b/src/qml/Chat/RoomSidePane/RoomSidePane.qml index 9494f0f7..2fccd993 100644 --- a/src/qml/Chat/RoomSidePane/RoomSidePane.qml +++ b/src/qml/Chat/RoomSidePane/RoomSidePane.qml @@ -10,9 +10,7 @@ HRectangle { property bool collapsed: false property var activeView: null - - property int normalSpacing: 8 - property int currentSpacing: collapsed ? 0 : normalSpacing + property int currentSpacing: collapsed ? 0 : theme.spacing Behavior on currentSpacing { HNumberAnimation {} } diff --git a/src/qml/Chat/Timeline/EventContent.qml b/src/qml/Chat/Timeline/EventContent.qml index 881a5ce9..6468cd24 100644 --- a/src/qml/Chat/Timeline/EventContent.qml +++ b/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 { diff --git a/src/qml/Chat/Timeline/EventDelegate.qml b/src/qml/Chat/Timeline/EventDelegate.qml index 0e61bd64..003fbc66 100644 --- a/src/qml/Chat/Timeline/EventDelegate.qml +++ b/src/qml/Chat/Timeline/EventDelegate.qml @@ -55,9 +55,8 @@ Column { ) - property int standardSpacing: 16 - property int horizontalPadding: 6 - property int verticalPadding: 4 + readonly property int horizontalPadding: theme.spacing + readonly property int verticalPadding: theme.spacing / 2 ListView.onAdd: { var nextDelegate = eventList.contentItem.children[index] @@ -68,10 +67,10 @@ Column { topPadding: isFirstEvent ? 0 : - dayBreak ? standardSpacing * 2 : - talkBreak ? standardSpacing * 3 : - combine ? standardSpacing / 4 : - standardSpacing + dayBreak ? theme.spacing * 4 : + talkBreak ? theme.spacing * 6 : + combine ? theme.spacing / 2 : + theme.spacing * 2 Loader { source: dayBreak ? "Daybreak.qml" : "" diff --git a/src/qml/Chat/Timeline/EventList.qml b/src/qml/Chat/Timeline/EventList.qml index 67268059..f5534b02 100644 --- a/src/qml/Chat/Timeline/EventList.qml +++ b/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.rightMargin: space + anchors.leftMargin: theme.spacing + anchors.rightMargin: theme.spacing - topMargin: space - bottomMargin: space + topMargin: theme.spacing + bottomMargin: theme.spacing verticalLayoutDirection: ListView.BottomToTop // Keep x scroll pages cached, to limit images having to be diff --git a/src/qml/Chat/TypingMembersBar.qml b/src/qml/Chat/TypingMembersBar.qml index 7937544d..12df0735 100644 --- a/src/qml/Chat/TypingMembersBar.qml +++ b/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.bottomMargin: 2 + Layout.topMargin: spacing / 4 + Layout.bottomMargin: spacing / 4 HIcon { id: icon diff --git a/src/qml/Pages/EditAccount/EditAccount.qml b/src/qml/Pages/EditAccount/EditAccount.qml index 5494ee2b..3ca32673 100644 --- a/src/qml/Pages/EditAccount/EditAccount.qml +++ b/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 diff --git a/src/qml/Pages/EditAccount/Profile.qml b/src/qml/Pages/EditAccount/Profile.qml index d13c0166..14124f31 100644 --- a/src/qml/Pages/EditAccount/Profile.qml +++ b/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 { diff --git a/src/qml/SidePane/SidePane.qml b/src/qml/SidePane/SidePane.qml index 37a5d258..d2ba7a61 100644 --- a/src/qml/SidePane/SidePane.qml +++ b/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 : normalSpacing + property int currentSpacing: collapsed ? 0 : theme.spacing Behavior on currentSpacing { HNumberAnimation {} } diff --git a/src/qml/Theme.qml b/src/qml/Theme.qml index a933c710..5c227489 100644 --- a/src/qml/Theme.qml +++ b/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 diff --git a/src/qml/UI.qml b/src/qml/UI.qml index f61bc3f3..14402577 100644 --- a/src/qml/UI.qml +++ b/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