feat(StatusChatToolBar): Add flexible component in right toolbar position
- Added loader in right component position and removed `StatusChatInfoButton` specific. - Updated sandbox and added new example in Layouts with another different component than the `StatusChatInfoButton`. BREAKING CHANGES: The toolbar now expects a component to be loaded. The previous `StatusChatInfoButton` component has been removed and needs to be passed as a component from outside whenever needed. Breaking changes in `desktop` will be addressed in: https://github.com/status-im/status-desktop/pull/5823
This commit is contained in:
Noelia
Noelia
parent
46cd904ced
commit
1cadfc051b
|
|
@ -10,31 +10,92 @@ import StatusQ.Layout 0.1
|
|||
import StatusQ.Popups 0.1
|
||||
|
||||
Column {
|
||||
spacing: 5
|
||||
spacing: 10
|
||||
|
||||
StatusChatToolBar {
|
||||
chatInfoButton.title: "Some contact"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
|
||||
toolbarComponent: chatInfoButton1
|
||||
width: 518
|
||||
|
||||
Component {
|
||||
id: chatInfoButton1
|
||||
|
||||
StatusChatInfoButton {
|
||||
width: Math.min(implicitWidth, parent.width)
|
||||
title: "Some contact"
|
||||
subTitle: "Contact"
|
||||
icon.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.OneToOneChat
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusChatToolBar {
|
||||
chatInfoButton.title: "Some contact"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
|
||||
chatInfoButton.pinnedMessagesCount: 1
|
||||
chatInfoButton.muted: true
|
||||
toolbarComponent: chatInfoButton2
|
||||
width: 518
|
||||
|
||||
Component {
|
||||
id: chatInfoButton2
|
||||
StatusChatInfoButton {
|
||||
width: Math.min(implicitWidth, parent.width)
|
||||
title: "Some contact"
|
||||
subTitle: "Contact"
|
||||
icon.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.PublicChat
|
||||
pinnedMessagesCount: 1
|
||||
muted: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
StatusChatToolBar {
|
||||
chatInfoButton.title: "Some contact"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
|
||||
chatInfoButton.pinnedMessagesCount: 1
|
||||
notificationCount: 1
|
||||
toolbarComponent: chatInfoButton3
|
||||
width: 518
|
||||
|
||||
Component {
|
||||
id: chatInfoButton3
|
||||
|
||||
StatusChatInfoButton {
|
||||
width: Math.min(implicitWidth, parent.width)
|
||||
title: "Some contact"
|
||||
subTitle: "Contact"
|
||||
icon.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.OneToOneChat
|
||||
pinnedMessagesCount: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusChatToolBar {
|
||||
notificationCount: 1
|
||||
toolbarComponent: tagSelector
|
||||
width: 518
|
||||
|
||||
Component {
|
||||
id: tagSelector
|
||||
|
||||
StatusTagSelector {
|
||||
namesModel: ListModel {
|
||||
ListElement {
|
||||
publicId: "0x0"
|
||||
name: "Maria"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
onlineStatus: 3
|
||||
}
|
||||
ListElement {
|
||||
publicId: "0x1"
|
||||
name: "James"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
onlineStatus: 1
|
||||
}
|
||||
}
|
||||
toLabelText: qsTr("To: ")
|
||||
warningText: qsTr("USER LIMIT REACHED")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
|
|
|
|||
|
|
@ -145,15 +145,8 @@ StatusAppThreePanelLayout {
|
|||
anchors.fill: parent
|
||||
|
||||
StatusChatToolBar {
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
|
||||
chatInfoButton.title: "Amazing Funny Squirrel"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
|
||||
chatInfoButton.pinnedMessagesCount: 1
|
||||
|
||||
toolbarComponent: statusChatInfoButton
|
||||
searchButton.visible: false
|
||||
membersButton.visible: false
|
||||
notificationCount: 1
|
||||
|
|
@ -186,6 +179,19 @@ StatusAppThreePanelLayout {
|
|||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusChatInfoButton
|
||||
|
||||
StatusChatInfoButton {
|
||||
width: Math.min(implicitWidth, parent.width)
|
||||
title: "Amazing Funny Squirrel"
|
||||
subTitle: "Contact"
|
||||
icon.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.OneToOneChat
|
||||
pinnedMessagesCount: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -166,13 +166,10 @@ StatusAppThreePanelLayout {
|
|||
centerPanel: Item {
|
||||
StatusChatToolBar {
|
||||
id: statusChatToolBar
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
|
||||
chatInfoButton.title: "general"
|
||||
chatInfoButton.subTitle: "Community Chat"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor6
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
|
||||
width: parent.width
|
||||
toolbarComponent: statusChatInfoButton
|
||||
|
||||
onSearchButtonClicked: {
|
||||
searchButton.highlighted = !searchButton.highlighted;
|
||||
searchPopup.setSearchSelection(communityDetailModalTitle,
|
||||
|
|
@ -184,6 +181,18 @@ StatusAppThreePanelLayout {
|
|||
onMembersButtonClicked: {
|
||||
root.showRightPanel = !root.showRightPanel;
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusChatInfoButton
|
||||
|
||||
StatusChatInfoButton {
|
||||
width: Math.min(implicitWidth, parent.width)
|
||||
title: "general"
|
||||
subTitle: "Community Chat"
|
||||
icon.color: Theme.palette.miscColor6
|
||||
type: StatusChatInfoButton.Type.CommunityChat
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusSearchPopup {
|
||||
|
|
|
|||
|
|
@ -1,24 +1,22 @@
|
|||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.13
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
Rectangle {
|
||||
Item {
|
||||
id: statusChatToolBar
|
||||
implicitWidth: 518
|
||||
height: 56
|
||||
color: Theme.palette.statusAppLayout.backgroundColor
|
||||
|
||||
property alias chatInfoButton: statusChatInfoButton
|
||||
property alias menuButton: menuButton
|
||||
property alias notificationButton: notificationButton
|
||||
property alias membersButton: membersButton
|
||||
property alias searchButton: searchButton
|
||||
property int notificationCount: 0
|
||||
|
||||
property int padding: 8
|
||||
property int notificationCount: 0
|
||||
property Component popupMenu
|
||||
property var toolbarComponent
|
||||
|
||||
signal chatInfoButtonClicked()
|
||||
signal menuButtonClicked()
|
||||
|
|
@ -26,150 +24,156 @@ Rectangle {
|
|||
signal membersButtonClicked()
|
||||
signal searchButtonClicked()
|
||||
|
||||
implicitWidth: 518
|
||||
implicitHeight: 60
|
||||
|
||||
onPopupMenuChanged: {
|
||||
if (!!popupMenu) {
|
||||
popupMenuSlot.sourceComponent = popupMenu
|
||||
}
|
||||
}
|
||||
|
||||
StatusChatInfoButton {
|
||||
id: statusChatInfoButton
|
||||
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()
|
||||
}
|
||||
RowLayout {
|
||||
width: parent.width
|
||||
spacing: padding / 2
|
||||
|
||||
Row {
|
||||
id: actionButtons
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
spacing: 8
|
||||
|
||||
StatusFlatRoundButton {
|
||||
id: searchButton
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "search"
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
onClicked: statusChatToolBar.searchButtonClicked()
|
||||
|
||||
// initializing the tooltip
|
||||
tooltip.text: qsTr("Search")
|
||||
tooltip.orientation: StatusToolTip.Orientation.Bottom
|
||||
tooltip.y: parent.height + 12
|
||||
Loader {
|
||||
id: loader
|
||||
sourceComponent: statusChatToolBar.toolbarComponent
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignTop | Qt.AlignLeft
|
||||
Layout.topMargin: padding
|
||||
Layout.leftMargin: padding
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
id: membersButton
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "group-chat"
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
onClicked: statusChatToolBar.membersButtonClicked()
|
||||
RowLayout {
|
||||
id: actionButtons
|
||||
Layout.alignment: Qt.AlignTop | Qt.AlignRight
|
||||
Layout.topMargin: padding
|
||||
Layout.rightMargin: padding
|
||||
spacing: 8
|
||||
|
||||
// initializing the tooltip
|
||||
tooltip.text: qsTr("Members")
|
||||
tooltip.orientation: StatusToolTip.Orientation.Bottom
|
||||
tooltip.y: parent.height + 12
|
||||
}
|
||||
StatusFlatRoundButton {
|
||||
id: searchButton
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "search"
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
onClicked: statusChatToolBar.searchButtonClicked()
|
||||
|
||||
StatusFlatRoundButton {
|
||||
id: menuButton
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "more"
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
visible: !!statusChatToolBar.popupMenu
|
||||
|
||||
// initializing the tooltip
|
||||
tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened
|
||||
tooltip.text: qsTr("More")
|
||||
tooltip.orientation: StatusToolTip.Orientation.Bottom
|
||||
tooltip.y: parent.height + 12
|
||||
|
||||
property bool showMoreMenu: false
|
||||
onClicked: {
|
||||
menuButton.highlighted = true
|
||||
|
||||
let originalOpenHandler = popupMenuSlot.item.openHandler
|
||||
let originalCloseHandler = popupMenuSlot.item.closeHandler
|
||||
|
||||
popupMenuSlot.item.openHandler = function () {
|
||||
if (!!originalOpenHandler) {
|
||||
originalOpenHandler()
|
||||
}
|
||||
}
|
||||
|
||||
popupMenuSlot.item.closeHandler = function () {
|
||||
menuButton.highlighted = false
|
||||
if (!!originalCloseHandler) {
|
||||
originalCloseHandler()
|
||||
}
|
||||
}
|
||||
|
||||
popupMenuSlot.item.openHandler = originalOpenHandler
|
||||
popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
|
||||
statusChatToolBar.menuButtonClicked()
|
||||
// initializing the tooltip
|
||||
tooltip.text: qsTr("Search")
|
||||
tooltip.orientation: StatusToolTip.Orientation.Bottom
|
||||
tooltip.y: parent.height + 12
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: popupMenuSlot
|
||||
active: !!statusChatToolBar.popupMenu
|
||||
StatusFlatRoundButton {
|
||||
id: membersButton
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "group-chat"
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
onClicked: statusChatToolBar.membersButtonClicked()
|
||||
|
||||
// initializing the tooltip
|
||||
tooltip.text: qsTr("Members")
|
||||
tooltip.orientation: StatusToolTip.Orientation.Bottom
|
||||
tooltip.y: parent.height + 12
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 24
|
||||
width: 1
|
||||
color: Theme.palette.directColor7
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
visible: notificationButton.visible &&
|
||||
(menuButton.visible || membersButton.visible || searchButton.visible)
|
||||
}
|
||||
StatusFlatRoundButton {
|
||||
id: menuButton
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "more"
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
visible: !!statusChatToolBar.popupMenu
|
||||
|
||||
StatusFlatRoundButton {
|
||||
id: notificationButton
|
||||
width: 32
|
||||
height: 32
|
||||
// initializing the tooltip
|
||||
tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened
|
||||
tooltip.text: qsTr("More")
|
||||
tooltip.orientation: StatusToolTip.Orientation.Bottom
|
||||
tooltip.y: parent.height + 12
|
||||
|
||||
icon.name: "notification"
|
||||
icon.height: 21
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
property bool showMoreMenu: false
|
||||
onClicked: {
|
||||
menuButton.highlighted = true
|
||||
|
||||
// initializing the tooltip
|
||||
tooltip.text: qsTr("Activity")
|
||||
tooltip.orientation: StatusToolTip.Orientation.Bottom
|
||||
tooltip.y: parent.height + 12
|
||||
let originalOpenHandler = popupMenuSlot.item.openHandler
|
||||
let originalCloseHandler = popupMenuSlot.item.closeHandler
|
||||
|
||||
onClicked: statusChatToolBar.notificationButtonClicked()
|
||||
|
||||
StatusBadge {
|
||||
id: statusBadge
|
||||
|
||||
visible: value > 0
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.right
|
||||
anchors.topMargin: -3
|
||||
anchors.leftMargin: {
|
||||
if (statusBadge.value > 99) {
|
||||
return -22
|
||||
popupMenuSlot.item.openHandler = function () {
|
||||
if (!!originalOpenHandler) {
|
||||
originalOpenHandler()
|
||||
}
|
||||
}
|
||||
if (statusBadge.value > 9) {
|
||||
return -21
|
||||
|
||||
popupMenuSlot.item.closeHandler = function () {
|
||||
menuButton.highlighted = false
|
||||
if (!!originalCloseHandler) {
|
||||
originalCloseHandler()
|
||||
}
|
||||
}
|
||||
return -18
|
||||
|
||||
popupMenuSlot.item.openHandler = originalOpenHandler
|
||||
popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
|
||||
statusChatToolBar.menuButtonClicked()
|
||||
}
|
||||
|
||||
value: statusChatToolBar.notificationCount
|
||||
border.width: 2
|
||||
border.color: parent.hovered ? Theme.palette.baseColor2 : Theme.palette.statusAppLayout.backgroundColor
|
||||
Loader {
|
||||
id: popupMenuSlot
|
||||
active: !!statusChatToolBar.popupMenu
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 24
|
||||
width: 1
|
||||
color: Theme.palette.directColor7
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
visible: notificationButton.visible &&
|
||||
(menuButton.visible || membersButton.visible || searchButton.visible)
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
id: notificationButton
|
||||
width: 32
|
||||
height: 32
|
||||
|
||||
icon.name: "notification"
|
||||
icon.height: 21
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
|
||||
// initializing the tooltip
|
||||
tooltip.text: qsTr("Activity")
|
||||
tooltip.orientation: StatusToolTip.Orientation.Bottom
|
||||
tooltip.y: parent.height + 12
|
||||
|
||||
onClicked: statusChatToolBar.notificationButtonClicked()
|
||||
|
||||
StatusBadge {
|
||||
id: statusBadge
|
||||
|
||||
visible: value > 0
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.right
|
||||
anchors.topMargin: -3
|
||||
anchors.leftMargin: {
|
||||
if (statusBadge.value > 99) {
|
||||
return -22
|
||||
}
|
||||
if (statusBadge.value > 9) {
|
||||
return -21
|
||||
}
|
||||
return -18
|
||||
}
|
||||
|
||||
value: statusChatToolBar.notificationCount
|
||||
border.width: 2
|
||||
border.color: parent.hovered ? Theme.palette.baseColor2 : Theme.palette.statusAppLayout.backgroundColor
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue