From 3252eaf3400dd3b7892f1325327683e0ed1b43a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= Date: Mon, 3 Apr 2023 20:04:39 +0200 Subject: [PATCH] fix: Excessive vertical spacing between subtitle and standard colour selector in all colour selectors - use spacing as designed in Figma - re-use StatusColorSelectorGrid title label component (not leaving extra space behind whern empty) - always use white text for the color previews (our color palette/picker are designed for this) - give Channel color dialog a title (as designed) - use BE spelling (as designed, and to be consistent with the rest of the app) Fixes: #9841 --- .../StatusQ/Controls/StatusColorSelectorGrid.qml | 1 + .../src/StatusQ/Popups/StatusColorDialog.qml | 12 +++++------- .../Chat/popups/community/CreateChannelPopup.qml | 9 ++++----- .../controls/CommunityColorPicker.qml | 5 ++--- .../panels/CommunityColorPanel.qml | 16 +++++++--------- 5 files changed, 19 insertions(+), 24 deletions(-) diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusColorSelectorGrid.qml b/ui/StatusQ/src/StatusQ/Controls/StatusColorSelectorGrid.qml index d4d94c374a..84fffa7468 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusColorSelectorGrid.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusColorSelectorGrid.qml @@ -47,6 +47,7 @@ Column { columns: 6 rowSpacing: 16 columnSpacing: 32 + anchors.horizontalCenter: parent.horizontalCenter Repeater { objectName: "statusColorRepeater" diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusColorDialog.qml b/ui/StatusQ/src/StatusQ/Popups/StatusColorDialog.qml index faa52f99ea..5699e253f9 100644 --- a/ui/StatusQ/src/StatusQ/Popups/StatusColorDialog.qml +++ b/ui/StatusQ/src/StatusQ/Popups/StatusColorDialog.qml @@ -51,7 +51,7 @@ StatusModal { ColumnLayout { id: column width: scroll.width - scroll.leftPadding - scroll.rightPadding - spacing: 12 + spacing: 16 StatusColorSpace { id: colorSpace @@ -115,20 +115,18 @@ StatusModal { } } - StatusBaseText { - text: qsTr("Standard colours") - font.pixelSize: 15 - } - StatusColorSelectorGrid { id: colorSelectionGrid + titleText: qsTr("Standard colours") + title.color: Theme.palette.directColor1 + title.font.pixelSize: 15 columns: 8 model: ["#4360df", "#887af9", "#d37ef4", "#51d0f0", "#26a69a", "#7cda00", "#eab700", "#fa6565"] selectedColorIndex: -1 onColorSelected: { root.color = selectedColor; } - Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: true } } } diff --git a/ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml b/ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml index c35934b981..b5e6d51889 100644 --- a/ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml +++ b/ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml @@ -171,10 +171,8 @@ StatusDialog { property string validationError: "" - bgColor: colorDialog.colorSelected ? - colorDialog.color : Theme.palette.baseColor2 - // TODO adjust text color depending on the background color to make it readable - // contentColor: colorDialog.colorSelected ? Theme.palette.indirectColor1 : Theme.palette.baseColor1 + bgColor: colorDialog.colorSelected ? colorDialog.color : Theme.palette.baseColor2 + contentColor: colorDialog.colorSelected ? Theme.palette.white : Theme.palette.baseColor1 text: colorDialog.colorSelected ? colorDialog.color.toString().toUpperCase() : qsTr("Pick a colour") @@ -191,8 +189,9 @@ StatusDialog { id: colorDialog anchors.centerIn: parent property bool colorSelected: root.isEdit && root.channelColor + header.title: qsTr("Channel Colour") color: root.isEdit && root.channelColor ? root.channelColor : - Theme.palette.primaryColor1 + Theme.palette.primaryColor1 onAccepted: colorSelected = true } diff --git a/ui/app/AppLayouts/CommunitiesPortal/controls/CommunityColorPicker.qml b/ui/app/AppLayouts/CommunitiesPortal/controls/CommunityColorPicker.qml index 84eeb22ac5..cd0f5d6d91 100644 --- a/ui/app/AppLayouts/CommunitiesPortal/controls/CommunityColorPicker.qml +++ b/ui/app/AppLayouts/CommunitiesPortal/controls/CommunityColorPicker.qml @@ -20,9 +20,8 @@ ColumnLayout { implicitHeight: childrenRect.height StatusBaseText { - text: qsTr("Community color") + text: qsTr("Community colour") font.pixelSize: 15 - color: Theme.palette.directColor1 } StatusPickerButton { @@ -31,7 +30,7 @@ ColumnLayout { property string validationError: "" bgColor: root.color - contentColor: Theme.palette.indirectColor1 + contentColor: Theme.palette.white text: root.color.toString() onClicked: root.pick() diff --git a/ui/app/AppLayouts/CommunitiesPortal/panels/CommunityColorPanel.qml b/ui/app/AppLayouts/CommunitiesPortal/panels/CommunityColorPanel.qml index ca0107c452..3af631a7a3 100644 --- a/ui/app/AppLayouts/CommunitiesPortal/panels/CommunityColorPanel.qml +++ b/ui/app/AppLayouts/CommunitiesPortal/panels/CommunityColorPanel.qml @@ -47,7 +47,7 @@ StatusScrollView { ColumnLayout { id: column width: root.availableWidth - spacing: 12 + spacing: 16 StatusColorSpace { id: colorSpace @@ -75,7 +75,7 @@ StatusScrollView { validators: [ StatusRegularExpressionValidator { regularExpression: /^#(?:[0-9a-fA-F]{3}){1,2}$/ - errorMessage: qsTr("This is not a valid color") + errorMessage: qsTr("This is not a valid colour") } ] validationMode: StatusInput.ValidationMode.Always @@ -106,26 +106,24 @@ StatusScrollView { id: preview x: 16 y: 16 - text: qsTr("White text should be legible on top of this color") + text: qsTr("White text should be legible on top of this colour") color: Theme.palette.white font.pixelSize: 15 } } - StatusBaseText { - text: qsTr("Standard colors") - font.pixelSize: 15 - } - StatusColorSelectorGrid { id: colorSelectionGrid + titleText: qsTr("Standard colours") + title.color: Theme.palette.directColor1 + title.font.pixelSize: 15 columns: 8 model: ["#4360df", "#887af9", "#d37ef4", "#51d0f0", "#26a69a", "#7cda00", "#eab700", "#fa6565"] selectedColorIndex: -1 onColorSelected: { root.color = selectedColor; } - Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: true } } }