From f5000a0ee02d60284dbfed4375180c3d9c0d1a89 Mon Sep 17 00:00:00 2001 From: Vasily Date: Sun, 13 Jan 2019 16:47:38 +0100 Subject: [PATCH] Refactor Media Control Keys QML into smaller bits The old QML was a giant mess of implementation details and logic. Reducing the buttons to only 2 essential properties allows the MediaControllerKeys object to be more easily understood. Moving the MediaControllerKeys into its own QML file allows the resulting page to be more easily understood and individual pieces swapped in and out. The current QML directory structure is non-existent, breaking parts down into cohesive folders will allow for easier understanding of the bigger picture. --- advancedSettings.pro | 3 +- src/res/qml/LineSeparator.qml | 15 ++ src/res/qml/UtilitiesPage.qml | 149 +----------------- src/res/qml/media_keys/MediaButton.qml | 38 +++++ .../qml/media_keys/MediaControllerKeys.qml | 80 ++++++++++ 5 files changed, 137 insertions(+), 148 deletions(-) create mode 100644 src/res/qml/LineSeparator.qml create mode 100644 src/res/qml/media_keys/MediaButton.qml create mode 100644 src/res/qml/media_keys/MediaControllerKeys.qml 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..3381950 --- /dev/null +++ b/src/res/qml/media_keys/MediaControllerKeys.qml @@ -0,0 +1,80 @@ +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 bool playButtonIsPlay: false + + property string playButtonPath: "outline_play_arrow_white_24dp.svg" + property string pauseButtonPath: "outline_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() + playPauseSongButton.contentItem.source = parent.playButtonPath + parent.playButtonIsPlay = true + } + } + + MediaButton { + id: playPauseSongButton + imagePath: parent.pauseButtonPath + onClicked: { + UtilitiesTabController.sendMediaPausePlay() + if (parent.playButtonIsPlay) { + playPauseSongButton.contentItem.source = parent.pauseButtonPath + parent.playButtonIsPlay = false + } else { + playPauseSongButton.contentItem.source = parent.playButtonPath + parent.playButtonIsPlay = true + } + + } + } + + MediaButton { + id: nextSongButton + imagePath: parent.nextButtonPath + onClicked: { + UtilitiesTabController.sendMediaNextSong() + } + } + } + } +}