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): 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.
This commit is contained in:
Noelia 2022-12-01 17:31:03 +01:00 committed by Noelia
parent 1db0a0077d
commit 2087a5322b
12 changed files with 395 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
storybook/PagesModel.qml
View File

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

3
storybook/figma.json
View File

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

50
storybook/pages/CommunityPermissionsSettingItemEditor.qml
View File

@ -10,13 +10,13 @@ ColumnLayout {
property string panelText
property string name
property url icon
property double amount
property string icon
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'
Layout.fillWidth: true
Layout.fillHeight: true
id: image
visible: root.isImageSelectorVisible
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
height: parent.height * 0.8
width: 200
height: 250
model: IconModel {}
model: root.iconsModel
onSelected: {
root.icon = icon
@ -61,7 +61,6 @@ ColumnLayout {
}
}
}
}
ColumnLayout {
Label {
@ -69,6 +68,10 @@ ColumnLayout {
text: "Type"
}
TextField {
background: Rectangle {
radius: 16
border.color: 'lightgrey'
}
Layout.fillWidth: true
text: root.name
onTextChanged: root.name = text
@ -82,17 +85,15 @@ ColumnLayout {
text: "Amount"
}
TextField {
background: Rectangle {
radius: 16
border.color: 'lightgrey'
}
Layout.fillWidth: true
text: root.amount
onTextChanged: root.amount = text
text: root.amountText
onTextChanged: root.amountText = 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"
}
}

149
storybook/pages/CommunityPermissionsSettingsPanelEditor.qml
View File

@ -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 {
id: globalContent
spacing: 10
anchors.fill: parent
Repeater {
model: root.model
Rectangle {
radius: 16
color: "whitesmoke"
Layout.preferredHeight: content.implicitHeight + 50
Layout.fillWidth: true
ColumnLayout {
id: content
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 {
panelText: "Who holds"
name: "Socks"
icon: ""
amount: 11.2
Layout.fillWidth: true
panelText: "Who holds [item " + model.index + "]"
name: model.name
icon: model.imageSource
amountText: model.amount
isAmountVisible: true
isENS: false
isENSVisible: true
isExpression: true
isAnd: 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: "Is allowed to"
name: "Moderate"
icon: ""
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)
}
CommunityPermissionsSettingItemEditor {
panelText: "In"
name: "#general"
icon: ""
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: true//model.isPrivate
//onToggled: model.isPrivate = checked
checked: model.isPrivate
onToggled: model.isPrivate = checked
}
}
}
}
}
}

4
storybook/pages/CommunityPermissionsSettingsPanelPage.qml
View File

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

68
storybook/pages/CommunityPermissionsViewPage.qml Normal file
View File

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

4
storybook/src/Models/ChannelsModel.qml
View File

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

113
storybook/src/Models/PermissionsModel.qml Normal file
View File

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

17
storybook/src/Models/TokensCollectiblesIconsModel.qml Normal file
View File

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

2
storybook/src/Models/qmldir
View File

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

2
ui/app/AppLayouts/Chat/stores/CommunitiesStore.qml
View File

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