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 radius: UM.Theme.getSize("default_radius").width
visible: CuraApplication.platformActivity visible: CuraApplication.platformActivity
property bool backendStatusDone: UM.Backend.state == 3 property bool backendStatusDone: UM.Backend.state == UM.Backend.Done
Loader 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 2.7
import QtQuick.Controls 2.1 import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4 as Controls1
import UM 1.1 as UM import UM 1.1 as UM
import Cura 1.0 as Cura
Button Column
{ {
id: button id: widget
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
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 UM.RecolorImage
{ {
id: buttonIcon id: moreInformationIcon
source: ""
height: Math.round(0.6 * parent.height) anchors
width: height {
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.width: width
sourceSize.height: height sourceSize.height: height
color: button.hovered ? button.textHoverColor : button.textColor
visible: source != ""
anchors.verticalCenter: parent.verticalCenter
Behavior on color { ColorAnimation { duration: 50 } }
}
Label color: UM.Theme.getColor("text_medium")
}
}
Row
{
id: buttonRow
spacing: UM.Theme.getSize("default_margin").width
Cura.ActionButton
{ {
id: buttonText height: UM.Theme.getSize("action_panel_button").height
text: "Preview" text: catalog.i18nc("@button", "Preview")
color: button.enabled ? (button.hovered ? button.textHoverColor : button.textColor): button.textDisabledColor color: UM.Theme.getColor("secondary")
font: UM.Theme.getFont("action_button") hoverColor: UM.Theme.getColor("secondary")
visible: text != "" textColor: UM.Theme.getColor("primary")
renderType: Text.NativeRendering textHoverColor: UM.Theme.getColor("text")
anchors.verticalCenter: parent.verticalCenter onClicked: console.log("Clicking preview")
}
Cura.ActionButton
{
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")
} }
} }
}
background: Rectangle
{
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 } }
}
MouseArea
{
id: mouseArea
anchors.fill: parent
onPressed: mouse.accepted = false
hoverEnabled: true
}
}

View File

@ -38,38 +38,16 @@ Column
} }
} }
Item Cura.IconLabel
{ {
id: message id: message
width: parent.width width: parent.width
height: childrenRect.height
visible: widget.backendState == UM.Backend.Error visible: widget.backendState == UM.Backend.Error
UM.RecolorImage text: catalog.i18nc("@label:PrintjobStatus", "Unable to Slice")
{ source: UM.Theme.getIcon("warning")
id: warningImage color: UM.Theme.getColor("warning")
font: UM.Theme.getFont("very_small")
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")
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 // Progress bar, only visible when the backend is in the process of slice the printjob

View File

@ -7,4 +7,5 @@ PrintSetupSelector 1.0 PrintSetupSelector.qml
ActionButton 1.0 ActionButton.qml ActionButton 1.0 ActionButton.qml
MaterialMenu 1.0 MaterialMenu.qml MaterialMenu 1.0 MaterialMenu.qml
NozzleMenu 1.0 NozzleMenu.qml NozzleMenu 1.0 NozzleMenu.qml
ActionPanelWidget 1.0 ActionPanelWidget.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