ui/views/CountdownBar.qml

0001 import QtQuick 2.9
0002 import QtQuick.Layouts 1.4
0003 import QtQuick.Controls 2.0 as Controls
0004 import org.kde.kirigami 2.8 as Kirigami
0005 import QtGraphicalEffects 1.0
0006 import Mycroft 1.0 as Mycroft
0007
0008
0009 RowLayout {
0010     id: countdownArea
0011     Layout.leftMargin: Kirigami.Units.largeSpacing
0012     Layout.bottomMargin: Kirigami.Units.largeSpacing
0013     property alias imageSource: img.source
0014     property alias nextSongTitle: nextSongLabel.text
0015     spacing: Kirigami.Units.largeSpacing
0016
0017     Kirigami.Heading {
0018         level: 3
0019         Layout.alignment: Qt.AlignLeft
0020         wrapMode: Text.WordWrap
0021         elide: Text.ElideRight
0022         color: Kirigami.Theme.textColor
0023         text: "Next:"
0024     }
0025
0026     Rectangle {
0027         Layout.preferredWidth: Kirigami.Units.iconSizes.huge + Kirigami.Units.smallSpacing
0028         Layout.preferredHeight: Kirigami.Units.iconSizes.huge + Kirigami.Units.smallSpacing
0029         Layout.alignment: Qt.AlignLeft
0030         color: Kirigami.Theme.backgroundColor
0031         border.color: Kirigami.Theme.linkColor
0032         border.width: Kirigami.Units.smallSpacing
0033         radius: 250
0034
0035         Image {
0036             id: img
0037             width: Kirigami.Units.iconSizes.huge
0038             height: Kirigami.Units.iconSizes.huge
0039             fillMode: Image.PreserveAspectCrop
0040             anchors.centerIn: parent
0041             layer.enabled: true
0042             layer.effect: OpacityMask {
0043                 maskSource: imgContainer
0044             }
0045         }
0046
0047         Rectangle{
0048             id: imgContainer
0049             property int borderWidth: 3
0050             color: Kirigami.Theme.backgroundColor
0051             width: Kirigami.Units.iconSizes.huge
0052             height: Kirigami.Units.iconSizes.huge
0053             anchors.centerIn: parent
0054             border.color: Kirigami.Theme.linkColor
0055             border.width: borderWidth
0056             radius: 250
0057             visible: false
0058         }
0059     }
0060
0061     Kirigami.Heading {
0062         id: nextSongLabel
0063         level: 3
0064         Layout.fillWidth: true
0065         wrapMode: Text.WordWrap
0066         elide: Text.ElideRight
0067         color: Kirigami.Theme.textColor
0068     }
0069 }