feat(storybook): Added `CommunityPermissionsSettingsPanel`

- Added `CommunityPermissionsSettingsPanel`. - Created panel item editor and basic panel editor layout for `CommunityPermissionsSettingsPanelPage`. Still not linked to a model. - Added mocked data for collectibles and tokens. - Created `ChannelsModel` mocked data. - Added edit / duplicate / remove signals logs.
2022-11-24 17:23:54 +01:00 · 2022-11-24 17:23:54 +01:00 · 1db0a0077d
parent 1cbb3e2ad3
commit 1db0a0077d
12 changed files with 377 additions and 1 deletions
--- a/storybook/PagesModel.qml
+++ b/storybook/PagesModel.qml
@ -37,6 +37,10 @@ ListModel {
        title: "UserListPanel"
        section: "Panels"
    }
+    ListElement {
+         title: "CommunityPermissionsSettingsPanel"
+         section: "Panels"
+    }
    ListElement {
        title: "InviteFriendsToCommunityPopup"
        section: "Popups"
--- a/storybook/figma.json
+++ b/storybook/figma.json
@ -55,5 +55,10 @@
    "StatusCommunityCard": [
        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416159",
        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416160"
+    ],
+    "CommunityPermissionsSettingsPanel": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2992%3A367890&t=IfHHp5GSPo1j9m5j-0",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480020&t=IfHHp5GSPo1j9m5j-0",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A484715&t=IfHHp5GSPo1j9m5j-0"
    ]
 }
