QmlDesigner: Add editors for font, Text and Rectangle

This requires adjustments of FontSection.qml.

Change-Id: I60eb17c299c73da42726dead0d8713a91d4af932
Reviewed-by: Tim Jenssen <tim.jenssen@qt.io>

share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/FontEditorTemplate.template

@@ -0,0 +1,7 @@
+
+FontSection {
+    anchors.left: parent.left
+    anchors.right: parent.right
+    caption: "%1"
+    fontName: "%2"
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/RectangleEditorTemplate.template

@@ -0,0 +1,64 @@
+Section {
+    anchors.left: parent.left
+    anchors.right: parent.right
+    caption: qsTr("%2 Color")
+
+    ColorEditor {
+        caption: qsTr("Color")
+        backendValue: backendValues.%2_color
+        supportGradient: true
+    }
+
+
+}
+
+Section {
+    anchors.left: parent.left
+    anchors.right: parent.right
+    caption: qsTr("%2 Border Color")
+
+    ColorEditor {
+        caption: qsTr("Border Color")
+        backendValue: backendValues.%2_border_color
+        supportGradient: false
+    }
+}
+
+
+Section {
+    anchors.left: parent.left
+    anchors.right: parent.right
+    caption: "%2 Rectangle"
+
+    SectionLayout {
+        rows: 2
+        Label {
+            text: qsTr("Border")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                backendValue: backendValues.%2_border_width
+                hasSlider: true
+                Layout.preferredWidth: 120
+            }
+            ExpandingSpacer {
+
+            }
+        }
+        Label {
+            text: qsTr("Radius")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                backendValue: backendValues.%2_radius
+                hasSlider: true
+                Layout.preferredWidth: 120
+                minimumValue: 0
+                maximumValue: Math.min(backendValues.height.value, backendValues.width.value) / 2
+            }
+            ExpandingSpacer {
+
+            }
+        }
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/TemplateTypes.qml

@@ -52,4 +52,23 @@ AutoTypes {
         sourceFile: "ColorEditorTemplate.template"
         separateSection: true
     }
+
+    Type {
+        typeNames: ["Text"]
+        sourceFile: "TextEditorTemplate.template"
+        separateSection: true
+    }
+
+    Type {
+        typeNames: ["font", "QFont"]
+        sourceFile: "FontEditorTemplate.template"
+        separateSection: true
+    }
+
+     Type {
+        typeNames: ["Rectangle"]
+        sourceFile: "RectangleEditorTemplate.template"
+        separateSection: true
+    }
+
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/TextEditorTemplate.template

@@ -0,0 +1,105 @@
+Section {
+    anchors.left: parent.left
+    anchors.right: parent.right
+    caption: "%1"
+
+    SectionLayout {
+        columns: 2
+        rows: 3
+        Label {
+            text: qsTr("Text")
+        }
+        LineEdit {
+            backendValue: backendValues.%2_text
+            Layout.fillWidth: true
+        }
+
+        Label {
+            text: qsTr("Wrap mode")
+        }
+
+        ComboBox {
+            Layout.fillWidth: true
+            backendValue: backendValues.%2_wrapMode
+            scope: "Text"
+            model: ["NoWrap", "WordWrap", "WrapAnywhere", "WrapAtWordBoundaryOrAnywhere"]
+        }
+
+        Label {
+            text: qsTr("Elide")
+        }
+
+        ComboBox {
+            Layout.fillWidth: true
+            backendValue: backendValues.%2_elide
+            scope: "Text"
+            model: ["ElideNone", "ElideLeft", "ElideMiddle", "ElideRight"]
+        }
+
+        Label {
+            text: qsTr("Alignment")
+        }
+
+        AligmentHorizontalButtons {
+            backendValue: backendValues.%2_horizontalAlignment;
+
+        }
+
+        Label {
+            text: ("")
+        }
+
+        AligmentVerticalButtons {
+            backendValue: backendValues.%2_verticalAlignment;
+        }
+
+
+        Label {
+            text: qsTr("Format")
+        }
+        ComboBox {
+            scope: "Text"
+            model:  ["PlainText", "RichText", "AutoText"]
+            backendValue: backendValues.%2_textFormat
+            Layout.fillWidth: true
+        }
+
+        Label {
+            text: qsTr("Render type")
+            toolTip: qsTr("Override the default rendering type for this item.")
+        }
+        ComboBox {
+            scope: "Text"
+            model:  ["QtRendering", "NativeRendering"]
+            backendValue: backendValues.%2_renderType
+            Layout.fillWidth: true
+        }
+
+        Label {
+            text: qsTr("Font size mode")
+            toolTip: qsTr("Specifies how the font size of the displayed text is determined.")
+        }
+        ComboBox {
+            scope: "Text"
+            model:  ["FixedSize", "HorizontalFit", "VerticalFit", "Fit"]
+            backendValue: backendValues.%2_fontSizeMode
+            Layout.fillWidth: true
+        }
+
+
+        Label {
+            text: qsTr("Line height")
+            tooltip: qsTr("Sets the line height for the text.")
+        }
+
+        SpinBox {
+            Layout.fillWidth: true
+            backendValue: (backendValues.%2_lineHeight === undefined) ? dummyBackendValue : backendValues.lineHeight
+            maximumValue: 500
+            minimumValue: 0
+            decimals: 2
+            stepSize: 0.1
+        }
+
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontSection.qml

@@ -35,16 +35,24 @@ Section {
     anchors.right: parent.right
     caption: qsTr("Font")
 
+    property string fontName: "font"
+
     property bool showStyle: false
 
-    property variant fontFamily: backendValues.font_family
+    function getBackendValue(name)
-    property variant pointSize: backendValues.font_pointSize
+    {
-    property variant pixelSize: backendValues.font_pixelSize
+        print(fontSection.fontName + "_" + name)
+        return backendValues[fontSection.fontName + "_" + name]
+    }
 
-    property variant boldStyle: backendValues.font_bold
+    property variant fontFamily: getBackendValue("family")
-    property variant italicStyle: backendValues.font_italic
+    property variant pointSize: getBackendValue("pointSize")
-    property variant underlineStyle: backendValues.font_underline
+    property variant pixelSize: getBackendValue("pixelSize")
-    property variant strikeoutStyle: backendValues.font_strikeout
+
+    property variant boldStyle: getBackendValue("bold")
+    property variant italicStyle: getBackendValue("italic")
+    property variant underlineStyle: getBackendValue("underline")
+    property variant strikeoutStyle: getBackendValue("strikeout")
 
     onPointSizeChanged: {
         sizeWidget.setPointPixelSize();
@@ -140,6 +148,10 @@ Section {
         }
         FontStyleButtons {
 
+            bold: fontSection.boldStyle
+            italic: fontSection.italicStyle
+            underline: fontSection.underlineStyle
+            strikeout: fontSection.strikeoutStyle
         }
 
         Label {
@@ -149,7 +161,7 @@ Section {
 
         ComboBox {
             Layout.fillWidth: true
-            backendValue: backendValues.font_capitalization
+            backendValue: getBackendValue("capitalization")
             model:  ["MixedCase", "AllUppercase", "AllLowercase", "SmallCaps", "Capitalize"]
             scope: "Font"
         }
@@ -161,7 +173,7 @@ Section {
 
         ComboBox {
             Layout.fillWidth: true
-            backendValue: backendValues.font_weight
+            backendValue: getBackendValue("weight")
             model:  ["Normal", "Light", "ExtraLight", "Thin", "Medium", "DemiBold", "Bold", "ExtraBold", "Black"]
             scope: "Font"
         }
@@ -193,7 +205,7 @@ Section {
                 maximumValue: 500
                 minimumValue: -500
                 decimals: 2
-                backendValue: backendValues.font_wordSpacing
+                backendValue: getBackendValue("wordSpacing")
                 Layout.fillWidth: true
                 Layout.minimumWidth: 60
                 stepSize: 0.1
@@ -212,7 +224,7 @@ Section {
                 maximumValue: 500
                 minimumValue: -500
                 decimals: 2
-                backendValue: backendValues.font_letterSpacing
+                backendValue: getBackendValue("letterSpacing")
                 Layout.fillWidth: true
                 Layout.minimumWidth: 60
                 stepSize: 0.1
@@ -230,7 +242,7 @@ Section {
             CheckBox {
                 text: qsTr("Kerning")
                 Layout.fillWidth: true
-                backendValue: (backendValues.font_kerning === undefined) ? dummyBackendValue : backendValues.font_kerning
+                backendValue: getBackendValue("kerning")
                 tooltip: qsTr("Enables or disables the kerning OpenType feature when shaping the text. Disabling this may " +
                               "improve performance when creating or changing the text, at the expense of some cosmetic features. The default value is true.")
             }
@@ -238,7 +250,7 @@ Section {
             CheckBox {
                 text: qsTr("Prefer shaping")
                 Layout.fillWidth: true
-                backendValue: (backendValues.font_preferShaping === undefined) ? dummyBackendValue : backendValues.font_preferShaping
+                backendValue: getBackendValue("preferShaping")
                 tooltip: qsTr("Sometimes, a font will apply complex rules to a set of characters in order to display them correctly.\n" +
                               "In some writing systems, such as Brahmic scripts, this is required in order for the text to be legible, whereas in " +
                               "Latin script,\n it is merely a cosmetic feature. Setting the preferShaping property to false will disable all such features\nwhen they are not required, which will improve performance in most cases.")