Add new accent colours replacing legacy ones

sandbox/web_sandbox/configs/dark.cfg

@@ -3,7 +3,7 @@
     "background_secondary_color": "#363638",
     "popup_background_color": "#39393C",
     "text_field_color": "#242427",
-    "accent_color": "#2093FE",
+    "accent_color": "#2082DD",
     "stroke_color": "#1E1E1E",
     "button_color": "#595959",
     "font_primary_color": "#EBEBEB",

sandbox/web_sandbox/configs/light.cfg

@@ -3,7 +3,7 @@
     "background_secondary_color": "#E6E9ED",
     "popup_background_color": "#F5F5F6",
     "text_field_color": "#FFFFFF",
-    "accent_color": "#70AFEA",
+    "accent_color": "#62B1FA",
     "stroke_color": "#CED1D4",
     "button_color": "#CFD5DD",
     "font_primary_color": "#111132",

src/app/configs/dark.cfg

@@ -3,7 +3,7 @@
     "background_secondary_color": "#363638",
     "popup_background_color": "#39393C",
     "text_field_color": "#242427",
-    "accent_color": "#2093FE",
+    "accent_color": "#2082DD",
     "stroke_color": "#1E1E1E",
     "button_color": "#595959",
     "font_primary_color": "#EBEBEB",

src/app/configs/light.cfg

@@ -3,7 +3,7 @@
     "background_secondary_color": "#E6E9ED",
     "popup_background_color": "#F5F5F6",
     "text_field_color": "#FFFFFF",
-    "accent_color": "#70AFEA",
+    "accent_color": "#62B1FA",
     "stroke_color": "#CED1D4",
     "button_color": "#CFD5DD",
     "font_primary_color": "#111132",

src/appshell/qml/MuseScore/AppShell/FirstLaunchSetup/FirstLaunchSetupDialog.qml

