Dark mode theme improvements

Contributes to CL-1111
This commit is contained in:
Ian Paschal 2018-10-19 16:23:16 +02:00
parent 1ad008f45c
commit 817899686a
16 changed files with 137 additions and 90 deletions

View file

@ -9,7 +9,7 @@ import Cura 1.0 as Cura
Rectangle { Rectangle {
property var iconSource: null; property var iconSource: null;
color: clickArea.containsMouse ? UM.Theme.getColor("primary_hover") : UM.Theme.getColor("primary"); color: clickArea.containsMouse ? UM.Theme.getColor("primary_hover") : UM.Theme.getColor("primary"); // "Cura Blue"
height: width; height: width;
radius: 0.5 * width; radius: 0.5 * width;
width: 36 * screenScaleFactor; width: 36 * screenScaleFactor;

View file

@ -10,11 +10,10 @@ import Cura 1.0 as Cura
Component { Component {
Rectangle { Rectangle {
id: base; id: base;
property var lineColor: "#DCDCDC"; // TODO: Should be linked to theme. property var shadowRadius: UM.Theme.getSize("monitor_shadow_radius").width;
property var shadowRadius: 5 * screenScaleFactor; property var cornerRadius: UM.Theme.getSize("monitor_corner_radius").width;
property var cornerRadius: 4 * screenScaleFactor; // TODO: Should be linked to theme.
anchors.fill: parent; anchors.fill: parent;
color: "white"; color: UM.Theme.getColor("sidebar");
visible: OutputDevice != null; visible: OutputDevice != null;
UM.I18nCatalog { UM.I18nCatalog {
@ -31,6 +30,7 @@ Component {
right: parent.right; right: parent.right;
top: parent.top; top: parent.top;
} }
color: UM.Theme.getColor("text");
elide: Text.ElideRight; elide: Text.ElideRight;
font: UM.Theme.getFont("large"); font: UM.Theme.getFont("large");
text: catalog.i18nc("@label", "Printing"); text: catalog.i18nc("@label", "Printing");
@ -43,9 +43,9 @@ Component {
right: printerScrollView.right; right: printerScrollView.right;
rightMargin: 4 * UM.Theme.getSize("default_margin").width; rightMargin: 4 * UM.Theme.getSize("default_margin").width;
} }
color: UM.Theme.getColor("primary"); color: UM.Theme.getColor("primary"); // "Cura Blue"
font: UM.Theme.getFont("default"); font: UM.Theme.getFont("default");
linkColor: UM.Theme.getColor("primary"); linkColor: UM.Theme.getColor("primary"); // "Cura Blue"
text: catalog.i18nc("@label link to connect manager", "Manage printers"); text: catalog.i18nc("@label link to connect manager", "Manage printers");
} }

View file

@ -11,8 +11,7 @@ Component {
Rectangle { Rectangle {
id: monitorFrame; id: monitorFrame;
property var emphasisColor: UM.Theme.getColor("setting_control_border_highlight"); property var emphasisColor: UM.Theme.getColor("setting_control_border_highlight");
property var lineColor: "#DCDCDC"; // TODO: Should be linked to theme. property var cornerRadius: UM.Theme.getSize("monitor_corner_radius").width;
property var cornerRadius: 4 * screenScaleFactor; // TODO: Should be linked to theme.
color: UM.Theme.getColor("viewport_background"); color: UM.Theme.getColor("viewport_background");
height: maximumHeight; height: maximumHeight;
onVisibleChanged: { onVisibleChanged: {

View file

@ -115,7 +115,7 @@ Item {
id: configChangeDetails id: configChangeDetails
Behavior on height { NumberAnimation { duration: 100 } } Behavior on height { NumberAnimation { duration: 100 } }
color: "transparent"; color: "transparent";
height: visible ? UM.Theme.getSize("monitor_tab_config_override_box").height : 0; height: visible ? UM.Theme.getSize("monitor_config_override_box").height : 0;
visible: false; visible: false;
width: parent.width; width: parent.width;

View file

@ -6,7 +6,7 @@ import QtQuick.Controls 2.0
import UM 1.3 as UM import UM 1.3 as UM
Rectangle { Rectangle {
color: UM.Theme.getColor("monitor_tab_lining_inactive"); // TODO: Maybe theme separately? Maybe not. color: UM.Theme.getColor("monitor_lining_light"); // TODO: Maybe theme separately? Maybe not.
height: UM.Theme.getSize("default_lining").height; height: UM.Theme.getSize("default_lining").height;
width: parent.width; width: parent.width;
} }

View file

@ -15,13 +15,13 @@ Item {
// Extruder circle // Extruder circle
Item { Item {
id: extruderCircle; id: extruderCircle;
height: UM.Theme.getSize("monitor_tab_extruder_circle").height; height: UM.Theme.getSize("monitor_extruder_circle").height;
width: UM.Theme.getSize("monitor_tab_extruder_circle").width; width: UM.Theme.getSize("monitor_extruder_circle").width;
// Loading skeleton // Loading skeleton
Rectangle { Rectangle {
anchors.fill: parent; anchors.fill: parent;
color: UM.Theme.getColor("viewport_background"); color: UM.Theme.getColor("monitor_skeleton_fill");
radius: Math.round(width / 2); radius: Math.round(width / 2);
visible: !printCoreConfiguration; visible: !printCoreConfiguration;
} }
@ -29,8 +29,9 @@ Item {
// Actual content // Actual content
Rectangle { Rectangle {
anchors.fill: parent; anchors.fill: parent;
border.width: UM.Theme.getSize("monitor_tab_thick_lining").width; border.width: UM.Theme.getSize("monitor_thick_lining").width;
border.color: UM.Theme.getColor("monitor_tab_lining_active"); border.color: UM.Theme.getColor("monitor_lining_heavy");
color: "transparent";
opacity: { opacity: {
if (printCoreConfiguration == null || printCoreConfiguration.activeMaterial == null || printCoreConfiguration.hotendID == null) { if (printCoreConfiguration == null || printCoreConfiguration.activeMaterial == null || printCoreConfiguration.hotendID == null) {
return 0.5; return 0.5;
@ -42,6 +43,7 @@ Item {
Label { Label {
anchors.centerIn: parent; anchors.centerIn: parent;
color: UM.Theme.getColor("text");
font: UM.Theme.getFont("default_bold"); font: UM.Theme.getFont("default_bold");
text: printCoreConfiguration ? printCoreConfiguration.position + 1 : 0; text: printCoreConfiguration ? printCoreConfiguration.position + 1 : 0;
} }
@ -57,12 +59,12 @@ Item {
right: parent.right; right: parent.right;
top: parent.top; top: parent.top;
} }
height: UM.Theme.getSize("monitor_tab_text_line").height; height: UM.Theme.getSize("monitor_text_line").height;
// Loading skeleton // Loading skeleton
Rectangle { Rectangle {
anchors.fill: parent; anchors.fill: parent;
color: UM.Theme.getColor("viewport_background"); color: UM.Theme.getColor("monitor_skeleton_fill");
visible: !extruderInfo.printCoreConfiguration; visible: !extruderInfo.printCoreConfiguration;
} }
@ -70,6 +72,7 @@ Item {
Label { Label {
anchors.fill: parent; anchors.fill: parent;
elide: Text.ElideRight; elide: Text.ElideRight;
color: UM.Theme.getColor("text");
font: UM.Theme.getFont("default"); font: UM.Theme.getFont("default");
text: { text: {
if (printCoreConfiguration && printCoreConfiguration.activeMaterial != undefined) { if (printCoreConfiguration && printCoreConfiguration.activeMaterial != undefined) {
@ -84,16 +87,17 @@ Item {
Item { Item {
id: printCoreLabel; id: printCoreLabel;
anchors { anchors {
bottom: parent.bottom;
left: extruderCircle.right; left: extruderCircle.right;
leftMargin: UM.Theme.getSize("default_margin").width; leftMargin: UM.Theme.getSize("default_margin").width;
right: parent.right; right: parent.right;
top: materialLabel.bottom;
topMargin: Math.floor(UM.Theme.getSize("default_margin").height/4);
} }
height: UM.Theme.getSize("monitor_tab_text_line").height; height: UM.Theme.getSize("monitor_text_line").height;
// Loading skeleton // Loading skeleton
Rectangle { Rectangle {
color: UM.Theme.getColor("viewport_background"); color: UM.Theme.getColor("monitor_skeleton_fill");
height: parent.height; height: parent.height;
visible: !extruderInfo.printCoreConfiguration; visible: !extruderInfo.printCoreConfiguration;
width: parent.width / 3; width: parent.width / 3;
@ -101,6 +105,7 @@ Item {
// Actual content // Actual content
Label { Label {
color: UM.Theme.getColor("text");
elide: Text.ElideRight; elide: Text.ElideRight;
font: UM.Theme.getFont("default"); font: UM.Theme.getFont("default");
opacity: 0.6; opacity: 0.6;

View file

@ -16,15 +16,15 @@ Item {
Button { Button {
id: button; id: button;
background: Rectangle { background: Rectangle {
color: UM.Theme.getColor("viewport_background"); color: UM.Theme.getColor("viewport_background"); // TODO: Theme!
height: button.height; height: button.height;
opacity: button.down || button.hovered ? 1 : 0; opacity: button.down || button.hovered ? 1 : 0;
radius: 0.5 * width; radius: 0.5 * width;
width: button.width; width: button.width;
} }
contentItem: Label { contentItem: Label {
color: UM.Theme.getColor("monitor_tab_text_inactive"); color: UM.Theme.getColor("monitor_context_menu_dots");
font.pixelSize: 25; font.pixelSize: 25 * screenScaleFactor;
horizontalAlignment: Text.AlignHCenter; horizontalAlignment: Text.AlignHCenter;
text: button.text; text: button.text;
verticalAlignment: Text.AlignVCenter; verticalAlignment: Text.AlignVCenter;
@ -33,7 +33,7 @@ Item {
hoverEnabled: true; hoverEnabled: true;
onClicked: parent.switchPopupState(); onClicked: parent.switchPopupState();
text: "\u22EE"; //Unicode; Three stacked points. text: "\u22EE"; //Unicode; Three stacked points.
width: 35; width: 35 * screenScaleFactor; // TODO: Theme!
} }
Popup { Popup {
@ -45,10 +45,10 @@ Item {
DropShadow { DropShadow {
anchors.fill: pointedRectangle; anchors.fill: pointedRectangle;
color: "#3F000000"; // 25% shadow color: "#3F000000"; // 25% shadow
radius: 5; radius: UM.Theme.getSize("monitor_shadow_radius").width;
source: pointedRectangle; source: pointedRectangle;
transparentBorder: true; transparentBorder: true;
verticalOffset: 2; verticalOffset: 2 * screenScaleFactor;
} }
Item { Item {
@ -64,15 +64,15 @@ Item {
id: point; id: point;
anchors { anchors {
right: bloop.right; right: bloop.right;
rightMargin: 24; rightMargin: 24 * screenScaleFactor;
} }
color: UM.Theme.getColor("setting_control"); color: UM.Theme.getColor("monitor_context_menu_background");
height: 14 * screenScaleFactor; height: 14 * screenScaleFactor;
transform: Rotation { transform: Rotation {
angle: 45; angle: 45;
} }
width: 14 * screenScaleFactor; width: 14 * screenScaleFactor;
y: 1; y: 1 * screenScaleFactor;
} }
Rectangle { Rectangle {
@ -83,7 +83,7 @@ Item {
top: parent.top; top: parent.top;
topMargin: 8 * screenScaleFactor; // Because of the shadow + point topMargin: 8 * screenScaleFactor; // Because of the shadow + point
} }
color: UM.Theme.getColor("setting_control"); color: UM.Theme.getColor("monitor_context_menu_background");
width: parent.width; width: parent.width;
} }
} }
@ -162,7 +162,7 @@ Item {
height: contentItem.height + 2 * padding; height: contentItem.height + 2 * padding;
onClosed: visible = false; onClosed: visible = false;
onOpened: visible = true; onOpened: visible = true;
padding: 5 * screenScaleFactor; // Because shadow padding: UM.Theme.getSize("monitor_shadow_radius").width;
transformOrigin: Popup.Top; transformOrigin: Popup.Top;
visible: false; visible: false;
width: 182 * screenScaleFactor; width: 182 * screenScaleFactor;

View file

@ -9,9 +9,10 @@ import UM 1.3 as UM
Button { Button {
background: Rectangle { background: Rectangle {
opacity: parent.down || parent.hovered ? 1 : 0; opacity: parent.down || parent.hovered ? 1 : 0;
color: UM.Theme.getColor("viewport_background"); // TODO: Theme! color: UM.Theme.getColor("monitor_context_menu_highlight");
} }
contentItem: Label { contentItem: Label {
color: UM.Theme.getColor("text");
text: parent.text text: parent.text
horizontalAlignment: Text.AlignLeft; horizontalAlignment: Text.AlignLeft;
verticalAlignment: Text.AlignVCenter; verticalAlignment: Text.AlignVCenter;

View file

@ -12,7 +12,7 @@ import UM 1.3 as UM
Item { Item {
id: root; id: root;
property var shadowRadius: 5 * screenScaleFactor; property var shadowRadius: UM.Theme.getSize("monitor_shadow_radius").width;
property var shadowOffset: 2 * screenScaleFactor; property var shadowOffset: 2 * screenScaleFactor;
property var debug: false; property var debug: false;
property var printJob: null; property var printJob: null;
@ -33,7 +33,7 @@ Item {
rightMargin: root.shadowRadius; rightMargin: root.shadowRadius;
topMargin: root.shadowRadius - root.shadowOffset; topMargin: root.shadowRadius - root.shadowOffset;
} }
color: "white"; // TODO: Theme! color: UM.Theme.getColor("monitor_card_background");
height: childrenRect.height; height: childrenRect.height;
layer.enabled: true layer.enabled: true
layer.effect: DropShadow { layer.effect: DropShadow {
@ -66,16 +66,17 @@ Item {
Item { Item {
id: printJobName; id: printJobName;
width: parent.width; width: parent.width;
height: UM.Theme.getSize("monitor_tab_text_line").height; height: UM.Theme.getSize("monitor_text_line").height;
Rectangle { Rectangle {
color: UM.Theme.getColor("viewport_background"); // TODO: Theme! color: UM.Theme.getColor("monitor_skeleton_fill");
height: parent.height; height: parent.height;
visible: !printJob; visible: !printJob;
width: parent.width / 3; width: parent.width / 3;
} }
Label { Label {
anchors.fill: parent; anchors.fill: parent;
color: UM.Theme.getColor("text");
elide: Text.ElideRight; elide: Text.ElideRight;
font: UM.Theme.getFont("default_bold"); font: UM.Theme.getFont("default_bold");
text: printJob && printJob.name ? printJob.name : ""; // Supress QML warnings text: printJob && printJob.name ? printJob.name : ""; // Supress QML warnings
@ -89,17 +90,18 @@ Item {
top: printJobName.bottom; top: printJobName.bottom;
topMargin: Math.floor(UM.Theme.getSize("default_margin").height / 2); topMargin: Math.floor(UM.Theme.getSize("default_margin").height / 2);
} }
height: UM.Theme.getSize("monitor_tab_text_line").height; height: UM.Theme.getSize("monitor_text_line").height;
width: parent.width; width: parent.width;
Rectangle { Rectangle {
color: UM.Theme.getColor("viewport_background"); // TODO: Theme! color: UM.Theme.getColor("monitor_skeleton_fill");
height: parent.height; height: parent.height;
visible: !printJob; visible: !printJob;
width: parent.width / 2; width: parent.width / 2;
} }
Label { Label {
anchors.fill: parent; anchors.fill: parent;
color: UM.Theme.getColor("text");
elide: Text.ElideRight; elide: Text.ElideRight;
font: UM.Theme.getFont("default"); font: UM.Theme.getFont("default");
text: printJob ? printJob.owner : ""; // Supress QML warnings text: printJob ? printJob.owner : ""; // Supress QML warnings
@ -121,8 +123,8 @@ Item {
// Skeleton // Skeleton
Rectangle { Rectangle {
anchors.fill: parent; anchors.fill: parent;
color: UM.Theme.getColor("viewport_background"); // TODO: Theme! color: UM.Theme.getColor("monitor_skeleton_fill");
radius: UM.Theme.getSize("default_margin").width; // TODO: Theme! radius: UM.Theme.getSize("default_margin").width;
visible: !printJob; visible: !printJob;
} }
@ -139,7 +141,7 @@ Item {
id: ultiBotImage; id: ultiBotImage;
anchors.centerIn: printJobPreview; anchors.centerIn: printJobPreview;
color: UM.Theme.getColor("monitor_tab_placeholder_image"); // TODO: Theme! color: UM.Theme.getColor("monitor_placeholder_image");
height: printJobPreview.height; height: printJobPreview.height;
source: "../svg/ultibot.svg"; source: "../svg/ultibot.svg";
sourceSize { sourceSize {
@ -155,7 +157,7 @@ Item {
UM.RecolorImage { UM.RecolorImage {
id: statusImage; id: statusImage;
anchors.centerIn: printJobPreview; anchors.centerIn: printJobPreview;
color: "black"; color: UM.Theme.getColor("monitor_image_overlay");
height: 0.5 * printJobPreview.height; height: 0.5 * printJobPreview.height;
source: printJob && printJob.state == "error" ? "../svg/aborted-icon.svg" : ""; source: printJob && printJob.state == "error" ? "../svg/aborted-icon.svg" : "";
sourceSize { sourceSize {
@ -174,7 +176,7 @@ Item {
horizontalCenter: parent.horizontalCenter; horizontalCenter: parent.horizontalCenter;
verticalCenter: parent.verticalCenter; verticalCenter: parent.verticalCenter;
} }
color: !printJob ? UM.Theme.getColor("viewport_background") : "#e6e6e6"; // TODO: Theme! color: !printJob ? UM.Theme.getColor("monitor_skeleton_fill") : UM.Theme.getColor("monitor_lining_light");
height: parent.height - 2 * UM.Theme.getSize("default_margin").height; height: parent.height - 2 * UM.Theme.getSize("default_margin").height;
width: UM.Theme.getSize("default_lining").width; width: UM.Theme.getSize("default_lining").width;
} }
@ -191,16 +193,17 @@ Item {
Item { Item {
id: targetPrinterLabel; id: targetPrinterLabel;
height: UM.Theme.getSize("monitor_tab_text_line").height; height: UM.Theme.getSize("monitor_text_line").height;
width: parent.width; width: parent.width;
Rectangle { Rectangle {
visible: !printJob; visible: !printJob;
color: UM.Theme.getColor("viewport_background"); // TODO: Theme! color: UM.Theme.getColor("monitor_skeleton_fill");
anchors.fill: parent; anchors.fill: parent;
} }
Label { Label {
color: UM.Theme.getColor("text");
elide: Text.ElideRight; elide: Text.ElideRight;
font: UM.Theme.getFont("default_bold"); font: UM.Theme.getFont("default_bold");
text: { text: {
@ -265,7 +268,7 @@ Item {
} }
Rectangle { Rectangle {
color: "#e6e6e6"; // TODO: Theme! color: !printJob ? UM.Theme.getColor("monitor_skeleton_fill") : UM.Theme.getColor("monitor_lining_light");
height: UM.Theme.getSize("default_lining").height; height: UM.Theme.getSize("default_lining").height;
width: parent.width; width: parent.width;
} }
@ -292,6 +295,7 @@ Item {
horizontalCenter: parent.horizontalCenter; horizontalCenter: parent.horizontalCenter;
verticalCenter: parent.verticalCenter; verticalCenter: parent.verticalCenter;
} }
color: UM.Theme.getColor("text");
text: catalog.i18nc("@label", "Configuration change"); text: catalog.i18nc("@label", "Configuration change");
} }
@ -333,7 +337,7 @@ Item {
anchors.top: configChangeToggle.bottom; anchors.top: configChangeToggle.bottom;
Behavior on height { NumberAnimation { duration: 100 } } Behavior on height { NumberAnimation { duration: 100 } }
// In case of really massive multi-line configuration changes // In case of really massive multi-line configuration changes
height: visible ? Math.max(UM.Theme.getSize("monitor_tab_config_override_box").height, childrenRect.height) : 0; height: visible ? Math.max(UM.Theme.getSize("monitor_config_override_box").height, childrenRect.height) : 0;
visible: false; visible: false;
width: parent.width; width: parent.width;
@ -350,6 +354,7 @@ Item {
Label { Label {
anchors.fill: parent; anchors.fill: parent;
elide: Text.ElideRight; elide: Text.ElideRight;
color: UM.Theme.getColor("text");
font: UM.Theme.getFont("large_nonbold"); font: UM.Theme.getFont("large_nonbold");
text: { text: {
if (!printJob || printJob.configurationChanges.length === 0) { if (!printJob || printJob.configurationChanges.length === 0) {

View file

@ -20,8 +20,8 @@ Item {
// Skeleton // Skeleton
Rectangle { Rectangle {
anchors.fill: parent; anchors.fill: parent;
color: UM.Theme.getColor("viewport_background"); // TODO: Theme! color: UM.Theme.getColor("monitor_skeleton_fill");
radius: UM.Theme.getSize("default_margin").width; // TODO: Theme! radius: UM.Theme.getSize("default_margin").width;
visible: !job; visible: !job;
} }
@ -46,7 +46,7 @@ Item {
UM.RecolorImage { UM.RecolorImage {
id: ultibotImage; id: ultibotImage;
anchors.centerIn: parent; anchors.centerIn: parent;
color: UM.Theme.getColor("monitor_tab_placeholder_image"); // TODO: Theme! color: UM.Theme.getColor("monitor_placeholder_image"); // TODO: Theme!
height: parent.height; height: parent.height;
source: "../svg/ultibot.svg"; source: "../svg/ultibot.svg";
sourceSize { sourceSize {

View file

@ -13,11 +13,12 @@ Column {
Item { Item {
id: jobName; id: jobName;
height: UM.Theme.getSize("monitor_tab_text_line").height; height: UM.Theme.getSize("monitor_text_line").height;
width: parent.width; width: parent.width;
// Skeleton loading
Rectangle { Rectangle {
color: UM.Theme.getColor("viewport_background"); // TODO: Use explicit theme color color: UM.Theme.getColor("monitor_skeleton_fill");
height: parent.height; height: parent.height;
visible: !job; visible: !job;
width: parent.width / 3; width: parent.width / 3;
@ -25,6 +26,7 @@ Column {
Label { Label {
anchors.fill: parent; anchors.fill: parent;
color: UM.Theme.getColor("text");
elide: Text.ElideRight; elide: Text.ElideRight;
font: UM.Theme.getFont("default_bold"); font: UM.Theme.getFont("default_bold");
text: job && job.name ? job.name : ""; text: job && job.name ? job.name : "";
@ -34,11 +36,12 @@ Column {
Item { Item {
id: ownerName; id: ownerName;
height: UM.Theme.getSize("monitor_tab_text_line").height; height: UM.Theme.getSize("monitor_text_line").height;
width: parent.width; width: parent.width;
// Skeleton loading
Rectangle { Rectangle {
color: UM.Theme.getColor("viewport_background"); // TODO: Use explicit theme color color: UM.Theme.getColor("monitor_skeleton_fill");
height: parent.height; height: parent.height;
visible: !job; visible: !job;
width: parent.width / 2; width: parent.width / 2;
@ -46,6 +49,7 @@ Column {
Label { Label {
anchors.fill: parent; anchors.fill: parent;
color: UM.Theme.getColor("text")
elide: Text.ElideRight; elide: Text.ElideRight;
font: UM.Theme.getFont("default"); font: UM.Theme.getFont("default");
text: job ? job.owner : ""; text: job ? job.owner : "";

View file

@ -27,10 +27,13 @@ Item {
topMargin: root.shadowRadius - root.shadowOffset; topMargin: root.shadowRadius - root.shadowOffset;
} }
color: { color: {
if (!printer) {
return UM.Theme.getColor("monitor_card_background_inactive");
}
if (printer.state == "disabled") { if (printer.state == "disabled") {
return UM.Theme.getColor("monitor_tab_background_inactive"); return UM.Theme.getColor("monitor_card_background_inactive");
} else { } else {
return UM.Theme.getColor("monitor_tab_background_active"); return UM.Theme.getColor("monitor_card_background");
} }
} }
height: childrenRect.height; height: childrenRect.height;
@ -68,7 +71,7 @@ Item {
// Skeleton // Skeleton
Rectangle { Rectangle {
anchors.fill: parent; anchors.fill: parent;
color: UM.Theme.getColor("viewport_background"); // TODO: Theme! color: UM.Theme.getColor("monitor_skeleton_fill"); // TODO: Theme!
radius: UM.Theme.getSize("default_margin").width; // TODO: Theme! radius: UM.Theme.getSize("default_margin").width; // TODO: Theme!
visible: !printer; visible: !printer;
} }
@ -77,16 +80,10 @@ Item {
UM.RecolorImage { UM.RecolorImage {
anchors.centerIn: parent; anchors.centerIn: parent;
color: { color: {
if (!printer) { if (printer && printer.activePrintJob != undefined) {
return "black"; return UM.Theme.getColor("monitor_printer_icon");
} }
if (printer.state == "disabled") { return UM.Theme.getColor("monitor_printer_icon_inactive");
return UM.Theme.getColor("monitor_tab_text_inactive");
}
if (printer.activePrintJob != undefined) {
return UM.Theme.getColor("primary");
}
return UM.Theme.getColor("monitor_tab_text_inactive");
} }
height: sourceSize.height; height: sourceSize.height;
source: { source: {
@ -119,19 +116,20 @@ Item {
// Machine name // Machine name
Item { Item {
id: machineNameLabel; id: machineNameLabel;
height: UM.Theme.getSize("monitor_tab_text_line").height; height: UM.Theme.getSize("monitor_text_line").height;
width: parent.width * 0.3; width: parent.width * 0.3;
// Skeleton // Skeleton
Rectangle { Rectangle {
anchors.fill: parent; anchors.fill: parent;
color: UM.Theme.getColor("viewport_background"); // TODO: Theme! color: UM.Theme.getColor("monitor_skeleton_fill"); // TODO: Theme!
visible: !printer; visible: !printer;
} }
// Actual content // Actual content
Label { Label {
anchors.fill: parent; anchors.fill: parent;
color: UM.Theme.getColor("text");
elide: Text.ElideRight; elide: Text.ElideRight;
font: UM.Theme.getFont("default_bold"); font: UM.Theme.getFont("default_bold");
text: printer.name; text: printer.name;
@ -147,20 +145,20 @@ Item {
top: machineNameLabel.bottom; top: machineNameLabel.bottom;
topMargin: Math.round(UM.Theme.getSize("default_margin").height / 2); topMargin: Math.round(UM.Theme.getSize("default_margin").height / 2);
} }
height: UM.Theme.getSize("monitor_tab_text_line").height; height: UM.Theme.getSize("monitor_text_line").height;
width: parent.width * 0.75; width: parent.width * 0.75;
// Skeleton // Skeleton
Rectangle { Rectangle {
anchors.fill: parent; anchors.fill: parent;
color: UM.Theme.getColor("viewport_background"); // TODO: Theme! color: UM.Theme.getColor("monitor_skeleton_fill"); // TODO: Theme!
visible: !printer; visible: !printer;
} }
// Actual content // Actual content
Label { Label {
anchors.fill: parent; anchors.fill: parent;
color: UM.Theme.getColor("monitor_tab_text_inactive"); color: UM.Theme.getColor("monitor_text_inactive");
elide: Text.ElideRight; elide: Text.ElideRight;
font: UM.Theme.getFont("default"); font: UM.Theme.getFont("default");
text: { text: {

View file

@ -57,7 +57,7 @@ ProgressBar {
} }
} }
background: Rectangle { background: Rectangle {
color: UM.Theme.getColor("viewport_background"); color: UM.Theme.getColor("monitor_progress_background");
implicitHeight: visible ? 24 : 0; implicitHeight: visible ? 24 : 0;
implicitWidth: 100; implicitWidth: 100;
} }
@ -75,9 +75,9 @@ ProgressBar {
"wait_cleanup" "wait_cleanup"
]; ];
if (inactiveStates.indexOf(state) > -1 && remainingTime > 0) { if (inactiveStates.indexOf(state) > -1 && remainingTime > 0) {
return UM.Theme.getColor("monitor_tab_text_inactive"); return UM.Theme.getColor("monitor_progress_fill_inactive");
} else { } else {
return UM.Theme.getColor("primary"); return UM.Theme.getColor("monitor_progress_fill");
} }
} }
@ -89,7 +89,7 @@ ProgressBar {
} }
text: progressText; text: progressText;
anchors.verticalCenter: parent.verticalCenter; anchors.verticalCenter: parent.verticalCenter;
color: progressItem.width + progressLabel.width < control.width ? "black" : "white"; color: progressItem.width + progressLabel.width < control.width ? UM.Theme.getColor("text") : UM.Theme.getColor("monitor_progress_fill_text");
width: contentWidth; width: contentWidth;
font: UM.Theme.getFont("default"); font: UM.Theme.getFont("default");
} }

View file

@ -8,8 +8,8 @@ import UM 1.2 as UM
Item { Item {
property alias text: familyNameLabel.text; property alias text: familyNameLabel.text;
property var padding: 3 * screenScaleFactor; // TODO: Theme! property var padding: 3 * screenScaleFactor; // TODO: Theme!
implicitHeight: familyNameLabel.contentHeight + 2 * padding; // Apply the padding to top and bottom. implicitHeight: familyNameLabel.contentHeight + 2 * padding; // Apply the padding to top and bottom.
implicitWidth: familyNameLabel.contentWidth + implicitHeight; // The extra height is added to ensure the radius doesn't cut something off. implicitWidth: Math.max(48 * screenScaleFactor, familyNameLabel.contentWidth + implicitHeight); // The extra height is added to ensure the radius doesn't cut something off.
Rectangle { Rectangle {
id: background; id: background;
@ -17,7 +17,7 @@ Item {
horizontalCenter: parent.horizontalCenter; horizontalCenter: parent.horizontalCenter;
right: parent.right; right: parent.right;
} }
color: UM.Theme.getColor("viewport_background"); // TODO: Theme! color: familyNameLabel.text.length < 1 ? UM.Theme.getColor("monitor_skeleton_fill") : UM.Theme.getColor("monitor_pill_background");
height: parent.height; height: parent.height;
radius: 0.5 * height; radius: 0.5 * height;
width: parent.width; width: parent.width;
@ -26,6 +26,7 @@ Item {
Label { Label {
id: familyNameLabel; id: familyNameLabel;
anchors.centerIn: parent; anchors.centerIn: parent;
color: UM.Theme.getColor("text");
text: ""; text: "";
} }
} }

View file

@ -221,6 +221,25 @@
"quality_slider_available": [255, 255, 255, 255], "quality_slider_available": [255, 255, 255, 255],
"quality_slider_handle": [255, 255, 255, 255], "quality_slider_handle": [255, 255, 255, 255],
"quality_slider_handle_hover": [127, 127, 127, 255], "quality_slider_handle_hover": [127, 127, 127, 255],
"quality_slider_text": [255, 255, 255, 255] "quality_slider_text": [255, 255, 255, 255],
"monitor_card_background_inactive": [43, 48, 52, 255],
"monitor_card_background": [43, 48, 52, 255],
"monitor_context_menu_background": [80, 84, 87, 255],
"monitor_context_menu_dots": [0, 167, 233, 255],
"monitor_context_menu_highlight": [0, 167, 233, 255],
"monitor_image_overlay": [255, 255, 255, 255],
"monitor_lining_heavy": [255, 255, 255, 255],
"monitor_lining_light": [102, 102, 102, 255],
"monitor_pill_background": [102, 102, 102, 255],
"monitor_placeholder_image": [102, 102, 102, 255],
"monitor_printer_icon": [255, 255, 255, 255],
"monitor_progress_background_text": [102, 102, 102, 255],
"monitor_progress_background": [80, 84, 87, 255],
"monitor_progress_fill_inactive": [216, 216, 216, 255],
"monitor_progress_fill_text": [0, 0, 0, 255],
"monitor_progress_fill": [216, 216, 216, 255],
"monotir_printer_icon_inactive": [154, 154, 154, 255],
"monitor_skeleton_fill": [31, 36, 39, 255]
} }
} }

View file

@ -323,12 +323,25 @@
"favorites_header_text_hover": [31, 36, 39, 255], "favorites_header_text_hover": [31, 36, 39, 255],
"favorites_row_selected": [196, 239, 255, 255], "favorites_row_selected": [196, 239, 255, 255],
"monitor_tab_background_active": [255, 255, 255, 255], "monitor_card_background_inactive": [240, 240, 240, 255],
"monitor_tab_background_inactive": [240, 240, 240, 255], "monitor_card_background": [255, 255, 255, 255],
"monitor_tab_lining_active": [0, 0, 0, 255], "monitor_context_menu_background": [255, 255, 255, 255],
"monitor_tab_lining_inactive": [230, 230, 230, 255], "monitor_context_menu_dots": [154, 154, 154, 255],
"monitor_tab_placeholder_image": [230, 230, 230, 255], "monitor_context_menu_highlight": [245, 245, 245, 255],
"monitor_tab_text_inactive": [154, 154, 154, 255] "monitor_image_overlay": [0, 0, 0, 255],
"monitor_lining_heavy": [0, 0, 0, 255],
"monitor_lining_light": [230, 230, 230, 255],
"monitor_pill_background": [245, 245, 245, 255],
"monitor_placeholder_image": [230, 230, 230, 255],
"monitor_printer_icon_inactive": [154, 154, 154, 255],
"monitor_printer_icon": [12, 169, 227, 255],
"monitor_progress_background_text": [0,0,0,255],
"monitor_progress_background": [245, 245, 245, 255],
"monitor_progress_fill_inactive": [154, 154, 154, 255],
"monitor_progress_fill_text": [255,255,255,255],
"monitor_progress_fill": [12, 169, 227, 255],
"monitor_skeleton_fill": [245, 245, 245, 255],
"monitor_text_inactive": [154, 154, 154, 255]
}, },
"sizes": { "sizes": {
@ -478,9 +491,11 @@
"toolbox_action_button": [8.0, 2.5], "toolbox_action_button": [8.0, 2.5],
"toolbox_loader": [2.0, 2.0], "toolbox_loader": [2.0, 2.0],
"monitor_tab_config_override_box": [1.0, 14.0], "monitor_config_override_box": [1.0, 14.0],
"monitor_tab_extruder_circle": [2.75, 2.75], "monitor_extruder_circle": [2.75, 2.75],
"monitor_tab_text_line": [1.16, 1.16], "monitor_text_line": [1.16, 1.16],
"monitor_tab_thick_lining": [0.16, 0.16] "monitor_thick_lining": [0.16, 0.16],
"monitor_corner_radius": [0.3, 0.3],
"monitor_shadow_radius": [0.4, 0.4]
} }
} }