feat(storybook/JoinPermissionsOverlayPanel): Created new storybook page

Created storybook page for `JoinPermissionOverlayPanel`.
Created needed storybook editor.
Added new and updated storybook related models.

storybook/PagesModel.qml

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

storybook/figma.json

@@ -90,5 +90,8 @@
     ],
     "CommunityNewPermissionView": [
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22253%3A486103&t=JrCIfks1zVzsk3vn-0"
+    ],
+    "JoinPermissionsOverlayPanel": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2365%3A291788&t=UOvsb3QLi26KmVrk-0"
     ]
 }

storybook/pages/CommunityPermissionsViewPage.qml

@@ -25,7 +25,8 @@ SplitView {
                     margins: 50
                 }
                 store: CommunitiesStore {
-                    permissionsModel: PermissionsModel { id: mockedModel }
+                    id: mockedCommunity
+                    permissionsModel: PermissionsModel.permissionsModel
 
                     function duplicatePermission(index) {
                         logs.logEvent("CommunitiesStore::duplicatePermission - index: " + index)
@@ -68,7 +69,7 @@ SplitView {
 
         CommunityPermissionsSettingsPanelEditor {
             anchors.fill: parent
-            model: mockedModel
+            model: mockedCommunity.permissionsModel
         }
     }
 }

storybook/pages/JoinCommunityPermissionsEditor.qml

@@ -0,0 +1,200 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import Models 1.0
+
+import utils 1.0
+
+ColumnLayout {
+    id: root
+
+    property string channelName: "#vip"
+    property bool joinCommunity: true // Otherwise, enter channel
+    property bool requirementsMet: true
+    property bool isInvitationPending: false
+    property bool isJoinRequestRejected: false
+    property bool requiresRequest: false
+    property var communityHoldings: PermissionsModel.shortPermissionsModel
+    property var viewOnlyHoldings: PermissionsModel.shortPermissionsModel
+    property var viewAndPostHoldings: PermissionsModel.shortPermissionsModel
+    property var moderateHoldings: PermissionsModel.shortPermissionsModel
+
+    spacing: 16
+
+    ColumnLayout {
+        Label {
+            Layout.fillWidth: true
+            text: "View type:"
+        }
+
+        RadioButton {
+            checked: true
+            text: "Join community"
+            onCheckedChanged: if(checked) d.joinCommunity =  true
+        }
+        RadioButton {
+            text: "Enter channel"
+            onCheckedChanged: if(checked) d.joinCommunity = false
+        }
+    }
+
+    ColumnLayout {
+        Label {
+            Layout.fillWidth: true
+            text: "Requirements met:"
+        }
+
+        CheckBox {
+            checked: root.requirementsMet
+            onCheckedChanged: root.requirementsMet = checked
+        }
+    }
+
+    ColumnLayout {
+        Label {
+            Layout.fillWidth: true
+            text: "Request pending:"
+        }
+
+        CheckBox {
+            checked: root.isInvitationPending
+            onCheckedChanged: root.isInvitationPending = checked
+        }
+    }
+
+    ColumnLayout {
+        Label {
+            Layout.fillWidth: true
+            text: "Request rejected:"
+        }
+
+        CheckBox {
+            checked: root.isJoinRequestRejected
+            onCheckedChanged: root.isJoinRequestRejected = checked
+        }
+    }
+
+    ColumnLayout {
+        visible: root.joinCommunity
+        Label {
+            Layout.fillWidth: true
+            text: "Requires request:"
+        }
+
+        CheckBox {
+            checked: root.requiresRequest
+            onCheckedChanged: root.requiresRequest = checked
+        }
+    }
+
+    ColumnLayout {
+        visible: root.joinCommunity
+        Label {
+            Layout.fillWidth: true
+            text: "Holdings model type:"
+        }
+
+        RadioButton {
+            checked: true
+            text: "Short model"
+            onCheckedChanged: if(checked) root.communityHoldings = PermissionsModel.shortPermissionsModel
+        }
+
+        RadioButton {
+            text: "Long model"
+            onCheckedChanged: if(checked) root.communityHoldings = PermissionsModel.longPermissionsModel
+        }
+    }
+
+    ColumnLayout {
+        visible: !root.joinCommunity
+
+        Label {
+            Layout.fillWidth: true
+            text: "Channel name"
+        }
+
+        TextField {
+            background: Rectangle { border.color: 'lightgrey' }
+            Layout.preferredWidth: 200
+            text: root.channelName
+            onTextChanged: root.channelName = text
+        }
+    }
+
+    ColumnLayout {
+        visible: !root.joinCommunity
+
+        Label {
+            Layout.fillWidth: true
+            text: "Only view holdings model type:"
+        }
+
+        RadioButton {
+            checked: true
+            text: "Short model"
+            onCheckedChanged: if(checked) root.viewOnlyHoldings = PermissionsModel.shortPermissionsModel
+        }
+
+        RadioButton {
+            text: "Long model"
+            onCheckedChanged: if(checked) root.viewOnlyHoldings = PermissionsModel.longPermissionsModel
+        }
+
+        RadioButton {
+            text: "None"
+            onCheckedChanged: if(checked) root.viewOnlyHoldings = undefined
+        }
+    }
+
+    ColumnLayout {
+        visible: !root.joinCommunity
+
+        Label {
+            Layout.fillWidth: true
+            text: "View and post holdings model type:"
+        }
+
+        RadioButton {
+            checked: true
+            text: "Short model"
+            onCheckedChanged: if(checked) root.viewAndPostHoldings = PermissionsModel.shortPermissionsModel
+        }
+
+        RadioButton {
+            text: "Long model"
+            onCheckedChanged: if(checked) root.viewAndPostHoldings = PermissionsModel.longPermissionsModel
+        }
+
+        RadioButton {
+            text: "None"
+            onCheckedChanged: if(checked) root.viewAndPostHoldings = undefined
+        }
+    }
+
+    ColumnLayout {
+        visible: !root.joinCommunity
+
+        Label {
+            Layout.fillWidth: true
+            text: "Moderate holdings model type:"
+        }
+
+        RadioButton {
+            checked: true
+            text: "Short model"
+            onCheckedChanged: if(checked) root.moderateHoldings = PermissionsModel.shortPermissionsModel
+        }
+
+        RadioButton {
+            text: "Long model"
+            onCheckedChanged: if(checked) root.moderateHoldings = PermissionsModel.longPermissionsModel
+        }
+
+        RadioButton {
+            text: "None"
+            onCheckedChanged: if(checked) root.moderateHoldings = undefined
+        }
+    }
+}

storybook/pages/JoinPermissionsOverlayPanelPage.qml

@@ -0,0 +1,167 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core 0.1
+
+import Storybook 1.0
+import Models 1.0
+
+import AppLayouts.Chat.panels.communities 1.0
+
+
+import utils 1.0
+
+SplitView {
+
+    QtObject {
+        id: d
+
+        property string name: "Uniswap"
+        property string channelName: "#vip"
+        property bool joinCommunity: true // Otherwise, enter channel
+        property bool requirementsMet: true
+        property bool isInvitationPending: false
+        property bool isJoinRequestRejected: false
+        property bool requiresRequest: false
+        property var communityHoldings: PermissionsModel.shortPermissionsModel
+        property var viewOnlyHoldings: PermissionsModel.shortPermissionsModel
+        property var viewAndPostHoldings: PermissionsModel.shortPermissionsModel
+        property var moderateHoldings: PermissionsModel.shortPermissionsModel
+    }
+
+    Logs { id: logs }
+
+    SplitView {
+        orientation: Qt.Vertical
+        SplitView.fillWidth: true
+
+
+
+        Item {
+            SplitView.fillWidth: true
+            SplitView.fillHeight: true
+
+            Rectangle {
+                id: rect
+                width: widthSlider.value
+                height: heightSlider.value
+                anchors.centerIn: parent
+                color: Theme.palette.baseColor4
+
+                StatusScrollView {
+                    id: scroll
+                    anchors.fill: parent
+                    ScrollBar.vertical.policy: ScrollBar.AsNeeded
+                    ScrollBar.horizontal.policy: ScrollBar.AsNeeded
+                    contentHeight: content.height
+                    contentWidth: content.width
+                    padding: 0
+
+                    Item {
+                        id: content
+                        height: Math.max(overlayPannel.implicitHeight, rect.height)
+                        width: Math.max(overlayPannel.implicitWidth, rect.width)
+
+                        JoinPermissionsOverlayPanel {
+                            id: overlayPannel
+
+                            anchors.centerIn: parent
+                            joinCommunity: d.joinCommunity
+                            requirementsMet: d.requirementsMet
+                            isInvitationPending: d.isInvitationPending
+                            isJoinRequestRejected: d.isJoinRequestRejected
+                            requiresRequest: d.requiresRequest
+                            communityName: d.name
+                            communityHoldings: d.communityHoldings
+                            channelName: d.channelName
+                            viewOnlyHoldings: d.viewOnlyHoldings
+                            viewAndPostHoldings: d.viewAndPostHoldings
+                            moderateHoldings: d.moderateHoldings
+
+                            onRevealAddressClicked: logs.logEvent("JoinPermissionsOverlayPanel::onRevealAddressClicked()")
+                            onInvitationPendingClicked: logs.logEvent("JoinPermissionsOverlayPanel::onInvitationPendingClicked()")
+                        }
+                    }
+                }
+            }
+        }
+
+        LogsAndControlsPanel {
+            SplitView.minimumHeight: 100
+            SplitView.preferredHeight: 250
+            logsView.logText: logs.logText
+
+            ColumnLayout {
+                Row {
+                    Label {
+                        anchors.verticalCenter: parent.verticalCenter
+                        text: "Width:"
+                    }
+
+                    Slider {
+                        id: widthSlider
+                        value: 800
+                        from: 350
+                        to: 1000
+                    }
+                }
+
+                Row {
+                    Label {
+                        anchors.verticalCenter: parent.verticalCenter
+                        text: "Height:"
+                    }
+
+                    Slider {
+                        id: heightSlider
+                        value: 500
+                        from: 100
+                        to: 1000
+                    }
+                }
+            }
+        }
+    }
+
+    Pane {
+        SplitView.minimumWidth: 300
+        SplitView.preferredWidth: 300
+
+        ColumnLayout {
+            ColumnLayout {
+                Label {
+                    Layout.fillWidth: true
+                    text: "Name"
+                }
+                TextField {
+                    background: Rectangle { border.color: 'lightgrey' }
+                    Layout.preferredWidth: 200
+                    text: d.name
+                    onTextChanged: d.name = text
+                }
+            }
+
+            JoinCommunityPermissionsEditor {
+                channelName: d.chanelName
+                joinCommunity: d.joinCommunity
+                requirementsMet: d.requirementsMet
+                isInvitationPending: d.isInvitationPending
+                isJoinRequestRejected: d.isJoinRequestRejected
+                requiresRequest: d.requiresRequest
+
+                onChannelNameChanged: d.channelName = channelName
+                onJoinCommunityChanged: d.joinCommunity = joinCommunity
+                onRequirementsMetChanged: d.requirementsMet = requirementsMet
+                onIsInvitationPendingChanged: d.isInvitationPending = isInvitationPending
+                onIsJoinRequestRejectedChanged: d.isJoinRequestRejected = isJoinRequestRejected
+                onRequiresRequestChanged: d.requiresRequest = requiresRequest
+                onCommunityHoldingsChanged: d.communityHoldings = communityHoldings
+                onViewOnlyHoldingsChanged: d.viewOnlyHoldings = viewOnlyHoldings
+                onViewAndPostHoldingsChanged: d.viewAndPostHoldings = viewAndPostHoldings
+                onModerateHoldingsChanged: d.moderateHoldings = moderateHoldings
+            }
+        }
+    }
+}

storybook/src/Models/ModelsData.qml

@@ -39,6 +39,11 @@ QtObject {
         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 string uni: Style.png("tokens/UNI")
+        readonly property string eth: Style.png("tokens/ETH")
+        readonly property string dai: Style.png("tokens/DAI")
+        readonly property string snt: Style.png("tokens/SNT")
+        readonly property string mana: Style.png("tokens/aMANA")
     }
 
     readonly property QtObject collectibles: QtObject {

storybook/src/Models/PermissionsModel.qml

@@ -1,12 +1,15 @@
-import QtQuick 2.0
+pragma Singleton
+
+import QtQuick 2.14
 
 import Models 1.0
 import StatusQ.Core.Utils 0.1
 import AppLayouts.Chat.controls.community 1.0
 
-ListModel {
+QtObject {
     id: root
 
+    readonly property var permissionsModel: ListModel {
         Component.onCompleted:
         append([
                    {
@@ -30,6 +33,69 @@ ListModel {
                        channelsListModel: root.createChannelsModel2()
                    }
                ])
+    }
+
+    readonly property var shortPermissionsModel: ListModel {
+        Component.onCompleted:
+        append([
+                   {
+                       isPrivate: true,
+                       holdingsListModel: root.createHoldingsModel3(),
+                       permissionsObjectModel: {
+                           key: 1,
+                           text: "Become member",
+                           imageSource: "in-contacts"
+                       },
+                       channelsListModel: root.createChannelsModel1()
+                   }
+               ])
+    }
+
+    readonly property var longPermissionsModel: ListModel {
+        Component.onCompleted:
+        append([
+                   {
+                       isPrivate: true,
+                       holdingsListModel: root.createHoldingsModel4(),
+                       permissionsObjectModel: {
+                           key: 1,
+                           text: "Become member",
+                           imageSource: "in-contacts"
+                       },
+                       channelsListModel: root.createChannelsModel1()
+                   },
+                   {
+                       isPrivate: false,
+                       holdingsListModel: root.createHoldingsModel3(),
+                       permissionsObjectModel: {
+                           key: 2,
+                           text: "View and post",
+                           imageSource: "edit"
+                       },
+                       channelsListModel: root.createChannelsModel2()
+                   },
+                   {
+                       isPrivate: false,
+                       holdingsListModel: root.createHoldingsModel2(),
+                       permissionsObjectModel: {
+                           key: 2,
+                           text: "View and post",
+                           imageSource: "edit"
+                       },
+                       channelsListModel: root.createChannelsModel2()
+                   },
+                   {
+                       isPrivate: false,
+                       holdingsListModel: root.createHoldingsModel1(),
+                       permissionsObjectModel: {
+                           key: 2,
+                           text: "View and post",
+                           imageSource: "edit"
+                       },
+                       channelsListModel: root.createChannelsModel2()
+                   }
+               ])
+    }
 
     function createHoldingsModel1() {
         return [
@@ -39,7 +105,8 @@ ListModel {
                         key: "SOCKS",
                         name: "SOCKS",
                         amount: 1.2,
-                imageSource: ModelsData.assets.socks
+                        imageSource: ModelsData.assets.socks,
+                        available: true
                     },
                     {
                         operator: OperatorsUtils.Operators.Or,
@@ -47,7 +114,8 @@ ListModel {
                         key: "ZRX",
                         name: "ZRX",
                         amount: 15,
-                imageSource: ModelsData.assets.zrx
+                        imageSource: ModelsData.assets.zrx,
+                        available: false
                     },
                     {
                         operator: OperatorsUtils.Operators.And,
@@ -55,7 +123,8 @@ ListModel {
                         key: "Furbeard",
                         name: "Furbeard",
                         amount: 12,
-                imageSource: ModelsData.collectibles.kitty1
+                        imageSource: ModelsData.collectibles.kitty1,
+                        available: true
                     }
                 ]
     }
@@ -68,7 +137,8 @@ ListModel {
                         key: "Happy Meow",
                         name: "Happy Meow",
                         amount: 50.25,
-                imageSource: ModelsData.collectibles.kitty3
+                        imageSource: ModelsData.collectibles.kitty3,
+                        available: true
                     },
                     {
                         operator: OperatorsUtils.Operators.And,
@@ -76,7 +146,81 @@ ListModel {
                         key: "AMP",
                         name: "AMP",
                         amount: 11,
-                imageSource: ModelsData.assets.amp
+                        imageSource: ModelsData.assets.amp,
+                        available: false
+                    }
+                ]
+    }
+
+    function createHoldingsModel3() {
+        return [
+                    {
+                        operator: OperatorsUtils.Operators.None,
+                        type: HoldingTypes.Type.Asset,
+                        key: "uni",
+                        imageSource: ModelsData.assets.uni,
+                        name: "UNI",
+                        amount: 15,
+                        available: true
+                    },
+                    {
+                        operator: OperatorsUtils.Operators.None,
+                        type: HoldingTypes.Type.Asset,
+                        key: "eth",
+                        imageSource: ModelsData.assets.eth,
+                        name: "ETH",
+                        amount: 1,
+                        available: false
+                    }
+                ]
+    }
+
+    function createHoldingsModel4() {
+        return [
+                    {
+                        operator: OperatorsUtils.Operators.None,
+                        type: HoldingTypes.Type.Asset,
+                        key: "uni",
+                        imageSource: ModelsData.assets.uni,
+                        name: "UNI",
+                        amount: 15,
+                        available: true
+                    },
+                    {
+                        operator: OperatorsUtils.Operators.None,
+                        type: HoldingTypes.Type.Asset,
+                        key: "eth",
+                        imageSource: ModelsData.assets.eth,
+                        name: "ETH",
+                        amount: 1,
+                        available: false
+                    },
+                    {
+                        operator: OperatorsUtils.Operators.None,
+                        type: HoldingTypes.Type.Asset,
+                        key: "snt",
+                        imageSource: ModelsData.assets.snt,
+                        name: "SNT",
+                        amount: 25000,
+                        available: true
+                    },
+                    {
+                        operator: OperatorsUtils.Operators.None,
+                        type: HoldingTypes.Type.Asset,
+                        key: "uni",
+                        imageSource: ModelsData.assets.dai,
+                        name: "DAI",
+                        amount: 100,
+                        available: true
+                    },
+                    {
+                        operator: OperatorsUtils.Operators.None,
+                        type: HoldingTypes.Type.Asset,
+                        key: "mana",
+                        imageSource: ModelsData.assets.mana,
+                        name: "MANA",
+                        amount: 2,
+                        available: true
                     }
                 ]
     }

storybook/src/Models/qmldir

@@ -1,9 +1,9 @@
 singleton ModelsData 1.0 ModelsData.qml
+singleton PermissionsModel 1.0 PermissionsModel.qml
 IconModel 1.0 IconModel.qml
 BannerModel 1.0 BannerModel.qml
 UsersModel 1.0 UsersModel.qml
 AssetsModel 1.0 AssetsModel.qml
 CollectiblesModel 1.0 CollectiblesModel.qml
 ChannelsModel 1.0 ChannelsModel.qml
-PermissionsModel 1.0 PermissionsModel.qml
 AssetsCollectiblesIconsModel 1.0 AssetsCollectiblesIconsModel.qml