status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(storybook): Created new page for `CommunityPermissionsRow` component 

- Updated permissions related models.
- Created new page for new component `CommunityPermissionsRow`
This commit is contained in:
Noelia 2023-04-26 12:01:22 +02:00 committed by Noelia
parent 3400f5e276
commit 8a98a08f7b
5 changed files with 363 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
storybook/PagesModel.qml
View File

@ -257,6 +257,10 @@ ListModel {
title: "TokenItem"
section: "Components"
}
ListElement {
title: "CommunityPermissionsRow"
section: "Components"
}
ListElement {
title: "BrowserSettings"
section: "Settings"

11
storybook/figma.json
View File

@ -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"
]
}

202
storybook/pages/CommunityPermissionsRowPage.qml Normal file
View File

@ -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
}
}
}
}

8
storybook/src/Models/AssetsModel.qml
View File

@ -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
}
]

157
storybook/src/Models/PermissionsModel.qml
View File

@ -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
}
]