fix(@desktop/chat) Acitvity tooltip arrow should be in center when members list is shown

fixes #3102
fix(StatusPopupMenu): ensure icon or image settings exist
2021-08-11 18:49:13 +02:00 · 2021-08-10 15:12:28 +02:00 · 2021-08-06 12:47:57 -04:00 · 2021-08-06 12:47:52 -04:00 · 2021-08-05 09:59:39 +02:00 · 2021-08-03 09:48:53 +02:00
24 changed files with 585 additions and 321 deletions
@@ -1,3 +1,38 @@
+<a name=""></a>
+## v0.3.0 (2021-07-27)
+
+
+#### Features
+
+* **Controls:**  introduce `StatusInput` ([646c00bd](646c00bd), closes [#288](288))
+* **Popups:**  introduce `StatusMenuHeadline` component ([246bec0d](246bec0d))
+* **StatusBaseInput:**
+  *  add icon support ([c8e90349](c8e90349), closes [#242](242))
+  *  add visual validity state ([e8cce72c](e8cce72c), closes [#287](287))
+  *  add hover state visuals ([e1ebdaae](e1ebdaae), closes [#285](285))
+* **StatusInput:**  implement error message and charlimit APIs ([3cf53d02](3cf53d02), closes [#290](290))
+* **StatusPopupMenu:**  add support for letter identicons, identicons and images ([3c4c7f04](3c4c7f04), closes [#263](263))
+* **StatusQ.Layout:**  introducing StatusAppThreePanelLayout ([ffc6fcb4](ffc6fcb4), closes [#272](272))
+* **sandbox:**  make use of `StatusInput` in chat view ([731a0f8c](731a0f8c))
+
+#### Bug Fixes
+
+* **StatusAppThreePanelLayout:**
+  *  limit right panel width to 300px ([d327c515](d327c515))
+  *  limit center panel width to 300px ([762ff87b](762ff87b))
+  *  hide right panel when closed ([61705990](61705990))
+* **StatusBaseInput:**
+  *  some minor style adjustment to adhere to design ([f16e857c](f16e857c))
+  *  ensure input text is selectable with mouse ([ab303593](ab303593))
+  *  ensure clear button has the correct color ([de1cec7e](de1cec7e), closes [#286](286))
+  *  add visuals for disabled state ([35f20e33](35f20e33), closes [#284](284))
+  *  expose text prop alias ([116ddfbb](116ddfbb))
+* **StatusChatInfoButton:**  ensure pin icon button is always rendered ([baefedb8](baefedb8), closes [#278](278))
+* **StatusListItem:**  ensure title area wraps text ([e3f79314](e3f79314))
+* **StatusModal:**  reset image/identicon width when loader state has changed ([e4e7ebe3](e4e7ebe3))
+
+
+
 <a name=""></a>
 ## v0.2.0 (2021-07-21)

@@ -8,7 +8,7 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1

 GridLayout {
-    columns: 6
+    columns: 1
    columnSpacing: 5
    rowSpacing: 5

@@ -143,32 +143,4 @@ GridLayout {
        to: 100
        value: 40
    }
-
-    StatusBaseInput {
-        placeholderText: "One line"
-    }
-
-    StatusBaseInput {
-        multiline: true
-        placeholderText: "Multiline"
-    }
-
-    StatusBaseInput {
-        multiline: true
-        placeholderText: "Multiline with static height"
-        implicitHeight: 100
-    }
-
-    Item {
-        implicitHeight: 300
-        implicitWidth: 300
-
-        StatusBaseInput {
-            anchors.centerIn: parent
-            multiline: true
-            placeholderText: "Multiline with max/min"
-            minimumHeight: 80
-            maximumHeight: 200
-        }
-    }
 }
@@ -11,7 +11,7 @@ import StatusQ.Popups 0.1
 Rectangle {
    id: demoApp
    height: 602
-    width: 902
+    width: 1002
    border.width: 1
    border.color: Theme.palette.baseColor2

@@ -172,10 +172,121 @@ Rectangle {
                    text: "Chat"
                }

-                Column {
+                Item {
+                    id: searchInputWrapper
                    anchors.top: headline.bottom
                    anchors.topMargin: 16
                    width: parent.width
+                    height: searchInput.height
+
+                    StatusBaseInput {
+                        id: searchInput
+
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.left: parent.left
+                        anchors.right: actionButton.left
+                        anchors.leftMargin: 16
+                        anchors.rightMargin: 16
+
+                        height: 36
+                        topPadding: 8
+                        bottomPadding: 0
+                        placeholderText: "Search"
+                        icon.name: "search"
+                    }
+
+                    StatusRoundButton {
+                        id: actionButton
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.right: parent.right
+                        anchors.rightMargin: 8
+                        width: 32
+                        height: 32
+
+                        type: StatusRoundButton.Type.Secondary
+                        icon.name: "add"
+                        state: "default"
+
+                        onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4)
+                        states: [
+                            State {
+                                name: "default"
+                                PropertyChanges {
+                                    target: actionButton
+                                    icon.rotation: 0
+                                    highlighted: false
+                                }
+                            },
+                            State {
+                                name: "pressed"
+                                PropertyChanges {
+                                    target: actionButton
+                                    icon.rotation: 45
+                                    highlighted: true
+                                }
+                            }
+                        ]
+
+                        transitions: [
+                            Transition {
+                                from: "default"
+                                to: "pressed"
+
+                                RotationAnimation {
+                                    duration: 150
+                                    direction: RotationAnimation.Clockwise
+                                    easing.type: Easing.InCubic
+                                }
+                            },
+                            Transition {
+                                from: "pressed"
+                                to: "default"
+                                RotationAnimation {
+                                    duration: 150
+                                    direction: RotationAnimation.Counterclockwise
+                                    easing.type: Easing.OutCubic
+                                }
+                            }
+                        ]
+
+                        StatusPopupMenu {
+                            id: chatContextMenu
+
+                            onOpened: {
+                                actionButton.state = "pressed"
+                            }
+
+                            onClosed: {
+                                actionButton.state = "default"
+                            }
+
+                            StatusMenuItem {
+                                text: "Start new chat"
+                                icon.name: "private-chat"
+                            }
+
+                            StatusMenuItem {
+                                text: "Start group chat"
+                                icon.name: "group-chat"
+                            }
+
+                            StatusMenuItem {
+                                text: "Join public chat"
+                                icon.name: "public-chat"
+                            }
+
+                            StatusMenuItem {
+                                text: "Communities"
+                                icon.name: "communities"
+                            }
+                        }
+                    }
+                }
+
+                Column {
+                    anchors.top: searchInputWrapper.bottom
+                    anchors.topMargin: 16
+                    width: parent.width
                    spacing: 8

                    StatusContactRequestsIndicatorListItem {
@@ -297,6 +408,12 @@ Rectangle {

        StatusAppThreePanelLayout {
            id: root
+
+            handle: Rectangle {
+                implicitWidth: 5
+                color: SplitHandle.pressed ? Theme.palette.baseColor2
+                    : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
+            }
            leftPanel: Item {
                id: leftPanel

@@ -456,12 +573,15 @@ Rectangle {
            }

            rightPanel: Item {
+                id: rightPanel
                StatusBaseText {
                    id: titleText
                    anchors.top: parent.top
                    anchors.topMargin:16
                    anchors.left: parent.left
                    anchors.leftMargin: 16
+                    opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+                    visible: (opacity > 0.1)
                    font.pixelSize: 15
                    text: qsTr("Members")
                }
@@ -490,7 +610,10 @@ Rectangle {
                        StatusBaseText {
                            height: parent.height
                            horizontalAlignment: Text.AlignHCenter
+                            opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+                            visible: (opacity > 0.1)
                            font.pixelSize: 15
+                            color: Theme.palette.directColor1
                            text: modelData
                        }
                    }
@@ -0,0 +1,86 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusInput {
+        input.placeholderText: "Placeholder"
+    }
+
+    StatusInput {
+        label: "Label"
+        input.placeholderText: "Disabled"
+        input.enabled: false
+    }
+
+    StatusInput {
+        input.placeholderText: "Clearable"
+        input.clearable: true
+    }
+
+    StatusInput {
+        input.placeholderText: "Invalid"
+        input.valid: false
+    }
+
+    StatusInput {
+        label: "Label"
+
+        input.icon.name: "search"
+        input.placeholderText: "Input with icon"
+    }
+
+    StatusInput {
+        label: "Label"
+        input.placeholderText: "Placeholder"
+        input.clearable: true
+    }
+
+    StatusInput {
+        charLimit: 30
+        input.placeholderText: "Placeholder"
+        input.clearable: true
+    }
+
+    StatusInput {
+        label: "Label"
+        charLimit: 30
+        input.placeholderText: "Placeholder"
+        input.clearable: true
+    }
+
+    StatusInput {
+        label: "Label"
+        charLimit: 30
+        errorMessage: "Error message"
+
+        input.clearable: true
+        input.valid: false
+        input.placeholderText: "Placeholder"
+    }
+
+    StatusInput {
+        input.multiline: true
+        input.placeholderText: "Multiline"
+    }
+
+    StatusInput {
+        input.multiline: true
+        input.placeholderText: "Multiline with static height"
+        input.implicitHeight: 100
+    }
+
+    StatusInput {
+        input.multiline: true
+        input.placeholderText: "Multiline with max/min"
+        input.minimumHeight: 80
+        input.maximumHeight: 200
+    }
+}
@@ -15,7 +15,7 @@ import StatusQ.Platform 0.1
 StatusWindow {
    id: rootWindow
    width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
-                                                                  :  1024
+                                                                  :  1224
    height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
                                                                   :840
    visible: true
@@ -143,6 +143,11 @@ StatusWindow {
                            selected: page.sourceComponent == controlsComponent
                            onClicked: page.sourceComponent = controlsComponent
                        }
+                        StatusNavigationListItem { 
+                            title: "StatusInput" 
+                            selected: page.sourceComponent == statusInputPageComponent
+                            onClicked: page.sourceComponent = statusInputPageComponent
+                        }
                        StatusListSectionHeadline { text: "StatusQ.Components" }
                        StatusNavigationListItem { 
                            title: "List Items"
@@ -236,6 +241,11 @@ StatusWindow {
        Controls {}
    }

+    Component {
+        id: statusInputPageComponent
+        StatusInputPage {}
+    }
+
    Component {
        id: listItemsComponent
        ListItems {}
@@ -9,6 +9,7 @@
        <file>ListItems.qml</file>
        <file>StatusChatInfoToolBarPage.qml</file>
        <file>StatusPopupMenuPage.qml</file>
+        <file>StatusInputPage.qml</file>
        <file>ThemeSwitch.qml</file>
        <file>Layout.qml</file>
        <file>Popups.qml</file>
@@ -1,5 +1,4 @@
 import QtQuick 2.13
-import QtQml.Models 2.14

 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -14,7 +13,7 @@ Column {

    property string categoryId: ""
    property string selectedChatId: ""
-    property alias chatListItems: delegateModel
+    property alias chatListItems: statusChatListItems

    property Component popupMenu

@@ -25,17 +24,14 @@ Column {
    signal chatItemSelected(string id)
    signal chatItemUnmuted(string id)

-    signal reorder(string cid, int from, int to)
-
    onPopupMenuChanged: {
        if (!!popupMenu) {
            popupMenuSlot.sourceComponent = popupMenu
        }
    }

-    DelegateModel {
-        id: delegateModel
-
+    Repeater {
+        id: statusChatListItems
        delegate: StatusChatListItem {

            id: statusChatListItem
@@ -47,7 +43,7 @@ Column {
                    profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
                }
            }
-            originalOrder: model.position
+
            chatId: model.chatId || model.id
            name: !!statusChatList.chatNameFn ? statusChatList.chatNameFn(model) : model.name
            type: model.chatType
@@ -62,13 +58,6 @@ Column {
            icon.color: model.color || ""
            image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
            image.source: profileImage || model.identityImage || model.identicon || ""
-            onVisualReorder: {
-                delegateModel.items.move(from, to)
-            }
-
-            onReorder: {
-                statusChatList.reorder(chatId, from, to)
-            }

            onClicked: {
                if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) {
@@ -96,7 +85,9 @@ Column {
                    popupMenuSlot.item.openHandler = originalOpenHandler
                    return
                }
-                statusChatList.chatItemSelected(model.chatId || model.id)
+                if (!statusChatListItem.selected) {
+                    statusChatList.chatItemSelected(model.chatId || model.id)
+                }
            }
            onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
            visible: {
@@ -106,11 +97,6 @@ Column {
                return true
            }
        }
-
-    }
-    Repeater {
-        id: statusChatListItems
-        model: delegateModel
    }

    Loader {
@@ -24,7 +24,6 @@ Item {
    signal chatItemSelected(string id)
    signal chatItemUnmuted(string id)
    signal categoryAddButtonClicked(string id)
-    signal reorderChat(string categoryId, string chatId, int from, int to)

    onPopupMenuChanged: {
        if (!!popupMenu) {
@@ -55,7 +54,7 @@ Item {
            StatusChatList {
                id: statusChatList
                anchors.horizontalCenter: parent.horizontalCenter
-                visible: chatListItems.count > 0
+                visible: !!chatListItems.model && chatListItems.count > 0
                selectedChatId: statusChatListAndCategories.selectedChatId
                onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
                onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
@@ -63,10 +62,6 @@ Item {
                    return !!!model.categoryId
                }
                popupMenu: statusChatListAndCategories.chatListPopupMenu
-
-                onReorder: function (cid, from, to) {
-                    statusChatListAndCategories.reorderChat(categoryId, cid, from, to)
-                }
            }

            Repeater {
@@ -86,9 +81,6 @@ Item {

                    popupMenu: statusChatListAndCategories.categoryPopupMenu
                    chatListPopupMenu: statusChatListAndCategories.chatListPopupMenu
-                    onReorderChat: function (categoryId, chatId, from, to) {
-                        statusChatListAndCategories.reorderChat(categoryId, chatId, from, to)
-                    }
                }
            }
        }
@@ -21,8 +21,6 @@ Column {
    property Component chatListPopupMenu
    property Component popupMenu

-    signal reorderChat(string categoryId, string chatId, int from, int to)
-
    onPopupMenuChanged: {
        if (!!popupMenu) {
            popupMenuSlot.sourceComponent = popupMenu
@@ -64,10 +62,6 @@ Column {
        }

        popupMenu: statusChatListCategory.chatListPopupMenu
-
-        onReorder: function (cid, from, to){
-            statusChatListCategory.reorderChat(categoryId, cid, from, to)
-        }
    }

    Loader {
@@ -1,8 +1,4 @@
 import QtQuick 2.13
-import QtQml.Models 2.13
-import QtQuick.Controls 2.13 as QC
-import QtGraphicalEffects 1.13
-
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
@@ -11,8 +7,6 @@ import StatusQ.Controls 0.1
 Rectangle {
    id: statusChatListItem

-    objectName: "chatItem"
-    property int originalOrder: -1
    property string chatId: ""
    property string name: ""
    property alias badge: statusBadge
@@ -30,9 +24,6 @@ Rectangle {
    signal clicked(var mouse)
    signal unmute()

-    signal visualReorder(int from, int to, int order)
-    signal reorder(int from, int to)
-
    enum Type {
        Unknown0, // 0
        OneToOneChat, // 1
@@ -55,40 +46,14 @@ Rectangle {
        return sensor.containsMouse || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
    }

-    opacity: sensor.held ? 0.0 : 1.0
-
-    Behavior on y { NumberAnimation { duration: 350 }}
-
    MouseArea {
        id: sensor

        anchors.fill: parent
-        cursorShape: Qt.PointingHandCursor
+        cursorShape: Qt.PointingHandCursor 
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        hoverEnabled: true

-        property bool held: false
-
-        drag.target: content.item
-
-        property real startY: 0
-        onMouseYChanged: {
-            if ( (Math.abs(startY - mouseY) > 5 ) && pressed) {
-                held = true
-            }
-        }
-        onPressed: startY = mouseY
-        onPressAndHold: {
-            held = true
-        }
-
-        onReleased: {
-            if (held) {
-                reorder(statusChatListItem.originalOrder, statusChatListItem.originalOrder)
-            }
-            held = false
-        }
-
        onClicked: statusChatListItem.clicked(mouse)

        Loader {
@@ -98,7 +63,7 @@ Rectangle {
            anchors.verticalCenter: parent.verticalCenter

            sourceComponent: !!statusChatListItem.image.source.toString() ?
-                                 statusRoundedImageCmp : statusLetterIdenticonCmp
+                statusRoundedImageCmp : statusLetterIdenticonCmp
        }

        Component {
@@ -124,8 +89,8 @@ Rectangle {
                    image.source: statusChatListItem.image.source
                    showLoadingIndicator: true
                    color: statusChatListItem.image.isIdenticon ?
-                               Theme.palette.statusRoundedImage.backgroundColor :
-                               "transparent"
+                        Theme.palette.statusRoundedImage.backgroundColor :
+                        "transparent"
                    border.width: statusChatListItem.image.isIdenticon ? 1 : 0
                    border.color: Theme.palette.directColor7
                }
@@ -149,27 +114,27 @@ Rectangle {
                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
                    return 0.4
                }
-                return statusChatListItem.hasMention ||
-                        statusChatListItem.hasUnreadMessages ||
-                        statusChatListItem.selected ||
-                        statusChatListItem.highlighted ||
-                        statusBadge.visible ||
-                        sensor.containsMouse ? 1.0 : 0.7
+                return statusChatListItem.hasMention || 
+                  statusChatListItem.hasUnreadMessages || 
+                  statusChatListItem.selected ||
+                  statusChatListItem.highlighted ||
+                  statusBadge.visible ||
+                  sensor.containsMouse ? 1.0 : 0.7
            }

            icon: {
                switch (statusChatListItem.type) {
-                case StatusChatListItem.Type.PublicCat:
-                    return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
-                    break;
-                case StatusChatListItem.Type.GroupChat:
-                    return Theme.palette.name == "light" ? "tiny/group" : "tiny/group-white"
-                    break;
-                case StatusChatListItem.Type.CommunityChat:
-                    return Theme.palette.name == "light" ? "tiny/channel" : "tiny/channel-white"
-                    break;
-                default:
-                    return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
+                    case StatusChatListItem.Type.PublicCat:
+                        return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
+                        break;
+                    case StatusChatListItem.Type.GroupChat:
+                        return Theme.palette.name == "light" ? "tiny/group" : "tiny/group-white"
+                        break;
+                    case StatusChatListItem.Type.CommunityChat:
+                        return Theme.palette.name == "light" ? "tiny/channel" : "tiny/channel-white"
+                        break;
+                    default:
+                        return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
                }
            }
        }
@@ -179,30 +144,30 @@ Rectangle {
            anchors.left: statusIcon.visible ? statusIcon.right : identicon.right
            anchors.leftMargin: statusIcon.visible ? 1 : 8
            anchors.right: mutedIcon.visible ? mutedIcon.left :
-                                               statusBadge.visible ? statusBadge.left : parent.right
+                statusBadge.visible ? statusBadge.left : parent.right
            anchors.rightMargin: 6
            anchors.verticalCenter: parent.verticalCenter

-            text: originalOrder + (statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
-                  !statusChatListItem.name.startsWith("#") ?
-                      "#" + statusChatListItem.name :
-                      statusChatListItem.name)
+            text: statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
+                !statusChatListItem.name.startsWith("#") ?
+                "#" + statusChatListItem.name :
+                statusChatListItem.name
            elide: Text.ElideRight
            color: {
                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
                    return Theme.palette.directColor5
                }
-                return statusChatListItem.hasMention ||
-                        statusChatListItem.hasUnreadMessages ||
-                        statusChatListItem.selected ||
-                        statusChatListItem.highlighted ||
-                        sensor.containsMouse ||
-                        statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
+                return statusChatListItem.hasMention || 
+                  statusChatListItem.hasUnreadMessages ||
+                  statusChatListItem.selected ||
+                  statusChatListItem.highlighted ||
+                  sensor.containsMouse ||
+                  statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
            }
            font.weight: !statusChatListItem.muted &&
-                         (statusChatListItem.hasMention ||
-                          statusChatListItem.hasUnreadMessages ||
-                          statusBadge.visible) ? Font.Bold : Font.Medium
+              (statusChatListItem.hasMention || 
+              statusChatListItem.hasUnreadMessages ||
+              statusBadge.visible) ? Font.Bold : Font.Medium
            font.pixelSize: 15
        }

@@ -219,7 +184,7 @@ Rectangle {
            MouseArea {
                id: mutedIconSensor
                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
+                cursorShape: Qt.PointingHandCursor 
                anchors.fill: parent
                onClicked: statusChatListItem.unmute()
            }
@@ -242,98 +207,6 @@ Rectangle {
            border.color: color
            visible: statusBadge.value > 0
        }
+
    }
-
-    DropArea {
-        id: dropArea
-        width: sensor.held ? 0 : parent.width
-        height: sensor.held ? 0 : parent.height
-        keys: ["chat"]
-        onEntered: {
-            reorderDelay.start()
-        }
-
-        onDropped: {
-            reorder(drag.source.originalOrder, statusChatListItem.DelegateModel.itemsIndex)
-        }
-
-        Timer {
-            id: reorderDelay
-            interval: 100
-            repeat: false
-            onTriggered: {
-                if (dropArea.containsDrag) {
-                    dropArea.drag.source.originalOrder = statusChatListItem.originalOrder
-                    visualReorder(dropArea.drag.source.DelegateModel.itemsIndex, statusChatListItem.DelegateModel.itemsIndex, statusChatListItem.originalOrder)
-                }
-            }
-        }
-    }
-
-    Loader {
-        id:content
-        active: sensor.held
-        sourceComponent: Item {
-            property var globalPosition: getAbsolutePosition(statusChatListItem)
-            parent: QC.Overlay.overlay
-            width: statusChatListItem.width
-            height: statusChatListItem.height
-            Drag.active: sensor.held
-            Drag.hotSpot.x: width / 2
-            Drag.hotSpot.y: height / 2
-            Drag.keys: ["chat"]
-            Drag.source: statusChatListItem
-            Component.onCompleted: {
-                x = globalPosition.x
-                y = globalPosition.y
-            }
-
-            RectangularGlow {
-                anchors.fill: cover
-                color: "#22000000"
-                glowRadius: 8
-                cornerRadius: 8
-            }
-            Rectangle {
-                id: cover
-                anchors.fill: parent
-                color: Theme.palette.baseColor4
-                radius: 8
-
-                Row {
-                    spacing: 6
-                    anchors.left: parent.left
-                    anchors.leftMargin: 8
-                    anchors.verticalCenter: parent.verticalCenter
-                    Loader {
-                        id: iconLoader
-                        anchors.verticalCenter: parent.verticalCenter
-                        sourceComponent: !!statusChatListItem.image.source.toString() ?
-                                             statusRoundedImageCmp : statusLetterIdenticonCmp
-                    }
-
-                    StatusBaseText {
-                        anchors.verticalCenter: parent.verticalCenter
-                        width: cover.width - iconLoader.item.width - 22
-                        text: chatName.text
-                        elide: Text.ElideRight
-                        color: Theme.palette.directColor5
-                    }
-                }
-            }
-
-            function getAbsolutePosition(node) {
-                var returnPos = {};
-                returnPos.x = 0;
-                returnPos.y = 0;
-                if (node !== undefined && node !== null) {
-                    var parentValue = getAbsolutePosition(node.parent);
-                    returnPos.x = parentValue.x + node.x;
-                    returnPos.y = parentValue.y + node.y;
-                }
-                return returnPos;
-            }
-        }
-    }
-
 }
@@ -17,6 +17,8 @@ Rectangle {
    property alias membersButton: membersButton
    property alias searchButton: searchButton
    property int notificationCount: 0
+    // Used to understand if the tooltip is in the corner of the screen
+    property bool isCorner: true

    property Component popupMenu

@@ -88,10 +90,17 @@ Rectangle {
            type: StatusFlatRoundButton.Type.Secondary
            visible: !!statusChatToolBar.popupMenu

+            property bool showMoreMenu: false
            onClicked: {
-                statusChatToolBar.menuButtonClicked()
+                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;
            }

            StatusToolTip {
@@ -159,7 +168,7 @@ Rectangle {
                text: "Activity"
                orientation: StatusToolTip.Orientation.Bottom
                y: parent.height + 12
-                arrow.x: width - (parent.width-4)
+                cornerToolTip: isCorner
            }
        }

@@ -37,6 +37,7 @@ Rectangle {
    property string tertiaryTitle: ""
    property real leftPadding: 16
    property real rightPadding: 16
+    property bool enabled: true
    property StatusIconSettings icon: StatusIconSettings {
        height: 20
        width: 20
@@ -88,6 +89,7 @@ Rectangle {
    MouseArea {
        id: sensor

+        enabled: statusListItem.enabled
        anchors.fill: parent
        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
        acceptedButtons: Qt.LeftButton | Qt.RightButton
@@ -167,6 +169,9 @@ Rectangle {
                font.pixelSize: 15
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                color: {
+                  if (!statusListItem.enabled) {
+                    return Theme.palette.baseColor1
+                  }
                  switch (statusListItem.type) {
                      case StatusListItem.Type.Primary:
                          return Theme.palette.directColor1
@@ -184,7 +189,7 @@ Rectangle {
                width: parent.width
                text: statusListItem.subTitle
                font.pixelSize: 15
-                color: !statusListItem.tertiaryTitle ? Theme.palette.baseColor1 : Theme.palette.directColor1
+                color: !statusListItem.enabled || !statusListItem.tertiaryTitle ? Theme.palette.baseColor1 : Theme.palette.directColor1
                visible: !!statusListItem.subTitle
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
            }
@@ -21,6 +21,8 @@ Item {
    property alias selectionStart: edit.selectionStart
    property alias selectionEnd: edit.selectionEnd

+    property alias text: edit.text
+
    property alias color: edit.color
    property alias font: edit.font
    property alias verticalAlignmet: edit.verticalAlignment
@@ -32,14 +34,22 @@ Item {

    property real leftPadding: 16
    property real rightPadding: 16
-    property real topPadding: 11
-    property real bottomPadding: 11
+    property real topPadding: 12
+    property real bottomPadding: 12

    property real minimumHeight: 0
    property real maximumHeight: 0

-    implicitWidth: 200
-    implicitHeight: multiline ? Math.max(edit.implicitHeight + topPadding + bottomPadding, 40) : 40
+    property bool valid: true
+
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 24
+        height: 24
+        name: ""
+    }
+
+    implicitWidth: 448
+    implicitHeight: multiline ? Math.max(edit.implicitHeight + topPadding + bottomPadding, 44) : 44

    Rectangle {
        width: parent.width
@@ -54,91 +64,125 @@ Item {
        clip: true

        border.width: 1
-        border.color: edit.activeFocus ? Theme.palette.primaryColor1 : "transparent"
-
-        Flickable {
-            id: flick
+        border.color: {
+            if (!statusBaseInput.valid) {
+                return Theme.palette.dangerColor1;
+            }
+            if (edit.activeFocus) {
+                return Theme.palette.primaryColor1;
+            }
+            return sensor.containsMouse ? Theme.palette.primaryColor2 : "transparent"
+        }

+        MouseArea {
+            id: sensor
+            hoverEnabled: true
            anchors.fill: parent
-            anchors.leftMargin: 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
+            cursorShape: Qt.IBeamCursor
+            onClicked: edit.forceActiveFocus()

-            QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline }
+            StatusIcon {
+                id: statusIcon
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                anchors.leftMargin: 10
+                anchors.topMargin: 10

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


-            TextEdit {
-                id: edit
-                width: flick.width
-                selectByMouse: true
-                anchors.verticalCenter: parent.verticalCenter
-                focus: true
-
-                font.pixelSize: 15
-                font.family: Theme.palette.baseFont.name
-                color: Theme.palette.directColor1
-
-                onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
-                wrapMode: TextEdit.NoWrap
-
-                Keys.onReturnPressed: {
-                    if (multiline) {
-                        event.accepted = false
-                    } else {
-                        event.accepted = true
-                    }
+                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;
                }

-                Keys.onEnterPressed: {
-                    if (multiline) {
-                        event.accepted = false
-                    } else {
-                        event.accepted = true
-                    }
-                }

-                StatusBaseText {
-                    id: placeholder
-                    visible: edit.text.length === 0
-                    anchors.left: parent.left
-                    anchors.right: parent.right
+
+                TextEdit {
+                    id: edit
+                    width: flick.width
+                    selectByMouse: true
+                    selectionColor: Theme.palette.primaryColor2
+                    selectedTextColor: color
+                    anchors.verticalCenter: parent.verticalCenter
+                    focus: true
+
                    font.pixelSize: 15
-
-                    elide: StatusBaseText.ElideRight
                    font.family: Theme.palette.baseFont.name
-                    color: Theme.palette.baseColor1
+                    color: Theme.palette.directColor1
+
+                    onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
+                    wrapMode: TextEdit.NoWrap
+
+                    Keys.onReturnPressed: {
+                        if (multiline) {
+                            event.accepted = false
+                        } else {
+                            event.accepted = true
+                        }
+                    }
+
+                    Keys.onEnterPressed: {
+                        if (multiline) {
+                            event.accepted = false
+                        } else {
+                            event.accepted = true
+                        }
+                    }
+
+                    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 {
-            anchors.fill: parent
-            cursorShape: Qt.IBeamCursor
-            enabled: !edit.activeFocus
-            onClicked: edit.forceActiveFocus()
-        }
    } // Rectangle

    StatusFlatRoundButton {
        id: clearButtton
-        visible: edit.text.length != 0 && statusBaseInput.clearable && !statusBaseInput.multiline
+        visible: edit.text.length != 0 && 
+            statusBaseInput.clearable && 
+            !statusBaseInput.multiline &&
+            edit.activeFocus
        anchors.right: parent.right
        anchors.rightMargin: 11
        anchors.verticalCenter: parent.verticalCenter
@@ -148,6 +192,7 @@ Item {
        icon.name: "clear"
        icon.width: 14
        icon.height: 14
+        icon.color: Theme.palette.baseColor1
        onClicked: {
            edit.clear()
        }
@@ -0,0 +1,92 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+Rectangle {
+    id: root
+
+    implicitWidth: 480
+    height: (label.visible ? 
+                  label.anchors.topMargin +
+                  label.height :
+              charLimitLabel.visible ?
+                  charLimitLabel.anchors.topMargin +
+                  charLimitLabel.height :
+              0) +
+            statusBaseInput.anchors.topMargin +
+            statusBaseInput.height + 
+            (errorMessage.visible ? 
+                  errorMessage.anchors.topMargin +
+                  errorMessage.height :
+                  0) + 8
+
+    color: "transparent"
+    property alias input: statusBaseInput
+    property string label: ""
+    property int charLimit: 0
+    property string errorMessage: ""
+
+    StatusBaseText {
+        id: label
+        height: visible ? implicitHeight : 0
+        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
+        visible: !!root.label
+        elide: Text.ElideRight
+
+        text: root.label
+        font.pixelSize: 15
+        color: statusBaseInput.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
+    }
+
+    StatusBaseText {
+        id: charLimitLabel
+        height: visible ? implicitHeight : 0
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.topMargin: visible ? 11 : 0
+        anchors.rightMargin: 16
+        visible: root.charLimit > 0
+
+        text: "%1 / %2".arg(statusBaseInput.text.length).arg(root.charLimit)
+        font.pixelSize: 12
+        color: statusBaseInput.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6
+    }
+
+    StatusBaseInput {
+        id: statusBaseInput
+        anchors.top:  label.visible ? label.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
+    }
+
+    StatusBaseText {
+        id: errorMessage
+
+        anchors.top: statusBaseInput.bottom
+        anchors.topMargin: 11
+        anchors.right: parent.right
+        anchors.rightMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+
+        height: visible ? implicitHeight : 0
+        visible: !!root.errorMessage && !statusBaseInput.valid
+
+        font.pixelSize: 12
+        color: Theme.palette.dangerColor1
+        text: root.errorMessage
+        horizontalAlignment: Text.AlignRight
+        wrapMode: Text.WordWrap
+    }
+}
@@ -13,6 +13,7 @@ ToolTip {
        Right
    }

+    property bool cornerToolTip: false
    property int maxWidth: 800
    property int orientation: StatusToolTip.Orientation.Top
    property alias arrow: arrow
@@ -41,7 +42,7 @@ ToolTip {
            radius: 1
            x: {
                if (orientation === StatusToolTip.Orientation.Top || orientation === StatusToolTip.Orientation.Bottom) {
-                    return statusToolTipBackground.width / 2 - width / 2
+                    return cornerToolTip ? (statusToolTip.x + statusToolTip.width) : (statusToolTipBackground.width / 2 - arrow.width / 2)
                }
                if (orientation === StatusToolTip.Orientation.Left) {
                    return statusToolTipContentBackground.width - (width / 2) - 8
@@ -15,4 +15,5 @@ StatusRadioButton 0.1 StatusRadioButton.qml
 StatusCheckBox 0.1 StatusCheckBox.qml
 StatusSlider 0.1 StatusSlider.qml
 StatusBaseInput 0.1 StatusBaseInput.qml
+StatusInput 0.1 StatusInput.qml
 StatusPickerButton 0.1 StatusPickerButton.qml
@@ -172,5 +172,9 @@ ThemePalette {
    property QtObject statusRoundedImage: QtObject {
        property color backgroundColor: baseColor3
    }
+
+    property QtObject statusChatInput: QtObject {
+        property color secondaryBackgroundColor: "#414141"
+    }
 }

@@ -170,5 +170,9 @@ ThemePalette {
    property QtObject statusRoundedImage: QtObject {
        property color backgroundColor: white
    }
+
+    property QtObject statusChatInput: QtObject {
+        property color secondaryBackgroundColor: "#E2E6E8"
+    }
 }

@@ -134,6 +134,10 @@ QtObject {
        property color backgroundColor
    }

+    property QtObject statusChatInput: QtObject {
+        property color secondaryBackgroundColor
+    }
+
    function alphaColor(color, alpha) {
        let actualColor = Qt.darker(color, 1)
        actualColor.a = alpha
@@ -10,6 +10,8 @@ Rectangle {
    id: statusAppNavBar

    property StatusNavBarTabButton navBarChatButton
+    property StatusNavBarTabButton navBarProfileButton
+
    property list<StatusNavBarTabButton> navBarTabButtons
    property alias navBarCommunityTabButtons: navBarCommunityTabButtons

@@ -34,6 +36,12 @@ Rectangle {
        }
    }

+    onNavBarProfileButtonChanged: {
+        if (!!navBarProfileButton) {
+            navBarProfileButton.parent = navBarProfileButtonSlot
+        }
+    }
+
    onNavBarTabButtonsChanged: {
        if (navBarTabButtons.length) {
            for (let idx in navBarTabButtons) {
@@ -75,7 +83,9 @@ Rectangle {
            if (navBarContentHeight > statusAppNavBar.height) {
                height = statusAppNavBar.height - 
                         statusAppNavBar.navBarContentHeightWithoutCommunityButtons -
-                         (!!navBarTabButtonsSlot.anchors.bottom ? navBarTabButtonsSlot.anchors.bottomMargin : navBarTabButtonsSlot.anchors.topMargin)
+                         (!!navBarTabButtonsSlot.anchors.bottom ? navBarTabButtonsSlot.anchors.bottomMargin : navBarTabButtonsSlot.anchors.topMargin) -
+                         navBarProfileButtonSlot.height -
+                         navBarProfileButtonSlot.anchors.bottomMargin
                bottomPadding = 16
                topPadding = 16
            } else {
@@ -122,7 +132,7 @@ Rectangle {
            if (navBarContentHeight > statusAppNavBar.height) {
                anchors.top = undefined
                anchors.topMargin = 0
-                anchors.bottom = statusAppNavBar.bottom
+                anchors.bottom = navBarProfileButtonSlot.top
                anchors.bottomMargin = 32
            } else {
                anchors.bottom = undefined
@@ -132,5 +142,15 @@ Rectangle {
            }
        }
    }
+
+    Item {
+        id: navBarProfileButtonSlot
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: visible ? statusAppNavBar.navBarProfileButton.height : 0
+        width: visible ? statusAppNavBar.navBarProfileButton.width : 0
+        visible: !!statusAppNavBar.navBarProfileButton
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: visible ? 32 : 0
+    }
 }

@@ -16,6 +16,7 @@ SplitView {
    property bool showRightPanel

    Control {
+        SplitView.minimumWidth: 300
        SplitView.preferredWidth: 300
        SplitView.fillHeight: true
        contentItem: (!!leftPanel) ? leftPanel : null
@@ -26,6 +27,7 @@ SplitView {
    }

    Control {
+        SplitView.minimumWidth: 300
        SplitView.fillWidth: true
        SplitView.fillHeight: true
        contentItem: (!!centerPanel) ? centerPanel : null
@@ -132,23 +132,30 @@ Menu {
            sourceComponent: {
                let subMenuItemIcon = statusPopupMenu.subMenuItemIcons[parent.subMenuIndex]
                
-                if ((parent.subMenu && subMenuItemIcon && subMenuItemIcon.source) || !!statusPopupMenuItem.action.image.source.toString()) {
+                if ((parent.subMenu && subMenuItemIcon && subMenuItemIcon.source) || 
+                    statusPopupMenuItem.action.image && !!statusPopupMenuItem.action.image.source.toString()) {
                    return statusRoundImageCmp
                }

                return (parent.subMenu && subMenuItemIcon && subMenuItemIcon.isLetterIdenticon) || 
-                    statusPopupMenuItem.action.iconSettings.isLetterIdenticon ? 
+                    (statusPopupMenuItem.action.iconsSettings && statusPopupMenuItem.action.iconSettings.isLetterIdenticon) ? 
                    statusLetterIdenticonCmp : indicatorComponent
            }
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 8
-            active: (parent.subMenu && !!statusPopupMenu.subMenuItemIcons[parent.subMenuIndex] ||
-                (!!statusPopupMenuItem.action.icon.name ||
-                !!statusPopupMenuItem.action.iconSettings.name) ||
-                !!statusPopupMenuItem.action.iconSettings.isLetterIdenticon ||
-                !!statusPopupMenuItem.action.image.source.toString()) &&
-                statusPopupMenuItem.action.enabled
+            active: {
+                if (enabled) {
+                    let hasIconSettings = !!statusPopupMenuItem.action.icon.name ||
+                      (statusPopupMenuItem.action.iconSettings && 
+                        (!!statusPopupMenuItem.action.iconSettings.name || !!statusPopupMenuItem.action.iconSettings.isLetterIdenticon))
+
+                    let hasImageSettings = statusPopupMenuItem.action.image && !!statusPopupMenuItem.action.image.source.toString()
+
+                    return enabled && (parent.subMenu && !!statusPopupMenu.subMenuItemIcons[parent.subMenuIndex]) || hasIconSettings || hasImageSettings
+                }
+                return false
+            }      
        }

        contentItem: StatusBaseText {
@@ -1,5 +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 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"/>
+<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"/>
 </svg>
@@ -1,4 +1,3 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.82051 5.10748C10.148 4.98152 10.5 5.22326 10.5 5.57415V11.4259C10.5 11.7768 10.148 12.0185 9.8205 11.8925L8.20145 11.2698C8.01814 11.1993 7.8324 11.1356 7.6446 11.0788C7.38272 10.9996 7.11478 11.164 7.04842 11.4294L6.66417 12.9664C6.36119 14.1784 4.63882 14.1784 4.33583 12.9664L3.74837 10.6166C3.70074 10.4261 3.54598 10.2811 3.35275 10.2459L2.82112 10.1493C2.34563 10.0628 2 9.64869 2 9.16541V7.83456C2 7.35127 2.34562 6.93714 2.82111 6.85069L6.76064 6.13441C7.25246 6.04499 7.73482 5.90967 8.20139 5.73022L9.82051 5.10748Z" fill="black"/>
-<path d="M12.3205 12.8541C12.1274 12.7798 12 12.5943 12 12.3874V4.61261C12 4.40573 12.1274 4.22021 12.3205 4.14594L12.641 4.02267C13.296 3.77074 14 4.25423 14 4.95601V12.0441C14 12.7458 13.296 13.2293 12.641 12.9774L12.3205 12.8541Z" fill="black"/>
+<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="M2 10.7149C2 9.17362 3.16788 7.88312 4.70149 7.72976L8.33775 7.36613C10.7589 7.12402 13.1156 6.44212 15.292 5.35393L19.1056 3.44712C20.4354 2.78222 22 3.74921 22 5.23598V16.7638C22 18.2506 20.4354 19.2176 19.1056 18.5527L15.292 16.6459C14.6768 16.3383 14.0473 16.0632 13.406 15.8213C13.0859 15.7006 12.75 15.9414 12.75 16.2836V18.5C12.75 19.7426 11.7426 20.75 10.5 20.75H10C7.92893 20.75 6.25 19.0711 6.25 17V14.8774C6.25 14.6205 6.05535 14.4054 5.79975 14.3799L4.70149 14.2701C3.16789 14.1167 2 12.8262 2 11.2849V10.7149ZM20.5 5.23598V16.7638C20.5 17.1355 20.1088 17.3773 19.7764 17.2111L15.9628 15.3042C13.6232 14.1345 11.0898 13.4014 8.48701 13.1411L4.85075 12.7775C4.08394 12.7008 3.5 12.0556 3.5 11.2849V10.7149C3.5 9.94424 4.08394 9.299 4.85074 9.22232L8.48701 8.85869C11.0898 8.59841 13.6232 7.86537 15.9628 6.69558L19.7764 4.78877C20.1088 4.62254 20.5 4.86429 20.5 5.23598ZM8.29975 14.6299C8.00541 14.6005 7.75 14.8316 7.75 15.1274V17C7.75 18.2426 8.75736 19.25 10 19.25H10.5C10.9142 19.25 11.25 18.9142 11.25 18.5V15.5339C11.25 15.3049 11.0947 15.1046 10.8717 15.0528C10.0384 14.8593 9.19211 14.7191 8.33775 14.6337L8.29975 14.6299Z" fill="black"/>
 </svg>
Author	SHA1	Message	Date
Khushboo Mehta	5248322ec1	fix(@desktop/chat) Acitvity tooltip arrow should be in center when members list is shown fixes #3102	2021-08-11 18:49:13 +02:00
Pascal Precht	90aa9d76c0	fix(StatusPopupMenu): ensure icon or image settings exist Fixes #295	2021-08-10 15:12:28 +02:00
RichΛrd	2e1359c9e2	fix(StatusAppNavBar): add profile button (#311 )	2021-08-06 12:47:57 -04:00
RichΛrd	aab59763e5	chore: replace profile icon (#312 )	2021-08-06 12:47:52 -04:00
Alexandra Betouni	a8e830f76c	fix(StatusChatToolBar) Fixing more menu not closing The menu has a CloseOnReleaseOutside policy and so it was closing and immediately re-opened when the kebab icon was clicked since it's outside the menu area and also was calling the popup function of the menu. Added dummy bool property to detect whether the menu is already closed and not open it again Closes #308	2021-08-05 09:59:39 +02:00
Pascal Precht	b345c75a4c	fix(StatusChatListItem): don't signal item selection if already selected Closes #303	2021-08-03 09:48:53 +02:00
Jonathan Rainville	7e03daeaf9	feat(StatusListItem): add enabled prop to StatusLIneItem (#302 )	2021-07-29 09:33:32 -04:00
Pascal Precht	556e5ccafc	feat(StatusQ.Theme.Core): introduce theme colors for StatusChatInput (#299 ) There's some usage specific color being added to the chat input (which doesn't live in StatusQ yet). To make sure we don't lose that change, I'm adding the new colors to StatusQ theming system and have Status Desktop use it for the time being until `StatusChatInput` is moved to StatusQ anyways.	2021-07-28 16:16:54 -04:00
Pascal Precht	79200f066e	chore: cut v0.3.0 release	2021-07-27 16:22:07 +02:00
Alexandra Betouni	d327c51521	fix(StatusAppThreePanelLayout): limit right panel width to 300px Also added handle in DemoApp as well as hiding text when in minimum width for right and left panels	2021-07-26 16:49:53 +02:00
Pascal Precht	e71bd45c55	chore(sandbox): make app wider due to minimum layout width There have been minimum layout widths introduced lately which break the sandbox app's UI. This commit makes it wider by default so this doesn't happen	2021-07-26 15:13:04 +02:00
Alexandra Betouni	762ff87bcc	fix(StatusAppThreePanelLayout): limit center panel width to 300px	2021-07-26 15:07:06 +02:00
Pascal Precht	731a0f8c8f	feat(sandbox): make use of `StatusInput` in chat view	2021-07-26 15:03:54 +02:00
Pascal Precht	c8e903496c	feat(StatusBaseInput): add icon support Usage: ```qml StatusBaseInput { icon.name: "..." } ``` Closes #242	2021-07-26 15:03:54 +02:00
Pascal Precht	f16e857c72	fix(StatusBaseInput): some minor style adjustment to adhere to design	2021-07-26 15:03:54 +02:00
Pascal Precht	3cf53d0233	feat(StatusInput): implement error message and charlimit APIs Usage: ```qml StatusInput { label: "Fieldname" charLimit: 30 errorMessage: "Some error occured" input.valid: false input.text: "Some invalid value" input.valid: false } ``` Closes #289, #290	2021-07-26 15:03:54 +02:00
Pascal Precht	646c00bd3a	feat(Controls): introduce `StatusInput` `StatusInput` is a wrapper around `StatusBaseInput` to provide additional component composition for labels, error messages and alike Closes #288	2021-07-26 15:03:54 +02:00
Pascal Precht	ab3035930b	fix(StatusBaseInput): ensure input text is selectable with mouse This also sets the correcrt selection and selected text color.	2021-07-26 15:03:54 +02:00
Pascal Precht	e8cce72c25	feat(StatusBaseInput): add visual validity state Closes #287	2021-07-26 15:03:54 +02:00
Pascal Precht	de1cec7e51	fix(StatusBaseInput): ensure clear button has the correct color Also only render clear button when input has active focus. Closes #286	2021-07-26 15:03:54 +02:00
Pascal Precht	e1ebdaae2c	feat(StatusBaseInput): add hover state visuals Closes #285	2021-07-26 15:03:54 +02:00
Pascal Precht	35f20e33df	fix(StatusBaseInput): add visuals for disabled state Closes #284	2021-07-26 15:03:54 +02:00
Pascal Precht	a2d48a5827	refactor(StatusBaseInput): change implicitWidth to adhere to design	2021-07-26 15:03:54 +02:00
Pascal Precht	a1662adead	chore(sandbox): introduce StatusInputPage	2021-07-26 15:03:54 +02:00
Pascal Precht	116ddfbb4d	fix(StatusBaseInput): expose text prop alias	2021-07-26 15:03:54 +02:00