@@ -32,7 +32,7 @@ StyledDialogView {
     title: qsTrc("appshell/gettingstarted", "Getting started")
 
     contentWidth: 576
-    contentHeight: 384
+    contentHeight: 416
 
     margins: 20
 

src/appshell/qml/MuseScore/AppShell/FirstLaunchSetup/ThemesPage.qml

@@ -78,7 +78,9 @@ Page {
             Layout.alignment: Qt.AlignCenter
 
             themes: model.highContrastEnabled ? model.highContrastThemes : model.generalThemes
+            themeCodes: model.highContrastEnabled ? model.highContrastThemeCodes : model.generalThemeCodes
             currentThemeCode: model.currentThemeCode
+            highContrast: model.highContrastEnabled
 
             spacing: 48
 
@@ -99,9 +101,6 @@ Page {
             colors: model.accentColors
             currentColorIndex: model.currentAccentColorIndex
 
-            sampleSize: 20
-            spacing: 4
-
             navigationPanel.section: root.navigationSection
             navigationPanel.order: root.navigationStartRow + 3
 

src/appshell/qml/MuseScore/AppShell/FirstLaunchSetup/TutorialsPage.qml

@@ -32,7 +32,7 @@ Page {
     title: qsTrc("appshell/gettingstarted", "Video tutorials")
     explanation: qsTrc("appshell/gettingstarted", "Behind this dialog is the ‘Learn’ section, where you’ll find tutorials to get you started\n(Video tutorials require an internet connection)")
 
-    titleContentSpacing: 24
+    titleContentSpacing: 32
 
     TutorialsPageModel {
         id: tutorialsModel
@@ -42,7 +42,7 @@ Page {
         id: content
 
         anchors.fill: parent
-        spacing: 20
+        spacing: 40
 
         Item {
             id: imageArea
@@ -55,8 +55,8 @@ Page {
 
                 anchors.centerIn: parent
 
-                height: parent.height
-                width: implicitWidth
+                height: 172
+                width: 277
 
                 fillMode: Image.PreserveAspectFit
                 source: "resources/VideoTutorials.png"

src/appshell/qml/MuseScore/AppShell/FirstLaunchSetup/themespagemodel.cpp

@@ -66,6 +66,22 @@ ThemeList ThemesPageModel::allThemes() const
     return uiConfiguration()->themes();
 }
 
+QStringList ThemesPageModel::generalThemeCodes() const
+{
+    return {
+        QString::fromStdString(LIGHT_THEME_CODE),
+        QString::fromStdString(DARK_THEME_CODE)
+    };
+}
+
+QStringList ThemesPageModel::highContrastThemeCodes() const
+{
+    return {
+        QString::fromStdString(HIGH_CONTRAST_WHITE_THEME_CODE),
+        QString::fromStdString(HIGH_CONTRAST_BLACK_THEME_CODE)
+    };
+}
+
 QVariantList ThemesPageModel::generalThemes() const
 {
     QVariantList result;

src/appshell/qml/MuseScore/AppShell/FirstLaunchSetup/themespagemodel.h

@@ -38,6 +38,9 @@ class ThemesPageModel : public QObject, public muse::Contextable, public muse::a
     Q_PROPERTY(bool isFollowSystemThemeAvailable READ isFollowSystemThemeAvailable CONSTANT)
     Q_PROPERTY(bool isFollowSystemTheme READ isFollowSystemTheme WRITE setFollowSystemTheme NOTIFY isFollowSystemThemeChanged)
 
+    Q_PROPERTY(QStringList generalThemeCodes READ generalThemeCodes CONSTANT)
+    Q_PROPERTY(QStringList highContrastThemeCodes READ highContrastThemeCodes CONSTANT)
+
     Q_PROPERTY(bool highContrastEnabled READ highContrastEnabled WRITE setHighContrastEnabled NOTIFY highContrastEnabledChanged)
     Q_PROPERTY(QVariantList generalThemes READ generalThemes NOTIFY themesChanged)
     Q_PROPERTY(QVariantList highContrastThemes READ highContrastThemes NOTIFY themesChanged)
@@ -58,6 +61,8 @@ class ThemesPageModel : public QObject, public muse::Contextable, public muse::a
     bool isFollowSystemThemeAvailable() const;
     bool isFollowSystemTheme() const;
 
+    QStringList generalThemeCodes() const;
+    QStringList highContrastThemeCodes() const;
     QVariantList generalThemes() const;
     QVariantList highContrastThemes() const;
     bool highContrastEnabled() const;

src/preferences/qml/MuseScore/Preferences/AccentColorsList.qml

@@ -26,83 +26,109 @@ import QtQuick
 import Muse.Ui
 import Muse.UiComponents
 
-RadioButtonGroup {
+Grid {
     id: root
 
-    property alias colors: root.model
-    property alias currentColorIndex: root.currentIndex
+    property var colors: []
+    property int currentColorIndex: -1
 
     property NavigationPanel navigationPanel: NavigationPanel {
         name: "AccentColorsList"
         enabled: root.enabled && root.visible
-        direction: NavigationPanel.Horizontal
+        direction: NavigationPanel.Both
 
         onNavigationEvent: function(event) {
-            if (event.type === NavigationEvent.AboutActive) {
-                event.setData("controlIndex", [root.navigationRow, root.navigationColumnStart + root.currentIndex])
+            if (event.type === NavigationEvent.AboutActive && root.currentColorIndex >= 0) {
+                event.setData("controlIndex", [root.navigationRowOf(root.currentColorIndex),
+                                                root.navigationColumnOf(root.currentColorIndex)])
             }
         }
     }
 
-    property int navigationRow: -1
+    property int navigationRow: 0
     property int navigationColumnStart: 0
-    property int navigationColumnEnd: navigationColumnStart + count
 
-    property real sampleSize: 30
+    property real sampleSize: 24
     readonly property real totalSampleSize: sampleSize + 6
 
     signal accentColorChangeRequested(var newColorIndex)
 
-    implicitWidth: count * totalSampleSize + (count - 1) * spacing
-    implicitHeight: totalSampleSize
-    spacing: 10
+    columns: Math.floor(root.colors.length / 2)
+    spacing: 6
 
-    delegate: RoundedRadioButton {
-        id: button
+    // Visual order of the color indices (first row is left-to-right, second row is right-to-left):
+    readonly property var orderedColorIndices: {
+        let indices = []
 
-        required property int index
-        required property var modelData
-        readonly property color accentColor: modelData
+        for (let i = 0; i < root.columns && i < root.colors.length; ++i) {
+            indices.push(i)
+        }
+        for (let j = root.colors.length - 1; j >= root.columns; --j) {
+            indices.push(j)
+        }
+        return indices
+    }
 
-        width: root.totalSampleSize
-        height: width
+    function navigationRowOf(colorIndex) {
+        return root.navigationRow + (colorIndex < root.columns ? 0 : 1)
+    }
 
-        checked: root.currentIndex === index
+    function navigationColumnOf(colorIndex) {
+        return root.navigationColumnStart + (colorIndex < root.columns
+                                             ? colorIndex
+                                             : root.colors.length - 1 - colorIndex)
+    }
 
-        navigation.name: "AccentColourButton"
-        navigation.panel: root.navigationPanel
-        navigation.row: root.navigationRow
-        navigation.column: root.navigationColumnStart + index
-        navigation.accessible.name: Utils.accessibleColorDescription(accentColor)
+    Repeater {
+        model: root.orderedColorIndices
 
-        onToggled: {
-            root.accentColorChangeRequested(index)
-        }
+        delegate: RoundedRadioButton {
+            id: button
+
+            required property var modelData
+            readonly property int colorIndex: modelData
+            readonly property color accentColor: root.colors[colorIndex]
 
-        indicator: Rectangle {
-            anchors.fill: parent
+            width: root.totalSampleSize
+            height: width
 
-            color: "transparent"
-            border.color: ui.theme.fontPrimaryColor
-            border.width: parent.checked ? 1 : 0
-            radius: width / 2
+            checked: root.currentColorIndex === colorIndex
 
-            NavigationFocusBorder { navigationCtrl: button.navigation }
+            navigation.name: "AccentColourButton"
+            navigation.panel: root.navigationPanel
+            navigation.row: root.navigationRowOf(colorIndex)
+            navigation.column: root.navigationColumnOf(colorIndex)
+            navigation.accessible.name: Utils.accessibleColorDescription(accentColor)
 
-            Rectangle {
-                anchors.centerIn: parent
+            onToggled: {
+                root.accentColorChangeRequested(colorIndex)
+            }
+
+            indicator: Rectangle {
+                anchors.fill: parent
 
-                width: root.sampleSize
-                height: width
+                color: "transparent"
+                border.color: ui.theme.fontPrimaryColor
+                border.width: parent.checked ? 1 : 0
                 radius: width / 2
 
-                border.color: ui.theme.strokeColor
-                border.width: 1
+                NavigationFocusBorder { navigationCtrl: button.navigation }
+
+                Rectangle {
+                    anchors.centerIn: parent
+
+                    width: root.sampleSize
+                    height: width
+                    radius: width / 2
 
-                color: button.accentColor
+                    border.color: ui.theme.strokeColor
+                    border.width: 1
+
+                    color: button.accentColor
+                }
             }
-        }
 
-        background: null
+            background: null
+        }
     }
 }

src/preferences/qml/MuseScore/Preferences/AppearancePreferencesPage.qml

@@ -46,6 +46,7 @@ PreferencesPage {
             width: parent.width
 
             themes: appearanceModel.highContrastEnabled ? appearanceModel.highContrastThemes : appearanceModel.generalThemes
+            themeCodes: appearanceModel.highContrastEnabled ? appearanceModel.highContrastThemeCodes : appearanceModel.generalThemeCodes
             currentThemeCode: appearanceModel.currentThemeCode
             highContrastEnabled: appearanceModel.highContrastEnabled
             isFollowSystemThemeAvailable: appearanceModel.isFollowSystemThemeAvailable

src/preferences/qml/MuseScore/Preferences/ThemeSamplesList.qml

@@ -29,10 +29,12 @@ import "internal"
 ListView {
     id: root
 
-    property alias themes: root.model
+    required property var themes // re-read on every color edit, used to paint the samples
+    property alias themeCodes: root.model // does not change on color edits, so that the delegates aren't destroyed & re-created
     property string currentThemeCode
+    property bool highContrast: false
 
-    currentIndex: model.findIndex((theme) => theme.codeKey === currentThemeCode)
+    currentIndex: themeCodes.indexOf(currentThemeCode)
 
     property NavigationPanel navigationPanel: NavigationPanel {
         name: "ThemeSamplesList"
@@ -70,26 +72,29 @@ ListView {
 
         spacing: 16
 
+        readonly property var themeData: root.themes.find((theme) => theme.codeKey === modelData)
+
         ThemeSample {
-            theme: modelData
+            theme: parent.themeData ?? ui.theme
+            highContrast: root.highContrast
 
             onClicked: {
-                root.themeChangeRequested(modelData.codeKey)
+                root.themeChangeRequested(modelData)
             }
         }
 
         RoundedRadioButton {
             width: parent.width
-            checked: root.currentThemeCode === modelData.codeKey
-            text: modelData.title
+            checked: root.currentThemeCode === modelData
+            text: parent.themeData ? parent.themeData.title : ""
 
             navigation.name: text
             navigation.panel: root.navigationPanel
             navigation.row: root.navigationRow
-            navigation.column: root.navigationColumnStart + model.index
+            navigation.column: root.navigationColumnStart + index
 
             onToggled: {
-                root.themeChangeRequested(modelData.codeKey)
+                root.themeChangeRequested(modelData)
             }
         }
     }

src/preferences/qml/MuseScore/Preferences/appearancepreferencesmodel.cpp

@@ -46,9 +46,17 @@ void AppearancePreferencesModel::init()
         emit isFollowSystemThemeChanged();
     });
 
+    m_lastHighContrast = highContrastEnabled();
+
     uiConfiguration()->currentThemeChanged().onNotify(this, [this]() {
         emit themesChanged();
         emit foregroundColorChanged();
+
+        bool hc = highContrastEnabled();
+        if (hc != m_lastHighContrast) {
+            m_lastHighContrast = hc;
+            emit highContrastEnabledChanged();
+        }
     });
 
     uiConfiguration()->fontChanged().onNotify(this, [this]() {
@@ -103,6 +111,22 @@ bool AppearancePreferencesModel::highContrastEnabled() const
     return uiConfiguration()->isHighContrast();
 }
 
+QStringList AppearancePreferencesModel::generalThemeCodes() const
+{
+    return {
+        QString::fromStdString(LIGHT_THEME_CODE),
+        QString::fromStdString(DARK_THEME_CODE)
+    };
+}
+
+QStringList AppearancePreferencesModel::highContrastThemeCodes() const
+{
+    return {
+        QString::fromStdString(HIGH_CONTRAST_WHITE_THEME_CODE),
+        QString::fromStdString(HIGH_CONTRAST_BLACK_THEME_CODE)
+    };
+}
+
 QVariantList AppearancePreferencesModel::generalThemes() const
 {
     QVariantList result;