diff --git a/client/ui/qml/Controls2/DrawerType2.qml b/client/ui/qml/Controls2/DrawerType2.qml index 0cfdc0b03..3a5d981cb 100644 --- a/client/ui/qml/Controls2/DrawerType2.qml +++ b/client/ui/qml/Controls2/DrawerType2.qml @@ -86,13 +86,6 @@ Item { } } - /** Set once based on first implicit height change once all children are layed out */ - Component.onCompleted: { - if (root.isCollapsed && root.collapsedHeight == 0) { - root.collapsedHeight = drawerContent.implicitHeight - } - } - Rectangle { id: background @@ -186,7 +179,7 @@ Item { y: root.height - drawerContent.height state: root.drawerCollapsed - implicitHeight: root.isCollapsed ? collapsedLoader.implicitHeight : expandedLoader.implicitHeight + implicitHeight: root.isCollapsed ? collapsedHeight : expandedHeight onStateChanged: { if (root.isCollapsed) { @@ -246,7 +239,6 @@ Item { Loader { id: collapsedLoader - visible: root.isCollapsed sourceComponent: root.collapsedContent anchors.right: parent.right diff --git a/client/ui/qml/Pages2/PageHome.qml b/client/ui/qml/Pages2/PageHome.qml index 39fa37ea5..32cf8f4f3 100644 --- a/client/ui/qml/Pages2/PageHome.qml +++ b/client/ui/qml/Pages2/PageHome.qml @@ -107,131 +107,128 @@ PageType { id: drawer anchors.fill: parent - collapsedContent: ColumnLayout { - DividerType { - Layout.topMargin: 10 - Layout.fillWidth: false - Layout.preferredWidth: 20 - Layout.preferredHeight: 2 - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + collapsedContent: Item { + implicitHeight: Qt.platform.os !== "ios" ? root.height * 0.9 : screen.height * 0.77 + Component.onCompleted: { + drawer.expandedHeight = implicitHeight } + ColumnLayout { + id: collapsed - RowLayout { - Layout.topMargin: 14 - Layout.leftMargin: 24 - Layout.rightMargin: 24 - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + anchors.left: parent.left + anchors.right: parent.right - spacing: 0 + Component.onCompleted: { + drawer.collapsedHeight = collapsed.implicitHeight + } - Connections { - target: drawer - function onEntered() { - collapsedButtonChevron.backgroundColor = collapsedButtonChevron.hoveredColor - collapsedButtonHeader.opacity = 0.8 - } + DividerType { + Layout.topMargin: 10 + Layout.fillWidth: false + Layout.preferredWidth: 20 + Layout.preferredHeight: 2 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + } - function onExited() { - collapsedButtonChevron.backgroundColor = collapsedButtonChevron.defaultColor - collapsedButtonHeader.opacity = 1 - } + RowLayout { + Layout.topMargin: 14 + Layout.leftMargin: 24 + Layout.rightMargin: 24 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + + spacing: 0 - function onPressed(pressed, entered) { - collapsedButtonChevron.backgroundColor = pressed ? collapsedButtonChevron.pressedColor : entered ? collapsedButtonChevron.hoveredColor : collapsedButtonChevron.defaultColor - collapsedButtonHeader.opacity = 0.7 + Connections { + target: drawer + function onEntered() { + if (drawer.isCollapsed) { + collapsedButtonChevron.backgroundColor = collapsedButtonChevron.hoveredColor + collapsedButtonHeader.opacity = 0.8 + } else { + collapsedButtonHeader.opacity = 1 + } + } + + function onExited() { + if (drawer.isCollapsed) { + collapsedButtonChevron.backgroundColor = collapsedButtonChevron.defaultColor + collapsedButtonHeader.opacity = 1 + } else { + collapsedButtonHeader.opacity = 1 + } + } + + function onPressed(pressed, entered) { + if (drawer.isCollapsed) { + collapsedButtonChevron.backgroundColor = pressed ? collapsedButtonChevron.pressedColor : entered ? collapsedButtonChevron.hoveredColor : collapsedButtonChevron.defaultColor + collapsedButtonHeader.opacity = 0.7 + } else { + collapsedButtonHeader.opacity = 1 + } + } } - } - Header1TextType { - id: collapsedButtonHeader - Layout.maximumWidth: drawer.width - 48 - 18 - 12 // todo + Header1TextType { + id: collapsedButtonHeader + Layout.maximumWidth: drawer.isCollapsed ? drawer.width - 48 - 18 - 12 : drawer.width// todo - maximumLineCount: 2 - elide: Qt.ElideRight + maximumLineCount: 2 + elide: Qt.ElideRight - text: ServersModel.defaultServerName - horizontalAlignment: Qt.AlignHCenter + text: ServersModel.defaultServerName + horizontalAlignment: Qt.AlignHCenter - Behavior on opacity { - PropertyAnimation { duration: 200 } + Behavior on opacity { + PropertyAnimation { duration: 200 } + } } - } - ImageButtonType { - id: collapsedButtonChevron + ImageButtonType { + id: collapsedButtonChevron - Layout.leftMargin: 8 + Layout.leftMargin: 8 - hoverEnabled: false - image: "qrc:/images/controls/chevron-down.svg" - imageColor: "#d7d8db" + visible: drawer.isCollapsed - icon.width: 18 - icon.height: 18 - backgroundRadius: 16 - horizontalPadding: 4 - topPadding: 4 - bottomPadding: 3 + hoverEnabled: false + image: "qrc:/images/controls/chevron-down.svg" + imageColor: "#d7d8db" - onClicked: { - if (drawer.isCollapsed) { - drawer.open() + icon.width: 18 + icon.height: 18 + backgroundRadius: 16 + horizontalPadding: 4 + topPadding: 4 + bottomPadding: 3 + + onClicked: { + if (drawer.isCollapsed) { + drawer.open() + } } } } - } - LabelTextType { - id: collapsedServerMenuDescription - Layout.bottomMargin: 44 - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - text: ServersModel.defaultServerDescriptionCollapsed - } - } - expandedContent: Item { - id: serverMenuContainer - - implicitHeight: Qt.platform.os !== "ios" ? root.height * 0.9 : screen.height * 0.77 - - Component.onCompleted: { - drawer.expandedHeight = serverMenuContainer.implicitHeight + LabelTextType { + id: collapsedServerMenuDescription + Layout.bottomMargin: drawer.isCollapsed ? 44 : ServersModel.isDefaultServerFromApi ? 89 : 44 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + text: drawer.isCollapsed ? ServersModel.defaultServerDescriptionCollapsed : ServersModel.defaultServerDescriptionExpanded + } } ColumnLayout { id: serversMenuHeader - anchors.top: parent.top + anchors.top: collapsed.bottom anchors.right: parent.right anchors.left: parent.left - - Header1TextType { - Layout.fillWidth: true - Layout.topMargin: 14 - Layout.leftMargin: 16 - Layout.rightMargin: 16 - - text: ServersModel.defaultServerName - horizontalAlignment: Qt.AlignHCenter - maximumLineCount: 2 - elide: Qt.ElideRight - } - - LabelTextType { - id: expandedServersMenuDescription - Layout.bottomMargin: ServersModel.isDefaultServerFromApi ? 69 : 24 - Layout.fillWidth: true - horizontalAlignment: Qt.AlignHCenter - verticalAlignment: Qt.AlignVCenter - text: ServersModel.defaultServerDescriptionExpanded - } - RowLayout { Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter spacing: 8 visible: !ServersModel.isDefaultServerFromApi - onVisibleChanged: expandedServersMenuDescription.Layout DropDownType { id: containersDropDown @@ -299,7 +296,6 @@ PageType { } } - ButtonGroup { id: serversRadioButtonGroup }