From 806b1f707ffa66d4a8dc8dfc72fdc7bee671fe06 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Fri, 11 May 2018 14:03:28 +0200 Subject: [PATCH] Change layout of the installed plugins tab. - There were some alignment problems when there were more than 2 buttons in a column (disable, uninstall and update) - Now the progress bar shows on top of the "Update" button. --- .../resources/qml/ToolboxInstalledTile.qml | 247 +++++------------- .../qml/ToolboxInstalledTileActions.qml | 93 +++++++ resources/themes/cura-light/theme.json | 3 - 3 files changed, 159 insertions(+), 184 deletions(-) create mode 100644 plugins/Toolbox/resources/qml/ToolboxInstalledTileActions.qml diff --git a/plugins/Toolbox/resources/qml/ToolboxInstalledTile.qml b/plugins/Toolbox/resources/qml/ToolboxInstalledTile.qml index dd089debca..6004832a57 100644 --- a/plugins/Toolbox/resources/qml/ToolboxInstalledTile.qml +++ b/plugins/Toolbox/resources/qml/ToolboxInstalledTile.qml @@ -1,21 +1,18 @@ // Copyright (c) 2018 Ultimaker B.V. // Toolbox is released under the terms of the LGPLv3 or higher. -import QtQuick 2.2 +import QtQuick 2.7 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 import UM 1.1 as UM Item { + height: UM.Theme.getSize("toolbox_installed_tile").height + width: parent.width property bool canUpdate: false property bool isEnabled: true - height: UM.Theme.getSize("toolbox_installed_tile").height - anchors - { - left: parent.left - right: parent.right - } + Rectangle { color: UM.Theme.getColor("lining") @@ -23,198 +20,86 @@ Item height: UM.Theme.getSize("default_lining").height anchors.bottom: parent.bottom } - Column + Row { - id: pluginInfo - property var color: model.type === "plugin" && !isEnabled ? UM.Theme.getColor("lining") : UM.Theme.getColor("text") + id: tileRow height: parent.height - anchors - { - left: parent.left - top: parent.top - right: authorInfo.left - topMargin: UM.Theme.getSize("default_margin").height - rightMargin: UM.Theme.getSize("default_margin").width - } - Label - { - text: model.name - width: parent.width - height: UM.Theme.getSize("toolbox_property_label").height - wrapMode: Text.WordWrap - verticalAlignment: Text.AlignVCenter - font: UM.Theme.getFont("default_bold") - color: pluginInfo.color - } - Text - { - text: model.description - maximumLineCount: 3 - elide: Text.ElideRight - width: parent.width - wrapMode: Text.WordWrap - color: pluginInfo.color - } - } - Column - { - id: authorInfo - height: parent.height - width: Math.floor(UM.Theme.getSize("toolbox_action_button").width * 1.25) - anchors - { - top: parent.top - topMargin: UM.Theme.getSize("default_margin").height - right: pluginActions.left - rightMargin: UM.Theme.getSize("default_margin").width - } - Label - { - text: - { - if (model.author_email) - { - return "" + model.author_name + "" - } - else - { - return model.author_name - } - } - width: parent.width - height: UM.Theme.getSize("toolbox_property_label").height - wrapMode: Text.WordWrap - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignLeft - onLinkActivated: Qt.openUrlExternally("mailto:" + model.author_email + "?Subject=Cura: " + model.name + " Plugin") - color: model.enabled ? UM.Theme.getColor("text") : UM.Theme.getColor("lining") - linkColor: UM.Theme.getColor("text_link") - } - } - Column - { - id: pluginActions - width: childrenRect.width - height: childrenRect.height - spacing: UM.Theme.getSize("default_margin").height - anchors - { - top: parent.top - right: parent.right - topMargin: UM.Theme.getSize("default_margin").height - } - Button + width: parent.width + spacing: UM.Theme.getSize("default_margin").width + topPadding: UM.Theme.getSize("default_margin").height + + CheckBox { id: disableButton - text: isEnabled ? catalog.i18nc("@action:button", "Disable") : catalog.i18nc("@action:button", "Enable") + checked: isEnabled visible: model.type == "plugin" + width: visible ? UM.Theme.getSize("checkbox").width : 0 enabled: !toolbox.isDownloading - style: ButtonStyle - { - background: Rectangle - { - implicitWidth: UM.Theme.getSize("toolbox_action_button").width - implicitHeight: UM.Theme.getSize("toolbox_action_button").height - color: "transparent" - border - { - width: UM.Theme.getSize("default_lining").width - color: UM.Theme.getColor("lining") - } - } - label: Label - { - text: control.text - color: UM.Theme.getColor("text") - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - } - } + style: UM.Theme.styles.checkbox onClicked: toolbox.isEnabled(model.id) ? toolbox.disable(model.id) : toolbox.enable(model.id) } - Button + Column { - id: removeButton - text: catalog.i18nc("@action:button", "Uninstall") - visible: !model.is_bundled - enabled: !toolbox.isDownloading - style: ButtonStyle + id: pluginInfo + topPadding: UM.Theme.getSize("default_margin").height / 2 + property var color: model.type === "plugin" && !isEnabled ? UM.Theme.getColor("lining") : UM.Theme.getColor("text") + width: tileRow.width - (authorInfo.width + pluginActions.width + 2 * tileRow.spacing + ((disableButton.visible) ? disableButton.width + tileRow.spacing : 0)) + Label { - background: Rectangle + text: model.name + width: parent.width + height: UM.Theme.getSize("toolbox_property_label").height + wrapMode: Text.WordWrap + font: UM.Theme.getFont("default_bold") + color: pluginInfo.color + } + Label + { + text: model.description + maximumLineCount: 3 + elide: Text.ElideRight + width: parent.width + wrapMode: Text.WordWrap + color: pluginInfo.color + } + } + Column + { + id: authorInfo + width: Math.floor(UM.Theme.getSize("toolbox_action_button").width * 1.25) + + Label + { + text: { - implicitWidth: UM.Theme.getSize("toolbox_action_button").width - implicitHeight: UM.Theme.getSize("toolbox_action_button").height - color: "transparent" - border + if (model.author_email) { - width: UM.Theme.getSize("default_lining").width - color: UM.Theme.getColor("lining") + return "" + model.author_name + "" + } + else + { + return model.author_name } } - label: Label - { - text: control.text - color: UM.Theme.getColor("text") - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - } + width: parent.width + height: UM.Theme.getSize("toolbox_property_label").height + wrapMode: Text.WordWrap + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignLeft + onLinkActivated: Qt.openUrlExternally("mailto:" + model.author_email + "?Subject=Cura: " + model.name + " Plugin") + color: model.enabled ? UM.Theme.getColor("text") : UM.Theme.getColor("lining") + linkColor: UM.Theme.getColor("text_link") } - onClicked: toolbox.uninstall(model.id) } - Button + ToolboxInstalledTileActions { - id: updateButton - text: catalog.i18nc("@action:button", "Update") - visible: canUpdate - style: ButtonStyle - { - background: Rectangle - { - implicitWidth: UM.Theme.getSize("toolbox_action_button").width - implicitHeight: UM.Theme.getSize("toolbox_action_button").height - color: control.hovered ? UM.Theme.getColor("primary_hover") : UM.Theme.getColor("primary") - } - label: Label - { - text: control.text - color: control.hovered ? UM.Theme.getColor("button_text") : UM.Theme.getColor("button_text_hover") - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - font: UM.Theme.getFont("default_bold") - } - } - onClicked: toolbox.update(model.id) + id: pluginActions } - ProgressBar + Connections { - id: progressbar - anchors - { - left: updateButton.left - right: updateButton.right - top: updateButton.bottom - topMargin: Math.floor(UM.Theme.getSize("default_margin") / 4) - } - value: toolbox.isDownloading ? toolbox.downloadProgress : 0 - visible: toolbox.isDownloading - style: ProgressBarStyle - { - background: Rectangle - { - color: UM.Theme.getColor("lining") - implicitHeight: Math.floor(UM.Theme.getSize("toolbox_progress_bar").height) - } - progress: Rectangle - { - color: UM.Theme.getColor("primary") - } - } + target: toolbox + onEnabledChanged: isEnabled = toolbox.isEnabled(model.id) + onMetadataChanged: canUpdate = toolbox.canUpdate(model.id) } } - Connections - { - target: toolbox - onEnabledChanged: isEnabled = toolbox.isEnabled(model.id) - onMetadataChanged: canUpdate = toolbox.canUpdate(model.id) - } -} +} \ No newline at end of file diff --git a/plugins/Toolbox/resources/qml/ToolboxInstalledTileActions.qml b/plugins/Toolbox/resources/qml/ToolboxInstalledTileActions.qml new file mode 100644 index 0000000000..1921bcb58e --- /dev/null +++ b/plugins/Toolbox/resources/qml/ToolboxInstalledTileActions.qml @@ -0,0 +1,93 @@ +// Copyright (c) 2018 Ultimaker B.V. +// Toolbox is released under the terms of the LGPLv3 or higher. + +import QtQuick 2.7 +import QtQuick.Controls 1.4 +import QtQuick.Controls.Styles 1.4 +import UM 1.1 as UM + +Column +{ + width: UM.Theme.getSize("toolbox_action_button").width + spacing: UM.Theme.getSize("narrow_margin").height + + Item + { + width: parent.width + height: childrenRect.height + visible: canUpdate + Button + { + id: updateButton + text: catalog.i18nc("@action:button", "Update") + style: ButtonStyle + { + background: Rectangle + { + implicitWidth: UM.Theme.getSize("toolbox_action_button").width + implicitHeight: UM.Theme.getSize("toolbox_action_button").height + color: control.hovered ? UM.Theme.getColor("primary_hover") : UM.Theme.getColor("primary") + } + label: Label + { + text: control.text + color: control.hovered ? UM.Theme.getColor("button_text") : UM.Theme.getColor("button_text_hover") + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + font: UM.Theme.getFont("default_bold") + } + } + onClicked: toolbox.update(model.id) + } + ProgressBar + { + id: progressbar + width: parent.width + value: toolbox.isDownloading ? toolbox.downloadProgress : 0 + visible: toolbox.isDownloading + style: ProgressBarStyle + { + background: Rectangle + { + color: "transparent" + implicitHeight: UM.Theme.getSize("toolbox_action_button").height + } + progress: Rectangle + { + // TODO Define a good color that fits the purpuse + color: "blue" + opacity: 0.5 + } + } + } + } + Button + { + id: removeButton + text: catalog.i18nc("@action:button", "Uninstall") + visible: !model.is_bundled + enabled: !toolbox.isDownloading + style: ButtonStyle + { + background: Rectangle + { + implicitWidth: UM.Theme.getSize("toolbox_action_button").width + implicitHeight: UM.Theme.getSize("toolbox_action_button").height + color: "transparent" + border + { + width: UM.Theme.getSize("default_lining").width + color: UM.Theme.getColor("lining") + } + } + label: Label + { + text: control.text + color: UM.Theme.getColor("text") + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } + } + onClicked: toolbox.uninstall(model.id) + } +} \ No newline at end of file diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 1be61b523a..f2309fb4a9 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -69,8 +69,6 @@ "colors": { - - "sidebar": [255, 255, 255, 255], "lining": [192, 193, 194, 255], "viewport_overlay": [0, 0, 0, 192], @@ -458,7 +456,6 @@ "toolbox_property_label": [1.0, 2.0], "toolbox_heading_label": [1.0, 4.0], "toolbox_header": [1.0, 4.0], - "toolbox_action_button": [8.0, 2.5], "toolbox_progress_bar": [8.0, 0.5], "toolbox_chart_row": [1.0, 2.0], "toolbox_action_button": [8.0, 2.5]