feat(StatusInput): add support for asynchronous validators

This adds support for asynchronous validators which are also just `StatusValidator`. There are a few differences to syncronous validators though: 1. `validate` function doesn't return, it's only used to trigger the async validation. Ideally it would return an async object like Promise or Observable but since we have to rely on QML `Connections`, this won't work. 2. As mentioned, `Connections` are needed to listen to async events so the validation can be resolved. 3. Validation has to be resolved by calling `input.updateValidity` inside the validator. That API notifies `StatusInput` that validation is has been performed and expects the name of the validator as well as either a boolean (true), if validation was successful, or, if validation has failed, a boolean (false) or an error object. Here's a `StatusENSValidator` as an example: ```qml StatusValidator { id: root name: "ensValidator" errorMessage: "Couldn't resolve ENS name." readonly property string uuid: Utils.uuid() property int debounceTime: 600 signal ensResolved(string address) validate: Backpressure.debounce(root, root.debounceTime, function (name) { name = name.startsWith("@") ? name.substring(1) : name walletModel.ensView.resolveENS(name, uuid) }) Connections { target: walletModel.ensView onEnsWasResolved: { if (uuid !== root.uuid) { return } root.ensResolved(resolvedAddress) input.updateValidityAndPendingState(root.name, resolvedAddress !== "") } } } ``` Closes #395
feat(StatusInput): introduce leftPadding and rightPadding properties
2021-09-16 15:58:00 +10:00 · 2021-09-16 15:58:00 +10:00 · 2021-09-16 15:58:00 +10:00 · 2021-09-15 11:39:09 +02:00 · 2021-09-14 14:34:25 +02:00 · 2021-09-14 14:33:53 +02:00
80 changed files with 1902 additions and 331 deletions
@@ -1,3 +1,87 @@
+<a name=""></a>
+## v0.9.0 (2021-09-13)
+
+
+#### Breaking Changes
+
+* **StatusExpandableItem:**  Refactored the StatusExpandableSettingsItem to support different types ([718171fd](718171fd))
+
+#### Bug Fixes
+
+* **StatusAppThreePanelLayout:**  Fix margin between left and center panels ([29e9557d](29e9557d))
+* **StatusChatListAndCategories:**  rely on correct tooltip settings prop ([2971c607](2971c607))
+* **StatusCheckbox:**  give checkbox label proper theme color ([88fb57dd](88fb57dd))
+* **StatusModal:**  don't reserve header subtitle space ([eabc62f7](eabc62f7), closes [#378](378))
+
+#### Features
+
+* **Status.Core.Theme:**  add RobotoMono font ([aab44c1e](aab44c1e), closes [#342](342))
+* **StatusBaseInput:**  introduce `component` property ([019471c8](019471c8), closes [#380](380))
+* **StatusExpandableItem:**  Refactored the StatusExpandableSettingsItem to support different types ([718171fd](718171fd))
+* **StatusInput:**
+  *  introduce `ValidationMode` ([d73a1584](d73a1584))
+  *  exposed edit component ([73c77c29](73c77c29))
+* **StatusQ.Controls.Validators:**
+  *  introduce `StatusAddressAndEnsValidator` ([a93ef161](a93ef161))
+  *  introduce `StatusAddressValidator` ([77d0e9b8](77d0e9b8))
+* **StatusSearchPopup:**  introduce forceActiveFocus API ([efe31166](efe31166))
+* **StatusValidator:**  allow validators to provide default `errorMessage` ([1a23cc19](1a23cc19))
+
+
+
+<a name=""></a>
+##  v0.8.0 (2021-09-06)
+
+
+#### Bug Fixes
+
+* **StatusBaseInput:**
+  *  fix one line scroll ([d64aa6de](d64aa6de))
+  *  Make clear button bigger ([387bfe77](387bfe77))
+* **StatusChatToolBar:**  Fix mouse event catching after menu closing ([fbecac4a](fbecac4a))
+* **StatusInput:**  Forward keys events to root ([061c7d1c](061c7d1c))
+* **StatusListItem:**  Add propogateCompostedEvents to title mouse area ([5c706fdc](5c706fdc))
+* **StatusModal:**  Remove self-calculating height ([3187de54](3187de54))
+
+#### Features
+
+*   introduce bigger versions of navbar icons ([0a4d3860](0a4d3860))
+* **StatusBaseInput:**  introduce focussed property ([ddfca7a8](ddfca7a8), closes [#373](373))
+* **StatusChatListAndCategories:**  Add tooltip settings for categories buttons ([64098e84](64098e84))
+* **StatusDescriptionListItem:**
+  *  expose subtitle component for fine control ([1749cc0e](1749cc0e))
+  *  introduce support for `value` ([a963ef80](a963ef80))
+* **StatusExpandableSettingsItem:**   Added new component for wallet settings ([f3ab4ce9](f3ab4ce9))
+* **StatusInput:**  Introduced secondaryLabel property ([d648230d](d648230d), closes [#383](383))
+* **StatusModal:**
+  *  Add popup menu support for StatusModal ([8a94fb54](8a94fb54))
+  *  add ability to set elide config of header titles ([28e514f9](28e514f9), closes [#353](353))
+* **StatusQ.Controls:**  introduce StatusSwitchTabBar and StatusSwitchTabButton ([d449f0e9](d449f0e9), closes [#365](365))
+* **StatusSearchPopup:**  add function hook to allow timestamp formatting ([b45aba4b](b45aba4b), closes [#363](363))
+* **qrc:**  Add new icon needed for share modal ([38fb8f61](38fb8f61))
+
+
+<a name=""></a>
+##  v0.7.0 (2021-08-30)
+
+
+#### Features
+
+* **StatusChatListAndCategories:**  add drag and drop support for cate… (#349) ([a4178bd6](a4178bd6), closes [#227](227))
+* **StatusChatListCategoryItem:**  Add tooltips settings ([f9775e4d](f9775e4d))
+* **StatusPopupMenu:**  changed close policy ([2d8fd576](2d8fd576))
+* **StatusWindowsTitleBar:**  Add windows title bar ([faca4765](faca4765))
+
+#### Bug Fixes
+
+* **StatusAppThreePanelLayout:**  increase minimum width in right panel ([7da4bdee](7da4bdee))
+* **StatusBaseInput:**  fix click to focus ([138458d1](138458d1))
+* **StatusChatInfoButton:**  Add self-calculated implicitWIdth and elide to texts ([7ef61ed3](7ef61ed3))
+* **StatusListItem:**  don't set width on title item ([ee5ec7b3](ee5ec7b3))
+* **StatusModal:**  ensure header and subtitles elide if needed ([503a07bf](503a07bf), closes [#256](256))
+
+
+
 <a name=""></a>
 ##  v0.6.0 (2021-08-24)

@@ -115,6 +115,36 @@ GridLayout {
        pinnedMessagesCount: 1
    }

+    Item {
+        implicitWidth: 100
+        implicitHeight: 48
+        StatusChatInfoButton {
+            title: "Iuri Matias elided"
+            subTitle: "Contact"
+            icon.color: Theme.palette.miscColor7
+            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            type: StatusChatInfoButton.Type.OneToOneChat
+            muted: true
+            pinnedMessagesCount: 1
+            width: 100
+        }
+    }
+
+    Item {
+        implicitWidth: 100
+        implicitHeight: 48
+        StatusChatInfoButton {
+            title: "Iuri Matias big not elided"
+            subTitle: "Contact"
+            icon.color: Theme.palette.miscColor7
+            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            type: StatusChatInfoButton.Type.OneToOneChat
+            muted: true
+            pinnedMessagesCount: 1
+            width: 400
+        }
+    }
+
    StatusChatInfoButton {
        title: "group"
        subTitle: "Group Chat"
@@ -7,6 +7,7 @@ import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Platform 0.1

 Rectangle {
    id: demoApp
@@ -15,38 +16,27 @@ Rectangle {
    border.width: 1
    border.color: Theme.palette.baseColor2

-    Row {
-        anchors.top: demoApp.top
-        anchors.left: demoApp.left
-        anchors.topMargin: 14
-        anchors.leftMargin: 14
+    property string titleStyle: "osx"

-        spacing: 6
+    StatusMacTrafficLights {
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.margins: 13
        z: statusAppLayout.z + 1
+        visible: titleStyle === "osx"
+    }

-        Rectangle {
-            color: "#E24640"
-            height: 12
-            width: 12
-            radius: 6
-        }
-        Rectangle {
-            color: "#FFC12F"
-            height: 12
-            width: 12
-            radius: 6
-        }
-        Rectangle {
-            color: "#2ACB42"
-            height: 12
-            width: 12
-            radius: 6
-        }
+    StatusWindowsTitleBar {
+        id: windowsTitle
+        anchors.top: parent.top
+        width: parent.width
+        z: statusAppLayout.z + 1
+        visible: titleStyle === "windows"
    }

    StatusAppLayout {
        id: statusAppLayout
-        anchors.top: demoApp.top
+        anchors.top: windowsTitle.visible ? windowsTitle.bottom : demoApp.top
        anchors.left: demoApp.left
        anchors.topMargin: demoApp.border.width
        anchors.leftMargin: demoApp.border.width
@@ -123,16 +113,16 @@ Rectangle {
                    tooltip.text: "Wallet"
                },
                StatusNavBarTabButton {
-                    icon.name: "browser"
+                    icon.name: "bigger/browser"
                    tooltip.text: "Browser"
                },
                StatusNavBarTabButton {
-                    icon.name: "status-update"
+                    icon.name: "bigger/status-update"
                    tooltip.text: "Timeline"
                },
                StatusNavBarTabButton {
                    id: profileNavButton
-                    icon.name: "profile"
+                    icon.name: "bigger/settings"
                    badge.visible: true
                    badge.anchors.rightMargin: 4
                    badge.anchors.topMargin: 5
@@ -762,7 +752,7 @@ Rectangle {
            icon.name: "notification"
        }

-        content: StatusBaseText {
+        contentItem: StatusBaseText {
            anchors.centerIn: parent
            text: "Contact request will be shown here"
            font.pixelSize: 15
@@ -791,7 +781,7 @@ Rectangle {
        header.subTitle: "Public Community"
        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"

-        content: Column {
+        contentItem: Column {
            width: demoCommunityDetailModal.width

            StatusModalDivider {
@@ -326,6 +326,13 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        subTitle: "Subtitle"
    }

+    StatusDescriptionListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        value: "None"
+        sensor.enabled: true
+    }
+
    StatusDescriptionListItem {
        title: "Title"
        subTitle: "Subtitle"
@@ -209,34 +209,38 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
    //dummy search popup models
    property var searchResultsA: ListModel {
        ListElement { itemId: "i1"; titleId: "t1"; title: "@Flea"; sectionName: "Messages"; time: "18:55 AM"; content: "lorem ipsum <font color='#4360DF'>@Nick</font> dolor sit amet";
+            image: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
+            color: "orange";
            badgeImage: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
            badgePrimaryText: "CryptoKities";
            badgeSecondaryText: "";
-            badgeIdenticonColor: "";
-            isLetterIdenticon: false }
-        ListElement { itemId: "i2"; titleId: "t2"; title: "core"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { itemId: "i3"; titleId: "t3"; title: "communities-phase3"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { itemId: "i4"; titleId: "t4"; title: "core-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { itemId: "i5"; titleId: "t5"; title: "desktop"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { itemId: "i6"; titleId: "t6"; title: "Crocodile Vanilla Bird"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { itemId: "i7"; titleId: "t7"; title: "carmen eth"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { itemId: "i8"; titleId: "t8"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { itemId: "i9"; titleId: "t9"; title: "MyCommunity"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { itemId: "i10"; titleId: "t10"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+            badgeIconColor: "";
+            badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i2"; titleId: "t2"; image: ""; color: "blue"; title: "core"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i3"; titleId: "t3"; image: ""; color: "yellow"; title: "communities-phase3"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i4"; titleId: "t4"; image: ""; color: "black"; title: "core-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i5"; titleId: "t5"; image: ""; color: "green"; title: "desktop"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i6"; titleId: "t6"; image: ""; color: "red"; title: "Crocodile Vanilla Bird"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i7"; titleId: "t7"; image: ""; color: "purple"; title: "carmen eth"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i8"; titleId: "t8"; image: ""; color: "red"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i9"; titleId: "t9"; image: ""; color: "blue"; title: "MyCommunity"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i10"; titleId: "t10"; image: ""; color: "green"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
    }
    property var searchResultsB: ListModel {
        ListElement { itemId: "i1"; titleId: "t1"; title: "@Ant"; sectionName: "Messages"; time: "11:43 AM"; content: "<font color='#4360DF'>@John</font>, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ";
+            image: "";
+            color: "orange";
            badgeImage: "";
            badgePrimaryText: "CryptoKities";
            badgeSecondaryText: "#design";
-            badgeIdenticonColor: "pink"; isLetterIdenticon: true }
-        ListElement { itemId: "i2"; titleId: "t2"; title: "support"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { itemId: "i3"; titleId: "t3"; title: "desktop-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { itemId: "i4"; titleId: "t4"; title: "climate-change"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { itemId: "i5"; titleId: "t5"; title: "food"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: "pink"; isLetterIdenticon: true }
-        ListElement { itemId: "i6"; titleId: "t6"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { itemId: "i7"; titleId: "t7"; title: "CryptoRangers"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { itemId: "i8"; titleId: "t8"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: "orange"; isLetterIdenticon: true }
+            badgeIconColor: "pink"; badgeIsLetterIdenticon: true }
+        ListElement { itemId: "i2"; titleId: "t2"; image: ""; color: "blue"; title: "support"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i3"; titleId: "t3"; image: ""; color: "red"; title: "desktop-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i4"; titleId: "t4"; image: ""; color: "orange"; title: "climate-change"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i5"; titleId: "t5"; image: ""; color: "black"; title: "food"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: "pink"; badgeIsLetterIdenticon: true }
+        ListElement { itemId: "i6"; titleId: "t6"; image: ""; color: "green"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i7"; titleId: "t7"; image: ""; color: "purple"; title: "CryptoRangers"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i8"; titleId: "t8"; image: ""; color: "yellow"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: "orange"; badgeIsLetterIdenticon: true }
    }

    property ListModel optionsModel: ListModel {
@@ -13,6 +13,11 @@ Column {
        onClicked: simpleModal.open()
    }

+    StatusButton {
+        text: "Simple title modal"
+        onClicked: simpleTitleModal.open()
+    }
+
    StatusButton {
        text: "Modal with header image"
        onClicked: headerImageModal.open()
@@ -48,6 +53,16 @@ Column {
        onClicked: modalWithIdenticon.open()
    }

+    StatusButton {
+        text: "Modal with long titles"
+        onClicked: modalWithLongTitles.open()
+    }
+
+    StatusButton {
+        text: "Modal with Header Popup Menu"
+        onClicked: modalWithHeaderPopupMenu.open()
+    }
+
    StatusModal {
        id: simpleModal
        anchors.centerIn: parent
@@ -55,6 +70,12 @@ Column {
        header.subTitle: "Subtitle"
    }

+    StatusModal {
+        id: simpleTitleModal
+        anchors.centerIn: parent
+        header.title: "Some Title"
+    }
+
    StatusModal {
        id: headerImageModal
        anchors.centerIn: parent
@@ -140,7 +161,7 @@ Column {
            }
        ]

-        content: StatusBaseText {
+        contentItem: StatusBaseText {
            anchors.centerIn: parent
            text: "Some text content"
            font.pixelSize: 15
@@ -164,7 +185,7 @@ Column {
        header.title: "Header"
        header.subTitle: "SubTitle"

-        content: StatusBaseText {
+        contentItem: StatusBaseText {
            id: text
            anchors.centerIn: parent
            text: "Some text content"
@@ -176,7 +197,7 @@ Column {
            StatusButton {
                text: "Change text"
                onClicked: {
-                    modalWithContentAccess.contentComponent.text = "Changed!"
+                    modalWithContentAccess.contentItem.text = "Changed!"
                }
            }
        ]
@@ -190,8 +211,7 @@ Column {
        header.icon.isLetterIdenticon: true
        header.icon.background.color: "red"

-        content: StatusBaseText {
-            id: text
+        contentItem: StatusBaseText {
            anchors.centerIn: parent
            text: "Some text content"
            font.pixelSize: 15
@@ -202,7 +222,7 @@ Column {
            StatusButton {
                text: "Change text"
                onClicked: {
-                    modalWithContentAccess.contentComponent.text = "Changed!"
+                    modalWithLetterIdenticon.contentItem.text = "Changed!"
                }
            }
        ]
@@ -217,8 +237,7 @@ Column {
 CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
        header.image.isIdenticon: true

-        content: StatusBaseText {
-            id: text
+        contentItem: StatusBaseText {
            anchors.centerIn: parent
            text: "Some text content"
            font.pixelSize: 15
@@ -229,9 +248,65 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            StatusButton {
                text: "Change text"
                onClicked: {
-                    modalWithContentAccess.contentComponent.text = "Changed!"
+                    modalWithIdenticon.contentItem.text = "Changed!"
                }
            }
        ]
    }
+
+    StatusModal {
+        id: modalWithLongTitles
+        anchors.centerIn: parent
+        header.title: "Some super long text here that exceeds the available space"
+        header.subTitle: "Some super long text here that exceeds the available space"
+        header.subTitleElide: Text.ElideMiddle
+        header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        header.image.isIdenticon: true
+
+        contentItem: StatusBaseText {
+            anchors.centerIn: parent
+            text: "Some text content"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        rightButtons: [
+            StatusButton {
+                text: "Change text"
+                onClicked: {
+                    modalWithLongTitles.contentItem.text = "Changed!"
+                }
+            }
+        ]
+    }
+
+    StatusModal {
+        id: modalWithHeaderPopupMenu
+        anchors.centerIn: parent
+        header.title: "helloworld.eth"
+        header.subTitle: "Basic address"
+        header.popupMenu: StatusPopupMenu {
+            id: popupMenu
+            Repeater {
+                model: dummyAccountsModel
+                delegate: Loader {
+                    sourceComponent: popupMenu.delegate
+                    onLoaded: {
+                        item.action.text = model.name
+                        item.action.iconSettings.name = model.iconName
+                    }
+                }
+            }
+            onMenuItemClicked: {
+                popupMenu.dismiss()
+            }
+        }
+    }
+
+    ListModel {
+        id: dummyAccountsModel
+        ListElement{name: "Account 1"; iconName: "filled-account"}
+        ListElement{name: "Account 2"; iconName: "filled-account"}
+    }
 }
@@ -0,0 +1,152 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+Column {
+    spacing: 12
+    width: 800
+    anchors.top:parent.top
+    leftPadding: 20
+    rightPadding: 20
+
+    Rectangle {
+        width: parent.width
+        height: 30
+        color: Theme.palette.baseColor2
+        StatusBaseText {
+            anchors.verticalCenter: parent.verticalCenter
+            text: "Type Primary"
+            color: Theme.palette.directColor1
+        }
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        expandable: false
+        icon.name: "seed-phrase"
+        primaryText: "Back up seed phrase"
+        secondaryText: "Back up your seed phrase now to secure this account ajhaDH SDHSAHDLSADBSA,DLISAHDLASD ADASDHASLDHALSDHAS DAS,DASJDGLIASGD"
+        button.text: qsTr("Back up seed phrase")
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        expandable: true
+        icon.name: "secret"
+        primaryText: "Account signing phrase"
+        secondaryText: "View your signing phrase and ensure that you never get scammed. View your signing phrase and ensure that you never get scammed."
+        expandableComponent: notImplemented
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        expandable: true
+        icon.name: "seed-phrase"
+        primaryText: "View private key"
+        secondaryText: "Back up your seed phrase now to secure this account"
+        expandableComponent: notImplemented
+        button.text: "View private key"
+        button.icon.name: "tiny/public-chat"
+        button.onClicked: {
+            // To-do open  enter password Modal
+            expanded = !expanded
+        }
+    }
+
+    Rectangle {
+        width: parent.width
+        height: 30
+        color:  Theme.palette.baseColor2
+        StatusBaseText {
+            anchors.verticalCenter: parent.verticalCenter
+            text: "Type Secondary"
+            color: Theme.palette.directColor1
+        }
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        type: StatusExpandableItem.Type.Secondary
+        expandable: true
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        primaryText: "CryptoKitties"
+        additionalText: "1456 USD"
+        expandableComponent: notImplemented
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        type: StatusExpandableItem.Type.Secondary
+        expandable: true
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        primaryText: "Adding Really long text to test scenario of having very long text along with tertiary text"
+        additionalText: "564.90 USD"
+        expandableComponent: notImplemented
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        type: StatusExpandableItem.Type.Secondary
+        expandable: true
+        primaryText: "CryptoKitties"
+        additionalText: "1456 USD"
+        expandableComponent: notImplemented
+    }
+
+    Rectangle {
+        width: parent.width
+        height: 30
+        color:  Theme.palette.baseColor2
+        StatusBaseText {
+            anchors.verticalCenter: parent.verticalCenter
+            text: "Type Tertiary"
+            color: Theme.palette.directColor1
+        }
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        type: StatusExpandableItem.Type.Tertiary
+        expandable: true
+        primaryText: "CryptoKitties"
+        expandableComponent: notImplemented
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        type: StatusExpandableItem.Type.Tertiary
+        expandable: true
+        primaryText: "Rescue Moon"
+        expandableComponent: notImplemented
+    }
+
+    Component {
+        id: notImplemented
+        Rectangle {
+            anchors.centerIn: parent
+            width: 654
+            height: infoText.implicitHeight
+            color: Theme.palette.baseColor5
+            StatusBaseText {
+                id: infoText
+                anchors.centerIn: parent
+                color: Theme.palette.directColor4
+                font.pixelSize: 15
+                lineHeight: 22
+                lineHeightMode: Text.FixedHeight
+                font.weight: Font.Medium
+                text: qsTr("Not Implemented")
+            }
+        }
+    }
+}
@@ -68,21 +68,51 @@ Column {
    }

    StatusInput {
+        label: "StatusInput"
+        secondaryLabel: "with right icon"
+        input.icon.width: 15
+        input.icon.height: 11
+        input.icon.name: text !== "" ? "checkmark" : ""
+        input.leftIcon: false
+    }
+
+    StatusInput {
+        label: "Label"
+        secondaryLabel: "secondary label"
+        input.placeholderText: "Placeholder"
+        input.implicitHeight: 56
+    }
+
+    StatusInput {
+        id: input
        label: "Label"
        charLimit: 30
        input.placeholderText: "Input with validator"

        validators: [
-            StatusMinLengthValidator { minLength: 10 }
-        ]
-
-        onTextChanged: {
-            if (errors && errors.minLength) {
-                errorMessage = `Value can't be shorter than ${errors.minLength.min} but got ${errors.minLength.actual}`
+            StatusMinLengthValidator {
+                minLength: 10
+                errorMessage: {
+                    if (input.errors && input.errors.minLength) {
+                        return `Value can't be shorter than ${input.errors.minLength.min} but got ${input.errors.minLength.actual}`
+                    }
+                    return ""
+                }
            }
+        ]
+    }
+
+    StatusInput {
+        label: "Label"
+        input.placeholderText: "Input width component (right side)"
+        input.component: StatusIcon {
+            icon: "cancel"
+            height: 16
+            color: Theme.palette.dangerColor1
        }
    }

+
    StatusInput {
        input.multiline: true
        input.placeholderText: "Multiline"
@@ -0,0 +1,24 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.13
+
+import StatusQ.Controls 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusSwitchTabBar {
+        StatusSwitchTabButton {
+            text: "Swap"
+        }
+        StatusSwitchTabButton {
+            text: "Swap & Send"
+        }
+        StatusSwitchTabButton {
+            text: "Send"
+        }
+    }
+}
+
@@ -138,6 +138,11 @@ StatusWindow {
                            selected: page.sourceComponent == buttonsComponent
                            onClicked: page.sourceComponent = buttonsComponent
                        }
+                        StatusNavigationListItem { 
+                            title: "StatusSwitchTab" 
+                            selected: page.sourceComponent == statusTabSwitchesComponent
+                            onClicked: page.sourceComponent = statusTabSwitchesComponent
+                        }
                        StatusNavigationListItem { 
                            title: "Controls" 
                            selected: page.sourceComponent == controlsComponent
@@ -164,6 +169,11 @@ StatusWindow {
                            selected: page.sourceComponent == othersComponent
                            onClicked: page.sourceComponent = othersComponent
                        }
+                        StatusNavigationListItem {
+                            title: "StatusExpandableItem"
+                            selected: page.sourceComponent == settingsComponent
+                            onClicked: page.sourceComponent = settingsComponent
+                        }
                        StatusListSectionHeadline { text: "StatusQ.Popup" }
                        StatusNavigationListItem { 
                            title: "StatusPopupMenu"
@@ -281,12 +291,52 @@ StatusWindow {
        Popups {}
    }

+    Component {
+        id: statusTabSwitchesComponent
+        StatusTabSwitchPage {}
+    }
+
+    Component {
+        id: settingsComponent
+        StatusExpandableSettingsItemPage{}
+    }
+
    Component {
        id: demoAppCmp

        Rectangle {
            anchors.fill: parent
            color: Theme.palette.baseColor3
+
+            Row {
+                id: platformSwitch
+                anchors.left: demoApp.left
+                anchors.bottom: demoApp.top
+                anchors.bottomMargin: 20
+                spacing: 2
+
+                Text {
+                    text: "OSX"
+                    font.pixelSize: 15
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StatusSwitch {
+                    onCheckedChanged: {
+                        if (checked) {
+                            demoApp.titleStyle = "windows"
+                        } else {
+                            demoApp.titleStyle = "osx"
+                        }
+                    }
+                }
+
+                Text {
+                    text: "Win"
+                    font.pixelSize: 15
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
            DemoApp {
                id: demoApp
                anchors.verticalCenter: parent.verticalCenter
@@ -309,6 +359,27 @@ StatusWindow {
        anchors.top: parent.top
        anchors.margins: 13

+        visible: Qt.platform.os == "osx"
+
+        onClose: {
+            rootWindow.close()
+        }
+
+        onMinimised: {
+            rootWindow.showMinimized()
+        }
+
+        onMaximized: {
+            rootWindow.toggleFullScreen()
+        }
+    }
+
+    StatusWindowsTitleBar {
+        anchors.top: parent.top
+        width: parent.width
+
+        visible: Qt.platform.os == "windows"
+
        onClose: {
            rootWindow.close()
        }
@@ -13,5 +13,6 @@
        <file>ThemeSwitch.qml</file>
        <file>Layout.qml</file>
        <file>Popups.qml</file>
+        <file>StatusExpandableSettingsItemPage.qml</file>
    </qresource>
 </RCC>
@@ -12,7 +12,8 @@ DEFINES += QT_DEPRECATED_WARNINGS
 SOURCES += \
        handler.cpp \
        main.cpp \
-        sandboxapp.cpp
+        sandboxapp.cpp \
+        spellchecker.cpp

 !macx {
    SOURCES += statuswindow.cpp
@@ -24,6 +25,14 @@ macx {
    CONFIG -= app_bundle
    OBJECTIVE_SOURCES += \
        statuswindow_mac.mm
+
+    hunspellTarget.depends = FORCE
+    hunspellTarget.commands = brew install hunspell
+    QMAKE_EXTRA_TARGETS += hunspellTarget
+
+
+    LIBS += -L"/usr/local/lib" -lhunspell-1.7
+    INCLUDEPATH += /usr/local/include/hunspell
 }

 ios {
@@ -51,7 +60,8 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin
 HEADERS += \
    handler.h \
    sandboxapp.h \
-    statuswindow.h
+    statuswindow.h \
+    spellchecker.h

 OTHER_FILES += $$files($$PWD/../*.qml, true)
 OTHER_FILES += $$files($$PWD/*.qml, true)
@@ -5,6 +5,7 @@
 #include <QDebug>

 #include "statuswindow.h"
+#include "spellchecker.h"

 SandboxApp::SandboxApp(int &argc, char **argv)
    : QGuiApplication(argc, argv),
@@ -16,6 +17,7 @@ SandboxApp::SandboxApp(int &argc, char **argv)
 void SandboxApp::startEngine()
 {
    qmlRegisterType<StatusWindow>("Sandbox", 0, 1, "StatusWindow");
+    qmlRegisterType<SpellChecker>("Sandbox", 0, 1, "Spellchecker");

 #ifdef QT_DEBUG
    const QUrl url(applicationDirPath() + "/../main.qml");
@@ -0,0 +1,174 @@
+#include "spellchecker.h"
+
+#include "hunspell.hxx"
+#include <QTextCodec>
+#include <QFile>
+#include <QDebug>
+#include <QLocale>
+
+#include <QRegularExpression>
+#include <QApplication>
+#include <QDir>
+
+SpellChecker::SpellChecker(QObject *parent)
+    : QObject(parent)
+    , m_hunspell(nullptr)
+    , m_userDict("userDict_")
+{
+
+}
+
+SpellChecker::~SpellChecker()
+{
+#ifdef Q_OS_MACOS
+    delete m_hunspell;
+#endif
+}
+
+bool SpellChecker::spell(const QString &word)
+{
+#ifdef Q_OS_MACOS
+    return m_hunspell->spell(m_codec->fromUnicode(word).toStdString());
+#else
+    return true;
+#endif
+}
+
+bool SpellChecker::isInit() const
+{
+    return !m_hunspell;
+}
+
+void SpellChecker::initHunspell()
+{
+#ifdef Q_OS_MACOS
+    if (m_hunspell) {
+        delete m_hunspell;
+    }
+
+    QString dictFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.dic";
+    QString affixFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.aff";
+    QByteArray dictFilePathBA = dictFile.toLocal8Bit();
+    QByteArray affixFilePathBA = affixFile.toLocal8Bit();
+    m_hunspell = new Hunspell(affixFilePathBA.constData(),
+                             dictFilePathBA.constData());
+
+    // detect encoding analyzing the SET option in the affix file
+    auto encoding = QStringLiteral("ISO8859-15");
+    QFile _affixFile(affixFile);
+    if (_affixFile.open(QIODevice::ReadOnly)) {
+      QTextStream stream(&_affixFile);
+      QRegularExpression enc_detector(
+            QStringLiteral("^\\s*SET\\s+([A-Z0-9\\-]+)\\s*"),
+            QRegularExpression::CaseInsensitiveOption);
+      QString sLine;
+      QRegularExpressionMatch match;
+      while (!stream.atEnd()) {
+        sLine = stream.readLine();
+        if (sLine.isEmpty()) { continue; }
+        match = enc_detector.match(sLine);
+        if (match.hasMatch()) {
+          encoding = match.captured(1);
+          qDebug() << "Encoding set to " + encoding;
+          break;
+        }
+      }
+      _affixFile.close();
+    }
+    m_codec = QTextCodec::codecForName(encoding.toLatin1().constData());
+
+    QString userDict = m_userDict + m_lang + ".txt";
+
+    if (!userDict.isEmpty()) {
+      QFile userDictonaryFile(userDict);
+      if (userDictonaryFile.open(QIODevice::ReadOnly)) {
+        QTextStream stream(&userDictonaryFile);
+        for (QString word = stream.readLine();
+             !word.isEmpty();
+             word = stream.readLine())
+          ignoreWord(word);
+        userDictonaryFile.close();
+      } else {
+        qWarning() << "User dictionary in " << userDict
+                   << "could not be opened";
+      }
+    } else {
+      qDebug() << "User dictionary not set.";
+    }
+#endif
+}
+
+QVariantList SpellChecker::suggest(const QString &word)
+{
+    int numSuggestions = 0;
+    QVariantList suggestions;
+#ifdef Q_OS_MACOS
+    std::vector<std::string> wordlist;
+    wordlist = m_hunspell->suggest(m_codec->fromUnicode(word).toStdString());
+
+    numSuggestions = static_cast<int>(wordlist.size());
+    if (numSuggestions > 0) {
+        suggestions.reserve(numSuggestions);
+        for (int i = 0; i < numSuggestions; i++) {
+            suggestions << m_codec->toUnicode(
+                QByteArray::fromStdString(wordlist[i]));
+        }
+    }
+#endif
+
+    return suggestions;
+}
+
+void SpellChecker::ignoreWord(const QString &word)
+{
+#ifdef Q_OS_MACOS
+    m_hunspell->add(m_codec->fromUnicode(word).constData());
+#endif
+}
+
+void SpellChecker::addToUserWordlist(const QString &word)
+{
+#ifdef Q_OS_MACOS
+    QString userDict = m_userDict + m_lang + ".txt";
+    if (!userDict.isEmpty()) {
+        QFile userDictonaryFile(userDict);
+        if (userDictonaryFile.open(QIODevice::Append)) {
+            QTextStream stream(&userDictonaryFile);
+            stream << word << "\n";
+            userDictonaryFile.close();
+        } else {
+            qWarning() << "User dictionary in " << userDict
+                       << "could not be opened for appending a new word";
+        }
+    } else {
+        qDebug() << "User dictionary not set.";
+    }
+#endif
+}
+
+const QString& SpellChecker::lang() const
+{
+    return m_lang;
+}
+
+void SpellChecker::setLang(const QString& lang)
+{
+    if (m_lang != lang) {
+        m_lang = lang;
+        initHunspell();
+        emit langChanged();
+    }
+}
+
+const QString& SpellChecker::userDict() const
+{
+    return m_userDict;
+}
+
+void SpellChecker::setUserDict(const QString& userDict)
+{
+    if (m_userDict != userDict) {
+        m_userDict = userDict;
+        emit userDictChanged();
+    }
+}
@@ -0,0 +1,54 @@
+#ifndef SPELLCHECKER_H
+#define SPELLCHECKER_H
+
+#include <QObject>
+#include <QVariant>
+#include <QQuickTextDocument>
+#include <QSyntaxHighlighter>
+
+#ifdef Q_OS_MACOS
+class Hunspell;
+#endif
+class QTextCodec;
+
+class SpellChecker : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(QString lang READ lang WRITE setLang NOTIFY langChanged)
+    Q_PROPERTY(QString userDict READ userDict WRITE setUserDict NOTIFY userDictChanged)
+
+public:
+    explicit SpellChecker(QObject *parent = nullptr);
+    ~SpellChecker();
+
+    Q_INVOKABLE bool spell(const QString& word);
+    Q_INVOKABLE QVariantList suggest(const QString &word);
+    Q_INVOKABLE void ignoreWord(const QString &word);
+    Q_INVOKABLE void addToUserWordlist(const QString &word);
+    Q_INVOKABLE bool isInit() const;
+
+    const QString& lang() const;
+    void setLang(const QString& lang);
+
+    const QString& userDict() const;
+    void setUserDict(const QString& userDict);
+
+signals:
+    void langChanged();
+    void userDictChanged();
+
+private:
+    void initHunspell();
+
+private:
+    QString m_lang;
+    QString m_userDict;
+
+    QQuickTextDocument *m_document;
+#ifdef Q_OS_MACOS
+    Hunspell *m_hunspell;
+#endif
+    QTextCodec *m_codec;
+};
+
+#endif // SPELLCHECKER_H
@@ -28,6 +28,8 @@ Item {
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.leftMargin: 5
+        anchors.right: (implicitWidth > parent.width - 50) ? statusMenuButton.left : undefined
+        anchors.rightMargin: 5
        type: StatusChatInfoButton.Type.OneToOneChat
        onClicked: statusChatInfoToolBar.chatInfoButtonClicked()
    }
@@ -39,7 +41,7 @@ Item {
        anchors.verticalCenter: parent.verticalCenter

        visible: popupMenuSlot.active
-        width: 32
+        width: visible ? 32 : 0
        height: 32

        type: StatusRoundButton.Type.Secondary
@@ -5,6 +5,7 @@ import QtQuick.Controls 2.14 as QC
 import StatusQ.Core.Utils 0.1
 import StatusQ.Components 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Core 0.1

 Item {
    id: statusChatListAndCategories
@@ -12,6 +13,13 @@ Item {
    implicitHeight: chatListsAndCategories.height
    implicitWidth: chatListsAndCategories.width

+    property StatusTooltipSettings categoryAddButtonToolTip: StatusTooltipSettings {
+        text: "Add channel inside category"
+    }
+    property StatusTooltipSettings categoryMenuButtonToolTip: StatusTooltipSettings {
+        text: "More"
+    }
+
    property string selectedChatId: ""
    property bool showCategoryActionButtons: false
    property bool showPopupMenu: true
@@ -121,6 +129,9 @@ Item {
                            }
                        }

+                        addButton.tooltip: statusChatListAndCategories.categoryAddButtonToolTip
+                        menuButton.tooltip: statusChatListAndCategories.categoryMenuButtonToolTip
+
                        originalOrder: model.position
                        categoryId: model.categoryId
                        name: model.name
@@ -37,6 +37,7 @@ Rectangle {
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.leftMargin: 12
+        width: Math.min(implicitWidth, parent.width - actionButtons.implicitWidth - anchors.leftMargin * 2)
        onClicked: statusChatToolBar.chatInfoButtonClicked()
    }

@@ -92,17 +93,10 @@ Rectangle {

            property bool showMoreMenu: false
            onClicked: {
-                if (showMoreMenu) {
-                    popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
-                }
-                highlighted = true
+                popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
                statusChatToolBar.menuButtonClicked()
            }

-            onPressed: {
-                showMoreMenu = !showMoreMenu;
-            }
-
            Loader {
                id: popupMenuSlot
                active: !!statusChatToolBar.popupMenu
@@ -110,6 +104,10 @@ Rectangle {
                    popupMenuSlot.item.closeHandler = function () {
                        menuButton.highlighted = false
                    }
+
+                    popupMenuSlot.item.openHandler = function () {
+                        menuButton.highlighted = true
+                    }
                }
            }
        }
@@ -120,7 +118,7 @@ Rectangle {
            color: Theme.palette.directColor7
            anchors.verticalCenter: parent.verticalCenter
            visible: notificationButton.visible &&
-                (menuButton.visible || membersButton.visible || searchButton.visible)
+                     (menuButton.visible || membersButton.visible || searchButton.visible)
        }

        StatusFlatRoundButton {
@@ -8,12 +8,15 @@ Rectangle {

    property string title: ""
    property string subTitle: ""
+    property alias subTitleComponent: statusDescriptionListItemSubTitle
+    property string value: ""
    property StatusIconSettings icon: StatusIconSettings {
        width: 23
        height: 23
    }
    property alias tooltip: statusToolTip
    property alias iconButton: statusFlatRoundButton
+    property alias sensor: sensor

    implicitWidth: 448
    implicitHeight: 56
@@ -21,48 +24,77 @@ Rectangle {

    color: Theme.palette.statusListItem.backgroundColor

-    StatusBaseText {
-        id: statusDescriptionListItemTitle
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.leftMargin: 16
-        anchors.topMargin: 5
+    MouseArea {
+        id: sensor
+        anchors.fill: parent
+        hoverEnabled: true
+        enabled: false
+        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor

-        color: Theme.palette.baseColor1
-        text: statusDescriptionListItem.title
-        font.pixelSize: 13
-        font.weight: Font.Medium
-    }
+        StatusBaseText {
+            id: statusDescriptionListItemTitle
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            anchors.topMargin: 5

-    StatusBaseText {
-        id: statusDescriptionListItemSubTitle
-        anchors.top: statusDescriptionListItemTitle.bottom
-        anchors.left: parent.left
-        anchors.leftMargin: 16
-        anchors.topMargin: 4
+            color: Theme.palette.baseColor1
+            text: statusDescriptionListItem.title
+            font.pixelSize: 13
+            font.weight: Font.Medium
+        }

-        text: statusDescriptionListItem.subTitle
-        color: Theme.palette.directColor1
-        font.pixelSize: 15
-        font.weight: Font.Normal
-    }
+        StatusBaseText {
+            id: statusDescriptionListItemSubTitle
+            anchors.top: statusDescriptionListItemTitle.bottom
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            anchors.topMargin: 4

-    StatusFlatRoundButton {
-        id: statusFlatRoundButton
-        visible: !!statusDescriptionListItem.icon.name
-        anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
-        anchors.left: statusDescriptionListItemSubTitle.right
-        anchors.leftMargin: 4
+            text: statusDescriptionListItem.subTitle
+            color: Theme.palette.directColor1
+            font.pixelSize: 15
+            font.weight: Font.Normal
+        }

-        width: 32
-        height: 32
+        StatusFlatRoundButton {
+            id: statusFlatRoundButton
+            visible: !!statusDescriptionListItem.icon.name
+            anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
+            anchors.left: statusDescriptionListItemSubTitle.right
+            anchors.leftMargin: 4

-        icon.name: statusDescriptionListItem.icon.name
-        icon.width: statusDescriptionListItem.icon.width
-        icon.height: statusDescriptionListItem.icon.height
+            width: 32
+            height: 32

-        StatusToolTip {
-            id: statusToolTip
+            icon.name: statusDescriptionListItem.icon.name
+            icon.width: statusDescriptionListItem.icon.width
+            icon.height: statusDescriptionListItem.icon.height
+
+            StatusToolTip {
+                id: statusToolTip
+            }
+        }
+
+        Row {
+            anchors.right: parent.right
+            anchors.rightMargin: 16
+            anchors.verticalCenter: parent.verticalCenter
+            visible: !!statusDescriptionListItem.value
+            spacing: 8
+
+            StatusBaseText {
+                text: statusDescriptionListItem.value
+                color: Theme.palette.baseColor1
+                font.pixelSize: 15
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            StatusIcon {
+                icon: "chevron-down"
+                rotation: 270
+                color: Theme.palette.baseColor1
+            }
        }
    }
 }
@@ -0,0 +1,229 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+Rectangle {
+    id: statusExpandableItem
+
+    property alias primaryText: primaryText.text
+    property alias secondaryText: secondaryText.text
+    property alias additionalText: additionalText.text
+    property alias button: button
+    property alias expandableComponent: expandableRegion.sourceComponent
+
+    property int type: StatusExpandableItem.Type.Primary
+    property bool expandable: true
+    property bool expanded: false
+
+    property StatusIconSettings icon: StatusIconSettings {
+        color: Theme.palette.directColor1
+        background: StatusIconBackgroundSettings {
+            width: 32
+            height: 32
+            color: Theme.palette.primaryColor2
+        }
+    }
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
+    }
+
+    enum Type {
+        Primary, // 0
+        Secondary, // 1
+        Tertiary // 2
+    }
+
+    implicitWidth: 718
+
+    radius: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 8 : 0
+    color: "transparent"
+    border.color: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Theme.palette.baseColor2 : "transparent"
+    state: "COLLAPSED"
+    clip: true
+
+    Rectangle {
+        id:  separatorRect
+        anchors.top: parent.top
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width
+        height: 1
+
+        color: Theme.palette.baseColor2
+        visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary)
+    }
+
+    Loader {
+        id: identicon
+        anchors.top: parent.top
+        anchors.topMargin: 25
+        anchors.left: parent.left
+        anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 0 : 11
+        active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary)
+        sourceComponent: !!statusExpandableItem.image.source.toString() ? roundedImage :
+                         !!statusExpandableItem.icon.name.toString() ? roundedIcon : letterIdenticon
+    }
+
+    Component {
+        id: roundedImage
+        StatusRoundedImage {
+            image.source: statusExpandableItem.image.source
+        }
+    }
+
+    Component {
+        id: roundedIcon
+        StatusRoundIcon {
+            icon.background.width: statusExpandableItem.icon.background.width
+            icon.background.height: statusExpandableItem.icon.background.height
+            icon.background.color: statusExpandableItem.icon.background.color
+            icon.color: statusExpandableItem.icon.color
+            icon.name: statusExpandableItem.icon.name
+        }
+    }
+
+    Component {
+        id: letterIdenticon
+        StatusLetterIdenticon {
+            height: 40
+            width: 40
+            name: primaryText.text
+            letterSize: 20
+            color: Theme.palette.miscColor5
+        }
+    }
+
+    StatusBaseText {
+        id: primaryText
+        anchors.top: (statusExpandableItem.type === StatusExpandableItem.Type.Primary)  ||
+                     (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? parent.top : undefined
+        anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17
+        anchors.left: identicon.active ? identicon.right : parent.left
+        anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ?  10 : 16
+
+        anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined
+
+        width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - 110 :
+                                                       parent.width - icon.background.width - additionalText.contentWidth - 110) :
+                                     (button.visible ? parent.width - icon.background.width - button.width - 70 :
+                                                       parent.width - icon.background.width - 70)
+
+        font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal
+        font.pixelSize: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17
+        lineHeight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24
+        lineHeightMode: Text.FixedHeight
+        elide: Text.ElideRight
+        color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? Theme.palette.baseColor1 : Theme.palette.directColor1
+    }
+
+    StatusBaseText {
+        id: secondaryText
+        anchors.top: primaryText.bottom
+        anchors.topMargin: 4
+        anchors.left: primaryText.left
+        anchors.right: primaryText.right
+
+        font.pixelSize: 15
+        lineHeight: 22
+        lineHeightMode: Text.FixedHeight
+        elide: Text.ElideRight
+        color: Theme.palette.directColor3
+    }
+
+    StatusBaseText {
+        id: additionalText
+        anchors.verticalCenter: primaryText.verticalCenter
+        anchors.verticalCenterOffset: 2
+        anchors.right: expandImage.left
+        anchors.rightMargin: 16
+
+        font.pixelSize: 15
+        lineHeight: 24
+        lineHeightMode: Text.FixedHeight
+        elide: Text.ElideRight
+        color: Theme.palette.baseColor1
+    }
+
+    StatusButton {
+        id: button
+        anchors.top: parent.top
+        anchors.topMargin: 19
+        anchors.right: parent.right
+        anchors.rightMargin: 16
+        visible: !!text
+    }
+
+    StatusIcon {
+        id: expandImage
+        anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?
+                                 primaryText.verticalCenter : identicon.verticalCenter
+        anchors.verticalCenterOffset:(statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?  -3 : -1
+        anchors.right: parent.right
+        anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 23 : 6
+        visible: expandable && !button.visible
+        color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?
+                   Theme.palette.baseColor1 :
+                   Theme.palette.directColor1
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            if(expandable) {
+                expanded = !expanded
+            }
+        }
+        cursorShape: Qt.PointingHandCursor
+        visible: !button.visible && expandable
+    }
+
+    Loader {
+        id: expandableRegion
+        anchors.top: !!secondaryText.text ? secondaryText.bottom: primaryText.bottom
+        anchors.topMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 48 : 0
+        anchors.right: parent.right
+        anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 16 : 0
+        active: false
+    }
+
+    onExpandedChanged: {
+        if(expanded) {
+            state = "EXPANDED"
+        }
+        else {
+            state = "COLLAPSED"
+        }
+    }
+
+    states: [
+        State {
+            name: "EXPANDED"
+            PropertyChanges {target: expandImage; icon: "chevron-up"}
+            PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + 22}
+            PropertyChanges {target: expandableRegion; active: true}
+        },
+        State {
+            name: "COLLAPSED"
+            PropertyChanges {target: expandImage; icon: "chevron-down"}
+            PropertyChanges {target: statusExpandableItem; height: 82}
+            PropertyChanges {target: expandableRegion; active: false}
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: "COLLAPSED"
+            to: "EXPANDED"
+            NumberAnimation { properties: "height"; duration: 200 }
+        },
+        Transition {
+            from: "EXPANDED"
+            to: "COLLAPSED"
+            NumberAnimation { properties: "height"; duration: 200 }
+        }
+    ]
+}
@@ -200,8 +200,10 @@ Rectangle {
                    anchors.fill: parent
                    cursorShape: containsMouse? Qt.PointingHandCursor : Qt.ArrowCursor
                    hoverEnabled: true
+                    propagateComposedEvents: true
                    onClicked: {
                        statusListItem.titleClicked(statusListItem.titleId)
+                        mouse.accepted = false
                    }
                }
            }
@@ -20,3 +20,4 @@ StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml
 StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
 StatusListItemBadge 0.1 StatusListItemBadge.qml
+StatusExpandableItem 0.1 StatusExpandableItem.qml
@@ -22,10 +22,12 @@ Item {
    property alias selectionEnd: edit.selectionEnd
    property alias cursorPosition: edit.cursorPosition

+    property alias edit: edit
    property alias text: edit.text

    property alias color: edit.color
    property alias font: edit.font
+    property alias focussed: edit.activeFocus
    property alias verticalAlignmet: edit.verticalAlignment
    property alias horizontalAlignment: edit.horizontalAlignment

@@ -45,23 +47,41 @@ Item {
    property bool valid: true
    property bool pristine: true
    property bool dirty: false
+    property bool pending: false
+    property bool leftIcon: true

    property StatusIconSettings icon: StatusIconSettings {
        width: 24
        height: 24
        name: ""
+        color: Theme.palette.baseColor1
+    }
+
+    property Item component
+
+    onClearableChanged: {
+        if (clearable && !component) {
+            clearButtonLoader.active = true
+            clearButtonLoader.parent = statusBaseInputComponentSlot
+        } else {
+            clearButtonLoader.active = false
+        }
+    }
+
+    onComponentChanged: {
+        if (!!component) {
+            component.parent = statusBaseInputComponentSlot
+        }
    }

    implicitWidth: 448
-    implicitHeight: multiline ? Math.max(edit.implicitHeight + topPadding + bottomPadding, 44) : 44
+    implicitHeight: multiline ? Math.max((edit.implicitHeight + topPadding + bottomPadding), 44) : 44

    Rectangle {
        width: parent.width
        height: maximumHeight != 0 ? Math.min(
                                         minimumHeight != 0 ? Math.max(statusBaseInput.implicitHeight, minimumHeight)
-                                                            : implicitHeight,
-                                         maximumHeight)
-                                   : parent.height
+                                         : statusBaseInput.implicitHeight, maximumHeight) : parent.height
        color: Theme.palette.baseColor2
        radius: 8

@@ -78,151 +98,168 @@ Item {
            return sensor.containsMouse ? Theme.palette.primaryColor2 : "transparent"
        }

-        StatusIcon {
-            id: statusIcon
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.left: parent.left
-            anchors.leftMargin: 10
-            anchors.topMargin: 10

-            icon: statusBaseInput.icon.name
-            width: statusBaseInput.icon.width
-            height: statusBaseInput.icon.height
-            color: Theme.palette.baseColor1
-            visible: !!statusBaseInput.icon.name
-        }
-
-        Flickable {
-            id: flick
-
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.left: statusIcon.visible ? statusIcon.right : parent.left
-            anchors.right: parent.right
-            anchors.leftMargin: statusIcon.visible ? 8 : statusBaseInput.leftPadding
-            anchors.rightMargin: statusBaseInput.rightPadding + clearable ? clearButtton.width : 0
-            anchors.topMargin: statusBaseInput.topPadding
-            anchors.bottomMargin: statusBaseInput.bottomPadding
-            contentWidth: edit.paintedWidth
-            contentHeight: edit.paintedHeight
-            clip: true
-
-            QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline }
-
-
-            function ensureVisible(r) {
-                if (contentX >= r.x)
-                    contentX = r.x;
-                else if (contentX+width <= r.x+r.width)
-                    contentX = r.x+r.width-width;
-                if (contentY >= r.y)
-                    contentY = r.y;
-                else if (contentY+height <= r.y+r.height)
-                    contentY = r.y+r.height-height;
-            }
-
-
-
-            TextEdit {
-                id: edit
-                property string previousText: text
-
-                width: flick.width
-                selectByMouse: true
-                selectionColor: Theme.palette.primaryColor2
-                selectedTextColor: color
-                anchors.verticalCenter: parent.verticalCenter
-                focus: true
-                font.pixelSize: 15
-                font.family: Theme.palette.baseFont.name
-                color: Theme.palette.directColor1
-                onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
-                wrapMode: statusBaseInput.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap
-
-                onActiveFocusChanged: {
-                    if (statusBaseInput.pristine) {
-                        statusBaseInput.pristine = false
-                    }
-                }
-
-                Keys.onReturnPressed: {
-                    if (multiline) {
-                        event.accepted = false
-                    } else {
-                        event.accepted = true
-                    }
-                }
-
-                Keys.onEnterPressed: {
-                    if (multiline) {
-                        event.accepted = false
-                    } else {
-                        event.accepted = true
-                    }
-                }
-
-                onTextChanged: {
-                    statusBaseInput.dirty = true
-                    if (statusBaseInput.maximumLength > 0) {
-                        if (text.length > statusBaseInput.maximumLength) {
-                            var cursor = cursorPosition;
-                            text = previousText;
-                            if (cursor > text.length) {
-                                cursorPosition = text.length;
-                            } else {
-                                cursorPosition = cursor-1;
-                            }
-                        }
-                        previousText = text
-                    }
-                }
-
-                StatusBaseText {
-                    id: placeholder
-                    visible: edit.text.length === 0
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    font.pixelSize: 15
-
-                    elide: StatusBaseText.ElideRight
-                    font.family: Theme.palette.baseFont.name
-                    color: statusBaseInput.enabled ? Theme.palette.baseColor1 :
-                                                     Theme.palette.directColor6
-                }
-            }
-
-        } // Flickable
        MouseArea {
            id: sensor
            enabled: !edit.activeFocus
            hoverEnabled: true
            anchors.fill: parent
            cursorShape: Qt.IBeamCursor
-            onClicked: edit.forceActiveFocus()
-        }
+            onClicked: {
+                edit.forceActiveFocus()
+            }

+            StatusIcon {
+                id: statusIcon
+                anchors.topMargin: 10
+                anchors.left: statusBaseInput.leftIcon ? parent.left : undefined
+                anchors.right: !statusBaseInput.leftIcon ? parent.right : undefined
+                anchors.leftMargin: 10
+                anchors.rightMargin: 10
+                anchors.verticalCenter: parent.verticalCenter
+                icon: statusBaseInput.icon.name
+                width: statusBaseInput.icon.width
+                height: statusBaseInput.icon.height
+                color: statusBaseInput.icon.color
+                visible: !!statusBaseInput.icon.name
+            }
+
+            Flickable {
+                id: flick
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.left: (statusIcon.visible && statusBaseInput.leftIcon) ?
+                              statusIcon.right : parent.left
+                anchors.right: {
+                    if (!!statusBaseInput.component) {
+                        return statusBaseInputComponentSlot.left
+                    }
+                    return statusIcon.visible && !statusBaseInput.leftIcon ? statusIcon.left : parent.right
+                }
+                anchors.leftMargin: statusIcon.visible && statusBaseInput.leftIcon ? 8
+                                    : statusBaseInput.leftPadding
+                anchors.rightMargin: {
+                    return clearable ? clearButtonLoader.width + 12 : 
+                        (statusIcon.visible && !leftIcon) || !!statusBaseInput.component ? 8 : 0
+                }
+                anchors.topMargin: statusBaseInput.topPadding
+                anchors.bottomMargin: statusBaseInput.bottomPadding
+                contentWidth: edit.paintedWidth
+                contentHeight: edit.paintedHeight
+                boundsBehavior: Flickable.StopAtBounds
+                QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline; enabled: multiline }
+                function ensureVisible(r) {
+                    if (contentX >= r.x)
+                        contentX = r.x;
+                    else if (contentX+width <= r.x+r.width)
+                        contentX = r.x+r.width-width;
+                    if (contentY >= r.y)
+                        contentY = r.y;
+                    else if (contentY+height <= r.y+r.height)
+                        contentY = r.y+r.height-height;
+                }
+                TextEdit {
+                    id: edit
+                    property string previousText: text
+                    width: flick.width
+                    height: flick.height
+                    verticalAlignment: Text.AlignVCenter
+                    selectByMouse: true
+                    selectionColor: Theme.palette.primaryColor2
+                    selectedTextColor: color
+                    focus: true
+                    font.pixelSize: 15
+                    font.family: Theme.palette.baseFont.name
+                    color: Theme.palette.directColor1
+                    onCursorRectangleChanged: { flick.ensureVisible(cursorRectangle); }
+                    wrapMode: statusBaseInput.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap
+                    onActiveFocusChanged: {
+                        if (statusBaseInput.pristine) {
+                            statusBaseInput.pristine = false
+                        }
+                    }
+
+                    Keys.onReturnPressed: {
+                        if (multiline) {
+                            event.accepted = false
+                        } else {
+                            event.accepted = true
+                        }
+                    }
+
+                    Keys.onEnterPressed: {
+                        if (multiline) {
+                            event.accepted = false
+                        } else {
+                            event.accepted = true
+                        }
+                    }
+
+                    Keys.forwardTo: [statusBaseInput]
+
+                    onTextChanged: {
+                        statusBaseInput.dirty = true
+                        if (statusBaseInput.maximumLength > 0) {
+                            if (text.length > statusBaseInput.maximumLength) {
+                                var cursor = cursorPosition;
+                                text = previousText;
+                                if (cursor > text.length) {
+                                    cursorPosition = text.length;
+                                } else {
+                                    cursorPosition = cursor-1;
+                                }
+                            }
+                            previousText = text
+                        }
+                    }
+                    StatusBaseText {
+                        id: placeholder
+                        visible: (edit.text.length === 0)
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.rightMargin: statusBaseInput.rightPadding
+                        anchors.verticalCenter: parent.verticalCenter
+                        font.pixelSize: 15
+                        elide: StatusBaseText.ElideRight
+                        font.family: Theme.palette.baseFont.name
+                        color: statusBaseInput.enabled ? Theme.palette.baseColor1 :
+                                                        Theme.palette.directColor6
+                    }
+                }
+
+            } // Flickable
+
+            Item {
+                id: statusBaseInputComponentSlot
+                anchors.right: parent.right
+                anchors.rightMargin: 12
+                width: childrenRect.width
+                height: childrenRect.height
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
    } // Rectangle

-    StatusFlatRoundButton {
-        id: clearButtton
-        visible: edit.text.length != 0 &&
-                 statusBaseInput.clearable &&
-                 !statusBaseInput.multiline &&
-                 edit.activeFocus
-        anchors.right: parent.right
-        anchors.rightMargin: 11
-        anchors.verticalCenter: parent.verticalCenter
-        type: StatusFlatRoundButton.Type.Secondary
-        width: 14
-        height: 14
-        icon.name: "clear"
-        icon.width: 14
-        icon.height: 14
-        icon.color: Theme.palette.baseColor1
-        onClicked: {
-            edit.clear()
+    Loader {
+        id: clearButtonLoader
+        sourceComponent: StatusFlatRoundButton {
+            id: clearButton
+            visible: edit.text.length != 0 &&
+                    statusBaseInput.clearable &&
+                    !statusBaseInput.multiline &&
+                    edit.activeFocus
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 24
+            height: 24
+            icon.name: "clear"
+            icon.width: 16
+            icon.height: 16
+            icon.color: Theme.palette.baseColor1
+            onClicked: {
+                edit.clear()
+            }
        }
    }

+
 }
@@ -7,11 +7,11 @@ import StatusQ.Components 0.1
 Rectangle {
    id: statusChatInfoButton

-    implicitWidth: identicon.width + 
-        Math.max(
-          statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.width,
-          statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.width
-        ) + 8
+    implicitWidth: identicon.width +
+                   Math.max(
+                       statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.implicitWidth,
+                       statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.implicitWidth
+                       ) + 8
    implicitHeight: 48

    property string title: ""
@@ -57,8 +57,8 @@ Rectangle {
            anchors.verticalCenter: parent.verticalCenter

            sourceComponent: !!statusChatInfoButton.image.source.toString() ?
-                statusRoundImageComponent :
-                statusLetterIdenticonComponent
+                                 statusRoundImageComponent :
+                                 statusLetterIdenticonComponent
        }

        Component {
@@ -103,9 +103,16 @@ Rectangle {
            anchors.left: identicon.right
            anchors.leftMargin: 8

-            width: statusIcon.width + chatName.anchors.leftMargin + chatName.width + (mutedIcon.visible ? mutedIcon.width + mutedIcon.anchors.leftMargin : 0)
+            width: Math.min(parent.width - anchors.leftMargin
+                            - identicon.width - identicon.anchors.leftMargin,
+                            implicitWidth)
            height: chatName.height

+            implicitWidth: statusIcon.width + chatName.anchors.leftMargin + chatName.implicitWidth
+                           + mutedDelta
+
+            property real mutedDelta: mutedIcon.visible ? mutedIcon.width + 8 : 0
+
            StatusIcon {
                id: statusIcon
                anchors.top: parent.top
@@ -117,17 +124,17 @@ Rectangle {
                color: statusChatInfoButton.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1
                icon: {
                    switch (statusChatInfoButton.type) {
-                        case StatusChatInfoButton.Type.PublicCat:
-                            return "tiny/public-chat"
-                            break;
-                        case StatusChatInfoButton.Type.GroupChat:
-                            return "tiny/group"
-                            break;
-                        case StatusChatInfoButton.Type.CommunityChat:
-                            return "tiny/channel"
-                            break;
-                        default:
-                            return "tiny/public-chat"
+                    case StatusChatInfoButton.Type.PublicCat:
+                        return "tiny/public-chat"
+                        break;
+                    case StatusChatInfoButton.Type.GroupChat:
+                        return "tiny/group"
+                        break;
+                    case StatusChatInfoButton.Type.CommunityChat:
+                        return "tiny/channel"
+                        break;
+                    default:
+                        return "tiny/public-chat"
                    }
                }
            }
@@ -139,10 +146,15 @@ Rectangle {
                anchors.leftMargin: statusIcon.visible ? 1 : 0
                anchors.top: parent.top

+                elide: Text.ElideRight
+                width: Math.min(implicitWidth, parent.width
+                                - statusIcon.width
+                                - statusChatInfoButtonTitle.mutedDelta)
+
                text: statusChatInfoButton.type === StatusChatInfoButton.Type.PublicChat &&
-                    !statusChatInfoButton.title.startsWith("#") ?
-                    "#" + statusChatInfoButton.title :
-                    statusChatInfoButton.title
+                      !statusChatInfoButton.title.startsWith("#") ?
+                          "#" + statusChatInfoButton.title :
+                          statusChatInfoButton.title
                color: statusChatInfoButton.muted ? Theme.palette.directColor5 : Theme.palette.directColor1
                font.pixelSize: 15
                font.weight: Font.Medium
@@ -162,7 +174,7 @@ Rectangle {
                MouseArea {
                    id: mutedIconSensor
                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor 
+                    cursorShape: Qt.PointingHandCursor
                    anchors.fill: parent
                    onClicked: statusChatInfoButton.unmute()
                }
@@ -183,13 +195,26 @@ Rectangle {
            anchors.top: statusChatInfoButtonTitle.bottom
            visible: !!statusChatInfoButton.subTitle || statusChatInfoButton.pinnedMessagesCount > 0
            height: visible ? chatType.height : 0
-            width: childrenRect.width
+            width: Math.min(parent.width - statusChatInfoButtonTitle.anchors.leftMargin
+                            - identicon.width - identicon.anchors.leftMargin - 8,
+                            implicitWidth)
+
+            implicitWidth: chatType.implicitWidth + pinIconDelta + 8
+
+
+            property real pinIconDelta: pinIcon.visible ? pinIcon.width + pinIcon.anchors.leftMargin
+                                                          + divider.width + divider.anchors.leftMargin
+                                                        : 0

            StatusBaseText {
                id: chatType
                text: statusChatInfoButton.subTitle
                color: Theme.palette.baseColor1
                font.pixelSize: 12
+
+                elide: Text.ElideRight
+                width: Math.min(parent.width - (pinIcon.visible ? divider.width + divider.anchors.leftMargin + pinIcon.width + pinIcon.anchors.leftMargin : 0),
+                                implicitWidth)
            }

            Rectangle {
@@ -231,7 +256,7 @@ Rectangle {
                    id: pinCountSensor
                    anchors.fill: parent
                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor 
+                    cursorShape: Qt.PointingHandCursor
                    onClicked: statusChatInfoButton.pinnedMessagesCountClicked(mouse)
                }
            }
@@ -1,5 +1,6 @@
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Core 0.1

 StatusFlatRoundButton {
    id: statusChatListCategoryItemButton
@@ -9,7 +10,7 @@ StatusFlatRoundButton {
    radius: 4

    property bool highlighted: false
-    property alias tooltip: statusToolTip
+    property StatusTooltipSettings tooltip: StatusTooltipSettings {}

    type: StatusFlatRoundButton.Type.Secondary
    icon.width: 20
@@ -22,6 +23,9 @@ StatusFlatRoundButton {
    StatusToolTip {
        id: statusToolTip
        visible: !!text && parent.hovered
+        text: tooltip.text
+        orientation: tooltip.orientation
+        offset: tooltip.offset
    }
 }

@@ -36,6 +36,7 @@ CheckBox {
        verticalAlignment: Text.AlignVCenter
        wrapMode: Text.WordWrap
        width: parent.width
+        color: Theme.palette.directColor1
        leftPadding: !!statusCheckBox.text ? statusCheckBox.indicator.width + statusCheckBox.spacing
                                           : statusCheckBox.indicator.width
    }
@@ -8,7 +8,7 @@ import StatusQ.Controls.Validators 0.1
 Item {
    id: root
    implicitWidth: 480
-    height: (label.visible ? 
+    height: (label.visible ?
                  label.anchors.topMargin +
                  label.height :
              charLimitLabel.visible ?
@@ -16,57 +16,140 @@ Item {
                  charLimitLabel.height :
              0) +
            statusBaseInput.anchors.topMargin +
-            statusBaseInput.height + 
-            (errorMessage.visible ? 
+            statusBaseInput.height +
+            (errorMessage.visible ?
                  errorMessage.anchors.topMargin +
                  errorMessage.height :
                  0) + 8

    property alias input: statusBaseInput
    property alias valid: statusBaseInput.valid
+    property alias pending: statusBaseInput.pending
    property alias text: statusBaseInput.text
    property string label: ""
+    property string secondaryLabel: ""
    property int charLimit: 0
    property string errorMessage: ""
+    property real leftPadding: 16
+    property real rightPadding: 16
    property list<StatusValidator> validators
+    property list<StatusValidator> asyncValidators
+    property int validationMode: StatusInput.ValidationMode.OnlyWhenDirty
+
+    property var pendingValidators: []
+
+    enum ValidationMode {
+        OnlyWhenDirty, // validates input only after it has become dirty
+        Always // validates input even before it has become dirty
+    }

    property var errors: ({})
+    property var asyncErrors: ({})
+
+    function reset() {
+        statusBaseInput.valid = false
+        statusBaseInput.pristine = true
+        statusBaseInput.text = ""
+        errorMessage = ""
+    }

    function validate() {
+        if (!statusBaseInput.dirty && validationMode === StatusInput.ValidationMode.OnlyWhenDirty) {
+            return
+        }
+        statusBaseInput.valid = true
        if (validators.length) {
            for (let idx in validators) {
-                let result = validators[idx].validate(statusBaseInput.text)
+                let validator = validators[idx]
+                let result = validator.validate(statusBaseInput.text)

                if (typeof result === "boolean" && result) {
-                    statusBaseInput.valid = true
+                    statusBaseInput.valid = statusBaseInput.valid && true
+                    delete errors[validator.name]
                } else {
                    if (!errors) {
                        errors = {}
                    }
-                    errors[validators[idx].name] = result
-                    statusBaseInput.valid = false
+                    result.errorMessage = validator.errorMessage
+                    errors[validator.name] = result
+                    statusBaseInput.valid = statusBaseInput.valid && false
+                }
+            }
+            if (errors){
+                let errs = Object.values(errors)
+                if (errs && errs[0]) {
+                    errorMessage.text = errs[0].errorMessage || root.errorMessage;
+                } else {
+                    errorMessage.text = ""
+                }
+            }
+        }
+
+        if (asyncValidators.length && !Object.values(errors).length) {
+            root.pending = true
+            for (let idx in asyncValidators) {
+                let asyncValidator = asyncValidators[idx]
+                if (pendingValidators.indexOf(asyncValidator.name) == -1) {
+                    asyncValidator.input = root
+                    pendingValidators.push(asyncValidator.name)
+                    asyncValidator.validate(statusBaseInput.text)
                }
            }
        }
    }

+    function updateValidity(validatorName, result) {
+        if (!asyncErrors) {
+            asyncErrors = {}
+        }
+
+        if (typeof result === "boolean" && result) {
+            if (asyncErrors[validatorName] !== undefined) {
+                delete asyncErrors[validatorName]
+            }
+            errorMessage.text = ""
+        } else {
+            asyncErrors[validatorName] = result
+            for (let idx in asyncValidators) {
+                errorMessage.text = asyncValidators[idx].errorMessage || root.errorMessage
+                break;
+            }
+        }
+        pendingValidators = pendingValidators.filter(v => v !== validatorName)
+        root.pending = pendingValidators.length > 0
+        root.valid = Object.values(asyncErrors).length == 0
+    }
+
    Component.onCompleted: validate()

-    StatusBaseText {
-        id: label
-        height: visible ? 17 : 0
+    Row {
+        id: labelRow
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.topMargin: visible ? 8 : 0
-        anchors.leftMargin: 16
-        anchors.right: charLimitLabel.visible ? charLimitLabel.left : parent.right
-        anchors.rightMargin: 16
+        anchors.leftMargin: root.leftPadding
+        anchors.right: (charLimitLabel.visible ? charLimitLabel.right : parent.right)
+        anchors.rightMargin: root.rightPadding
+        height: visible ? 17 : 0
        visible: !!root.label
-        elide: Text.ElideRight
+        spacing: 5
+        StatusBaseText {
+            id: label
+            elide: Text.ElideRight
+            text: root.label
+            font.pixelSize: 15
+            color: statusBaseInput.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
+        }

-        text: root.label
-        font.pixelSize: 15
-        color: statusBaseInput.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
+        StatusBaseText {
+            id: secondaryLabel
+            height: visible ? 17 : 0
+            visible: !!root.secondaryLabel
+            elide: Text.ElideRight
+            text: root.secondaryLabel
+            font.pixelSize: 15
+            color: Theme.palette.baseColor1
+        }
    }

    StatusBaseText {
@@ -75,7 +158,7 @@ Item {
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.topMargin: visible ? 11 : 0
-        anchors.rightMargin: 16
+        anchors.rightMargin: root.rightPadding
        visible: root.charLimit > 0

        text: "%1 / %2".arg(statusBaseInput.text.length).arg(root.charLimit)
@@ -85,16 +168,17 @@ Item {

    StatusBaseInput {
        id: statusBaseInput
-        anchors.top:  label.visible ? label.bottom : 
+        anchors.top:  labelRow.visible ? labelRow.bottom :
                charLimitLabel.visible ? charLimitLabel.bottom : parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.topMargin: charLimitLabel.visible ? 11 : 8
-        anchors.leftMargin: 16
-        anchors.rightMargin: 16
-
+        anchors.leftMargin: root.leftPadding
+        anchors.rightMargin: root.rightPadding
        maximumLength: root.charLimit
        onTextChanged: root.validate()
+
+        Keys.forwardTo: [root]
    }

    StatusBaseText {
@@ -103,16 +187,17 @@ Item {
        anchors.top: statusBaseInput.bottom
        anchors.topMargin: 11
        anchors.right: parent.right
-        anchors.rightMargin: 16
+        anchors.rightMargin: root.rightPadding
        anchors.left: parent.left
-        anchors.leftMargin: 16
+        anchors.leftMargin: root.leftPadding

        height: visible ? implicitHeight : 0
-        visible: !!root.errorMessage && !statusBaseInput.valid
+        visible: !!text && !statusBaseInput.valid

        font.pixelSize: 12
        color: Theme.palette.dangerColor1
-        text: root.errorMessage
+
+
        horizontalAlignment: Text.AlignRight
        wrapMode: Text.WordWrap
    }
@@ -0,0 +1,14 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import StatusQ.Core.Theme 0.1
+
+TabBar {
+    id: statusSwitchTabBar
+    padding: 1
+
+    background: Rectangle {
+        implicitHeight: 36
+        color: Theme.palette.directColor7
+        radius: 8
+    }
+}
@@ -0,0 +1,52 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+TabButton {
+    id: statusSwitchTabButton
+
+    contentItem: Item {
+        height: 36
+        MouseArea {
+            id: sensor
+            hoverEnabled: true
+            anchors.fill: parent
+
+            cursorShape: Qt.PointingHandCursor
+            onPressed: mouse.accepted = false
+            onReleased: mouse.accepted = false
+
+            StatusBaseText {
+                id: label
+                text: statusSwitchTabButton.text
+                color: Theme.palette.primaryColor1
+                font.weight: Font.Medium
+                font.pixelSize: 15
+                horizontalAlignment: Text.AlignHCenter
+                anchors.centerIn: parent
+            }
+        }
+    }
+
+    background: Rectangle {
+        id: controlBackground
+        implicitHeight: 36
+        implicitWidth: 148
+        color: statusSwitchTabButton.checked ?
+            Theme.palette.statusSwitchTab.backgroundColor :
+            "transparent"
+        radius: 8
+        layer.enabled: true
+        layer.effect: DropShadow {
+            horizontalOffset: 0
+            verticalOffset: 0
+            radius: 10
+            samples: 25
+            spread: 0
+            color: Theme.palette.dropShadow
+        }
+    }
+}
@@ -0,0 +1,15 @@
+import StatusQ.Controls 0.1
+import StatusQ.Core.Utils 0.1
+
+StatusValidator {
+    name: "addressOrEns"
+
+    errorMessage: "Please enter a valid address or ENS name."
+
+    validate: function (t) {
+        return Utils.isValidAddress(t) || Utils.isValidEns(t) ?
+            true :
+            { actual: t }
+    }
+}
+
@@ -0,0 +1,13 @@
+import StatusQ.Controls 0.1
+import StatusQ.Core.Utils 0.1
+
+StatusValidator {
+    name: "address"
+
+    errorMessage: "Please enter a valid address."
+
+    validate: function (t) {
+        return Utils.isValidAddress(t) ? true : { actual: t }
+    }
+}
+
@@ -6,6 +6,12 @@ StatusValidator {

    name: "minLength"

+    errorMessage: {
+        minLength === 1 ?
+            "Please enter a value" :
+            `The value must be at least ${minLength} characters.`
+    }
+
    validate: function (value) {
        return value.length >= minLength ? true : {
            min: minLength,
@@ -1,9 +1,12 @@
 import QtQuick 2.13
+import StatusQ.Controls 0.1

 QtObject {
    id: statusValidator

    property string name: ""
+    property string errorMessage: "invalid input"
+    property StatusInput input

    property var validate: function (value) {
        return true
@@ -1,5 +1,7 @@
 module StatusQ.Controls.Validators

+StatusAddressValidator 0.1 StatusAddressValidator.qml
+StatusAddressOrEnsValidator 0.1 StatusAddressOrEnsValidator.qml
 StatusValidator 0.1 StatusValidator.qml
 StatusMinLengthValidator 0.1 StatusMinLengthValidator.qml
 StatusMaxLengthValidator 0.1 StatusMaxLengthValidator.qml
@@ -17,3 +17,5 @@ StatusSlider 0.1 StatusSlider.qml
 StatusBaseInput 0.1 StatusBaseInput.qml
 StatusInput 0.1 StatusInput.qml
 StatusPickerButton 0.1 StatusPickerButton.qml
+StatusSwitchTabButton 0.1 StatusSwitchTabButton.qml
+StatusSwitchTabBar 0.1 StatusSwitchTabBar.qml
@@ -3,7 +3,9 @@ import QtQuick 2.14
 QtObject {
    property string title
    property string subTitle
-
+    property int titleElide: Text.ElideRight
+    property int subTitleElide: Text.ElideRight
+    property Component popupMenu
    property StatusImageSettings image: StatusImageSettings {
        width: 40
        height: 40
@@ -0,0 +1,9 @@
+import QtQuick 2.14
+
+import StatusQ.Controls 0.1
+
+QtObject {
+    property string text: ""
+    property int orientation: StatusToolTip.Orientation.Top
+    property int offset: 0
+}
@@ -68,6 +68,30 @@ ThemePalette {
        source: "../../../assets/fonts/InterStatus/InterStatus-Black.otf"
    }

+    property QtObject codeFont: FontLoader {
+        source: "../../../assets/fonts/RobotoMono/RobotoMono-Regular.ttf"
+    }
+
+    property QtObject codeFontThin: FontLoader {
+        source: "../../../assets/fonts/RobotoMono/RobotoMono-Thin.ttf"
+    }
+
+    property QtObject codeFontExtraLight: FontLoader {
+        source: "../../../assets/fonts/RobotoMono/RobotoMono-ExtraLight.ttf"
+    }
+
+    property QtObject codeFontLight: FontLoader {
+        source: "../../../assets/fonts/RobotoMono/RobotoMono-Light.ttf"
+    }
+
+    property QtObject codeFontMedium: FontLoader {
+        source: "../../../assets/fonts/RobotoMono/RobotoMono-Medium.ttf"
+    }
+
+    property QtObject codeFontBold: FontLoader {
+        source: "../../../assets/fonts/RobotoMono/RobotoMono-Bold.ttf"
+    }
+
    property color dropShadow: getColor('black', 0.08)

    baseColor1: getColor('graphite5')
@@ -104,6 +128,7 @@ ThemePalette {
    directColor6: getColor('white', 0.2)
    directColor7: getColor('white', 0.1)
    directColor8: getColor('white', 0.05)
+    directColor9: getColor('white', 0.2)

    indirectColor1: getColor('black')
    indirectColor2: getColor('black', 0.7)
@@ -176,5 +201,9 @@ ThemePalette {
    property QtObject statusChatInput: QtObject {
        property color secondaryBackgroundColor: "#414141"
    }
+
+    property QtObject statusSwitchTab: QtObject {
+        property color backgroundColor: baseColor3
+    }
 }

@@ -68,6 +68,30 @@ ThemePalette {
        source: "../../../assets/fonts/InterStatus/InterStatus-Black.otf"
    }

+    property QtObject codeFont: FontLoader {
+        source: "../../../assets/fonts/RobotoMono/RobotoMono-Regular.ttf"
+    }
+
+    property QtObject codeFontThin: FontLoader {
+        source: "../../../assets/fonts/RobotoMono/RobotoMono-Thin.ttf"
+    }
+
+    property QtObject codeFontExtraLight: FontLoader {
+        source: "../../../assets/fonts/RobotoMono/RobotoMono-ExtraLight.ttf"
+    }
+
+    property QtObject codeFontLight: FontLoader {
+        source: "../../../assets/fonts/RobotoMono/RobotoMono-Light.ttf"
+    }
+
+    property QtObject codeFontMedium: FontLoader {
+        source: "../../../assets/fonts/RobotoMono/RobotoMono-Medium.ttf"
+    }
+
+    property QtObject codeFontBold: FontLoader {
+        source: "../../../assets/fonts/RobotoMono/RobotoMono-Bold.ttf"
+    }
+
    baseColor1: getColor('grey5')
    baseColor2: getColor('grey4')
    baseColor3: getColor('grey3')
@@ -102,6 +126,7 @@ ThemePalette {
    directColor6: getColor('black', 0.3)
    directColor7: getColor('black', 0.1)
    directColor8: getColor('black', 0.05)
+    directColor9: getColor('black', 0.2)

    indirectColor1: getColor('white')
    indirectColor2: getColor('white', 0.7)
@@ -174,5 +199,9 @@ ThemePalette {
    property QtObject statusChatInput: QtObject {
        property color secondaryBackgroundColor: "#E2E6E8"
    }
+
+    property QtObject statusSwitchTab: QtObject {
+        property color backgroundColor: white
+    }
 }

@@ -24,6 +24,13 @@ QtObject {
    property FontLoader monoFontExtraBold
    property FontLoader monoFontBlack

+    property FontLoader codeFont
+    property FontLoader codeFontThin
+    property FontLoader codeFontExtraLight
+    property FontLoader codeFontLight
+    property FontLoader codeFontMedium
+    property FontLoader codeFontBold
+
    property color black: getColor('black')
    property color white: getColor('white')

@@ -64,6 +71,7 @@ QtObject {
    property color directColor6
    property color directColor7
    property color directColor8
+    property color directColor9

    property color indirectColor1
    property color indirectColor2
@@ -138,6 +146,10 @@ QtObject {
        property color secondaryBackgroundColor
    }

+    property QtObject statusSwitchTab: QtObject {
+        property color backgroundColor
+    }
+
    function alphaColor(color, alpha) {
        let actualColor = Qt.darker(color, 1)
        actualColor.a = alpha
@@ -14,6 +14,18 @@ QtObject {
        }
        return returnPos;
    }
+    function isValidAddress(inputValue) {
+        return inputValue !== "0x" && /^0x[a-fA-F0-9]{40}$/.test(inputValue)
+    }
+
+    function isValidEns(inputValue) {
+        if (!inputValue) {
+            return false
+        }
+        const isEmail = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(inputValue)
+        const isDomain = /(?:(?:(?<thld>[\w\-]*)(?:\.))?(?<sld>[\w\-]*))\.(?<tld>[\w\-]*)/.test(inputValue)
+        return isEmail || isDomain || (inputValue.startsWith("@") && inputValue.length > 1)
+    }
 }


@@ -6,4 +6,4 @@ StatusIconSettings 0.1 StatusIconSettings.qml
 StatusIconBackgroundSettings 0.1 StatusIconBackgroundSettings.qml
 StatusImageSettings 0.1 StatusImageSettings.qml
 StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml
-
+StatusTooltipSettings 0.1 StatusTooltipSettings.qml
@@ -29,6 +29,7 @@ SplitView {
        SplitView.minimumWidth: 300
        SplitView.fillWidth: true
        SplitView.fillHeight: true
+        leftPadding: -5
        contentItem: (!!centerPanel) ? centerPanel : null
        background: Rectangle {
            anchors.fill: parent
@@ -0,0 +1,118 @@
+import QtQuick 2.14
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+
+Rectangle {
+    id: windowsTitleBar
+
+    property string title: titleText.text
+
+    signal close();
+    signal minimised();
+    signal maximized();
+
+    implicitHeight: 32
+    color: Theme.palette.baseColor5
+
+    Row {
+        id: titleLayout
+        anchors.left: parent.left
+        anchors.leftMargin: 12
+        anchors.verticalCenter: parent.verticalCenter
+
+        spacing: 4
+
+        StatusIcon {
+            anchors.verticalCenter: parent.verticalCenter
+            width: 16
+            height: 16
+            icon: "windows_titlebar/status"
+        }
+
+        StatusBaseText {
+            id: titleText
+            anchors.verticalCenter: parent.verticalCenter
+            text: qsTr("Status")
+            color: Theme.palette.directColor1
+        }
+    }
+
+    Row {
+        id: buttonsLayout
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+
+        height: parent.height
+
+        Rectangle {
+            width: 48
+            height: parent.height
+
+            color: minimizeSensor.containsMouse ? (minimizeSensor.pressed ? Theme.palette.directColor9 : Theme.palette.directColor8)
+                                                : "transparent"
+
+            StatusIcon {
+                anchors.centerIn: parent
+                width: 10
+                height: 1
+                icon: "windows_titlebar/minimise"
+                color: Theme.palette.directColor1
+            }
+
+            MouseArea {
+                id: minimizeSensor
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: windowsTitleBar.minimised()
+            }
+        }
+
+        Rectangle {
+            width: 48
+            height: parent.height
+
+            color: maximizeSensor.containsMouse ? (maximizeSensor.pressed ? Theme.palette.directColor9 : Theme.palette.directColor8)
+                                                : "transparent"
+
+            StatusIcon {
+                anchors.centerIn: parent
+                width: 10
+                height: 10
+                icon: "windows_titlebar/maximize"
+                color: Theme.palette.directColor1
+            }
+
+            MouseArea {
+                id: maximizeSensor
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: windowsTitleBar.maximized()
+            }
+        }
+
+        Rectangle {
+            width: 48
+            height: parent.height
+
+            color: closeSensor.containsMouse ? (closeSensor.pressed ? "#DB1518" : "#ED4245")
+                                                : "transparent"
+
+            StatusIcon {
+                anchors.centerIn: parent
+                width: 10
+                height: 10
+                icon: "windows_titlebar/close"
+                color: closeSensor.containsMouse ? Theme.palette.white : Theme.palette.directColor1
+            }
+
+            MouseArea {
+                id: closeSensor
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: windowsTitleBar.closed()
+            }
+        }
+    }
+}
@@ -1,5 +1,5 @@
 module StatusQ.Platform

 StatusMacTrafficLights 0.1 StatusMacTrafficLights.qml
-
+StatusWindowsTitleBar 0.1 StatusWindowsTitleBar.qml

@@ -11,12 +11,9 @@ import "statusModal" as Spares
 QC.Popup {
    id: statusModal

-    property Component content
-
    property alias headerActionButton: headerImpl.actionButton

    property StatusModalHeaderSettings header: StatusModalHeaderSettings {}
-    property alias contentComponent: contentLoader.item
    property alias rightButtons: footerImpl.rightButtons
    property alias leftButtons: footerImpl.leftButtons
    property bool showHeader: true
@@ -27,10 +24,11 @@ QC.Popup {
    parent: QC.Overlay.overlay

    width: 480
-    height: contentItem.implicitHeight

-    margins: 0
-    padding: 0
+    topPadding: headerImpl.implicitHeight
+    bottomPadding: footerImpl.implicitHeight
+    leftPadding: 0
+    rightPadding: 0

    modal: true

@@ -42,33 +40,28 @@ QC.Popup {
    background: Rectangle {
        color: Theme.palette.statusModal.backgroundColor
        radius: 8
-    }

-    contentItem: Column {
-        width: parent.width
        Spares.StatusModalHeader {
            id: headerImpl
+            anchors.top: parent.top
            width: visible ? parent.width : 0

            visible: statusModal.showHeader
            title: header.title
+            titleElide: header.titleElide
            subTitle: header.subTitle
+            subTitleElide: header.subTitleElide
            image: header.image
            icon: header.icon
+            popupMenu: header.popupMenu

            onEditButtonClicked: statusModal.editButtonClicked()
            onClose: statusModal.close()
        }

-        Loader {
-            id: contentLoader
-            width: parent.width
-            active: true
-            sourceComponent: statusModal.content
-        }
-
        Spares.StatusModalFooter {
            id: footerImpl
+            anchors.bottom: parent.bottom
            width: visible ? parent.width : 0
            visible: statusModal.showFooter
        }
@@ -20,6 +20,10 @@ Menu {
    property var openHandler
    property var closeHandler

+    dim: true
+    Overlay.modeless: MouseArea {}
+
+
    signal menuItemClicked(int menuIndex)

    onOpened: {
@@ -17,7 +17,7 @@ StatusModal {
    showHeader: false
    showFooter: false

-    property string searchText: contentComponent.searchText
+    property string searchText: contentItem.searchText
    property string noResultsLabel: "No results"
    property string defaultSearchLocationText: "Anywhere"
    property bool loading
@@ -28,6 +28,10 @@ StatusModal {
    signal resultItemClicked(string itemId)
    signal resultItemTitleClicked(string titleId)

+    property var formatTimestampFn: function (ts) {
+        return ts
+    }
+
    function setSearchSelection(text = "",
                                secondaryText = "",
                                imageSource = "",
@@ -47,10 +51,19 @@ StatusModal {
        setSearchSelection(defaultSearchLocationText, "", "", false, "", "transparent")
    }

-    content: Item {
+    function forceActiveFocus() {
+        contentItem.searchInput.forceActiveFocus()
+    }
+
+    onOpened: {
+        forceActiveFocus();
+    }
+
+    contentItem: Item {
        width: parent.width
        height: root.height
        property alias searchText: inputText.text
+        property alias searchInput: inputText

        ColumnLayout {
            id: contentItemColumn
@@ -289,14 +302,15 @@ StatusModal {
                        statusListItemSubTitle.height: model.content !== "" ? 20 : 0
                        statusListItemSubTitle.elide: Text.ElideRight
                        statusListItemSubTitle.color: Theme.palette.black
-                        icon.isLetterIdenticon: (model.badgeImage === "")
-                        titleAsideText: model.time
-                        image.source: model.badgeImage
+                        icon.isLetterIdenticon: (model.image === "")
+                        icon.background.color: model.color
+                        titleAsideText: root.formatTimestampFn(model.time)
+                        image.source: model.image
                        badge.primaryText: model.badgePrimaryText
                        badge.secondaryText: model.badgeSecondaryText
                        badge.image.source: model.badgeImage
-                        badge.icon.isLetterIdenticon: model.isLetterIdenticon
-                        badge.icon.color: model.badgeIdenticonColor
+                        badge.icon.isLetterIdenticon: model.badgeIsLetterIdenticon
+                        badge.icon.color: model.badgeIconColor

                        onClicked: {
                            root.resultItemClicked(itemId)
@@ -343,6 +357,6 @@ StatusModal {
    onClosed: {
        root.resetSearchSelection();
        root.loading = false;
-        contentComponent.searchText = "";
+        contentItem.searchText = "";
    }
 }
@@ -9,6 +9,8 @@ Row {

    property alias title: headerTitle.text
    property alias subTitle: headerSubTitle.text
+    property int titleElide: Text.ElideRight
+    property int subTitleElide: Text.ElideRight
    property bool editable: false

    signal editButtonClicked
@@ -77,15 +79,21 @@ Row {

    Column {
        id: textLayout
-
+        width: !iconOrImage.active ? parent.width :
+              parent.width - iconOrImage.width - parent.spacing
        Row {
+            id: headerTitleRow
+            width: parent.width
            spacing: 4
            StatusBaseText {
                id: headerTitle
                font.family: Theme.palette.baseFont.name
                font.pixelSize: 17
                font.bold: true
+                elide: statusImageWithTitle.titleElide
                color: Theme.palette.directColor1
+                width: !editButton.visible ? parent.width : 
+                      parent.width - editButton.width - parent.spacing
            }
            StatusFlatRoundButton {
                id: editButton
@@ -109,6 +117,9 @@ Row {
            font.family: Theme.palette.baseFont.name
            font.pixelSize: 15
            color:Theme.palette.baseColor1
+            width: parent.width
+            elide: statusImageWithTitle.subTitleElide
+            visible: !!statusImageWithTitle.subTitle
        }
    }
 }
@@ -11,11 +11,14 @@ Rectangle {

    property alias title: imageWithTitle.title
    property alias subTitle: imageWithTitle.subTitle
+    property int titleElide
+    property int subTitleElide
    property alias actionButton: actionButtonLoader.sourceComponent

    property alias image: imageWithTitle.image
    property alias icon: imageWithTitle.icon
    property bool editable: false
+    property Component popupMenu

    signal editButtonClicked
    signal close
@@ -27,16 +30,34 @@ Rectangle {

    color: Theme.palette.statusModal.backgroundColor

+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
    StatusImageWithTitle {
        id: imageWithTitle
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
+        anchors.right: actionButtonLoader.left
        anchors.leftMargin: 16

        editable: statusModalHeader.editable
+        titleElide: statusModalHeader.titleElide
+        subTitleElide: statusModalHeader.subTitleElide
        onEditButtonClicked: statusModalHeader.editButtonClicked()
    }

+    MouseArea {
+        anchors.fill: imageWithTitle
+        visible: !!statusModalHeader.popupMenu
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+            popupMenuSlot.item.popup(imageWithTitle.x, imageWithTitle.y + imageWithTitle.height + 8)
+        }
+    }
+
    Loader {
        id: actionButtonLoader
        anchors.right: closeButton.left
@@ -73,4 +94,9 @@ Rectangle {
            width: parent.width
        }
    }
+
+    Loader {
+        id: popupMenuSlot
+        active: !!statusModalHeader.popupMenu
+    }
 }
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 17.2467 6.75329 21.5 12 21.5ZM12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z" fill="#939BA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.24014 16.1491C7.1427 16.5194 7.48062 16.8573 7.85093 16.7599L14.6218 14.9781C14.7961 14.9322 14.9322 14.7961 14.9781 14.6218L16.7599 7.85093C16.8573 7.48062 16.5194 7.1427 16.1491 7.24014L9.37823 9.02194C9.20394 9.06781 9.06781 9.20394 9.02194 9.37823L7.24014 16.1491ZM9.25791 14.3756C9.19944 14.5978 9.4022 14.8006 9.62438 14.7421L13.3938 13.7501C13.5681 13.7043 13.7043 13.5681 13.7501 13.3938L14.7421 9.62438C14.8006 9.4022 14.5978 9.19944 14.3756 9.25791L10.6062 10.2499C10.4319 10.2957 10.2957 10.4319 10.2499 10.6062L9.25791 14.3756Z" fill="#939BA1"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.26285 18.4743C7.26285 19.7317 6.24355 20.751 4.98618 20.751C3.7288 20.751 2.7095 19.7317 2.7095 18.4743C2.7095 17.2169 3.7288 16.1976 4.98618 16.1976C6.24355 16.1976 7.26285 17.2169 7.26285 18.4743ZM4.98618 22.251C6.81518 22.251 8.34052 20.9508 8.68838 19.2243H15.3116C15.6595 20.9508 17.1848 22.251 19.0138 22.251C21.0996 22.251 22.7905 20.5601 22.7905 18.4743C22.7905 16.3885 21.0996 14.6976 19.0138 14.6976C17.1848 14.6976 15.6595 15.9978 15.3116 17.7243H8.68838C8.34052 15.9978 6.81518 14.6976 4.98618 14.6976C2.90038 14.6976 1.2095 16.3885 1.2095 18.4743C1.2095 20.5601 2.90038 22.251 4.98618 22.251ZM21.2905 18.4743C21.2905 19.7317 20.2712 20.751 19.0138 20.751C17.7564 20.751 16.7371 19.7317 16.7371 18.4743C16.7371 17.2169 17.7564 16.1976 19.0138 16.1976C20.2712 16.1976 21.2905 17.2169 21.2905 18.4743ZM14.2767 5.5257C14.2767 6.78307 13.2574 7.80237 12 7.80237C10.7426 7.80237 9.72332 6.78307 9.72332 5.5257C9.72332 4.26832 10.7426 3.24902 12 3.24902C13.2574 3.24902 14.2767 4.26832 14.2767 5.5257ZM15.7767 5.5257C15.7767 6.68953 15.2502 7.73042 14.4225 8.4232L17.9099 14.8615C17.4208 15.0107 16.9739 15.2565 16.5914 15.5767L13.104 9.13846C12.7548 9.24503 12.3841 9.30237 12 9.30237C11.6159 9.30237 11.2452 9.24504 10.896 9.13846L7.40862 15.5767C7.02607 15.2565 6.57917 15.0107 6.09013 14.8615L9.57752 8.42321C8.74977 7.73042 8.22332 6.68954 8.22332 5.5257C8.22332 3.4399 9.91419 1.74902 12 1.74902C14.0858 1.74902 15.7767 3.4399 15.7767 5.5257Z" fill="#939BA1"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="8.125" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
+<rect x="13.375" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 7.5224C8 6.3159 9.30206 5.59038 10.2858 6.24874L17.5201 11.0902C18.16 11.5185 18.16 12.4815 17.5201 12.9098L10.2858 17.7513C9.30206 18.4096 8 17.6841 8 16.4776V7.5224Z" fill="black"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.75 9C15.75 11.0711 14.0711 12.75 12 12.75C9.92893 12.75 8.25 11.0711 8.25 9C8.25 6.92893 9.92893 5.25 12 5.25C14.0711 5.25 15.75 6.92893 15.75 9ZM14.25 9C14.25 10.2426 13.2426 11.25 12 11.25C10.7574 11.25 9.75 10.2426 9.75 9C9.75 7.75736 10.7574 6.75 12 6.75C13.2426 6.75 14.25 7.75736 14.25 9Z" fill="#939BA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12Z" fill="#939BA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.99199 16.3857L6.98744 16.39C6.68505 16.6731 6.6694 17.1477 6.95248 17.4501C7.23544 17.7523 7.70978 17.7681 8.01218 17.4854L8.01129 17.4862L8.02005 17.4783C8.02921 17.4702 8.04496 17.4563 8.06705 17.4376C8.11126 17.4002 8.18068 17.3436 8.27353 17.274C8.45962 17.1346 8.73733 16.9451 9.09253 16.7549C9.80556 16.3731 10.8085 16 12 16C13.1915 16 14.1944 16.3731 14.9075 16.7549C15.2627 16.9451 15.5404 17.1346 15.7265 17.274C15.8193 17.3436 15.8887 17.4002 15.933 17.4376C15.955 17.4563 15.9708 17.4702 15.98 17.4783L15.9887 17.4862C16.2911 17.7685 16.7647 17.7522 17.0475 17.4501C17.3306 17.1477 17.3149 16.6731 17.0126 16.39L17.0117 16.3892L17.0106 16.3882L17.008 16.3857L17.0008 16.3791L16.9782 16.3588C16.9597 16.3422 16.9341 16.3198 16.9016 16.2923C16.8367 16.2374 16.7442 16.1623 16.6259 16.0736C16.3897 15.8967 16.0482 15.6642 15.6156 15.4326C14.753 14.9707 13.5059 14.5 12 14.5C10.4941 14.5 9.24704 14.9707 8.38442 15.4326C7.95179 15.6642 7.61027 15.8967 7.37408 16.0736C7.25578 16.1623 7.1633 16.2374 7.0984 16.2923C7.06593 16.3198 7.04031 16.3422 7.02176 16.3588L6.99924 16.3791L6.99199 16.3857L6.98937 16.3882L6.98832 16.3892L6.99199 16.3857Z" fill="#939BA1"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6192 18.1568L5.00164 20.8817C4.45399 21.1072 3.90948 20.553 4.14456 20.0094L11.3015 3.45893C11.422 3.18035 11.6965 3 12 3C12.3035 3 12.578 3.18035 12.6984 3.45893L19.8554 20.0094C20.0905 20.553 19.546 21.1072 18.9983 20.8817L12.3807 18.1568C12.1368 18.0563 11.8631 18.0564 11.6192 18.1568ZM11.25 16.4818C11.25 16.6096 11.1663 16.7211 11.0481 16.7698L7.47933 18.2393C7.06444 18.4101 6.65194 17.9903 6.83002 17.5785L10.7705 8.46607C10.8782 8.21695 11.25 8.29388 11.25 8.5653V16.4818ZM12.75 16.4818C12.75 16.6096 12.8337 16.7211 12.9519 16.7698L16.5206 18.2393C16.9355 18.4101 17.348 17.9903 17.1699 17.5785L13.2294 8.46607C13.1217 8.21695 12.75 8.29388 12.75 8.5653V16.4818Z" fill="#4360DF"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4083 12C15.4083 13.8823 13.8824 15.4082 12 15.4082C10.1177 15.4082 8.5918 13.8823 8.5918 12C8.5918 10.1177 10.1177 8.59174 12 8.59174C13.8824 8.59174 15.4083 10.1177 15.4083 12ZM13.9083 12C13.9083 13.0539 13.0539 13.9082 12 13.9082C10.9461 13.9082 10.0918 13.0539 10.0918 12C10.0918 10.9461 10.9461 10.0917 12 10.0917C13.0539 10.0917 13.9083 10.9461 13.9083 12Z" fill="#939BA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2772 23H11.7228C10.8413 23 10.0666 22.4156 9.82441 21.568L9.3263 19.8247C9.22927 19.485 8.84755 19.3171 8.53163 19.4751L6.9006 20.2906C6.14049 20.6707 5.22247 20.5217 4.62156 19.9208L4.07924 19.3784C3.47832 18.7775 3.32935 17.8595 3.7094 17.0994L4.52491 15.4684C4.68287 15.1525 4.51495 14.7707 4.17534 14.6737L2.43196 14.1756C1.58437 13.9334 1 13.1587 1 12.2772V11.7228C1 10.8413 1.58437 10.0666 2.43196 9.82441L4.17534 9.3263C4.51495 9.22927 4.68287 8.84755 4.52491 8.53163L3.7094 6.9006C3.32935 6.14049 3.47832 5.22247 4.07924 4.62156L4.62156 4.07924C5.22247 3.47832 6.14049 3.32935 6.9006 3.7094L8.53163 4.52491C8.84755 4.68287 9.22927 4.51495 9.3263 4.17534L9.82441 2.43196C10.0666 1.58436 10.8413 1 11.7228 1H12.2772C13.1587 1 13.9334 1.58436 14.1756 2.43196L14.6737 4.17534C14.7707 4.51495 15.1525 4.68287 15.4684 4.52491L17.0994 3.7094C17.8595 3.32935 18.7775 3.47832 19.3784 4.07924L19.9208 4.62156C20.5217 5.22247 20.6707 6.14049 20.2906 6.9006L19.4751 8.53163C19.3171 8.84755 19.485 9.22927 19.8247 9.3263L21.568 9.82441C22.4156 10.0666 23 10.8413 23 11.7228V12.2772C23 13.1587 22.4156 13.9334 21.568 14.1756L19.8247 14.6737C19.485 14.7707 19.3171 15.1525 19.4751 15.4684L20.2906 17.0994C20.6707 17.8595 20.5217 18.7775 19.9208 19.3784L19.3784 19.9208C18.7775 20.5217 17.8595 20.6707 17.0994 20.2906L15.4684 19.4751C15.1525 19.3171 14.7707 19.485 14.6737 19.8247L14.1756 21.568C13.9334 22.4156 13.1587 23 12.2772 23ZM11.7228 21.5C11.511 21.5 11.3249 21.3596 11.2667 21.156L10.7686 19.4126C10.4135 18.1699 9.01678 17.5555 7.86081 18.1334L6.22978 18.949C6.04716 19.0403 5.82659 19.0045 5.68222 18.8601L5.1399 18.3178C4.99552 18.1734 4.95973 17.9528 5.05104 17.7702L5.86655 16.1392C6.44454 14.9832 5.8301 13.5865 4.58742 13.2314L2.84404 12.7333C2.6404 12.6751 2.5 12.489 2.5 12.2772V11.7228C2.5 11.511 2.6404 11.3249 2.84404 11.2667L4.58742 10.7686C5.83011 10.4135 6.44454 9.01678 5.86656 7.86081L5.05104 6.22978C4.95973 6.04716 4.99552 5.82659 5.1399 5.68222L5.68222 5.1399C5.82659 4.99552 6.04716 4.95973 6.22978 5.05104L7.86081 5.86655C9.01677 6.44454 10.4135 5.83011 10.7686 4.58742L11.2667 2.84404C11.3249 2.6404 11.511 2.5 11.7228 2.5H12.2772C12.489 2.5 12.6751 2.6404 12.7333 2.84404L13.2314 4.58742C13.5865 5.83011 14.9832 6.44454 16.1392 5.86655L17.7702 5.05104C17.9528 4.95973 18.1734 4.99552 18.3178 5.1399L18.8601 5.68222C19.0045 5.82659 19.0403 6.04716 18.949 6.22978L18.1334 7.86081C17.5555 9.01678 18.1699 10.4135 19.4126 10.7686L21.156 11.2667C21.3596 11.3249 21.5 11.511 21.5 11.7228V12.2772C21.5 12.489 21.3596 12.6751 21.156 12.7333L19.4126 13.2314C18.1699 13.5865 17.5555 14.9832 18.1334 16.1392L18.949 17.7702C19.0403 17.9528 19.0045 18.1734 18.8601 18.3178L18.3178 18.8601C18.1734 19.0045 17.9528 19.0403 17.7702 18.949L16.1392 18.1334C14.9832 17.5555 13.5865 18.1699 13.2314 19.4126L12.7333 21.156C12.6751 21.3596 12.489 21.5 12.2772 21.5H11.7228Z" fill="#939BA1"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23ZM12 21.5C10.3571 21.5 9.02523 20.1682 9.02523 18.5252C9.02523 16.8823 10.3571 15.5505 12 15.5505C13.6429 15.5505 14.9748 16.8823 14.9748 18.5252C14.9748 20.1682 13.6429 21.5 12 21.5ZM7.11258 18.6751C7.22604 18.8718 7.52523 18.7523 7.52523 18.5252C7.52523 16.0539 9.52865 14.0505 12 14.0505C14.4713 14.0505 16.4748 16.0539 16.4748 18.5252C16.4748 18.7523 16.774 18.8718 16.8874 18.6751C17.3651 17.847 17.6385 16.8862 17.6385 15.8615C17.6385 12.7475 15.114 10.2231 12 10.2231C8.88597 10.2231 6.36154 12.7475 6.36154 15.8615C6.36154 16.8862 6.63487 17.847 7.11258 18.6751ZM19.0483 16.9992C18.9783 17.4359 19.5498 17.784 19.8025 17.421C20.8726 15.8836 21.5 14.0151 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 14.0151 3.1274 15.8836 4.19751 17.421C4.45018 17.784 5.02165 17.4359 4.95171 16.9992C4.89237 16.6287 4.86154 16.2487 4.86154 15.8615C4.86154 11.9191 8.05754 8.72308 12 8.72308C15.9425 8.72308 19.1385 11.9191 19.1385 15.8615C19.1385 16.2487 19.1076 16.6287 19.0483 16.9992Z" fill="#939BA1"/>
+</svg>
@@ -1,4 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4083 12C15.4083 13.8823 13.8824 15.4082 12 15.4082C10.1177 15.4082 8.5918 13.8823 8.5918 12C8.5918 10.1177 10.1177 8.59174 12 8.59174C13.8824 8.59174 15.4083 10.1177 15.4083 12ZM13.9083 12C13.9083 13.0539 13.0539 13.9082 12 13.9082C10.9461 13.9082 10.0918 13.0539 10.0918 12C10.0918 10.9461 10.9461 10.0917 12 10.0917C13.0539 10.0917 13.9083 10.9461 13.9083 12Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2772 23H11.7228C10.8413 23 10.0666 22.4156 9.82441 21.568L9.3263 19.8247C9.22927 19.485 8.84755 19.3171 8.53163 19.4751L6.9006 20.2906C6.14049 20.6707 5.22247 20.5217 4.62156 19.9208L4.07924 19.3784C3.47832 18.7775 3.32935 17.8595 3.7094 17.0994L4.52491 15.4684C4.68287 15.1525 4.51495 14.7707 4.17534 14.6737L2.43196 14.1756C1.58437 13.9334 1 13.1587 1 12.2772V11.7228C1 10.8413 1.58437 10.0666 2.43196 9.82441L4.17534 9.3263C4.51495 9.22927 4.68287 8.84755 4.52491 8.53163L3.7094 6.9006C3.32935 6.14049 3.47832 5.22247 4.07924 4.62156L4.62156 4.07924C5.22247 3.47832 6.14049 3.32935 6.9006 3.7094L8.53163 4.52491C8.84755 4.68287 9.22927 4.51495 9.3263 4.17534L9.82441 2.43196C10.0666 1.58436 10.8413 1 11.7228 1H12.2772C13.1587 1 13.9334 1.58436 14.1756 2.43196L14.6737 4.17534C14.7707 4.51495 15.1525 4.68287 15.4684 4.52491L17.0994 3.7094C17.8595 3.32935 18.7775 3.47832 19.3784 4.07924L19.9208 4.62156C20.5217 5.22247 20.6707 6.14049 20.2906 6.9006L19.4751 8.53163C19.3171 8.84755 19.485 9.22927 19.8247 9.3263L21.568 9.82441C22.4156 10.0666 23 10.8413 23 11.7228V12.2772C23 13.1587 22.4156 13.9334 21.568 14.1756L19.8247 14.6737C19.485 14.7707 19.3171 15.1525 19.4751 15.4684L20.2906 17.0994C20.6707 17.8595 20.5217 18.7775 19.9208 19.3784L19.3784 19.9208C18.7775 20.5217 17.8595 20.6707 17.0994 20.2906L15.4684 19.4751C15.1525 19.3171 14.7707 19.485 14.6737 19.8247L14.1756 21.568C13.9334 22.4156 13.1587 23 12.2772 23ZM11.7228 21.5C11.511 21.5 11.3249 21.3596 11.2667 21.156L10.7686 19.4126C10.4135 18.1699 9.01678 17.5555 7.86081 18.1334L6.22978 18.949C6.04716 19.0403 5.82659 19.0045 5.68222 18.8601L5.1399 18.3178C4.99552 18.1734 4.95973 17.9528 5.05104 17.7702L5.86655 16.1392C6.44454 14.9832 5.8301 13.5865 4.58742 13.2314L2.84404 12.7333C2.6404 12.6751 2.5 12.489 2.5 12.2772V11.7228C2.5 11.511 2.6404 11.3249 2.84404 11.2667L4.58742 10.7686C5.83011 10.4135 6.44454 9.01678 5.86656 7.86081L5.05104 6.22978C4.95973 6.04716 4.99552 5.82659 5.1399 5.68222L5.68222 5.1399C5.82659 4.99552 6.04716 4.95973 6.22978 5.05104L7.86081 5.86655C9.01677 6.44454 10.4135 5.83011 10.7686 4.58742L11.2667 2.84404C11.3249 2.6404 11.511 2.5 11.7228 2.5H12.2772C12.489 2.5 12.6751 2.6404 12.7333 2.84404L13.2314 4.58742C13.5865 5.83011 14.9832 6.44454 16.1392 5.86655L17.7702 5.05104C17.9528 4.95973 18.1734 4.99552 18.3178 5.1399L18.8601 5.68222C19.0045 5.82659 19.0403 6.04716 18.949 6.22978L18.1334 7.86081C17.5555 9.01678 18.1699 10.4135 19.4126 10.7686L21.156 11.2667C21.3596 11.3249 21.5 11.511 21.5 11.7228V12.2772C21.5 12.489 21.3596 12.6751 21.156 12.7333L19.4126 13.2314C18.1699 13.5865 17.5555 14.9832 18.1334 16.1392L18.949 17.7702C19.0403 17.9528 19.0045 18.1734 18.8601 18.3178L18.3178 18.8601C18.1734 19.0045 17.9528 19.0403 17.7702 18.949L16.1392 18.1334C14.9832 17.5555 13.5865 18.1699 13.2314 19.4126L12.7333 21.156C12.6751 21.3596 12.489 21.5 12.2772 21.5H11.7228Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 13C13.933 13 15.5 11.433 15.5 9.5C15.5 7.567 13.933 6 12 6C10.067 6 8.5 7.567 8.5 9.5C8.5 11.433 10.067 13 12 13ZM12 11.5C13.1046 11.5 14 10.6046 14 9.5C14 8.39543 13.1046 7.5 12 7.5C10.8954 7.5 10 8.39543 10 9.5C10 10.6046 10.8954 11.5 12 11.5Z" fill="black"/>
+<path d="M16.4465 16.2731C16.8119 16.5572 16.822 17.0954 16.4657 17.3909C16.1611 17.6435 15.723 17.6 15.4043 17.3655C14.4513 16.6643 13.2741 16.25 12.0002 16.25C10.7262 16.25 9.54901 16.6643 8.59597 17.3655C8.27728 17.6 7.83919 17.6435 7.53463 17.3909C7.17828 17.0954 7.18836 16.5572 7.55383 16.2731C8.78161 15.3185 10.3245 14.75 12.0002 14.75C13.6758 14.75 15.2187 15.3185 16.4465 16.2731Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5Z" fill="black"/>
 </svg>
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6.26471C3 5.84237 3.33579 5.5 3.75 5.5H10.5C10.9142 5.5 11.25 5.84237 11.25 6.26471C11.25 6.68704 10.9142 7.02941 10.5 7.02941H3.75C3.33579 7.02941 3 6.68704 3 6.26471Z" fill="black"/>
+<path d="M13 6.26471C13 5.84237 13.3358 5.5 13.75 5.5H20.25C20.6642 5.5 21 5.84237 21 6.26471C21 6.68704 20.6642 7.02941 20.25 7.02941H13.75C13.3358 7.02941 13 6.68704 13 6.26471Z" fill="black"/>
+<path d="M16 10.0882C16 9.6659 16.3358 9.32353 16.75 9.32353H20.25C20.6642 9.32353 21 9.6659 21 10.0882C21 10.5106 20.6642 10.8529 20.25 10.8529H16.75C16.3358 10.8529 16 10.5106 16 10.0882Z" fill="black"/>
+<path d="M8 13.9118C8 13.4894 7.66421 13.1471 7.25 13.1471H3.75C3.33579 13.1471 3 13.4894 3 13.9118C3 14.3341 3.33579 14.6765 3.75 14.6765H7.25C7.66421 14.6765 8 14.3341 8 13.9118Z" fill="black"/>
+<path d="M3 10.0882C3 9.6659 3.33579 9.32353 3.75 9.32353H13.5C13.9142 9.32353 14.25 9.6659 14.25 10.0882C14.25 10.5106 13.9142 10.8529 13.5 10.8529H3.75C3.33579 10.8529 3 10.5106 3 10.0882Z" fill="black"/>
+<path d="M21 13.9118C21 13.4894 20.6642 13.1471 20.25 13.1471H10.5C10.0858 13.1471 9.75 13.4894 9.75 13.9118C9.75 14.3341 10.0858 14.6765 10.5 14.6765H20.25C20.6642 14.6765 21 14.3341 21 13.9118Z" fill="black"/>
+<path d="M3 17.7353C3 17.313 3.33579 16.9706 3.75 16.9706H10.5C10.9142 16.9706 11.25 17.313 11.25 17.7353C11.25 18.1576 10.9142 18.5 10.5 18.5H3.75C3.33579 18.5 3 18.1576 3 17.7353Z" fill="black"/>
+<path d="M13 17.7353C13 17.313 13.3358 16.9706 13.75 16.9706H20.25C20.6642 16.9706 21 17.313 21 17.7353C21 18.1576 20.6642 18.5 20.25 18.5H13.75C13.3358 18.5 13 18.1576 13 17.7353Z" fill="black"/>
+</svg>
@@ -0,0 +1,6 @@
+<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.45117 12.354C7.45117 9.59258 9.68975 7.354 12.4512 7.354H68.5677C71.3291 7.354 73.5677 9.59258 73.5677 12.354V68.3888C73.5677 71.1502 71.3291 73.3888 68.5677 73.3888H12.4512C9.68975 73.3888 7.45117 71.1502 7.45117 68.3888V12.354Z" fill="#4360DF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.5094 7.35449C22.2517 7.35396 7.45117 22.1359 7.45117 40.3714C7.45117 58.6068 22.2517 73.3888 40.5094 73.3888C58.7672 73.3888 73.5677 58.6062 73.5677 40.3714C73.5677 22.1365 58.7672 7.35449 40.5094 7.35449Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46.0856 40.0664C42.1234 40.2945 39.6403 39.3727 35.6776 39.6012C34.6948 39.6564 33.7187 39.7986 32.761 40.0264C33.3459 32.7072 38.5323 26.3046 45.5849 25.8976C49.9129 25.6482 54.2387 28.317 54.4733 32.6495C54.7042 36.9078 51.4533 39.7567 46.0861 40.0659L46.0856 40.0664ZM35.4456 55.0375C31.2995 55.2714 27.156 52.773 26.931 48.7187C26.7097 44.7333 29.8247 42.0671 34.9663 41.7777C38.7616 41.564 41.1407 42.4271 44.936 42.2129C45.8771 42.1614 46.8119 42.0283 47.73 41.8151C47.1707 48.6647 42.2023 54.6572 35.4456 55.0375ZM40.5094 7.35454C22.2517 7.354 7.45117 22.136 7.45117 40.3714C7.45117 58.6068 22.2517 73.3888 40.5094 73.3888C58.7672 73.3888 73.5677 58.6063 73.5677 40.3714C73.5677 22.1365 58.7672 7.354 40.5094 7.354" fill="#4360DF"/>
+<path d="M12.4512 14.354H68.5677V0.354004H12.4512V14.354ZM66.5677 12.354V68.3888H80.5677V12.354H66.5677ZM68.5677 66.3888H12.4512V80.3888H68.5677V66.3888ZM14.4512 68.3888V12.354H0.451172V68.3888H14.4512ZM12.4512 66.3888C13.5557 66.3888 14.4512 67.2842 14.4512 68.3888H0.451172C0.451172 75.0162 5.82376 80.3888 12.4512 80.3888V66.3888ZM66.5677 68.3888C66.5677 67.2842 67.4631 66.3888 68.5677 66.3888V80.3888C75.1951 80.3888 80.5677 75.0162 80.5677 68.3888H66.5677ZM68.5677 14.354C67.4631 14.354 66.5677 13.4586 66.5677 12.354H80.5677C80.5677 5.72658 75.1951 0.354004 68.5677 0.354004V14.354ZM12.4512 0.354004C5.82376 0.354004 0.451172 5.72658 0.451172 12.354H14.4512C14.4512 13.4586 13.5557 14.354 12.4512 14.354V0.354004Z" fill="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.70801 5L10 9.29199L9.29199 10L5 5.70801L0.708008 10L0 9.29199L4.29199 5L0 0.708008L0.708008 0L5 4.29199L9.29199 0L10 0.708008L5.70801 5Z" fill="black"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.2002 0V10H0.200195V0H10.2002ZM9.19922 1.00098H1.20117V8.99902H9.19922V1.00098Z" fill="black"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="10" height="1" viewBox="0 0 10 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 -0.000976562V1H0V-0.000976562H10Z" fill="black"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.34942 7.92611C8.39058 7.98137 7.78968 7.75801 6.83071 7.81339C6.59287 7.82675 6.35668 7.86122 6.1249 7.9164C6.26645 6.143 7.52155 4.59165 9.22826 4.49304C10.2756 4.43261 11.3225 5.07926 11.3792 6.12902C11.4351 7.16079 10.6484 7.85105 9.34955 7.92598L9.34942 7.92611ZM6.77458 11.5535C5.77123 11.6102 4.76852 11.0049 4.71406 10.0225C4.66052 9.05687 5.41432 8.41087 6.65858 8.34073C7.57703 8.28897 8.15277 8.49809 9.07123 8.4462C9.29896 8.43371 9.52518 8.40146 9.74735 8.34979C9.612 10.0094 8.40968 11.4614 6.77458 11.5535ZM8 0.000129406C3.58168 -1.67222e-09 0 3.58162 0 8C0 12.4184 3.58168 16 8 16C12.4183 16 16 12.4182 16 8C16 3.58175 12.4183 0 8 0" fill="#4360DF"/>
+</svg>
@@ -243,6 +243,7 @@
        <file>src/assets/img/icons/add-contact.svg</file>
        <file>src/assets/img/icons/add-circle.svg</file>
        <file>src/assets/img/icons/activity.svg</file>
+        <file>src/assets/img/icons/seed-phrase.svg</file>
        <file>src/StatusQ/Components/StatusChatListCategoryItem.qml</file>
        <file>src/StatusQ/Components/StatusChatListCategory.qml</file>
        <file>src/StatusQ/Controls/StatusBaseInput.qml</file>
@@ -257,5 +258,15 @@
        <file>src/StatusQ/Components/StatusListItemBadge.qml</file>
        <file>src/StatusQ/Popups/StatusSearchPopupMenuItem.qml</file>
        <file>src/StatusQ/Popups/StatusSearchLocationMenu.qml</file>
+        <file>src/StatusQ/Core/StatusTooltipSettings.qml</file>
+        <file>src/StatusQ/Platform/StatusWindowsTitleBar.qml</file>
+        <file>src/assets/img/icons/windows_titlebar/close.svg</file>
+        <file>src/assets/img/icons/windows_titlebar/maximize.svg</file>
+        <file>src/assets/img/icons/windows_titlebar/minimise.svg</file>
+        <file>src/assets/img/icons/windows_titlebar/status.svg</file>
+        <file>src/StatusQ/Controls/StatusSwitchTabButton.qml</file>
+        <file>src/StatusQ/Controls/StatusSwitchTabBar.qml</file>
+        <file>src/StatusQ/Components/StatusExpandableItem.qml</file>
+        <file>src/assets/img/icons/snt.svg</file>
    </qresource>
 </RCC>
Author	SHA1	Message	Date
Pascal Precht	fe67997696	feat(StatusInput): add support for asynchronous validators This adds support for asynchronous validators which are also just `StatusValidator`. There are a few differences to syncronous validators though: 1. `validate` function doesn't return, it's only used to trigger the async validation. Ideally it would return an async object like Promise or Observable but since we have to rely on QML `Connections`, this won't work. 2. As mentioned, `Connections` are needed to listen to async events so the validation can be resolved. 3. Validation has to be resolved by calling `input.updateValidity` inside the validator. That API notifies `StatusInput` that validation is has been performed and expects the name of the validator as well as either a boolean (true), if validation was successful, or, if validation has failed, a boolean (false) or an error object. Here's a `StatusENSValidator` as an example: ```qml StatusValidator { id: root name: "ensValidator" errorMessage: "Couldn't resolve ENS name." readonly property string uuid: Utils.uuid() property int debounceTime: 600 signal ensResolved(string address) validate: Backpressure.debounce(root, root.debounceTime, function (name) { name = name.startsWith("@") ? name.substring(1) : name walletModel.ensView.resolveENS(name, uuid) }) Connections { target: walletModel.ensView onEnsWasResolved: { if (uuid !== root.uuid) { return } root.ensResolved(resolvedAddress) input.updateValidityAndPendingState(root.name, resolvedAddress !== "") } } } ``` Closes #395	2021-09-16 15:58:00 +10:00
Pascal Precht	899f4461bb	feat(StatusInput): introduce `leftPadding` and `rightPadding` properties	2021-09-16 15:58:00 +10:00
Pascal Precht	4b9d11d1d4	feat(StatusInput): introduce `reset` API This can be used to reset text, error message and validity state of inputs	2021-09-16 15:58:00 +10:00
Alexandra Betouni	6e8a36be86	fix(StatusChatInfoToolBar): Right anchored title in StatusChatInfoToolBar So that elide mode in text can be activated	2021-09-15 11:39:09 +02:00
B.Melnik	c65f80d22e	feat(Spellchecker): Add Spellchecker class Closes: #399	2021-09-14 14:34:25 +02:00
B.Melnik	f9457ef311	feat(Spellchecking): Add huspell dependency Closes: #397	2021-09-14 14:33:53 +02:00
Pascal Precht	1374c1933f	fix(StatusQ.Controls.Validators): fix bug that addressOrEns validator isn't properly exposed in QML	2021-09-14 14:33:34 +02:00
Khushboo Mehta	1f244f6282	feat(StatusExpandableItem): Correct placement of expandable region in tertiary type	2021-09-14 14:18:59 +02:00
Pascal Precht	80e5b338fd	chore: cut 0.9.0 release	2021-09-13 10:59:02 +02:00
Pascal Precht	019471c804	feat(StatusBaseInput): introduce `component` property This property enables users to load any component into the input field. This is useful for rendering a "clearable" icon button, simple icons or even more complex buttons. Usage: ```qml StatusBaseInput { ... component: StatusIcon { name: "cancel" color: Theme.palette.dangerColor1 width: 16 } } ``` The `clearable` property of `StatusBaseInput` also renders and icon button on the right hand side. With this new feature, `clearable` is just a short-hand for: ```qml StatusBaseInput { ... component: StatusFlatRoundButton { visible: edit.text.length != 0 && statusBaseInput.clearable && !statusBaseInput.multiline && edit.activeFocus type: StatusFlatRoundButton.Type.Secondary width: 24 height: 24 icon.name: "clear" icon.width: 16 icon.height: 16 icon.color: Theme.palette.baseColor1 onClicked: { edit.clear() } } } ``` Closes #380	2021-09-13 09:56:24 +02:00
Pascal Precht	88fb57dd3b	fix(StatusCheckbox): give checkbox label proper theme color	2021-09-13 09:55:54 +02:00
Pascal Precht	a93ef16143	feat(StatusQ.Controls.Validators): introduce `StatusAddressAndEnsValidator`	2021-09-13 09:55:09 +02:00
Pascal Precht	77d0e9b8fd	feat(StatusQ.Controls.Validators): introduce `StatusAddressValidator`	2021-09-13 09:55:09 +02:00
Pascal Precht	d73a158418	feat(StatusInput): introduce `ValidationMode` This allows users to configure how validation is run. There are two modes: 1. `ValidationMode.OnlyWhenDirty` 2. `ValidationMode.Always` By default, validation happens when the inputs value changes, or on initial `Component.onCompleted` event. The first mode allows for not performing validation when the input field is blank and validation. isn't necessary (yet).	2021-09-13 09:55:09 +02:00
Pascal Precht	1a23cc1912	feat(StatusValidator): allow validators to provide default `errorMessage` Validators can now define a default `errorMessage` like so: ```qml StatusValidator { ... errorMessage: "..." } ``` Because there's no access to runtime validation errors, `errorMessage` have to be static. However, if applications wish to provide their own `errorMessage` they can still override it and make it dynamic: ```qml SomeValidator { ... errorMessage: input.errors.someValidator ? "Whoopsie" : "" } ```	2021-09-13 09:55:09 +02:00
Pascal Precht	48309d3040	Revert "chore: replace profile icon (#312 )" This reverts commit `aab59763e5`.	2021-09-09 11:37:45 +02:00
Khushboo Mehta	718171fd7b	feat(StatusExpandableItem): Refactored the StatusExpandableSettingsItem to support different types Renamed StatusExpandableSettingsItem to StatusExpandableItem. Added support for dofferent types of styles for the item. Type Primary: Relates to Settings Design Type Secondary: Relates to Collectibles Design Type Tertiary: Relates to the Collectibles detailed view design BREAKING CHANGE: Renamed and expanded features of the StatusExpandableSettingsItem to StatusExpandableItem	2021-09-08 13:37:03 +02:00
Pascal Precht	efe3116610	feat(StatusSearchPopup): introduce forceActiveFocus API This is used to enforce focus on the search input when the popup is opened. In fact users decide to override the search popup's `onOpened` handler, they still get access to this API to make use of it.	2021-09-08 12:36:31 +02:00
Pascal Precht	aab44c1e0d	feat(Status.Core.Theme): add RobotoMono font Closes #342	2021-09-08 11:28:07 +02:00
Pascal Precht	eabc62f796	fix(StatusModal): don't reserve header subtitle space Closes #378	2021-09-08 11:21:18 +02:00
Pascal Precht	2971c60737	fix(StatusChatListAndCategories): rely on correct tooltip settings prop Category tooltip settings were broken in this component due to a mismatching property name. This commit fixes it.	2021-09-08 11:19:54 +02:00
B.Melnik	29e9557d5f	fix(StatusAppThreePanelLayout): Fix margin between left and center panels This margin shows because of `handle` width incuded in `SplitView` width. Handle have `Component` type and can't accessable for getting sizes. I add `magic constant` as hotfix. Closes: #307	2021-09-08 11:19:36 +02:00
B.Melnik	89f54a85c8	refactor(StatusPopupMenu): Refactor bug with reopen menu	2021-09-08 11:18:16 +02:00
Alexandra Betouni	73c77c29c2	feat(StatusInput): exposed edit component We need to be able to call forceActiveFocus, so TextEdit component should be somehow accessible Relates to desktop #3310	2021-09-06 16:51:47 +02:00
Pascal Precht	62e93ecffb	chore: release v0.8.0	2021-09-06 14:54:58 +02:00
Pascal Precht	ddfca7a8fa	feat(StatusBaseInput): introduce focussed property We can't alias the property as `focus` because this is a final readonly property, so we're introducing a `focussed` property instead. Closes #373	2021-09-06 14:53:15 +02:00
B.Melnik	3187de5449	fix(StatusModal): Remove self-calculating height Based on Qt docs `contentItem` must have `implicit` sizes. link to rules: https://doc.qt.io/qt-5/qml-qtquick-controls2-popup.html#popup-sizing	2021-09-06 14:51:23 +02:00
Alexandra Betouni	d648230d79	feat(StatusInput): Introduced secondaryLabel property Due to design updates in AddAccount modal, updates are needed in StatusBaseInput and StatusInput * Added the possibility of having the icon on the right side * Added secondaryLabel for title * Added examples in StatusInputPage Closes #383	2021-09-06 14:50:51 +02:00
Khushboo Mehta	38fb8f61a5	feat(qrc): Add new icon needed for share modal	2021-09-06 11:01:13 +02:00
Khushboo Mehta	8a94fb5412	feat(StatusModal): Add popup menu support for StatusModal Added logic to support a popup menu to be launched from the StatusModal header. Added an example in sandbox to demonstrate its usage. fixes #374	2021-09-06 11:01:13 +02:00
B.Melnik	061c7d1c90	fix(StatusInput): Forward keys events to root Closes: #372	2021-09-03 12:33:58 +02:00
Khushboo Mehta	f3ab4ce9c9	feat(StatusExpandableSettingsItem): Added new component for wallet settings Also added a page in the sandbox to demonstrate its usage.	2021-09-03 10:55:27 +02:00
Pascal Precht	d449f0e903	feat(StatusQ.Controls): introduce StatusSwitchTabBar and StatusSwitchTabButton This commit adds two new components to the StatusQ.Controls module: - StatusSwitchTabBar - StatusSwitchTabButton Usage: ```qml StatusSwitchTabBar { StatusSwitchTabButton { text: "Tab 1" } StatusSwitchTabButton { text: "Tab 2" } StatusSwitchTabButton { text: "Tab 3" } } ``` Closes #365	2021-09-03 10:45:45 +02:00
B.Melnik	4a6800ed77	refactor(StatusModal): Remove custom content property BREAKING CHANGES: - `content` property removed - `Loader` inside StatusModal removed - default `contentItem` property should be used now Closes: #306	2021-09-02 11:06:32 +02:00
B.Melnik	d64aa6deed	fix(StatusBaseInput): fix one line scroll Closes: #291	2021-09-01 12:51:06 +02:00
B.Melnik	64098e84d3	feat(StatusChatListAndCategories): Add tooltip settings for categories buttons Closes: #226	2021-09-01 12:43:47 +02:00
Pascal Precht	b45aba4be8	feat(StatusSearchPopup): add function hook to allow timestamp formatting This introduces a new API to allow users to provide a function that formats timestamps in the search results. ```qml StatusSearchPopup { formatTimestampFn: function (ts) { return // formatted ts } } ``` Closes #363	2021-08-31 14:06:35 +02:00
Pascal Precht	0a4d3860ea	feat: introduce bigger versions of navbar icons Turns out the icons used in the navigation bar of the application actually are designed to be bigger than the usual icons. We can't just use the original source and scale them up in QML because that will impact the stroke width of the SVGs as well, hence we need to introduce a special set of icons that are design bigger but presever the feature ratios.	2021-08-31 13:48:28 +02:00
B.Melnik	387bfe77c0	fix(StatusBaseInput): Make clear button bigger Closes: #294	2021-08-31 13:47:31 +02:00
Pascal Precht	1749cc0e3b	feat(StatusDescriptionListItem): expose subtitle component for fine control This enables users to get more control over the subtitle to set things like `elide` and font properties. Closes: #356	2021-08-31 11:27:43 +02:00
Pascal Precht	a963ef80c8	feat(StatusDescriptionListItem): introduce support for `value` This adds a new `value` property to the component to set label for a selected value and also rendering a chevron as an indicator that the list item becomes clickable.	2021-08-31 11:27:43 +02:00
B.Melnik	fbecac4ac3	fix(StatusChatToolBar): Fix mouse event catching after menu closing Closes: #350	2021-08-31 11:26:52 +02:00
Sale Djenic	9b3275f327	refactor(StatusSearchPopup): change expected search model shape This changes the share of the model expected to render search results. BREAKING CHANGE: The model has changed in the following way: - `image` field added - `color` field added - `badgeIdenticonColor` field renamed to `badgeIconColor` - `isLetterIdenticon` field renamed to `badgeIsLetterIdenticon`	2021-08-31 11:23:23 +02:00
Pascal Precht	28e514f927	feat(StatusModal): add ability to set elide config of header titles There are now two new properties in `StatusModalHeaderSettings`: - `titleElide` - `subTitleElide` These can be used to configure the `elide` property of both header titles. The default values for both of them is `Text.ElideRight`. Closes #353	2021-08-31 10:59:56 +02:00
B.Melnik	5c706fdc80	fix(StatusListItem): Add propogateCompostedEvents to title mouse area Closes: #346	2021-08-30 13:45:14 +02:00
Pascal Precht	450e863d44	chore: cut v0.7.0 release	2021-08-30 09:47:01 +02:00
B.Melnik	faca4765f4	feat(StatusWindowsTitleBar): Add windows title bar Closes: #200	2021-08-30 09:42:01 +02:00
Pascal Precht	503a07bf5a	fix(StatusModal): ensure header and subtitles elide if needed Closes #256	2021-08-27 23:08:09 +02:00
B.Melnik	f9775e4de3	feat(StatusChatListCategoryItem): Add tooltips settings Usage: ```qml StatusChatListCategoryItem { addButton.tootlip.text: "Some add lazy text" menuButton.tooltip.text: "My menu" } ```	2021-08-27 13:42:22 +02:00
B.Melnik	7ef61ed3f8	fix(StatusChatInfoButton): Add self-calculated implicitWIdth and elide to texts This commit add elide flags to text in title and subtitle and add flexibility to width. Now compoents use next rules: 1. If width is set - text should be elided when implicit text width is more than root object width 2. Component grows if width is not set based on inner elements natural sizes Closes: #335 and #338	2021-08-27 13:39:36 +02:00