From ee3e1febb632e951332288d13996c9357d54c792 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Thu, 8 Feb 2024 18:00:16 +0100 Subject: [PATCH] fix(StatusModalFooter): Prevent footer's buttons overflow Closes: #11449 --- storybook/pages/StatusModalFooterPage.qml | 73 +++++++++++++++++++ .../src/StatusQ/Popups/StatusStackModal.qml | 6 +- .../Popups/statusModal/StatusModalFooter.qml | 15 +++- .../popups/SharedAddressesPopup.qml | 4 +- 4 files changed, 91 insertions(+), 7 deletions(-) create mode 100644 storybook/pages/StatusModalFooterPage.qml diff --git a/storybook/pages/StatusModalFooterPage.qml b/storybook/pages/StatusModalFooterPage.qml new file mode 100644 index 0000000000..9f709d524c --- /dev/null +++ b/storybook/pages/StatusModalFooterPage.qml @@ -0,0 +1,73 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +import Storybook 1.0 + +import StatusQ.Controls 0.1 +import StatusQ.Popups 0.1 + +SplitView { + id: root + + orientation: Qt.Vertical + + Item { + SplitView.fillWidth: true + SplitView.fillHeight: true + + PopupBackground { + anchors.fill: parent + } + + StatusModal { + id: footer + + anchors.centerIn: parent + height: 300 + visible: true + modal: false + closePolicy: Popup.NoAutoClose + + title: "Some modal" + + width: Math.floor(root.width * slider.value) + + rightButtons: [ + StatusButton { + text: qsTr("Some button") + }, + + StatusButton { + text: qsTr("Some other button") + } + ] + leftButtons: StatusBackButton { + Layout.minimumWidth: implicitWidth + } + } + } + + LogsAndControlsPanel { + SplitView.minimumHeight: 100 + SplitView.preferredHeight: 200 + + SplitView.fillWidth: true + + ColumnLayout { + Label { + text: `Popup width: ${footer.width}` + } + + Slider { + id: slider + + from: 0.2 + to: 1 + value: 0.5 + } + } + } +} + +// category: Components diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusStackModal.qml b/ui/StatusQ/src/StatusQ/Popups/StatusStackModal.qml index ea2746ddf9..df8024aa2d 100644 --- a/ui/StatusQ/src/StatusQ/Popups/StatusStackModal.qml +++ b/ui/StatusQ/src/StatusQ/Popups/StatusStackModal.qml @@ -1,5 +1,5 @@ -import QtQuick 2.14 -import QtQuick.Layouts 1.14 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 @@ -34,6 +34,8 @@ StatusModal { } } } + + Layout.minimumWidth: implicitWidth } property Item nextButton: StatusButton { diff --git a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalFooter.qml b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalFooter.qml index 4935978338..1750debcde 100644 --- a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalFooter.qml +++ b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalFooter.qml @@ -9,7 +9,7 @@ import StatusQ.Popups 0.1 Rectangle { - id: statusModalFooter + id: root property list leftButtons property list rightButtons @@ -22,15 +22,21 @@ Rectangle { onLeftButtonsChanged: { for (let idx in leftButtons) { leftButtons[idx].parent = leftButtonsLayout + leftButtons[idx].Layout.fillWidth + = Qt.binding(() => root.width < root.implicitWidth) } } onRightButtonsChanged: { for (let idx in rightButtons) { rightButtons[idx].parent = rightButtonsLayout + rightButtons[idx].Layout.fillWidth + = Qt.binding(() => root.width < root.implicitWidth) } } + implicitWidth: rootLayout.implicitWidth + rootLayout.anchors.leftMargin + + rootLayout.anchors.rightMargin implicitHeight: rootLayout.implicitHeight + 30 RowLayout { @@ -45,19 +51,20 @@ Rectangle { RowLayout { id: leftButtonsLayout Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft - visible: statusModalFooter.showFooter + visible: root.showFooter spacing: 16 } Item { Layout.fillWidth: true + Layout.minimumWidth: 16 } RowLayout { id: rightButtonsLayout Layout.alignment: Qt.AlignVCenter | Qt.AlignRight - visible: statusModalFooter.showFooter + visible: root.showFooter spacing: 16 } @@ -70,7 +77,7 @@ Rectangle { color: parent.color StatusModalDivider { - visible: (statusModalFooter.leftButtons.length || statusModalFooter.rightButtons.length) && rootLayout.height > 1 + visible: (root.leftButtons.length || root.rightButtons.length) && rootLayout.height > 1 anchors.top: parent.top width: parent.width } diff --git a/ui/app/AppLayouts/Communities/popups/SharedAddressesPopup.qml b/ui/app/AppLayouts/Communities/popups/SharedAddressesPopup.qml index ee01da3d1f..9222f9d453 100644 --- a/ui/app/AppLayouts/Communities/popups/SharedAddressesPopup.qml +++ b/ui/app/AppLayouts/Communities/popups/SharedAddressesPopup.qml @@ -1,6 +1,6 @@ import QtQuick 2.15 -import QtQml.Models 2.15 import QtQuick.Layouts 1.15 +import QtQml.Models 2.15 import StatusQ.Controls 0.1 import StatusQ.Popups.Dialog 0.1 @@ -94,6 +94,8 @@ StatusDialog { onClicked: { d.displaySigningPanel = false } + + Layout.minimumWidth: implicitWidth } } }