qml/mobile/MobileVolumeButton.qml

0001 /*
0002    SPDX-FileCopyrightText: 2020 (c) Devin Lin <espidev@gmail.com>
0003
0004    SPDX-License-Identifier: LGPL-3.0-or-later
0005  */
0006
0007 import QtQuick 2.7
0008 import QtQuick.Layouts 1.2
0009 import QtQuick.Controls 2.3
0010 import org.kde.kirigami 2.5 as Kirigami
0011 import org.kde.elisa 1.0
0012
0013 import ".."
0014
0015 FlatButtonWithToolTip {
0016     id: volumeButton
0017
0018     property alias sliderValue: slider.value
0019     property alias slider: slider
0020     property bool muted
0021
0022     Layout.maximumHeight: parent.height
0023     Layout.preferredHeight: Math.floor(Kirigami.Units.gridUnit * 2.5)
0024     Layout.maximumWidth: height
0025     Layout.preferredWidth: height
0026
0027     text: i18nc("@action:button", "Change Volume")
0028     icon.name: volumeButton.muted || volumeButton.slider.value == 0
0029         ? "player-volume-muted" : "player-volume"
0030     icon.color: "white"
0031     Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
0032     Kirigami.Theme.inherit: false
0033
0034     onClicked: {
0035         if (volumeSliderPopup.visible) {
0036             volumeSliderPopup.close();
0037         } else {
0038             volumeSliderPopup.open();
0039         }
0040     }
0041
0042     Popup {
0043         id: volumeSliderPopup
0044         x: mirrored ? parent.width - width : 0
0045         y: -volumeSliderPopup.height
0046         width: Kirigami.Units.gridUnit * 10
0047         margins: Kirigami.Units.smallSpacing
0048         focus: true
0049
0050         background: Rectangle {
0051             radius: Kirigami.Units.smallSpacing
0052             color: "#616161" // hardcode colour, since background is darkened blur (theming doesn't make sense)
0053         }
0054
0055         contentItem: VolumeSlider {
0056             id: slider
0057
0058             muted: volumeButton.muted
0059         }
0060     }
0061 }