diff --git a/storybook/pages/HoldingsDropdownPage.qml b/storybook/pages/HoldingsDropdownPage.qml index 7e0b5f4d8c..cb9e92119f 100644 --- a/storybook/pages/HoldingsDropdownPage.qml +++ b/storybook/pages/HoldingsDropdownPage.qml @@ -52,6 +52,8 @@ SplitView { parent: container anchors.centerIn: container + allTokensMode: ctrlAllTokensMode.checked + CollectiblesModel { id: collectiblesModel } @@ -162,6 +164,11 @@ SplitView { text: "Airdrop mode" checked: false } + + CheckBox { + id: ctrlAllTokensMode + text: "All tokens mode" + } } } } diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusDropdown.qml b/ui/StatusQ/src/StatusQ/Controls/StatusDropdown.qml index dff7d7244b..05d485cc8e 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusDropdown.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusDropdown.qml @@ -8,8 +8,8 @@ import StatusQ.Core.Theme 0.1 /*! \qmltype StatusDropdown \inherits Popup - \inqmlmodule StatusQ.Popups - \since StatusQ.Popups 0.1 + \inqmlmodule StatusQ.Controls + \since StatusQ.Controls 0.1 \brief The StatusDropdown provides a template for creating dropdowns. NOTE: Each consumer needs to set the x and y postion of the dropdown. diff --git a/ui/app/AppLayouts/Communities/controls/ExtendedDropdownContent.qml b/ui/app/AppLayouts/Communities/controls/ExtendedDropdownContent.qml index 785585fd70..a8b7f2ac7a 100644 --- a/ui/app/AppLayouts/Communities/controls/ExtendedDropdownContent.qml +++ b/ui/app/AppLayouts/Communities/controls/ExtendedDropdownContent.qml @@ -14,6 +14,7 @@ import shared.controls 1.0 import shared.panels 1.0 import SortFilterProxyModel 0.2 +import utils 1.0 Item { id: root @@ -75,6 +76,7 @@ Item { readonly property int filterItemsHeight: 36 readonly property int filterPopupWidth: 233 + readonly property int padding: Style.current.halfPadding // Internal management properties property bool isFilterOptionVisible: false @@ -172,7 +174,16 @@ Item { } expression: getCategoryLabelForType(model.category, root.type) - } + } + + sorters: [ + RoleSorter { + roleName: "category" + }, + RoleSorter { + roleName: "name" + } + ] } } @@ -255,6 +266,7 @@ Item { icon.name: "filter" anchors.right: parent.right + anchors.rightMargin: d.padding anchors.bottom: parent.top anchors.bottomMargin: 3 @@ -384,6 +396,8 @@ Item { id: searcher Layout.fillWidth: true + Layout.leftMargin: d.padding + Layout.rightMargin: d.padding Layout.topMargin: root.state === d.depth1_ListState ? 0 : 8 visible: d.availableData @@ -426,6 +440,8 @@ Item { id: tokenGroupItem Layout.fillWidth: true + Layout.leftMargin: d.padding + Layout.rightMargin: d.padding name: qsTr("Any %1").arg(d.currentItemName) iconSource: d.currentItemSource @@ -450,6 +466,7 @@ Item { id: assetsListView ListDropdownContent { + id: assetDelegate availableData: d.availableData noDataText: root.noDataText areHeaderButtonsVisible: root.state === d.depth1_ListState @@ -482,7 +499,7 @@ Item { onImplicitHeightChanged: root.layoutChanged() Binding on implicitHeight { - value: contentHeight + value: contentHeight + d.padding //avoid too many changes of the implicit height delayed: true } @@ -493,6 +510,7 @@ Item { id: collectiblesListView ListDropdownContent { + id: collectibleDelegate availableData: d.availableData noDataText: root.noDataText areHeaderButtonsVisible: root.state === d.depth1_ListState @@ -540,7 +558,7 @@ Item { } onImplicitHeightChanged: root.layoutChanged() Binding on implicitHeight { - value: contentHeight + value: contentHeight + d.padding //avoid too many changes of the implicit height delayed: true } diff --git a/ui/app/AppLayouts/Communities/controls/ListDropdownContent.qml b/ui/app/AppLayouts/Communities/controls/ListDropdownContent.qml index c36826a13a..f5a6b0c995 100644 --- a/ui/app/AppLayouts/Communities/controls/ListDropdownContent.qml +++ b/ui/app/AppLayouts/Communities/controls/ListDropdownContent.qml @@ -36,10 +36,11 @@ StatusListView { implicitWidth: 273 implicitHeight: Math.min(contentHeight, root.maxHeight) currentIndex: -1 - clip: true + leftMargin: d.padding + rightMargin: 14 // scrollbar width header: ColumnLayout { - width: root.width + width: root.availableWidth spacing: 0 @@ -88,7 +89,7 @@ StatusListView { } delegate: TokenItem { - width: ListView.view.width + width: root.availableWidth name: model.name shortName: model.shortName ?? "" @@ -103,30 +104,47 @@ StatusListView { section.property: root.searchMode || !root.areSectionsVisible ? "" : "categoryLabel" - section.criteria: ViewSection.FullString + section.delegate: ColumnLayout { + width: root.availableWidth + height: root.searchMode || root.areSectionsVisible ? d.sectionHeight : 0 + spacing: 0 - section.delegate: Item { - width: ListView.view.width - height: d.sectionHeight + Rectangle { + Layout.fillWidth: true + Layout.fillHeight: true + color: Theme.palette.statusListItem.backgroundColor - Loader { - id: loader - anchors.fill: parent - sourceComponent: sectionComponent + Loader { + id: loader + anchors.fill: parent + sourceComponent: sectionComponent - Binding { - target: loader.item - property: "section" - value: section + Binding { + target: loader.item + property: "section" + value: section + when: !root.searchMode + } } } + + // floating divider + Rectangle { + visible: parent.y === root.contentY && (root.searchMode || root.areSectionsVisible) + Layout.fillWidth: true + Layout.leftMargin: -d.padding + Layout.rightMargin: -d.padding*2 + Layout.preferredHeight: 4 + color: Theme.palette.directColor8 + } } + section.labelPositioning: ViewSection.InlineLabels | ViewSection.CurrentLabelAtStart Component { id: footerComponent Item { - width: ListView.view ? ListView.view.width : 0 + width: ListView.view ? ListView.view.width - Style.current.smallPadding : 0 height: d.sectionHeight Loader { @@ -167,6 +185,7 @@ StatusListView { QtObject { id: d + readonly property int padding: Style.current.halfPadding readonly property int sectionHeight: 34 } @@ -180,7 +199,7 @@ StatusListView { if(!root.availableData) return root.noDataText if(root.count) - return qsTr("Search result") + return qsTr("Search results") return qsTr("No results") } diff --git a/ui/app/AppLayouts/Communities/controls/TokenItem.qml b/ui/app/AppLayouts/Communities/controls/TokenItem.qml index ebcb8dc1c7..a71eacab74 100644 --- a/ui/app/AppLayouts/Communities/controls/TokenItem.qml +++ b/ui/app/AppLayouts/Communities/controls/TokenItem.qml @@ -18,11 +18,12 @@ Control { signal itemClicked - leftPadding: 6 // by design - implicitHeight: 45 // by design + padding: 6 // by design + implicitHeight: 44 // by design spacing: 8 // by design background: Rectangle { - color: mouseArea.containsMouse ? Theme.palette.baseColor4 : "transparent" + color: mouseArea.containsMouse ? Theme.palette.statusListItem.highlightColor : "transparent" + radius: 8 MouseArea { id: mouseArea @@ -82,7 +83,6 @@ Control { icon: root.selected && !root.showSubItemsIcon ? "checkmark" : "tiny/chevron-right" visible: root.selected || root.showSubItemsIcon Layout.alignment: Qt.AlignVCenter - Layout.rightMargin: 16 color: Theme.palette.baseColor1 width: 16 height: 16 diff --git a/ui/app/AppLayouts/Communities/popups/HoldingsDropdown.qml b/ui/app/AppLayouts/Communities/popups/HoldingsDropdown.qml index f889fd1093..84e5f029c8 100644 --- a/ui/app/AppLayouts/Communities/popups/HoldingsDropdown.qml +++ b/ui/app/AppLayouts/Communities/popups/HoldingsDropdown.qml @@ -29,6 +29,8 @@ StatusDropdown { property string noDataTextForAssets: qsTr("No assets found") property string noDataTextForCollectibles: qsTr("No collectibles found") + property alias allTokensMode: d.allTokensMode + property var usedTokens: [] property var usedEnsNames: [] @@ -118,8 +120,7 @@ StatusDropdown { // By design values: readonly property int padding: 8 readonly property int defaultWidth: 289 - readonly property int extendedContentHeight: 380 - readonly property int tabBarHeigh: 36 + readonly property int tabBarHeight: 36 readonly property int tabBarTextSize: 13 readonly property int backButtonWidth: 56 readonly property int backButtonHeight: 24 @@ -152,9 +153,11 @@ StatusDropdown { } width: d.defaultWidth - padding: d.padding + leftPadding: 0 + rightPadding: 0 + topPadding: d.padding bottomInset: d.bottomInset - bottomPadding: d.padding + d.bottomInset + bottomPadding: d.bottomInset + (loader.sourceComponent == listLayout ? 0 : d.padding) contentItem: ColumnLayout { id: content @@ -167,6 +170,8 @@ StatusDropdown { Layout.preferredWidth: d.backButtonWidth Layout.preferredHeight: d.backButtonHeight + Layout.leftMargin: d.padding + Layout.rightMargin: d.padding visible: statesStack.size > 1 spacing: 0 leftPadding: 4 @@ -180,8 +185,10 @@ StatusDropdown { id: tabBar visible: !backButton.visible - Layout.preferredHeight: d.tabBarHeigh + Layout.preferredHeight: d.tabBarHeight Layout.fillWidth: true + Layout.leftMargin: d.padding + Layout.rightMargin: d.padding currentIndex: d.holdingTypes.indexOf(d.currentHoldingType) state: d.currentHoldingType states: [ @@ -222,6 +229,8 @@ StatusDropdown { Loader { id: loader Layout.fillWidth: true + Layout.leftMargin: loader.sourceComponent == listLayout ? 0 : d.padding + Layout.rightMargin: loader.sourceComponent == listLayout ? 0 : d.padding Layout.fillHeight: true onItemChanged: d.forceLayout() }