Merge pull request #4429 from Ultimaker/cura_connect_improvements_3.5

Cura connect improvements 3.5
This commit is contained in:
Simon Edwards 2018-09-25 17:26:55 +02:00 committed by GitHub
commit baa8064ec7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 262 additions and 121 deletions

View file

@ -0,0 +1,47 @@
import QtQuick 2.3
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.3
import QtQuick.Controls 2.0 as Controls2
import QtGraphicalEffects 1.0
import UM 1.3 as UM
import Cura 1.0 as Cura
Rectangle
{
property var iconSource: null
width: 36 * screenScaleFactor
height: width
radius: 0.5 * width
color: clickArea.containsMouse ? UM.Theme.getColor("primary_hover") : UM.Theme.getColor("primary")
UM.RecolorImage
{
id: icon
width: parent.width / 2
height: width
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
color: UM.Theme.getColor("primary_text")
source: iconSource
}
MouseArea
{
id: clickArea
anchors.fill:parent
hoverEnabled: true
onClicked:
{
if (OutputDevice.activeCamera !== null)
{
OutputDevice.setActiveCamera(null)
}
else
{
OutputDevice.setActiveCamera(modelData.camera)
}
}
}
}

View file

@ -16,7 +16,7 @@ Component
{
id: base
property var lineColor: "#DCDCDC" // TODO: Should be linked to theme.
property var shadowRadius: 5 * screenScaleFactor
property var cornerRadius: 4 * screenScaleFactor // TODO: Should be linked to theme.
visible: OutputDevice != null
anchors.fill: parent
@ -83,6 +83,8 @@ Component
ListView
{
id: printer_list
property var current_index: -1
anchors
{
top: parent.top
@ -105,18 +107,35 @@ Component
height: childrenRect.height + UM.Theme.getSize("default_margin").height
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
color:
{
if(modelData.state == "disabled")
{
return UM.Theme.getColor("monitor_background_inactive")
}
else
{
return UM.Theme.getColor("monitor_background_active")
}
}
id: base
property var shadowRadius: 5
property var shadowRadius: 5 * screenScaleFactor
property var collapsed: true
layer.enabled: true
layer.effect: DropShadow
{
radius: base.shadowRadius
radius: 5 * screenScaleFactor
verticalOffset: 2
color: "#3F000000" // 25% shadow
}
Connections
{
target: printer_list
onCurrent_indexChanged: { base.collapsed = printer_list.current_index != model.index }
}
Item
{
id: printerInfo
@ -132,7 +151,16 @@ Component
MouseArea
{
anchors.fill: parent
onClicked: base.collapsed = !base.collapsed
onClicked:
{
if (base.collapsed) {
printer_list.current_index = model.index
}
else
{
printer_list.current_index = -1
}
}
}
Item
@ -168,7 +196,7 @@ Component
{
if(modelData.state == "disabled")
{
return UM.Theme.getColor("setting_control_disabled")
return UM.Theme.getColor("monitor_text_inactive")
}
if(modelData.activePrintJob != undefined)
@ -176,7 +204,7 @@ Component
return UM.Theme.getColor("primary")
}
return UM.Theme.getColor("setting_control_disabled")
return UM.Theme.getColor("monitor_text_inactive")
}
}
}
@ -224,7 +252,7 @@ Component
width: parent.width
elide: Text.ElideRight
font: UM.Theme.getFont("default")
opacity: 0.6
color: UM.Theme.getColor("monitor_text_inactive")
}
}
@ -257,8 +285,16 @@ Component
Rectangle
{
id: topSpacer
color: UM.Theme.getColor("viewport_background")
height: 2
color:
{
if(modelData.state == "disabled")
{
return UM.Theme.getColor("monitor_lining_inactive")
}
return UM.Theme.getColor("viewport_background")
}
// UM.Theme.getColor("viewport_background")
height: 1
anchors
{
left: parent.left
@ -271,7 +307,14 @@ Component
PrinterFamilyPill
{
id: printerFamilyPill
color: UM.Theme.getColor("viewport_background")
color:
{
if(modelData.state == "disabled")
{
return "transparent"
}
return UM.Theme.getColor("viewport_background")
}
anchors.top: topSpacer.bottom
anchors.topMargin: 2 * UM.Theme.getSize("default_margin").height
text: modelData.type
@ -357,21 +400,13 @@ Component
function switchPopupState()
{
if (popup.visible)
{
popup.close()
}
else
{
popup.open()
}
popup.visible ? popup.close() : popup.open()
}
Controls2.Button
{
id: contextButton
text: "\u22EE" //Unicode; Three stacked points.
font.pixelSize: 25
width: 35
height: width
anchors
@ -389,6 +424,14 @@ Component
radius: 0.5 * width
color: UM.Theme.getColor("viewport_background")
}
contentItem: Label
{
text: contextButton.text
color: UM.Theme.getColor("monitor_text_inactive")
font.pixelSize: 25
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
onClicked: parent.switchPopupState()
}
@ -398,18 +441,21 @@ Component
// TODO Change once updating to Qt5.10 - The 'opened' property is in 5.10 but the behavior is now implemented with the visible property
id: popup
clip: true
closePolicy: Controls2.Popup.CloseOnPressOutsideParent
x: parent.width - width
y: contextButton.height
width: 160
closePolicy: Popup.CloseOnPressOutside
x: (parent.width - width) + 26 * screenScaleFactor
y: contextButton.height - 5 * screenScaleFactor // Because shadow
width: 182 * screenScaleFactor
height: contentItem.height + 2 * padding
visible: false
padding: 5 * screenScaleFactor // Because shadow
transformOrigin: Controls2.Popup.Top
transformOrigin: Popup.Top
contentItem: Item
{
width: popup.width - 2 * popup.padding
height: childrenRect.height + 15
width: popup.width
height: childrenRect.height + 36 * screenScaleFactor
anchors.topMargin: 10 * screenScaleFactor
anchors.bottomMargin: 10 * screenScaleFactor
Controls2.Button
{
id: pauseButton
@ -428,14 +474,22 @@ Component
}
width: parent.width
enabled: modelData.activePrintJob != null && ["paused", "printing"].indexOf(modelData.activePrintJob.state) >= 0
visible: enabled
anchors.top: parent.top
anchors.topMargin: 10
anchors.topMargin: 18 * screenScaleFactor
height: visible ? 39 * screenScaleFactor : 0 * screenScaleFactor
hoverEnabled: true
background: Rectangle
background: Rectangle
{
opacity: pauseButton.down || pauseButton.hovered ? 1 : 0
color: UM.Theme.getColor("viewport_background")
}
contentItem: Label
{
text: pauseButton.text
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
}
Controls2.Button
@ -448,6 +502,7 @@ Component
popup.close();
}
width: parent.width
height: 39 * screenScaleFactor
anchors.top: pauseButton.bottom
hoverEnabled: true
enabled: modelData.activePrintJob != null && ["paused", "printing", "pre_print"].indexOf(modelData.activePrintJob.state) >= 0
@ -456,6 +511,12 @@ Component
opacity: abortButton.down || abortButton.hovered ? 1 : 0
color: UM.Theme.getColor("viewport_background")
}
contentItem: Label
{
text: abortButton.text
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
}
MessageDialog
@ -488,19 +549,20 @@ Component
Item
{
id: pointedRectangle
width: parent.width -10
height: parent.height -10
width: parent.width - 10 * screenScaleFactor // Because of the shadow
height: parent.height - 10 * screenScaleFactor // Because of the shadow
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
Rectangle
{
id: point
height: 13
width: 13
height: 14 * screenScaleFactor
width: 14 * screenScaleFactor
color: UM.Theme.getColor("setting_control")
transform: Rotation { angle: 45}
anchors.right: bloop.right
anchors.rightMargin: 24
y: 1
}
@ -510,9 +572,9 @@ Component
color: UM.Theme.getColor("setting_control")
width: parent.width
anchors.top: parent.top
anchors.topMargin: 10
anchors.topMargin: 8 * screenScaleFactor // Because of the shadow + point
anchors.bottom: parent.bottom
anchors.bottomMargin: 5
anchors.bottomMargin: 8 * screenScaleFactor // Because of the shadow
}
}
}
@ -595,30 +657,14 @@ Component
color: "black"
}
Rectangle
CameraButton
{
id: showCameraIcon
width: 35 * screenScaleFactor
height: width
radius: 0.5 * width
anchors.left: parent.left
anchors.bottom: printJobPreview.bottom
color: UM.Theme.getColor("setting_control_border_highlight")
Image
id: showCameraButton
iconSource: "../svg/camera-icon.svg"
anchors
{
width: parent.width
height: width
anchors.right: parent.right
anchors.rightMargin: parent.rightMargin
source: "../svg/camera-icon.svg"
}
MouseArea
{
anchors.fill:parent
onClicked:
{
OutputDevice.setActiveCamera(modelData.camera)
}
left: parent.left
bottom: printJobPreview.bottom
}
}
}
@ -650,13 +696,24 @@ Component
style: ProgressBarStyle
{
property var remainingTime:
{
if(modelData.activePrintJob == null)
{
return 0
}
/* Sometimes total minus elapsed is less than 0. Use Math.max() to prevent remaining
time from ever being less than 0. Negative durations cause strange behavior such
as displaying "-1h -1m". */
var activeJob = modelData.activePrintJob
return Math.max(activeJob.timeTotal - activeJob.timeElapsed, 0);
}
property var progressText:
{
if(modelData.activePrintJob == null)
{
return ""
}
switch(modelData.activePrintJob.state)
{
case "wait_cleanup":
@ -669,18 +726,19 @@ Component
case "sent_to_printer":
return catalog.i18nc("@label:status", "Preparing")
case "aborted":
return catalog.i18nc("@label:status", "Aborted")
case "wait_user_action":
return catalog.i18nc("@label:status", "Aborted")
case "pausing":
return catalog.i18nc("@label:status", "Pausing")
case "paused":
return catalog.i18nc("@label:status", "Paused")
return OutputDevice.formatDuration( remainingTime )
case "resuming":
return catalog.i18nc("@label:status", "Resuming")
case "queued":
return catalog.i18nc("@label:status", "Action required")
default:
OutputDevice.formatDuration(modelData.activePrintJob.timeTotal - modelData.activePrintJob.timeElapsed)
return OutputDevice.formatDuration( remainingTime )
}
}
@ -693,11 +751,28 @@ Component
progress: Rectangle
{
color: UM.Theme.getColor("primary")
color:
{
var state = modelData.activePrintJob.state
var inactiveStates = [
"pausing",
"paused",
"resuming",
"wait_cleanup"
]
if(inactiveStates.indexOf(state) > -1 && remainingTime > 0)
{
return UM.Theme.getColor("monitor_text_inactive")
}
else
{
return UM.Theme.getColor("primary")
}
}
id: progressItem
function getTextOffset()
{
if(progressItem.width + progressLabel.width < control.width)
if(progressItem.width + progressLabel.width + 16 < control.width)
{
return progressItem.width + UM.Theme.getSize("default_margin").width
}

View file

@ -26,7 +26,7 @@ Component
Label
{
id: manageQueueLabel
anchors.rightMargin: 4 * UM.Theme.getSize("default_margin").width
anchors.rightMargin: 3 * UM.Theme.getSize("default_margin").width
anchors.right: queuedPrintJobs.right
anchors.bottom: queuedLabel.bottom
text: catalog.i18nc("@label link to connect manager", "Manage queue")
@ -50,7 +50,7 @@ Component
anchors.left: queuedPrintJobs.left
anchors.top: parent.top
anchors.topMargin: 2 * UM.Theme.getSize("default_margin").height
anchors.leftMargin: 3 * UM.Theme.getSize("default_margin").width
anchors.leftMargin: 3 * UM.Theme.getSize("default_margin").width + 5
text: catalog.i18nc("@label", "Queued")
font: UM.Theme.getFont("large")
color: UM.Theme.getColor("text")

View file

@ -67,7 +67,7 @@ Item
}
return ""
}
font: UM.Theme.getFont("default_bold")
font: UM.Theme.getFont("default")
elide: Text.ElideRight
width: parent.width
}

View file

@ -11,12 +11,14 @@ Item
{
id: base
property var printJob: null
property var shadowRadius: 5
property var shadowRadius: 5 * screenScaleFactor
function getPrettyTime(time)
{
return OutputDevice.formatDuration(time)
}
width: parent.width
UM.I18nCatalog
{
id: catalog
@ -29,7 +31,7 @@ Item
anchors
{
top: parent.top
topMargin: 3
topMargin: 3 * screenScaleFactor
left: parent.left
leftMargin: base.shadowRadius
rightMargin: base.shadowRadius
@ -42,7 +44,7 @@ Item
layer.effect: DropShadow
{
radius: base.shadowRadius
verticalOffset: 2
verticalOffset: 2 * screenScaleFactor
color: "#3F000000" // 25% shadow
}
@ -55,7 +57,7 @@ Item
bottom: parent.bottom
left: parent.left
right: parent.horizontalCenter
margins: 2 * UM.Theme.getSize("default_margin").width
margins: UM.Theme.getSize("wide_margin").width
rightMargin: UM.Theme.getSize("default_margin").width
}
@ -106,7 +108,6 @@ Item
Label
{
id: totalTimeLabel
opacity: 0.6
anchors.bottom: parent.bottom
anchors.right: parent.right
font: UM.Theme.getFont("default")
@ -126,6 +127,7 @@ Item
right: parent.right
margins: 2 * UM.Theme.getSize("default_margin").width
leftMargin: UM.Theme.getSize("default_margin").width
rightMargin: UM.Theme.getSize("default_margin").width / 2
}
Label
@ -168,7 +170,6 @@ Item
{
id: contextButton
text: "\u22EE" //Unicode; Three stacked points.
font.pixelSize: 25
width: 35
height: width
anchors
@ -186,6 +187,14 @@ Item
radius: 0.5 * width
color: UM.Theme.getColor("viewport_background")
}
contentItem: Label
{
text: contextButton.text
color: UM.Theme.getColor("monitor_text_inactive")
font.pixelSize: 25
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
onClicked: parent.switchPopupState()
}
@ -195,18 +204,21 @@ Item
// TODO Change once updating to Qt5.10 - The 'opened' property is in 5.10 but the behavior is now implemented with the visible property
id: popup
clip: true
closePolicy: Popup.CloseOnPressOutsideParent
x: parent.width - width
y: contextButton.height
width: 160
closePolicy: Popup.CloseOnPressOutside
x: (parent.width - width) + 26 * screenScaleFactor
y: contextButton.height - 5 * screenScaleFactor // Because shadow
width: 182 * screenScaleFactor
height: contentItem.height + 2 * padding
visible: false
padding: 5 * screenScaleFactor // Because shadow
transformOrigin: Popup.Top
contentItem: Item
{
width: popup.width - 2 * popup.padding
height: childrenRect.height + 15
width: popup.width
height: childrenRect.height + 36 * screenScaleFactor
anchors.topMargin: 10 * screenScaleFactor
anchors.bottomMargin: 10 * screenScaleFactor
Button
{
id: sendToTopButton
@ -218,14 +230,22 @@ Item
}
width: parent.width
enabled: OutputDevice.queuedPrintJobs[0].key != printJob.key
visible: enabled
anchors.top: parent.top
anchors.topMargin: 10
anchors.topMargin: 18 * screenScaleFactor
height: visible ? 39 * screenScaleFactor : 0 * screenScaleFactor
hoverEnabled: true
background: Rectangle
background: Rectangle
{
opacity: sendToTopButton.down || sendToTopButton.hovered ? 1 : 0
color: UM.Theme.getColor("viewport_background")
}
contentItem: Label
{
text: sendToTopButton.text
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
}
MessageDialog
@ -249,6 +269,7 @@ Item
popup.close();
}
width: parent.width
height: 39 * screenScaleFactor
anchors.top: sendToTopButton.bottom
hoverEnabled: true
background: Rectangle
@ -256,6 +277,12 @@ Item
opacity: deleteButton.down || deleteButton.hovered ? 1 : 0
color: UM.Theme.getColor("viewport_background")
}
contentItem: Label
{
text: deleteButton.text
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
}
MessageDialog
@ -288,19 +315,20 @@ Item
Item
{
id: pointedRectangle
width: parent.width -10
height: parent.height -10
width: parent.width - 10 * screenScaleFactor // Because of the shadow
height: parent.height - 10 * screenScaleFactor // Because of the shadow
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
Rectangle
{
id: point
height: 13
width: 13
height: 14 * screenScaleFactor
width: 14 * screenScaleFactor
color: UM.Theme.getColor("setting_control")
transform: Rotation { angle: 45}
anchors.right: bloop.right
anchors.rightMargin: 24
y: 1
}
@ -310,9 +338,9 @@ Item
color: UM.Theme.getColor("setting_control")
width: parent.width
anchors.top: parent.top
anchors.topMargin: 10
anchors.topMargin: 8 * screenScaleFactor // Because of the shadow + point
anchors.bottom: parent.bottom
anchors.bottomMargin: 5
anchors.bottomMargin: 8 * screenScaleFactor // Because of the shadow
}
}
}
@ -352,7 +380,7 @@ Item
{
text: modelData
color: UM.Theme.getColor("viewport_background")
padding: 3
padding: 3 * screenScaleFactor
}
}
}
@ -374,14 +402,14 @@ Item
PrintCoreConfiguration
{
id: leftExtruderInfo
width: Math.round(parent.width / 2)
width: Math.round(parent.width / 2) * screenScaleFactor
printCoreConfiguration: printJob.configuration.extruderConfigurations[0]
}
PrintCoreConfiguration
{
id: rightExtruderInfo
width: Math.round(parent.width / 2)
width: Math.round(parent.width / 2) * screenScaleFactor
printCoreConfiguration: printJob.configuration.extruderConfigurations[1]
}
}
@ -391,7 +419,7 @@ Item
Rectangle
{
color: UM.Theme.getColor("viewport_background")
width: 2
width: 2 * screenScaleFactor
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.margins: UM.Theme.getSize("default_margin").height

View file

@ -23,36 +23,18 @@ Item
z: 0
}
Button
CameraButton
{
id: backButton
anchors.bottom: cameraImage.top
anchors.bottomMargin: UM.Theme.getSize("default_margin").width
anchors.right: cameraImage.right
// TODO: Hardcoded sizes
width: 20 * screenScaleFactor
height: 20 * screenScaleFactor
onClicked: OutputDevice.setActiveCamera(null)
style: ButtonStyle
id: closeCameraButton
iconSource: UM.Theme.getIcon("cross1")
anchors
{
label: Item
{
UM.RecolorImage
{
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
width: control.width
height: control.height
sourceSize.width: width
sourceSize.height: width
source: UM.Theme.getIcon("cross1")
}
}
background: Item {}
top: cameraImage.top
topMargin: UM.Theme.getSize("default_margin").height
right: cameraImage.right
rightMargin: UM.Theme.getSize("default_margin").width
}
z: 999
}
Image

