From a813b1c715cad7c9446d5e73dddde5cab2b3ae2e Mon Sep 17 00:00:00 2001 From: miruka Date: Tue, 16 Jul 2019 12:37:11 -0400 Subject: [PATCH] HPage with SwipeView to show reduced side pane --- TODO.md | 1 + src/qml/Base/HPage.qml | 55 ++++++++++++++++++ src/qml/Pages/EditAccount/EditAccount.qml | 70 +++++++---------------- src/qml/SidePane/SidePane.qml | 6 +- src/qml/UI.qml | 5 +- 5 files changed, 83 insertions(+), 54 deletions(-) create mode 100644 src/qml/Base/HPage.qml diff --git a/TODO.md b/TODO.md index ca32319c..5af32364 100644 --- a/TODO.md +++ b/TODO.md @@ -1,3 +1,4 @@ +- Way to round avatar corners to allow box radius - If avatar is set, name color from average color? - Wrong avatar for group rooms - Reduce messages ListView cacheBuffer height once http thumbnails diff --git a/src/qml/Base/HPage.qml b/src/qml/Base/HPage.qml new file mode 100644 index 00000000..0ee79fed --- /dev/null +++ b/src/qml/Base/HPage.qml @@ -0,0 +1,55 @@ +// Copyright 2019 miruka +// This file is part of harmonyqml, licensed under LGPLv3. + +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import QtQuick.Layouts 1.12 +import "../SidePane" + +SwipeView { + default property alias columnChildren: contentColumn.children + property alias page: innerPage + property alias flickable: innerFlickable + + property bool wide: width > 414 + leftPadding + rightPadding + + property int currentSpacing: + Math.min(theme.spacing * width / 400, theme.spacing * 2) + + id: swipeView + currentIndex: 1 + clip: true + interactive: sidePane.reduce + + SidePane { + canAutoSize: false + autoWidthRatio: 1.0 + visible: swipeView.interactive + onVisibleChanged: swipeView.setCurrentIndex(1) + } + + Page { + id: innerPage + background: null + + leftPadding: currentSpacing < theme.spacing ? 0 : currentSpacing + rightPadding: leftPadding + Behavior on leftPadding { HNumberAnimation {} } + + Flickable { + id: innerFlickable + anchors.fill: parent + clip: true + contentWidth: parent.width + contentHeight: contentColumn.childrenRect.height + interactive: contentWidth > width || contentHeight > height + + HColumnLayout { + id: contentColumn + spacing: theme.spacing + width: innerFlickable.width + height: innerFlickable.height + } + } + } +} diff --git a/src/qml/Pages/EditAccount/EditAccount.qml b/src/qml/Pages/EditAccount/EditAccount.qml index 3ca32673..9989ae92 100644 --- a/src/qml/Pages/EditAccount/EditAccount.qml +++ b/src/qml/Pages/EditAccount/EditAccount.qml @@ -7,18 +7,15 @@ import QtQuick.Layouts 1.12 import "../../Base" import "../../utils.js" as Utils -Page { +HPage { id: editAccount - property bool wide: width > 414 + padding * 2 property int avatarPreferredSize: theme.minimumSupportedWidth - property int currentSpacing: - Math.min(theme.spacing * width / 400, theme.spacing * 2) property string userId: "" readonly property var userInfo: users.find(userId) - header: HRectangle { + page.header: HRectangle { width: parent.width color: theme.pageHeadersBackground @@ -50,52 +47,29 @@ Page { } } - background: null + HRectangle { + color: theme.box.background - leftPadding: currentSpacing < theme.spacing ? 0 : currentSpacing - rightPadding: leftPadding - Behavior on leftPadding { HNumberAnimation {} } + Layout.alignment: Qt.AlignCenter - Flickable { - id: flickable - anchors.fill: parent - clip: true - contentWidth: parent.width - contentHeight: boxColumn.childrenRect.height - interactive: contentWidth > width || contentHeight > height + Layout.maximumWidth: Math.min(parent.width, 640) + Layout.preferredWidth: + wide ? parent.width : avatarPreferredSize - HColumnLayout { - id: boxColumn - spacing: theme.spacing * 2 - width: flickable.width - height: flickable.height + Layout.preferredHeight: childrenRect.height - HRectangle { - color: theme.box.background - // radius: theme.box.radius - - Layout.alignment: Qt.AlignCenter - - Layout.maximumWidth: Math.min(parent.width, 640) - Layout.preferredWidth: - wide ? parent.width : avatarPreferredSize - - Layout.preferredHeight: childrenRect.height - - Profile { width: parent.width } - } - - // HRectangle { - // color: theme.box.background - // radius: theme.box.radius - // ClientSettings { width: parent.width } - // } - - // HRectangle { - // color: theme.box.background - // radius: theme.box.radius - // Devices { width: parent.width } - // } - } + Profile { width: parent.width } } + + // HRectangle { + // color: theme.box.background + // radius: theme.box.radius + // ClientSettings { width: parent.width } + // } + + // HRectangle { + // color: theme.box.background + // radius: theme.box.radius + // Devices { width: parent.width } + // } } diff --git a/src/qml/SidePane/SidePane.qml b/src/qml/SidePane/SidePane.qml index cf05c28c..64b3b5ba 100644 --- a/src/qml/SidePane/SidePane.qml +++ b/src/qml/SidePane/SidePane.qml @@ -13,6 +13,7 @@ HRectangle { property bool canAutoSize: true property int parentWidth: parent.width + property real autoWidthRatio: theme.sidePane.autoWidthRatio // Needed for SplitView because it breaks the binding on collapse onParentWidthChanged: if (canAutoSize) { @@ -21,10 +22,7 @@ HRectangle { property int autoWidth: - Math.min( - parentWidth * theme.sidePane.autoWidthRatio, - theme.sidePane.maximumAutoWidth - ) + Math.min(parentWidth * autoWidthRatio, theme.sidePane.maximumAutoWidth) property bool collapse: canAutoSize ? diff --git a/src/qml/UI.qml b/src/qml/UI.qml index e3cca8d6..85fbf8dc 100644 --- a/src/qml/UI.qml +++ b/src/qml/UI.qml @@ -41,10 +41,11 @@ Item { canAutoSize: uiSplitView.canAutoSize width: implicitWidth // Initial width - Layout.maximumWidth: parent.width Layout.minimumWidth: reduce ? 0 : theme.sidePane.collapsedWidth - Behavior on Layout.minimumWidth { HNumberAnimation {} } + Behavior on Layout.minimumWidth { + HNumberAnimation { duration: theme.animationDuration / 2 } + } } StackView {