diff --git a/storybook/pages/DAppSignRequestModalPage.qml b/storybook/pages/DAppSignRequestModalPage.qml index edf7bb3db45..1c95deb1754 100644 --- a/storybook/pages/DAppSignRequestModalPage.qml +++ b/storybook/pages/DAppSignRequestModalPage.qml @@ -86,6 +86,11 @@ SplitView { } } }', + " +Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nibh. Etiam quis quam. In dapibus augue non sapien. Praesent id justo in neque elementum ultrices. Morbi scelerisque luctus velit. Vivamus ac leo pretium faucibus. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Nullam eget nisl. Aliquam erat volutpat. + + Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Fusce nibh. Etiam quis quam. In dapibus augue non sapien. Praesent id justo in neque elementum ultrices. Fusce nibh. Etiam quis quam. In dapibus augue non sapien. Praesent id justo in neque elementum ultrices. Fusce nibh. Etiam quis quam. In dapibus augue non sapien. Praesent id justo in neque elementum ultrices. Fusce nibh. Etiam quis quam. In dapibus augue non sapien. Praesent id justo in neque elementum ultrices. + ", '"tx":{"data":"0x","from":"0xE2d622C817878dA5143bBE06866ca8E35273Ba8a","gasLimit":"0x5208","gasPrice":"0x048ddbc5","nonce":"0x2a","to":"0xE2d622C817878dA5143bBE06866ca8E35273Ba8a","value":"0x00"}', "" ] @@ -104,7 +109,7 @@ SplitView { } ComboBox { id: contentToSignComboBox - model: ["Long content to sign", "Short content to sign", "Empty content to sign"] + model: ["Long content to sign", "Middle content to sign", "Short content to sign", "Empty content to sign"] currentIndex: 0 } CheckBox { diff --git a/ui/imports/shared/popups/walletconnect/DAppSignRequestModal.qml b/ui/imports/shared/popups/walletconnect/DAppSignRequestModal.qml index 613138eba9b..0b0afafe0d8 100644 --- a/ui/imports/shared/popups/walletconnect/DAppSignRequestModal.qml +++ b/ui/imports/shared/popups/walletconnect/DAppSignRequestModal.qml @@ -127,6 +127,7 @@ SignTransactionModalBase { ContentPanel { Layout.fillWidth: true Layout.fillHeight: true + Layout.bottomMargin: Style.current.bigPadding payloadToDisplay: root.requestPayload visible: !!root.requestPayload } @@ -189,4 +190,4 @@ SignTransactionModalBase { } ] } -} \ No newline at end of file +} diff --git a/ui/imports/shared/popups/walletconnect/panels/ContentPanel.qml b/ui/imports/shared/popups/walletconnect/panels/ContentPanel.qml index b2dd16a73b9..2875e55e04d 100644 --- a/ui/imports/shared/popups/walletconnect/panels/ContentPanel.qml +++ b/ui/imports/shared/popups/walletconnect/panels/ContentPanel.qml @@ -1,77 +1,79 @@ -import QtQuick 2.15 -import QtQuick.Layouts 1.15 -import QtGraphicalEffects 1.15 - -import StatusQ.Controls 0.1 -import StatusQ.Core 0.1 -import StatusQ.Core.Theme 0.1 - -import utils 1.0 - -Rectangle { - id: root - - property alias payloadToDisplay: contentText.text - - border.width: 1 - border.color: Theme.palette.baseColor2 - color: "transparent" - radius: 8 - - implicitHeight: d.expanded ? contentText.implicitHeight + (2 * contentText.anchors.margins) : - Math.min(contentText.implicitHeight + (2 * contentText.anchors.margins), 200) - - HoverHandler { - id: hoverHandler - target: root - } - - StatusBaseText { - id: contentText - objectName: "textContent" - - anchors.fill: parent - anchors.margins: 20 - - text: root.payloadToDisplay - font.pixelSize: Style.current.additionalTextSize - lineHeightMode: Text.FixedHeight - lineHeight: 18 - - wrapMode: Text.WrapAnywhere - - StatusFlatButton { - objectName: "expandButton" - anchors.top: parent.top - anchors.right: parent.right - icon.name: d.expanded ? "collapse" : "expand" - icon.color: hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1 - hoverColor: "transparent" - visible: d.canExpand && hoverHandler.hovered - onClicked: { - d.expanded = !d.expanded - } - } - - layer.enabled: !d.expanded && d.canExpand - layer.effect: OpacityMask { - maskSource: Rectangle { - width: root.width - height: root.height - gradient: Gradient { - orientation: Gradient.Vertical - GradientStop { position: 0.0 } - GradientStop { position: (root.height - 60) / root.height } - GradientStop { position: 1; color: "transparent" } - } - } - } - } - - QtObject { - id: d - readonly property int maxContentHeight: 350 - property bool expanded: false - property bool canExpand: contentText.implicitHeight > maxContentHeight - } -} +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.15 + +import StatusQ.Controls 0.1 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 + +import utils 1.0 + +Rectangle { + id: root + + property alias payloadToDisplay: contentText.text + + border.width: 1 + border.color: Theme.palette.baseColor2 + color: "transparent" + radius: 8 + + implicitHeight: d.expanded ? contentText.implicitHeight + (2 * contentText.anchors.margins) + : Math.min(contentText.implicitHeight + (2 * contentText.anchors.margins), d.maxContentHeight) + + HoverHandler { + id: hoverHandler + target: root + } + + StatusBaseText { + id: contentText + objectName: "textContent" + + anchors.fill: parent + anchors.margins: 20 + + text: root.payloadToDisplay + font.pixelSize: Style.current.additionalTextSize + lineHeightMode: Text.FixedHeight + lineHeight: 18 + + wrapMode: Text.Wrap + + layer.enabled: !d.expanded && d.canExpand + layer.effect: OpacityMask { + maskSource: Rectangle { + width: root.width + height: root.height + gradient: Gradient { + orientation: Gradient.Vertical + GradientStop { position: 0.0 } + GradientStop { position: (root.height - 60) / root.height } + GradientStop { position: 1; color: "transparent" } + } + } + } + } + + StatusFlatButton { + objectName: "expandButton" + anchors.top: parent.top + anchors.topMargin: 4 + anchors.right: parent.right + anchors.rightMargin: 4 + icon.name: d.expanded ? "collapse" : "expand" + icon.color: hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1 + hoverColor: "transparent" + visible: d.canExpand && hoverHandler.hovered + onClicked: { + d.expanded = !d.expanded + } + } + + QtObject { + id: d + readonly property int maxContentHeight: 350 + property bool expanded: false + readonly property bool canExpand: contentText.paintedHeight + (2 * contentText.anchors.margins) > maxContentHeight + } +}