mirror of
https://github.com/status-im/status-desktop.git
synced 2025-02-07 04:06:02 +00:00
2f050a025f
Changes: 1. Align dialog with Figma design 2. Add new components for round image with badge and connection status tag 3. Add tests 4. Dapps service will now receive wallet `RootStore` as input and reuse existing models with account balance and other necessary info for account selection and chain selection 5. Minor updates in stores 6. Minor updates in WC toast messages to display app domain instead of app url
86 lines
2.1 KiB
QML
86 lines
2.1 KiB
QML
import QtQuick 2.15
|
|
import QtQuick.Layouts 1.15
|
|
import QtGraphicalEffects 1.15
|
|
|
|
import StatusQ.Core 0.1
|
|
import StatusQ.Core.Theme 0.1
|
|
import StatusQ.Components 0.1
|
|
|
|
import utils 1.0
|
|
|
|
Item {
|
|
id: root
|
|
|
|
property url imageUrl: ""
|
|
property string badgeIcon: "walletConnect"
|
|
property string fallbackIcon: "dapp"
|
|
|
|
readonly property bool iconLoaded: !mainImage.isError && !mainImage.isLoading && mainImage.image.source !== ""
|
|
|
|
implicitWidth: mainImage.implicitWidth
|
|
implicitHeight: mainImage.implicitHeight
|
|
|
|
Item {
|
|
id: imageContainer
|
|
|
|
width: parent.width
|
|
height: width
|
|
|
|
StatusRoundedImage {
|
|
id: mainImage
|
|
|
|
width: parent.width
|
|
height: width
|
|
visible: !isError && !isLoading && root.imageUrl != ""
|
|
image.source: root.imageUrl
|
|
}
|
|
|
|
Loader {
|
|
anchors.fill: mainImage
|
|
active: !mainImage.visible
|
|
sourceComponent: StatusRoundedComponent {
|
|
color: Theme.palette.primaryColor3
|
|
StatusIcon {
|
|
anchors.fill: parent
|
|
anchors.margins: Style.current.padding
|
|
color: Theme.palette.primaryColor1
|
|
icon: "dapp"
|
|
}
|
|
}
|
|
}
|
|
|
|
layer.enabled: true
|
|
layer.effect: OpacityMask {
|
|
id: mask
|
|
invert: true
|
|
|
|
maskSource: Item {
|
|
width: mask.width + 2
|
|
height: mask.height + 2
|
|
|
|
Rectangle {
|
|
x: badge.x + 1
|
|
y: badge.y + 1
|
|
|
|
width: badge.width + 2
|
|
height: badge.width + 2
|
|
radius: badge.width / 2
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
StatusRoundIcon {
|
|
id: badge
|
|
width: (root.width / 2) - Style.current.padding
|
|
height: width
|
|
anchors.bottom: parent.bottom
|
|
anchors.right: parent.right
|
|
asset.name: root.badgeIcon
|
|
asset.color: "transparent"
|
|
asset.width: width
|
|
asset.height: height
|
|
asset.bgWidth: width
|
|
asset.bgHeight: height
|
|
}
|
|
} |