diff --git a/storybook/PagesModel.qml b/storybook/PagesModel.qml index bc7299475d..b7cfd15f1b 100644 --- a/storybook/PagesModel.qml +++ b/storybook/PagesModel.qml @@ -133,6 +133,10 @@ ListModel { title: "TokenPanel" section: "Panels" } + ListElement { + title: "SequenceColumnLayout" + section: "Panels" + } ListElement { title: "InviteFriendsToCommunityPopup" section: "Popups" diff --git a/storybook/pages/SequenceColumnLayoutPage.qml b/storybook/pages/SequenceColumnLayoutPage.qml new file mode 100644 index 0000000000..c4b69c7f4e --- /dev/null +++ b/storybook/pages/SequenceColumnLayoutPage.qml @@ -0,0 +1,56 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +import shared.panels 1.0 + +Item { + component Content: Rectangle { + Layout.fillWidth: true + + height: 50 + border.width: 1 + radius: 10 + } + + SequenceColumnLayout { + anchors.centerIn: parent + width: 300 + + title: titleTextField.text + + Content { + color: "red" + } + + SequenceColumnLayout.Separator {} + + Content { + color: "green" + } + + SequenceColumnLayout.Separator {} + + Content { + color: "blue" + } + } + + Pane { + anchors.bottom: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter + + RowLayout { + TextField { + id: titleTextField + + text: "Some title goes here" + } + Button { + text: "Clear" + + onClicked: titleTextField.clear() + } + } + } +} diff --git a/ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml b/ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml index fab5eef5dd..cc18830b4a 100644 --- a/ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml +++ b/ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml @@ -180,16 +180,11 @@ StatusScrollView { onPermissionTypeChanged: Qt.callLater(() => d.loadInitValues()) - ColumnLayout { + SequenceColumnLayout { id: mainLayout - width: root.viewWidth - spacing: 0 - CurveSeparatorWithText { - Layout.alignment: Qt.AlignLeft - Layout.leftMargin: 14 - text: qsTr("Anyone") - } + width: root.viewWidth + title: qsTr("Anyone") StatusItemSelector { id: tokensSelector @@ -377,12 +372,9 @@ StatusScrollView { editedIndex = index } } - Rectangle { - Layout.leftMargin: 16 - Layout.preferredWidth: 2 - Layout.preferredHeight: 24 - color: Style.current.separator - } + + SequenceColumnLayout.Separator {} + StatusFlowSelector { id: permissionsSelector @@ -465,12 +457,9 @@ StatusScrollView { permissionsDropdown.open() } } - Rectangle { - Layout.leftMargin: 16 - Layout.preferredWidth: 2 - Layout.preferredHeight: 24 - color: Style.current.separator - } + + SequenceColumnLayout.Separator {} + StatusItemSelector { id: inSelector diff --git a/ui/imports/shared/panels/CurveSeparatorWithText.qml b/ui/imports/shared/panels/CurveSeparatorWithText.qml deleted file mode 100644 index a44f2fd81c..0000000000 --- a/ui/imports/shared/panels/CurveSeparatorWithText.qml +++ /dev/null @@ -1,46 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Layouts 1.15 - -import StatusQ.Core 0.1 -import StatusQ.Core.Theme 0.1 - -import utils 1.0 - -RowLayout { - property alias text: text.text - - implicitHeight: 32 - - Item { - readonly property int cornerRadius: 9 - readonly property int lineWidth: 2 - readonly property int verticalLine: 12 - readonly property int horizontalLine: 19 - - Layout.preferredWidth: horizontalLine + cornerRadius - Layout.preferredHeight: verticalLine + lineWidth + cornerRadius - Layout.topMargin: 12 - - clip: true - - Rectangle { - width: parent.width * 2 - height: parent.height * 2 - color: "transparent" - radius: parent.cornerRadius - - border.width: parent.lineWidth - border.color: Style.current.separator - } - } - - StatusBaseText { - id: text - - Layout.alignment: Qt.AlignTop - Layout.topMargin: 2 - - color: Theme.palette.directColor1 - font.pixelSize: 17 - } -} diff --git a/ui/imports/shared/panels/SequenceColumnLayout.qml b/ui/imports/shared/panels/SequenceColumnLayout.qml new file mode 100644 index 0000000000..3123fe3bcf --- /dev/null +++ b/ui/imports/shared/panels/SequenceColumnLayout.qml @@ -0,0 +1,68 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.15 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 + +import utils 1.0 + +ColumnLayout { + id: root + + property alias title: text.text + + readonly property int lineWidth: 2 + readonly property int lineHeight: 24 + readonly property int lineMargin: 15 + + readonly property int curvedLineWidth: 29 + readonly property int curvedLineHeight: 21 + readonly property int curvedLineRadius: 9 + readonly property int curvedLineToTextSpacing: 4 + + spacing: 0 + + component Separator: Rectangle { + Layout.leftMargin: parent.lineMargin + Layout.preferredWidth: parent.lineWidth + Layout.preferredHeight: parent.lineHeight + color: Style.current.separator + } + + RowLayout { + visible: !!root.title + + Layout.preferredHeight: text.implicitHeight / 2 + root.curvedLineHeight + Layout.fillWidth: true + Layout.leftMargin: root.lineMargin + + Item { + Layout.preferredWidth: root.curvedLineWidth + Layout.preferredHeight: root.curvedLineHeight + Layout.alignment: Qt.AlignBottom + + clip: true + + Rectangle { + width: parent.width * 2 + height: parent.height * 2 + radius: root.curvedLineRadius + + color: "transparent" + border.width: root.lineWidth + border.color: Style.current.separator + } + } + + StatusBaseText { + id: text + + Layout.fillWidth: true + Layout.alignment: Qt.AlignTop + + color: Theme.palette.directColor1 + font.pixelSize: Theme.primaryTextFontSize + 2 + elide: Text.ElideRight + } + } +} diff --git a/ui/imports/shared/panels/qmldir b/ui/imports/shared/panels/qmldir index dcef3948ba..b41e56d397 100644 --- a/ui/imports/shared/panels/qmldir +++ b/ui/imports/shared/panels/qmldir @@ -1,28 +1,28 @@ +AcceptRejectOptionsButtonsPanel 1.0 AcceptRejectOptionsButtonsPanel.qml Address 1.0 Address.qml AddressRequiredValidator 1.0 AddressRequiredValidator.qml BalanceValidator 1.0 BalanceValidator.qml CommunityBanner 1.0 CommunityBanner.qml +ConnectionWarnings 1.0 ConnectionWarnings.qml +DidYouKnowSplashScreen 1.0 DidYouKnowSplashScreen.qml +EditCroppedImagePanel 1.0 EditCroppedImagePanel.qml +EnterSeedPhrase 1.0 EnterSeedPhrase.qml GlossaryEntry 1.0 GlossaryEntry.qml GlossaryLetter 1.0 GlossaryLetter.qml ImageLoader 1.0 ImageLoader.qml LabelValueRow 1.0 LabelValueRow.qml ModuleWarning 1.0 ModuleWarning.qml +NoImageUploadedPanel 1.0 NoImageUploadedPanel.qml NotificationWindow 1.0 NotificationWindow.qml ProfileBioSocialsPanel 1.0 ProfileBioSocialsPanel.qml RoundedIcon 1.0 RoundedIcon.qml RoundedImage 1.0 RoundedImage.qml +SVGImage 1.0 SVGImage.qml +SeedPhrase 1.0 SeedPhrase.qml Separator 1.0 Separator.qml SeparatorWithIcon 1.0 SeparatorWithIcon.qml -CurveSeparatorWithText 1.0 CurveSeparatorWithText.qml +SequenceColumnLayout 1.0 SequenceColumnLayout.qml SplitViewHandle 1.0 SplitViewHandle.qml -StyledText 1.0 StyledText.qml -SVGImage 1.0 SVGImage.qml -TextWithLabel 1.0 TextWithLabel.qml -EditCroppedImagePanel 1.0 EditCroppedImagePanel.qml -NoImageUploadedPanel 1.0 NoImageUploadedPanel.qml StatusAssetSelector 1.0 StatusAssetSelector.qml -AcceptRejectOptionsButtonsPanel 1.0 AcceptRejectOptionsButtonsPanel.qml -DidYouKnowSplashScreen 1.0 DidYouKnowSplashScreen.qml -ConnectionWarnings 1.0 ConnectionWarnings.qml -EnterSeedPhrase 1.0 EnterSeedPhrase.qml -SeedPhrase 1.0 SeedPhrase.qml +StyledText 1.0 StyledText.qml +TextWithLabel 1.0 TextWithLabel.qml