status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-01-17 18:11:54 +00:00
Code Issues Projects Releases Wiki Activity

feat: Update Edit community settings based on new design

Browse Source 
[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
This commit is contained in:
Alex Jbanca 2023-06-30 00:52:16 +03:00 committed by Alex Jbanca
parent 0cd7829d62
commit 0efca3f0bd
21 changed files with 347 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
storybook/PagesModel.qml
View File

@ -177,6 +177,10 @@ ListModel {
title: "PrivilegedTokenArtworkPanel"
section: "Panels"
}
ListElement {
title: "EditSettingsPanel"
section: "Panels"
}
ListElement {
title: "BurnTokensPopup"
section: "Popups"

3
storybook/figma.json
View File

@ -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"
]
}

48
storybook/pages/CommunityInfoEditor.qml
View File

@ -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")
}
}
}

33
storybook/pages/EditSettingsPanelPage.qml Normal file
View File

@ -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
}
}
}

6
test/ui-test/testSuites/suite_communities/shared/scripts/community_names.py
View File

@ -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}

4
test/ui-test/testSuites/suite_communities/shared/scripts/community_portal_names.py
View File

@ -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}

11
ui/app/AppLayouts/Communities/controls/BannerPicker.qml
View File

@ -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
}
}
}

6
ui/app/AppLayouts/Communities/controls/DescriptionInput.qml
View File

@ -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

137
ui/app/AppLayouts/Communities/controls/EditCommunitySettingsForm.qml Normal file
View File

@ -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
}
}
}

2
ui/app/AppLayouts/Communities/controls/IntroMessageInput.qml
View File

@ -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

7
ui/app/AppLayouts/Communities/controls/LogoPicker.qml
View File

@ -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 {

2
ui/app/AppLayouts/Communities/controls/NameInput.qml
View File

@ -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")

3
ui/app/AppLayouts/Communities/controls/Options.qml
View File

@ -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()
}

35
ui/app/AppLayouts/Communities/controls/TagsPicker.qml
View File

@ -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
}
}
}

1
ui/app/AppLayouts/Communities/controls/qmldir
View File

@ -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

2
ui/app/AppLayouts/Communities/layouts/qmldir
View File

@ -1 +1 @@
SettingsPage 1.0 SettingsPage.qml
SettingsPage 1.0 SettingsPage.qml

156
ui/app/AppLayouts/Communities/panels/EditSettingsPanel.qml
View File

@ -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 {

2
ui/app/AppLayouts/Communities/panels/TagsPanel.qml
View File

@ -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")

1
ui/app/AppLayouts/Communities/panels/qmldir
View File

@ -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

112
ui/app/AppLayouts/Communities/popups/CreateCommunityPopup.qml
View File

@ -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})
}
}

35
ui/imports/shared/panels/NoImageUploadedPanel.qml
View File

@ -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
}