diff --git a/ui/StatusQ/sandbox/controls/Controls.qml b/ui/StatusQ/sandbox/controls/Controls.qml index c67f5b8531..ceba2f74ca 100644 --- a/ui/StatusQ/sandbox/controls/Controls.qml +++ b/ui/StatusQ/sandbox/controls/Controls.qml @@ -5,12 +5,8 @@ import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 -import Sandbox 0.1 - -GridLayout { - columns: 1 - columnSpacing: 5 - rowSpacing: 5 +ColumnLayout { + spacing: 5 StatusSelectableText { color: Theme.palette.baseColor1 @@ -146,7 +142,7 @@ GridLayout { } Item { - implicitWidth: 100 + implicitWidth: 140 implicitHeight: 48 StatusChatInfoButton { title: "Iuri Matias elided" @@ -157,7 +153,7 @@ GridLayout { type: StatusChatInfoButton.Type.OneToOneChat muted: true pinnedMessagesCount: 10 - width: 100 + width: parent.width } } @@ -183,6 +179,7 @@ GridLayout { pinnedMessagesCount: 1 asset.color: Theme.palette.miscColor7 type: StatusChatInfoButton.Type.GroupChat + muted: true } StatusChatInfoButton { @@ -193,11 +190,17 @@ GridLayout { } StatusChatInfoButton { - title: "community-channel" - subTitle: "Some very long description text to see how the whole item wraps or elides" + title: "public-chat-type" + subTitle: "Some very long description text with hover disabled to see how the whole item wraps or elides" asset.color: Theme.palette.miscColor7 - type: StatusChatInfoButton.Type.CommunityChat + type: StatusChatInfoButton.Type.PublicChat pinnedMessagesCount: 3 + hoverEnabled: false + } + + StatusChatInfoButton { + title: "No subtitle and no type" + asset.color: Theme.palette.miscColor7 } StatusSlider { diff --git a/ui/StatusQ/src/StatusQ/Components/StatusChatInfoToolBar.qml b/ui/StatusQ/src/StatusQ/Components/StatusChatInfoToolBar.qml index a9cff3affa..9db3868c4d 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusChatInfoToolBar.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusChatInfoToolBar.qml @@ -73,19 +73,17 @@ Item { duration: 150 direction: RotationAnimation.Clockwise easing.type: Easing.InCubic - running: visible } }, Transition { - from: "pressed" - to: "default" - RotationAnimation { - duration: 150 - direction: RotationAnimation.Counterclockwise - easing.type: Easing.OutCubic - running: visible - } - } + from: "pressed" + to: "default" + RotationAnimation { + duration: 150 + direction: RotationAnimation.Counterclockwise + easing.type: Easing.OutCubic + } + } ] onClicked: { diff --git a/ui/StatusQ/src/StatusQ/Components/StatusToolBar.qml b/ui/StatusQ/src/StatusQ/Components/StatusToolBar.qml index b9ced8694a..ddd2b1335e 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusToolBar.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusToolBar.qml @@ -56,6 +56,7 @@ ToolBar { StatusActivityCenterButton { id: notificationButton + Layout.leftMargin: 8 unreadNotificationsCount: root.notificationCount hasUnseenNotifications: root.hasUnseenNotifications onClicked: root.notificationButtonClicked() diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml index f0a84b0f18..9c5882b3ed 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml @@ -1,6 +1,6 @@ -import QtQuick 2.14 -import QtQuick.Controls 2.14 -import QtQuick.Layouts 1.14 +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 @@ -28,7 +28,7 @@ Button { property int type: StatusChatInfoButton.Type.Unknown0 property alias tooltip: statusToolTip - signal pinnedMessagesCountClicked(var mouse) + signal pinnedMessagesCountClicked() signal unmute() signal linkActivated(string link) @@ -50,10 +50,29 @@ Button { radius: 8 color: root.enabled && root.hovered ? Theme.palette.baseColor2 : "transparent" - MouseArea { - anchors.fill: parent - acceptedButtons: Qt.NoButton - cursorShape: root.hovered ? Qt.PointingHandCursor : undefined + HoverHandler { + enabled: root.hoverEnabled + cursorShape: enabled ? Qt.PointingHandCursor : undefined + } + } + + component TruncatedTextWithTooltip: StatusBaseText { + readonly property alias hovered: truncatedHandler.hovered + property alias cursorShape: truncatedHandler.cursorShape + + elide: Text.ElideRight + + StatusToolTip { + text: parent.text + visible: truncatedHandler.hovered && parent.truncated + orientation: StatusToolTip.Orientation.Bottom + delay: 500 + y: parent.height + 12 + } + + HoverHandler { + id: truncatedHandler + cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : undefined } } @@ -79,28 +98,29 @@ Button { spacing: 1 StatusIcon { - visible: root.type !== StatusChatInfoButton.Type.OneToOneChat && !forceHideTypeIcon + visible: root.type !== StatusChatInfoButton.Type.OneToOneChat && !forceHideTypeIcon && icon Layout.preferredWidth: 14 Layout.preferredHeight: 14 color: root.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1 icon: { switch (root.type) { - case StatusChatInfoButton.Type.PublicCat: + case StatusChatInfoButton.Type.PublicChat: return "tiny/public-chat" case StatusChatInfoButton.Type.GroupChat: return "tiny/group" case StatusChatInfoButton.Type.CommunityChat: return "tiny/channel" default: - return "tiny/public-chat" + return "" } } } - StatusBaseText { - objectName: "statusChatInfoButtonNameText" + TruncatedTextWithTooltip { Layout.fillWidth: true - elide: Text.ElideRight + Layout.maximumWidth: Math.ceil(implicitWidth) + Layout.alignment: Qt.AlignVCenter + objectName: "statusChatInfoButtonNameText" text: root.title color: root.muted ? Theme.palette.directColor5 : Theme.palette.directColor1 font.weight: Font.Medium @@ -134,23 +154,22 @@ Button { // subtitle RowLayout { - id: subtitleRow Layout.fillWidth: true Layout.alignment: Qt.AlignLeading | Qt.AlignTop - Layout.rightMargin: 4 + visible: root.subTitle || root.pinnedMessagesCount spacing: 0 - StatusSelectableText { - Layout.fillWidth: implicitWidth + separator.width + pinIcon.width + pinText.width > subtitleRow.width + TruncatedTextWithTooltip { + Layout.fillWidth: true + Layout.maximumWidth: Math.ceil(implicitWidth) text: root.subTitle - visible: root.subTitle + visible: text color: Theme.palette.baseColor1 font.pixelSize: 12 onLinkActivated: root.linkActivated(link) } Rectangle { - id: separator Layout.preferredHeight: 12 Layout.preferredWidth: 1 Layout.leftMargin: 4 @@ -160,44 +179,31 @@ Button { } StatusIcon { - id: pinIcon Layout.preferredHeight: 14 Layout.preferredWidth: 14 - visible: root.pinnedMessagesCount > 0 + visible: root.pinnedMessagesCount icon: "pin" - color: Theme.palette.baseColor1 + color: pinText.hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1 } - StatusBaseText { + TruncatedTextWithTooltip { id: pinText - TextMetrics { - id: tm - font: pinText.font - elide: Text.ElideRight - elideWidth: pinText.width - text: qsTr("%Ln pinned message(s)", "", root.pinnedMessagesCount) - } - objectName: "StatusChatInfo_pinText" Layout.fillWidth: true - text: tm.elidedText !== tm.text ? root.pinnedMessagesCount : tm.text + Layout.maximumWidth: Math.ceil(implicitWidth) + text: qsTr("%Ln pinned message(s)", "", root.pinnedMessagesCount) font.pixelSize: 12 - font.underline: pinCountSensor.containsMouse + font.underline: hovered visible: root.pinnedMessagesCount - color: pinCountSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1 - - MouseArea { - objectName: "pinMessagesCounterSensor" - id: pinCountSensor - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - onClicked: root.pinnedMessagesCountClicked(mouse) + color: hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1 + cursorShape: Qt.PointingHandCursor + TapHandler { + onSingleTapped: root.pinnedMessagesCountClicked() } } - - Item { Layout.fillWidth: true } } } + + Item { Layout.fillWidth: true } } } diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml b/ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml index fa926e0559..a2cbbd677a 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml @@ -67,6 +67,7 @@ ToolTip { contentItem: StatusBaseText { text: statusToolTip.text color: Theme.palette.white + linkColor: Theme.palette.white wrapMode: Text.WordWrap font.pixelSize: 13 font.weight: Font.Medium diff --git a/ui/app/AppLayouts/Chat/views/ChatHeaderContentView.qml b/ui/app/AppLayouts/Chat/views/ChatHeaderContentView.qml index f2fedb0f99..0eef24a9cb 100644 --- a/ui/app/AppLayouts/Chat/views/ChatHeaderContentView.qml +++ b/ui/app/AppLayouts/Chat/views/ChatHeaderContentView.qml @@ -51,18 +51,11 @@ Item { anchors.top: parent.top anchors.bottom: parent.bottom anchors.left: parent.left - anchors.right: d.selectingMembers ? parent.right : undefined + anchors.right: d.selectingMembers ? parent.right : actionButtons.left sourceComponent: d.selectingMembers ? membersSelector : statusChatInfoButton } - Rectangle { - anchors.fill: actionButtons - visible: actionButtons.visible - opacity: 0.8 - color: Style.current.background - } - RowLayout { id: actionButtons