mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-15 09:04:45 +00:00
7b54bf31b4
- Added functionality as experimental advanced view button feat(CommunitySettings / Permissions): Added welcome page - Enabled new permissions tab. - Created welcome page layout. - Added permissions welcome image. - Fixed top margin content in `SettingsPanelLayout` to fit designs. Closes #6036 feat(CommunitySettings/Permissions): Created `new permission` page - Added `new permission` page. - Created first card layout. - Added navigation between `welcome` and `newPermission` views. - Improvements in base community settings layout pages. Closes #6037 feat(CommunitySettings/Permissions): `Who holds` tokens dropdown component creation and integration - Tokens dropdown component creation: main view, operators view and extended view. - Logic to add new token and change operator. Part of #6038
278 lines
10 KiB
QML
278 lines
10 KiB
QML
import QtQuick 2.13
|
|
import QtQuick.Layouts 1.14
|
|
import QtQuick.Controls 2.13
|
|
import QtGraphicalEffects 1.13
|
|
|
|
import StatusQ.Core 0.1
|
|
import StatusQ.Core.Theme 0.1
|
|
import StatusQ.Components 0.1
|
|
import StatusQ.Controls 0.1
|
|
import StatusQ.Controls.Validators 0.1
|
|
import StatusQ.Core.Utils 0.1 as SQ
|
|
|
|
import utils 1.0
|
|
|
|
StatusDropdown {
|
|
id: root
|
|
|
|
property real tokenAmountValue: 0
|
|
property string tokenName: d.defaultTokenNameText
|
|
property url tokenImage: ""
|
|
property int operator: SQ.Utils.Operators.None
|
|
property bool withOperatorSelector: true
|
|
|
|
signal addToken(string tokenText, url tokenImage, int operator)
|
|
|
|
function reset() {
|
|
root.tokenAmountValue = 0
|
|
root.tokenName = d.defaultTokenNameText
|
|
root.tokenImage = ""
|
|
root.operator = SQ.Utils.Operators.None
|
|
}
|
|
|
|
QtObject {
|
|
id: d
|
|
|
|
readonly property bool ready: root.tokenAmountValue > 0 && root.tokenName !== d.defaultTokenNameText
|
|
|
|
// By design values:
|
|
readonly property int initialHeight: 232
|
|
readonly property int mainHeight: 256
|
|
readonly property int operatorsHeight: 96
|
|
readonly property int extendedHeight: 417
|
|
readonly property int defaultWidth: 289
|
|
readonly property int operatorsWidth: 159
|
|
|
|
property string defaultTokenNameText: qsTr("Choose token")
|
|
|
|
function selectInitState() {
|
|
if(root.withOperatorSelector)
|
|
loader.sourceComponent = operatorsSelectorView
|
|
else
|
|
loader.sourceComponent = tabsView
|
|
}
|
|
}
|
|
|
|
width: d.defaultWidth
|
|
height: d.initialHeight
|
|
|
|
contentItem: Loader {
|
|
id: loader
|
|
anchors.fill: parent
|
|
sourceComponent: root.withOperatorSelector ? operatorsSelectorView : tabsView
|
|
|
|
onSourceComponentChanged: {
|
|
if(sourceComponent == tokensExtendedView) {
|
|
root.height = Math.min(item.contentHeight + item.anchors.topMargin + item.anchors.bottomMargin, d.extendedHeight)
|
|
root.width = d.defaultWidth
|
|
}
|
|
else if(sourceComponent == operatorsSelectorView) {
|
|
root.height = d.operatorsHeight
|
|
root.width = d.operatorsWidth
|
|
}
|
|
else if(sourceComponent == tabsView && root.withOperatorSelector) {
|
|
root.height = d.mainHeight
|
|
root.width = d.defaultWidth
|
|
}
|
|
else if(sourceComponent == tabsView && !root.withOperatorSelector) {
|
|
root.height = d.initialHeight
|
|
root.width = d.defaultWidth
|
|
}
|
|
}
|
|
}
|
|
|
|
onOpened: d.selectInitState()
|
|
onClosed: root.reset()
|
|
onWithOperatorSelectorChanged: d.selectInitState()
|
|
|
|
Component {
|
|
id: tabsView
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: 8
|
|
anchors.topMargin: 16
|
|
spacing: 8
|
|
StatusIconTextButton {
|
|
visible: root.withOperatorSelector
|
|
Layout.leftMargin: 8
|
|
spacing: 0
|
|
statusIcon: "next"
|
|
icon.width: 12
|
|
icon.height: 12
|
|
iconRotation: 180
|
|
text: qsTr("Back")
|
|
onClicked: loader.sourceComponent = operatorsSelectorView
|
|
}
|
|
StatusSwitchTabBar {
|
|
id: tabBar
|
|
Layout.preferredWidth: 273 // by design
|
|
Layout.preferredHeight: 36 // by design
|
|
StatusSwitchTabButton {
|
|
text: qsTr("Token")
|
|
fontPixelSize: 13
|
|
}
|
|
StatusSwitchTabButton {
|
|
text: qsTr("Collectibles")
|
|
fontPixelSize: 13
|
|
enabled: false // TODO
|
|
}
|
|
StatusSwitchTabButton {
|
|
text: qsTr("ENS")
|
|
fontPixelSize: 13
|
|
enabled: false // TODO
|
|
}
|
|
}
|
|
StackLayout {
|
|
Layout.fillWidth: true
|
|
currentIndex: tabBar.currentIndex
|
|
// Tokens layout definition:
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
StatusPickerButton {
|
|
Layout.fillWidth: true
|
|
Layout.topMargin: 8
|
|
Layout.preferredHeight: 36
|
|
bgColor: Theme.palette.baseColor5
|
|
contentColor: Theme.palette.directColor1
|
|
text: root.tokenName
|
|
font.pixelSize: 13
|
|
image.source: root.tokenImage
|
|
onClicked: loader.sourceComponent = tokensExtendedView
|
|
}
|
|
|
|
StatusInput {
|
|
Layout.fillWidth: true
|
|
minimumHeight: 36
|
|
maximumHeight: 36
|
|
topPadding: 0
|
|
bottomPadding: 0
|
|
text: root.tokenAmountValue == 0 ? "" : root.tokenAmountValue.toString()
|
|
font.pixelSize: 13
|
|
rightPadding: amountText.implicitWidth + amountText.anchors.rightMargin + leftPadding
|
|
input.placeholderText: "0"
|
|
validationMode: StatusInput.ValidationMode.IgnoreInvalidInput
|
|
validators: StatusFloatValidator { bottom: 0 }
|
|
|
|
StatusBaseText {
|
|
id: amountText
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: 13
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
text: qsTr("Amount")
|
|
color: Theme.palette.baseColor1
|
|
font.pixelSize: 13
|
|
}
|
|
onTextChanged: root.tokenAmountValue = Number(text)
|
|
}
|
|
|
|
// Just a filler
|
|
Item { Layout.fillHeight: true}
|
|
|
|
StatusButton {
|
|
enabled: d.ready
|
|
text: qsTr("Add")
|
|
height: 44
|
|
Layout.alignment: Qt.AlignHCenter
|
|
Layout.fillWidth: true
|
|
onClicked: { root.addToken(root.tokenAmountValue.toString() + " " + root.tokenName, root.tokenImage, root.operator) }
|
|
}
|
|
} // End of Tokens Layout definition
|
|
|
|
// TODO
|
|
Item {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
}
|
|
|
|
// TODO
|
|
Item {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Component {
|
|
id: operatorsSelectorView
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: 8
|
|
StatusPickerButton {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 36
|
|
horizontalPadding: 12
|
|
spacing: 10
|
|
bgColor: Theme.palette.primaryColor3
|
|
contentColor: Theme.palette.primaryColor1
|
|
image.source: Style.svg("add")
|
|
text: qsTr("And...")
|
|
image.height: 12
|
|
image.width: 12
|
|
font.pixelSize: 13
|
|
onClicked: {
|
|
root.operator = SQ.Utils.Operators.And
|
|
loader.sourceComponent = tabsView
|
|
}
|
|
}
|
|
StatusPickerButton {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 36
|
|
horizontalPadding: 12
|
|
spacing: 10
|
|
bgColor: Theme.palette.primaryColor3
|
|
contentColor: Theme.palette.primaryColor1
|
|
image.source: Style.svg("condition-Or")
|
|
image.height: 12
|
|
image.width: 12
|
|
text: qsTr("Or...")
|
|
font.pixelSize: 13
|
|
onClicked: {
|
|
root.operator = SQ.Utils.Operators.Or
|
|
loader.sourceComponent = tabsView
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Component {
|
|
id: tokensExtendedView
|
|
|
|
// TODO: It probabily will be a reusable component for collectibles and channels
|
|
TokensListDropdownContent {
|
|
anchors.fill: parent
|
|
anchors.topMargin: 8
|
|
anchors.bottomMargin: 8
|
|
headerModel: ListModel {
|
|
ListElement { index: 0; icon: "next"; iconSize: 12; description: qsTr("Back"); rotation: 180; spacing: 0 }
|
|
ListElement { index: 1; icon: "add"; iconSize: 16; description: qsTr("Mint token"); rotation: 0; spacing: 8 }
|
|
ListElement { index: 2; icon: "invite-users"; iconSize: 16; description: qsTr("Import existing token"); rotation: 180; spacing: 8 }
|
|
}
|
|
// TODO: Replace to real data, now dummy model
|
|
model: ListModel {
|
|
ListElement {imageSource: "qrc:imports/assets/png/tokens/SOCKS.png"; name: "Unisocks"; shortName: "SOCKS"; selected: false; category: "Community tokens"}
|
|
ListElement {imageSource: "qrc:imports/assets/png/tokens/ZRX.png"; name: "Ox"; shortName: "ZRX"; selected: false; category: "Listed tokens"}
|
|
ListElement {imageSource: "qrc:imports/assets/png/tokens/CUSTOM-TOKEN.png"; name: "1inch"; shortName: "ZRX"; selected: false; category: "Listed tokens"}
|
|
ListElement {imageSource: "qrc:imports/assets/png/tokens/CUSTOM-TOKEN.png"; name: "Aave"; shortName: "AAVE"; selected: false; category: "Listed tokens"}
|
|
ListElement {imageSource: "qrc:imports/assets/png/tokens/CUSTOM-TOKEN.png"; name: "Amp"; shortName: "AMP"; selected: false; category: "Listed tokens"}
|
|
}
|
|
onHeaderItemClicked: {
|
|
if(index === 0) loader.sourceComponent = tabsView // Go back
|
|
// TODO:
|
|
else if(index === 1) console.log("TODO: Mint token")
|
|
else if(index === 2) console.log("TODO: Import existing token")
|
|
}
|
|
onItemClicked: {
|
|
// Go back
|
|
loader.sourceComponent = tabsView
|
|
|
|
// Update new token info
|
|
root.tokenName = shortName
|
|
root.tokenImage = imageSource
|
|
}
|
|
}
|
|
}
|
|
}
|