QmlDesigner: Cleanup new IssuesOutputPanel

* Add highlight functionality to StudioControls.AbstractButton
* Add new icon font
* Use icon font instead of PNGs for icons
* Remove unnecessary files
* Fix IssuesOutputPanel opening/closing logic
* Adapt IssuesOutputPanel to theming
* Add scroll to bottom when new messages are added
* Fix application closing signal to close IssuesOutputPanel

Change-Id: Ibdefbbc9980881575c9de8deac26efacd08ab0da
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml

@@ -3,7 +3,7 @@
 
 import QtQuick
 import QtQuick.Templates as T
-import StudioTheme 1.0 as StudioTheme
+import StudioTheme as StudioTheme
 
 T.AbstractButton {
     id: control
@@ -111,6 +111,34 @@ T.AbstractButton {
         }
     }
 
+    function highlight() {
+        // Only run the highlight animation if not running already and if default state is active
+        if (highlightAnimation.running || control.state !== "default")
+            return
+
+        highlightAnimation.start()
+    }
+
+    component MyColorAnimation: ColorAnimation {
+        target: buttonBackground
+        property: "color"
+        duration: 750
+    }
+
+    SequentialAnimation {
+        id: highlightAnimation
+        running: false
+
+        MyColorAnimation { to: StudioTheme.Values.themeConnectionEditorButtonBorder_hover }
+        MyColorAnimation { to: control.style.background.idle }
+        MyColorAnimation { to: StudioTheme.Values.themeConnectionEditorButtonBorder_hover }
+        MyColorAnimation { to: control.style.background.idle }
+        MyColorAnimation { to: StudioTheme.Values.themeConnectionEditorButtonBorder_hover }
+        MyColorAnimation { to: control.style.background.idle }
+    }
+
+    onStateChanged: highlightAnimation.stop()
+
     states: [
         State {
             name: "default"

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

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

share/qtcreator/qmldesigner/statusbar/CloseButton.qml

@@ -1,66 +0,0 @@
-// Copyright (C) 2024 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0+ OR GPL-3.0 WITH Qt-GPL-exception-1.0
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Templates as T
-
-T.Button {
-    id: root
-    width: 29
-    height: 29
-
-    Item {
-        id: closeButton
-        anchors.fill: parent
-        state: "idle"
-
-        Item {
-            id: closeIcon
-            width: 15
-            height: 15
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.horizontalCenter: parent.horizontalCenter
-            rotation: 45
-
-            Rectangle {
-                id: rectangle
-                width: 1
-                height: 15
-                color: "#ffffff"
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.horizontalCenter: parent.horizontalCenter
-            }
-
-            Rectangle {
-                id: rectangle1
-                width: 1
-                height: 15
-                color: "#ffffff"
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.horizontalCenter: parent.horizontalCenter
-                rotation: 90
-            }
-        }
-    }
-
-    states: [
-        State {
-            name: "idle"
-            when: !root.hovered && !root.pressed
-
-            PropertyChanges {
-                target: rectangle
-                color: "#b2b2b2"
-            }
-
-            PropertyChanges {
-                target: rectangle1
-                color: "#b2b2b2"
-            }
-        },
-        State {
-            name: "hoverPress"
-            when: (root.hovered || root.pressed)
-        }
-    ]
-}

share/qtcreator/qmldesigner/statusbar/IconButtonCheckable.qml

@@ -1,72 +0,0 @@
-// Copyright (C) 2024 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0+ OR GPL-3.0 WITH Qt-GPL-exception-1.0
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Templates as T
-
-T.Button {
-    id: root
-    width: 29
-    height: 29
-    state: "idle"
-    property alias imageSource: image.source
-    property color idleBack: "#202020"
-    property color hoverBack: "#2d2d2d"
-
-    Rectangle {
-        id: bkg
-        color: root.idleBack
-        radius: 5
-        border.color: "#424242"
-        anchors.fill: parent
-    }
-
-    Image {
-        id: image
-        width: 15
-        height: 15
-        anchors.verticalCenter: parent.verticalCenter
-        source: "qrc:/qtquickplugin/images/template_image.png"
-        anchors.horizontalCenter: parent.horizontalCenter
-        fillMode: Image.PreserveAspectFit
-    }
-    states: [
-        State {
-            name: "idle"
-            when: !root.hovered && !root.pressed && !root.checked
-                  && root.enabled
-        },
-        State {
-            name: "hover"
-            when: root.hovered && !root.pressed && !root.checked && root.enabled
-            PropertyChanges {
-                target: bkg
-                color: root.hoverBack
-            }
-        },
-        State {
-            name: "pressCheck"
-            when: (root.pressed || root.checked) && root.enabled
-
-            PropertyChanges {
-                target: bkg
-                color: root.hoverBack
-                border.color: "#57b9fc"
-            }
-        },
-        State {
-            name: "blocked"
-            when: !root.enabled
-
-            PropertyChanges {
-                target: bkg
-                border.color: "#3a3a3a"
-            }
-
-            PropertyChanges {
-                target: image
-                opacity: 0.404
-            }
-        }
-    ]
-}

share/qtcreator/qmldesigner/statusbar/IssuesOutputPanel.qml

@@ -1,54 +1,71 @@
 // Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0+ OR GPL-3.0 WITH Qt-GPL-exception-1.0
+
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
 import StudioControls as StudioControls
+import StudioTheme as StudioTheme
 
 import ToolBar
 
 StudioControls.PopupDialog {
-
     id: root
-    width: 1024
+    width: 800
 
     property Item targetItem
 
     property alias warningCount: issuesPanel.warningCount
     property alias errorCount: issuesPanel.errorCount
 
-    function toggleShowIssuesPanel() {
+    property alias unreadOutput: outputPanel.unreadMessages
 
+    readonly property bool issuesVisible: issuesPanel.visible && root.visible
+    readonly property bool outputVisible: outputPanel.visible && root.visible
+
+    function toggleShowIssuesPanel() {
         if (!root.visible) {
-            issuesButton.checked = true
             outputPanel.visible = false
             issuesPanel.visible = true
             root.show(root.targetItem)
         } else {
-            root.visible = false
+            if (issuesPanel.visible) {
-            root.close()
+                root.close()
+            } else {
+                outputPanel.visible = false
+                issuesPanel.visible = true
+            }
         }
     }
 
     function toggleShowOutputPanel() {
         if (!root.visible) {
-            outputButton.checked = true
             issuesPanel.visible = false
             outputPanel.visible = true
-            root.visible = true
+            root.show(root.targetItem)
         } else {
-            root.visible = false
+            if (outputPanel.visible) {
+                root.close()
+            } else {
+                issuesPanel.visible = false
+                outputPanel.visible = true
+            }
         }
     }
 
+    onClosing: {
+        issuesPanel.visible = false
+        outputPanel.visible = false
+    }
+
     titleBar: RowLayout {
         id: toolBar
 
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
         anchors.right: parent.right
-        anchors.leftMargin: 15
+        anchors.leftMargin: 0
         anchors.rightMargin: 10
 
         RowLayout {
@@ -57,78 +74,49 @@ StudioControls.PopupDialog {
 
             TabBarButton {
                 id: issuesButton
-                autoExclusive: true
+                style: StudioTheme.Values.statusbarButtonStyle
-                checked: true
+                text: qsTr("Issues")
+                checked: issuesPanel.visible
+                checkedInverted: true
 
-                Connections {
+                onClicked: {
-                    target: issuesButton
+                    if (!issuesPanel.visible) {
-                    function onClicked() {
+                        outputPanel.visible = false
-                        if (issuesButton.checked) {
+                        issuesPanel.visible = true
-                            issuesPanel.visible = true
-                            outputPanel.visible = false
-                        } else { return }
                     }
                 }
             }
 
             TabBarButton {
                 id: outputButton
-                labelText: "Output"
+                style: StudioTheme.Values.statusbarButtonStyle
-                autoExclusive: true
+                text: qsTr("Output")
+                checked: outputPanel.visible
+                checkedInverted: true
 
-                Connections {
+                onClicked: {
-                    target: outputButton
+                    if (!outputPanel.visible) {
-                    function onClicked() {
+                        issuesPanel.visible = false
-                        if (outputButton.checked) {
+                        outputPanel.visible = true
-                            issuesPanel.visible = false
-                            outputPanel.visible = true
-                        } else { return }
                     }
                 }
             }
         }
+
         RowLayout {
             id: rightAlignedButtons
             Layout.alignment: Qt.AlignRight
 
-            // IconButton {
+            StudioControls.IconIndicator {
-            //     id: showOutputView
+                id: clearButton
-            //     imageSource: "images/outputIcon.png"
+                icon: StudioTheme.Constants.trash_medium
-            //     idleBack: "#282828"
+                pixelSize: StudioTheme.Values.myIconFontSize * 1.4
-            //     hoverBack: "#3a3a3a"
+                toolTip: qsTr("Clear")
-            //     Connections {
+                onClicked: {
-            //         target: showOutputView
+                    if (issuesPanel.visible)
-            //         function onClicked() {
-            //             root.showOutputViewSignal()
-            //         }
-            //     }
-            // }
-
-            IconButtonCheckable {
-                id: clearIssuesButton
-                visible: issuesButton.checked
-                hoverBack: "#3a3a3a"
-                idleBack: "#282828"
-                imageSource: "images/thinBin.png"
-                Connections {
-                    target: clearIssuesButton
-                    function onClicked() {
                         issuesPanel.clearIssues()
-                    }
+                    else
-                }
-            }
-
-            IconButtonCheckable {
-                id: clearOutputButton
-                visible: outputButton.checked
-                hoverBack: "#3a3a3a"
-                idleBack: "#282828"
-                imageSource: "images/thinBin.png"
-                Connections {
-                    target: clearOutputButton
-                    function onClicked() {
                         outputPanel.clearOutput()
-                    }
                 }
             }
         }

share/qtcreator/qmldesigner/statusbar/IssuesOutputToolBar.qml

@@ -1,104 +0,0 @@
-// Copyright (C) 2024 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0+ OR GPL-3.0 WITH Qt-GPL-exception-1.0
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-
-Rectangle {
-    id: root
-    height: 41
-    color: "#282828"
-
-    signal popupClosed
-    signal issuesCheckedSignal
-    signal outputCheckedSignal
-    signal issuesClearedSignal
-    signal outputClearedSignal
-
-    property alias showOutputViewEnabled: showOutputView.enabled
-    property alias clearOutputEnabled: clearOutputButton.enabled
-    property alias clearIssuesEnabled: clearIssuesButton.enabled
-
-    property alias outputChecked: outputButton.checked
-    property alias issuesChecked: issuesButton.checked
-
-    RowLayout {
-        id: tabBar
-
-        anchors.verticalCenter: root.verticalCenter
-        anchors.left: root.left
-        anchors.leftMargin: 15
-
-        TabBarButton {
-            id: issuesButton
-            autoExclusive: true
-            checked: true
-
-            Connections {
-                target: issuesButton
-                function onClicked() {
-                    if (issuesButton.checked) {
-                        root.issuesCheckedSignal()
-                    } else
-                        return
-                }
-            }
-        }
-
-        TabBarButton {
-            id: outputButton
-            labelText: "Output"
-            autoExclusive: true
-
-            Connections {
-                target: outputButton
-                function onClicked() {
-                    if (outputButton.checked)   { root.outputCheckedSignal() }
-                    else                        { return }
-                }
-            }
-        }
-    }
-
-    RowLayout {
-        anchors.right: root.right
-        anchors.rightMargin: 10
-
-        IconButton {
-            id: showOutputView
-            imageSource: "images/outputIcon.png"
-            idleBack: "#282828"
-            hoverBack: "#3a3a3a"
-            Connections {
-                target: showOutputView
-                function onClicked() { root.showOutputViewSignal() }
-            }
-        }
-
-        IconButton {
-            id: clearIssuesButton
-            visible: issuesButton.checked
-            hoverBack: "#3a3a3a"
-            idleBack: "#282828"
-            imageSource: "images/thinBin.png"
-            Connections {
-                target: clearIssuesButton
-                function onClicked() {
-                    root.issuesClearedSignal()
-                }
-            }
-        }
-
-        IconButton {
-            id: clearOutputButton
-            visible: outputButton.checked
-            hoverBack: "#3a3a3a"
-            idleBack: "#282828"
-            imageSource: "images/thinBin.png"
-            Connections {
-                target: clearOutputButton
-                function onClicked() { root.outputClearedSignal() }
-            }
-        }
-    }
-}

share/qtcreator/qmldesigner/statusbar/IssuesPanel.qml

@@ -1,15 +1,16 @@
 // Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0+ OR GPL-3.0 WITH Qt-GPL-exception-1.0
+
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import ToolBar
+
-import OutputPane
 import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 
-ScrollView {
+import OutputPane
 
+ScrollView {
     id: issuesPanel
 
     signal showCodeViewSignal
@@ -27,50 +28,54 @@ ScrollView {
         y: 0
         height: issuesPanel.availableHeight
         orientation: Qt.Vertical
-
+        show: (issuesPanel.hovered || issuesPanel.focus) && verticalScrollBar.isNeeded
-        show: (issuesPanel.hovered || issuesPanel.focus)
-              && verticalScrollBar.isNeeded
     }
 
     ColumnLayout {
         Repeater {
             id: listView
 
-            model: MessageModel {
+            model: MessageModel { id: messageModel }
-                id: messageModel
-            }
 
             delegate: RowLayout {
                 spacing: 10
-                Image {
+
-                    id: typeImage
+                required property int index
-                    source: {
+                required property string message
-                        if (type == "Warning")  { "images/warningsActive.png" }
+                required property string location
-                        else                    { "images/errorActive.png" }
+                required property string type
-                    }
+
-                    fillMode: Image.PreserveAspectFit
+                Text {
+                    font.family: StudioTheme.Constants.iconFont.family
+                    font.pixelSize: StudioTheme.Values.baseIconFontSize
+                    color: (type == "Warning") ? StudioTheme.Values.themeAmberLight
+                                               : StudioTheme.Values.themeRedLight
+                    text: (type == "Warning") ? StudioTheme.Constants.warning2_medium
+                                              : StudioTheme.Constants.error_medium
                 }
 
-                MyLinkTextButton {
+                Text {
-                    id: linkTextWarning
+                    text: location
-                    linkText: location
+                    color: "#57b9fc"
+                    font.pixelSize: 12
+                    verticalAlignment: Text.AlignVCenter
                     Layout.preferredHeight: 18
+                    font.underline: mouseArea.containsMouse ? true : false
 
-                    Connections {
+                    MouseArea {
-                        target: linkTextWarning
+                        id: mouseArea
-                        function onClicked() { messageModel.jumpToCode(index) }
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: mouseArea.containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
                     }
                 }
 
                 Text {
-                    id: historyTime6
+                    color: (type == "Warning") ? StudioTheme.Values.themeAmberLight
-                    color: {
+                                               : StudioTheme.Values.themeRedLight
-                        if (type == "Warning")  { "#ffbb0c" }
+                    text: message
-                        else                    { "#ff4848" }
+                    font.pixelSize: StudioTheme.Values.baseFontSize
-                    }
+                    verticalAlignment: Text.AlignVCenter
-                    text: qsTr(message)
-                    font.pixelSize: 12
-                    verticalAlignment: Text.AlignTop
                     Layout.preferredHeight: 18
                 }
             }

share/qtcreator/qmldesigner/statusbar/Main.qml

@@ -1,15 +1,15 @@
 // Copyright (C) 2023 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0+ OR GPL-3.0 WITH Qt-GPL-exception-1.0
+
 import QtQuick
 import QtQuick.Controls
-import QtQuick.Layouts
 
-import StudioControls 1.0 as StudioControls
+import StudioControls as StudioControls
-import StudioTheme 1.0 as StudioTheme
+import StudioTheme as StudioTheme
 import "../toolbar"
-import HelperWidgets 2.0
+import HelperWidgets
 
-import ToolBar 1.0
+import ToolBar
 
 Item {
     id: toolbarContainer
@@ -26,8 +26,10 @@ Item {
         anchors.fill: parent
 
         Row {
-            anchors.fill: parent
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
             anchors.topMargin: 3
+            anchors.left: parent.left
             anchors.leftMargin: 4
             spacing: 29
 
@@ -51,6 +53,7 @@ Item {
                 horizontalAlignment: Text.AlignRight
                 verticalAlignment: Text.AlignVCenter
                 elide: Text.ElideRight
+
                 ToolTipArea {
                     anchors.fill: parent
                     tooltip: qsTr("Choose a predefined kit for the runtime configuration of the project.")
@@ -78,6 +81,7 @@ Item {
                 horizontalAlignment: Text.AlignRight
                 verticalAlignment: Text.AlignVCenter
                 elide: Text.ElideRight
+
                 ToolTipArea {
                     anchors.fill: parent
                     tooltip: qsTr("Choose a style for the Qt Quick Controls of the project.")
@@ -97,55 +101,61 @@ Item {
             }
         }
 
-        RowLayout {
+        Row {
             id: buttonRow
-            anchors.verticalCenter: parent.verticalCenter
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.topMargin: 3
             anchors.right: parent.right
-            anchors.rightMargin: 10
+            anchors.rightMargin: 4
             spacing: 10
 
             NotificationButton {
                 id: issuesNotification
+                style: StudioTheme.Values.statusbarButtonStyle
+
                 warningCount: popupPanel.warningCount
                 errorCount: popupPanel.errorCount
 
-                Layout.alignment: Qt.AlignVCenter
+                checkable: true
+                checkedInverted: true
+                checked: popupPanel.issuesVisible
 
+                width: 136
+                enabled: backend.projectOpened
+                tooltip: qsTr("Show issues.")
 
-
+                onClicked: popupPanel.toggleShowIssuesPanel()
-                Connections {
-                    target: issuesNotification
-                    function onClicked() {
-                        popupPanel.toggleShowIssuesPanel()
-                    }
-                }
             }
 
-            IconButtonCheckable {
+            ToolbarButton {
                 id: outputButton
-                imageSource: "images/outputIcon.png"
+                style: StudioTheme.Values.statusbarButtonStyle
+                buttonIcon: StudioTheme.Constants.import_medium
+                iconRotation: -90
                 checkable: true
+                checkedInverted: true
+                checked: popupPanel.outputVisible
+                enabled: backend.projectOpened
+                tooltip: qsTr("Show application output.")
+
+                onClicked: popupPanel.toggleShowOutputPanel()
 
                 Connections {
-                    target: outputButton
+                    target: popupPanel
-                    function onClicked() {
+                    function onUnreadOutputChanged() {
-                        popupPanel.toggleShowOutputPanel()
+                        if (popupPanel.unreadOutput)
+                            outputButton.highlight()
                     }
                 }
             }
         }
     }
 
-    Item {
-        id: popupTarget
-        y: -282 //magic number
-        anchors.right: parent.right
-    }
-
     IssuesOutputPanel {
-        targetItem: popupTarget
         id: popupPanel
+        targetItem: buttonRow
+        edge: Qt.TopEdge
         keepOpen: true
     }
-
 }

share/qtcreator/qmldesigner/statusbar/MyLinkTextButton.ui.qml

@@ -1,50 +0,0 @@
-// Copyright (C) 2024 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0+ OR GPL-3.0 WITH Qt-GPL-exception-1.0
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Templates as T
-
-T.Button {
-    id: root
-    width: childrenRect.width
-    state: "idle"
-    property alias linkText: linkTextLabel.text
-
-    Text {
-        id: linkTextLabel
-        color: "#57b9fc"
-        text: qsTr("Screen01.ui.qml - Line 8")
-        font.pixelSize: 12
-        verticalAlignment: Text.AlignVCenter
-    }
-
-    Rectangle {
-        id: rectangle
-        width: linkTextLabel.width
-        height: 1
-        color: "#57b9fc"
-        anchors.left: parent.left
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 2
-    }
-    states: [
-        State {
-            name: "idle"
-            when: !root.hovered && !root.pressed
-
-            PropertyChanges {
-                target: rectangle
-                visible: false
-            }
-        },
-        State {
-            name: "hoverClick"
-            when: (root.hovered || root.pressed)
-
-            PropertyChanges {
-                target: rectangle
-                visible: true
-            }
-        }
-    ]
-}

share/qtcreator/qmldesigner/statusbar/NotificationButton.qml

@@ -0,0 +1,244 @@
+// 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.Templates as T
+
+import StudioTheme as StudioTheme
+import HelperWidgets
+
+T.AbstractButton {
+    id: control
+
+    property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
+
+    property bool globalHover: false
+    property bool hover: control.hovered
+    property bool press: control.pressed
+
+    property alias backgroundVisible: buttonBackground.visible
+    property alias backgroundRadius: buttonBackground.radius
+
+    // Inverts the checked style
+    property bool checkedInverted: false
+
+    property int warningCount: 0
+    property int errorCount: 0
+
+    property bool hasWarnings: control.warningCount > 0
+    property bool hasErrors: control.errorCount > 0
+
+    property alias tooltip: toolTipArea.tooltip
+
+    ToolTipArea {
+        id: toolTipArea
+        anchors.fill: parent
+        // Without setting the acceptedButtons property the clicked event won't
+        // reach the AbstractButton, it will be consumed by the ToolTipArea
+        acceptedButtons: Qt.NoButton
+    }
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+    width: control.style.squareControlSize.width
+    height: control.style.squareControlSize.height
+    z: control.checked ? 10 : 3
+    activeFocusOnTab: false
+
+    background: Rectangle {
+        id: buttonBackground
+        color: control.style.background.idle
+        border.color: control.style.border.idle
+        border.width: control.style.borderWidth
+        radius: control.style.radius
+    }
+
+    component CustomLabel : T.Label {
+        id: customLabel
+        color: control.style.icon.idle
+        font.pixelSize: control.style.baseIconFontSize
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+
+        property bool active: false
+        property color activeColor: "red"
+
+        states: [
+            State {
+                name: "default"
+                when: control.enabled && !control.press && !control.checked && !control.hover
+                PropertyChanges {
+                    target: customLabel
+                    color: customLabel.active ? customLabel.activeColor : control.style.icon.idle
+                }
+            },
+            State {
+                name: "hover"
+                when: control.enabled && !control.press && !control.checked && control.hover
+                PropertyChanges {
+                    target: customLabel
+                    color: customLabel.active ? customLabel.activeColor : control.style.icon.hover
+                }
+            },
+            State {
+                name: "press"
+                when: control.enabled && control.press
+                PropertyChanges {
+                    target: customLabel
+                    color: control.style.icon.interaction
+                }
+            },
+            State {
+                name: "check"
+                when: control.enabled && !control.press && control.checked
+                PropertyChanges {
+                    target: customLabel
+                    color: control.checkedInverted ? control.style.text.selectedText // TODO rather something in icon
+                                                   : control.style.icon.selected
+                }
+            },
+            State {
+                name: "disable"
+                when: !control.enabled
+                PropertyChanges {
+                    target: customLabel
+                    color: control.style.icon.disabled
+                }
+            }
+        ]
+    }
+
+    indicator: Item {
+        x: 0
+        y: 0
+        width: control.width
+        height: control.height
+
+        Row {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: 8
+
+            CustomLabel {
+                height: control.height
+                font.pixelSize: StudioTheme.Values.baseFontSize
+                text: control.warningCount
+                active: control.hasWarnings
+                activeColor: StudioTheme.Values.themeAmberLight
+            }
+
+            CustomLabel {
+                height: control.height
+                text: StudioTheme.Constants.warning2_medium
+                font.family: StudioTheme.Constants.iconFont.family
+                active: control.hasWarnings
+                activeColor: StudioTheme.Values.themeAmberLight
+            }
+
+            CustomLabel {
+                height: control.height
+                text: StudioTheme.Constants.error_medium
+                font.family: StudioTheme.Constants.iconFont.family
+                active: control.hasErrors
+                activeColor: StudioTheme.Values.themeRedLight
+            }
+
+            CustomLabel {
+                height: control.height
+                font.pixelSize: StudioTheme.Values.baseFontSize
+                text: control.errorCount
+                active: control.hasErrors
+                activeColor: StudioTheme.Values.themeRedLight
+            }
+        }
+    }
+
+    states: [
+        State {
+            name: "default"
+            when: control.enabled && !control.globalHover && !control.hover
+                  && !control.press && !control.checked
+            PropertyChanges {
+                target: buttonBackground
+                color: control.style.background.idle
+                border.color: control.style.border.idle
+            }
+            PropertyChanges {
+                target: control
+                z: 3
+            }
+        },
+        State {
+            name: "globalHover"
+            when: control.globalHover && !control.hover && !control.press && control.enabled
+            PropertyChanges {
+                target: buttonBackground
+                color: control.style.background.idle
+                border.color: control.style.border.idle
+            }
+        },
+        State {
+            name: "hover"
+            when: !control.checked && control.hover && !control.press && control.enabled
+            PropertyChanges {
+                target: buttonBackground
+                color: control.style.background.hover
+                border.color: control.style.border.hover
+            }
+            PropertyChanges {
+                target: control
+                z: 100
+            }
+        },
+        State {
+            name: "hoverCheck"
+            when: control.checked && control.hover && !control.press && control.enabled
+            PropertyChanges {
+                target: buttonBackground
+                color: control.checkedInverted ? control.style.interactionHover
+                                               : control.style.background.hover
+                border.color: control.checkedInverted ? control.style.interactionHover
+                                                      : control.style.border.hover
+            }
+            PropertyChanges {
+                target: control
+                z: 100
+            }
+        },
+        State {
+            name: "press"
+            when: control.hover && control.press && control.enabled
+            PropertyChanges {
+                target: buttonBackground
+                color: control.style.interaction
+                border.color: control.style.interaction
+            }
+            PropertyChanges {
+                target: control
+                z: 100
+            }
+        },
+        State {
+            name: "check"
+            when: control.enabled && !control.press && control.checked
+            PropertyChanges {
+                target: buttonBackground
+                color: control.checkedInverted ? control.style.interaction
+                                               : control.style.background.idle
+                border.color: control.checkedInverted ? control.style.interaction
+                                                      : control.style.border.idle
+            }
+        },
+        State {
+            name: "disable"
+            when: !control.enabled
+            PropertyChanges {
+                target: buttonBackground
+                color: control.style.background.disabled
+                border.color: control.style.border.disabled
+            }
+        }
+    ]
+}

share/qtcreator/qmldesigner/statusbar/NotificationButton.ui.qml

@@ -1,351 +0,0 @@
-// Copyright (C) 2024 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0+ OR GPL-3.0 WITH Qt-GPL-exception-1.0
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Templates as T
-
-T.Button {
-    id: root
-
-    property int warningCount: 0
-    property int errorCount: 0
-
-    property bool hasWarnings: warningCount > 0
-    property bool hasErrors: errorCount > 0
-
-    width: 136
-    height: 29
-    checkable: true
-    state: "idleEmpty"
-
-    Rectangle {
-        id: bck
-        color: "#202020"
-        radius: 5
-        border.color: "#444444"
-        anchors.fill: parent
-
-        Text {
-            id: warningNumLabel
-            color: "#ffffff"
-            text: root.warningCount
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.right: warningsIcon.left
-            anchors.rightMargin: 8
-            font.pixelSize: 12
-            horizontalAlignment: Text.AlignRight
-        }
-
-        Text {
-            id: errorNumLabel
-            color: "#ffffff"
-            text: root.errorCount
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.left: errorIcon.right
-            anchors.leftMargin: 8
-            font.pixelSize: 12
-            horizontalAlignment: Text.AlignLeft
-        }
-
-        Image {
-            id: errorIcon
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.right: parent.right
-            anchors.rightMargin: 47
-            source: "images/errorPassive.png"
-            fillMode: Image.PreserveAspectFit
-        }
-
-        Image {
-            id: warningsIcon
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.left: parent.left
-            anchors.leftMargin: 47
-            source: "images/warningsPassive.png"
-            fillMode: Image.PreserveAspectFit
-        }
-    }
-    states: [
-        State {
-            name: "idleEmpty"
-            when: !root.hovered && !root.checked && !root.pressed
-                  && !root.hasErrors && !root.hasWarnings
-
-            PropertyChanges {
-                target: warningNumLabel
-                text: "0"
-            }
-
-            PropertyChanges {
-                target: errorNumLabel
-                text: "0"
-            }
-        },
-        State {
-            name: "idleHover"
-            when: root.hovered && !(root.checked || root.pressed)
-                  && !root.hasErrors && !root.hasWarnings
-            PropertyChanges {
-                target: warningNumLabel
-                text: "0"
-            }
-
-            PropertyChanges {
-                target: errorNumLabel
-                text: "0"
-            }
-
-            PropertyChanges {
-                target: bck
-                color: "#2d2d2d"
-            }
-        },
-
-        State {
-            name: "pressCheck"
-            when: (root.checked || root.pressed) && !root.hasErrors && !root.hasWarnings
-            PropertyChanges {
-                target: warningNumLabel
-                text: "0"
-            }
-
-            PropertyChanges {
-                target: errorNumLabel
-                text: "0"
-            }
-
-            PropertyChanges {
-                target: bck
-                color: "#2d2d2d"
-                border.color: "#2eb0f9"
-            }
-        },
-
-        State {
-            name: "idleWarningsOnly"
-            when: !root.hovered && !root.checked && !root.pressed
-                  && !root.hasErrors && root.hasWarnings
-
-            PropertyChanges {
-                target: warningsIcon
-                source: "images/warningsActive.png"
-            }
-
-            PropertyChanges {
-                target: warningNumLabel
-                color: "#ffbb0c"
-            }
-
-            PropertyChanges {
-                target: errorNumLabel
-                text: "0"
-            }
-        },
-        State {
-            name: "hoverWarningsOnly"
-            when: root.hovered && !root.checked && !root.pressed
-                  && !root.hasErrors && root.hasWarnings
-            PropertyChanges {
-                target: warningsIcon
-                source: "images/warningsActive.png"
-            }
-
-            PropertyChanges {
-                target: warningNumLabel
-                color: "#ffbb0c"
-            }
-
-            PropertyChanges {
-                target: errorNumLabel
-                text: "0"
-            }
-
-            PropertyChanges {
-                target: bck
-                color: "#2d2d2d"
-            }
-        },
-
-        State {
-            name: "pressCheckWarningsOnly"
-            when: (root.checked || root.pressed) && !root.hasErrors
-                  && root.hasWarnings
-            PropertyChanges {
-                target: warningsIcon
-                source: "images/warningsActive.png"
-            }
-
-            PropertyChanges {
-                target: warningNumLabel
-                color: "#ffbb0c"
-            }
-
-            PropertyChanges {
-                target: errorNumLabel
-                text: "0"
-            }
-
-            PropertyChanges {
-                target: bck
-                color: "#2d2d2d"
-                border.color: "#57b9fc"
-            }
-        },
-
-        State {
-            name: "idleErrorsOnly"
-            when: !root.hovered && !root.checked && !root.pressed
-                  && root.hasErrors && !root.hasWarnings
-
-            PropertyChanges {
-                target: warningNumLabel
-                text: "0"
-            }
-
-            PropertyChanges {
-                target: errorIcon
-                source: "images/errorActive.png"
-            }
-
-            PropertyChanges {
-                target: errorNumLabel
-                color: "#ff4848"
-            }
-        },
-        State {
-            name: "hoverErrorsOnly"
-            when: root.hovered && !root.checked && !root.pressed
-                  && root.hasErrors && !root.hasWarnings
-            PropertyChanges {
-                target: warningNumLabel
-                text: "0"
-            }
-
-            PropertyChanges {
-                target: errorIcon
-                source: "images/errorActive.png"
-            }
-
-            PropertyChanges {
-                target: errorNumLabel
-                color: "#ff4848"
-            }
-
-            PropertyChanges {
-                target: bck
-                color: "#2d2d2d"
-            }
-        },
-
-        State {
-            name: "pressCheckErrorsOnly"
-            when: (root.checked || root.pressed) && root.hasErrors
-                  && !root.hasWarnings
-            PropertyChanges {
-                target: warningNumLabel
-                text: "0"
-            }
-
-            PropertyChanges {
-                target: errorIcon
-                source: "images/errorActive.png"
-            }
-
-            PropertyChanges {
-                target: errorNumLabel
-                color: "#ff4848"
-            }
-
-            PropertyChanges {
-                target: bck
-                color: "#2d2d2d"
-                border.color: "#57b9fc"
-            }
-        },
-
-        State {
-            name: "idlesErrorsAndWarnings"
-            when: !root.hovered && !root.checked && !root.pressed
-                  && root.hasErrors && root.hasWarnings
-
-            PropertyChanges {
-                target: warningNumLabel
-                color: "#ffbb0c"
-            }
-
-            PropertyChanges {
-                target: warningsIcon
-                source: "images/warningsActive.png"
-            }
-
-            PropertyChanges {
-                target: errorNumLabel
-                color: "#ff4848"
-            }
-
-            PropertyChanges {
-                target: errorIcon
-                source: "images/errorActive.png"
-            }
-        },
-        State {
-            name: "hoverErrorsAndWarnings"
-            when: root.hovered && !root.checked && !root.pressed
-                  && root.hasErrors && root.hasWarnings
-            PropertyChanges {
-                target: warningNumLabel
-                color: "#ffbb0c"
-            }
-
-            PropertyChanges {
-                target: warningsIcon
-                source: "images/warningsActive.png"
-            }
-
-            PropertyChanges {
-                target: errorNumLabel
-                color: "#ff4848"
-            }
-
-            PropertyChanges {
-                target: errorIcon
-                source: "images/errorActive.png"
-            }
-
-            PropertyChanges {
-                target: bck
-                color: "#2d2d2d"
-            }
-        },
-        State {
-            name: "pressCheckWarningsErrors"
-            when: (root.checked || root.pressed) && root.hasErrors
-                  && root.hasWarnings
-            PropertyChanges {
-                target: warningNumLabel
-                color: "#ffbb0c"
-            }
-
-            PropertyChanges {
-                target: warningsIcon
-                source: "images/warningsActive.png"
-            }
-
-            PropertyChanges {
-                target: errorNumLabel
-                color: "#ff4848"
-            }
-
-            PropertyChanges {
-                target: errorIcon
-                source: "images/errorActive.png"
-            }
-
-            PropertyChanges {
-                target: bck
-                color: "#2d2d2d"
-                border.color: "#2eb0f9"
-            }
-        }
-    ]
-}

share/qtcreator/qmldesigner/statusbar/OutputPanel.qml

@@ -1,21 +1,34 @@
 // Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0+ OR GPL-3.0 WITH Qt-GPL-exception-1.0
+
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import OutputPane
+
 import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 
+import OutputPane
+
 ScrollView {
     id: root
 
+    property int unreadMessages: 0
+
     ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
 
     function clearOutput() {
         parentListModel.resetModel()
+        root.markMessagesRead()
     }
 
+    onVisibleChanged: {
+        if (root.visible === true)
+            root.markMessagesRead()
+    }
+
+    function markMessagesRead() { root.unreadMessages = 0 }
+
     clip: true
 
     ScrollBar.vertical: StudioControls.TransientScrollBar {
@@ -26,21 +39,25 @@ ScrollView {
         y: 0
         height: root.availableHeight
         orientation: Qt.Vertical
-
+        show: (root.hovered || root.focus) && verticalScrollBar.isNeeded
-        show: (root.hovered || root.focus)
-              && verticalScrollBar.isNeeded
     }
 
-    ColumnLayout {
+    Column {
         id: clayout
 
         Repeater {
             id: parentList
+
             model: AppOutputParentModel {
                 id: parentListModel
                 historyColor: "grey"
                 messageColor: "#007b7b"
                 errorColor: "#ff6666"
+
+                onMessageAdded: {
+                    if (!root.visible)
+                        root.unreadMessages++
+                }
             }
 
             delegate: ColumnLayout {
@@ -53,8 +70,8 @@ ScrollView {
 
                 Text {
                     id: timeStampText
-                    text: run
+                    text: parentDelegate.run
-                    color: blockColor
+                    color: parentDelegate.blockColor
                 }
 
                 Repeater {
@@ -66,16 +83,19 @@ ScrollView {
                         row: parentDelegate.index
                     }
 
+                    onItemAdded: verticalScrollBar.position = 1.0 // Scroll to bottom
+
                     delegate: Column {
                         id: childDelegate
 
                         required property string message
                         required property color messageColor
+
                         Text {
                             wrapMode: Text.WordWrap
-                            text: message
+                            text: childDelegate.message
-                            color: messageColor
+                            color: childDelegate.messageColor
-                            width: root.width - verticalScrollBar.width
+                            width: root.width
                         }
                     }
                 }

share/qtcreator/qmldesigner/statusbar/TabBarButton.qml

@@ -0,0 +1,167 @@
+// 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.Templates as T
+import StudioTheme as StudioTheme
+
+T.AbstractButton {
+    id: control
+
+    property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
+
+    property bool hover: control.hovered
+    property bool press: control.pressed
+
+    // Inverts the checked style
+    property bool checkedInverted: false
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+    width: 100
+    height: control.style.squareControlSize.height
+    activeFocusOnTab: false
+
+    background: Rectangle {
+        id: buttonBackground
+        color: control.style.background.idle
+        border.color: control.style.border.idle
+        border.width: control.style.borderWidth
+        radius: control.style.radius
+    }
+
+    indicator: T.Label {
+        id: buttonIcon
+        text: control.text
+        color: control.style.icon.idle
+        font.pixelSize: control.style.baseFontSize
+        width: control.width
+        height: control.height
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+
+        states: [
+            State {
+                name: "default"
+                when: control.enabled && !control.press && !control.checked && !control.hover
+                PropertyChanges {
+                    target: buttonIcon
+                    color: control.style.icon.idle
+                }
+            },
+            State {
+                name: "hover"
+                when: control.enabled && !control.press && !control.checked && control.hover
+                PropertyChanges {
+                    target: buttonIcon
+                    color: control.style.icon.hover
+                }
+            },
+            State {
+                name: "press"
+                when: control.enabled && control.press
+                PropertyChanges {
+                    target: buttonIcon
+                    color: control.style.icon.interaction
+                }
+            },
+            State {
+                name: "check"
+                when: control.enabled && !control.press && control.checked
+                PropertyChanges {
+                    target: buttonIcon
+                    color: control.checkedInverted ? control.style.text.selectedText // TODO rather something in icon
+                                                   : control.style.icon.selected
+                }
+            },
+            State {
+                name: "disable"
+                when: !control.enabled
+                PropertyChanges {
+                    target: buttonIcon
+                    color: control.style.icon.disabled
+                }
+            }
+        ]
+    }
+
+    states: [
+        State {
+            name: "default"
+            when: control.enabled && !control.hover
+                  && !control.press && !control.checked
+            PropertyChanges {
+                target: buttonBackground
+                color: control.style.background.idle
+                border.color: control.style.border.idle
+            }
+            PropertyChanges {
+                target: control
+                z: 3
+            }
+        },
+        State {
+            name: "hover"
+            when: !control.checked && control.hover && !control.press && control.enabled
+            PropertyChanges {
+                target: buttonBackground
+                color: control.style.background.hover
+                border.color: control.style.border.hover
+            }
+            PropertyChanges {
+                target: control
+                z: 100
+            }
+        },
+        State {
+            name: "hoverCheck"
+            when: control.checked && control.hover && !control.press && control.enabled
+            PropertyChanges {
+                target: buttonBackground
+                color: control.checkedInverted ? control.style.interactionHover
+                                               : control.style.background.hover
+                border.color: control.checkedInverted ? control.style.interactionHover
+                                                      : control.style.border.hover
+            }
+            PropertyChanges {
+                target: control
+                z: 100
+            }
+        },
+        State {
+            name: "press"
+            when: control.hover && control.press && control.enabled
+            PropertyChanges {
+                target: buttonBackground
+                color: control.style.interaction
+                border.color: control.style.interaction
+            }
+            PropertyChanges {
+                target: control
+                z: 100
+            }
+        },
+        State {
+            name: "check"
+            when: control.enabled && !control.press && control.checked
+            PropertyChanges {
+                target: buttonBackground
+                color: control.checkedInverted ? control.style.interaction
+                                               : control.style.background.idle
+                border.color: control.checkedInverted ? control.style.interaction
+                                                      : control.style.border.idle
+            }
+        },
+        State {
+            name: "disable"
+            when: !control.enabled
+            PropertyChanges {
+                target: buttonBackground
+                color: control.style.background.disabled
+                border.color: control.style.border.disabled
+            }
+        }
+    ]
+}

share/qtcreator/qmldesigner/statusbar/TabBarButton.ui.qml

@@ -1,56 +0,0 @@
-// Copyright (C) 2024 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0+ OR GPL-3.0 WITH Qt-GPL-exception-1.0
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Templates as T
-
-T.Button {
-    id: root
-    width: 100
-    height: 29
-    property alias labelText: label.text
-    state: "idle"
-    checkable: true
-
-    Rectangle {
-        id: background
-        color: "#282828"
-        radius: 5
-        border.color: "#424242"
-        anchors.fill: parent
-    }
-
-    Text {
-        id: label
-        color: "#ffffff"
-        text: qsTr("Issues")
-        anchors.verticalCenter: parent.verticalCenter
-        font.pixelSize: 12
-        anchors.horizontalCenter: parent.horizontalCenter
-    }
-    states: [
-        State {
-            name: "idle"
-            when: !root.hovered && !root.pressed & !root.checked
-        },
-        State {
-            name: "hover"
-            when: root.hovered && !root.pressed & !root.checked
-
-            PropertyChanges {
-                target: background
-                color: "#2f2f2f"
-            }
-        },
-        State {
-            name: "pressCheck"
-            when: (root.pressed || root.checked)
-
-            PropertyChanges {
-                target: background
-                color: "#57b9fc"
-                border.color: "#57b9fc"
-            }
-        }
-    ]
-}

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

@@ -164,6 +164,7 @@ public:
         edit_medium,
         edit_small,
         effects,
+        error_medium,
         events_small,
         export_medium,
         eyeDropper,
@@ -355,6 +356,7 @@ public:
         translationSelectLanguages,
         translationTest,
         transparent,
+        trash_medium,
         triState,
         triangleArcA,
         triangleArcB,
@@ -372,6 +374,7 @@ public:
         visibilityOn,
         visible_medium,
         visible_small,
+        warning2_medium,
         warning_medium,
         wildcard,
         wizardsAutomotive,

src/plugins/qmldesignerbase/utils/windowmanager.cpp

@@ -18,11 +18,13 @@ QPointer<WindowManager> WindowManager::m_instance = nullptr;
 WindowManager::WindowManager()
 {
     connect(qGuiApp, &QGuiApplication::focusWindowChanged, this, &WindowManager::focusWindowChanged);
-    connect(qGuiApp, &QGuiApplication::aboutToQuit, this, &WindowManager::aboutToQuit);
+    connect(
-    connect(Core::ICore::instance()->mainWindow()->windowHandle(),
+        Core::ICore::instance(), &Core::ICore::coreAboutToClose, this, &WindowManager::aboutToQuit);
-            &QWindow::visibleChanged,
+    connect(
-            this,
+        Core::ICore::instance()->mainWindow()->windowHandle(),
-            &WindowManager::mainWindowVisibleChanged);
+        &QWindow::visibleChanged,
+        this,
+        &WindowManager::mainWindowVisibleChanged);
 }
 
 void WindowManager::registerDeclarativeType()