Start mocking up the panel the user gets after slicing.

Also the IconLabel component was created with the aim to be reused in
several places.

Contributes to CURA-5786.
This commit is contained in:
Diego Prado Gesto 2018-10-30 17:07:07 +01:00
parent 027bf204cd
commit eabd7c6b5e
8 changed files with 251 additions and 81 deletions

View File

@ -21,7 +21,7 @@ Rectangle
radius: UM.Theme.getSize("default_radius").width
visible: CuraApplication.platformActivity
property bool backendStatusDone: UM.Backend.state == 3
property bool backendStatusDone: UM.Backend.state == UM.Backend.Done
Loader
{

View File

@ -0,0 +1,48 @@
// Copyright (c) 2018 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
import UM 1.1 as UM
// This item will show a label with a squared icon in the left
Item
{
id: container
property alias text: label.text
property alias source: icon.source
property alias color: label.color
property alias font: label.font
height: childrenRect.height
UM.RecolorImage
{
id: icon
anchors.left: parent.left
source: UM.Theme.getIcon("dot")
width: UM.Theme.getSize("section_icon").width
height: UM.Theme.getSize("section_icon").height
sourceSize.width: width
sourceSize.height: height
color: label.color
}
Label
{
id: label
anchors.left: icon.right
anchors.leftMargin: UM.Theme.getSize("thin_margin").width
text: "Empty label"
color: UM.Theme.getColor("text")
font: UM.Theme.getFont("very_small")
renderType: Text.NativeRendering
}
}

View File

@ -4,69 +4,104 @@
import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4 as Controls1
import UM 1.1 as UM
import Cura 1.0 as Cura
Button
Column
{
id: button
property alias cursorShape: mouseArea.cursorShape
property alias iconSource: buttonIcon.source
property alias textFont: buttonText.font
property alias cornerRadius: backgroundRect.radius
property var color: UM.Theme.getColor("primary")
property var hoverColor: UM.Theme.getColor("primary_hover")
property var disabledColor: color
property var textColor: UM.Theme.getColor("button_text")
property var textHoverColor: UM.Theme.getColor("button_text_hover")
property var textDisabledColor: textColor
property var outlineColor: color
property var outlineHoverColor: hoverColor
property var outlineDisabledColor: outlineColor
id: widget
contentItem: Row
spacing: UM.Theme.getSize("thin_margin").height
UM.I18nCatalog
{
id: catalog
name: "cura"
}
Item
{
id: information
width: parent.width
height: childrenRect.height
Column
{
id: timeAndCostsInformation
anchors
{
left: parent.left
right: moreInformationIcon.left
rightMargin: UM.Theme.getSize("thin_margin").height
}
Cura.IconLabel
{
id: estimatedTime
width: parent.width
text: "Time"
source: UM.Theme.getIcon("clock")
font: UM.Theme.getFont("small")
}
Cura.IconLabel
{
id: estimatedCosts
width: parent.width
text: "Material costs"
source: UM.Theme.getIcon("spool")
font: UM.Theme.getFont("very_small")
}
}
UM.RecolorImage
{
id: buttonIcon
source: ""
height: Math.round(0.6 * parent.height)
width: height
id: moreInformationIcon
anchors
{
right: parent.right
verticalCenter: timeAndCostsInformation.verticalCenter
}
source: UM.Theme.getIcon("info")
width: UM.Theme.getSize("section_icon").width
height: UM.Theme.getSize("section_icon").height
sourceSize.width: width
sourceSize.height: height
color: button.hovered ? button.textHoverColor : button.textColor
visible: source != ""
anchors.verticalCenter: parent.verticalCenter
Behavior on color { ColorAnimation { duration: 50 } }
}
Label
{
id: buttonText
text: "Preview"
color: button.enabled ? (button.hovered ? button.textHoverColor : button.textColor): button.textDisabledColor
font: UM.Theme.getFont("action_button")
visible: text != ""
renderType: Text.NativeRendering
anchors.verticalCenter: parent.verticalCenter
color: UM.Theme.getColor("text_medium")
}
}
background: Rectangle
Row
{
id: backgroundRect
color: button.enabled ? (button.hovered ? button.hoverColor : button.color) : button.disabledColor
radius: UM.Theme.getSize("action_button_radius").width
border.width: UM.Theme.getSize("default_lining").width
border.color: button.enabled ? (button.hovered ? button.outlineHoverColor : button.outlineColor) : button.outlineDisabledColor
Behavior on color { ColorAnimation { duration: 50 } }
id: buttonRow
spacing: UM.Theme.getSize("default_margin").width
Cura.ActionButton
{
height: UM.Theme.getSize("action_panel_button").height
text: catalog.i18nc("@button", "Preview")
color: UM.Theme.getColor("secondary")
hoverColor: UM.Theme.getColor("secondary")
textColor: UM.Theme.getColor("primary")
textHoverColor: UM.Theme.getColor("text")
onClicked: console.log("Clicking preview")
}
MouseArea
Cura.ActionButton
{
id: mouseArea
anchors.fill: parent
onPressed: mouse.accepted = false
hoverEnabled: true
width: UM.Theme.getSize("account_button").width
height: UM.Theme.getSize("action_panel_button").height
text: catalog.i18nc("@button", "Save to file")
onClicked: console.log("Clicking action button")
}
}
}

View File

@ -38,39 +38,17 @@ Column
}
}
Item
Cura.IconLabel
{
id: message
width: parent.width
height: childrenRect.height
visible: widget.backendState == UM.Backend.Error
UM.RecolorImage
{
id: warningImage
anchors.left: parent.left
source: UM.Theme.getIcon("warning")
width: UM.Theme.getSize("section_icon").width
height: UM.Theme.getSize("section_icon").height
sourceSize.width: width
sourceSize.height: height
color: UM.Theme.getColor("warning")
}
Label
{
id: unableToSliceLabel
anchors.left: warningImage.right
anchors.leftMargin: UM.Theme.getSize("thin_margin").width
text: catalog.i18nc("@label:PrintjobStatus", "Unable to Slice")
source: UM.Theme.getIcon("warning")
color: UM.Theme.getColor("warning")
font: UM.Theme.getFont("very_small")
}
}
// Progress bar, only visible when the backend is in the process of slice the printjob
ProgressBar

