From 0efca3f0bd79163892ee276003ed1feb1f59f26b Mon Sep 17 00:00:00 2001 From: Alex Jbanca Date: Fri, 30 Jun 2023 00:52:16 +0300 Subject: [PATCH] feat: Update Edit community settings based on new design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [Design for edit community settings](https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?node-id=3132%3A383870&mode=dev) [Design for create community popup](https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?type=design&node-id=2636-359221&mode=design&t=Z888PCuW1eTwF5RY-0) 1. Update alignments, paddings and item size to match the new design 2. Update subtitles (Only for edit community settings. Create community popup has different subtitles) 3. Create new EditCommunitySettingsLayout with the new design to be reused in CreateCommunityPopup 4. Update CreateCommunity popup to align it with the new design 5. Add basic EditSettingsPanelPage to storybook 6. Fix TagsPicker bug where the tags were not showing when opening the edit community settings for the first time --- storybook/PagesModel.qml | 4 + storybook/figma.json | 3 + storybook/pages/CommunityInfoEditor.qml | 48 +++++- storybook/pages/EditSettingsPanelPage.qml | 33 ++++ .../shared/scripts/community_names.py | 6 +- .../shared/scripts/community_portal_names.py | 4 +- .../Communities/controls/BannerPicker.qml | 11 +- .../Communities/controls/DescriptionInput.qml | 6 +- .../controls/EditCommunitySettingsForm.qml | 137 +++++++++++++++ .../controls/IntroMessageInput.qml | 2 +- .../Communities/controls/LogoPicker.qml | 7 +- .../Communities/controls/NameInput.qml | 2 +- .../Communities/controls/Options.qml | 3 + .../Communities/controls/TagsPicker.qml | 35 ++-- ui/app/AppLayouts/Communities/controls/qmldir | 1 + ui/app/AppLayouts/Communities/layouts/qmldir | 2 +- .../Communities/panels/EditSettingsPanel.qml | 156 ++++-------------- .../Communities/panels/TagsPanel.qml | 2 +- ui/app/AppLayouts/Communities/panels/qmldir | 1 + .../popups/CreateCommunityPopup.qml | 112 +++---------- .../shared/panels/NoImageUploadedPanel.qml | 35 +++- 21 files changed, 347 insertions(+), 263 deletions(-) create mode 100644 storybook/pages/EditSettingsPanelPage.qml create mode 100644 ui/app/AppLayouts/Communities/controls/EditCommunitySettingsForm.qml diff --git a/storybook/PagesModel.qml b/storybook/PagesModel.qml index 9ae1e6424e..63a5c9d6e2 100644 --- a/storybook/PagesModel.qml +++ b/storybook/PagesModel.qml @@ -177,6 +177,10 @@ ListModel { title: "PrivilegedTokenArtworkPanel" section: "Panels" } + ListElement { + title: "EditSettingsPanel" + section: "Panels" + } ListElement { title: "BurnTokensPopup" section: "Popups" diff --git a/storybook/figma.json b/storybook/figma.json index 3363efece8..492615c040 100644 --- a/storybook/figma.json +++ b/storybook/figma.json @@ -224,5 +224,8 @@ ], "CommunitiesView": [ "https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?type=design&node-id=16089-387522&t=HRT9BmZXnl7Lt55Q-0" + ], + "EditSettingsPanel": [ + "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?node-id=3132%3A383870&mode=dev" ] } diff --git a/storybook/pages/CommunityInfoEditor.qml b/storybook/pages/CommunityInfoEditor.qml index 16f7638dbc..7c48d9f6ce 100644 --- a/storybook/pages/CommunityInfoEditor.qml +++ b/storybook/pages/CommunityInfoEditor.qml @@ -7,12 +7,16 @@ import utils 1.0 ColumnLayout { id: root - property string name: "Uniswap" + property string name: "Socks" + property string description: "We like the sock! A community of Unisocks wearers we like the sock a community of Unisocks we like the sock a community of Unisocks wearers we like the sock." + property int membersCount: 184 - property bool amISectionAdmin: false + property bool amISectionAdmin: true + property bool isCommunityEditable: true property color color: "orchid" property url image: Style.png("tokens/UNI") property bool colorVisible: false + property url banner: Style.png("settings/communities@2x") spacing: 24 @@ -29,6 +33,21 @@ ColumnLayout { } } + ColumnLayout { + Label { + Layout.fillWidth: true + text: "Description" + } + TextArea { + background: Rectangle { border.color: 'lightgrey' } + Layout.preferredWidth: 200 + Layout.preferredHeight: implicitHeight + text: root.description + onTextChanged: root.description = text + wrapMode: TextEdit.Wrap + } + } + ColumnLayout { Label { Layout.fillWidth: true @@ -96,4 +115,29 @@ ColumnLayout { onCheckedChanged: root.amISectionAdmin = checked } } + RowLayout { + Label { + text: "Is community editable:" + } + + CheckBox { + checked: root.isCommunityEditable + onCheckedChanged: root.isCommunityEditable = checked + } + } + ColumnLayout { + Label { + text: "Banner" + } + + RadioButton { + checked: true + text: "No banner" + onCheckedChanged: if(checked) root.banner = "" + } + RadioButton { + text: "Communities" + onCheckedChanged: if(checked) root.banner = Style.png("settings/communities@2x") + } + } } diff --git a/storybook/pages/EditSettingsPanelPage.qml b/storybook/pages/EditSettingsPanelPage.qml new file mode 100644 index 0000000000..9711f92ef3 --- /dev/null +++ b/storybook/pages/EditSettingsPanelPage.qml @@ -0,0 +1,33 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +import AppLayouts.Communities.panels 1.0 + +import Storybook 1.0 + +SplitView { + id: root + SplitView.fillWidth: true + + EditSettingsPanel { + SplitView.fillWidth: true + SplitView.fillHeight: true + name: communityEditor.name + color: communityEditor.color + logoImageData: communityEditor.image + description: communityEditor.description + bannerImageData: communityEditor.banner + } + + ScrollView { + SplitView.minimumWidth: 300 + SplitView.preferredWidth: 300 + + CommunityInfoEditor{ + id: communityEditor + anchors.fill: parent + colorVisible: true + } + } +} diff --git a/test/ui-test/testSuites/suite_communities/shared/scripts/community_names.py b/test/ui-test/testSuites/suite_communities/shared/scripts/community_names.py index 106cbb51ef..d339a463af 100644 --- a/test/ui-test/testSuites/suite_communities/shared/scripts/community_names.py +++ b/test/ui-test/testSuites/suite_communities/shared/scripts/community_names.py @@ -77,9 +77,9 @@ communitySettings_Community_LetterIdenticon = {"container": communitySettings_Co # Community Edit: communitySettings_EditCommunity_ScrollView = {"container": statusDesktop_mainWindow, "objectName": "communityEditPanelScrollView", "type": "StatusScrollView", "visible": True} -communitySettings_EditCommunity_Name_Input = {"container": communitySettings_EditCommunity_ScrollView, "objectName": "editCommunityNameInput", "type": "TextEdit", "visible": True} -communitySettings_EditCommunity_Description_Input = {"container": communitySettings_EditCommunity_ScrollView, "objectName": "editCommunityDescriptionInput", "type": "TextEdit", "visible": True} -communitySettings_EditCommunity_ColorPicker_Button = {"container": communitySettings_EditCommunity_ScrollView, "objectName": "editCommunityColorPicker", "type": "ColorPicker", "visible": True} +communitySettings_EditCommunity_Name_Input = {"container": communitySettings_EditCommunity_ScrollView, "objectName": "communityNameInput", "type": "TextEdit", "visible": True} +communitySettings_EditCommunity_Description_Input = {"container": communitySettings_EditCommunity_ScrollView, "objectName": "communityDescriptionInput", "type": "TextEdit", "visible": True} +communitySettings_EditCommunity_ColorPicker_Button = {"container": communitySettings_EditCommunity_ScrollView, "objectName": "communityColorPicker", "type": "ColorPicker", "visible": True} # Community color popup: communitySettings_ColorPanel_HexColor_Input = {"container": statusDesktop_mainWindow_overlay, "objectName": "communityColorPanelHexInput", "type": "TextEdit", "visible": True} diff --git a/test/ui-test/testSuites/suite_communities/shared/scripts/community_portal_names.py b/test/ui-test/testSuites/suite_communities/shared/scripts/community_portal_names.py index c6493b9c19..a6757c229a 100644 --- a/test/ui-test/testSuites/suite_communities/shared/scripts/community_portal_names.py +++ b/test/ui-test/testSuites/suite_communities/shared/scripts/community_portal_names.py @@ -11,8 +11,8 @@ createCommunity_banner = {"container": statusDesktop_mainWindow_overlay, "object createCommunity_bannerButton = {"container": createCommunity_banner, "objectName": "communityBannerButton", "type": "StatusButton", "visible": True} # Create community popup: -createCommunityNameInput_TextEdit = {"container": statusDesktop_mainWindow_overlay, "objectName": "createCommunityNameInput", "type": "TextEdit", "visible": True} -createCommunityDescriptionInput_TextEdit = {"container": statusDesktop_mainWindow_overlay, "objectName": "createCommunityDescriptionInput", "type": "TextEdit", "visible": True} +createCommunityNameInput_TextEdit = {"container": statusDesktop_mainWindow_overlay, "objectName": "communityNameInput", "type": "TextEdit", "visible": True} +createCommunityDescriptionInput_TextEdit = {"container": statusDesktop_mainWindow_overlay, "objectName": "communityDescriptionInput", "type": "TextEdit", "visible": True} createCommunityIntroMessageInput_TextEdit = {"container": statusDesktop_mainWindow_overlay, "objectName": "createCommunityIntroMessageInput", "type": "TextEdit", "visible": True} createCommunityOutroMessageInput_TextEdit = {"container": statusDesktop_mainWindow_overlay, "objectName": "createCommunityOutroMessageInput", "type": "TextEdit", "visible": True} createCommunityNextBtn_StatusButton = {"container": statusDesktop_mainWindow_overlay, "objectName": "createCommunityNextBtn", "type": "StatusButton", "visible": True} diff --git a/ui/app/AppLayouts/Communities/controls/BannerPicker.qml b/ui/app/AppLayouts/Communities/controls/BannerPicker.qml index e67df920c3..55264ae0a8 100644 --- a/ui/app/AppLayouts/Communities/controls/BannerPicker.qml +++ b/ui/app/AppLayouts/Communities/controls/BannerPicker.qml @@ -32,12 +32,12 @@ Item { anchors.fill: parent - spacing: 8 + spacing: 19 StatusBaseText { text: qsTr("Community banner") - font.pixelSize: 15 + font.pixelSize: Theme.primaryTextFontSize color: Theme.palette.directColor1 } @@ -53,13 +53,18 @@ Item { acceptButtonText: qsTr("Make this my Community banner") roundedImage: false - aspectRatio: 375/184 + aspectRatio: 475/184 NoImageUploadedPanel { anchors.centerIn: parent visible: !editor.userSelectedImage && !root.imageData showAdditionalInfo: true + contentSpacing: 2 + iconWidth: 24 + iconHeight: 24 + additionalText: qsTr("Optimal aspect ratio 16:9") + additionalTextPixelSize: Theme.tertiaryTextFontSize } } } diff --git a/ui/app/AppLayouts/Communities/controls/DescriptionInput.qml b/ui/app/AppLayouts/Communities/controls/DescriptionInput.qml index 08c2892e2e..73fd86b0bb 100644 --- a/ui/app/AppLayouts/Communities/controls/DescriptionInput.qml +++ b/ui/app/AppLayouts/Communities/controls/DescriptionInput.qml @@ -10,13 +10,13 @@ import StatusQ.Controls.Validators 0.1 StatusInput { id: root - label: qsTr("Give it a short description") + label: qsTr("Description") charLimit: 140 placeholderText: qsTr("What your community is about") input.multiline: true - minimumHeight: 88 - maximumHeight: 88 + maximumHeight: 108 + minimumHeight: 108 input.verticalAlignment: Qt.AlignTop input.placeholder.verticalAlignment: Qt.AlignTop diff --git a/ui/app/AppLayouts/Communities/controls/EditCommunitySettingsForm.qml b/ui/app/AppLayouts/Communities/controls/EditCommunitySettingsForm.qml new file mode 100644 index 0000000000..4a3a4854b0 --- /dev/null +++ b/ui/app/AppLayouts/Communities/controls/EditCommunitySettingsForm.qml @@ -0,0 +1,137 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +import utils 1.0 + +import StatusQ.Popups 0.1 + +import AppLayouts.Communities.controls 1.0 +import AppLayouts.Communities.panels 1.0 + +Control { + id: root + + property alias nameLabel: nameInput.label + property alias descriptionLabel: descriptionTextInput.label + + readonly property alias isNameValid: nameInput.valid + readonly property alias isNameDirty: nameInput.input.dirty + readonly property alias isDescriptionValid: descriptionTextInput.valid + readonly property alias isDescriptionDirty: descriptionTextInput.input.dirty + readonly property alias isLogoSelected: logoPicker.hasSelectedImage + readonly property alias isBannerSelected: bannerPicker.hasSelectedImage + + property alias name: nameInput.text + property alias description: descriptionTextInput.text + property alias color: colorPicker.color + property alias tags: tagsPicker.tags + property alias selectedTags: tagsPicker.selectedTags + property alias options: options + + property alias logoImageData: logoPicker.imageData + property alias logoImagePath: logoPicker.source + property alias logoCropRect: logoPicker.cropRect + property alias bannerImageData: bannerPicker.imageData + property alias bannerPath: bannerPicker.source + property alias bannerCropRect: bannerPicker.cropRect + + contentItem: ColumnLayout { + implicitWidth: 608 + spacing: 16 + + NameInput { + id: nameInput + input.edit.objectName: "communityNameInput" + Layout.fillWidth: true + Component.onCompleted: nameInput.input.forceActiveFocus(Qt.MouseFocusReason) + } + + DescriptionInput { + id: descriptionTextInput + input.edit.objectName: "communityDescriptionInput" + Layout.fillWidth: true + } + + LogoPicker { + id: logoPicker + objectName: "communityLogoPicker" + Layout.fillWidth: true + } + + BannerPicker { + id: bannerPicker + objectName: "communityBannerPicker" + Layout.fillWidth: true + Layout.topMargin: -8 //Closer by design + } + + ColorPicker { + id: colorPicker + objectName: "communityColorPicker" + onPick: Global.openPopup(pickColorComponent) + Layout.fillWidth: true + Layout.topMargin: 2 + + Component { + id: pickColorComponent + + StatusStackModal { + width: 640 + anchors.centerIn: parent + leftButtons: [] + replaceItem: ColorPanel { + clip: true + Component.onCompleted: color = colorPicker.color + onAccepted: { + colorPicker.color = color; + close(); + } + } + onClosed: destroy() + } + } + } + + TagsPicker { + id: tagsPicker + objectName: "communityTagsPicker" + onPick: Global.openPopup(pickTagsComponent) + Layout.fillWidth: true + + Component { + id: pickTagsComponent + + StatusStackModal { + anchors.centerIn: parent + leftButtons: [] + width: 640 + replaceItem: TagsPanel { + Component.onCompleted: { + tags = tagsPicker.tags; + selectedTags = tagsPicker.selectedTags; + } + onAccepted: { + tagsPicker.selectedTags = selectedTags; + close(); + } + } + onClosed: destroy() + } + } + } + + StatusModalDivider { + Layout.fillWidth: true + Layout.topMargin: 2 + Layout.bottomMargin: -root.spacing + } + + Options { + id: options + Layout.fillWidth: true + Layout.topMargin: 4 + Layout.bottomMargin: 4 + } + } +} diff --git a/ui/app/AppLayouts/Communities/controls/IntroMessageInput.qml b/ui/app/AppLayouts/Communities/controls/IntroMessageInput.qml index 3d235b2305..6a77aa2beb 100644 --- a/ui/app/AppLayouts/Communities/controls/IntroMessageInput.qml +++ b/ui/app/AppLayouts/Communities/controls/IntroMessageInput.qml @@ -10,7 +10,7 @@ import StatusQ.Controls.Validators 0.1 StatusInput { id: root - label: qsTr("Community introduction and rules") + label: qsTr("Dialog for new members") charLimit: 1400 multiline: true diff --git a/ui/app/AppLayouts/Communities/controls/LogoPicker.qml b/ui/app/AppLayouts/Communities/controls/LogoPicker.qml index daa857a7fd..22b0df708f 100644 --- a/ui/app/AppLayouts/Communities/controls/LogoPicker.qml +++ b/ui/app/AppLayouts/Communities/controls/LogoPicker.qml @@ -30,13 +30,16 @@ Item { ColumnLayout { id: layout - anchors.horizontalCenter: parent.horizontalCenter - spacing: 8 + anchors.fill: parent + spacing: 16 StatusBaseText { + id: label + Layout.fillWidth: true text: qsTr("Community logo") font.pixelSize: 15 color: Theme.palette.directColor1 + horizontalAlignment: Qt.AlignLeft } EditCroppedImagePanel { diff --git a/ui/app/AppLayouts/Communities/controls/NameInput.qml b/ui/app/AppLayouts/Communities/controls/NameInput.qml index 20bb3c8fe4..84ec516620 100644 --- a/ui/app/AppLayouts/Communities/controls/NameInput.qml +++ b/ui/app/AppLayouts/Communities/controls/NameInput.qml @@ -10,7 +10,7 @@ import StatusQ.Controls.Validators 0.1 StatusInput { id: root - label: qsTr("Name your community") + label: qsTr("Community name") charLimit: 30 placeholderText: qsTr("A catchy name") diff --git a/ui/app/AppLayouts/Communities/controls/Options.qml b/ui/app/AppLayouts/Communities/controls/Options.qml index 37d32e3a14..9b8a99ab3c 100644 --- a/ui/app/AppLayouts/Communities/controls/Options.qml +++ b/ui/app/AppLayouts/Communities/controls/Options.qml @@ -29,6 +29,7 @@ Column { StatusBaseText { Layout.fillWidth: true text: qsTr("Community history service") + font.pixelSize: Theme.primaryTextFontSize TapHandler { onTapped: archiveSupportToggle.toggle() } @@ -47,6 +48,7 @@ Column { StatusBaseText { Layout.fillWidth: true text: qsTr("Request to join required") + font.pixelSize: Theme.primaryTextFontSize TapHandler { onTapped: requestToJoinToggle.toggle() } @@ -64,6 +66,7 @@ Column { StatusBaseText { Layout.fillWidth: true text: qsTr("Any member can pin a message") + font.pixelSize: Theme.primaryTextFontSize TapHandler { onTapped: pinMessagesToggle.toggle() } diff --git a/ui/app/AppLayouts/Communities/controls/TagsPicker.qml b/ui/app/AppLayouts/Communities/controls/TagsPicker.qml index 4835b10c85..0dc4404870 100644 --- a/ui/app/AppLayouts/Communities/controls/TagsPicker.qml +++ b/ui/app/AppLayouts/Communities/controls/TagsPicker.qml @@ -17,25 +17,27 @@ ColumnLayout { signal pick() - onSelectedTagsChanged: { - const obj = JSON.parse(tags); - const array = selectedTags.length ? JSON.parse(selectedTags) : []; - - d.tagsModel.clear(); - for (const key of Object.keys(obj)) { - if (array.indexOf(key) != -1) { - d.tagsModel.append({ name: key, emoji: obj[key], selected: false }); - } - } - } - implicitHeight: childrenRect.height - spacing: 8 + spacing: 14 + + onSelectedTagsChanged: d.handleSelectedTags() + Component.onCompleted: d.handleSelectedTags() QtObject { id: d property ListModel tagsModel: ListModel {} + function handleSelectedTags() { + const obj = JSON.parse(tags); + const array = selectedTags.length ? JSON.parse(selectedTags) : []; + + d.tagsModel.clear(); + for (const key of Object.keys(obj)) { + if (array.indexOf(key) != -1) { + d.tagsModel.append({ name: key, emoji: obj[key], selected: false }); + } + } + } } StatusBaseText { @@ -45,16 +47,17 @@ ColumnLayout { } StatusPickerButton { - bgColor: root.selectedTags == "" ? Theme.palette.baseColor2 : "transparent" - text: root.selectedTags == "" ? qsTr("Choose tags describing the community") : "" + bgColor: d.tagsModel.count === 0 ? Theme.palette.baseColor2 : "transparent" + text: d.tagsModel.count === 0 ? qsTr("Choose tags describing the community") : "" onClicked: root.pick() Layout.fillWidth: true StatusCommunityTags { - anchors.centerIn: parent + anchors.verticalCenter: parent.verticalCenter model: d.tagsModel active: false width: parent.width + contentWidth: width } } } diff --git a/ui/app/AppLayouts/Communities/controls/qmldir b/ui/app/AppLayouts/Communities/controls/qmldir index 72593bc207..10099e243a 100644 --- a/ui/app/AppLayouts/Communities/controls/qmldir +++ b/ui/app/AppLayouts/Communities/controls/qmldir @@ -8,6 +8,7 @@ ColorPicker 1.0 ColorPicker.qml CommunityListItem 1.0 CommunityListItem.qml DescriptionInput 1.0 DescriptionInput.qml EnsPanel 1.0 EnsPanel.qml +EditCommunitySettingsForm 1.0 EditCommunitySettingsForm.qml ExtendedDropdownContent 1.0 ExtendedDropdownContent.qml HoldingTypes 1.0 HoldingTypes.qml InlineNetworksComboBox 1.0 InlineNetworksComboBox.qml diff --git a/ui/app/AppLayouts/Communities/layouts/qmldir b/ui/app/AppLayouts/Communities/layouts/qmldir index 94f32f713d..097640ee75 100644 --- a/ui/app/AppLayouts/Communities/layouts/qmldir +++ b/ui/app/AppLayouts/Communities/layouts/qmldir @@ -1 +1 @@ -SettingsPage 1.0 SettingsPage.qml +SettingsPage 1.0 SettingsPage.qml \ No newline at end of file diff --git a/ui/app/AppLayouts/Communities/panels/EditSettingsPanel.qml b/ui/app/AppLayouts/Communities/panels/EditSettingsPanel.qml index 48c5ad494c..070f27a87d 100644 --- a/ui/app/AppLayouts/Communities/panels/EditSettingsPanel.qml +++ b/ui/app/AppLayouts/Communities/panels/EditSettingsPanel.qml @@ -1,157 +1,59 @@ -import QtQuick 2.14 -import QtQuick.Layouts 1.14 -import QtQuick.Controls 2.14 -import QtQuick.Dialogs 1.3 -import QtGraphicalEffects 1.13 - -import utils 1.0 -import shared.panels 1.0 -import shared.popups 1.0 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 import StatusQ.Core 0.1 -import StatusQ.Core.Theme 0.1 -import StatusQ.Layout 0.1 -import StatusQ.Components 0.1 import StatusQ.Popups 0.1 -import StatusQ.Controls 0.1 -import StatusQ.Controls.Validators 0.1 import AppLayouts.Communities.controls 1.0 -import AppLayouts.Communities.panels 1.0 StatusScrollView { id: root objectName: "communityEditPanelScrollView" - property alias name: nameInput.text - property alias description: descriptionTextInput.text + property alias name: baseLayout.name + property alias description: baseLayout.description property alias introMessage: introMessageTextInput.text property alias outroMessage: outroMessageTextInput.text - property alias color: colorPicker.color - property alias tags: tagsPicker.tags - property alias selectedTags: tagsPicker.selectedTags - property alias options: options + property alias color: baseLayout.color + property alias tags: baseLayout.tags + property alias selectedTags: baseLayout.selectedTags + property alias options: baseLayout.options - property alias logoImageData: logoPicker.imageData - property alias logoImagePath: logoPicker.source - property alias logoCropRect: logoPicker.cropRect - property alias bannerImageData: bannerPicker.imageData - property alias bannerPath: bannerPicker.source - property alias bannerCropRect: bannerPicker.cropRect + property alias logoImageData: baseLayout.logoImageData + property alias logoImagePath: baseLayout.logoImagePath + property alias logoCropRect: baseLayout.logoCropRect + property alias bannerImageData: baseLayout.bannerImageData + property alias bannerPath: baseLayout.bannerPath + property alias bannerCropRect: baseLayout.bannerCropRect property size bottomReservedSpace: Qt.size(0, 0) property bool bottomReservedSpaceActive: false - readonly property bool saveChangesButtonEnabled: !((nameInput.input.dirty && !nameInput.valid) || - (descriptionTextInput.input.dirty && !descriptionTextInput.valid)) + readonly property bool saveChangesButtonEnabled: !((baseLayout.isNameDirty && !baseLayout.isNameValid) || + (baseLayout.isDescriptionDirty && !baseLayout.isDescriptionValid) || + (introMessageTextInput.input.dirty && !introMessageTextInput.valid) || + (outroMessageTextInput.input.dirty && !outroMessageTextInput.valid)) + padding: 0 ColumnLayout { - id: layout - - width: 608 - spacing: 12 - - NameInput { - id: nameInput - input.edit.objectName: "editCommunityNameInput" - Layout.fillWidth: true - Component.onCompleted: nameInput.input.forceActiveFocus(Qt.MouseFocusReason) + id: mainLayout + width: baseLayout.width + spacing: 16 + EditCommunitySettingsForm { + id: baseLayout + Layout.fillHeight: true } - - DescriptionInput { - id: descriptionTextInput - input.edit.objectName: "editCommunityDescriptionInput" - Layout.fillWidth: true - } - - LogoPicker { - id: logoPicker - objectName: "editCommunityLogoPicker" - Layout.fillWidth: true - } - - BannerPicker { - id: bannerPicker - objectName: "editCommunityBannerPicker" - Layout.fillWidth: true - } - - ColorPicker { - id: colorPicker - objectName: "editCommunityColorPicker" - onPick: Global.openPopup(pickColorComponent) - Layout.fillWidth: true - - Component { - id: pickColorComponent - - StatusStackModal { - width: 640 - anchors.centerIn: parent - leftButtons: [] - replaceItem: ColorPanel { - clip: true - Component.onCompleted: color = colorPicker.color - onAccepted: { - colorPicker.color = color; - close(); - } - } - onClosed: destroy() - } - } - } - - TagsPicker { - id: tagsPicker - objectName: "editCommunityTagsPicker" - onPick: Global.openPopup(pickTagsComponent) - Layout.fillWidth: true - - Component { - id: pickTagsComponent - - StatusStackModal { - anchors.centerIn: parent - leftButtons: [] - width: 640 - replaceItem: TagsPanel { - Component.onCompleted: { - tags = tagsPicker.tags; - selectedTags = tagsPicker.selectedTags; - } - onAccepted: { - tagsPicker.selectedTags = selectedTags; - close(); - } - } - onClosed: destroy() - } - } - } - StatusModalDivider { Layout.fillWidth: true - Layout.bottomMargin: -layout.spacing + Layout.topMargin: -baseLayout.spacing + Layout.bottomMargin: 2 } - - Options { - id: options - Layout.fillWidth: true - } - - StatusModalDivider { - Layout.fillWidth: true - Layout.topMargin: -layout.spacing - Layout.bottomMargin: 8 - } - IntroMessageInput { id: introMessageTextInput input.edit.objectName: "editCommunityIntroInput" Layout.fillWidth: true - minimumHeight: 108 - maximumHeight: 108 + minimumHeight: 482 + maximumHeight: 482 } OutroMessageInput { diff --git a/ui/app/AppLayouts/Communities/panels/TagsPanel.qml b/ui/app/AppLayouts/Communities/panels/TagsPanel.qml index 69b5b5d242..e3bc80acc7 100644 --- a/ui/app/AppLayouts/Communities/panels/TagsPanel.qml +++ b/ui/app/AppLayouts/Communities/panels/TagsPanel.qml @@ -16,7 +16,7 @@ StatusScrollView { property string tags property string selectedTags - property int maxSelectedTags: 4 + property int maxSelectedTags: 3 property string title: qsTr("Community Tags") diff --git a/ui/app/AppLayouts/Communities/panels/qmldir b/ui/app/AppLayouts/Communities/panels/qmldir index 02662413f4..e86e874cba 100644 --- a/ui/app/AppLayouts/Communities/panels/qmldir +++ b/ui/app/AppLayouts/Communities/panels/qmldir @@ -29,3 +29,4 @@ TokenHoldersPanel 1.0 TokenHoldersPanel.qml TokenHoldersProxyModel 1.0 TokenHoldersProxyModel.qml WarningPanel 1.0 WarningPanel.qml WelcomeBannerPanel 1.0 WelcomeBannerPanel.qml +EditSettingsPanel 1.0 EditSettingsPanel.qml \ No newline at end of file diff --git a/ui/app/AppLayouts/Communities/popups/CreateCommunityPopup.qml b/ui/app/AppLayouts/Communities/popups/CreateCommunityPopup.qml index adf8d2fecf..ebb2d2000b 100644 --- a/ui/app/AppLayouts/Communities/popups/CreateCommunityPopup.qml +++ b/ui/app/AppLayouts/Communities/popups/CreateCommunityPopup.qml @@ -71,7 +71,6 @@ StatusStackModal { rightButtons: [clearFilesButton, nextButton, finishButton] onAboutToShow: { - nameInput.input.edit.forceActiveFocus() if (root.isDiscordImport) { if (!root.store.discordImportInProgress) { root.store.clearFileList() @@ -368,7 +367,7 @@ StatusStackModal { StatusScrollView { id: generalView contentWidth: availableWidth - readonly property bool canGoNext: nameInput.valid && descriptionTextInput.valid && (root.isDevBuild || (logoPicker.hasSelectedImage && bannerPicker.hasSelectedImage)) + readonly property bool canGoNext: generalViewLayout.isNameValid && generalViewLayout.isDescriptionValid && (root.isDevBuild || (generalViewLayout.isLogoSelected && generalViewLayout.isBannerSelected)) padding: 0 clip: false @@ -381,87 +380,14 @@ StatusStackModal { anchors.leftMargin: 1 } - ColumnLayout { + EditCommunitySettingsForm { id: generalViewLayout width: generalView.availableWidth - spacing: 16 - NameInput { - id: nameInput - input.edit.objectName: "createCommunityNameInput" - Layout.fillWidth: true - input.tabNavItem: descriptionTextInput.input.edit - } + nameLabel: qsTr("Name your community") + descriptionLabel: qsTr("Give it a short description") - DescriptionInput { - id: descriptionTextInput - input.edit.objectName: "createCommunityDescriptionInput" - Layout.fillWidth: true - input.tabNavItem: nameInput.input.edit - } - - LogoPicker { - id: logoPicker - Layout.fillWidth: true - } - - BannerPicker { - id: bannerPicker - Layout.fillWidth: true - } - - ColorPicker { - id: colorPicker - onPick: root.replace(colorPanel) - Layout.fillWidth: true - - Component { - id: colorPanel - - ColorPanel { - Component.onCompleted: color = colorPicker.color - onAccepted: { - colorPicker.color = color; - root.replace(null); - } - } - } - } - - TagsPicker { - id: communityTagsPicker - tags: root.store.communityTags - onPick: root.replace(tagsPanel) - Layout.fillWidth: true - - Component { - id: tagsPanel - - TagsPanel { - Component.onCompleted: { - tags = communityTagsPicker.tags; - selectedTags = communityTagsPicker.selectedTags; - } - onAccepted: { - communityTagsPicker.selectedTags = selectedTags; - root.replace(null); - } - } - } - } - - StatusModalDivider { - Layout.fillWidth: true - } - - Options { - id: options - Layout.fillWidth: true - } - - Item { - Layout.fillHeight: true - } + tags: root.store.communityTags } }, @@ -480,6 +406,8 @@ StatusStackModal { minimumHeight: height maximumHeight: (height - Style.current.xlPadding) + + label: qsTr("Community introduction and rules") } OutroMessageInput { @@ -497,25 +425,25 @@ StatusStackModal { function _getCommunityConfig() { return { - name: StatusQUtils.Utils.filterXSS(nameInput.input.text), - description: StatusQUtils.Utils.filterXSS(descriptionTextInput.input.text), + name: StatusQUtils.Utils.filterXSS(generalViewLayout.name), + description: StatusQUtils.Utils.filterXSS(generalViewLayout.description), introMessage: StatusQUtils.Utils.filterXSS(introMessageInput.input.text), outroMessage: StatusQUtils.Utils.filterXSS(outroMessageInput.input.text), - color: colorPicker.color.toString().toUpperCase(), - tags: communityTagsPicker.selectedTags, + color: generalViewLayout.color.toString().toUpperCase(), + tags: generalViewLayout.selectedTags, image: { - src: logoPicker.source, - AX: logoPicker.cropRect.x, - AY: logoPicker.cropRect.y, - BX: logoPicker.cropRect.x + logoPicker.cropRect.width, - BY: logoPicker.cropRect.y + logoPicker.cropRect.height, + src: generalViewLayout.logoImagePath, + AX: generalViewLayout.logoCropRect.x, + AY: generalViewLayout.logoCropRect.y, + BX: generalViewLayout.logoCropRect.x + generalViewLayout.logoCropRect.width, + BY: generalViewLayout.logoCropRect.y + generalViewLayout.logoCropRect.height, }, options: { - historyArchiveSupportEnabled: options.archiveSupportEnabled, - checkedMembership: options.requestToJoinEnabled ? Constants.communityChatOnRequestAccess : Constants.communityChatPublicAccess, - pinMessagesAllowedForMembers: options.pinMessagesEnabled, + historyArchiveSupportEnabled: generalViewLayout.options.archiveSupportEnabled, + checkedMembership: generalViewLayout.options.requestToJoinEnabled ? Constants.communityChatOnRequestAccess : Constants.communityChatPublicAccess, + pinMessagesAllowedForMembers: generalViewLayout.options.pinMessagesEnabled, }, - bannerJsonStr: JSON.stringify({imagePath: String(bannerPicker.source).replace("file://", ""), cropRect: bannerPicker.cropRect}) + bannerJsonStr: JSON.stringify({imagePath: String(generalViewLayout.bannerPath).replace("file://", ""), cropRect: generalViewLayout.bannerCropRect}) } } diff --git a/ui/imports/shared/panels/NoImageUploadedPanel.qml b/ui/imports/shared/panels/NoImageUploadedPanel.qml index 565d4fccfc..f4b62cb121 100644 --- a/ui/imports/shared/panels/NoImageUploadedPanel.qml +++ b/ui/imports/shared/panels/NoImageUploadedPanel.qml @@ -16,41 +16,59 @@ Control { id: root /*! - \qmlproperty alias StatusImageSelector::uploadText. + \qmlproperty alias NoImageUploadedPanel::uploadText. This property holds the main image upload text value. */ property alias uploadText: uploadText.text /*! - \qmlproperty alias StatusImageSelector::additionalText. + \qmlproperty alias NoImageUploadedPanel::additionalText. This property holds an additional text value. */ property alias additionalText: additionalText.text /*! - \qmlproperty alias StatusImageSelector::showAdditionalInfo. + \qmlproperty alias NoImageUploadedPanel::showAdditionalInfo. This property holds if the additional text is shown or not. */ property alias showAdditionalInfo: additionalText.visible /*! - \qmlproperty alias StatusImageSelector::additionalTextPixelSize. + \qmlproperty alias NoImageUploadedPanel::additionalTextPixelSize. This property holds the additional text font pixel size value. */ property alias additionalTextPixelSize: additionalText.font.pixelSize /*! - \qmlproperty color StatusImageSelector::uploadTextColor. + \qmlproperty color NoImageUploadedPanel::uploadTextColor. This property sets the upload text color. */ property color uploadTextColor: Theme.palette.baseColor1 /*! - \qmlproperty color StatusImageSelector::imgColor. + \qmlproperty color NoImageUploadedPanel::imgColor. This property sets the image color. */ property color imgColor: Theme.palette.baseColor1 + /*! + \qmlproperty alias NoImageUploadedPanel::contentSpacing. + This property sets the content spacing. + */ + property alias contentSpacing: content.spacing + + /*! + \qmlproperty alias NoImageUploadedPanel::iconWidth. + This property sets the content icon width. + */ + property alias iconWidth: imageImg.width + + /*! + \qmlproperty alias NoImageUploadedPanel::iconHeight. + This property sets the content icon height. + */ + property alias iconHeight: imageImg.height + QtObject { id: d @@ -58,7 +76,7 @@ Control { } contentItem: ColumnLayout { - + id: content Image { id: imageImg source: Style.svg("images_icon") @@ -79,13 +97,13 @@ Control { text: qsTr("Upload") Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter - Layout.topMargin: 5 Layout.preferredWidth: root.width - 2 * d.imageSelectorPadding font.pixelSize: Theme.primaryTextFontSize color: root.uploadTextColor wrapMode: Text.WordWrap lineHeight: 1.2 horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter } StatusBaseText { @@ -94,7 +112,6 @@ Control { text: qsTr("Wide aspect ratio is optimal") Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter visible: false - Layout.topMargin: 5 font.pixelSize: Theme.primaryTextFontSize color: Theme.palette.baseColor1 }