fix(StatusModalFooter): Prevent footer's buttons overflow

Closes: #11449
This commit is contained in:
Michał Cieślak 2024-02-08 18:00:16 +01:00 committed by Michał
parent 6aee04e33e
commit ee3e1febb6
4 changed files with 91 additions and 7 deletions

View File

@ -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

View File

@ -1,5 +1,5 @@
import QtQuick 2.14 import QtQuick 2.15
import QtQuick.Layouts 1.14 import QtQuick.Layouts 1.15
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
@ -34,6 +34,8 @@ StatusModal {
} }
} }
} }
Layout.minimumWidth: implicitWidth
} }
property Item nextButton: StatusButton { property Item nextButton: StatusButton {

View File

@ -9,7 +9,7 @@ import StatusQ.Popups 0.1
Rectangle { Rectangle {
id: statusModalFooter id: root
property list<Item> leftButtons property list<Item> leftButtons
property list<StatusBaseButton> rightButtons property list<StatusBaseButton> rightButtons
@ -22,15 +22,21 @@ Rectangle {
onLeftButtonsChanged: { onLeftButtonsChanged: {
for (let idx in leftButtons) { for (let idx in leftButtons) {
leftButtons[idx].parent = leftButtonsLayout leftButtons[idx].parent = leftButtonsLayout
leftButtons[idx].Layout.fillWidth
= Qt.binding(() => root.width < root.implicitWidth)
} }
} }
onRightButtonsChanged: { onRightButtonsChanged: {
for (let idx in rightButtons) { for (let idx in rightButtons) {
rightButtons[idx].parent = rightButtonsLayout 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 implicitHeight: rootLayout.implicitHeight + 30
RowLayout { RowLayout {
@ -45,19 +51,20 @@ Rectangle {
RowLayout { RowLayout {
id: leftButtonsLayout id: leftButtonsLayout
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
visible: statusModalFooter.showFooter visible: root.showFooter
spacing: 16 spacing: 16
} }
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true
Layout.minimumWidth: 16
} }
RowLayout { RowLayout {
id: rightButtonsLayout id: rightButtonsLayout
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
visible: statusModalFooter.showFooter visible: root.showFooter
spacing: 16 spacing: 16
} }
@ -70,7 +77,7 @@ Rectangle {
color: parent.color color: parent.color
StatusModalDivider { 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 anchors.top: parent.top
width: parent.width width: parent.width
} }

View File

@ -1,6 +1,6 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQml.Models 2.15
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import QtQml.Models 2.15
import StatusQ.Controls 0.1 import StatusQ.Controls 0.1
import StatusQ.Popups.Dialog 0.1 import StatusQ.Popups.Dialog 0.1
@ -94,6 +94,8 @@ StatusDialog {
onClicked: { onClicked: {
d.displaySigningPanel = false d.displaySigningPanel = false
} }
Layout.minimumWidth: implicitWidth
} }
} }
} }