Implement UX design for maketplace license dialog

cura 8587

plugins/Marketplace/LicenseModel.py

@@ -11,7 +11,6 @@ class LicenseModel(QObject):
     dialogTitleChanged = pyqtSignal()
     packageNameChanged = pyqtSignal()
     licenseTextChanged = pyqtSignal()
-    iconChanged = pyqtSignal()
 
     def __init__(self, decline_button_text: str = DEFAULT_DECLINE_BUTTON_TEXT) -> None:
         super().__init__()
@@ -19,7 +18,6 @@ class LicenseModel(QObject):
         self._dialogTitle = ""
         self._license_text = ""
         self._package_name = ""
-        self._icon_url = ""
         self._decline_button_text = decline_button_text
 
     @pyqtProperty(str, constant = True)
@@ -42,14 +40,6 @@ class LicenseModel(QObject):
         self._package_name = name
         self.packageNameChanged.emit()
 
-    @pyqtProperty(str, notify=iconChanged)
-    def iconUrl(self) -> str:
-        return self._icon_url
-
-    def setIconUrl(self, url: str):
-        self._icon_url = url
-        self.iconChanged.emit()
-
     @pyqtProperty(str, notify=licenseTextChanged)
     def licenseText(self) -> str:
         return self._license_text

plugins/Marketplace/PackageList.py

@@ -136,9 +136,8 @@ class PackageList(ListModel):
 
     canInstallChanged = pyqtSignal(str, bool)
 
-    def _openLicenseDialog(self, plugin_name: str, license_content: str, icon_url: str) -> None:
+    def _openLicenseDialog(self, plugin_name: str, license_content: str) -> None:
         Logger.debug(f"Prompting license for {plugin_name}")
-        self._license_model.setIconUrl(icon_url)
         self._license_model.setPackageName(plugin_name)
         self._license_model.setLicenseText(license_content)
         self._license_dialog.show()
@@ -180,8 +179,7 @@ class PackageList(ListModel):
             # Open actual dialog
             package = self.getPackageModel(package_id)
             plugin_name = package.displayName
-            icon_url = package.iconUrl
+            self._openLicenseDialog(plugin_name, license_content)
-            self._openLicenseDialog(plugin_name, license_content, icon_url)
         else:
             # Otherwise continue the installation
             self._install(package_id, package_path, update)

plugins/Marketplace/resources/qml/LicenseDialog.qml

@@ -20,7 +20,6 @@ UM.Dialog
     width: minimumWidth
     height: minimumHeight
     backgroundColor: UM.Theme.getColor("main_background")
-    margin: screenScaleFactor * 10
 
     ColumnLayout
     {
@@ -29,49 +28,32 @@ UM.Dialog
 
         UM.I18nCatalog{id: catalog; name: "cura"}
 
-        Label
-        {
-            id: licenseHeader
-            Layout.fillWidth: true
-            text: catalog.i18nc("@label", "You need to accept the license to install the package")
-            color: UM.Theme.getColor("text")
-            wrapMode: Text.Wrap
-            renderType: Text.NativeRendering
-        }
-
         Row {
-            id: packageRow
-
             Layout.fillWidth: true
             height: childrenRect.height
             spacing: UM.Theme.getSize("default_margin").width
             leftPadding: UM.Theme.getSize("narrow_margin").width
 
-            Image
+            UM.RecolorImage
             {
-                id: icon
+                width: UM.Theme.getSize("marketplace_large_icon").width
-                width: 30 * screenScaleFactor
+                height: UM.Theme.getSize("marketplace_large_icon").height
-                height: width
+                color: UM.Theme.getColor("text")
-                sourceSize.width: width
+                source: UM.Theme.getIcon("Certificate", "high")
-                sourceSize.height: height
-                fillMode: Image.PreserveAspectFit
-                source: licenseModel.iconUrl || "../../images/placeholder.svg"
-                mipmap: true
             }
 
             Label
             {
-                id: packageName
+                text: catalog.i18nc("@text", "Please read and agree with the plugin licence.")
-                text: licenseModel.packageName
                 color: UM.Theme.getColor("text")
-                font.bold: true
+                font: UM.Theme.getFont("large")
                 anchors.verticalCenter: icon.verticalCenter
-                height: contentHeight
+                height: UM.Theme.getSize("marketplace_large_icon").height
+                verticalAlignment: Qt.AlignVCenter
                 wrapMode: Text.Wrap
                 renderType: Text.NativeRendering
             }
 
-
         }
 
         Cura.ScrollableTextArea
@@ -90,9 +72,6 @@ UM.Dialog
     [
         Cura.PrimaryButton
         {
-            leftPadding: UM.Theme.getSize("dialog_primary_button_padding").width
-            rightPadding: UM.Theme.getSize("dialog_primary_button_padding").width
-
             text: licenseModel.acceptButtonText
             onClicked: { handler.onLicenseAccepted() }
         }
@@ -102,7 +81,6 @@ UM.Dialog
     [
         Cura.SecondaryButton
         {
-            id: declineButton
             text: licenseModel.declineButtonText
             onClicked: { handler.onLicenseDeclined() }
         }

resources/themes/cura-light/icons/high/Certificate.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.0176 13.0001H9.01764V11.0001H39.0176V13.0001ZM24.0176 16.0001H9.01764V18.0001H24.0176V16.0001ZM20.0176 21.0001H9.01764V23.0001H20.0176V21.0001ZM12.0176 26.0001H9.01764V28.0001H12.0176V26.0001ZM43.9576 5.06006V36.9401H35.6976V43.3901L31.6976 42.0501L27.6976 43.3901V36.9401H4.07764V5.06006H43.9576ZM33.6976 33.1401L31.7276 33.6801L29.6976 33.1501V40.6101L31.6976 39.9501L33.6976 40.6101V33.1401ZM36.2876 28.9501L36.9776 26.3001L36.2576 23.6601L34.3176 21.7301L31.6676 21.0401L29.0276 21.7601L27.0976 23.7001L26.4076 26.3501L27.1276 28.9901L29.0676 30.9201L31.7176 31.6101L34.3576 30.8901L36.2876 28.9501ZM42.0776 6.94006H5.95764V35.0601H27.6976V32.3701L25.3376 30.0301L24.3376 26.3601L25.3076 22.6701L27.9876 19.9701L31.6576 18.9601L35.3476 19.9301L38.0476 22.6201L39.0576 26.2901L38.0876 29.9801L35.6976 32.3801V35.0601H42.0776V6.94006Z" fill="#000E1A"/>
+</svg>

resources/themes/cura-light/theme.json

@@ -686,6 +686,8 @@
         "welcome_wizard_content_image_big": [18, 15],
         "welcome_wizard_cloud_content_image": [4, 4],
 
-        "banner_icon_size": [2.0, 2.0]
+        "banner_icon_size": [2.0, 2.0],
+
+        "marketplace_large_icon": [4.0, 4.0]
     }
 }