feat(storybook): extended editing of communities portal page
- added tags editor - added active members editor - refactored icon/banner models (removed imperative transforms) - refactored icon/banner selection (removed single shots) closes: #8032
This commit is contained in:
Patryk Osmaczko
osmaczko
parent
bb28c4e30a
commit
db2be47ee1
File diff suppressed because one or more lines are too long
|
|
@ -7,6 +7,7 @@ import AppLayouts.CommunitiesPortal.stores 1.0
|
|||
import SortFilterProxyModel 0.2
|
||||
|
||||
import Storybook 1.0
|
||||
import Models 1.0
|
||||
|
||||
import utils 1.0
|
||||
|
||||
|
|
@ -24,12 +25,7 @@ SplitView {
|
|||
communitiesStore: CommunitiesStore {
|
||||
readonly property string locale: ""
|
||||
readonly property int unreadNotificationsCount: 42
|
||||
readonly property string communityTags:
|
||||
JSON.stringify({"Activism":"✊","Art":"🎨","Blockchain":"🔗","Books & blogs":"📚","Career":"💼","Collaboration":"🤝","Commerce":"🛒","Culture":"🎎","DAO":"🚀","DIY":"🔨","DeFi":"📈",
|
||||
"Design":"🧩","Education":"🎒","Entertainment":"🍿","Environment":"🌿","Ethereum":"Ξ","Event":"🗓","Fantasy":"🧙♂️","Fashion":"🧦","Food":"🌶","Gaming":"🎮","Global":"🌍",
|
||||
"Health":"🧠","Hobby":"📐","Innovation":"🧪","Language":"📜","Lifestyle":"✨","Local":"📍","Love":"❤️","Markets":"💎","Movies & TV":"🎞","Music":"🎶","NFT":"🖼","NSFW":"🍆",
|
||||
"News":"🗞","Non-profit":"🙏","Org":"🏢","Pets":"🐶","Play":"🎲","Podcast":"🎙️","Politics":"🗳️","Privacy":"👻","Product":"🍱","Psyche":"🍁","Security":"🔒","Social":"☕",
|
||||
"Software dev":"👩💻","Sports":"⚽️","Tech":"📱","Travel":"🗺","Vehicles":"🚕","Web3":"🌐"})
|
||||
readonly property string communityTags: ModelsData.communityTags
|
||||
readonly property var curatedCommunitiesModel: SortFilterProxyModel {
|
||||
|
||||
sourceModel: CommunitiesPortalDummyModel { id: mockedModel }
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import QtQuick.Controls 2.14
|
|||
import QtQuick.Layouts 1.14
|
||||
|
||||
import Storybook 1.0
|
||||
import Models 1.0
|
||||
|
||||
ListView {
|
||||
id: root
|
||||
|
|
@ -10,43 +11,11 @@ ListView {
|
|||
spacing: 25
|
||||
ScrollBar.vertical: ScrollBar { x: root.width }
|
||||
|
||||
ImageSelectPopup {
|
||||
id: iconSelector
|
||||
|
||||
parent: root
|
||||
anchors.centerIn: parent
|
||||
width: parent.width * 0.8
|
||||
height: parent.height * 0.8
|
||||
|
||||
model: ListModel {
|
||||
id: iconsModel
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
const uniqueIcons = StorybookUtils.getUniqueValuesFromModel(root.model, "icon")
|
||||
uniqueIcons.map(image => iconsModel.append( { image }))
|
||||
}
|
||||
}
|
||||
|
||||
ImageSelectPopup {
|
||||
id: bannerSelector
|
||||
|
||||
parent: root
|
||||
anchors.centerIn: parent
|
||||
width: parent.width * 0.8
|
||||
height: parent.height * 0.8
|
||||
|
||||
model: ListModel {
|
||||
id: bannersModel
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
const uniqueBanners = StorybookUtils.getUniqueValuesFromModel(root.model, "banner")
|
||||
uniqueBanners.map(image => bannersModel.append( { image }))
|
||||
}
|
||||
}
|
||||
|
||||
delegate: ColumnLayout {
|
||||
id: rootDelegate
|
||||
|
||||
readonly property var _model: model
|
||||
|
||||
width: ListView.view.width
|
||||
|
||||
Label {
|
||||
|
|
@ -87,6 +56,49 @@ ListView {
|
|||
}
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: tagsSelector
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: contentItem.childrenRect.height + ScrollBar.horizontal.height
|
||||
|
||||
clip: true
|
||||
orientation: ListView.Horizontal
|
||||
spacing: 4
|
||||
|
||||
model: ListModel {
|
||||
id: communityTags
|
||||
Component.onCompleted: {
|
||||
const allTags = JSON.parse(ModelsData.communityTags)
|
||||
const selectedTags = JSON.parse(rootDelegate._model.tags)
|
||||
for (const key of Object.keys(allTags)) {
|
||||
const selected = selectedTags.find(tag => tag.name === key) !== undefined
|
||||
communityTags.append({ name: key, emoji: allTags[key], selected: selected });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
delegate: Button {
|
||||
text: model.name
|
||||
checkable: true
|
||||
checked: model.selected
|
||||
|
||||
onClicked: {
|
||||
model.selected = !model.selected
|
||||
|
||||
const selectedTags = []
|
||||
for (let i = 0; i < communityTags.count; ++i) {
|
||||
const tag = communityTags.get(i)
|
||||
if (tag.selected) selectedTags.push({ name: tag.name, emoji: tag.emoji })
|
||||
}
|
||||
|
||||
rootDelegate._model.tags = JSON.stringify(selectedTags)
|
||||
}
|
||||
}
|
||||
|
||||
ScrollBar.horizontal: ScrollBar {}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 50
|
||||
|
|
@ -105,12 +117,22 @@ ListView {
|
|||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
iconSelector.open()
|
||||
StorybookUtils.singleShotConnection(iconSelector.selected, icon => {
|
||||
model.icon = icon
|
||||
iconSelector.close()
|
||||
})
|
||||
onClicked: iconSelector.open()
|
||||
|
||||
ImageSelectPopup {
|
||||
id: iconSelector
|
||||
|
||||
parent: root
|
||||
anchors.centerIn: parent
|
||||
width: parent.width * 0.8
|
||||
height: parent.height * 0.8
|
||||
|
||||
model: IconModel {}
|
||||
|
||||
onSelected: {
|
||||
rootDelegate._model.icon = icon
|
||||
close()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -129,12 +151,22 @@ ListView {
|
|||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
bannerSelector.open()
|
||||
StorybookUtils.singleShotConnection(bannerSelector.selected, banner => {
|
||||
model.banner = banner
|
||||
bannerSelector.close()
|
||||
})
|
||||
onClicked: bannerSelector.open()
|
||||
|
||||
ImageSelectPopup {
|
||||
id: bannerSelector
|
||||
|
||||
parent: root
|
||||
anchors.centerIn: parent
|
||||
width: parent.width * 0.8
|
||||
height: parent.height * 0.8
|
||||
|
||||
model: BannerModel {}
|
||||
|
||||
onSelected: {
|
||||
rootDelegate._model.banner = icon
|
||||
close()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -169,6 +201,21 @@ ListView {
|
|||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
Label {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: "active:\t"
|
||||
}
|
||||
|
||||
SpinBox {
|
||||
editable: true
|
||||
height: 30
|
||||
from: 0; to: 10 * 1000 * 1000
|
||||
value: model.activeMembers
|
||||
onValueChanged: model.activeMembers = value
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
Label {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
import QtQuick 2.14
|
||||
|
||||
ListModel {
|
||||
Component.onCompleted: append([
|
||||
{image: ModelsData.banners.status},
|
||||
{image: ModelsData.banners.superRare},
|
||||
{image: ModelsData.banners.coinbase},
|
||||
{image: ModelsData.banners.dragonereum},
|
||||
{image: ModelsData.banners.cryptPunks},
|
||||
{image: ModelsData.banners.socks}])
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import QtQuick 2.14
|
||||
|
||||
ListModel {
|
||||
Component.onCompleted: append([
|
||||
{image: ModelsData.icons.cryptoKitty},
|
||||
{image: ModelsData.icons.superRare},
|
||||
{image: ModelsData.icons.coinbase},
|
||||
{image: ModelsData.icons.dragonereum},
|
||||
{image: ModelsData.icons.cryptPunks},
|
||||
{image: ModelsData.icons.socks},
|
||||
{image: ModelsData.icons.spotify},
|
||||
{image: ModelsData.icons.dribble}])
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,3 @@
|
|||
singleton ModelsData 1.0 ModelsData.qml
|
||||
IconModel 1.0 IconModel.qml
|
||||
BannerModel 1.0 BannerModel.qml
|
||||
|
|
@ -73,6 +73,7 @@ StatusScrollView {
|
|||
name: model.name
|
||||
description: model.description
|
||||
members: model.members
|
||||
activeUsers: model.activeMembers
|
||||
popularity: model.popularity
|
||||
categories: tagsJson.model
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue