fix: invalid width for items chat list

- simplify StatusChatListAndCategories, and propagate the width
- set the correct width in StatusChatList's actions (using
`Layout.fillWidth: true`)
- add a width slider to the storybook page to be able experiment with
the whole component width

Fixes #11047
This commit is contained in:
Lukáš Tinkl 2023-06-13 13:50:59 +02:00 committed by Lukáš Tinkl
parent 362250ba92
commit 2cb2f8354d
3 changed files with 57 additions and 54 deletions

View File

@ -1,5 +1,6 @@
import QtQuick 2.14 import QtQuick 2.15
import QtQuick.Controls 2.14 import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import StatusQ.Components 0.1 import StatusQ.Components 0.1
@ -17,8 +18,8 @@ SplitView {
SplitView.fillHeight: true SplitView.fillHeight: true
StatusChatListAndCategories { StatusChatListAndCategories {
anchors.centerIn: parent
anchors.fill: parent width: ctrlWidth.value
model: ListModel { model: ListModel {
ListElement { ListElement {
@ -27,6 +28,7 @@ SplitView {
name: "X" name: "X"
subItems: [] subItems: []
isCategory: false isCategory: false
categoryId: ""
active: true active: true
notificationsCount: 12 notificationsCount: 12
hasUnreadMessages: false hasUnreadMessages: false
@ -39,8 +41,12 @@ SplitView {
ListElement { ListElement {
itemId: "id2" itemId: "id2"
position: 0 position: 0
categoryPosition: 0
categoryId: "id2"
name: "Y" name: "Y"
icon: ""
isCategory: true isCategory: true
muted: false
subItems: [ subItems: [
ListElement { ListElement {
itemId: "id3" itemId: "id3"
@ -92,5 +98,18 @@ SplitView {
SplitView.preferredHeight: 200 SplitView.preferredHeight: 200
logsView.logText: logs.logText logsView.logText: logs.logText
RowLayout {
Label { text: "Width:" }
Slider {
id: ctrlWidth
from: 30
to: 600
stepSize: 10
value: 200 // smaller than the default 288
ToolTip.text: ctrlWidth.value
ToolTip.visible: ctrlWidth.pressed
}
}
} }
} }

View File

@ -1,4 +1,5 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15 as QC import QtQuick.Controls 2.15 as QC
import StatusQ.Core 0.1 import StatusQ.Core 0.1
@ -116,7 +117,7 @@ Item {
StatusChatListCategoryItem { StatusChatListCategoryItem {
id: statusChatListCategoryItem id: statusChatListCategoryItem
objectName: "categoryItem" objectName: "categoryItem"
width: chatListDelegate.width Layout.fillWidth: true
visible: draggableItem.isCategory visible: draggableItem.isCategory
function setupPopup() { function setupPopup() {
@ -159,7 +160,7 @@ Item {
StatusChatListItem { StatusChatListItem {
id: statusChatListItem id: statusChatListItem
objectName: model.name objectName: model.name
width: chatListDelegate.width Layout.fillWidth: true
height: visible ? (statusChatListItem.implicitHeight + 4) /*spacing between non-collapsed items*/ : 0 height: visible ? (statusChatListItem.implicitHeight + 4) /*spacing between non-collapsed items*/ : 0
visible: (!draggableItem.isCategory && model.categoryOpened) visible: (!draggableItem.isCategory && model.categoryOpened)
originalOrder: model.position originalOrder: model.position

View File

@ -1,10 +1,6 @@
import QtQuick 2.14 import QtQuick 2.15
import QtQml.Models 2.14
import QtQuick.Controls 2.14 as QC
import StatusQ.Core.Utils 0.1
import StatusQ.Components 0.1 import StatusQ.Components 0.1
import StatusQ.Popups 0.1
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import SortFilterProxyModel 0.2 import SortFilterProxyModel 0.2
@ -12,8 +8,8 @@ import SortFilterProxyModel 0.2
Item { Item {
id: root id: root
implicitHeight: chatListsAndCategories.height implicitHeight: statusChatList.height
implicitWidth: chatListsAndCategories.width implicitWidth: statusChatList.width
property alias highlightItem: statusChatList.highlightItem property alias highlightItem: statusChatList.highlightItem
@ -36,9 +32,7 @@ Item {
MouseArea { MouseArea {
id: sensor id: sensor
anchors.top: parent.top anchors.fill: parent
width: root.width
height: root.height
acceptedButtons: Qt.LeftButton | Qt.RightButton acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: { onClicked: {
if (mouse.button === Qt.RightButton && showPopupMenu && !!root.popupMenu) { if (mouse.button === Qt.RightButton && showPopupMenu && !!root.popupMenu) {
@ -47,28 +41,18 @@ Item {
} }
} }
Column {
id: chatListsAndCategories
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
spacing: 4
StatusChatList { StatusChatList {
objectName: "statusChatListAndCategoriesChatList" objectName: "statusChatListAndCategoriesChatList"
id: statusChatList id: statusChatList
width: parent.width
visible: statusChatList.model.count > 0 visible: statusChatList.model.count > 0
onChatItemSelected: root.chatItemSelected(categoryId, id) onChatItemSelected: root.chatItemSelected(categoryId, id)
onChatItemUnmuted: root.chatItemUnmuted(id) onChatItemUnmuted: root.chatItemUnmuted(id)
onChatItemReordered: { onChatItemReordered: root.chatItemReordered(categoryId, chatId, to)
root.chatItemReordered(categoryId, chatId, to)
}
onCategoryReordered: root.chatListCategoryReordered(categoryId, to) onCategoryReordered: root.chatListCategoryReordered(categoryId, to)
draggableItems: root.draggableItems draggableItems: root.draggableItems
showCategoryActionButtons: root.showCategoryActionButtons showCategoryActionButtons: root.showCategoryActionButtons
onCategoryAddButtonClicked: { onCategoryAddButtonClicked: root.categoryAddButtonClicked(id)
root.categoryAddButtonClicked(id)
}
model: SortFilterProxyModel { model: SortFilterProxyModel {
sourceModel: root.model sourceModel: root.model
@ -88,7 +72,6 @@ Item {
categoryPopupMenu: root.categoryPopupMenu categoryPopupMenu: root.categoryPopupMenu
} }
} }
}
Loader { Loader {
id: popupMenuSlot id: popupMenuSlot