LoweBowe/MuseScore
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added accent color options to First Launch Setup Dialog

Browse source
This commit is contained in:
Casper Jeukendrup 2021-11-18 22:35:49 +01:00
parent 24e1e71306
commit 2c9bb57b5b
No known key found for this signature in database
GPG key ID: 6C571BEF59E722DD
4 changed files with 131 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/appshell/appshell.qrc
View file

@ -16,6 +16,7 @@
<file>qml/AboutDialog.qml</file>
<file>qml/AboutMusicXMLDialog.qml</file>
<file>qml/resources/mu_logo.svg</file>
<file>qml/shared/AccentColorsList.qml</file>
<file>qml/shared/ThemeSamplesList.qml</file>
<file>qml/shared/internal/ThemeSample.qml</file>
<file>qml/FirstLaunchSetup/FirstLaunchSetupDialog.qml</file>

32
src/appshell/qml/FirstLaunchSetup/ThemesPage.qml
View file

@ -42,10 +42,10 @@ Page {
ColumnLayout {
anchors.centerIn: parent
spacing: 32
spacing: 28
ThemeSamplesList {
Layout.alignment: Qt.AlignHCenter
Layout.alignment: Qt.AlignCenter
themes: model.highContrastEnabled ? model.highContrastThemes : model.generalThemes
currentThemeCode: model.currentThemeCode
@ -57,9 +57,33 @@ Page {
}
}
AccentColorsList {
id: accentColorsList
Layout.alignment: Qt.AlignCenter
Layout.preferredHeight: Math.max(implicitHeight, highContrastPreferencesHintLabel.implicitHeight)
visible: !model.highContrastEnabled
colors: model.accentColors
currentColorIndex: model.currentAccentColorIndex
sampleSize: 20
spacing: 8
onAccentColorChangeRequested: function(newColorIndex) {
model.currentAccentColorIndex = newColorIndex
}
}
StyledTextLabel {
id: highContrastPreferencesHintLabel
visible: model.highContrastEnabled
Layout.fillWidth: true
Layout.preferredHeight: Math.max(implicitHeight, accentColorsList.implicitHeight)
text: qsTrc("appshell", "Further high contrast settings are available in Preferences.")
}
CheckBox {
Layout.alignment: Qt.AlignHCenter
width: implicitWidth
Layout.alignment: Qt.AlignCenter
text: qsTrc("appshell", "Enable high contrast")
checked: model.highContrastEnabled

64
src/appshell/qml/Preferences/internal/AccentColorsSection.qml
View file

@ -25,11 +25,13 @@ import QtQuick.Controls 2.15
import MuseScore.Ui 1.0
import MuseScore.UiComponents 1.0
import "../../shared"
Row {
id: root
property alias colors: view.model
property alias currentColorIndex: view.currentIndex
property alias colors: colorsList.colors
property alias currentColorIndex: colorsList.currentColorIndex
property NavigationPanel navigation: NavigationPanel {
name: titleLabel.text
@ -48,7 +50,7 @@ Row {
signal accentColorChangeRequested(var newColorIndex)
height: 36
height: colorsList.height
spacing: 0
StyledTextLabel {
@ -58,60 +60,18 @@ Row {
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Qt.AlignLeft
text: qsTrc("appshell", "Accent colour:")
text: qsTrc("appshell", "Accent color:")
}
RadioButtonGroup {
id: view
AccentColorsList {
id: colorsList
spacing: 10
navigationPanel: root.navigation
delegate: RoundedRadioButton {
id: button
sampleSize: 30
width: 36
height: width
checked: view.currentIndex === model.index
property color accentColor: modelData
navigation.name: "AccentColourButton"
navigation.panel: root.navigation
navigation.column: model.index
navigation.accessible.name: Utils.colorToString(accentColor)
onToggled: {
root.accentColorChangeRequested(model.index)
}
indicator: Rectangle {
anchors.fill: parent
radius: width / 2
border.color: ui.theme.fontPrimaryColor
border.width: parent.checked ? 1 : 0
color: "transparent"
NavigationFocusBorder { navigationCtrl: button.navigation }
Rectangle {
anchors.centerIn: parent
width: 30
height: width
radius: width / 2
border.color: ui.theme.strokeColor
border.width: 1
color: button.accentColor
}
}
background: Item {}
onAccentColorChangeRequested: function(newColorIndex) {
root.accentColorChangeRequested(newColorIndex)
}
}
}

90
src/appshell/qml/shared/AccentColorsList.qml Normal file
View file

@ -0,0 +1,90 @@
/*
* SPDX-License-Identifier: GPL-3.0-only
* MuseScore-CLA-applies
*
* MuseScore
* Music Composition & Notation
*
* Copyright (C) 2021 MuseScore BVBA and others
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as
* published by the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import QtQuick 2.15
import QtQuick.Controls 2.15
import MuseScore.Ui 1.0
import MuseScore.UiComponents 1.0
RadioButtonGroup {
id: root
property alias colors: root.model
property alias currentColorIndex: root.currentIndex
property NavigationPanel navigationPanel: null
property real sampleSize: 30
readonly property real totalSampleSize: sampleSize + 6
signal accentColorChangeRequested(var newColorIndex)
implicitWidth: count * totalSampleSize + (count - 1) * spacing
implicitHeight: totalSampleSize
spacing: 10
delegate: RoundedRadioButton {
id: button
width: root.totalSampleSize
height: width
checked: root.currentIndex === model.index
property color accentColor: modelData
navigation.name: "AccentColourButton"
navigation.panel: root.navigationPanel
navigation.column: model.index
navigation.accessible.name: Utils.colorToString(accentColor)
onToggled: {
root.accentColorChangeRequested(model.index)
}
indicator: Rectangle {
anchors.fill: parent
color: "transparent"
border.color: ui.theme.fontPrimaryColor
border.width: parent.checked ? 1 : 0
radius: width / 2
NavigationFocusBorder { navigationCtrl: button.navigation }
Rectangle {
anchors.centerIn: parent
width: root.sampleSize
height: width
radius: width / 2
border.color: ui.theme.strokeColor
border.width: 1
color: button.accentColor
}
}
background: Item {}
}
}