From f5000a0ee02d60284dbfed4375180c3d9c0d1a89 Mon Sep 17 00:00:00 2001 From: Vasily Date: Sun, 13 Jan 2019 16:47:38 +0100 Subject: [PATCH 1/2] 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() + } + } + } + } +} From 9aaaf205773d6c2f637efff7b02ccfbb34700e9d Mon Sep 17 00:00:00 2001 From: Vasily Date: Sun, 13 Jan 2019 17:57:15 +0100 Subject: [PATCH 2/2] Replace pause and play buttons with combined pause/play The separate pause and play buttons necessitated changing between them to signal that state had changed. Replacing it with a combined pause/play button sidesteps all the issues in syncing up when which icon should be shown. --- src/res/qml/media_keys/MediaControllerKeys.qml | 17 ++--------------- .../qml/media_keys/outline_pause_white_24dp.svg | 1 - .../outline_play_arrow_white_24dp.svg | 1 - .../outline_play_pause_white_24dp.svg | 12 ++++++++++++ 4 files changed, 14 insertions(+), 17 deletions(-) delete mode 100644 src/res/qml/media_keys/outline_pause_white_24dp.svg delete mode 100644 src/res/qml/media_keys/outline_play_arrow_white_24dp.svg create mode 100644 src/res/qml/media_keys/outline_play_pause_white_24dp.svg diff --git a/src/res/qml/media_keys/MediaControllerKeys.qml b/src/res/qml/media_keys/MediaControllerKeys.qml index 3381950..d81da5f 100644 --- a/src/res/qml/media_keys/MediaControllerKeys.qml +++ b/src/res/qml/media_keys/MediaControllerKeys.qml @@ -26,10 +26,7 @@ GroupBox { } RowLayout { - property bool playButtonIsPlay: false - - property string playButtonPath: "outline_play_arrow_white_24dp.svg" - property string pauseButtonPath: "outline_pause_white_24dp.svg" + 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" @@ -47,24 +44,14 @@ GroupBox { imagePath: parent.stopButtonPath onClicked: { UtilitiesTabController.sendMediaStopSong() - playPauseSongButton.contentItem.source = parent.playButtonPath - parent.playButtonIsPlay = true } } MediaButton { id: playPauseSongButton - imagePath: parent.pauseButtonPath + imagePath: parent.playPauseButtonPath onClicked: { UtilitiesTabController.sendMediaPausePlay() - if (parent.playButtonIsPlay) { - playPauseSongButton.contentItem.source = parent.pauseButtonPath - parent.playButtonIsPlay = false - } else { - playPauseSongButton.contentItem.source = parent.playButtonPath - parent.playButtonIsPlay = true - } - } } 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 @@ + + + + + + + +