From 7a47ffb1b7ea4b65d0ff528e4a9c72b155910a50 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 5 Oct 2021 16:34:45 +0200 Subject: [PATCH] Add design for cards with printers I'm adding the theme entry 'card' once and for all to hopefully unify the design we're using for cards in the toolbox, in the digital library, in the LAN connection interface, etc. Contributes to issue CURA-8609. --- .../Materials/MaterialsSyncDialog.qml | 74 +++++++++++++++++-- resources/themes/cura-light/theme.json | 1 + 2 files changed, 69 insertions(+), 6 deletions(-) diff --git a/resources/qml/Preferences/Materials/MaterialsSyncDialog.qml b/resources/qml/Preferences/Materials/MaterialsSyncDialog.qml index caa693c685..e7e8b1f2aa 100644 --- a/resources/qml/Preferences/Materials/MaterialsSyncDialog.qml +++ b/resources/qml/Preferences/Materials/MaterialsSyncDialog.qml @@ -2,7 +2,7 @@ //Cura is released under the terms of the LGPLv3 or higher. import QtQuick 2.1 -import QtQuick.Controls 2.1 +import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import QtQuick.Window 2.1 import Cura 1.1 as Cura @@ -146,8 +146,7 @@ Window source: UM.Theme.getImage("first_run_ultimaker_cloud") width: parent.width / 2 sourceSize.width: width - anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: parent.horizontalCenter + anchors.centerIn: parent } } Item @@ -189,13 +188,76 @@ Window color: UM.Theme.getColor("text") Layout.preferredHeight: height } - Rectangle + ScrollView { - color: "pink" + id: printerListScrollView width: parent.width Layout.preferredWidth: width Layout.fillHeight: true - //TODO: Add printer list. + clip: true + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + + ListView + { + width: parent.width + spacing: UM.Theme.getSize("default_margin").height + + model: Cura.GlobalStacksModel {} + delegate: Rectangle + { + border.color: UM.Theme.getColor("lining") + border.width: UM.Theme.getSize("default_lining").width + width: printerListScrollView.width + height: UM.Theme.getSize("card").height + + Cura.IconWithText + { + anchors + { + verticalCenter: parent.verticalCenter + left: parent.left + leftMargin: Math.round(parent.height - height) / 2 //Equal margin on the left as above and below. + right: parent.right + rightMargin: Math.round(parent.height - height) / 2 + } + + text: model.name + font: UM.Theme.getFont("medium") + + source: UM.Theme.getIcon("Printer", "medium") + iconColor: UM.Theme.getColor("machine_selector_printer_icon") + iconSize: UM.Theme.getSize("machine_selector_icon").width + + //Printer status badge (always cloud, but whether it's online or offline). + UM.RecolorImage + { + width: UM.Theme.getSize("printer_status_icon").width + height: UM.Theme.getSize("printer_status_icon").height + anchors + { + bottom: parent.bottom + bottomMargin: -Math.round(height / 6) + left: parent.left + leftMargin: parent.iconSize - Math.round(width * 5 / 6) + } + + source: UM.Theme.getIcon("CloudBadge", "low") + color: "red" //TODO: connectionStatus == "printer_cloud_not_available" ? UM.Theme.getColor("cloud_unavailable") : UM.Theme.getColor("primary") + + //Make a themeable circle in the background so we can change it in other themes. + Rectangle + { + anchors.centerIn: parent + width: parent.width - 1.5 //1.5 pixels smaller (at least sqrt(2), regardless of pixel scale) so that the circle doesn't show up behind the icon due to anti-aliasing. + height: parent.height - 1.5 + radius: width / 2 + color: UM.Theme.getColor("connection_badge_background") + z: parent.z - 1 + } + } + } + } + } } Cura.TertiaryButton { diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index daa12b3390..148d020f60 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -540,6 +540,7 @@ "section_icon": [2, 2], "section_icon_column": [2.5, 2.5], "rating_star": [1.0, 1.0], + "card": [25.0, 6.0], "setting": [25.0, 1.8], "setting_control": [11.0, 2.0],