diff --git a/advancedSettings.pro b/advancedSettings.pro index 00dbaec..03b332c 100644 --- a/advancedSettings.pro +++ b/advancedSettings.pro @@ -140,4 +140,5 @@ DISTFILES += \ src/res/qml/StatisticsPage.qml \ src/res/qml/SteamVRPage.qml \ src/res/qml/UtilitiesPage.qml \ - src/res/qml/media_keys/* + src/res/qml/media_keys/* \ + src/res/qml/LineSeparator.qml diff --git a/src/res/qml/LineSeparator.qml b/src/res/qml/LineSeparator.qml new file mode 100644 index 0000000..695bef5 --- /dev/null +++ b/src/res/qml/LineSeparator.qml @@ -0,0 +1,15 @@ +import QtQuick 2.7 +import QtQuick.Controls 2.0 +import QtQuick.Layouts 1.3 +import matzman666.advsettings 1.0 +// Necessary for the project specific Components. +import ".." + +// Insert inside a ColumnLayout containing this and a RowLayout +// to neatly separate header and buttons. +Rectangle { + color: "#ffffff" + height: 1 + Layout.fillWidth: true + Layout.bottomMargin: 5 +} diff --git a/src/res/qml/UtilitiesPage.qml b/src/res/qml/UtilitiesPage.qml index f085376..351c437 100644 --- a/src/res/qml/UtilitiesPage.qml +++ b/src/res/qml/UtilitiesPage.qml @@ -2,7 +2,7 @@ import QtQuick 2.7 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.3 import matzman666.advsettings 1.0 - +import "media_keys" MyStackViewPage { headerText: "Utilities" @@ -320,153 +320,8 @@ MyStackViewPage { } } - GroupBox { + MediaControllerKeys { id: mediaKeysGroupBox - Layout.fillWidth: true - - label: MyText { - leftPadding: 10 - text: "Media Control Keys" - bottomPadding: -10 - } - background: Rectangle { - color: "transparent" - border.color: "#ffffff" - radius: 8 - } - ColumnLayout { - anchors.fill: parent - - Rectangle { - color: "#ffffff" - height: 1 - Layout.fillWidth: true - Layout.bottomMargin: 5 - } - - - RowLayout { - property bool playButtonIsPlay: false - MyPushButton2 { - id: previousSongButton - Layout.preferredHeight: 48 - Layout.preferredWidth: 48 - contentItem: Image { - source: "media_keys/outline_skip_previous_white_24dp.svg" - sourceSize: Qt.size( imgSP.sourceSize.width*2, imgSP.sourceSize.height*2 ) - Image{ - id: imgSP - source: parent.source - width:0 - height:0 - } - anchors.fill: parent - } - onClicked: { - UtilitiesTabController.sendMediaPreviousSong() - } - - background: Rectangle { - opacity: parent.down ? 1.0 : (parent.activeFocus ? 0.5 : 0.0) - color: "#406288" - radius: 4 - anchors.fill: parent - } - } - MyPushButton2 { - id: stopSongButton - Layout.preferredHeight: 48 - Layout.preferredWidth: 48 - - contentItem: Image { - source: "media_keys/outline_stop_white_24dp.svg" - sourceSize: Qt.size( imgS.sourceSize.width*2, imgS.sourceSize.height*2 ) - Image{ - id: imgS - source: parent.source - width:0 - height:0 - } - anchors.fill: parent - } - onClicked: { - UtilitiesTabController.sendMediaStopSong() - playPauseSongButton.contentItem.source = "media_keys/outline_play_arrow_white_24dp.svg" - parent.playButtonIsPlay = true - } - - background: Rectangle { - opacity: parent.down ? 1.0 : (parent.activeFocus ? 0.5 : 0.0) - color: "#406288" - radius: 4 - anchors.fill: parent - } - } - MyPushButton2 { - id: playPauseSongButton - Layout.preferredHeight: 48 - Layout.preferredWidth: 48 - contentItem: Image { - // Assume that music is playing when people enter VR. - source: "media_keys/outline_pause_white_24dp.svg" - sourceSize: Qt.size( imgP.sourceSize.width*2, imgP.sourceSize.height*2 ) - Image{ - id: imgP - source: parent.source - width:0 - height:0 - } - - anchors.fill: parent - } - onClicked: { - UtilitiesTabController.sendMediaPausePlay() - if (parent.playButtonIsPlay) { - playPauseSongButton.contentItem.source = "media_keys/outline_pause_white_24dp.svg" - parent.playButtonIsPlay = false - } else { - playPauseSongButton.contentItem.source = "media_keys/outline_play_arrow_white_24dp.svg" - parent.playButtonIsPlay = true - } - - } - - background: Rectangle { - opacity: parent.down ? 1.0 : (parent.activeFocus ? 0.5 : 0.0) - color: "#406288" - radius: 4 - anchors.fill: parent - } - } - MyPushButton2 { - id: nextSongButton - Layout.preferredHeight: 48 - Layout.preferredWidth: 48 - - contentItem: Image { - source: "media_keys/outline_skip_next_white_24dp.svg" - sourceSize: Qt.size( imgSN.sourceSize.width*2, imgSN.sourceSize.height*2 ) - Image{ - id: imgSN - source: parent.source - width:0 - height:0 - } - anchors.fill: parent - } - onClicked: { - UtilitiesTabController.sendMediaNextSong() - } - - background: Rectangle { - opacity: parent.down ? 1.0 : (parent.activeFocus ? 0.5 : 0.0) - color: "#406288" - radius: 4 - anchors.fill: parent - } - } - } - } } Item { diff --git a/src/res/qml/media_keys/MediaButton.qml b/src/res/qml/media_keys/MediaButton.qml new file mode 100644 index 0000000..f9cb7c0 --- /dev/null +++ b/src/res/qml/media_keys/MediaButton.qml @@ -0,0 +1,38 @@ +import QtQuick 2.7 +import QtQuick.Controls 2.0 +import QtQuick.Layouts 1.3 +import matzman666.advsettings 1.0 +// Necessary for the project specific Components. +import ".." + +MyPushButton2 { + // Public properties + id: mediaButton + onClicked: { + // Overload this + } + property string imagePath: "" + + // Private properties + Layout.preferredHeight: 48 + Layout.preferredWidth: 48 + contentItem: Image { + source: parent.imagePath + sourceSize: Qt.size( imgSP.sourceSize.width*2, imgSP.sourceSize.height*2 ) + Image{ + id: imgSP + source: parent.source + width:0 + height:0 + } + anchors.fill: parent + } + + background: Rectangle { + // Provides feedback for mousing over and clicking buttons. + opacity: parent.down ? 1.0 : (parent.activeFocus ? 0.5 : 0.0) + color: "#406288" + radius: 4 + anchors.fill: parent + } +} diff --git a/src/res/qml/media_keys/MediaControllerKeys.qml b/src/res/qml/media_keys/MediaControllerKeys.qml new file mode 100644 index 0000000..d81da5f --- /dev/null +++ b/src/res/qml/media_keys/MediaControllerKeys.qml @@ -0,0 +1,67 @@ +import QtQuick 2.7 +import QtQuick.Controls 2.0 +import QtQuick.Layouts 1.3 +import matzman666.advsettings 1.0 +// Necessary for the project specific Components. +import ".." + +GroupBox { + id: mediaKeysGroupBox + Layout.fillWidth: true + + label: MyText { + leftPadding: 10 + text: "Media Control Keys" + bottomPadding: -10 + } + background: Rectangle { + color: "transparent" + border.color: "#ffffff" + radius: 8 + } + ColumnLayout { + anchors.fill: parent + + LineSeparator { + } + + RowLayout { + property string playPauseButtonPath: "outline_play_pause_white_24dp.svg" + property string stopButtonPath: "outline_stop_white_24dp.svg" + property string previousButtonPath: "outline_skip_previous_white_24dp.svg" + property string nextButtonPath: "outline_skip_next_white_24dp.svg" + + MediaButton { + id: previousSongButton + imagePath: parent.previousButtonPath + onClicked: { + UtilitiesTabController.sendMediaPreviousSong() + } + } + + MediaButton { + id: stopSongButton + imagePath: parent.stopButtonPath + onClicked: { + UtilitiesTabController.sendMediaStopSong() + } + } + + MediaButton { + id: playPauseSongButton + imagePath: parent.playPauseButtonPath + onClicked: { + UtilitiesTabController.sendMediaPausePlay() + } + } + + MediaButton { + id: nextSongButton + imagePath: parent.nextButtonPath + onClicked: { + UtilitiesTabController.sendMediaNextSong() + } + } + } + } +} diff --git a/src/res/qml/media_keys/outline_pause_white_24dp.svg b/src/res/qml/media_keys/outline_pause_white_24dp.svg deleted file mode 100644 index f59d7c9..0000000 --- a/src/res/qml/media_keys/outline_pause_white_24dp.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/res/qml/media_keys/outline_play_arrow_white_24dp.svg b/src/res/qml/media_keys/outline_play_arrow_white_24dp.svg deleted file mode 100644 index 2b248b9..0000000 --- a/src/res/qml/media_keys/outline_play_arrow_white_24dp.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/res/qml/media_keys/outline_play_pause_white_24dp.svg b/src/res/qml/media_keys/outline_play_pause_white_24dp.svg new file mode 100644 index 0000000..03a3ca1 --- /dev/null +++ b/src/res/qml/media_keys/outline_play_pause_white_24dp.svg @@ -0,0 +1,12 @@ + + + + + + + +