mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-09 22:06:25 +00:00
b04a9a4dd2
Adding connector badge to the dapps list and connect modal Updating the RoundImageWithBadge to support custom badge size and margins Updating the RoundImageWithBadge to support both SVG and PNG as source Polish the dapps sign modal badge to match the design
71 lines
1.9 KiB
QML
71 lines
1.9 KiB
QML
import QtQuick 2.15
|
|
import QtQuick.Controls 2.15
|
|
import QtQuick.Layouts 1.15
|
|
|
|
import shared.popups.walletconnect 1.0
|
|
|
|
SplitView {
|
|
Pane {
|
|
SplitView.fillWidth: true
|
|
SplitView.fillHeight: true
|
|
|
|
RoundImageWithBadge {
|
|
id: roundImageWithBadge
|
|
|
|
width: parent.width
|
|
height: width
|
|
imageUrl: addressField.text
|
|
badgeIcon: badgeField.text
|
|
badgeSize: badgeSizeSlider.value
|
|
badgeMargin: badgeMarginSlider.value
|
|
}
|
|
}
|
|
|
|
Pane {
|
|
id: controlsPane
|
|
SplitView.fillHeight: true
|
|
SplitView.preferredWidth: 300
|
|
ColumnLayout {
|
|
Label { text: "Image url" }
|
|
TextField {
|
|
id: addressField
|
|
text: "https://picsum.photos/200/200"
|
|
Layout.fillWidth: true
|
|
}
|
|
Label { text: "Badge name" }
|
|
TextField {
|
|
id: badgeField
|
|
text: "https://random.imagecdn.app/20/20"
|
|
Layout.fillWidth: true
|
|
}
|
|
Label { text: "Fallback icon name" }
|
|
TextField {
|
|
id: fallbackIconField
|
|
text: "dapp"
|
|
Layout.fillWidth: true
|
|
}
|
|
Label {
|
|
text: "Badge size"
|
|
}
|
|
Slider {
|
|
id: badgeSizeSlider
|
|
from: 0
|
|
to: roundImageWithBadge.width
|
|
value: roundImageWithBadge.badgeSize
|
|
}
|
|
Label {
|
|
text: "Badge margin"
|
|
}
|
|
Slider {
|
|
id: badgeMarginSlider
|
|
from: 0
|
|
to: roundImageWithBadge.width
|
|
value: roundImageWithBadge.badgeMargin
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// category: Components
|
|
|
|
// https://www.figma.com/design/HrmZp1y4S77QJezRFRl6ku/dApp-Interactions---Milestone-1?node-id=481-160233&t=xyix3QX5I3jxrDir-0 |