--- a/storybook/pages/CommunityPermissionsSettingItemEditor.qml
+++ b/storybook/pages/CommunityPermissionsSettingItemEditor.qml
@ -0,0 +1,109 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import Storybook 1.0
+import Models 1.0
+
+ColumnLayout {
+    id: root
+
+    property string panelText
+    property string name
+    property url icon
+    property double amount
+    property bool isAmountVisible: false
+    property bool isENS
+    property bool isENSVisible: false
+    property bool isExpression: false
+    property bool isAnd: true
+
+    Label {
+        Layout.fillWidth: true
+        text: root.panelText
+        font.weight: Font.Bold
+    }
+
+    RowLayout {
+        Layout.fillWidth: true
+        Layout.preferredHeight: 50
+
+        Rectangle {
+            border.color: 'gray'
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            Image {
+                anchors.fill: parent
+                anchors.margins: 1
+                fillMode: Image.PreserveAspectFit
+                source: root.icon
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: iconSelector.open()
+
+                ImageSelectPopup {
+                    id: iconSelector
+
+                    parent: root
+                    anchors.centerIn: parent
+                    width: parent.width * 0.8
+                    height: parent.height * 0.8
+
+                    model: IconModel {}
+
+                    onSelected: {
+                        root.icon = icon
+                        close()
+                    }
+                }
+            }
+        }
+    }
+
+    ColumnLayout {
+        Label {
+            Layout.fillWidth: true
+            text: "Type"
+        }
+        TextField {
+            Layout.fillWidth: true
+            text: root.name
+            onTextChanged: root.name = text
+        }
+    }
+
+    ColumnLayout {
+        visible: root.isAmountVisible
+        Label {
+            Layout.fillWidth: true
+            text: "Amount"
+        }
+        TextField {
+            Layout.fillWidth: true
+            text: root.amount
+            onTextChanged: root.amount = text
+        }
+    }
+
+    CheckBox {
+        visible: root.isENSVisible
+        text: "Is ENS name"
+        checked: root.isENS
+        onToggled: root.isENS = checked
+    }
+
+    Switch {
+        visible: root.isExpression
+        text: "OR -- AND"
+        checked: root.isAnd
+        onToggled: root.isAnd = checked
+    }
+
+    Button {
+        Layout.fillWidth: true
+        text: "Add"
+    }
+}
--- a/storybook/pages/CommunityPermissionsSettingsPanelEditor.qml
+++ b/storybook/pages/CommunityPermissionsSettingsPanelEditor.qml
@ -0,0 +1,46 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import Storybook 1.0
+import Models 1.0
+
+ScrollView {
+    id: root
+
+    property var model
+
+    ScrollBar.vertical: ScrollBar { x: root.width }
+
+    ColumnLayout {
+        spacing: 25
+        CommunityPermissionsSettingItemEditor {
+            panelText: "Who holds"
+            name: "Socks"
+            icon: ""
+            amount: 11.2
+            isAmountVisible: true
+            isENS: false
+            isENSVisible: true
+            isExpression: true
+            isAnd: true
+        }
+
+        CommunityPermissionsSettingItemEditor {
+            panelText: "Is allowed to"
+            name: "Moderate"
+            icon: ""
+        }
+
+        CommunityPermissionsSettingItemEditor {
+            panelText: "In"
+            name: "#general"
+            icon: ""
+        }
+        CheckBox {
+            text: "Permission is private"
+            checked: true//model.isPrivate
+            //onToggled: model.isPrivate = checked
+        }
+    }
+}
--- a/storybook/pages/CommunityPermissionsSettingsPanelPage.qml
+++ b/storybook/pages/CommunityPermissionsSettingsPanelPage.qml
@ -0,0 +1,54 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import AppLayouts.Chat.panels.communities 1.0
+import AppLayouts.Chat.stores 1.0
+
+import Storybook 1.0
+import Models 1.0
+
+SplitView {
+    Logs { id: logs }
+
+    SplitView {
+        orientation: Qt.Vertical
+        SplitView.fillWidth: true
+
+        Item {
+            SplitView.fillWidth: true
+            SplitView.fillHeight: true
+            CommunityPermissionsSettingsPanel {
+                anchors {
+                    fill: parent
+                    topMargin: 50
+                }
+                store: CommunitiesStore {
+                    tokensModel: TokensModel {}
+                    collectiblesModel: CollectiblesModel {}
+                    channelsModel: ChannelsModel {}
+
+                    function editPermission(index) {
+                        logs.logEvent("CommunitiesStore::editPermission - index: " + index)
+                    }
+
+                    function duplicatePermission(index) {
+                        logs.logEvent("CommunitiesStore::duplicatePermission - index: " + index)
+                    }
+
+                    function removePermission(index) {
+                        logs.logEvent("CommunitiesStore::removePermission - index: " + index)
+                    }
+                }
+            }
+        }
+
+        LogsAndControlsPanel {
+            id: logsAndControlsPanel
+
+            SplitView.minimumHeight: 100
+            SplitView.preferredHeight: 150
+
+            logsView.logText: logs.logText
+        }
+    }
+}
--- a/storybook/src/Models/ChannelsModel.qml
+++ b/storybook/src/Models/ChannelsModel.qml
@ -0,0 +1,17 @@
+import QtQuick 2.0
+
+ListModel {
+    Component.onCompleted:
+        append([
+                   {
+                       key: "wellcome",
+                       iconSource: ModelsData.tokens.inch,
+                       name: "#wellcome"
+                   },
+                   {
+                       key: "general",
+                       iconSource: ModelsData.tokens.inch,
+                       name: "#general"
+                   }
+               ])
+}
--- a/storybook/src/Models/CollectiblesModel.qml
+++ b/storybook/src/Models/CollectiblesModel.qml
@ -0,0 +1,63 @@
+import QtQuick 2.0
+
+ListModel {
+    Component.onCompleted:
+        append([
+                   {
+                       key: "Anniversary",
+                       iconSource: ModelsData.collectibles.anniversary,
+                       name: "Anniversary",
+                       category: "Community collectibles"
+                   },
+                   {
+                       key: "CryptoKitties",
+                       iconSource: ModelsData.collectibles.cryptoKitties,
+                       name: "CryptoKitties",
+                       category: "Your collectibles",
+                       subItems: [
+                           {
+                               key: "Kitty1",
+                               iconSource: ModelsData.collectibles.kitty1,
+                               imageSource: ModelsData.collectibles.kitty1Big,
+                               name: "Furbeard"
+                           },
+                           {
+                               key: "Kitty2",
+                               iconSource: ModelsData.collectibles.kitty2,
+                               imageSource: ModelsData.collectibles.kitty2Big,
+                               name: "Magicat"
+                           },
+                           {
+                               key: "Kitty3",
+                               iconSource: ModelsData.collectibles.kitty3,
+                               imageSource: ModelsData.collectibles.kitty3Big,
+                               name: "Happy Meow"
+                           },
+                           {
+                               key: "Kitty4",
+                               iconSource: ModelsData.collectibles.kitty4,
+                               imageSource: ModelsData.collectibles.kitty4Big,
+                               name: "Furbeard-2"
+                           },
+                           {
+                               key: "Kitty5",
+                               iconSource: ModelsData.collectibles.kitty5,
+                               imageSource: ModelsData.collectibles.kitty5Big,
+                               name: "Magicat-3"
+                           }
+                       ]
+                   },
+                   {
+                       key: "SuperRare",
+                       iconSource: ModelsData.collectibles.superRare,
+                       name: "SuperRare",
+                       category: "Your collectibles"
+                   },
+                   {
+                       key: "Custom",
+                       iconSource: ModelsData.collectibles.custom,
+                       name: "Custom Collectible",
+                       category: "All collectibles"
+                   }
+               ])
+}
--- a/storybook/src/Models/ModelsData.qml
+++ b/storybook/src/Models/ModelsData.qml
@ -1,6 +1,7 @@
 pragma Singleton

 import QtQuick 2.14
