status-desktop/ui/app/AppLayouts/Wallet/controls/AccountHeaderGradient.qml

73 lines
2.1 KiB
QML

import QtQuick 2.13
import QtGraphicalEffects 1.12
import StatusQ.Core.Theme 0.1
Loader {
id: root
property var overview
sourceComponent: root.overview.isAllAccounts ? multipleAccountsGradient : singleAccountGradient
Component {
id: singleAccountGradient
Rectangle {
implicitHeight: 115
gradient: Gradient {
GradientStop { position: 0.0; color: Theme.palette.alphaColor(root.overview.color, 0.1) }
GradientStop { position: 1.0; color: "transparent" }
}
}
}
Component {
id: multipleAccountsGradient
Item {
implicitHeight: 115
Rectangle {
id: base
anchors.fill: parent
Component.onCompleted: {
let splitWords = root.overview.colors.split(';')
var stops = []
let numOfColors = splitWords.length
let gap = 1/splitWords.length
let startPosition = gap
for (const word of splitWords) {
stops.push(stopComponent.createObject(base, {"position":startPosition, "color": Theme.palette.alphaColor(word, 0.1)}))
startPosition += gap
}
gradient.stops = stops
}
gradient: Gradient {
id: gradient
orientation: Gradient.Horizontal
}
visible: false
}
Rectangle {
id: mask
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.0; color: Theme.palette.statusAppLayout.rightPanelBackgroundColor}
GradientStop { position: 1.0; color: "transparent" }
}
visible: false
}
OpacityMask {
anchors.fill: base
source: base
maskSource: mask
}
}
}
Component {
id:stopComponent
GradientStop {}
}
}