fix(CreateCommunityPopup): Create Community modal adjustments

- fix initial input focus
- fix texts according to design
- fix TAB keys between the input fields
- fix input fields text and placeholders alignment
- make the community options checkboxes clickable
- adjust margins/spacing according to design

Closes: #6724
This commit is contained in:
Lukáš Tinkl 2022-08-03 02:07:27 +02:00 committed by Lukáš Tinkl
parent 368b29bb38
commit 6f1cf8bd74
8 changed files with 38 additions and 34 deletions

View File

@ -12,7 +12,7 @@ StatusInput {
leftPadding: 0
rightPadding: 0
label: qsTr("Description")
label: qsTr("Give it a short description")
charLimit: 140
placeholderText: qsTr("What your community is about")
@ -20,6 +20,9 @@ StatusInput {
minimumHeight: 88
maximumHeight: 88
input.verticalAlignment: Qt.AlignTop
input.placeholder.verticalAlignment: Qt.AlignTop
validators: [
StatusMinLengthValidator {
minLength: 1

View File

@ -48,7 +48,7 @@ Item {
imageFileDialogTitle: qsTr("Choose an image as logo")
title: qsTr("Community logo")
acceptButtonText: qsTr("Make this my Community logo")
acceptButtonText: qsTr("Make this my community logo")
dataImage: root.imageData

View File

@ -12,7 +12,7 @@ StatusInput {
leftPadding: 0
rightPadding: 0
label: qsTr("Community name")
label: qsTr("Name your community")
charLimit: 30
placeholderText: qsTr("A catchy name")
validators: [

View File

@ -19,21 +19,21 @@ ColumnLayout {
QtObject {
id: d
readonly property real optionHeight: 64
readonly property int optionHeight: 64
}
RowLayout {
id: archiveSupport
Layout.fillWidth: true
Layout.preferredHeight: d.optionHeight
StatusBaseText {
text: qsTr("Community history service")
}
Item {
Layout.fillWidth: true
implicitHeight: d.optionHeight
text: qsTr("Community history service")
TapHandler {
onTapped: archiveSupportToggle.toggle()
}
}
StatusCheckBox {
@ -43,14 +43,14 @@ ColumnLayout {
RowLayout {
Layout.fillWidth: true
Layout.preferredHeight: d.optionHeight
StatusBaseText {
text: qsTr("Request to join required")
}
Item {
Layout.fillWidth: true
implicitHeight: d.optionHeight
text: qsTr("Request to join required")
TapHandler {
onTapped: requestToJoinToggle.toggle()
}
}
StatusCheckBox {
@ -60,14 +60,14 @@ ColumnLayout {
RowLayout {
Layout.fillWidth: true
Layout.preferredHeight: d.optionHeight
StatusBaseText {
text: qsTr("Any member can pin a message")
}
Item {
Layout.fillWidth: true
implicitHeight: d.optionHeight
text: qsTr("Any member can pin a message")
TapHandler {
onTapped: pinMessagesToggle.toggle()
}
}
StatusCheckBox {

View File

@ -19,7 +19,7 @@ ColumnLayout {
spacing: 8
StatusBaseText {
text: qsTr("Community colour")
text: qsTr("Community color")
font.pixelSize: 15
color: Theme.palette.directColor1
}

View File

@ -45,7 +45,7 @@ ColumnLayout {
StatusPickerButton {
bgColor: root.selectedTags == "" ? Theme.palette.baseColor2 : "transparent"
text: root.selectedTags == "" ? "Choose tags describing the community" : ""
text: root.selectedTags == "" ? qsTr("Choose tags describing the community") : ""
onClicked: root.pick()
Layout.fillWidth: true

View File

@ -12,10 +12,10 @@ import StatusQ.Popups 0.1
StatusScrollView {
id: root
property string title: qsTr("Community Colour")
property string title: qsTr("Community Color")
property var rightButtons: StatusButton {
text: qsTr("Select Community Colour")
text: qsTr("Select Community Color")
onClicked: root.accepted()
}
@ -45,7 +45,7 @@ StatusScrollView {
StatusColorSpace {
id: colorSpace
property real hueFactor: Math.max(rootColor.g + rootColor.b * 0.4,
readonly property real hueFactor: Math.max(rootColor.g + rootColor.b * 0.4,
rootColor.g + rootColor.r * 0.6)
minSaturate: Math.max(0.4, hueFactor * 0.55)
@ -67,7 +67,7 @@ StatusScrollView {
validators: [
StatusRegularExpressionValidator {
regularExpression: /^#(?:[0-9a-fA-F]{3}){1,2}$/
errorMessage: qsTr("This is not a valid colour")
errorMessage: qsTr("This is not a valid color")
}
]
validationMode: StatusInput.ValidationMode.Always
@ -84,7 +84,7 @@ StatusScrollView {
}
StatusBaseText {
text: qsTr("White text should be legable on top of this colour")
text: qsTr("White text should be legible on top of this color")
font.pixelSize: 15
}
@ -105,7 +105,7 @@ StatusScrollView {
}
StatusBaseText {
text: qsTr("Standard colours")
text: qsTr("Standard colors")
font.pixelSize: 15
}

View File

@ -1,7 +1,6 @@
import QtQuick 2.14
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.14
import QtQuick.Dialogs 1.3
import utils 1.0
@ -42,6 +41,8 @@ StatusStackModal {
onClicked: d.createCommunity()
}
onAboutToShow: nameInput.input.edit.forceActiveFocus()
stackItems: [
StatusScrollView {
id: generalView
@ -49,20 +50,20 @@ StatusStackModal {
ColumnLayout {
id: generalViewLayout
width: generalView.availableWidth
spacing: 12
spacing: 16
CommunityNameInput {
id: nameInput
input.edit.objectName: "createCommunityNameInput"
Layout.fillWidth: true
Component.onCompleted: nameInput.input.forceActiveFocus(
Qt.MouseFocusReason)
input.tabNavItem: descriptionTextInput.input.edit
}
CommunityDescriptionInput {
id: descriptionTextInput
input.edit.objectName: "createCommunityDescriptionInput"
Layout.fillWidth: true
input.tabNavItem: nameInput.input.edit
}
CommunityLogoPicker {