SteamFrame/OpenVR-AdvancedSettings-frame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Media Control Keys QML into smaller bits

Browse Source 
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.
This commit is contained in:
Vasily
2019-01-13 16:47:38 +01:00
parent e75a4c2353
commit f5000a0ee0
5 changed files with 137 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/res/qml/LineSeparator.qml
+15
View File
@@ -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
}
src/res/qml/UtilitiesPage.qml
+2 -147
View File
@@ -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 {
src/res/qml/media_keys/MediaButton.qml
+38
View File
@@ -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
}
}
src/res/qml/media_keys/MediaControllerKeys.qml
+80
View File
@@ -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()
}
}
}
}
}