+import utils 1.0

 QtObject {
    readonly property QtObject icons: QtObject {
@ -30,4 +31,34 @@ QtObject {
                            "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 QtObject tokens: QtObject {
+        readonly property string socks: Style.png("tokens/SOCKS")
+        readonly property string zrx: Style.png("tokens/ZRX")
+        readonly property string inch: Style.png("tokens/CUSTOM-TOKEN")
+        readonly property string aave: Style.png("tokens/CUSTOM-TOKEN")
+        readonly property string amp: Style.png("tokens/CUSTOM-TOKEN")
+    }
+
+    readonly property QtObject collectibles: QtObject {
+        readonly property string anniversary: Style.png("collectibles/Anniversary")
+        readonly property string cryptoKitties: Style.png("collectibles/CryptoKitties")
+        readonly property string kitty1: Style.png("collectibles/Furbeard")
+        readonly property string kitty1Big: Style.png("collectibles/FurbeardBig")
+        readonly property string kitty2: Style.png("collectibles/Magicat")
+        readonly property string kitty2Big: Style.png("collectibles/MagicatBig")
+        readonly property string kitty3: Style.png("collectibles/HappyMeow")
+        readonly property string kitty3Big: Style.png("collectibles/HappyMeowBig")
+        readonly property string kitty4: Style.png("collectibles/Furbeard")
+        readonly property string kitty4Big: Style.png("collectibles/FurbeardBig")
+        readonly property string kitty5: Style.png("collectibles/Magicat")
+        readonly property string kitty5Big: Style.png("collectibles/MagicatBig")
+        readonly property string superRare: Style.png("collectibles/SuperRare")
+        readonly property string custom: Style.png("collectibles/SNT")
+    }
 }
+
+
+
+
--- a/storybook/src/Models/TokensModel.qml
+++ b/storybook/src/Models/TokensModel.qml
@ -0,0 +1,42 @@
+import QtQuick 2.0
+
+ListModel {
+    Component.onCompleted:
+        append([
+                   {
+                       key: "socks",
+                       iconSource: ModelsData.tokens.socks,
+                       name: "Unisocks",
+                       shortName: "SOCKS",
+                       category: "Community tokens"
+                   },
+                   {
+                       key: "zrx",
+                       iconSource: ModelsData.tokens.zrx,
+                       name: "Ox",
+                       shortName: "ZRX",
+                       category: "Listed tokens"
+                   },
+                   {
+                       key: "1inch",
+                       iconSource: ModelsData.tokens.inch,
+                       name: "1inch",
+                       shortName: "ZRX",
+                       category: "Listed tokens"
+                   },
+                   {
+                       key: "Aave",
+                       iconSource: ModelsData.tokens.aave,
+                       name: "Aave",
+                       shortName: "AAVE",
+                       category: "Listed tokens"
+                   },
+                   {
+                       key: "Amp",
+                       iconSource: ModelsData.tokens.amp,
+                       name: "Amp",
+                       shortName: "AMP",
+                       category: "Listed tokens"
+                   }
+               ])
+}
--- a/storybook/src/Models/qmldir
+++ b/storybook/src/Models/qmldir
@ -2,3 +2,6 @@ singleton ModelsData 1.0 ModelsData.qml
 IconModel 1.0 IconModel.qml
 BannerModel 1.0 BannerModel.qml
 UsersModel 1.0 UsersModel.qml
+TokensModel 1.0 TokensModel.qml
+CollectiblesModel 1.0 CollectiblesModel.qml
+ChannelsModel 1.0 ChannelsModel.qml
--- a/ui/app/AppLayouts/Chat/panels/communities/qmldir
+++ b/ui/app/AppLayouts/Chat/panels/communities/qmldir
@ -1,2 +1,3 @@
 CommunityProfilePopupInviteFriendsPanel 1.0 CommunityProfilePopupInviteFriendsPanel.qml
 CommunityProfilePopupInviteMessagePanel 1.0 CommunityProfilePopupInviteMessagePanel.qml
+CommunityPermissionsSettingsPanel 1.0 CommunityPermissionsSettingsPanel.qml
--- a/ui/app/AppLayouts/Chat/stores/qmldir
+++ b/ui/app/AppLayouts/Chat/stores/qmldir
@ -1,3 +1,4 @@
 StickerData 1.0 StickerData.qml
 StickerPackData 1.0 StickerPackData.qml
 StickersStore 1.0 StickersStore.qml
+CommunitiesStore 1.0 CommunitiesStore.qml