From 8a98a08f7b343fd66a6132936839f7395c8e1267 Mon Sep 17 00:00:00 2001 From: Noelia Date: Wed, 26 Apr 2023 12:01:22 +0200 Subject: [PATCH] feat(storybook): Created new page for `CommunityPermissionsRow` component - Updated permissions related models. - Created new page for new component `CommunityPermissionsRow` --- storybook/PagesModel.qml | 4 + storybook/figma.json | 11 + .../pages/CommunityPermissionsRowPage.qml | 202 ++++++++++++++++++ storybook/src/Models/AssetsModel.qml | 8 +- storybook/src/Models/PermissionsModel.qml | 157 ++++++++++++-- 5 files changed, 363 insertions(+), 19 deletions(-) create mode 100644 storybook/pages/CommunityPermissionsRowPage.qml diff --git a/storybook/PagesModel.qml b/storybook/PagesModel.qml index f42a4ebc6f..bc7299475d 100644 --- a/storybook/PagesModel.qml +++ b/storybook/PagesModel.qml @@ -257,6 +257,10 @@ ListModel { title: "TokenItem" section: "Components" } + ListElement { + title: "CommunityPermissionsRow" + section: "Components" + } ListElement { title: "BrowserSettings" section: "Settings" diff --git a/storybook/figma.json b/storybook/figma.json index 720d5e7f31..7d3c526471 100644 --- a/storybook/figma.json +++ b/storybook/figma.json @@ -182,5 +182,16 @@ "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" + ], + "ChatAnchorButtonsPanel": [ + "https://www.figma.com/file/Mr3rqxxgKJ2zMQ06UAKiWL/%F0%9F%92%AC-Chat%E2%8E%9CDesktop?node-id=14632-460085&t=SGTU2JeRA8ifbv2E-0" + ], + "DerivationPathInput": [ + "https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?node-id=12272%3A269692&t=YiipgcxOhdOvqprP-0" + ], + "CommunityPermissionsRow": [ + "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=28570-546277&t=PVEC7ehRew4RnGFa-0", + "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416159&t=bTEq7jsSZT0nfC4y-1", + "https://www.figma.com/file/WQZcp6S0EnzxdTL4taoKDv/Design-System-for-Mobile?node-id=17582-215241&t=8cRmw5jIlzUtfJbY-0" ] } diff --git a/storybook/pages/CommunityPermissionsRowPage.qml b/storybook/pages/CommunityPermissionsRowPage.qml new file mode 100644 index 0000000000..cfdf9dbc6b --- /dev/null +++ b/storybook/pages/CommunityPermissionsRowPage.qml @@ -0,0 +1,202 @@ +import QtQuick 2.14 +import QtQuick.Controls 2.14 +import QtQuick.Layouts 1.14 + +import Storybook 1.0 +import Models 1.0 + +import AppLayouts.Chat.controls.community 1.0 + +SplitView { + id: root + + property var assetsModel: AssetsModel {} + property var collectiblesModel: CollectiblesModel {} + + Item { + SplitView.fillWidth: true + SplitView.fillHeight: true + + ColumnLayout { + anchors.centerIn: parent + spacing: 16 + + Label { + Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter + + text: "1 permission:" + } + + CommunityPermissionsRow { + Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter + Layout.bottomMargin: spacing + + assetsModel: root.assetsModel + collectiblesModel: root.collectiblesModel + model: PermissionsModel.shortPermissionsModel + requirementsMet: permissionsMetCheckEditor.checked + } + + Label { + Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter + + text: "2 short permissions:" + } + + CommunityPermissionsRow { + Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter + Layout.bottomMargin: spacing + + assetsModel: root.assetsModel + collectiblesModel: root.collectiblesModel + model: PermissionsModel.twoShortPermissionsModel + requirementsMet: permissionsMetCheckEditor.checked + } + + Label { + Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter + + text: "2 long permissions:" + } + + CommunityPermissionsRow { + Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter + Layout.bottomMargin: spacing + + assetsModel: root.assetsModel + collectiblesModel: root.collectiblesModel + model: PermissionsModel.twoLongPermissionsModel + requirementsMet: permissionsMetCheckEditor.checked + } + + Label { + Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter + + text: "Three short permissions:" + } + + CommunityPermissionsRow { + Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter + Layout.bottomMargin: spacing + + assetsModel: root.assetsModel + collectiblesModel: root.collectiblesModel + model: PermissionsModel.threeShortPermissionsModel + requirementsMet: permissionsMetCheckEditor.checked + } + + Label { + Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter + + text: "More than 2 permissions with short 1st and 2nd ones:" + } + + CommunityPermissionsRow { + Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter + Layout.bottomMargin: spacing + + assetsModel: root.assetsModel + collectiblesModel: root.collectiblesModel + model: PermissionsModel.moreThanTwoInitialShortPermissionsModel + requirementsMet: permissionsMetCheckEditor.checked + } + + Label { + Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter + + text: "5 permissions - long ones" + } + + CommunityPermissionsRow { + Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter + Layout.preferredHeight: heighSliderEditor.value + Layout.bottomMargin: spacing + + assetsModel: root.assetsModel + collectiblesModel: root.collectiblesModel + model: PermissionsModel.longPermissionsModel + requirementsMet: permissionsMetCheckEditor.checked + + spacing: spacingSliderEditor.value + padding: paddingSliderEditor.value + fontPixelSize: 13 + overlapping: overlappingSliderEditor.value + overlappingBorder: overlappingBorderSliderEditor.value + backgroundRadius: 10 + } + } + } + + Pane { + SplitView.minimumWidth: 300 + SplitView.preferredWidth: 300 + + ColumnLayout { + CheckBox { + id: permissionsMetCheckEditor + + text: "Are permissions met?" + } + + Label { + text: "Row heigh:" + } + + Slider { + id: heighSliderEditor + + value: 32 + from: 24 + to: 64 + } + + Label { + text: "Overlapping:" + } + + Slider { + id: overlappingSliderEditor + + value: 8 + from: 0 + to: 16 + } + + Label { + text: "Overlapping border:" + } + + Slider { + id: overlappingBorderSliderEditor + + value: 2 + from: 0 + to: 8 + } + + Label { + text: "Spacing:" + } + + Slider { + id: spacingSliderEditor + + value: 4 + from: 0 + to: 16 + } + + Label { + text: "Padding:" + } + + Slider { + id: paddingSliderEditor + + value: 2 + from: 0 + to: 8 + } + } + } +} diff --git a/storybook/src/Models/AssetsModel.qml b/storybook/src/Models/AssetsModel.qml index 4016d94457..d9e1051787 100644 --- a/storybook/src/Models/AssetsModel.qml +++ b/storybook/src/Models/AssetsModel.qml @@ -47,10 +47,10 @@ ListModel { category: TokenCategories.Category.General }, { - key: "Dai2", - iconSource: ModelsData.assets.dai, - name: "Dai2", - shortName: "DAI2", + key: "snt", + iconSource: ModelsData.assets.snt, + name: "snt", + shortName: "snt", category: TokenCategories.Category.General } ] diff --git a/storybook/src/Models/PermissionsModel.qml b/storybook/src/Models/PermissionsModel.qml index 32cb705989..e8abbb16d9 100644 --- a/storybook/src/Models/PermissionsModel.qml +++ b/storybook/src/Models/PermissionsModel.qml @@ -26,7 +26,7 @@ QtObject { readonly property var shortPermissionsModelData: [ { - holdingsListModel: root.createHoldingsModel3(), + holdingsListModel: root.createHoldingsModel4(), channelsListModel: root.createChannelsModel1(), permissionType: PermissionTypes.Type.Admin, isPrivate: true, @@ -53,8 +53,86 @@ QtObject { isPrivate: false }, { - channelsListModel: root.createChannelsModel2(), holdingsListModel: root.createHoldingsModel1(), + channelsListModel: root.createChannelsModel2(), + permissionType: PermissionTypes.Type.Member, + isPrivate: false + } + ] + + readonly property var twoShortPermissionsModelData: [ + { + holdingsListModel: root.createHoldingsModel1(), + channelsListModel: root.createChannelsModel1(), + permissionType: PermissionTypes.Type.Admin, + isPrivate: true + }, + { + holdingsListModel: root.createHoldingsModel2(), + channelsListModel: root.createChannelsModel2(), + permissionType: PermissionTypes.Type.Member, + isPrivate: false + } + ] + + readonly property var twoLongPermissionsModelData: [ + { + holdingsListModel: root.createHoldingsModel5(), + channelsListModel: root.createChannelsModel1(), + permissionType: PermissionTypes.Type.Admin, + isPrivate: true + }, + { + holdingsListModel: root.createHoldingsModel4(), + channelsListModel: root.createChannelsModel2(), + permissionType: PermissionTypes.Type.Member, + isPrivate: false + } + ] + + readonly property var threeShortPermissionsModelData: [ + { + holdingsListModel: root.createHoldingsModel1(), + channelsListModel: root.createChannelsModel1(), + permissionType: PermissionTypes.Type.Admin, + isPrivate: true + }, + { + holdingsListModel: root.createHoldingsModel1b(), + channelsListModel: root.createChannelsModel2(), + permissionType: PermissionTypes.Type.Member, + isPrivate: false + }, + { + holdingsListModel: root.createHoldingsModel2(), + channelsListModel: root.createChannelsModel2(), + permissionType: PermissionTypes.Type.Member, + isPrivate: false + } + ] + + readonly property var moreThanTwoInitialShortPermissionsModelData: [ + { + holdingsListModel: root.createHoldingsModel1(), + channelsListModel: root.createChannelsModel1(), + permissionType: PermissionTypes.Type.Admin, + isPrivate: true + }, + { + holdingsListModel: root.createHoldingsModel2(), + channelsListModel: root.createChannelsModel2(), + permissionType: PermissionTypes.Type.Member, + isPrivate: false + }, + { + holdingsListModel: root.createHoldingsModel3(), + channelsListModel: root.createChannelsModel2(), + permissionType: PermissionTypes.Type.Member, + isPrivate: false + }, + { + holdingsListModel: root.createHoldingsModel5(), + channelsListModel: root.createChannelsModel2(), permissionType: PermissionTypes.Type.Member, isPrivate: false } @@ -93,20 +171,63 @@ QtObject { } } + readonly property var twoShortPermissionsModel: ListModel { + readonly property ModelChangeGuard guard: ModelChangeGuard { + model: root.twoShortPermissionsModel + } + + Component.onCompleted: { + append(twoShortPermissionsModelData) + guard.enabled = true + } + } + + readonly property var twoLongPermissionsModel: ListModel { + readonly property ModelChangeGuard guard: ModelChangeGuard { + model: root.twoLongPermissionsModel + } + + Component.onCompleted: { + append(twoLongPermissionsModelData) + guard.enabled = true + } + } + + readonly property var threeShortPermissionsModel: ListModel { + readonly property ModelChangeGuard guard: ModelChangeGuard { + model: root.threeShortPermissionsModel + } + + Component.onCompleted: { + append(threeShortPermissionsModelData) + guard.enabled = true + } + } + + readonly property var moreThanTwoInitialShortPermissionsModel: ListModel { + readonly property ModelChangeGuard guard: ModelChangeGuard { + model: root.moreThanTwoInitialShortPermissionsModel + } + + Component.onCompleted: { + append(moreThanTwoInitialShortPermissionsModelData) + guard.enabled = true + } + } + function createHoldingsModel1() { return [ - { - type: HoldingTypes.Type.Asset, - key: "socks", - amount: 1.2, - available: true - }, { type: HoldingTypes.Type.Asset, key: "zrx", amount: 15, available: false - }, + } + ] + } + + function createHoldingsModel1b() { + return [ { type: HoldingTypes.Type.Ens, key: "Ens", @@ -120,13 +241,13 @@ QtObject { return [ { type: HoldingTypes.Type.Collectible, - key: "Kitty3", + key: "Kitty6", amount: 50.25, available: true }, { - type: HoldingTypes.Type.Collectible, - key: "Anniversary", + type: HoldingTypes.Type.Asset, + key: "Dai", amount: 11, available: false } @@ -142,9 +263,15 @@ QtObject { available: true }, { - type: HoldingTypes.Type.Asset, - key: "zrx", - amount: 1, + type: HoldingTypes.Type.Collectible, + key: "Kitty4", + amount: 50.25, + available: true + }, + { + type: HoldingTypes.Type.Collectible, + key: "SuperRare", + amount: 11, available: false } ]