View file

@ -1,6 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
<g fill="none" fill-rule="evenodd">
<!-- <rect width="48" height="48" fill="#00A6EC" rx="24"/>-->
<path stroke="#FFF" stroke-width="2.5" d="M32.75 16.25h-19.5v15.5h19.5v-4.51l3.501 1.397c.181.072.405.113.638.113.333 0 .627-.081.81-.2.036-.024.048-.028.051-.011V18.487c-.26-.23-.976-.332-1.499-.124L32.75 19.76v-3.51z"/>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M39.0204082,32.810726 L39.0204082,40 L0,40 L0,8 L39.0204082,8 L39.0204082,13.382823 L42.565076,11.9601033 C44.1116852,11.3414006 46.2176038,11.5575311 47.3294911,12.5468926 L48,13.1435139 L48,32.1994839 C48,32.8444894 47.6431099,33.4236728 46.9293296,33.9370341 C45.8586592,34.707076 45.395355,34.5806452 44.4537143,34.5806452 C43.7935857,34.5806452 43.1386795,34.4629571 42.5629467,34.2325919 L39.0204082,32.810726 Z M35.0204082,12 L4,12 L4,36 L35.0204082,36 L35.0204082,26.8950804 L37.7653798,27.9968275 L44,30.4992132 L44,15.6943364 L35.0204082,19.298468 L35.0204082,12 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 438 B

After

Width:  |  Height:  |  Size: 1 KiB

Before After
Before After

View file

@ -321,7 +321,12 @@
"favorites_header_hover": [245, 245, 245, 255],
"favorites_header_text": [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_text_inactive": [154, 154, 154, 255],
"monitor_background_inactive": [240, 240, 240, 255],
"monitor_background_active": [255, 255, 255, 255],
"monitor_lining_inactive": [230, 230, 230, 255]
},
"sizes": {
@ -469,6 +474,8 @@
"toolbox_progress_bar": [8.0, 0.5],
"toolbox_chart_row": [1.0, 2.0],
"toolbox_action_button": [8.0, 2.5],
"toolbox_loader": [2.0, 2.0]
"toolbox_loader": [2.0, 2.0],
"drop_shadow_radius": [1.0, 1.0]
}
}