mirror of
https://git.mirrors.martin98.com/https://github.com/Ultimaker/Cura
synced 2025-05-21 20:19:32 +08:00
Add theme colors
Contributes to CL-1212
This commit is contained in:
parent
1369c98ea6
commit
2e5eb61144
@ -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 != "")
|
||||
|
@ -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
|
||||
{
|
||||
|
@ -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 : ""
|
||||
|
@ -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")
|
||||
}
|
||||
}
|
||||
|
@ -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: ""
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
{
|
||||
|
@ -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:
|
||||
{
|
||||
|
@ -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!
|
||||
|
@ -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 : ""
|
||||
|
@ -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 !== ""
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
|
@ -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],
|
||||
|
Loading…
x
Reference in New Issue
Block a user