From 2e5eb611442b992ca0da60dc22a9e16538c48fa9 Mon Sep 17 00:00:00 2001 From: Ian Paschal Date: Mon, 21 Jan 2019 13:07:16 +0100 Subject: [PATCH] Add theme colors Contributes to CL-1212 --- .../resources/qml/CameraButton.qml | 41 +++++++++++-------- .../resources/qml/ExpandableCard.qml | 21 +++++----- .../qml/MonitorBuildplateConfiguration.qml | 4 +- .../resources/qml/MonitorCarousel.qml | 12 +++--- .../qml/MonitorExtruderConfiguration.qml | 10 ++--- .../resources/qml/MonitorPrintJobCard.qml | 14 +++---- .../resources/qml/MonitorPrintJobPreview.qml | 2 +- .../qml/MonitorPrintJobProgressBar.qml | 8 ++-- .../resources/qml/MonitorPrinterCard.qml | 6 +-- .../qml/MonitorPrinterConfiguration.qml | 2 +- .../resources/qml/MonitorPrinterPill.qml | 4 +- .../resources/qml/MonitorQueue.qml | 6 +-- .../resources/qml/PrintJobContextMenu.qml | 2 +- resources/themes/cura-light/theme.json | 1 + 14 files changed, 70 insertions(+), 63 deletions(-) diff --git a/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml b/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml index 6f054f9c19..eded3f4db6 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml @@ -9,30 +9,35 @@ import Cura 1.0 as Cura Rectangle { id: base - property var iconSource: null; - color: "#0a0850" // TODO: Theme! - height: width; - radius: Math.round(0.5 * width); - width: 24 * screenScaleFactor; property var enabled: true + property var iconSource: null - UM.RecolorImage { - id: icon; - anchors { - horizontalCenter: parent.horizontalCenter; - verticalCenter: parent.verticalCenter; + color: UM.Theme.getColor("small_button_active") + height: UM.Theme.getSize("small_button").height + radius: Math.round(0.5 * width) + width: UM.Theme.getSize("small_button").width + + UM.RecolorImage + { + id: icon + anchors + { + horizontalCenter: parent.horizontalCenter + verticalCenter: parent.verticalCenter } - color: UM.Theme.getColor("primary_text"); - height: width; - source: iconSource; - width: Math.round(parent.width / 2); + color: UM.Theme.getColor("small_button_text_active") + height: Math.round(parent.height / 2) + source: iconSource + width: Math.round(parent.width / 2) } - MouseArea { - id: clickArea; - anchors.fill: parent; + MouseArea + { + id: clickArea + anchors.fill: parent hoverEnabled: base.enabled - onClicked: { + onClicked: + { if (base.enabled) { if (OutputDevice.activeCameraUrl != "") diff --git a/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml b/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml index d4c123652d..4af505a989 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml @@ -6,21 +6,22 @@ import QtQuick.Controls 2.0 import UM 1.3 as UM import Cura 1.0 as Cura -// TODO: Theme & documentation! -// The expandable component has 3 major sub components: -// * The headerItem Always visible and should hold some info about what happens if the component is expanded -// * The popupItem The content that needs to be shown if the component is expanded. +/** + * The expandable component has 3 major sub components: + * - The headerItem Always visible and should hold some info about what happens if the component is expanded + * - The popupItem The content that needs to be shown if the component is expanded. + */ Item { id: base property bool expanded: false property bool enabled: true - property var borderWidth: 1 - property color borderColor: "#CCCCCC" - property color headerBackgroundColor: "white" - property color headerHoverColor: "#e8f2fc" - property color drawerBackgroundColor: "white" + property var borderWidth: UM.Theme.getSize("default_lining") + property color borderColor: UM.Theme.getColor("wide_lining") + property color headerBackgroundColor: UM.Theme.getColor("main_background") + property color headerHoverColor: UM.Theme.getColor("action_button_hovered") + property color drawerBackgroundColor: UM.Theme.getColor("main_background") property alias headerItem: header.children property alias drawerItem: drawer.children @@ -65,7 +66,7 @@ Item anchors { top: header.bottom - topMargin: -1 + topMargin: UM.Theme.getSize("default_lining") * -1 } border { diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml index 192a5a7f76..8813be7217 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml @@ -49,7 +49,7 @@ Item { id: buildplateIcon anchors.centerIn: parent - color: "#0a0850" // TODO: Theme! (Standard purple) + color: UM.Theme.getColor("small_button_active") height: parent.height source: "../svg/icons/buildplate.svg" width: height @@ -60,7 +60,7 @@ Item Label { id: buildplateLabel - color: "#191919" // TODO: Theme! + color: UM.Theme.getColor("text") elide: Text.ElideRight font: UM.Theme.getFont("default") // 12pt, regular text: buildplate ? buildplate : "" diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml index de24ee5a8c..024f4f61e0 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml @@ -82,9 +82,9 @@ Item onClicked: navigateTo(currentIndex - 1) background: Rectangle { - color: leftButton.hovered ? "#e8f2fc" : "#ffffff" // TODO: Theme! + color: leftButton.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button") border.width: 1 * screenScaleFactor // TODO: Theme! - border.color: "#cccccc" // TODO: Theme! + border.color: UM.Theme.getColor("wide_lining") radius: 2 * screenScaleFactor // TODO: Theme! } contentItem: Item @@ -94,10 +94,10 @@ Item { anchors.centerIn: parent width: 18 // TODO: Theme! - height: width // TODO: Theme! - sourceSize.width: width // TODO: Theme! - sourceSize.height: width // TODO: Theme! - color: "#152950" // TODO: Theme! + height: width + sourceSize.width: width + sourceSize.height: width + color: UM.Theme.getColor("text") source: UM.Theme.getIcon("arrow_left") } } diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml index 17c0fa8651..3fce4cf5ee 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml @@ -36,7 +36,7 @@ Item MonitorIconExtruder { id: extruderIcon - color: "#eeeeee" // TODO: Theme! + color: UM.Theme.getColor("secondary") position: 0 } @@ -48,8 +48,8 @@ Item left: extruderIcon.right leftMargin: 12 * screenScaleFactor // TODO: Theme! } - color: materialLabel.visible > 0 ? "transparent" : "#eeeeee" // TODO: Theme! height: 18 * screenScaleFactor // TODO: Theme! + color: materialLabel.visible > 0 ? "transparent" : UM.Theme.getColor("secondary") width: Math.max(materialLabel.contentWidth, 60 * screenScaleFactor) // TODO: Theme! radius: 2 * screenScaleFactor // TODO: Theme! @@ -57,7 +57,7 @@ Item { id: materialLabel - color: "#191919" // TODO: Theme! + color: UM.Theme.getColor("text") elide: Text.ElideRight font: UM.Theme.getFont("default") // 12pt, regular text: "" @@ -77,8 +77,8 @@ Item left: materialLabelWrapper.left bottom: parent.bottom } - color: printCoreLabel.visible > 0 ? "transparent" : "#eeeeee" // TODO: Theme! height: 18 * screenScaleFactor // TODO: Theme! + color: printCoreLabel.visible > 0 ? "transparent" : UM.Theme.getColor("secondary") width: Math.max(printCoreLabel.contentWidth, 36 * screenScaleFactor) // TODO: Theme! radius: 2 * screenScaleFactor // TODO: Theme! @@ -86,7 +86,7 @@ Item { id: printCoreLabel - color: "#191919" // TODO: Theme! + color: UM.Theme.getColor("text") elide: Text.ElideRight font: UM.Theme.getFont("default_bold") // 12pt, bold text: "" diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml index f2b9c3cff7..b11055f603 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml @@ -49,7 +49,7 @@ Item width: 216 * screenScaleFactor // TODO: Theme! (Should match column size) Rectangle { - color: "#eeeeee" + color: UM.Theme.getColor("secondary") width: Math.round(parent.width / 2) height: parent.height visible: !printJob @@ -57,7 +57,7 @@ Item Label { text: printJob && printJob.name ? printJob.name : "" - color: "#374355" + color: UM.Theme.getColor("text") elide: Text.ElideRight font: UM.Theme.getFont("medium") // 14pt, regular visible: printJob @@ -75,7 +75,7 @@ Item width: 216 * screenScaleFactor // TODO: Theme! (Should match column size) Rectangle { - color: "#eeeeee" + color: UM.Theme.getColor("secondary") width: Math.round(parent.width / 3) height: parent.height visible: !printJob @@ -83,7 +83,7 @@ Item Label { text: printJob ? OutputDevice.formatDuration(printJob.timeTotal) : "" - color: "#374355" + color: UM.Theme.getColor("text") elide: Text.ElideRight font: UM.Theme.getFont("medium") // 14pt, regular visible: printJob @@ -102,7 +102,7 @@ Item Rectangle { - color: "#eeeeee" + color: UM.Theme.getColor("secondary") width: 72 * screenScaleFactor // TODO: Theme! height: parent.height visible: !printJob @@ -112,7 +112,7 @@ Item { id: printerAssignmentLabel anchors.verticalCenter: parent.verticalCenter - color: "#374355" + color: UM.Theme.getColor("text") elide: Text.ElideRight font: UM.Theme.getFont("medium") // 14pt, regular text: { @@ -186,7 +186,7 @@ Item } Label { text: printJob && printJob.owner ? printJob.owner : "" - color: "#374355" // TODO: Theme! + color: UM.Theme.getColor("text") elide: Text.ElideRight font: UM.Theme.getFont("medium") // 14pt, regular anchors.top: printerConfiguration.top diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml index d0bad63258..616a23c1dc 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml @@ -19,7 +19,7 @@ Item Rectangle { anchors.fill: parent - color: printJob ? "transparent" : "#eeeeee" // TODO: Theme! + color: printJob ? "transparent" : UM.Theme.getColor("secondary") radius: 8 // TODO: Theme! Image { diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobProgressBar.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobProgressBar.qml index d5d4705a36..5b284fd2e1 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobProgressBar.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobProgressBar.qml @@ -34,16 +34,16 @@ Item { background: Rectangle { - color: "#f5f5f5" // TODO: Theme! implicitHeight: visible ? 8 * screenScaleFactor : 0 // TODO: Theme! + color: UM.Theme.getColor("progressbar_background") implicitWidth: 180 * screenScaleFactor // TODO: Theme! radius: 2 * screenScaleFactor // TODO: Theme! } progress: Rectangle { id: progressItem; - color: printJob && printJob.isActive ? "#3282ff" : "#CCCCCC" // TODO: Theme! radius: 2 * screenScaleFactor // TODO: Theme! + color: printJob && printJob.isActive ? UM.Theme.getColor("progressbar_control") : UM.Theme.getColor("progressbar_disabled") } } } @@ -56,7 +56,7 @@ Item leftMargin: 18 * screenScaleFactor // TODO: Theme! } text: printJob ? Math.round(printJob.progress * 100) + "%" : "0%" - color: printJob && printJob.isActive ? "#374355" : "#babac1" // TODO: Theme! + color: printJob && printJob.isActive ? UM.Theme.getColor("text") : UM.Theme.getColor("text_inactive") width: contentWidth font: UM.Theme.getFont("medium") // 14pt, regular @@ -72,7 +72,7 @@ Item left: percentLabel.right leftMargin: 18 * screenScaleFactor // TODO: Theme! } - color: "#374355" // TODO: Theme! + color: UM.Theme.getColor("text") font: UM.Theme.getFont("medium") // 14pt, regular text: { diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml index facfaaaaaf..a312caf124 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml @@ -69,7 +69,7 @@ Item id: printerImage width: 108 * screenScaleFactor // TODO: Theme! height: 108 * screenScaleFactor // TODO: Theme! - color: printer ? "transparent" : "#eeeeee" // TODO: Theme! + color: printer ? "transparent" : UM.Theme.getColor("secondary") radius: 8 // TODO: Theme! Image { @@ -94,8 +94,8 @@ Item { id: printerNameLabel // color: "#414054" // TODO: Theme! - color: printer ? "transparent" : "#eeeeee" // TODO: Theme! height: 18 * screenScaleFactor // TODO: Theme! + color: printer ? "transparent" : UM.Theme.getColor("secondary") width: parent.width radius: 2 * screenScaleFactor // TODO: Theme! @@ -116,8 +116,8 @@ Item Rectangle { - color: "#eeeeee" // TODO: Theme! height: 18 * screenScaleFactor // TODO: Theme! + color: UM.Theme.getColor("secondary") radius: 2 * screenScaleFactor // TODO: Theme! visible: !printer width: 48 * screenScaleFactor // TODO: Theme! diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml index debc8b7959..9c30fec3fc 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml @@ -37,7 +37,7 @@ Item MonitorExtruderConfiguration { - color: modelData && modelData.activeMaterial ? modelData.activeMaterial.color : "#eeeeee" // TODO: Theme! + color: modelData && modelData.activeMaterial ? modelData.activeMaterial.color : UM.Theme.getColor("secondary") material: modelData && modelData.activeMaterial ? modelData.activeMaterial.name : "" position: modelData && typeof(modelData.position) === "number" ? modelData.position : -1 // Use negative one to create empty extruder number printCore: modelData ? modelData.hotendID : "" diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterPill.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterPill.qml index 2408089e1e..1d2bb5a923 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterPill.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterPill.qml @@ -32,14 +32,14 @@ Item Rectangle { id: background anchors.fill: parent - color: printerNameLabel.visible ? "#e4e4f2" : "#eeeeee"// TODO: Theme! + color: printerNameLabel.visible ? UM.Theme.getColor("printer_type_label_background") : UM.Theme.getColor("secondary") radius: 2 * screenScaleFactor // TODO: Theme! } Label { id: printerNameLabel anchors.centerIn: parent - color: "#535369" // TODO: Theme! + color: UM.Theme.getColor("text") text: tagText font.pointSize: 10 // TODO: Theme! visible: text !== "" diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorQueue.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorQueue.qml index f2dc09de95..2a0e1cab7b 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorQueue.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorQueue.qml @@ -94,7 +94,7 @@ Item Label { text: catalog.i18nc("@label", "Print jobs") - color: "#666666" + color: UM.Theme.getColor("text_scene") elide: Text.ElideRight font: UM.Theme.getFont("medium") // 14pt, regular anchors.verticalCenter: parent.verticalCenter @@ -108,7 +108,7 @@ Item Label { text: catalog.i18nc("@label", "Total print time") - color: "#666666" + color: UM.Theme.getColor("text_scene") elide: Text.ElideRight font: UM.Theme.getFont("medium") // 14pt, regular anchors.verticalCenter: parent.verticalCenter @@ -122,7 +122,7 @@ Item Label { text: catalog.i18nc("@label", "Waiting for") - color: "#666666" + color: UM.Theme.getColor("text_scene") elide: Text.ElideRight font: UM.Theme.getFont("medium") // 14pt, regular anchors.verticalCenter: parent.verticalCenter diff --git a/plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenu.qml b/plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenu.qml index 5c5c892dad..0d10fe0e7c 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenu.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenu.qml @@ -18,7 +18,7 @@ Item { Button { id: button; background: Rectangle { - color: UM.Theme.getColor("viewport_background"); // TODO: Theme! + color: UM.Theme.getColor("viewport_background") height: button.height; opacity: button.down || button.hovered ? 1 : 0; radius: Math.round(0.5 * width); diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 2b42778df4..00ecd99dbc 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -298,6 +298,7 @@ "progressbar_background": [245, 245, 245, 255], "progressbar_control": [50, 130, 255, 255], + "progressbar_disabled": [204, 204, 204, 255], "slider_groove": [223, 223, 223, 255], "slider_groove_fill": [8, 7, 63, 255],