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
This commit is contained in:
Lukáš Tinkl 2023-04-03 20:04:39 +02:00 committed by Lukáš Tinkl
parent 7523b1a62b
commit 3252eaf340
5 changed files with 19 additions and 24 deletions

View File

@ -47,6 +47,7 @@ Column {
columns: 6 columns: 6
rowSpacing: 16 rowSpacing: 16
columnSpacing: 32 columnSpacing: 32
anchors.horizontalCenter: parent.horizontalCenter
Repeater { Repeater {
objectName: "statusColorRepeater" objectName: "statusColorRepeater"

View File

@ -51,7 +51,7 @@ StatusModal {
ColumnLayout { ColumnLayout {
id: column id: column
width: scroll.width - scroll.leftPadding - scroll.rightPadding width: scroll.width - scroll.leftPadding - scroll.rightPadding
spacing: 12 spacing: 16
StatusColorSpace { StatusColorSpace {
id: colorSpace id: colorSpace
@ -115,20 +115,18 @@ StatusModal {
} }
} }
StatusBaseText {
text: qsTr("Standard colours")
font.pixelSize: 15
}
StatusColorSelectorGrid { StatusColorSelectorGrid {
id: colorSelectionGrid id: colorSelectionGrid
titleText: qsTr("Standard colours")
title.color: Theme.palette.directColor1
title.font.pixelSize: 15
columns: 8 columns: 8
model: ["#4360df", "#887af9", "#d37ef4", "#51d0f0", "#26a69a", "#7cda00", "#eab700", "#fa6565"] model: ["#4360df", "#887af9", "#d37ef4", "#51d0f0", "#26a69a", "#7cda00", "#eab700", "#fa6565"]
selectedColorIndex: -1 selectedColorIndex: -1
onColorSelected: { onColorSelected: {
root.color = selectedColor; root.color = selectedColor;
} }
Layout.alignment: Qt.AlignHCenter Layout.fillWidth: true
} }
} }
} }

View File

@ -171,10 +171,8 @@ StatusDialog {
property string validationError: "" property string validationError: ""
bgColor: colorDialog.colorSelected ? bgColor: colorDialog.colorSelected ? colorDialog.color : Theme.palette.baseColor2
colorDialog.color : Theme.palette.baseColor2 contentColor: colorDialog.colorSelected ? Theme.palette.white : Theme.palette.baseColor1
// TODO adjust text color depending on the background color to make it readable
// contentColor: colorDialog.colorSelected ? Theme.palette.indirectColor1 : Theme.palette.baseColor1
text: colorDialog.colorSelected ? text: colorDialog.colorSelected ?
colorDialog.color.toString().toUpperCase() : colorDialog.color.toString().toUpperCase() :
qsTr("Pick a colour") qsTr("Pick a colour")
@ -191,8 +189,9 @@ StatusDialog {
id: colorDialog id: colorDialog
anchors.centerIn: parent anchors.centerIn: parent
property bool colorSelected: root.isEdit && root.channelColor property bool colorSelected: root.isEdit && root.channelColor
header.title: qsTr("Channel Colour")
color: root.isEdit && root.channelColor ? root.channelColor : color: root.isEdit && root.channelColor ? root.channelColor :
Theme.palette.primaryColor1 Theme.palette.primaryColor1
onAccepted: colorSelected = true onAccepted: colorSelected = true
} }

View File

@ -20,9 +20,8 @@ ColumnLayout {
implicitHeight: childrenRect.height implicitHeight: childrenRect.height
StatusBaseText { StatusBaseText {
text: qsTr("Community color") text: qsTr("Community colour")
font.pixelSize: 15 font.pixelSize: 15
color: Theme.palette.directColor1
} }
StatusPickerButton { StatusPickerButton {
@ -31,7 +30,7 @@ ColumnLayout {
property string validationError: "" property string validationError: ""
bgColor: root.color bgColor: root.color
contentColor: Theme.palette.indirectColor1 contentColor: Theme.palette.white
text: root.color.toString() text: root.color.toString()
onClicked: root.pick() onClicked: root.pick()

View File

@ -47,7 +47,7 @@ StatusScrollView {
ColumnLayout { ColumnLayout {
id: column id: column
width: root.availableWidth width: root.availableWidth
spacing: 12 spacing: 16
StatusColorSpace { StatusColorSpace {
id: colorSpace id: colorSpace
@ -75,7 +75,7 @@ StatusScrollView {
validators: [ validators: [
StatusRegularExpressionValidator { StatusRegularExpressionValidator {
regularExpression: /^#(?:[0-9a-fA-F]{3}){1,2}$/ 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 validationMode: StatusInput.ValidationMode.Always
@ -106,26 +106,24 @@ StatusScrollView {
id: preview id: preview
x: 16 x: 16
y: 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 color: Theme.palette.white
font.pixelSize: 15 font.pixelSize: 15
} }
} }
StatusBaseText {
text: qsTr("Standard colors")
font.pixelSize: 15
}
StatusColorSelectorGrid { StatusColorSelectorGrid {
id: colorSelectionGrid id: colorSelectionGrid
titleText: qsTr("Standard colours")
title.color: Theme.palette.directColor1
title.font.pixelSize: 15
columns: 8 columns: 8
model: ["#4360df", "#887af9", "#d37ef4", "#51d0f0", "#26a69a", "#7cda00", "#eab700", "#fa6565"] model: ["#4360df", "#887af9", "#d37ef4", "#51d0f0", "#26a69a", "#7cda00", "#eab700", "#fa6565"]
selectedColorIndex: -1 selectedColorIndex: -1
onColorSelected: { onColorSelected: {
root.color = selectedColor; root.color = selectedColor;
} }
Layout.alignment: Qt.AlignHCenter Layout.fillWidth: true
} }
} }
} }