feat(CommunityPermissionsRow): Created new component
Permissions tags row created. Closes #8018
This commit is contained in:
Noelia
Noelia
parent
8ca70ea018
commit
3400f5e276
|
|
@ -90,6 +90,7 @@
|
|||
<file>assets/img/icons/tiny/gas.svg</file>
|
||||
<file>assets/img/icons/tiny/group-white.svg</file>
|
||||
<file>assets/img/icons/tiny/group.svg</file>
|
||||
<file>assets/img/icons/tiny/locked.svg</file>
|
||||
<file>assets/img/icons/tiny/members.svg</file>
|
||||
<file>assets/img/icons/tiny/more.svg</file>
|
||||
<file>assets/img/icons/tiny/muted-white.svg</file>
|
||||
|
|
@ -168,6 +169,7 @@
|
|||
<file>assets/img/icons/delete.svg</file>
|
||||
<file>assets/img/icons/desktop.svg</file>
|
||||
<file>assets/img/icons/discord.svg</file>
|
||||
<file>assets/img/icons/dots-icon.svg</file>
|
||||
<file>assets/img/icons/double-checkmark.svg</file>
|
||||
<file>assets/img/icons/download.svg</file>
|
||||
<file>assets/img/icons/edit.svg</file>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2Z" fill="#939BA1"/>
|
||||
<path d="M11 2C11 3.10457 10.1046 4 9 4C7.89543 4 7 3.10457 7 2C7 0.895431 7.89543 0 9 0C10.1046 0 11 0.895431 11 2Z" fill="#939BA1"/>
|
||||
<path d="M16 4C17.1046 4 18 3.10457 18 2C18 0.895431 17.1046 0 16 0C14.8954 0 14 0.895431 14 2C14 3.10457 14.8954 4 16 4Z" fill="#939BA1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 509 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.76326 2.13863C6.37499 1.52689 7.20714 1.40039 8.00002 1.40039C8.79291 1.40039 9.62505 1.52689 10.2368 2.13863C10.8228 2.72464 11.082 3.63065 11.0991 4.86755C11.4564 5.02873 11.7689 5.24124 12.0342 5.51905C12.8917 6.41698 13.1003 7.83827 13.1003 9.75039C13.1003 11.6625 12.8917 13.0838 12.0342 13.9817C11.1669 14.89 9.79528 15.1004 8.00027 15.1004C6.20526 15.1004 4.83368 14.89 3.96634 13.9817C3.10887 13.0838 2.90027 11.6625 2.90027 9.75039C2.90027 7.83827 3.10887 6.41698 3.96634 5.51905C4.23151 5.24137 4.54381 5.02892 4.90093 4.86777C4.91797 3.63076 5.17721 2.72468 5.76326 2.13863ZM9.38826 2.98715C9.61778 3.21668 9.82926 3.65266 9.88548 4.52256C9.32331 4.43176 8.69335 4.40039 8.00027 4.40039C7.30698 4.40039 6.67686 4.43178 6.11456 4.52263C6.17078 3.65269 6.38226 3.21668 6.61179 2.98715C6.87505 2.72389 7.29291 2.60039 8.00002 2.60039C8.70714 2.60039 9.12499 2.72389 9.38826 2.98715ZM4.83419 6.3478C4.34167 6.86356 4.10027 7.81727 4.10027 9.75039C4.10027 11.6835 4.34167 12.6372 4.83419 13.153C5.31685 13.6584 6.19528 13.9004 8.00027 13.9004C9.80526 13.9004 10.6837 13.6584 11.1663 13.153C11.6589 12.6372 11.9003 11.6835 11.9003 9.75039C11.9003 7.81727 11.6589 6.86356 11.1663 6.3478C10.6837 5.84237 9.80526 5.60039 8.00027 5.60039C6.19528 5.60039 5.31685 5.84237 4.83419 6.3478ZM6.50002 10.3504H9.50002V9.15044H6.50002V10.3504Z" fill="#647084"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -1,5 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 12.3C4 10.6198 4 9.77976 4.32698 9.13803C4.6146 8.57354 5.07354 8.1146 5.63803 7.82698C6.27976 7.5 7.11984 7.5 8.8 7.5H11.2C12.8802 7.5 13.7202 7.5 14.362 7.82698C14.9265 8.1146 15.3854 8.57354 15.673 9.13803C16 9.77976 16 10.6198 16 12.3V12.7C16 14.3802 16 15.2202 15.673 15.862C15.3854 16.4265 14.9265 16.8854 14.362 17.173C13.7202 17.5 12.8802 17.5 11.2 17.5H8.8C7.11984 17.5 6.27976 17.5 5.63803 17.173C5.07354 16.8854 4.6146 16.4265 4.32698 15.862C4 15.2202 4 14.3802 4 12.7V12.3Z" stroke="black" stroke-width="1.3" stroke-linejoin="round"/>
|
||||
<path d="M10 11V14" stroke="black" stroke-width="1.3" stroke-linejoin="round"/>
|
||||
<path d="M13 7.5V5.40569C13 3.80092 11.6991 2.5 10.0943 2.5V2.5C8.84361 2.5 7.73323 3.30032 7.33772 4.48683L7 5.5" stroke="black" stroke-width="1.3" stroke-linejoin="round"/>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.47378 0.778159C8.31207 0.573936 9.0847 0.866836 9.71359 1.22993C10.3425 1.59302 10.9825 2.11568 11.2247 2.94377C11.3914 3.51343 11.3475 4.14886 11.0897 4.86257C11.4508 5.02424 11.7663 5.238 12.0339 5.51817C12.8914 6.4161 13.1 7.83739 13.1 9.74951C13.1 11.6616 12.8914 13.0829 12.0339 13.9809C11.1665 14.8891 9.79497 15.0995 7.99996 15.0995C6.20495 15.0995 4.83338 14.8891 3.96604 13.9809C3.10856 13.0829 2.89996 11.6616 2.89996 9.74951C2.89996 7.83739 3.10856 6.4161 3.96604 5.51817C4.83338 4.60991 6.20495 4.39951 7.99996 4.39951C8.71299 4.39951 9.3592 4.43271 9.93353 4.52966C10.1555 3.95284 10.1537 3.5565 10.073 3.28074C9.9596 2.8931 9.64204 2.57426 9.11359 2.26916C8.58514 1.96406 8.15023 1.84846 7.75782 1.94406C7.36888 2.03881 6.85379 2.38325 6.26814 3.39762L5.22891 2.79762C5.89326 1.64693 6.63203 0.983226 7.47378 0.778159ZM4.83389 6.34692C4.34136 6.86269 4.09996 7.81639 4.09996 9.74951C4.09996 11.6826 4.34136 12.6363 4.83389 13.1521C5.31655 13.6575 6.19497 13.8995 7.99996 13.8995C9.80495 13.8995 10.6834 13.6575 11.166 13.1521C11.6586 12.6363 11.9 11.6826 11.9 9.74951C11.9 7.81639 11.6586 6.86269 11.166 6.34692C10.6834 5.84149 9.80495 5.59951 7.99996 5.59951C6.19497 5.59951 5.31655 5.84149 4.83389 6.34692ZM7.39987 8.49941V10.9994H8.59986V8.49941H7.39987Z" fill="#647084"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 917 B After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,312 @@
|
|||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Core.Utils 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
import AppLayouts.Chat.views.communities 1.0
|
||||
|
||||
/*!
|
||||
\qmltype CommunityPermissionsRow
|
||||
\inherits Control
|
||||
\inqmlmodule AppLayouts.Chat.controls.community 1.0
|
||||
\brief It is a permissions row control that provides information about community tokens permissions. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-controls2-control.html}{Control}.
|
||||
|
||||
The \c CommunityPermissionsRow is the token permissions representation row component.
|
||||
It has different ui abreviations / permutations depending on the tokens and permissons the permissions model provides.
|
||||
|
||||
Example of how to use it:
|
||||
\qml
|
||||
CommunityPermissionsRow {
|
||||
model: root.permissionsModel
|
||||
assetsModel: root.assetsModel
|
||||
collectiblesModel: root.collectiblesModel
|
||||
|
||||
overlapping: 8
|
||||
overlappingBorder: 1
|
||||
backgroundRadius: 8
|
||||
}
|
||||
\endqml
|
||||
For a list of components available see StatusQ.
|
||||
*/
|
||||
Control {
|
||||
|
||||
id: root
|
||||
|
||||
/*!
|
||||
\qmlproperty var CommunityPermissionsRow::model
|
||||
This property holds the permissions model with expected roles: [ holdingsModel [ roles: key] ].
|
||||
*/
|
||||
property var model
|
||||
|
||||
/*!
|
||||
\qmlproperty var CommunityPermissionsRow::assetsModel
|
||||
This property holds the global assets model.
|
||||
*/
|
||||
property var assetsModel
|
||||
|
||||
/*!
|
||||
\qmlproperty var CommunityPermissionsRow::collectiblesModel
|
||||
This property holds the global collectibles model.
|
||||
*/
|
||||
property var collectiblesModel
|
||||
|
||||
/*!
|
||||
\qmlproperty bool CommunityPermissionsRow::requirementsMet
|
||||
This property holds if the token requirements are met in case the community requires permissions.
|
||||
*/
|
||||
property bool requirementsMet: false
|
||||
|
||||
/*!
|
||||
\qmlproperty int CommunityPermissionsRow::overlapping
|
||||
This property allows customizing the overlapping distance between elements.
|
||||
*/
|
||||
property int overlapping: 8
|
||||
|
||||
/*!
|
||||
\qmlproperty int CommunityPermissionsRow::overlappingBorder
|
||||
This property allows customizing the overlapping border between elements.
|
||||
*/
|
||||
property int overlappingBorder: 1
|
||||
|
||||
/*!
|
||||
\qmlproperty color CommunityPermissionsRow::backgroundColor
|
||||
This property holds the control background color, including border color of overlapped elements.
|
||||
*/
|
||||
property color backgroundColor: Theme.palette.baseColor4
|
||||
|
||||
/*!
|
||||
\qmlproperty int CommunityPermissionsRow::backgroundRadius
|
||||
This property holds the background radius.
|
||||
*/
|
||||
property int backgroundRadius: 8
|
||||
|
||||
/*!
|
||||
\qmlproperty int CommunityPermissionsRow::dotsIconSize
|
||||
This property holds the dots icon size.
|
||||
*/
|
||||
property int dotsIconSize: 8
|
||||
|
||||
/*!
|
||||
\qmlproperty int CommunityPermissionsRow::pixelSize
|
||||
This property holds the font pixel size of all elements that contain text,
|
||||
like the text `or` between elements or the `+2` and `+3` element's text.
|
||||
*/
|
||||
property int fontPixelSize: 11
|
||||
|
||||
QtObject {
|
||||
id: d
|
||||
|
||||
readonly property int maxTokens: 5
|
||||
readonly property int maxVisualPermissions: 2
|
||||
|
||||
property bool dotsVisible: false
|
||||
|
||||
function buildShortModel(model) {
|
||||
shortModel.clear()
|
||||
|
||||
if(!model)
|
||||
return
|
||||
|
||||
const modelCount = model.rowCount()
|
||||
if(modelCount <= 0)
|
||||
return
|
||||
|
||||
// CASE 1: Only 1 or 2 permission (no abbreviations)
|
||||
if(modelCount <= maxVisualPermissions) {
|
||||
dotsVisible = false
|
||||
for(var i = 0; i < modelCount; i++)
|
||||
shortModel.append(ModelUtils.get(model, i))
|
||||
return
|
||||
}
|
||||
|
||||
// Global data needed:
|
||||
const permission1 = ModelUtils.get(model, 0)
|
||||
const permission2 = ModelUtils.get(model, 1)
|
||||
const holdingsCount1 = permission1.holdingsListModel.rowCount()
|
||||
const holdingsCount2 = permission2.holdingsListModel.rowCount()
|
||||
|
||||
// CASE 2: Exactly 3 permissions (All they have only 1 token
|
||||
// OR all they have 1 token but only 1 has 2 tokens)
|
||||
if(modelCount === 3) {
|
||||
const permission3 = ModelUtils.get(model, 2)
|
||||
const holdingsCount3 = permission3.holdingsListModel.rowCount()
|
||||
|
||||
if((holdingsCount1 === 1 && holdingsCount2 === 1 && holdingsCount3 === 1) ||
|
||||
(holdingsCount1 === 2 && holdingsCount2 === 1 && holdingsCount3 === 1) ||
|
||||
(holdingsCount1 === 1 && holdingsCount2 === 2 && holdingsCount3 === 1) ||
|
||||
(holdingsCount1 === 1 && holdingsCount2 === 1 && holdingsCount3 === 2)) {
|
||||
shortModel.append(permission1)
|
||||
shortModel.append(permission2)
|
||||
shortModel.append(permission3)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// CASE 3: More than 2 permissions and didn't fit with previous conditions (dots visualized)
|
||||
if(modelCount > maxVisualPermissions) {
|
||||
dotsVisible = true
|
||||
shortModel.append(permission1)
|
||||
|
||||
// More than 2 permissions but 1st and 2nd have only 1:1 or 1:2 tokens
|
||||
if((holdingsCount1 === 1 && holdingsCount2 === 1) ||
|
||||
(holdingsCount1 === 2 && holdingsCount2 === 1) ||
|
||||
(holdingsCount1 === 1 && holdingsCount2 === 2)) {
|
||||
shortModel.append(permission2)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
implicitHeight: 24
|
||||
spacing: 4
|
||||
padding: 1
|
||||
|
||||
background: Rectangle {
|
||||
color: root.backgroundColor
|
||||
radius: root.backgroundRadius
|
||||
}
|
||||
|
||||
contentItem: RowLayout {
|
||||
id: container
|
||||
|
||||
anchors.centerIn: parent
|
||||
anchors.margins: root.padding
|
||||
spacing: root.spacing
|
||||
|
||||
StatusIcon {
|
||||
Layout.preferredHeight: container.height - 6
|
||||
Layout.preferredWidth: Layout.preferredHeight
|
||||
Layout.leftMargin: 4
|
||||
|
||||
icon: root.requirementsMet ? "tiny/unlocked" : "tiny/locked"
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
|
||||
Repeater {
|
||||
id: repeater
|
||||
|
||||
model: shortModel
|
||||
|
||||
RowLayout {
|
||||
spacing: root.spacing
|
||||
|
||||
SinglePermissionRow {
|
||||
model: holdingsListModel
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
visible: index !== (repeater.count - 1) || d.dotsVisible
|
||||
text: qsTr("or")
|
||||
font.pixelSize: root.fontPixelSize
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusRoundedComponent {
|
||||
Layout.preferredHeight: container.height
|
||||
Layout.preferredWidth: Layout.preferredHeight
|
||||
|
||||
visible: d.dotsVisible
|
||||
color: Theme.palette.baseColor3
|
||||
border.color: root.backgroundColor
|
||||
border.width: root.overlappingBorder
|
||||
|
||||
StatusIcon {
|
||||
anchors.centerIn: parent
|
||||
visible: d.dotsVisible
|
||||
icon: "dots-icon"
|
||||
height: root.dotsIconSize
|
||||
width: height
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onModelChanged: d.buildShortModel(root.model)
|
||||
Component.onCompleted: d.buildShortModel(root.model)
|
||||
|
||||
ListModel { id: shortModel }
|
||||
|
||||
|
||||
component SinglePermissionRow: RowLayout {
|
||||
id: singlePermissionItem
|
||||
|
||||
readonly property int maxVisualTokens: 3
|
||||
|
||||
property var model
|
||||
property string plusElementText: ""
|
||||
property bool plusElementVisible: false
|
||||
|
||||
function getVisualTokensCount(modelCount) {
|
||||
if(singlePermissionItem.maxVisualTokens < modelCount)
|
||||
// Need of shorter model
|
||||
return singlePermissionItem.maxVisualTokens - 1
|
||||
// All elements in model
|
||||
return modelCount
|
||||
}
|
||||
|
||||
function buildTokensRowModel(model) {
|
||||
shortTokensRowModel.clear()
|
||||
if(!model)
|
||||
return
|
||||
|
||||
var modelCount = model.rowCount()
|
||||
|
||||
for(var i = 0; i < getVisualTokensCount(modelCount); i++)
|
||||
shortTokensRowModel.append(ModelUtils.get(model, i))
|
||||
|
||||
plusElementVisible = modelCount > maxVisualTokens
|
||||
if(plusElementVisible)
|
||||
plusElementText = qsTr("+%1").arg(modelCount - maxVisualTokens)
|
||||
}
|
||||
|
||||
spacing: -root.overlapping
|
||||
|
||||
onModelChanged: buildTokensRowModel(singlePermissionItem.model)
|
||||
Component.onCompleted: buildTokensRowModel(singlePermissionItem.model)
|
||||
|
||||
ListModel{ id: shortTokensRowModel }
|
||||
|
||||
Repeater {
|
||||
model: HoldingsSelectionModel {
|
||||
sourceModel: shortTokensRowModel
|
||||
|
||||
assetsModel: root.assetsModel
|
||||
collectiblesModel: root.collectiblesModel
|
||||
}
|
||||
|
||||
StatusRoundedImage {
|
||||
Layout.preferredHeight: container.height
|
||||
Layout.preferredWidth: Layout.preferredHeight
|
||||
|
||||
z: index
|
||||
image.source: model.imageSource
|
||||
color: "transparent"
|
||||
border.color: root.backgroundColor
|
||||
border.width: root.overlappingBorder
|
||||
}
|
||||
}
|
||||
|
||||
StatusRoundedComponent {
|
||||
visible: singlePermissionItem.plusElementVisible
|
||||
Layout.preferredHeight: container.height
|
||||
Layout.preferredWidth: Layout.preferredHeight
|
||||
|
||||
z: d.maxTokens
|
||||
color: Theme.palette.baseColor3
|
||||
border.color: root.backgroundColor
|
||||
border.width: root.overlappingBorder
|
||||
StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: singlePermissionItem.plusElementText
|
||||
color: Theme.palette.baseColor1
|
||||
font.pixelSize: root.fontPixelSize
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ AirdropRecipientsSelector 1.0 AirdropRecipientsSelector.qml
|
|||
AirdropTokensSelector 1.0 AirdropTokensSelector.qml
|
||||
CommunityCategoryListItem 1.0 CommunityCategoryListItem.qml
|
||||
CommunityListItem 1.0 CommunityListItem.qml
|
||||
CommunityPermissionsRow 1.0 CommunityPermissionsRow.qml
|
||||
HoldingTypes 1.0 HoldingTypes.qml
|
||||
HoldingsDropdown 1.0 HoldingsDropdown.qml
|
||||
InDropdown 1.0 InDropdown.qml
|
||||
|
|
|
|||
Loading…
Reference in New Issue