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.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 {

View File

@ -9,7 +9,7 @@ import StatusQ.Popups 0.1
Rectangle {
id: statusModalFooter
id: root
property list<Item> leftButtons
property list<StatusBaseButton> 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
}

View File

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