aerothemeplasma/plasma/plasmoids/io.gitgud.wackyideas.seventasks/contents/ui/MediaButton.qml

85 lines
2.8 KiB
QML

import QtQuick
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import org.kde.plasma.core as PlasmaCore
import org.kde.kirigami as Kirigami
import org.kde.kquickcontrolsaddons
import org.kde.ksvg as KSvg
MouseArea {
id: mediaButton
Layout.preferredWidth: 26;
Layout.preferredHeight: 24;
hoverEnabled: true
property int iconWidth
property int iconHeight
//signal clicked
property string orientation: ""
property string mediaIcon: ""
property string fallbackMediaIcon: ""
property bool togglePlayPause: true
property bool enableButton: false
enabled: enableButton
KSvg.FrameSvgItem {
id: normalButton
imagePath: Qt.resolvedUrl("svgs/toolbuttons.svg")
anchors.fill: parent
prefix: mediaButton.orientation + (!mediaButton.enableButton ? "-disabled" : "")
opacity: mediaButton.enableButton ? !parent.containsMouse : 1
Behavior on opacity {
NumberAnimation { duration: mediaButton.enableButton ? 250 : 1 }
}
}
KSvg.FrameSvgItem {
id: internalButtons
imagePath: Qt.resolvedUrl("svgs/toolbuttons.svg")
anchors.fill: parent
visible: mediaButton.enableButton
prefix: mediaButton.orientation + (parent.containsPress ? "-pressed" : "-hover");
opacity: mediaButton.enableButton ? parent.containsMouse : 0
Behavior on opacity {
NumberAnimation { duration: mediaButton.enableButton ? 250 : 1}
}
}
KSvg.SvgItem {
id: mediaIconSvg
imagePath: Qt.resolvedUrl("svgs/media-icons.svg")
elementId: mediaButton.mediaIcon
width: mediaButton.iconWidth;
height: mediaButton.iconHeight;
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenterOffset: parent.containsPress ? 1 : 0
anchors.verticalCenterOffset: parent.containsPress ? 1 : 0
opacity: !mediaButton.enableButton ? 0.5 : mediaButton.togglePlayPause
Behavior on opacity {
NumberAnimation { duration: mediaButton.enableButton ? 250 : 1}
}
}
KSvg.SvgItem {
id: mediaIconSvgSecond
imagePath: Qt.resolvedUrl("svgs/media-icons.svg")
elementId: mediaButton.fallbackMediaIcon
width: mediaButton.iconWidth;
height: mediaButton.iconHeight;
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenterOffset: parent.containsPress ? 1 : 0
anchors.verticalCenterOffset: parent.containsPress ? 1 : 0
opacity: !mediaButton.togglePlayPause && mediaButton.enableButton
visible: mediaButton.enableButton
Behavior on opacity {
NumberAnimation { duration: mediaButton.enableButton ? 250 : 1}
}
}
}