QmlDesigner: New anchor icons

Themable and High-DPI

Change-Id: Ic073a6a8c5f3fc7eb28b9b498d3dddbebedb243c
Reviewed-by: Thomas Hartmann <Thomas.Hartmann@theqtcompany.com>

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/AnchorButtons.qml

@@ -33,7 +33,7 @@ ButtonRow {
     id: buttonRow
 
     ButtonRowButton {
-        iconSource: "images/anchor-top.png"
+        iconSource: "image://icons/anchor-top"
         tooltip: qsTr("Anchor item to the top.")
 
         property bool topAnchored: anchorBackend.topAnchored
@@ -53,7 +53,7 @@ ButtonRow {
     }
 
     ButtonRowButton {
-        iconSource: "images/anchor-bottom.png"
+        iconSource: "image://icons/anchor-bottom"
         tooltip: qsTr("Anchor item to the bottom.")
 
         property bool bottomAnchored: anchorBackend.bottomAnchored
@@ -74,7 +74,7 @@ ButtonRow {
     }
 
     ButtonRowButton {
-        iconSource: "images/anchor-left.png"
+        iconSource: "image://icons/anchor-left"
         tooltip: qsTr("Anchor item to the left.")
 
         property bool leftAnchored: anchorBackend.leftAnchored
@@ -94,7 +94,7 @@ ButtonRow {
     }
 
     ButtonRowButton {
-        iconSource: "images/anchor-right.png"
+        iconSource: "image://icons/anchor-right"
         tooltip: qsTr("Anchor item to the right.")
 
         property bool rightAnchored: anchorBackend.rightAnchored
@@ -119,7 +119,7 @@ ButtonRow {
 
 
     ButtonRowButton {
-        iconSource: "images/anchor-fill.png"
+        iconSource: "image://icons/anchor-fill"
         tooltip: qsTr("Fill parent item.")
 
         property bool isFilled: anchorBackend.isFilled
@@ -141,7 +141,7 @@ ButtonRow {
     }
 
     ButtonRowButton {
-        iconSource: "images/anchor-vertical.png"
+        iconSource: "image://icons/anchor-vertical"
         tooltip: qsTr("Anchor item vertically.")
 
         property bool verticalCentered: anchorBackend.verticalCentered;
@@ -163,7 +163,7 @@ ButtonRow {
     }
 
     ButtonRowButton {
-        iconSource: "images/anchor-horizontal.png"
+        iconSource: "image://icons/anchor-horizontal"
         tooltip: qsTr("Anchor item horizontally.")
 
         property bool horizontalCentered: anchorBackend.horizontalCentered;

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ButtonRowButton.qml

@@ -69,7 +69,7 @@ Item {
 
             anchors.fill: parent
             visible: checked
-            color: creatorTheme.QmlDesignerBackgroundColorDarker
+            color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
         }
 
         RoundedPanel {
@@ -78,15 +78,15 @@ Item {
 
             anchors.fill: parent
             visible: !checked
-            color: creatorTheme.BackgroundColorDark
+            color: creatorTheme.QmlDesignerBackgroundColorDarker
         }
     }
 
     Image {
         id: image
-        //source: iconSource
+        width: 16
+        height: 16
         anchors.centerIn: parent
-        anchors.leftMargin: leftPadding
     }
 
     ToolTipArea {

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/IconLabel.qml

@@ -38,7 +38,7 @@ Item {
         height: 16
         Image {
             id: image
-            anchors.centerIn: parent
+            anchors.fill: parent
         }
 
     }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnchorRow.qml

@@ -128,7 +128,7 @@ RowLayout {
 
                 exclusive: true
                 ButtonRowButton {
-                    iconSource: verticalAnchor ? "../HelperWidgets/images/anchor-top.png" : "../HelperWidgets/images/anchor-left.png"
+                    iconSource: "image://icons/anchor-" + (verticalAnchor ? "top" : "left")
                     tooltip: verticalAnchor ? qsTr("Anchor to the top of the target.") : qsTr("Anchor to the left of the target.")
                     onClicked: {
                         if (!invertRelativeTargets)
@@ -139,14 +139,14 @@ RowLayout {
                 }
 
                 ButtonRowButton {
-                    iconSource: verticalAnchor ? "../HelperWidgets/images/anchor-vertical.png" : "../HelperWidgets/images/anchor-horizontal.png"
+                    iconSource: "image://icons/anchor-" + (verticalAnchor ? "vertical" : "horizontal")
                     tooltip: verticalAnchor ? qsTr("Anchor to the vertical center of the target.") : qsTr("Anchor to the horizontal center of the target.")
 
                     onClicked: centerButtonClicked();
                 }
 
                 ButtonRowButton {
-                    iconSource: verticalAnchor ? "../HelperWidgets/images/anchor-bottom.png" : "../HelperWidgets/images/anchor-right.png"
+                    iconSource: "image://icons/anchor-" + (verticalAnchor ? "bottom" : "right")
                     tooltip: verticalAnchor ? qsTr("Anchor to the bottom of the target.") : qsTr("Anchor to the right of the target.")
                     onClicked: {
                         if (!invertRelativeTargets)

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayoutSection.qml

@@ -50,7 +50,7 @@ Section {
 
         AnchorRow {
             visible: anchorBackend.topAnchored;
-            iconSource: "../HelperWidgets/images/anchor-top.png"
+            iconSource: "image://icons/anchor-top"
             anchorMargin: backendValues.anchors_topMargin
             targetName: anchorBackend.topTarget
             onTargetChanged: {
@@ -73,7 +73,7 @@ Section {
 
         AnchorRow {
             visible: anchorBackend.bottomAnchored;
-            iconSource: "../HelperWidgets/images/anchor-bottom.png"
+            iconSource: "image://icons/anchor-bottom"
             anchorMargin: backendValues.anchors_bottomMargin
             targetName: anchorBackend.bottomTarget
             onTargetChanged: {
@@ -97,7 +97,7 @@ Section {
 
         AnchorRow {
             visible: anchorBackend.leftAnchored;
-            iconSource: "../HelperWidgets/images/anchor-left.png"
+            iconSource: "image://icons/anchor-left"
             anchorMargin: backendValues.anchors_leftMargin
             targetName: anchorBackend.leftTarget
             onTargetChanged: {
@@ -120,7 +120,7 @@ Section {
 
         AnchorRow {
             visible: anchorBackend.rightAnchored;
-            iconSource: "../HelperWidgets/images/anchor-right.png"
+            iconSource: "image://icons/anchor-right"
             anchorMargin: backendValues.anchors_rightMargin
             targetName: anchorBackend.rightTarget
             onTargetChanged: {
@@ -145,7 +145,7 @@ Section {
         AnchorRow {
             showAlternativeTargets: false
             visible: anchorBackend.horizontalCentered;
-            iconSource: "../HelperWidgets/images/anchor-horizontal.png"
+            iconSource: "image://icons/anchor-horizontal"
             anchorMargin: backendValues.anchors_horizontalCenterOffset
             targetName: anchorBackend.horizontalTarget
             onTargetChanged: {
@@ -158,7 +158,7 @@ Section {
         AnchorRow {
             showAlternativeTargets: false
             visible: anchorBackend.verticalCentered;
-            iconSource: "../HelperWidgets/images/anchor-vertical.png"
+            iconSource: "image://icons/anchor-vertical"
             anchorMargin: backendValues.anchors_verticalCenterOffset
             targetName: anchorBackend.verticalTarget
             onTargetChanged: {

src/libs/qmleditorwidgets/resources.qrc

@@ -39,5 +39,21 @@
         <file>images/tile-icon-hor-crop.png</file>
         <file>images/tile-icon-hor - scale.png</file>
         <file>images/tile-icon-vert-scale.png</file>
+        <file>images/anchor_bottom.png</file>
+        <file>images/anchor_bottom@2x.png</file>
+        <file>images/anchor_fill.png</file>
+        <file>images/anchor_fill@2x.png</file>
+        <file>images/anchor_horizontal.png</file>
+        <file>images/anchor_horizontal@2x.png</file>
+        <file>images/anchor_left.png</file>
+        <file>images/anchor_left@2x.png</file>
+        <file>images/anchor_right.png</file>
+        <file>images/anchor_right@2x.png</file>
+        <file>images/anchor_top.png</file>
+        <file>images/anchor_top@2x.png</file>
+        <file>images/anchor_vertical.png</file>
+        <file>images/anchor_vertical@2x.png</file>
+        <file>images/anchoreditem.png</file>
+        <file>images/anchoreditem@2x.png</file>
     </qresource>
 </RCC>

src/plugins/qmldesigner/components/componentcore/qmldesignericonprovider.cpp

@@ -84,6 +84,33 @@ QPixmap QmlDesignerIconProvider::requestPixmap(const QString &id, QSize *size, c
     else if (id == "error")
         result = Icon({
                 { ":/utils/images/error.png", Theme::IconsBaseColor}}, Icon::Tint).pixmap();
+    else if (id == "anchor-top")
+        result = Icon({
+                { ":/qmldesigner/images/anchor_top.png", Theme::IconsBaseColor},
+                { ":/qmldesigner/images/anchoreditem.png", Theme::IconsBaseColor}}, Icon::Tint).pixmap();
+    else if (id == "anchor-right")
+        result = Icon({
+                { ":/qmldesigner/images/anchor_right.png", Theme::IconsBaseColor},
+                { ":/qmldesigner/images/anchoreditem.png", Theme::IconsBaseColor}}, Icon::Tint).pixmap();
+    else if (id == "anchor-bottom")
+        result = Icon({
+                { ":/qmldesigner/images/anchor_bottom.png", Theme::IconsBaseColor},
+                { ":/qmldesigner/images/anchoreditem.png", Theme::IconsBaseColor}}, Icon::Tint).pixmap();
+    else if (id == "anchor-left")
+        result = Icon({
+                { ":/qmldesigner/images/anchor_left.png", Theme::IconsBaseColor},
+                { ":/qmldesigner/images/anchoreditem.png", Theme::IconsBaseColor}}, Icon::Tint).pixmap();
+    else if (id == "anchor-horizontal")
+        result = Icon({
+                { ":/qmldesigner/images/anchor_horizontal.png", Theme::IconsBaseColor},
+                { ":/qmldesigner/images/anchoreditem.png", Theme::IconsBaseColor}}, Icon::Tint).pixmap();
+    else if (id == "anchor-vertical")
+        result = Icon({
+                { ":/qmldesigner/images/anchor_vertical.png", Theme::IconsBaseColor},
+                { ":/qmldesigner/images/anchoreditem.png", Theme::IconsBaseColor}}, Icon::Tint).pixmap();
+    else if (id == "anchor-fill")
+        result = Icon({
+                { ":/qmldesigner/images/anchor_fill.png", Theme::IconsBaseColor}}, Icon::Tint).pixmap();
     else
         qWarning() << Q_FUNC_INFO << "Image not found:" << id;
 

src/tools/icons/qtcreatoricons.svg

@@ -909,7 +909,28 @@
      inkscape:groupmode="layer"
      id="layer6"
      inkscape:label="Tools logos"
-     style="display:inline" />
+     style="display:inline">
+    <g
+       id="src/libs/qmleditorwidgets/images/anchor_bottom"
+       transform="matrix(-1,0,0,-1,1228,1184)">
+      <rect
+         id="rect5146"
+         height="16"
+         width="16"
+         y="584"
+         x="590"
+         style="display:inline;fill:#ffffff;fill-opacity:1" />
+      <use
+         style="display:inline"
+         x="0"
+         y="0"
+         xlink:href="#anchor_target_bar"
+         id="use5156-3"
+         transform="matrix(-1,0,0,-1,1196,1170)"
+         width="100%"
+         height="100%" />
+    </g>
+  </g>
   <g
      inkscape:label="Other icons"
      inkscape:groupmode="layer"
@@ -1592,6 +1613,188 @@
          style="fill:#000000"
          id="path4400" />
     </g>
+    <g
+       id="src/libs/qmleditorwidgets/images/anchoreditem">
+      <rect
+         style="fill:#ffffff"
+         x="574"
+         y="584"
+         width="16"
+         height="16"
+         id="rect4723-6-8" />
+      <rect
+         y="588.5"
+         x="577.5"
+         height="8"
+         width="8"
+         id="anchoreditemrect"
+         style="fill:#dbdbdb;stroke:#606060"
+         ry="1.5" />
+    </g>
+    <g
+       id="src/libs/qmleditorwidgets/images/anchor_top">
+      <rect
+         style="fill:#ffffff"
+         x="590"
+         y="584"
+         width="16"
+         height="16"
+         id="rect4723-6-8-2" />
+      <rect
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         id="anchor_target_bar"
+         width="11"
+         height="1"
+         x="592"
+         y="585" />
+    </g>
+    <g
+       id="src/libs/qmleditorwidgets/images/anchor_right"
+       transform="matrix(0,1,-1,0,1206,-6)">
+      <rect
+         id="rect5140"
+         height="16"
+         width="16"
+         y="584"
+         x="590"
+         style="fill:#ffffff" />
+      <use
+         style="display:inline"
+         x="0"
+         y="0"
+         xlink:href="#anchor_target_bar"
+         id="use5156"
+         transform="translate(1,0)"
+         width="100%"
+         height="100%" />
+    </g>
+    <g
+       id="src/libs/qmleditorwidgets/images/anchor_left"
+       transform="matrix(0,-1,1,0,55,1190)">
+      <rect
+         id="rect5152"
+         height="16"
+         width="16"
+         y="583"
+         x="590"
+         style="fill:#ffffff" />
+      <use
+         style="display:inline"
+         x="0"
+         y="0"
+         xlink:href="#anchor_target_bar"
+         id="use5156-6"
+         transform="matrix(-1,0,0,-1,1195,1169)"
+         width="100%"
+         height="100%" />
+    </g>
+    <g
+       style="display:inline"
+       id="src/libs/qmleditorwidgets/images/anchor_horizontal"
+       transform="matrix(0,-1,1,0,71,1190)">
+      <rect
+         id="rect5152-4"
+         height="16"
+         width="16"
+         y="583"
+         x="590"
+         style="fill:#ffffff" />
+      <use
+         style="display:inline"
+         x="0"
+         y="0"
+         xlink:href="#anchor_target_bar"
+         id="use5156-6-3"
+         transform="matrix(-1,0,0,-1,1195,1176)"
+         width="100%"
+         height="100%" />
+    </g>
+    <g
+       id="src/libs/qmleditorwidgets/images/anchor_vertical">
+      <rect
+         transform="scale(1,-1)"
+         id="rect5152-4-0"
+         height="16"
+         width="16"
+         y="-600"
+         x="670"
+         style="fill:#ffffff" />
+      <use
+         style="display:inline"
+         x="0"
+         y="0"
+         xlink:href="#anchor_target_bar"
+         id="use5156-6-3-2"
+         transform="matrix(-1,0,0,1,1275,7)"
+         width="100%"
+         height="100%" />
+    </g>
+    <g
+       style="display:inline"
+       id="src/libs/qmleditorwidgets/images/anchor_fill"
+       transform="matrix(0,1,-1,0,1286,-6)">
+      <rect
+         id="rect5140-5"
+         height="16"
+         width="16"
+         y="584"
+         x="590"
+         style="fill:#ffffff" />
+      <use
+         style="display:inline"
+         x="0"
+         y="0"
+         xlink:href="#anchor_target_bar"
+         id="use5156-7"
+         transform="translate(1,0)"
+         width="100%"
+         height="100%" />
+      <use
+         style="display:inline"
+         x="0"
+         y="0"
+         xlink:href="#anchor_target_bar"
+         id="use5156-7-9"
+         width="100%"
+         height="100%"
+         transform="translate(1,14)" />
+      <use
+         style="display:inline"
+         x="0"
+         y="0"
+         xlink:href="#anchor_target_bar"
+         id="use5156-7-9-3"
+         width="100%"
+         height="100%"
+         transform="matrix(0,-1,1,0,6,1190)" />
+      <use
+         transform="matrix(0,-1,1,0,20,1190)"
+         height="100%"
+         width="100%"
+         id="use5284"
+         xlink:href="#anchor_target_bar"
+         y="0"
+         x="0"
+         style="display:inline" />
+      <rect
+         y="592"
+         x="-599"
+         height="13"
+         width="13"
+         id="rect5076-2"
+         style="fill:#dbdbdb"
+         transform="matrix(0,-1,1,0,0,0)"
+         ry="4" />
+      <use
+         style="display:inline"
+         x="0"
+         y="0"
+         xlink:href="#anchoreditemrect"
+         id="use5093"
+         transform="matrix(0,-1,1,0,6,1174)"
+         width="100%"
+         height="100%" />
+    </g>
   </g>
   <g
      inkscape:groupmode="layer"