QmlDesigner: Update design viewer UX and UI

* Add new icons
* Add new popup window in toolbar to show design viewer related content
* Fix MenuItemDelegate
* Add ShareNotification to show upload progress and failure

Task-number: QDS-12257
Change-Id: I921944732937758b97e511c8a243e211d379d8fc
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/InternalConstants.qml

@@ -165,223 +165,231 @@ QtObject {
     readonly property string fitSelected_small: "\u00B8"
     readonly property string fitSelection_medium: "\u00B9"
     readonly property string fitToView_medium: "\u00BA"
-    readonly property string flowAction: "\u00BB"
+    readonly property string flag_medium: "\u00BB"
-    readonly property string flowTransition: "\u00BC"
+    readonly property string flowAction: "\u00BC"
-    readonly property string fontStyleBold: "\u00BD"
+    readonly property string flowTransition: "\u00BD"
-    readonly property string fontStyleItalic: "\u00BE"
+    readonly property string fontStyleBold: "\u00BE"
-    readonly property string fontStyleStrikethrough: "\u00BF"
+    readonly property string fontStyleItalic: "\u00BF"
-    readonly property string fontStyleUnderline: "\u00C0"
+    readonly property string fontStyleStrikethrough: "\u00C0"
-    readonly property string forward_medium: "\u00C1"
+    readonly property string fontStyleUnderline: "\u00C1"
-    readonly property string globalOrient_medium: "\u00C2"
+    readonly property string forward_medium: "\u00C2"
-    readonly property string gradient: "\u00C3"
+    readonly property string globalOrient_medium: "\u00C3"
-    readonly property string gridView: "\u00C4"
+    readonly property string gradient: "\u00C4"
-    readonly property string grid_medium: "\u00C5"
+    readonly property string gridView: "\u00C5"
-    readonly property string group_small: "\u00C6"
+    readonly property string grid_medium: "\u00C6"
-    readonly property string help: "\u00C7"
+    readonly property string group_small: "\u00C7"
-    readonly property string home_large: "\u00C8"
+    readonly property string help: "\u00C8"
-    readonly property string idAliasOff: "\u00C9"
+    readonly property string home_large: "\u00C9"
-    readonly property string idAliasOn: "\u00CA"
+    readonly property string idAliasOff: "\u00CA"
-    readonly property string import_medium: "\u00CB"
+    readonly property string idAliasOn: "\u00CB"
-    readonly property string imported: "\u00CC"
+    readonly property string import_medium: "\u00CC"
-    readonly property string importedModels_small: "\u00CD"
+    readonly property string imported: "\u00CD"
-    readonly property string infinity: "\u00CE"
+    readonly property string importedModels_small: "\u00CE"
-    readonly property string invisible_medium: "\u00CF"
+    readonly property string infinity: "\u00CF"
-    readonly property string invisible_small: "\u00D0"
+    readonly property string invisible_medium: "\u00D0"
-    readonly property string jumpToCode_medium: "\u00D1"
+    readonly property string invisible_small: "\u00D1"
-    readonly property string jumpToCode_small: "\u00D2"
+    readonly property string jumpToCode_medium: "\u00D2"
-    readonly property string keyframe: "\u00D3"
+    readonly property string jumpToCode_small: "\u00D3"
-    readonly property string languageList_medium: "\u00D4"
+    readonly property string keyframe: "\u00D4"
-    readonly property string layouts_small: "\u00D5"
+    readonly property string languageList_medium: "\u00D5"
-    readonly property string lights_small: "\u00D6"
+    readonly property string layouts_small: "\u00D6"
-    readonly property string linear_medium: "\u00D7"
+    readonly property string lights_small: "\u00D7"
-    readonly property string linkTriangle: "\u00D8"
+    readonly property string linear_medium: "\u00D8"
-    readonly property string linked: "\u00D9"
+    readonly property string linkTriangle: "\u00D9"
-    readonly property string listView: "\u00DA"
+    readonly property string linked: "\u00DA"
-    readonly property string listView_medium: "\u00DB"
+    readonly property string listView: "\u00DB"
-    readonly property string list_medium: "\u00DC"
+    readonly property string listView_medium: "\u00DC"
-    readonly property string localOrient_medium: "\u00DD"
+    readonly property string list_medium: "\u00DD"
-    readonly property string lockOff: "\u00DE"
+    readonly property string localOrient_medium: "\u00DE"
-    readonly property string lockOn: "\u00DF"
+    readonly property string lockOff: "\u00DF"
-    readonly property string loopPlayback_medium: "\u00E0"
+    readonly property string lockOn: "\u00E0"
-    readonly property string materialBrowser_medium: "\u00E1"
+    readonly property string loopPlayback_medium: "\u00E1"
-    readonly property string materialPreviewEnvironment: "\u00E2"
+    readonly property string materialBrowser_medium: "\u00E2"
-    readonly property string materialPreviewModel: "\u00E3"
+    readonly property string materialPreviewEnvironment: "\u00E3"
-    readonly property string material_medium: "\u00E4"
+    readonly property string materialPreviewModel: "\u00E4"
-    readonly property string maxBar_small: "\u00E5"
+    readonly property string material_medium: "\u00E5"
-    readonly property string mergeCells: "\u00E6"
+    readonly property string maxBar_small: "\u00E6"
-    readonly property string merge_small: "\u00E7"
+    readonly property string mergeCells: "\u00E7"
-    readonly property string minus: "\u00E8"
+    readonly property string merge_small: "\u00E8"
-    readonly property string mirror: "\u00E9"
+    readonly property string minus: "\u00E9"
-    readonly property string more_medium: "\u00EA"
+    readonly property string mirror: "\u00EA"
-    readonly property string mouseArea_small: "\u00EB"
+    readonly property string more_medium: "\u00EB"
-    readonly property string moveDown_medium: "\u00EC"
+    readonly property string mouseArea_small: "\u00EC"
-    readonly property string moveInwards_medium: "\u00ED"
+    readonly property string moveDown_medium: "\u00ED"
-    readonly property string moveUp_medium: "\u00EE"
+    readonly property string moveInwards_medium: "\u00EE"
-    readonly property string moveUpwards_medium: "\u00EF"
+    readonly property string moveUp_medium: "\u00EF"
-    readonly property string move_medium: "\u00F0"
+    readonly property string moveUpwards_medium: "\u00F0"
-    readonly property string newMaterial: "\u00F1"
+    readonly property string move_medium: "\u00F1"
-    readonly property string nextFile_large: "\u00F2"
+    readonly property string newMaterial: "\u00F2"
-    readonly property string normalBar_small: "\u00F3"
+    readonly property string nextFile_large: "\u00F3"
-    readonly property string openLink: "\u00F4"
+    readonly property string normalBar_small: "\u00F4"
-    readonly property string openMaterialBrowser: "\u00F5"
+    readonly property string number_medium: "\u00F5"
-    readonly property string orientation: "\u00F6"
+    readonly property string openLink: "\u00F6"
-    readonly property string orthCam_medium: "\u00F7"
+    readonly property string openMaterialBrowser: "\u00F7"
-    readonly property string orthCam_small: "\u00F8"
+    readonly property string orientation: "\u00F8"
-    readonly property string paddingEdge: "\u00F9"
+    readonly property string orthCam_medium: "\u00F9"
-    readonly property string paddingFrame: "\u00FA"
+    readonly property string orthCam_small: "\u00FA"
-    readonly property string particleAnimation_medium: "\u00FB"
+    readonly property string paddingEdge: "\u00FB"
-    readonly property string pasteStyle: "\u00FC"
+    readonly property string paddingFrame: "\u00FC"
-    readonly property string paste_small: "\u00FD"
+    readonly property string particleAnimation_medium: "\u00FD"
-    readonly property string pause: "\u00FE"
+    readonly property string pasteStyle: "\u00FE"
-    readonly property string pause_medium: "\u00FF"
+    readonly property string paste_small: "\u00FF"
-    readonly property string perspectiveCam_medium: "\u0100"
+    readonly property string pause: "\u0100"
-    readonly property string perspectiveCam_small: "\u0101"
+    readonly property string pause_medium: "\u0101"
-    readonly property string pin: "\u0102"
+    readonly property string perspectiveCam_medium: "\u0102"
-    readonly property string plane_medium: "\u0103"
+    readonly property string perspectiveCam_small: "\u0103"
-    readonly property string plane_small: "\u0104"
+    readonly property string pin: "\u0104"
-    readonly property string play: "\u0105"
+    readonly property string plane_medium: "\u0105"
-    readonly property string playFill_medium: "\u0106"
+    readonly property string plane_small: "\u0106"
-    readonly property string playOutline_medium: "\u0107"
+    readonly property string play: "\u0107"
-    readonly property string plus: "\u0108"
+    readonly property string playFill_medium: "\u0108"
-    readonly property string pointLight_small: "\u0109"
+    readonly property string playOutline_medium: "\u0109"
-    readonly property string positioners_small: "\u010A"
+    readonly property string plus: "\u010A"
-    readonly property string previewEnv_medium: "\u010B"
+    readonly property string pointLight_small: "\u010B"
-    readonly property string previousFile_large: "\u010C"
+    readonly property string positioners_small: "\u010C"
-    readonly property string promote: "\u010D"
+    readonly property string previewEnv_medium: "\u010D"
-    readonly property string properties_medium: "\u010E"
+    readonly property string previousFile_large: "\u010E"
-    readonly property string readOnly: "\u010F"
+    readonly property string promote: "\u010F"
-    readonly property string recent_medium: "\u0110"
+    readonly property string properties_medium: "\u0110"
-    readonly property string recordFill_medium: "\u0111"
+    readonly property string readOnly: "\u0111"
-    readonly property string recordOutline_medium: "\u0112"
+    readonly property string recent_medium: "\u0112"
-    readonly property string redo: "\u0113"
+    readonly property string recordFill_medium: "\u0113"
-    readonly property string reload_medium: "\u0114"
+    readonly property string recordOutline_medium: "\u0114"
-    readonly property string remove_medium: "\u0115"
+    readonly property string redo: "\u0115"
-    readonly property string remove_small: "\u0116"
+    readonly property string reload_medium: "\u0116"
-    readonly property string rename_small: "\u0117"
+    readonly property string remove_medium: "\u0117"
-    readonly property string replace_small: "\u0118"
+    readonly property string remove_small: "\u0118"
-    readonly property string resetView_small: "\u0119"
+    readonly property string rename_small: "\u0119"
-    readonly property string restartParticles_medium: "\u011A"
+    readonly property string replace_small: "\u011A"
-    readonly property string reverseOrder_medium: "\u011B"
+    readonly property string resetView_small: "\u011B"
-    readonly property string roatate_medium: "\u011C"
+    readonly property string restartParticles_medium: "\u011C"
-    readonly property string rotationFill: "\u011D"
+    readonly property string reverseOrder_medium: "\u011D"
-    readonly property string rotationOutline: "\u011E"
+    readonly property string roatate_medium: "\u011E"
-    readonly property string runProjFill_large: "\u011F"
+    readonly property string rotationFill: "\u011F"
-    readonly property string runProjOutline_large: "\u0120"
+    readonly property string rotationOutline: "\u0120"
-    readonly property string s_anchors: "\u0121"
+    readonly property string runProjFill_large: "\u0121"
-    readonly property string s_annotations: "\u0122"
+    readonly property string runProjOutline_large: "\u0122"
-    readonly property string s_arrange: "\u0123"
+    readonly property string s_anchors: "\u0123"
-    readonly property string s_boundingBox: "\u0124"
+    readonly property string s_annotations: "\u0124"
-    readonly property string s_component: "\u0125"
+    readonly property string s_arrange: "\u0125"
-    readonly property string s_connections: "\u0126"
+    readonly property string s_boundingBox: "\u0126"
-    readonly property string s_edit: "\u0127"
+    readonly property string s_component: "\u0127"
-    readonly property string s_enterComponent: "\u0128"
+    readonly property string s_connections: "\u0128"
-    readonly property string s_eventList: "\u0129"
+    readonly property string s_edit: "\u0129"
-    readonly property string s_group: "\u012A"
+    readonly property string s_enterComponent: "\u012A"
-    readonly property string s_layouts: "\u012B"
+    readonly property string s_eventList: "\u012B"
-    readonly property string s_merging: "\u012C"
+    readonly property string s_group: "\u012C"
-    readonly property string s_mouseArea: "\u012D"
+    readonly property string s_layouts: "\u012D"
-    readonly property string s_positioners: "\u012E"
+    readonly property string s_merging: "\u012E"
-    readonly property string s_selection: "\u012F"
+    readonly property string s_mouseArea: "\u012F"
-    readonly property string s_snapping: "\u0130"
+    readonly property string s_positioners: "\u0130"
-    readonly property string s_timeline: "\u0131"
+    readonly property string s_selection: "\u0131"
-    readonly property string s_visibility: "\u0132"
+    readonly property string s_snapping: "\u0132"
-    readonly property string saveAs_medium: "\u0133"
+    readonly property string s_timeline: "\u0133"
-    readonly property string saveLogs_medium: "\u0134"
+    readonly property string s_visibility: "\u0134"
-    readonly property string save_medium: "\u0135"
+    readonly property string saveAs_medium: "\u0135"
-    readonly property string scale_medium: "\u0136"
+    readonly property string saveLogs_medium: "\u0136"
-    readonly property string search: "\u0137"
+    readonly property string save_medium: "\u0137"
-    readonly property string search_small: "\u0138"
+    readonly property string scale_medium: "\u0138"
-    readonly property string sectionToggle: "\u0139"
+    readonly property string search: "\u0139"
-    readonly property string selectFill_medium: "\u013A"
+    readonly property string search_small: "\u013A"
-    readonly property string selectOutline_medium: "\u013B"
+    readonly property string sectionToggle: "\u013B"
-    readonly property string selectParent_small: "\u013C"
+    readonly property string selectFill_medium: "\u013C"
-    readonly property string selection_small: "\u013D"
+    readonly property string selectOutline_medium: "\u013D"
-    readonly property string settings_medium: "\u013E"
+    readonly property string selectParent_small: "\u013E"
-    readonly property string signal_small: "\u013F"
+    readonly property string selection_small: "\u013F"
-    readonly property string snapping_conf_medium: "\u0140"
+    readonly property string settings_medium: "\u0140"
-    readonly property string snapping_medium: "\u0141"
+    readonly property string share_large: "\u0141"
-    readonly property string snapping_small: "\u0142"
+    readonly property string signal_small: "\u0142"
-    readonly property string sortascending_medium: "\u0143"
+    readonly property string signin_medium: "\u0143"
-    readonly property string sortdescending_medium: "\u0144"
+    readonly property string signout_medium: "\u0144"
-    readonly property string sphere_medium: "\u0145"
+    readonly property string snapping_conf_medium: "\u0145"
-    readonly property string sphere_small: "\u0146"
+    readonly property string snapping_medium: "\u0146"
-    readonly property string splitColumns: "\u0147"
+    readonly property string snapping_small: "\u0147"
-    readonly property string splitRows: "\u0148"
+    readonly property string sortascending_medium: "\u0148"
-    readonly property string splitScreen_medium: "\u0149"
+    readonly property string sortdescending_medium: "\u0149"
-    readonly property string spotLight_small: "\u014A"
+    readonly property string sphere_medium: "\u014A"
-    readonly property string stackedContainer_small: "\u014B"
+    readonly property string sphere_small: "\u014B"
-    readonly property string startNode: "\u014C"
+    readonly property string splitColumns: "\u014C"
-    readonly property string step_medium: "\u014D"
+    readonly property string splitRows: "\u014D"
-    readonly property string stop_medium: "\u014E"
+    readonly property string splitScreen_medium: "\u014E"
-    readonly property string tableView_medium: "\u014F"
+    readonly property string spotLight_small: "\u014F"
-    readonly property string testIcon: "\u0150"
+    readonly property string stackedContainer_small: "\u0150"
-    readonly property string textAlignBottom: "\u0151"
+    readonly property string startNode: "\u0151"
-    readonly property string textAlignCenter: "\u0152"
+    readonly property string step_medium: "\u0152"
-    readonly property string textAlignJustified: "\u0153"
+    readonly property string stop_medium: "\u0153"
-    readonly property string textAlignLeft: "\u0154"
+    readonly property string string_medium: "\u0154"
-    readonly property string textAlignMiddle: "\u0155"
+    readonly property string tableView_medium: "\u0155"
-    readonly property string textAlignRight: "\u0156"
+    readonly property string testIcon: "\u0156"
-    readonly property string textAlignTop: "\u0157"
+    readonly property string textAlignBottom: "\u0157"
-    readonly property string textBulletList: "\u0158"
+    readonly property string textAlignCenter: "\u0158"
-    readonly property string textFullJustification: "\u0159"
+    readonly property string textAlignJustified: "\u0159"
-    readonly property string textNumberedList: "\u015A"
+    readonly property string textAlignLeft: "\u015A"
-    readonly property string textures_medium: "\u015B"
+    readonly property string textAlignMiddle: "\u015B"
-    readonly property string tickIcon: "\u015C"
+    readonly property string textAlignRight: "\u015C"
-    readonly property string tickMark_small: "\u015D"
+    readonly property string textAlignTop: "\u015D"
-    readonly property string timeline_small: "\u015E"
+    readonly property string textBulletList: "\u015E"
-    readonly property string toEndFrame_medium: "\u015F"
+    readonly property string textFullJustification: "\u015F"
-    readonly property string toNextFrame_medium: "\u0160"
+    readonly property string textNumberedList: "\u0160"
-    readonly property string toPrevFrame_medium: "\u0161"
+    readonly property string textures_medium: "\u0161"
-    readonly property string toStartFrame_medium: "\u0162"
+    readonly property string tickIcon: "\u0162"
-    readonly property string topToolbar_annotations: "\u0163"
+    readonly property string tickMark_small: "\u0163"
-    readonly property string topToolbar_closeFile: "\u0164"
+    readonly property string timeline_small: "\u0164"
-    readonly property string topToolbar_designMode: "\u0165"
+    readonly property string toEndFrame_medium: "\u0165"
-    readonly property string topToolbar_enterComponent: "\u0166"
+    readonly property string toNextFrame_medium: "\u0166"
-    readonly property string topToolbar_home: "\u0167"
+    readonly property string toPrevFrame_medium: "\u0167"
-    readonly property string topToolbar_makeComponent: "\u0168"
+    readonly property string toStartFrame_medium: "\u0168"
-    readonly property string topToolbar_navFile: "\u0169"
+    readonly property string topToolbar_annotations: "\u0169"
-    readonly property string topToolbar_runProject: "\u016A"
+    readonly property string topToolbar_closeFile: "\u016A"
-    readonly property string translationCreateFiles: "\u016B"
+    readonly property string topToolbar_designMode: "\u016B"
-    readonly property string translationCreateReport: "\u016C"
+    readonly property string topToolbar_enterComponent: "\u016C"
-    readonly property string translationExport: "\u016D"
+    readonly property string topToolbar_home: "\u016D"
-    readonly property string translationImport: "\u016E"
+    readonly property string topToolbar_makeComponent: "\u016E"
-    readonly property string translationSelectLanguages: "\u016F"
+    readonly property string topToolbar_navFile: "\u016F"
-    readonly property string translationTest: "\u0170"
+    readonly property string topToolbar_runProject: "\u0170"
-    readonly property string transparent: "\u0171"
+    readonly property string translationCreateFiles: "\u0171"
-    readonly property string trash_medium: "\u0172"
+    readonly property string translationCreateReport: "\u0172"
-    readonly property string triState: "\u0173"
+    readonly property string translationExport: "\u0173"
-    readonly property string triangleArcA: "\u0174"
+    readonly property string translationImport: "\u0174"
-    readonly property string triangleArcB: "\u0175"
+    readonly property string translationSelectLanguages: "\u0175"
-    readonly property string triangleCornerA: "\u0176"
+    readonly property string translationTest: "\u0176"
-    readonly property string triangleCornerB: "\u0177"
+    readonly property string transparent: "\u0177"
-    readonly property string unLinked: "\u0178"
+    readonly property string trash_medium: "\u0178"
-    readonly property string undo: "\u0179"
+    readonly property string triState: "\u0179"
-    readonly property string unify_medium: "\u017A"
+    readonly property string triangleArcA: "\u017A"
-    readonly property string unpin: "\u017B"
+    readonly property string triangleArcB: "\u017B"
-    readonly property string upDownIcon: "\u017C"
+    readonly property string triangleCornerA: "\u017C"
-    readonly property string upDownSquare2: "\u017D"
+    readonly property string triangleCornerB: "\u017D"
-    readonly property string updateAvailable_medium: "\u017E"
+    readonly property string unLinked: "\u017E"
-    readonly property string updateContent_medium: "\u017F"
+    readonly property string undo: "\u017F"
-    readonly property string visibilityOff: "\u0180"
+    readonly property string unify_medium: "\u0180"
-    readonly property string visibilityOn: "\u0181"
+    readonly property string unpin: "\u0181"
-    readonly property string visible_medium: "\u0182"
+    readonly property string upDownIcon: "\u0182"
-    readonly property string visible_small: "\u0183"
+    readonly property string upDownSquare2: "\u0183"
-    readonly property string warning2_medium: "\u0184"
+    readonly property string updateAvailable_medium: "\u0184"
-    readonly property string warning_medium: "\u0185"
+    readonly property string updateContent_medium: "\u0185"
-    readonly property string wildcard: "\u0186"
+    readonly property string upload_medium: "\u0186"
-    readonly property string wizardsAutomotive: "\u0187"
+    readonly property string user_medium: "\u0187"
-    readonly property string wizardsDesktop: "\u0188"
+    readonly property string visibilityOff: "\u0188"
-    readonly property string wizardsGeneric: "\u0189"
+    readonly property string visibilityOn: "\u0189"
-    readonly property string wizardsMcuEmpty: "\u018A"
+    readonly property string visible_medium: "\u018A"
-    readonly property string wizardsMcuGraph: "\u018B"
+    readonly property string visible_small: "\u018B"
-    readonly property string wizardsMobile: "\u018C"
+    readonly property string warning2_medium: "\u018C"
-    readonly property string wizardsUnknown: "\u018D"
+    readonly property string warning_medium: "\u018D"
-    readonly property string zoomAll: "\u018E"
+    readonly property string wildcard: "\u018E"
-    readonly property string zoomIn: "\u018F"
+    readonly property string wizardsAutomotive: "\u018F"
-    readonly property string zoomIn_medium: "\u0190"
+    readonly property string wizardsDesktop: "\u0190"
-    readonly property string zoomOut: "\u0191"
+    readonly property string wizardsGeneric: "\u0191"
-    readonly property string zoomOut_medium: "\u0192"
+    readonly property string wizardsMcuEmpty: "\u0192"
-    readonly property string zoomSelection: "\u0193"
+    readonly property string wizardsMcuGraph: "\u0193"
+    readonly property string wizardsMobile: "\u0194"
+    readonly property string wizardsUnknown: "\u0195"
+    readonly property string zoomAll: "\u0196"
+    readonly property string zoomIn: "\u0197"
+    readonly property string zoomIn_medium: "\u0198"
+    readonly property string zoomOut: "\u0199"
+    readonly property string zoomOut_medium: "\u019A"
+    readonly property string zoomSelection: "\u019B"
 
     readonly property font iconFont: Qt.font({
         family: controlIcons.name,

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/TopToolbarButtonStyle.qml

@@ -4,7 +4,6 @@
 import QtQuick
 
 ControlStyle {
-
     controlSize: Qt.size(Values.topLevelComboWidth, Values.topLevelComboHeight)
     borderWidth: Values.border
     baseIconFontSize: Values.topLevelComboIcon

share/qtcreator/qmldesigner/toolbar/Main.qml

@@ -3,9 +3,11 @@
 
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 
 import StudioControls as StudioControls
 import StudioTheme as StudioTheme
+import StudioWindowManager
 import ToolBar
 
 Rectangle {
@@ -283,20 +285,293 @@ Rectangle {
             onCountChanged: workspaces.currentIndex = workspaces.indexOfValue(backend.currentWorkspace)
         }
 
+        Connections {
+            target: WindowManager
+            enabled: dvWindow.visible
+
+            function onAboutToQuit() {
+                dvWindow.close()
+            }
+
+            function onMainWindowVisibleChanged(value) {
+                if (!value)
+                    dvWindow.close()
+            }
+        }
+
         ToolbarButton {
             id: shareButton
-            style: StudioTheme.Values.primaryToolbarStyle
-            width: 96
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: moreItems.left
             anchors.rightMargin: 8
-            iconFontFamily: StudioTheme.Constants.font.family
+            buttonIcon: StudioTheme.Constants.share_large
-            buttonIcon: qsTr("Share")
-            visible: !root.flyoutEnabled && backend.isSharingEnabled
             enabled: backend.isSharingEnabled
-            tooltip: shareButton.enabled ? qsTr("Share your project online.") : qsTr("Sharing your project online is disabled in the Community Version.")
+            tooltip: qsTr("You can share your project to Qt Design Viewer web service.<br><br>To be able to use the sharing service, you need to sign in with your Qt Account details.")
 
-            onClicked: backend.shareApplicationOnline()
+            checkable: true
+            checked: dvWindow.visible
+            checkedInverted: true
+
+            onClicked: {
+                if (dvWindow.visible) {
+                    dvWindow.close()
+                } else {
+                    var originMapped = shareButton.mapToGlobal(0,0)
+                    dvWindow.x = originMapped.x + shareButton.width - dvWindow.width
+                    dvWindow.y = originMapped.y + shareButton.height
+                    dvWindow.show()
+                    dvWindow.requestActivate()
+                }
+            }
+
+            Window {
+                id: dvWindow
+
+                width: 300
+                height: stackLayout.children[stackLayout.currentIndex].implicitHeight
+
+                visible: false
+                flags: Qt.FramelessWindowHint | Qt.Tool | Qt.NoDropShadowWindowHint
+                modality: Qt.NonModal
+                transientParent: null
+                color: "transparent"
+
+                onActiveFocusItemChanged: {
+                    if (dvWindow.activeFocusItem === null && !dvWindow.active
+                        && !shareButton.hover
+                        && !backend.designViewerConnector.isWebViewerVisible)
+                        dvWindow.close()
+                }
+
+                onVisibleChanged: {
+                    // if visible and logged in
+                    // fetch user info
+                }
+
+                onClosing: {
+                    if (shareNotification.hasFinished())
+                        shareNotification.visible = false
+                }
+
+                function formatBytes(bytes, decimals = 2) {
+                    if (!+bytes)
+                        return '0 Bytes'
+
+                    const k = 1024
+                    const dm = decimals < 0 ? 0 : decimals
+                    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+                    const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+                    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
+                }
+
+                Connections {
+                    target: backend.designViewerConnector
+
+                    function onUserInfoReceived(reply: var) {
+                        let jsonReply = JSON.parse(reply)
+
+                        loggedInPage.email = jsonReply.email
+                        loggedInPage.license = jsonReply.license
+                        loggedInPage.storageUsed = jsonReply.storageUsed
+                        loggedInPage.storageLimit = jsonReply.storageLimit
+                    }
+                }
+
+                StackLayout {
+                    id: stackLayout
+
+                    property int internalMargin: 8
+
+                    anchors.fill: parent
+                    currentIndex: backend.designViewerConnector.connectorStatus
+
+                    // Fetching
+                    Rectangle {
+                        id: fetchingPage
+                        color: StudioTheme.Values.themePopupBackground
+                        Layout.fillWidth: true
+                        implicitHeight: 200
+
+                        BusyIndicator {
+                            anchors.centerIn: parent
+                            running: StackView.status === StackView.Active // TODO test
+                        }
+                    }
+
+                    // NotLoggedIn
+                    Rectangle {
+                        id: notLoggedInPage
+                        color: StudioTheme.Values.themePopupBackground
+                        Layout.fillWidth: true
+                        implicitHeight: menuColumn.implicitHeight
+
+                        Column {
+                            id: menuColumn
+                            anchors.fill: parent
+                            padding: StudioTheme.Values.border
+
+                            MenuItemDelegate {
+                                width: parent.width
+
+                                myText: qsTr("Sign in")
+                                myIcon: StudioTheme.Constants.signin_medium
+
+                                onClicked: backend.designViewerConnector.login()
+                            }
+                        }
+                    }
+
+                    // LoggedIn
+                    Rectangle {
+                        id: loggedInPage
+
+                        property string email
+                        property string license
+                        property var storageUsed
+                        property var storageLimit
+
+                        color: StudioTheme.Values.themePopupBackground
+
+                        Layout.fillWidth: true
+                        implicitHeight: loggedInPageColumn.implicitHeight
+
+                        Column {
+                            id: loggedInPageColumn
+                            anchors.fill: parent
+                            padding: StudioTheme.Values.border
+                            spacing: 0
+
+                            MenuItemDelegate {
+                                id: shareMenuItem
+                                width: parent.width
+
+                                myText: qsTr("Share")
+                                myIcon: StudioTheme.Constants.upload_medium
+
+                                onClicked: backend.designViewerConnector.uploadCurrentProject()
+                            }
+
+                            ShareNotification {
+                                id: shareNotification
+
+                                Connections {
+                                    target: backend.designViewerConnector
+
+                                    function onProjectUploadProgress(progress: var) {
+                                        shareNotification.setProgress(progress)
+                                    }
+
+                                    function onProjectUploaded() {
+                                        shareNotification.type = ShareNotification.NotificationType.Success
+                                        shareNotification.setHelperText(qsTr("Upload succeeded."))
+
+                                        shareMenuItem.enabled = true
+                                    }
+
+                                    function onProjectUploadError(errorCode: int, message: string) {
+                                        shareNotification.type = ShareNotification.NotificationType.Error
+                                        shareNotification.setHelperText(qsTr("Upload failed (" + errorCode + ")."))
+
+                                        shareMenuItem.enabled = true
+                                    }
+
+                                    function onProjectIsPacking() {
+                                        shareNotification.type = ShareNotification.NotificationType.Indeterminate
+                                        shareNotification.setText(qsTr("Packing"))
+                                        shareNotification.visible = true
+
+                                        shareMenuItem.enabled = true
+                                    }
+
+                                    function onProjectPackingFailed(errorString: string) {
+                                        shareNotification.type = ShareNotification.NotificationType.Error
+                                        shareNotification.setHelperText(qsTr("Packing failed."))
+                                    }
+
+                                    function onProjectIsUploading() {
+                                        shareNotification.type = ShareNotification.NotificationType.Normal
+                                        shareNotification.setText(qsTr("Uploading"))
+                                        shareNotification.visible = true
+
+                                        shareMenuItem.enabled = false
+                                    }
+                                }
+                            }
+
+                            MenuItemDelegate {
+                                width: parent.width
+
+                                myText: qsTr("Manage shared projects")
+                                myIcon: StudioTheme.Constants.openLink
+
+                                onClicked: Qt.openUrlExternally("https://designviewer-staging.qt.io/")
+                            }
+
+                            Rectangle {
+                                width: parent.width
+                                height: StudioTheme.Values.height * 2
+                                color: StudioTheme.Values.themePanelBackground
+
+                                Row {
+                                    anchors.fill: parent
+                                    spacing: 0
+
+                                    Label {
+                                        id: iconLabel
+                                        width: StudioTheme.Values.topLevelComboHeight
+                                        height: StudioTheme.Values.topLevelComboHeight
+
+                                        anchors.verticalCenter: parent.verticalCenter
+
+                                        color: StudioTheme.Values.themeTextColor
+                                        font.family: StudioTheme.Constants.iconFont.family
+                                        font.pixelSize: StudioTheme.Values.topLevelComboIcon
+                                        text: StudioTheme.Constants.user_medium
+                                        verticalAlignment: Text.AlignVCenter
+                                        horizontalAlignment: Text.AlignHCenter
+                                    }
+
+                                    Column {
+                                        width: parent.width - parent.spacing - iconLabel.width - 8 // TODO 8 is the margin
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        spacing: 4
+
+                                        Text {
+                                            color: StudioTheme.Values.themeTextColor
+                                            text: loggedInPage.email ?? ""
+                                        }
+
+                                        RowLayout {
+                                            width: parent.width
+
+                                            Text {
+                                                Layout.fillWidth: true
+                                                color: StudioTheme.Values.themeTextColor
+                                                text: loggedInPage.license ?? ""
+                                            }
+
+                                            Text {
+                                                color: StudioTheme.Values.themeTextColor
+                                                text: `${dvWindow.formatBytes(loggedInPage.storageUsed)} / ${dvWindow.formatBytes(loggedInPage.storageLimit)}`
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+
+                            MenuItemDelegate {
+                                width: parent.width
+
+                                myText: qsTr("Sign out")
+                                myIcon: StudioTheme.Constants.signout_medium
+
+                                onClicked: backend.designViewerConnector.logout()
+                            }
+                        }
+                    }
+                }
+            }
         }
 
         ToolbarButton {
@@ -328,8 +603,9 @@ Rectangle {
             id: window
 
             readonly property int padding: 6
+            readonly property int morePopupWidth: Math.max(180, row.width)
 
-            width: row.width + window.padding * 2
+            width: window.morePopupWidth + window.padding * 2
             height: row.height + (backend.isLiteModeEnabled ? 0 : workspacesFlyout.height)
                     + (backend.isLiteModeEnabled ? 2 : 3) * window.padding
                     + (workspacesFlyout.popup.opened ? workspacesFlyout.popup.height : 0)
@@ -411,18 +687,6 @@ Rectangle {
 
                             onClicked: backend.setLockWorkspace(lockWorkspaceFlyout.checked)
                         }
-
-                        ToolbarButton {
-                            anchors.verticalCenter: parent.verticalCenter
-                            style: StudioTheme.Values.primaryToolbarStyle
-                            width: shareButton.width
-                            iconFontFamily: StudioTheme.Constants.font.family
-                            buttonIcon: qsTr("Share")
-                            enabled: backend.isSharingEnabled
-                            tooltip: shareButton.enabled ? qsTr("Share your project online.") : qsTr("Sharing your project online is disabled in the Community Version.")
-
-                            onClicked: backend.shareApplicationOnline()
-                        }
                     }
 
                     StudioControls.ComboBox {
@@ -430,7 +694,7 @@ Rectangle {
                         anchors.horizontalCenter: parent.horizontalCenter
                         actionIndicatorVisible: false
                         style: StudioTheme.Values.statusbarControlStyle
-                        width: row.width
+                        width: window.morePopupWidth
                         maximumPopupHeight: 400
                         model: workspaceModel
                         textRole: "displayName"

share/qtcreator/qmldesigner/toolbar/MenuItemDelegate.qml

@@ -14,8 +14,8 @@ T.ItemDelegate {
     property alias myIcon: iconLabel.text
     property alias myText: textLabel.text
 
-    //width: root.menuWidth - 2 * window.padding
+    implicitWidth: root.style.controlSize.width
-    //height: root.style.controlSize.height// - 2 * root.style.borderWidth
+    implicitHeight: root.style.controlSize.height
 
     contentItem: Row {
         id: row
@@ -40,7 +40,6 @@ T.ItemDelegate {
             font.pixelSize: root.style.baseIconFontSize
             verticalAlignment: Text.AlignVCenter
             horizontalAlignment: Text.AlignHCenter
-            text: StudioTheme.Constants.playOutline_medium
         }
 
         T.Label {
@@ -68,8 +67,6 @@ T.ItemDelegate {
 
     background: Rectangle {
         id: rootBackground
-        x: 0
-        y: 0
         width: root.width
         height: root.height
         opacity: enabled ? 1 : 0.3

share/qtcreator/qmldesigner/toolbar/ShareNotification.qml

@@ -0,0 +1,203 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Templates as T
+
+import StudioControls as StudioControls
+import StudioTheme as StudioTheme
+
+Item {
+    id: root
+
+    enum NotificationType {
+        Normal,
+        Indeterminate,
+        Success,
+        Error
+    }
+
+    property int type: ShareNotification.NotificationType.Normal
+
+    width: parent.width
+    height: StudioTheme.Values.height * 2
+    visible: false
+
+    function setText(value: string) {
+        label.text = value
+    }
+
+    function setHelperText(value: string) {
+        helperText.text = value
+    }
+
+    function setProgress(value: var) {
+        helperText.text = `${value.toFixed(0)} %`
+        progressBar.value = value / 100.0
+    }
+
+    function hasFinished() {
+        return root.type === ShareNotification.NotificationType.Success
+            || root.type === ShareNotification.NotificationType.Error
+    }
+
+    Column {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.margins: 8
+        spacing: 4
+
+        RowLayout {
+            width: parent.width
+
+            Text {
+                id: label
+                Layout.fillWidth: true
+                color: StudioTheme.Values.themeTextColor
+            }
+
+            Item {
+                implicitWidth: StudioTheme.Values.controlLabelWidth
+                implicitHeight: StudioTheme.Values.controlLabelWidth
+
+                Label {
+                    id: statusIcon
+                    anchors.fill: parent
+                    color: StudioTheme.Values.themeIconColor
+                    font.family: StudioTheme.Constants.iconFont.family
+                    font.pixelSize: StudioTheme.Values.myIconFontSize
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
+                }
+
+                StudioControls.ToolTipArea {
+                    anchors.fill: parent
+                    text: qsTr("This can be your message.")
+                }
+            }
+        }
+
+        T.ProgressBar {
+            id: progressBar
+
+            property color color
+
+            width: parent.width
+            height: 8
+
+            value: 0.5
+
+            background: Rectangle {
+                id: track
+                implicitWidth: 200
+                implicitHeight: 6
+                color: StudioTheme.Values.themeScrollBarTrack
+            }
+
+            contentItem: Item {
+                implicitWidth: 200
+                implicitHeight: 6
+                clip: true
+
+                // Progress indicator for determinate state.
+                Rectangle {
+                    id: barIndicator
+                    width: progressBar.visualPosition * parent.width
+                    height: parent.height
+                    color: progressBar.color
+                    visible: !progressBar.indeterminate
+                }
+
+                // Scrolling animation for indeterminate state.
+                Rectangle {
+                    id: barIndicatorIndeterminate
+                    width: parent.width * 0.5
+                    height: parent.height
+                    color: progressBar.color
+                    visible: progressBar.indeterminate
+
+                    XAnimator on x {
+                        duration: 650
+                        from: -barIndicatorIndeterminate.width
+                        to: progressBar.width
+                        loops: Animation.Infinite
+                        running: progressBar.indeterminate
+                    }
+                }
+            }
+        }
+
+        Text {
+            id: helperText
+            color: StudioTheme.Values.themeTextColor
+        }
+    }
+
+    states: [
+        State {
+            name: "normal"
+            when: root.type === ShareNotification.NotificationType.Normal
+
+            PropertyChanges {
+                target: progressBar
+                color: StudioTheme.Values.themeInteraction
+                indeterminate: false
+            }
+            PropertyChanges {
+                target: statusIcon
+                visible: false
+            }
+        },
+        State {
+            name: "error"
+            when: root.type === ShareNotification.NotificationType.Error
+
+            PropertyChanges {
+                target: progressBar
+                color: StudioTheme.Values.themeRedLight
+                indeterminate: false
+                value: 1
+            }
+            PropertyChanges {
+                target: statusIcon
+                visible: true
+                color: StudioTheme.Values.themeRedLight
+                text: StudioTheme.Constants.error_medium
+            }
+        },
+        State {
+            name: "success"
+            when: root.type === ShareNotification.NotificationType.Success
+
+            PropertyChanges {
+                target: progressBar
+                color: StudioTheme.Values.themeGreenLight
+                indeterminate: false
+                value: 1
+            }
+            PropertyChanges {
+                target: statusIcon
+                visible: true
+                color: StudioTheme.Values.themeGreenLight
+                text: StudioTheme.Constants.apply_medium
+            }
+        },
+        State {
+            name: "indeterminate"
+            when: root.type === ShareNotification.NotificationType.Indeterminate
+
+            PropertyChanges {
+                target: progressBar
+                color: StudioTheme.Values.themeInteraction
+                indeterminate: true
+            }
+            PropertyChanges {
+                target: statusIcon
+                visible: false
+            }
+        }
+    ]
+}

src/plugins/qmldesigner/components/componentcore/theme.h

@@ -173,6 +173,7 @@ public:
         fitSelected_small,
         fitSelection_medium,
         fitToView_medium,
+        flag_medium,
         flowAction,
         flowTransition,
         fontStyleBold,
@@ -230,6 +231,7 @@ public:
         newMaterial,
         nextFile_large,
         normalBar_small,
+        number_medium,
         openLink,
         openMaterialBrowser,
         orientation,
@@ -305,7 +307,10 @@ public:
         selectParent_small,
         selection_small,
         settings_medium,
+        share_large,
         signal_small,
+        signin_medium,
+        signout_medium,
         snapping_conf_medium,
         snapping_medium,
         snapping_small,
@@ -321,6 +326,7 @@ public:
         startNode,
         step_medium,
         stop_medium,
+        string_medium,
         tableView_medium,
         testIcon,
         textAlignBottom,
@@ -370,6 +376,8 @@ public:
         upDownSquare2,
         updateAvailable_medium,
         updateContent_medium,
+        upload_medium,
+        user_medium,
         visibilityOff,
         visibilityOn,
         visible_medium,

src/plugins/qmldesigner/components/designviewer/dvconnector.cpp

@@ -11,6 +11,8 @@
 #include <qmldesigner/qmldesignerconstants.h>
 #include <qmldesigner/qmldesignerplugin.h>
 
+#include <coreplugin/icore.h>
+
 #include <QHttpMultiPart>
 #include <QJsonDocument>
 #include <QJsonObject>
@@ -115,10 +117,12 @@ DVConnector::DVConnector(QObject *parent)
     m_webEngineProfile.reset(new QWebEngineProfile("DesignViewer", this));
     m_webEngineProfile->setPersistentCookiesPolicy(QWebEngineProfile::ForcePersistentCookies);
     m_webEnginePage.reset(new CustomWebEnginePage(m_webEngineProfile.data(), this));
-    m_webEngineView.reset(new QWebEngineView);
+    m_webEngineView.reset(new QWebEngineView(Core::ICore::instance()->dialogParent()));
     m_webEngineView->setPage(m_webEnginePage.data());
     m_webEngineView->resize(1024, 750);
+    m_webEngineView->setWindowFlag(Qt::Dialog);
     m_webEngineView->installEventFilter(this);
+    m_webEngineView->hide();
 
     m_networkCookieJar.reset(
         new CustomCookieJar(this, m_webEngineProfile->persistentStoragePath() + "/dv_cookies.txt"));
@@ -284,7 +288,8 @@ void DVConnector::uploadProject(const QString &projectId, const QString &filePat
             &QNetworkReply::uploadProgress,
             this,
             [this](qint64 bytesSent, qint64 bytesTotal) {
-                emit projectUploadProgress(100.0 * (double) bytesSent / (double) bytesTotal);
+                if (bytesTotal != 0)
+                    emit projectUploadProgress(100.0 * (double) bytesSent / (double) bytesTotal);
             });
     evaluatorData.connectCallbacks(this);
 }
@@ -592,6 +597,7 @@ void DVConnector::login()
     qCDebug(deploymentPluginLog) << "Logging in";
     m_webEnginePage->load(QUrl(DVEndpoints::serviceUrl + DVEndpoints::login));
     m_webEngineView->show();
+    m_webEngineView->raise();
 }
 
 void DVConnector::logout()

src/plugins/qmldesigner/components/designviewer/dvconnector.h

@@ -59,7 +59,7 @@ public:
     bool isWebViewerVisible() const;
 
     void projectList();
-    void uploadCurrentProject();
+    Q_INVOKABLE void uploadCurrentProject();
     void uploadProject(const QString &projectId, const QString &filePath);
     void deleteProject(const QString &projectId);
     void downloadProject(const QString &projectId, const QString &filePath);
@@ -78,9 +78,9 @@ public:
     void downloadSharedProject(const QString &projectId, const QString &filePath);
     void downloadSharedProjectThumbnail(const QString &projectId, const QString &filePath);
 
-    void login();
+    Q_INVOKABLE void login();
-    void logout();
+    Q_INVOKABLE void logout();
-    void fetchUserInfo();
+    Q_INVOKABLE void fetchUserInfo();
 
 private:
     // network

src/plugins/qmldesigner/components/designviewer/resourcegeneratorproxy.cpp

@@ -37,7 +37,7 @@ void ResourceGeneratorProxy::createResourceFileAsync(const QString &projectName)
     m_future = QtConcurrent::run([&]() {
         const std::optional<Utils::FilePath> filePath = createResourceFileSync(projectName);
 
-        if (filePath->isEmpty()) {
+        if (!filePath || filePath->isEmpty()) {
             emit errorOccurred("Failed to create resource file");
             return;
         }

src/plugins/qmldesigner/components/toolbar/toolbarbackend.cpp

@@ -510,6 +510,12 @@ void ToolBarBackend::registerDeclarativeType()
                                            "RunManager shouldn't be instantiated.");
     qmlRegisterUncreatableType<DeviceShare::DeviceManagerModel>(
         "ToolBar", 1, 0, "DeviceManagerModel", "DeviceManagerModel shouldn't be instantiated.");
+
+    qmlRegisterUncreatableType<DesignViewer::DVConnector>("ToolBar",
+                                                          1,
+                                                          0,
+                                                          "DVConnector",
+                                                          "DVConnector shouldn't be instantiated.");
 }
 
 void ToolBarBackend::triggerModeChange()
@@ -896,6 +902,11 @@ int ToolBarBackend::runManagerState() const
     return QmlDesignerPlugin::runManager().state();
 }
 
+DesignViewer::DVConnector *ToolBarBackend::designViewerConnector()
+{
+    return &m_designViewerConnector;
+}
+
 void ToolBarBackend::launchGlobalAnnotations()
 {
     QmlDesignerPlugin::emitUsageStatistics(Constants::EVENT_TOOLBAR_EDIT_GLOBAL_ANNOTATION);

src/plugins/qmldesigner/components/toolbar/toolbarbackend.h

@@ -6,6 +6,8 @@
 #include <QAbstractListModel>
 #include <QObject>
 
+#include <designviewer/dvconnector.h>
+
 namespace QmlDesigner {
 
 class ActionInterface;
@@ -126,6 +128,8 @@ class ToolBarBackend : public QObject
     Q_PROPERTY(int runTargetIndex READ runTargetIndex NOTIFY runTargetIndexChanged)
     Q_PROPERTY(int runManagerState READ runManagerState NOTIFY runManagerStateChanged)
 
+    Q_PROPERTY(DesignViewer::DVConnector *designViewerConnector READ designViewerConnector CONSTANT)
+
 public:
     ToolBarBackend(QObject *parent  = nullptr);
     static void registerDeclarativeType();
@@ -186,6 +190,8 @@ public:
     int runTargetIndex() const;
     int runManagerState() const;
 
+    DesignViewer::DVConnector *designViewerConnector();
+
     static void launchGlobalAnnotations();
 
 signals:
@@ -218,6 +224,7 @@ private:
 
     QStringList m_openDocuments;
     QMetaObject::Connection m_kitConnection;
+    DesignViewer::DVConnector m_designViewerConnector;
 };
 
 } // namespace QmlDesigner