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/JoinPermissionsOverlayPanel): Created new storybook page 

Created storybook page for `JoinPermissionOverlayPanel`.
Created needed storybook editor.
Added new and updated storybook related models.
This commit is contained in:
Noelia 2023-02-01 18:30:41 +01:00 committed by Alexandra Betouni
parent ec8b03be6e
commit 3d8cf574fb
8 changed files with 591 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
storybook/PagesModel.qml
View File

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

3
storybook/figma.json
View File

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

5
storybook/pages/CommunityPermissionsViewPage.qml
View File

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

200
storybook/pages/JoinCommunityPermissionsEditor.qml Normal file
View File

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

167
storybook/pages/JoinPermissionsOverlayPanelPage.qml Normal file
View File

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

5
storybook/src/Models/ModelsData.qml
View File

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

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

@ -1,13 +1,16 @@
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
Component.onCompleted:
readonly property var permissionsModel: ListModel {
Component.onCompleted:
append([
{
isPrivate: true,
@ -30,81 +33,222 @@ 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 [
{
operator: OperatorsUtils.Operators.None,
type: HoldingTypes.Type.Asset,
key: "SOCKS",
name: "SOCKS",
amount: 1.2,
imageSource: ModelsData.assets.socks
},
{
operator: OperatorsUtils.Operators.Or,
type: HoldingTypes.Type.Asset,
key: "ZRX",
name: "ZRX",
amount: 15,
imageSource: ModelsData.assets.zrx
},
{
operator: OperatorsUtils.Operators.And,
type: HoldingTypes.Type.Collectible,
key: "Furbeard",
name: "Furbeard",
amount: 12,
imageSource: ModelsData.collectibles.kitty1
}
]
{
operator: OperatorsUtils.Operators.None,
type: HoldingTypes.Type.Asset,
key: "SOCKS",
name: "SOCKS",
amount: 1.2,
imageSource: ModelsData.assets.socks,
available: true
},
{
operator: OperatorsUtils.Operators.Or,
type: HoldingTypes.Type.Asset,
key: "ZRX",
name: "ZRX",
amount: 15,
imageSource: ModelsData.assets.zrx,
available: false
},
{
operator: OperatorsUtils.Operators.And,
type: HoldingTypes.Type.Collectible,
key: "Furbeard",
name: "Furbeard",
amount: 12,
imageSource: ModelsData.collectibles.kitty1,
available: true
}
]
}
function createHoldingsModel2() {
return [
{
operator: OperatorsUtils.Operators.None,
type: HoldingTypes.Type.Collectible,
key: "Happy Meow",
name: "Happy Meow",
amount: 50.25,
imageSource: ModelsData.collectibles.kitty3
},
{
operator: OperatorsUtils.Operators.And,
type: HoldingTypes.Type.Collectible,
key: "AMP",
name: "AMP",
amount: 11,
imageSource: ModelsData.assets.amp
}
]
{
operator: OperatorsUtils.Operators.None,
type: HoldingTypes.Type.Collectible,
key: "Happy Meow",
name: "Happy Meow",
amount: 50.25,
imageSource: ModelsData.collectibles.kitty3,
available: true
},
{
operator: OperatorsUtils.Operators.And,
type: HoldingTypes.Type.Collectible,
key: "AMP",
name: "AMP",
amount: 11,
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
}
]
}
function createChannelsModel1() {
return [
{
key: "general",
text: "#general",
color: "lightgreen",
emoji: "👋"
},
{
key: "faq",
text: "#faq",
color: "lightblue",
emoji: "⚽"
}
]
{
key: "general",
text: "#general",
color: "lightgreen",
emoji: "👋"
},
{
key: "faq",
text: "#faq",
color: "lightblue",
emoji: "⚽"
}
]
}
function createChannelsModel2() {
return [
{
key: "socks",
iconSource: ModelsData.icons.socks,
text: "Socks"
}
]
{
key: "socks",
iconSource: ModelsData.icons.socks,
text: "Socks"
}
]
}
}

2
storybook/src/Models/qmldir
View File

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