feat: SequenceColumnLayout component added

storybook/PagesModel.qml

@@ -133,6 +133,10 @@ ListModel {
         title: "TokenPanel"
         section: "Panels"
     }
+    ListElement {
+        title: "SequenceColumnLayout"
+        section: "Panels"
+    }
     ListElement {
         title: "InviteFriendsToCommunityPopup"
         section: "Popups"

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()
+            }
+        }
+    }
+}

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
 

ui/imports/shared/panels/CurveSeparatorWithText.qml

@@ -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
-    }
-}

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
+        }
+    }
+}

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