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
Lukáš Tinkl
parent
362250ba92
commit
2cb2f8354d
|
|
@ -1,5 +1,6 @@
|
|||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
|
|
@ -17,8 +18,8 @@ SplitView {
|
|||
SplitView.fillHeight: true
|
||||
|
||||
StatusChatListAndCategories {
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.centerIn: parent
|
||||
width: ctrlWidth.value
|
||||
|
||||
model: ListModel {
|
||||
ListElement {
|
||||
|
|
@ -27,6 +28,7 @@ SplitView {
|
|||
name: "X"
|
||||
subItems: []
|
||||
isCategory: false
|
||||
categoryId: ""
|
||||
active: true
|
||||
notificationsCount: 12
|
||||
hasUnreadMessages: false
|
||||
|
|
@ -39,8 +41,12 @@ SplitView {
|
|||
ListElement {
|
||||
itemId: "id2"
|
||||
position: 0
|
||||
categoryPosition: 0
|
||||
categoryId: "id2"
|
||||
name: "Y"
|
||||
icon: ""
|
||||
isCategory: true
|
||||
muted: false
|
||||
subItems: [
|
||||
ListElement {
|
||||
itemId: "id3"
|
||||
|
|
@ -92,5 +98,18 @@ SplitView {
|
|||
SplitView.preferredHeight: 200
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Controls 2.15 as QC
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
|
|
@ -116,7 +117,7 @@ Item {
|
|||
StatusChatListCategoryItem {
|
||||
id: statusChatListCategoryItem
|
||||
objectName: "categoryItem"
|
||||
width: chatListDelegate.width
|
||||
Layout.fillWidth: true
|
||||
visible: draggableItem.isCategory
|
||||
|
||||
function setupPopup() {
|
||||
|
|
@ -159,7 +160,7 @@ Item {
|
|||
StatusChatListItem {
|
||||
id: statusChatListItem
|
||||
objectName: model.name
|
||||
width: chatListDelegate.width
|
||||
Layout.fillWidth: true
|
||||
height: visible ? (statusChatListItem.implicitHeight + 4) /*spacing between non-collapsed items*/ : 0
|
||||
visible: (!draggableItem.isCategory && model.categoryOpened)
|
||||
originalOrder: model.position
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
import QtQuick 2.14
|
||||
import QtQml.Models 2.14
|
||||
import QtQuick.Controls 2.14 as QC
|
||||
import QtQuick 2.15
|
||||
|
||||
import StatusQ.Core.Utils 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
import StatusQ.Core 0.1
|
||||
|
||||
import SortFilterProxyModel 0.2
|
||||
|
|
@ -12,8 +8,8 @@ import SortFilterProxyModel 0.2
|
|||
Item {
|
||||
id: root
|
||||
|
||||
implicitHeight: chatListsAndCategories.height
|
||||
implicitWidth: chatListsAndCategories.width
|
||||
implicitHeight: statusChatList.height
|
||||
implicitWidth: statusChatList.width
|
||||
|
||||
property alias highlightItem: statusChatList.highlightItem
|
||||
|
||||
|
|
@ -36,9 +32,7 @@ Item {
|
|||
|
||||
MouseArea {
|
||||
id: sensor
|
||||
anchors.top: parent.top
|
||||
width: root.width
|
||||
height: root.height
|
||||
anchors.fill: parent
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
onClicked: {
|
||||
if (mouse.button === Qt.RightButton && showPopupMenu && !!root.popupMenu) {
|
||||
|
|
@ -47,46 +41,35 @@ Item {
|
|||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: chatListsAndCategories
|
||||
StatusChatList {
|
||||
objectName: "statusChatListAndCategoriesChatList"
|
||||
id: statusChatList
|
||||
width: parent.width
|
||||
visible: statusChatList.model.count > 0
|
||||
onChatItemSelected: root.chatItemSelected(categoryId, id)
|
||||
onChatItemUnmuted: root.chatItemUnmuted(id)
|
||||
onChatItemReordered: root.chatItemReordered(categoryId, chatId, to)
|
||||
onCategoryReordered: root.chatListCategoryReordered(categoryId, to)
|
||||
draggableItems: root.draggableItems
|
||||
showCategoryActionButtons: root.showCategoryActionButtons
|
||||
onCategoryAddButtonClicked: root.categoryAddButtonClicked(id)
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
spacing: 4
|
||||
|
||||
StatusChatList {
|
||||
objectName: "statusChatListAndCategoriesChatList"
|
||||
id: statusChatList
|
||||
visible: statusChatList.model.count > 0
|
||||
onChatItemSelected: root.chatItemSelected(categoryId, id)
|
||||
onChatItemUnmuted: root.chatItemUnmuted(id)
|
||||
onChatItemReordered: {
|
||||
root.chatItemReordered(categoryId, chatId, to)
|
||||
}
|
||||
onCategoryReordered: root.chatListCategoryReordered(categoryId, to)
|
||||
draggableItems: root.draggableItems
|
||||
showCategoryActionButtons: root.showCategoryActionButtons
|
||||
onCategoryAddButtonClicked: {
|
||||
root.categoryAddButtonClicked(id)
|
||||
}
|
||||
|
||||
model: SortFilterProxyModel {
|
||||
sourceModel: root.model
|
||||
sorters: [
|
||||
RoleSorter {
|
||||
roleName: "categoryPosition"
|
||||
priority: 2 // Higher number === higher priority
|
||||
},
|
||||
RoleSorter {
|
||||
roleName: "position"
|
||||
priority: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
popupMenu: root.chatListPopupMenu
|
||||
categoryPopupMenu: root.categoryPopupMenu
|
||||
model: SortFilterProxyModel {
|
||||
sourceModel: root.model
|
||||
sorters: [
|
||||
RoleSorter {
|
||||
roleName: "categoryPosition"
|
||||
priority: 2 // Higher number === higher priority
|
||||
},
|
||||
RoleSorter {
|
||||
roleName: "position"
|
||||
priority: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
popupMenu: root.chatListPopupMenu
|
||||
categoryPopupMenu: root.categoryPopupMenu
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue