mirror of
https://github.com/Nheko-Reborn/nheko.git
synced 2024-11-25 20:48:52 +03:00
Somewhat reenable the adaptive layout
This commit is contained in:
parent
27070386e7
commit
686298e023
5 changed files with 200 additions and 19 deletions
|
@ -5,6 +5,7 @@
|
||||||
import QtQuick 2.9
|
import QtQuick 2.9
|
||||||
import QtQuick.Controls 2.13
|
import QtQuick.Controls 2.13
|
||||||
import QtQuick.Layouts 1.3
|
import QtQuick.Layouts 1.3
|
||||||
|
import "components"
|
||||||
import im.nheko 1.0
|
import im.nheko 1.0
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
|
@ -12,34 +13,48 @@ Rectangle {
|
||||||
|
|
||||||
color: Nheko.colors.window
|
color: Nheko.colors.window
|
||||||
|
|
||||||
SplitView {
|
AdaptiveLayout {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
singlePageMode: width < communityListC.maximumWidth + roomListC.maximumWidth + timlineViewC.minimumWidth
|
||||||
|
|
||||||
|
AdaptiveLayoutElement {
|
||||||
|
id: communityListC
|
||||||
|
|
||||||
|
minimumWidth: Nheko.avatarSize * 2 + Nheko.paddingSmall * 2
|
||||||
|
collapsedWidth: Nheko.avatarSize + Nheko.paddingSmall * 2
|
||||||
|
preferredWidth: Nheko.avatarSize + Nheko.paddingSmall * 2
|
||||||
|
maximumWidth: Nheko.avatarSize * 7 + Nheko.paddingSmall * 2
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
color: Nheko.theme.sidebarBackground
|
||||||
|
}
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
SplitView.minimumWidth: Nheko.avatarSize + Nheko.paddingSmall * 2
|
|
||||||
SplitView.preferredWidth: Nheko.avatarSize + Nheko.paddingSmall * 2
|
|
||||||
SplitView.maximumWidth: Nheko.avatarSize + Nheko.paddingSmall * 2
|
|
||||||
color: Nheko.theme.sidebarBackground
|
|
||||||
}
|
}
|
||||||
|
|
||||||
RoomList {
|
AdaptiveLayoutElement {
|
||||||
//SplitView.maximumWidth: Nheko.avatarSize * 7 + Nheko.paddingSmall * 2
|
id: roomListC
|
||||||
|
|
||||||
|
minimumWidth: Nheko.avatarSize * 5 + Nheko.paddingSmall * 2
|
||||||
|
preferredWidth: Nheko.avatarSize * 5 + Nheko.paddingSmall * 2
|
||||||
|
maximumWidth: Nheko.avatarSize * 10 + Nheko.paddingSmall * 2
|
||||||
|
collapsedWidth: Nheko.avatarSize + Nheko.paddingSmall * 2
|
||||||
|
|
||||||
|
RoomList {
|
||||||
|
}
|
||||||
|
|
||||||
SplitView.minimumWidth: Nheko.avatarSize * 5 + Nheko.paddingSmall * 2
|
|
||||||
SplitView.preferredWidth: Nheko.avatarSize * 5 + Nheko.paddingSmall * 2
|
|
||||||
}
|
}
|
||||||
|
|
||||||
TimelineView {
|
AdaptiveLayoutElement {
|
||||||
id: timeline
|
id: timlineViewC
|
||||||
|
|
||||||
room: Rooms.currentRoom
|
minimumWidth: 400
|
||||||
SplitView.fillWidth: true
|
|
||||||
SplitView.minimumWidth: 400
|
TimelineView {
|
||||||
}
|
id: timeline
|
||||||
|
|
||||||
|
room: Rooms.currentRoom
|
||||||
|
}
|
||||||
|
|
||||||
handle: Rectangle {
|
|
||||||
implicitWidth: 2
|
|
||||||
color: SplitHandle.pressed ? Nheko.colors.highlight : (SplitHandle.hovered ? Nheko.colors.light : Nheko.theme.separator)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,6 +11,9 @@ import QtQuick.Layouts 1.3
|
||||||
import im.nheko 1.0
|
import im.nheko 1.0
|
||||||
|
|
||||||
Page {
|
Page {
|
||||||
|
//leftPadding: Nheko.paddingSmall
|
||||||
|
//rightPadding: Nheko.paddingSmall
|
||||||
|
|
||||||
ListView {
|
ListView {
|
||||||
id: roomlist
|
id: roomlist
|
||||||
|
|
||||||
|
@ -145,6 +148,7 @@ Page {
|
||||||
]
|
]
|
||||||
|
|
||||||
TapHandler {
|
TapHandler {
|
||||||
|
margin: -2
|
||||||
acceptedButtons: Qt.RightButton
|
acceptedButtons: Qt.RightButton
|
||||||
onSingleTapped: {
|
onSingleTapped: {
|
||||||
if (!TimelineManager.isInvite)
|
if (!TimelineManager.isInvite)
|
||||||
|
@ -155,6 +159,7 @@ Page {
|
||||||
}
|
}
|
||||||
|
|
||||||
TapHandler {
|
TapHandler {
|
||||||
|
margin: -2
|
||||||
onSingleTapped: Rooms.setCurrentRoom(model.roomId)
|
onSingleTapped: Rooms.setCurrentRoom(model.roomId)
|
||||||
onLongPressed: {
|
onLongPressed: {
|
||||||
if (!TimelineManager.isInvite)
|
if (!TimelineManager.isInvite)
|
||||||
|
@ -164,6 +169,7 @@ Page {
|
||||||
}
|
}
|
||||||
|
|
||||||
HoverHandler {
|
HoverHandler {
|
||||||
|
margin: -2
|
||||||
id: hovered
|
id: hovered
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -390,6 +396,7 @@ Page {
|
||||||
}
|
}
|
||||||
|
|
||||||
TapHandler {
|
TapHandler {
|
||||||
|
margin: -2
|
||||||
acceptedButtons: Qt.LeftButton
|
acceptedButtons: Qt.LeftButton
|
||||||
onSingleTapped: userInfoPanel.openUserProfile()
|
onSingleTapped: userInfoPanel.openUserProfile()
|
||||||
onLongPressed: userInfoMenu.open()
|
onLongPressed: userInfoMenu.open()
|
||||||
|
@ -397,6 +404,7 @@ Page {
|
||||||
}
|
}
|
||||||
|
|
||||||
TapHandler {
|
TapHandler {
|
||||||
|
margin: -2
|
||||||
acceptedButtons: Qt.RightButton
|
acceptedButtons: Qt.RightButton
|
||||||
onSingleTapped: userInfoMenu.open()
|
onSingleTapped: userInfoMenu.open()
|
||||||
gesturePolicy: TapHandler.ReleaseWithinBounds
|
gesturePolicy: TapHandler.ReleaseWithinBounds
|
||||||
|
|
130
resources/qml/components/AdaptiveLayout.qml
Normal file
130
resources/qml/components/AdaptiveLayout.qml
Normal file
|
@ -0,0 +1,130 @@
|
||||||
|
// SPDX-FileCopyrightText: 2021 Nheko Contributors
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
|
|
||||||
|
import QtQuick 2.15
|
||||||
|
import QtQuick.Controls 2.15
|
||||||
|
import QtQuick.Layouts 1.15
|
||||||
|
import im.nheko 1.0
|
||||||
|
|
||||||
|
Container {
|
||||||
|
//Component.onCompleted: {
|
||||||
|
// parent.width = Qt.binding(function() { return calculatedWidth; })
|
||||||
|
//}
|
||||||
|
|
||||||
|
id: container
|
||||||
|
|
||||||
|
property bool singlePageMode: width < 800
|
||||||
|
property int splitterGrabMargin: Nheko.paddingSmall
|
||||||
|
property int pageIndex: 0
|
||||||
|
property Component handle
|
||||||
|
|
||||||
|
handle: Rectangle {
|
||||||
|
z: 3
|
||||||
|
color: Nheko.theme.separator
|
||||||
|
height: container.height
|
||||||
|
width: visible ? 1 : 0
|
||||||
|
anchors.right: parent.right
|
||||||
|
}
|
||||||
|
|
||||||
|
property Component handleToucharea
|
||||||
|
|
||||||
|
handleToucharea: Item {
|
||||||
|
id: splitter
|
||||||
|
|
||||||
|
property int minimumWidth: parent.minimumWidth
|
||||||
|
property int maximumWidth: parent.maximumWidth
|
||||||
|
property int collapsedWidth: parent.collapsedWidth
|
||||||
|
property bool collapsible: parent.collapsible
|
||||||
|
property int calculatedWidth: {
|
||||||
|
if (!visible)
|
||||||
|
return 0;
|
||||||
|
else if (container.singlePageMode)
|
||||||
|
return container.width;
|
||||||
|
else
|
||||||
|
return (collapsible && x < minimumWidth) ? collapsedWidth : x;
|
||||||
|
}
|
||||||
|
|
||||||
|
//visible: !container.singlePageMode
|
||||||
|
enabled: !container.singlePageMode
|
||||||
|
height: container.height
|
||||||
|
width: 1
|
||||||
|
x: parent.preferredWidth
|
||||||
|
z: 3
|
||||||
|
|
||||||
|
DragHandler {
|
||||||
|
id: dragHandler
|
||||||
|
|
||||||
|
enabled: !container.singlePageMode
|
||||||
|
xAxis.enabled: true
|
||||||
|
yAxis.enabled: false
|
||||||
|
xAxis.minimum: splitter.minimumWidth - 1
|
||||||
|
xAxis.maximum: splitter.maximumWidth
|
||||||
|
margin: container.splitterGrabMargin
|
||||||
|
dragThreshold: 0
|
||||||
|
grabPermissions: PointerHandler.CanTakeOverFromAnything | PointerHandler.ApprovesTakeOverByHandlersOfSameType
|
||||||
|
cursorShape: Qt.SizeHorCursor
|
||||||
|
onActiveChanged: {
|
||||||
|
if (!active)
|
||||||
|
splitter.parent.preferredWidth = splitter.x;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
HoverHandler {
|
||||||
|
enabled: !container.singlePageMode
|
||||||
|
margin: container.splitterGrabMargin
|
||||||
|
cursorShape: Qt.SizeHorCursor
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
anchors.fill: parent
|
||||||
|
Component.onCompleted: {
|
||||||
|
for (var i = 0; i < count - 1; i++) {
|
||||||
|
let handle_ = handle.createObject(contentChildren[i]);
|
||||||
|
let split_ = handleToucharea.createObject(contentChildren[i]);
|
||||||
|
contentChildren[i].width = Qt.binding(function() {
|
||||||
|
return split_.calculatedWidth;
|
||||||
|
});
|
||||||
|
contentChildren[i].splitterWidth = Qt.binding(function() {
|
||||||
|
return handle_.width;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
contentChildren[count - 1].width = Qt.binding(function() {
|
||||||
|
if (container.singlePageMode) {
|
||||||
|
return container.width;
|
||||||
|
} else {
|
||||||
|
var w = container.width;
|
||||||
|
for (var i = 0; i < count - 1; i++) {
|
||||||
|
if (contentChildren[i].width)
|
||||||
|
w = w - contentChildren[i].width;
|
||||||
|
|
||||||
|
}
|
||||||
|
return w;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
contentChildren[count - 1].splitterWidth = 0;
|
||||||
|
for (var i = 0; i < count; i++) {
|
||||||
|
contentChildren[i].height = Qt.binding(function() {
|
||||||
|
return container.height;
|
||||||
|
});
|
||||||
|
contentChildren[i].children[0].height = Qt.binding(function() {
|
||||||
|
return container.height;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
contentItem: ListView {
|
||||||
|
id: view
|
||||||
|
|
||||||
|
model: container.contentModel
|
||||||
|
snapMode: ListView.SnapOneItem
|
||||||
|
orientation: ListView.Horizontal
|
||||||
|
highlightRangeMode: ListView.StrictlyEnforceRange
|
||||||
|
interactive: false
|
||||||
|
highlightMoveDuration: container.singlePageMode ? 200 : 0
|
||||||
|
currentIndex: container.singlePageMode ? container.pageIndex : 0
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
26
resources/qml/components/AdaptiveLayoutElement.qml
Normal file
26
resources/qml/components/AdaptiveLayoutElement.qml
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
// SPDX-FileCopyrightText: 2021 Nheko Contributors
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
|
|
||||||
|
import QtQuick 2.15
|
||||||
|
import QtQuick.Controls 2.15
|
||||||
|
import QtQuick.Layouts 1.15
|
||||||
|
|
||||||
|
Item {
|
||||||
|
property int minimumWidth: 100
|
||||||
|
property int maximumWidth: 400
|
||||||
|
property int collapsedWidth: 40
|
||||||
|
property bool collapsible: true
|
||||||
|
property bool collapsed: width < minimumWidth
|
||||||
|
property int splitterWidth: 1
|
||||||
|
property int preferredWidth: 100
|
||||||
|
|
||||||
|
Component.onCompleted: {
|
||||||
|
children[0].width = Qt.binding(() => {
|
||||||
|
return parent.singlePageMode ? parent.width : width - splitterWidth;
|
||||||
|
});
|
||||||
|
children[0].height = Qt.binding(() => {
|
||||||
|
return parent.height;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
|
@ -178,6 +178,8 @@
|
||||||
<file>qml/voip/PlaceCall.qml</file>
|
<file>qml/voip/PlaceCall.qml</file>
|
||||||
<file>qml/voip/ScreenShare.qml</file>
|
<file>qml/voip/ScreenShare.qml</file>
|
||||||
<file>qml/voip/VideoCall.qml</file>
|
<file>qml/voip/VideoCall.qml</file>
|
||||||
|
<file>qml/components/AdaptiveLayout.qml</file>
|
||||||
|
<file>qml/components/AdaptiveLayoutElement.qml</file>
|
||||||
</qresource>
|
</qresource>
|
||||||
<qresource prefix="/media">
|
<qresource prefix="/media">
|
||||||
<file>media/ring.ogg</file>
|
<file>media/ring.ogg</file>
|
||||||
|
|
Loading…
Reference in a new issue