mirror of
https://github.com/Ultimaker/Cura.git
synced 2025-07-08 07:27:29 -06:00
Dark mode theme improvements
Contributes to CL-1111
This commit is contained in:
parent
1ad008f45c
commit
817899686a
16 changed files with 137 additions and 90 deletions
|
@ -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;
|
||||||
|
|
|
@ -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");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 : "";
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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");
|
||||||
}
|
}
|
||||||
|
|
|
@ -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: "";
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue