Noelia b92974ffff feat(ProfileShowcase): Display counter in In showcase section header and elements limit
- Added counter in showcase header.
- Added placeholder when limit reached and section expanded.
- Added placeholder when limit reached and section collapsed.
- Added green animation when section collapsed and element added.
- Disabled showcase delegate context menu when limit reached.
- Dynamic tooltip offset center added.
- Added model changes tracker to track the in showcase count.

Closes #13507
2024-03-07 16:10:46 +01:00

132 lines
4.6 KiB
QML

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.0
import QtQml 2.15
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Popups 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import AppLayouts.Wallet.controls 1.0
import utils 1.0
import shared.controls 1.0
StatusDraggableListItem {
id: root
property alias actionComponent: additionalActionsLoader.sourceComponent
property int showcaseVisibility: Constants.ShowcaseVisibility.NoOne
property bool blurState: false
property bool contextMenuEnabled: true
property string tooltipTextWhenContextMenuDisabled
signal showcaseVisibilityRequested(int value)
component ShowcaseVisibilityAction: StatusMenuItem {
property int showcaseVisibility: Constants.ShowcaseVisibility.NoOne
icon.name: ProfileUtils.visibilityIcon(showcaseVisibility)
icon.color: Theme.palette.primaryColor1
}
layer.enabled: root.blurState
layer.effect: fastBlur
height: ProfileUtils.defaultDelegateHeight
topInset: 0
bottomInset: 0
changeColorOnDragActive: false
bgColor: Theme.palette.getColor(Theme.palette.statusAppLayout.rightPanelBackgroundColor, 0.7)
icon.width: 40
icon.height: 40
draggable: true
dragAxis: Drag.XAndYAxis
actions: [
Loader {
id: additionalActionsLoader
Layout.maximumWidth: root.width *.4
},
DisabledTooltipButton {
interactive: root.contextMenuEnabled
tooltipText: root.tooltipTextWhenContextMenuDisabled
buttonComponent: StatusRoundButton {
enabled: root.contextMenuEnabled
icon.name: ProfileUtils.visibilityIcon(root.showcaseVisibility)
width: 58
height: 30
border.width: 1
border.color: Theme.palette.directColor7
radius: 14
highlighted: menuLoader.item && menuLoader.item.opened
onClicked: {
menuLoader.active = true
menuLoader.item.popup(width - menuLoader.item.width, height)
}
ButtonGroup {
id: showcaseVisibilityGroup
exclusive: true
onClicked: function(button) {
const newVisibility = (button as ShowcaseVisibilityAction).showcaseVisibility
if (newVisibility !== root.showcaseVisibility)
root.showcaseVisibilityRequested(newVisibility)
}
}
Loader {
id: menuLoader
active: false
sourceComponent: StatusMenu {
onClosed: menuLoader.active = false
StatusMenuHeadline { text: qsTr("Show to") }
ShowcaseVisibilityAction {
ButtonGroup.group: showcaseVisibilityGroup
showcaseVisibility: Constants.ShowcaseVisibility.Everyone
text: qsTr("Everyone")
checked: root.showcaseVisibility === showcaseVisibility
}
ShowcaseVisibilityAction {
ButtonGroup.group: showcaseVisibilityGroup
showcaseVisibility: Constants.ShowcaseVisibility.Contacts
text: qsTr("Contacts")
checked: root.showcaseVisibility === showcaseVisibility
}
ShowcaseVisibilityAction {
ButtonGroup.group: showcaseVisibilityGroup
showcaseVisibility: Constants.ShowcaseVisibility.IdVerifiedContacts
text: qsTr("ID verified contacts")
checked: root.showcaseVisibility === showcaseVisibility
}
StatusMenuSeparator {}
ShowcaseVisibilityAction {
ButtonGroup.group: showcaseVisibilityGroup
showcaseVisibility: Constants.ShowcaseVisibility.NoOne
text: qsTr("No one")
checked: root.showcaseVisibility === showcaseVisibility
}
}
}
}
}
]
Component {
id: fastBlur
FastBlur {
radius: 32
transparentBorder: true
}
}
}