diff --git a/storybook/pages/ProfilePerspectiveSelectorPage.qml b/storybook/pages/ProfilePerspectiveSelectorPage.qml new file mode 100644 index 0000000000..5d4b0461b6 --- /dev/null +++ b/storybook/pages/ProfilePerspectiveSelectorPage.qml @@ -0,0 +1,14 @@ +import QtQuick 2.15 + +import shared.controls 1.0 + +Item { + ProfilePerspectiveSelector { + anchors.centerIn: parent + onVisibilitySelected: (visibility) => showcaseVisibility = visibility + } +} + +//category: Controls + +// https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/👤-Profile-%7C-Desktop?type=design&node-id=2460-28481&mode=design&t=XMfk3mxF7lZD7DZe-0 \ No newline at end of file diff --git a/ui/imports/shared/controls/ProfilePerspectiveSelector.qml b/ui/imports/shared/controls/ProfilePerspectiveSelector.qml new file mode 100644 index 0000000000..3003e1929b --- /dev/null +++ b/ui/imports/shared/controls/ProfilePerspectiveSelector.qml @@ -0,0 +1,96 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Controls 0.1 +import StatusQ.Popups 0.1 + +import utils 1.0 + +StatusButton { + id: root + + property int showcaseVisibility: Constants.ShowcaseVisibility.Everyone + + signal visibilitySelected(int showcaseVisibility) + + implicitWidth: d.maxTextWidth + 2 * horizontalPadding + indicator.width + icon.width + 2 * spacing + hoverColor: normalColor + normalColor: Theme.palette.primaryColor1 + textColor: Theme.palette.indirectColor1 + text: (showcaseVisibilityGroup.checkedButton as ShowcaseVisibilityAction).selectedText + textFillWidth: true + icon.name: showcaseVisibilityGroup.checkedButton.icon.name + + indicator: StatusIcon { + anchors.right: parent.right + anchors.rightMargin: parent.horizontalPadding + anchors.verticalCenter: parent.verticalCenter + icon: "chevron-down" + color: root.textColor + } + + onClicked: { + menu.open() + } + + ButtonGroup { + id: showcaseVisibilityGroup + exclusive: true + onClicked: (button) => root.visibilitySelected((button as ShowcaseVisibilityAction).showcaseVisibility) + } + + StatusMenu { + id: menu + + y: root.height + 4 + width: root.width + + ShowcaseVisibilityAction { + showcaseVisibility: Constants.ShowcaseVisibility.Everyone + text: qsTr("Stranger") + } + ShowcaseVisibilityAction { + showcaseVisibility: Constants.ShowcaseVisibility.Contacts + text: qsTr("Contact") + } + ShowcaseVisibilityAction { + showcaseVisibility: Constants.ShowcaseVisibility.IdVerifiedContacts + text: qsTr("ID verified contact") + } + } + + component ShowcaseVisibilityAction: StatusMenuItem { + id: menuItem + required property int showcaseVisibility + + readonly property string selectedText: d.buttonTextFormat.arg(text) + readonly property alias selectedTextWidth: textMetricsMaxWidth.width + + ButtonGroup.group: showcaseVisibilityGroup + icon.name: ProfileUtils.visibilityIcon(showcaseVisibility) + icon.color: Theme.palette.primaryColor1 + checked: root.showcaseVisibility === showcaseVisibility + + TextMetrics { + id: textMetricsMaxWidth + font: root.font + text: menuItem.selectedText + } + } + + QtObject { + id: d + + readonly property string buttonTextFormat: "%1%2".arg(qsTr("Preview as ")) + + property real maxTextWidth: { + let max = 0 + for (var i = 0; i < showcaseVisibilityGroup.buttons.length; i++) { + max = Math.max(max, (showcaseVisibilityGroup.buttons[i] as ShowcaseVisibilityAction).selectedTextWidth) + } + return max + } + } +} \ No newline at end of file diff --git a/ui/imports/shared/controls/qmldir b/ui/imports/shared/controls/qmldir index 7f7c5c17c4..00ee697c70 100644 --- a/ui/imports/shared/controls/qmldir +++ b/ui/imports/shared/controls/qmldir @@ -22,6 +22,7 @@ InformationTile 1.0 InformationTile.qml Input 1.0 Input.qml LoadingTokenDelegate 1.0 LoadingTokenDelegate.qml LinkPreviewDebugView 1.0 LinkPreviewDebugView.qml +ProfilePerspectiveSelector 1.0 ProfilePerspectiveSelector.qml RadioButtonSelector 1.0 RadioButtonSelector.qml RecipientSelector 1.0 RecipientSelector.qml SearchBox 1.0 SearchBox.qml