From 209898cb8976cd5ae0cb7a107624db083d708e5e Mon Sep 17 00:00:00 2001 From: James Turner Date: Thu, 1 Apr 2021 15:53:20 +0100 Subject: [PATCH] Coloring support for SVG icons --- src/GUI/assets/icons8-aircraft.svg | 2 +- src/GUI/assets/icons8-automation.svg | 2 +- src/GUI/assets/icons8-grid-view.svg | 6 +++--- src/GUI/assets/icons8-helicopter.svg | 4 ++-- src/GUI/assets/icons8-home.svg | 2 +- src/GUI/assets/icons8-location.svg | 4 ++-- src/GUI/assets/icons8-menu.svg | 6 +++--- src/GUI/assets/icons8-puzzle.svg | 4 ++-- src/GUI/assets/icons8-rocket.svg | 4 ++-- .../assets/icons8-windy-weather-filled.svg | 4 ++-- src/GUI/qml/AddButton.qml | 4 ++-- src/GUI/qml/GridToggleButton.qml | 6 ++++-- src/GUI/qml/Launcher.qml | 20 +++++++++---------- src/GUI/qml/SidebarButton.qml | 7 ++++--- src/GUI/resources.qrc | 14 +++++++++++++ 15 files changed, 53 insertions(+), 36 deletions(-) diff --git a/src/GUI/assets/icons8-aircraft.svg b/src/GUI/assets/icons8-aircraft.svg index 3e37bc386..4f460307c 100644 --- a/src/GUI/assets/icons8-aircraft.svg +++ b/src/GUI/assets/icons8-aircraft.svg @@ -1,5 +1,5 @@ - + diff --git a/src/GUI/assets/icons8-automation.svg b/src/GUI/assets/icons8-automation.svg index 24c9d9e85..b9c83d7db 100644 --- a/src/GUI/assets/icons8-automation.svg +++ b/src/GUI/assets/icons8-automation.svg @@ -1,5 +1,5 @@ - + diff --git a/src/GUI/assets/icons8-grid-view.svg b/src/GUI/assets/icons8-grid-view.svg index 79c925334..fe7bfdb5b 100644 --- a/src/GUI/assets/icons8-grid-view.svg +++ b/src/GUI/assets/icons8-grid-view.svg @@ -1,6 +1,6 @@ - - - + + + diff --git a/src/GUI/assets/icons8-helicopter.svg b/src/GUI/assets/icons8-helicopter.svg index 7447c0122..1b62c0457 100644 --- a/src/GUI/assets/icons8-helicopter.svg +++ b/src/GUI/assets/icons8-helicopter.svg @@ -1,6 +1,6 @@ - - + + diff --git a/src/GUI/assets/icons8-home.svg b/src/GUI/assets/icons8-home.svg index adec20839..59bd6780e 100644 --- a/src/GUI/assets/icons8-home.svg +++ b/src/GUI/assets/icons8-home.svg @@ -1,4 +1,4 @@ - + diff --git a/src/GUI/assets/icons8-location.svg b/src/GUI/assets/icons8-location.svg index 1cc3615cb..4287c0f48 100644 --- a/src/GUI/assets/icons8-location.svg +++ b/src/GUI/assets/icons8-location.svg @@ -1,6 +1,6 @@ - - + + diff --git a/src/GUI/assets/icons8-menu.svg b/src/GUI/assets/icons8-menu.svg index 89b9570c2..6e2ad957a 100644 --- a/src/GUI/assets/icons8-menu.svg +++ b/src/GUI/assets/icons8-menu.svg @@ -1,6 +1,6 @@ - - - + + + diff --git a/src/GUI/assets/icons8-puzzle.svg b/src/GUI/assets/icons8-puzzle.svg index 009c32cee..956b9b7f8 100644 --- a/src/GUI/assets/icons8-puzzle.svg +++ b/src/GUI/assets/icons8-puzzle.svg @@ -1,6 +1,6 @@ - - + + diff --git a/src/GUI/assets/icons8-rocket.svg b/src/GUI/assets/icons8-rocket.svg index 8553c2436..21130b35b 100644 --- a/src/GUI/assets/icons8-rocket.svg +++ b/src/GUI/assets/icons8-rocket.svg @@ -1,6 +1,6 @@ - - + + diff --git a/src/GUI/assets/icons8-windy-weather-filled.svg b/src/GUI/assets/icons8-windy-weather-filled.svg index aca49b628..ce008c5bc 100644 --- a/src/GUI/assets/icons8-windy-weather-filled.svg +++ b/src/GUI/assets/icons8-windy-weather-filled.svg @@ -1,6 +1,6 @@ - - + + diff --git a/src/GUI/qml/AddButton.qml b/src/GUI/qml/AddButton.qml index 84491f121..2bd90d88c 100644 --- a/src/GUI/qml/AddButton.qml +++ b/src/GUI/qml/AddButton.qml @@ -29,8 +29,8 @@ Rectangle { Image { id: icon anchors.right: parent.right - source: mouse.containsMouse ? "image:///colored-icon/add?active" - : "image:///colored-icon/add?text" + source: mouse.containsMouse ? "image://colored-icon/add?active" + : "image://colored-icon/add?text" } MouseArea { diff --git a/src/GUI/qml/GridToggleButton.qml b/src/GUI/qml/GridToggleButton.qml index 47e9c39a7..7d883c591 100644 --- a/src/GUI/qml/GridToggleButton.qml +++ b/src/GUI/qml/GridToggleButton.qml @@ -19,8 +19,10 @@ Rectangle { width: parent.width - Style.margin height: parent.height - Style.margin anchors.centerIn: parent - source: root.gridMode ? "qrc:///svg/icon-grid-view" - : "qrc:///svg/icon-list-view" + + readonly property string __iconSuffix: mouse.containsMouse ? "?theme" : "?text" + source: (root.gridMode ? "image://colored-icon/grid-view" + : "image://colored-icon/list-view") + __iconSuffix } MouseArea { diff --git a/src/GUI/qml/Launcher.qml b/src/GUI/qml/Launcher.qml index a47ca59e5..ca7694557 100644 --- a/src/GUI/qml/Launcher.qml +++ b/src/GUI/qml/Launcher.qml @@ -8,12 +8,12 @@ Item { // order of this model sets the order of buttons in the sidebar ListModel { id: startupPagesModel - ListElement { title: qsTr("Summary"); pageSource: "qrc:///qml/Summary.qml"; iconPath: "qrc:///svg/toolbox-summary"; state:"loader" } - ListElement { title: qsTr("Aircraft"); pageSource: "qrc:///qml/AircraftList.qml"; iconPath: "qrc:///svg/toolbox-aircraft"; state:"loader" } + ListElement { title: qsTr("Summary"); pageSource: "qrc:///qml/Summary.qml"; iconPath: "image://colored-icon/toolbox-summary"; state:"loader" } + ListElement { title: qsTr("Aircraft"); pageSource: "qrc:///qml/AircraftList.qml"; iconPath: "image://colored-icon/toolbox-aircraft"; state:"loader" } ListElement { title: qsTr("Location"); pageSource: "qrc:///qml/Location.qml"; - iconPath: "qrc:///toolbox-location"; state:"loader" + iconPath: "image://colored-icon/toolbox-location"; state:"loader" buttonDisabled: false disabledText: qsTr("Location page disabled due to conflicting user arguments (in Settings)"); } @@ -22,22 +22,22 @@ Item { // permanently so that collecting args works. So we instantiate them down below, and toggle the visiblity // of them and the loader using a state. - ListElement { title: qsTr("Environment"); pageSource: ""; iconPath: "qrc:///svg/toolbox-environment"; state:"environment" } - ListElement { title: qsTr("Settings"); pageSource: ""; iconPath: "qrc:///svg/toolbox-settings"; state:"settings" } + ListElement { title: qsTr("Environment"); pageSource: ""; iconPath: "image://colored-icon/toolbox-environment"; state:"environment" } + ListElement { title: qsTr("Settings"); pageSource: ""; iconPath: "image://colored-icon/toolbox-settings"; state:"settings" } - ListElement { title: qsTr("Add-ons"); pageSource: "qrc:///qml/AddOns.qml"; iconPath: "qrc:///svg/toolbox-addons"; state:"loader" } - ListElement { title: qsTr("Help"); pageSource: "qrc:///qml/HelpSupport.qml"; iconPath: "qrc:///toolbox-help"; state:"loader" } + ListElement { title: qsTr("Add-ons"); pageSource: "qrc:///qml/AddOns.qml"; iconPath: "image://colored-icon/toolbox-addons"; state:"loader" } + ListElement { title: qsTr("Help"); pageSource: "qrc:///qml/HelpSupport.qml"; iconPath: "image://colored-icon/toolbox-help"; state:"loader" } } ListModel { id: inAppPagesModel - ListElement { title: qsTr("Summary"); pageSource: "qrc:///qml/Summary.qml"; iconPath: "qrc:///svg/toolbox-summary"; state:"loader" } - ListElement { title: qsTr("Aircraft"); pageSource: "qrc:///qml/AircraftList.qml"; iconPath: "qrc:///svg/toolbox-aircraft"; state:"loader" } + ListElement { title: qsTr("Summary"); pageSource: "qrc:///qml/Summary.qml"; iconPath: "image://colored-icon/toolbox-summary"; state:"loader" } + ListElement { title: qsTr("Aircraft"); pageSource: "qrc:///qml/AircraftList.qml"; iconPath: "image://colored-icon/toolbox-aircraft"; state:"loader" } ListElement { title: qsTr("Location"); pageSource: "qrc:///qml/Location.qml"; - iconPath: "qrc:///toolbox-location"; state:"loader" + iconPath: "image://colored-icon/toolbox-location"; state:"loader" } } diff --git a/src/GUI/qml/SidebarButton.qml b/src/GUI/qml/SidebarButton.qml index 9e0c724ee..6e60e40d0 100644 --- a/src/GUI/qml/SidebarButton.qml +++ b/src/GUI/qml/SidebarButton.qml @@ -1,5 +1,5 @@ import QtQuick 2.4 -import "." +import FlightGear 1.0 Item { @@ -10,7 +10,7 @@ Item { width: Style.strutSize * 2 height: iconImage.height + label.height + Style.margin + (__smallMargin * 2) - property alias icon: iconImage.source + property string icon: "" property alias label: label.text signal clicked() @@ -35,6 +35,7 @@ Item { Image { id: iconImage + source: root.icon + "?themeContrast" anchors.horizontalCenter: parent.horizontalCenter opacity: root.enabled ? 1.0 : 0.5 y: __smallMargin @@ -42,7 +43,7 @@ Item { Text { id: label - color: "white" + color: Style.themeContrastTextColor // enabled appearance is done via opacity to match the icon opacity: root.enabled ? 1.0 : 0.5 width: parent.width diff --git a/src/GUI/resources.qrc b/src/GUI/resources.qrc index 5076ca5e8..801b828ae 100644 --- a/src/GUI/resources.qrc +++ b/src/GUI/resources.qrc @@ -198,5 +198,19 @@ assets/mask-add.png assets/mask-toolbox-help.png assets/mask-ellipsis.png + + assets/icons8-grid-view.svg + assets/icons8-menu.svg + + assets/icons8-airplane-take-off.svg + assets/icons8-windy-weather-filled.svg + assets/icons8-location.svg + assets/icons8-automation.svg + assets/icons8-puzzle.svg + assets/icons8-home.svg + assets/icons8-aircraft.svg + assets/icons8-rocket.svg + assets/icons8-helicopter.svg +