feat(storybook): Added `CommunityPermissionsViewPage` to storybook

- Created page and added editor for specific page.
- Created needed mocked models.
- Added background in permission related pages to ensure correct dark mode visualization.

storybook/PagesModel.qml

@@ -21,6 +21,10 @@ ListModel {
          title: "AboutView"
          section: "Views"
     }
+    ListElement {
+         title: "CommunityPermissionsView"
+         section: "Views"
+    }
     ListElement {
          title: "StatusCommunityCard"
          section: "Panels"

storybook/figma.json

@@ -60,5 +60,8 @@
         "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"
+    ],
+    "CommunityPermissionsView": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A484715&t=IfHHp5GSPo1j9m5j-0"
     ]
 }

storybook/pages/CommunityPermissionsSettingItemEditor.qml

@@ -10,13 +10,13 @@ ColumnLayout {
 
     property string panelText
     property string name
-    property url icon
+    property string icon
-    property double amount
+    property string amountText
     property bool isAmountVisible: false
-    property bool isENS
-    property bool isENSVisible: false
     property bool isExpression: false
     property bool isAnd: true
+    property bool isImageSelectorVisible: true
+    property var iconsModel
 
     Label {
         Layout.fillWidth: true
@@ -25,13 +25,13 @@ ColumnLayout {
     }
 
     RowLayout {
-        Layout.fillWidth: true
-        Layout.preferredHeight: 50
-
         Rectangle {
-            border.color: 'gray'
+            id: image
-            Layout.fillWidth: true
+            visible: root.isImageSelectorVisible
-            Layout.fillHeight: true
+            border.color: 'lightgrey'
+            radius: 16
+            Layout.preferredHeight: 50
+            Layout.preferredWidth: 50
 
             Image {
                 anchors.fill: parent
@@ -49,10 +49,10 @@ ColumnLayout {
 
                     parent: root
                     anchors.centerIn: parent
-                    width: parent.width * 0.8
+                    width: 200
-                    height: parent.height * 0.8
+                    height: 250
 
-                    model: IconModel {}
+                    model: root.iconsModel
 
                     onSelected: {
                         root.icon = icon
@@ -61,38 +61,39 @@ ColumnLayout {
                 }
             }
         }
-    }
 
-    ColumnLayout {
+        ColumnLayout {
-        Label {
+            Label {
-            Layout.fillWidth: true
+                Layout.fillWidth: true
-            text: "Type"
+                text: "Type"
+            }
+            TextField {
+                background: Rectangle {
+                    radius: 16
+                    border.color: 'lightgrey'
+                }
+                Layout.fillWidth: true
+                text: root.name
+                onTextChanged: root.name = text
+            }
         }
-        TextField {
-            Layout.fillWidth: true
-            text: root.name
-            onTextChanged: root.name = text
-        }
-    }
 
-    ColumnLayout {
+        ColumnLayout {
-        visible: root.isAmountVisible
+            visible: root.isAmountVisible
-        Label {
+            Label {
-            Layout.fillWidth: true
+                Layout.fillWidth: true
-            text: "Amount"
+                text: "Amount"
+            }
+            TextField {
+                background: Rectangle {
+                    radius: 16
+                    border.color: 'lightgrey'
+                }
+                Layout.fillWidth: true
+                text: root.amountText
+                onTextChanged: root.amountText = text
+            }
         }
-        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 {
@@ -101,9 +102,4 @@ ColumnLayout {
         checked: root.isAnd
         onToggled: root.isAnd = checked
     }
-
-    Button {
-        Layout.fillWidth: true
-        text: "Add"
-    }
 }

storybook/pages/CommunityPermissionsSettingsPanelEditor.qml

@@ -4,43 +4,154 @@ import QtQuick.Layouts 1.14
 
 import Storybook 1.0
 import Models 1.0
+import StatusQ.Core.Utils 0.1
 
-ScrollView {
+Flickable {
     id: root
 
     property var model
 
-    ScrollBar.vertical: ScrollBar { x: root.width }
+    QtObject {
+        id: d
+        property string newName
+        property double newAmount
+        property string newImageSource
+        property string newChannelName
+        property string newChannelIconSource
+    }
+
+    contentWidth: root.width
+    contentHeight: globalContent.implicitHeight
 
     ColumnLayout {
-        spacing: 25
+        id: globalContent
-        CommunityPermissionsSettingItemEditor {
+        spacing: 10
-            panelText: "Who holds"
+        anchors.fill: parent
-            name: "Socks"
-            icon: ""
-            amount: 11.2
-            isAmountVisible: true
-            isENS: false
-            isENSVisible: true
-            isExpression: true
-            isAnd: true
-        }
 
-        CommunityPermissionsSettingItemEditor {
+        Repeater {
-            panelText: "Is allowed to"
+            model: root.model
-            name: "Moderate"
-            icon: ""
-        }
 
-        CommunityPermissionsSettingItemEditor {
+            Rectangle {
-            panelText: "In"
+                radius: 16
-            name: "#general"
+                color: "whitesmoke"
-            icon: ""
+                Layout.preferredHeight: content.implicitHeight + 50
-        }
+                Layout.fillWidth: true
-        CheckBox {
+
-            text: "Permission is private"
+                ColumnLayout {
-            checked: true//model.isPrivate
+                    id: content
-            //onToggled: model.isPrivate = checked
+                    spacing: 25
+                    anchors.fill: parent
+                    anchors.margins: 20
+
+                    Label {
+                        Layout.fillWidth: true
+                        text: "Permission " + (model.index)
+                        font.weight: Font.Bold
+                        font.pixelSize: 17
+                    }
+
+                    ColumnLayout {
+                        Repeater {
+                            model: holdingsListModel
+
+                            CommunityPermissionsSettingItemEditor {
+                                Layout.fillWidth: true
+                                panelText: "Who holds [item " + model.index + "]"
+                                name: model.name
+                                icon: model.imageSource
+                                amountText: model.amount
+                                isAmountVisible: true
+                                isExpression: model.operator !== OperatorsUtils.Operators.None
+                                isAnd: model.operator === OperatorsUtils.Operators.And
+                                iconsModel: TokensCollectiblesIconsModel {}
+                                onIsAndChanged: {
+                                    if(model.operator !== OperatorsUtils.Operators.None)
+                                    {
+                                        if(isAnd) model.operator = OperatorsUtils.Operators.And
+                                        else model.operator = OperatorsUtils.Operators.Or
+                                    }
+                                }
+                                onNameChanged: model.name = name
+                                onIconChanged: model.imageSource = icon
+                                onAmountTextChanged: model.amount = parseFloat(amountText)
+                            }
+                        }
+                    }
+
+                    CommunityPermissionsSettingItemEditor {
+                        panelText: "New holdings item"
+                        name: d.newName
+                        icon: d.newImageSource
+                        amountText: d.newAmount
+                        isAmountVisible: true
+                        iconsModel: TokensCollectiblesIconsModel {}
+                        isExpression: false
+                        onNameChanged: d.newName = name
+                        onIconChanged: d.newImageSource = icon
+                        onAmountTextChanged: d.newAmount = parseFloat(amountText)
+                    }
+
+                    Button {
+                        enabled: d.newName && d.newAmount && d.newImageSource
+                        Layout.fillWidth: true
+                        text: "Add new holding"
+                        onClicked: {
+                            model.holdingsListModel.append([{
+                                                                operator: OperatorsUtils.Operators.And,
+                                                                type: 1,
+                                                                key: d.newName,
+                                                                name: d.newName,
+                                                                amount: d.newAmount,
+                                                                imageSource: d.newImageSource
+                                                         }])
+                        }
+                    }
+
+                    ColumnLayout {
+                        Repeater {
+                             model: channelsListModel
+                             CommunityPermissionsSettingItemEditor {
+                                 panelText: "In [item " + model.index + "]"
+                                 name: model.name
+                                 icon: model.iconSource
+                                 iconsModel: TokensCollectiblesIconsModel {}
+                                 onNameChanged: model.name = name
+                                 onIconChanged: model.iconSource = icon
+                             }
+                        }
+                    }
+
+
+                    CommunityPermissionsSettingItemEditor {
+                        Layout.fillWidth: true
+                        panelText: "New In item"
+                        name: d.newChannelName
+                        icon: d.newChannelIconSource
+                        iconsModel: TokensCollectiblesIconsModel {}
+                        onNameChanged: d.newChannelName = name
+                        onIconChanged: d.newChannelIconSource = icon
+                    }
+
+                    Button {
+                        enabled: d.newChannelIconSource && d.newChannelName
+                        Layout.fillWidth: true
+                        text: "Add new channel"
+                        onClicked: {
+                            model.channelsListModel.append([{
+                                                                key: d.newChannelName,
+                                                                name: d.newChannelName,
+                                                                iconSource: d.newChannelIconSource
+                                                         }])
+                        }
+                    }
+
+                    CheckBox {
+                        text: "Permission is private"
+                        checked: model.isPrivate
+                        onToggled: model.isPrivate = checked
+                    }
+                }
+            }
         }
     }
 }

storybook/pages/CommunityPermissionsSettingsPanelPage.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.14
 
 import AppLayouts.Chat.panels.communities 1.0
 import AppLayouts.Chat.stores 1.0
+import StatusQ.Core.Theme 0.1
 
 import Storybook 1.0
 import Models 1.0
@@ -14,9 +15,10 @@ SplitView {
         orientation: Qt.Vertical
         SplitView.fillWidth: true
 
-        Item {
+        Rectangle {
             SplitView.fillWidth: true
             SplitView.fillHeight: true
+            color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
             CommunityPermissionsSettingsPanel {
                 anchors {
                     fill: parent

storybook/pages/CommunityPermissionsViewPage.qml

@@ -0,0 +1,68 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import AppLayouts.Chat.views.communities 1.0
+import AppLayouts.Chat.stores 1.0
+
+import Storybook 1.0
+import Models 1.0
+import StatusQ.Core.Theme 0.1
+
+SplitView {
+    Logs { id: logs }
+
+    SplitView {
+        orientation: Qt.Vertical
+        SplitView.fillWidth: true
+
+        Rectangle {
+            SplitView.fillWidth: true
+            SplitView.fillHeight: true
+            color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
+            CommunityPermissionsView {
+                anchors {
+                    fill: parent
+                    margins: 50
+                }
+                store: CommunitiesStore {
+                    permissionsModel: PermissionsModel { id: mockedModel }
+
+                    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
+        }
+    }
+
+    Pane {
+        SplitView.minimumWidth: 300
+        SplitView.preferredWidth: 300
+
+        CommunityPermissionsSettingsPanelEditor {
+            anchors.fill: parent
+            model: mockedModel
+        }
+    }
+}
+
+
+
+

storybook/src/Models/ChannelsModel.qml

@@ -4,9 +4,9 @@ ListModel {
     Component.onCompleted:
         append([
                    {
-                       key: "wellcome",
+                       key: "welcome",
                        iconSource: ModelsData.tokens.inch,
-                       name: "#wellcome"
+                       name: "#welcome"
                    },
                    {
                        key: "general",

storybook/src/Models/PermissionsModel.qml

@@ -0,0 +1,113 @@
+import QtQuick 2.0
+
+import Models 1.0
+import StatusQ.Core.Utils 0.1
+import AppLayouts.Chat.controls.community 1.0
+
+ListModel {
+    id: root
+
+    Component.onCompleted:
+        append([
+                   {
+                       isPrivate: true,
+                       holdingsListModel: root.createHoldingsModel1(),
+                       permissionsObjectModel: {
+                           key: 1,
+                           text: "Become member",
+                           imageSource: "in-contacts"
+                       },
+                       channelsListModel: root.createChannelsModel1()
+                   },
+                   {
+                       isPrivate: false,
+                       holdingsListModel: root.createHoldingsModel2(),
+                       permissionsObjectModel: {
+                           key: 2,
+                           text: "View and post",
+                           imageSource: "edit"
+                       },
+                       channelsListModel: root.createChannelsModel2()
+                   }
+               ])
+
+    function createHoldingsModel1() {
+        var holdings = []
+        holdings.push({
+                          operator: OperatorsUtils.Operators.None,
+                          type: HoldingTypes.Type.Token,
+                          key: "SOCKS",
+                          name: "SOCKS",
+                          amount: 1.2,
+                          imageSource: ModelsData.tokens.socks
+                      });
+        holdings.push({
+                          operator: OperatorsUtils.Operators.Or,
+                          type: HoldingTypes.Type.Token,
+                          key: "ZRX",
+                          name: "ZRX",
+                          amount: 15,
+                          imageSource: ModelsData.tokens.zrx
+                      });
+        holdings.push({
+                          operator: OperatorsUtils.Operators.And,
+                          type: HoldingTypes.Type.Collectible,
+                          key: "Furbeard",
+                          name: "Furbeard",
+                          amount: 12,
+                          imageSource: ModelsData.collectibles.kitty1
+                      });
+        return holdings
+    }
+
+    function createHoldingsModel2() {
+        var holdings = []
+        holdings.push({
+                          operator: OperatorsUtils.Operators.None,
+                          type: HoldingTypes.Type.Collectible,
+                          key: "Happy Meow",
+                          name: "Happy Meow",
+                          amount: 50.25,
+                          imageSource: ModelsData.collectibles.kitty3
+                      });
+        holdings.push({
+                          operator: OperatorsUtils.Operators.And,
+                          type: HoldingTypes.Type.Collectible,
+                          key: "AMP",
+                          name: "AMP",
+                          amount: 11,
+                          imageSource: ModelsData.tokens.amp
+                      });
+        return holdings
+    }
+
+    function createChannelsModel1() {
+        var channels = []
+        channels.push({
+                          key: "help",
+                          iconSource: ModelsData.tokens.zrx,
+                          name: "#help"
+                      });
+        channels.push({
+                          key: "faq",
+                          iconSource: ModelsData.tokens.zrx,
+                          name: "#faq"
+                      });
+        return channels
+    }
+
+    function createChannelsModel2() {
+        var channels = []
+        channels.push({
+                          key: "welcome",
+                          iconSource: ModelsData.tokens.inch,
+                          name: "#welcome"
+                      });
+        channels.push({
+                          key: "general",
+                          iconSource: ModelsData.tokens.inch,
+                          name: "#general"
+                      });
+        return channels
+    }
+}

storybook/src/Models/TokensCollectiblesIconsModel.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.0
+
+import QtQuick 2.14
+
+ListModel {
+    Component.onCompleted: append([
+                                      {image: ModelsData.tokens.socks},
+                                      {image: ModelsData.tokens.zrx},
+                                      {image: ModelsData.tokens.inch},
+                                      {image: ModelsData.collectibles.anniversary},
+                                      {image: ModelsData.collectibles.cryptoKitties},
+                                      {image: ModelsData.collectibles.kitty1},
+                                      {image: ModelsData.collectibles.kitty2},
+                                      {image: ModelsData.collectibles.kitty3},
+                                      {image: ModelsData.collectibles.superRare},
+                                      {image: ModelsData.collectibles.custom}])
+}

storybook/src/Models/qmldir

@@ -5,3 +5,5 @@ UsersModel 1.0 UsersModel.qml
 TokensModel 1.0 TokensModel.qml
 CollectiblesModel 1.0 CollectiblesModel.qml
 ChannelsModel 1.0 ChannelsModel.qml
+PermissionsModel 1.0 PermissionsModel.qml
+TokensCollectiblesIconsModel 1.0 TokensCollectiblesIconsModel.qml

ui/app/AppLayouts/Chat/controls/community/qmldir

@@ -1,2 +1,2 @@
 HoldingTypes 1.0 HoldingTypes.qml
-PermissionItem 1.0 PermissionItem.qml
+PermissionItem 1.0 PermissionItem.qml

ui/app/AppLayouts/Chat/stores/CommunitiesStore.qml

@@ -80,7 +80,7 @@ QtObject {
 
     // TODO: Replace to real data, now dummy model
     property var  channelsModel: ListModel {
-        ListElement { key: "wellcome"; iconSource: "qrc:imports/assets/png/tokens/CUSTOM-TOKEN.png"; name: "#welcome"}
+        ListElement { key: "welcome"; iconSource: "qrc:imports/assets/png/tokens/CUSTOM-TOKEN.png"; name: "#welcome"}
         ListElement { key: "general"; iconSource: "qrc:imports/assets/png/tokens/CUSTOM-TOKEN.png"; name: "#general"}
     }