View File

@ -8,3 +8,4 @@ ActionButton 1.0 ActionButton.qml
MaterialMenu 1.0 MaterialMenu.qml
NozzleMenu 1.0 NozzleMenu.qml
ActionPanelWidget 1.0 ActionPanelWidget.qml
IconLabel 1.0 IconLabel.qml

View File

@ -0,0 +1,53 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="612px" height="612px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
<g>
<g>
<path d="M587.572,186.881c-32.266-75.225-87.096-129.934-162.949-162.285C386.711,8.427,346.992,0.168,305.497,0.168
c-41.488,0-80.914,8.181-118.784,24.428C111.488,56.861,56.415,111.535,24.092,186.881C7.895,224.629,0,264.176,0,305.664
c0,41.496,7.895,81.371,24.092,119.127c32.323,75.346,87.403,130.348,162.621,162.621c37.877,16.247,77.295,24.42,118.784,24.42
c41.489,0,81.214-8.259,119.12-24.42c75.853-32.352,130.683-87.403,162.956-162.621C603.819,386.914,612,347.16,612,305.664
C612,264.176,603.826,224.757,587.572,186.881z M538.724,440.853c-24.021,41.195-56.929,73.876-98.375,98.039
c-41.195,24.021-86.332,36.135-134.845,36.135c-36.47,0-71.27-7.024-104.4-21.415c-33.129-14.384-61.733-33.294-85.661-57.215
c-23.928-23.928-42.973-52.811-57.214-85.997c-14.199-33.065-21.08-68.258-21.08-104.735c0-48.52,11.921-93.428,35.807-134.509
c23.971-41.231,56.886-73.947,98.039-98.04c41.146-24.092,85.99-36.142,134.502-36.142c48.52,0,93.649,12.121,134.845,36.142
c41.446,24.164,74.283,56.879,98.375,98.039c24.092,41.153,36.135,85.99,36.135,134.509
C574.852,354.185,562.888,399.399,538.724,440.853z"/>
<path d="M324.906,302.988V129.659c0-10.372-9.037-18.738-19.41-18.738c-9.701,0-18.403,8.366-18.403,18.738v176.005
c0,0.336,0.671,1.678,0.671,2.678c-0.671,6.024,1.007,11.043,5.019,15.062l100.053,100.046c6.695,6.695,19.073,6.695,25.763,0
c7.694-7.695,7.188-18.86,0-26.099L324.906,302.988z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -0,0 +1,48 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 111.577 111.577" style="enable-background:new 0 0 111.577 111.577;" xml:space="preserve">
<g>
<path d="M78.962,99.536l-1.559,6.373c-4.677,1.846-8.413,3.251-11.195,4.217c-2.785,0.969-6.021,1.451-9.708,1.451
c-5.662,0-10.066-1.387-13.207-4.142c-3.141-2.766-4.712-6.271-4.712-10.523c0-1.646,0.114-3.339,0.351-5.064
c0.239-1.727,0.619-3.672,1.139-5.846l5.845-20.688c0.52-1.981,0.962-3.858,1.316-5.633c0.359-1.764,0.532-3.387,0.532-4.848
c0-2.642-0.547-4.49-1.636-5.529c-1.089-1.036-3.167-1.562-6.252-1.562c-1.511,0-3.064,0.242-4.647,0.71
c-1.59,0.47-2.949,0.924-4.09,1.346l1.563-6.378c3.829-1.559,7.489-2.894,10.99-4.002c3.501-1.111,6.809-1.667,9.938-1.667
c5.623,0,9.962,1.359,13.009,4.077c3.047,2.72,4.57,6.246,4.57,10.591c0,0.899-0.1,2.483-0.315,4.747
c-0.21,2.269-0.601,4.348-1.171,6.239l-5.82,20.605c-0.477,1.655-0.906,3.547-1.279,5.676c-0.385,2.115-0.569,3.731-0.569,4.815
c0,2.736,0.61,4.604,1.833,5.597c1.232,0.993,3.354,1.487,6.368,1.487c1.415,0,3.025-0.251,4.814-0.744
C76.854,100.348,78.155,99.915,78.962,99.536z M80.438,13.03c0,3.59-1.353,6.656-4.072,9.177c-2.712,2.53-5.98,3.796-9.803,3.796
c-3.835,0-7.111-1.266-9.854-3.796c-2.738-2.522-4.11-5.587-4.11-9.177c0-3.583,1.372-6.654,4.11-9.207
C59.447,1.274,62.729,0,66.563,0c3.822,0,7.091,1.277,9.803,3.823C79.087,6.376,80.438,9.448,80.438,13.03z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<switch>
<g>
<path d="M2.995 1H5.67v24H2.995zm21.33 0H27v24h-2.675zM8.992 3.284c-.368 0-.669.224-.669.5v18.433c0 .276.3.5.669.5.369 0 .669-.224.669-.5V3.784c0-.276-.299-.5-.669-.5m4.003 0c-.368 0-.669.224-.669.5v18.433c0 .276.3.5.669.5.371 0 .669-.224.669-.5V3.784c0-.276-.298-.5-.669-.5m4.004 0c-.371 0-.669.224-.669.5v24.451c0 .277.298.5.669.5.368 0 .669-.223.669-.5V3.784c0-.276-.301-.5-.669-.5m4.003 0c-.368 0-.669.224-.669.5v18.433c0 .276.3.5.669.5.37 0 .669-.224.669-.5V3.784c-.001-.276-.3-.5-.669-.5"/>
</g>
</switch>
</svg>

After

Width:  |  Height:  |  Size: 629 B