Merge pull request 'new scaling system pass one' (#36) from newscale into master

Reviewed-on: #36 all comments appear addressed :)
2020-12-16 17:48:48 -08:00 · 2020-12-16 17:48:48 -08:00 · 136e613ab5
parent f678d629b4 a998ebc935
commit 136e613ab5
16 changed files with 198 additions and 135 deletions
--- a/Collapser.qml
+++ b/Collapser.qml
@ -0,0 +1,31 @@
+import QtQuick 2.13
+
+import "." as Opaque
+import "theme"
+
+Opaque.Column {
+	id: root
+
+	//: Show
+	readonly property string strShow: qsTr("collapser-show")
+	//: Hide
+	readonly property string strHide: qsTr("collapser-hide")
+
+	property string textShow: strShow
+	property string textHide: strHide
+	property bool expanded: false
+
+	height: expanded ? childrenRect.height + 2 * root.padding : lblTitle.height + root.padding + root.spacing
+	Behavior on height { PropertyAnimation {} }
+	clip: true
+
+	Opaque.Label {
+		id: lblTitle
+		text: root.expanded ? root.textHide + " ▲" : root.textShow + " ▼"
+		header: true
+		MouseArea {
+			anchors.fill: parent
+			onClicked: root.expanded = !root.expanded
+		}
+	}
+}
--- a/Column.qml
+++ b/Column.qml
@ -0,0 +1,9 @@
+import QtQuick 2.13
+
+import "." as Opaque
+import "theme"
+
+Column {
+	padding: Theme.paddingStandard
+	spacing: Theme.paddingSmall
+}
--- a/ComboBox.qml
+++ b/ComboBox.qml
@ -5,18 +5,18 @@ import QtGraphicalEffects 1.12
 import "theme"


-
 // Assumes data comes in a model like
 //     model: ListModel {
 //            ListElement { text: qsTr("locale-en"); value: "en" } }
 ComboBox {
    id: control
-    height: 30 * gcd.themeScale
+    height: Theme.textNormalPt + Theme.paddingMinimal * 2
+    font.pointSize: Theme.textNormalPt

    // visible item
-    contentItem:  ScalingLabel {
+    contentItem: Label {
        id: displayItem
-        leftPadding: 10 * gcd.themeScale
+        leftPadding: Theme.paddingStandard

        text: control.model.get(control.currentIndex)["text"]
        font: control.font
@ -78,17 +78,17 @@ ComboBox {
    delegate: ItemDelegate {
        width: control.width
        highlighted: control.highlightedIndex === index
-        height: ciText.height + (4 * gcd.themeScale)
+        height: ciText.height + 2 * Theme.paddingMinimal

        contentItem:
        Rectangle {
            anchors.fill: parent
            color: control.highlightedIndex === index ? Theme.backgroundHilightElementColor : Theme.backgroundMainColor
-            ScalingLabel {
+            Label {
                id: ciText
                anchors.verticalCenter: parent.verticalCenter
                anchors.left:parent.left
-                anchors.leftMargin: 10 * gcd.themeScale
+                anchors.leftMargin: Theme.paddingStandard

                text: model["text"] //control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
                color: Theme.mainTextColor
--- a/EmojiDrawer.qml
+++ b/EmojiDrawer.qml
@ -193,7 +193,6 @@ Item {
            	height: root.size * 0.8
            	color: Theme.dividerColor
            	visible: !root.narrowMode && !root.searchMode
-            	anchors.verticalCenter: parent.verticalCenter
            }

            Item {
--- a/HLine.qml
+++ b/HLine.qml
@ -3,7 +3,7 @@ import "theme"

 Column {
    width: parent.width
-    anchors.horizontalCenter: parent.horizontalCenter
+    anchors.horizontalCenter: typeof(Layout) == undefined ? parent.horizontalCenter : undefined

    Rectangle {
        height: 10
@ -11,15 +11,13 @@ Column {
        width: parent.width
    }

-
    Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter
        height: 1
-        width: parent.width * 0.95
+        width: parent.width
        color: Theme.dropShadowColor
    }

-
    Rectangle {
        height: 10
        color:"transparent"
--- a/ScalingLabel.qml
+++ b/ScalingLabel.qml
@ -7,13 +7,18 @@ import QtQuick.Window 2.11
 import "theme"
 import "fonts"

+// Defaults to normal size text. doesn't do its own padding!
+// Setting header:true switches to header sized and bolded text
 Label {
-    font.pixelSize: gcd.themeScale * size
-    wrapMode: Text.WordWrap
+    font.pointSize: size
+    wrapMode: multiline ? Text.WordWrap : Text.NoWrap
+    elide: Text.ElideRight
    color: Theme.mainTextColor
    textFormat: Text.PlainText
-    property real size: 12
-    property bool bold: false
+    property bool header: false
+    property real size: header ? Theme.textHeaderPt : Theme.textMediumPt
+    property bool bold: header
+    property bool multiline: true

    font.family: bold ? Fonts.applicationFontRegular.name : Fonts.applicationFontBold.name
    font.styleName: bold ? "Bold" : ""
--- a/Portrait.qml
+++ b/Portrait.qml
@ -12,9 +12,10 @@ Item {
    property string source
    property alias badgeColor: badge.color

-    property int size: Theme.contactPortraitSize
-    property int baseWidth:  size * gcd.themeScale
-    height: size * gcd.themeScale
+    height: Theme.contactPortraitSize
+    width: Theme.contactPortraitSize
+    implicitWidth: Theme.contactPortraitSize
+    implicitHeight: Theme.contactPortraitSize

    property alias portraitBorderColor: mainImage.color
    property alias portraitColor: imageInner.color
@ -25,16 +26,13 @@ Item {
    property alias overlayColor: iconColorOverlay.color
    property real rotationAngle: 0.0

-    implicitWidth: baseWidth
-    implicitHeight: baseWidth

    Rectangle {
        id: mainImage
-        //anchors.leftMargin: baseWidth * 0.1
        anchors.horizontalCenter: parent.horizontalCenter
-        width: baseWidth * 0.8
-        height: width
        anchors.verticalCenter: parent.verticalCenter
+        width: parent.width * 0.8
+        height: width
        color:  Theme.portraitOfflineBorderColor
        radius: width / 2

--- a/PortraitRow.qml
+++ b/PortraitRow.qml
@ -5,7 +5,7 @@ import QtQuick.Controls.Material 2.0
 import QtQuick.Layouts 1.3
 import CustomQmlTypes 1.0
 import "styles"
-import "." as Widgets
+import "." as Opaque
 import "theme"
 import "../opaque/fonts"
 import QtQuick.Controls 1.4
@ -13,10 +13,9 @@ import QtQuick.Controls.Styles 1.4

 Item {
    id: crItem
-    implicitHeight: Theme.contactPortraitSize * logscale + 3
+    implicitHeight: Math.max(cnMetric.height + onionMetric.height, Theme.contactPortraitSize) + Theme.paddingSmall * 2
    height: implicitHeight

-    property real logscale: 4 * Math.log10(gcd.themeScale + 1)
    property string displayName
    property alias image: portrait.source
    property string handle
@ -48,52 +47,70 @@ Item {

    signal clicked(string handle)

-    Rectangle { // CONTACT ENTRY BACKGROUND COLOR
+
+	// Manual columnlayout using anchors!
+	// Elements on the left are bound left, elements on the right, right
+	// Center element (contact name/onion) gets whatever space is left
+	// because it can elide text when it becomes too small :)
+	// crRect.left <- portrait <- portraitMeta -> extraMeta -> crRect.right
+    Rectangle {
        id: crRect
        anchors.left: parent.left
        anchors.right: parent.right
        height: crItem.height
        width: parent.width
+        // CONTACT ENTRY BACKGROUND COLOR
        color: isHover ? crItem.rowHilightColor : (isActive ? crItem.rowHilightColor : crItem.rowColor)

        Portrait {
            id: portrait
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
-            anchors.leftMargin: 25 * logscale
+            anchors.leftMargin: Theme.paddingStandard
        }

-        ColumnLayout {
+        Column {
            id: portraitMeta

            anchors.left: portrait.right
-            anchors.right: parent.right
-            anchors.leftMargin: 4 * logscale
+            anchors.right: extraMeta.left
+            anchors.leftMargin: Theme.paddingStandard
            anchors.verticalCenter: parent.verticalCenter

-            Label { // CONTACT NAME
+            Opaque.Label { // CONTACT NAME
                id: cn
-                Layout.fillWidth: true
+                width: parent.width
                elide: Text.ElideRight
-                font.pixelSize: Theme.usernameSize * gcd.themeScale
-                font.family: Fonts.applicationFontExtraBold.name
-                font.styleName: "ExtraBold"
+                header: true
                text: displayName
+                wrapMode: Text.NoWrap
            }

-            Label { // Onion
+            TextMetrics {
+            	id: cnMetric
+            	font: cn.font
+            	text: cn.text
+            }
+
+            Opaque.Label { // Onion
                id: onion
                text: handle
-                Layout.fillWidth: true
+                width: parent.width
                elide: Text.ElideRight
-                font.pixelSize: Theme.secondaryTextSize * gcd.themeScale
+                wrapMode: Text.NoWrap
+            }

+            TextMetrics {
+            	id: onionMetric
+            	font: onion.font
+            	text: onion.text
            }
        }

        Column {
            id: extraMeta
-            anchors.left: portraitMeta.right
+            width: Theme.uiIconSizeS + 2 * Theme.paddingMinimal
+            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
        }
    }
--- a/RadioButton.qml
+++ b/RadioButton.qml
@ -3,6 +3,7 @@ import QtQuick 2.7
 import QtQuick.Controls 2.13
 import "theme"
 import "fonts"
+import "." as Opaque

 RadioButton {
    id: control
@ -29,12 +30,11 @@ RadioButton {
        }
    }

-    contentItem: ScalingLabel {
-        size: Theme.chatMetaTextSize
+    contentItem: Opaque.Label {
+        size: Theme.textMediumPt
        color: textColor
        text: control.text
-        font.family: Fonts.applicationFontRegular.name
-        font.styleName: "Bold"
+        bold: true
        leftPadding: control.indicator.width + control.spacing
    }

--- a/Setting.qml
+++ b/Setting.qml
@ -15,10 +15,9 @@ import "../opaque/theme"
 Column {
    id: tehcol

-    width: parent.width - 20
+    width: parent.width - 2 * parent.padding
    anchors.horizontalCenter: parent.horizontalCenter
-    padding: 10
-    spacing: 10
+    spacing: Theme.paddingSmall
    property bool inline: true
    property bool last: false

@ -31,31 +30,28 @@ Column {
    Grid {
        id: container
        columns: inline ? 2 : 1
-        spacing: 10 * gcd.themeScale
-        padding: 10 * gcd.themeScale
+        spacing: Theme.paddingStandard
+        padding: Theme.paddingStandard

        width: parent.width

-        property int gridWidth: inline ? (parent.width / 2) - (20 * gcd.themeScale) : parent.width - (20 * gcd.themeScale)
+        property int gridWidth: (inline ? (width - spacing)/2 : width) - 2*padding

        anchors.horizontalCenter: parent.horizontalCenter

        Column {
-            Opaque.ScalingLabel {
+            Opaque.Label {
                id: settingLabel
                width: container.gridWidth
-                color: Theme.mainTextColor
-                size: Theme.secondaryTextSize * gcd.themeScale
-                font.weight: Font.Bold
+                header: true
                visible: text != ""
            }


-            Opaque.ScalingLabel {
+            Opaque.Label {
                id: settingDescriptionLabel
                width: container.gridWidth
-                color: Theme.mainTextColor
-                size: Theme.chatMetaTextSize * gcd.themeScale
+                size: Theme.textSmallPt
                visible: settingDescriptionLabel.text != ""
                topPadding:10
            }
@ -71,5 +67,8 @@ Column {

    }

-    Opaque.HLine { visible: !last }
+    Opaque.HLine {
+    	width: parent.width - 20
+    	visible: !last
+    }
 }
--- a/TabBar.qml
+++ b/TabBar.qml
@ -1,7 +1,8 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13

-import "../opaque/theme"
+import "." as Opaque
+import "./theme"

 // Tabs.qml
 //
@ -20,23 +21,22 @@ ListView {

 	// contents & appearance config
 	model: ["your", "model", "here"]
-	delegate: Label {
+	delegate: Opaque.Label {
 		// contents & appearance config
 		text: model.modelData
 		elide: Text.ElideRight
 		horizontalAlignment: Text.AlignHCenter
-		color: Theme.mainTextColor
-		font.pixelSize: Theme.chatMetaTextSize * gcd.themeScale
-		font.weight: Font.Bold
+		size: Theme.textSmallPt
+		bold: true

 		// functionality
 		MouseArea { anchors.fill: parent; onClicked: root.currentIndex = index; }
 		width: root.width / root.model.length
 	}
-	highlight: Rectangle { radius: 5; color: root.highlightColor; }
+	highlight: Rectangle { id: hl; radius: 5; color: root.highlightColor; x: 0; width: root.width / root.model.length;}

 	// functionality
-	height: Theme.secondaryTextSize * gcd.themeScale + 5
+	height: Theme.uiIconSizeS
 	orientation: Qt.Horizontal
 	interactive: true
 	highlightFollowsCurrentItem: true
--- a/ToggleSwitch.qml
+++ b/ToggleSwitch.qml
@ -3,30 +3,24 @@ import QtQuick.Controls.Styles 1.4
 import QtQuick 2.12
 import "theme"

-// ToggleSwtch implements a stylized toggle switch. It requires the user create a function called onToggled to
-// perform any additional operations needed to define the behavior of the toggle switch
+// ToggleSwtch implements a stylized toggle switch.
 Switch {
-    property bool isToggled
-    property var onToggled: function () { console.log("In Superclass") };
-    checked: isToggled
    style: SwitchStyle {
        handle: Rectangle {
            implicitWidth: 25
            implicitHeight: 25
            radius: width*0.5
            color: Theme.toggleColor
-            border.color: isToggled  ? Theme.toggleOnColor  :Theme.toggleOffColor
+            border.color: checked  ? Theme.toggleOnColor  :Theme.toggleOffColor
            border.width:5
        }
        groove: Rectangle {
            implicitWidth: 50
            implicitHeight: 25
            radius: 25*0.5
-            color: isToggled  ? Theme.toggleOnColor  :Theme.toggleOffColor
+            color: checked  ? Theme.toggleOnColor  :Theme.toggleOffColor
        }
    }
-
-    onClicked: function() {onToggled()}
 }


--- a/Toolbar.qml
+++ b/Toolbar.qml
@ -4,10 +4,9 @@ import QtQuick.Controls 2.4
 import QtQuick.Controls.Material 2.0
 import QtQuick.Layouts 1.3

-import "." as Widgets
+import "." as Opaque
 import "theme"
-import "../opaque/fonts"
-
+import "fonts"

 Rectangle { // Global Toolbar
    id: toolbar
@ -15,7 +14,10 @@ Rectangle { // Global Toolbar
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: parent.top
-    height: 35 * gcd.themeScale
+
+    height: 2 * Theme.paddingSmall + Math.max(iconSize, paneTitleTextMetric.height)
+
+    property int iconSize: Theme.uiIconSizeM


    Layout.minimumHeight: height
@ -26,7 +28,7 @@ Rectangle { // Global Toolbar
    property alias backVisible: btnLeftBack.visible
    property alias rightMenuVisible: btnRightMenu.visible

-    property alias titleWidth: paneArea.width
+    property int rightPaneWidth: 0


    signal leftMenu()
@ -41,8 +43,8 @@ Rectangle { // Global Toolbar

        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
-        width: 30 * gcd.themeScale
-        height: 30 * gcd.themeScale
+        width: toolbar.iconSize
+        height: toolbar.iconSize

        onClicked: { leftMenu() }
    }
@ -54,33 +56,29 @@ Rectangle { // Global Toolbar

        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
-        width: 30 * gcd.themeScale
-        height: 30 * gcd.themeScale
+        width: toolbar.iconSize
+        height: toolbar.iconSize

        onClicked: { back() }
    }

+   Opaque.Label {
+		id: paneTitle
+		width: rightPaneWidth - (btnRightMenu.visible ? btnRightMenu.width : 0) - 2 * Theme.paddingStandard
+		horizontalAlignment: Text.AlignHCenter
+		anchors.right: btnRightMenu.visible ? btnRightMenu.left : parent.right
+		anchors.rightMargin: Theme.paddingStandard
+		anchors.verticalCenter: parent.verticalCenter
+		header: true
+		multiline: false
+		text: "global toolbar"
+	}

-
-    Rectangle {
-        id: paneArea
-        anchors.right: parent.right
-
-       Label {
-            id: paneTitle
-
-            visible: true
-            anchors.horizontalCenter: parent.horizontalCenter
-
-            color: Theme.mainTextColor
-            font.pixelSize: Theme.primaryTextSize * gcd.themeScale
-            elide: Text.ElideRight
-            font.weight: Font.Bold
-            font.family: Fonts.applicationFontRegular.name
-            font.styleName: "Bold"
-            text: "global toolbar"
-        }
-    }
+	TextMetrics {
+		id: paneTitleTextMetric
+		text: paneTitle.text
+		font: paneTitle.font
+	}

    Icon {
        id: btnRightMenu
@ -90,15 +88,14 @@ Rectangle { // Global Toolbar
        visible: false
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
-        width: 30
-        height: 30
+        width: toolbar.iconSize
+        height: toolbar.iconSize

        onClicked: { rightMenu() }
    }

-    function setTitle(text, width) {
+    function setTitle(text) {
        paneTitle.text = text
-        paneArea.width = theStack.width
        paneTitle.visible = true
    }

--- a/fonts/MutantStandard.js
+++ b/fonts/MutantStandard.js
@ -41,7 +41,7 @@ var standard = (function () {
    }

    function colorByIndex(idx, morph) {
-        console.log(idx, morph, numColors(morph), idx % numColors(morph), basecolors.length)
+        //console.log(idx, morph, numColors(morph), idx % numColors(morph), basecolors.length)
        var i = idx % numColors(morph);
        if (i >= basecolors.length) return extracolors[morph][i - basecolors.length];
        else return basecolors[i];
--- a/qml.qrc
+++ b/qml.qrc
@ -18,7 +18,7 @@
 	<file>./Icon.qml</file>
 	<file>./TextField.qml</file>
 	<file>./PortraitRow.qml</file>
-	<file>./ScalingLabel.qml</file>
+	<file>./Label.qml</file>
 	<file>./UnderlineTextField.qml</file>
 	<file>./EmojiDrawer.qml</file>
 	<file>./ToggleSwitch.qml</file>
@ -37,6 +37,5 @@
 	<file>i18n/translation_es.qm</file>
 	<file>i18n/translation_it.qm</file>
 	<file>i18n/translation_pt.qm</file>
-
    </qresource>
 </RCC>
--- a/theme/Theme.qml
+++ b/theme/Theme.qml
@ -94,29 +94,19 @@ Item {
    readonly property color scrollbarDefaultColor: theme.scrollbarDefaultColor
    readonly property color scrollbarActiveColor: theme.scrollbarActiveColor

-    readonly property int headerSize: 50
-    readonly property int subHeaderSize: 35
-    readonly property int usernameSize: 30
-    readonly property int primaryTextSize: 25
-    readonly property int tabSize: 25
-    readonly property int chatSize: 20
-    readonly property int secondaryTextSize: 20 // address
-    readonly property int chatMetaTextSize: 15
-    readonly property int badgeTextSize: 12
-    readonly property int statusTextSize: 12
-    readonly property int contactPortraitSize: 75

-    readonly property int sidePaneMinSize: 700
-    readonly property int doublePaneMinSize: 1400
+	readonly property variant sidePaneMinSizeBase: [200, 400, 600]
+    readonly property int sidePaneMinSize: sidePaneMinSizeBase[p[scale]]+200/*for debugging*/
+    readonly property variant chatPaneMinSizeBase: [300, 400, 500]
+    readonly property int chatPaneMinSize: chatPaneMinSizeBase[p[scale]]
+    readonly property int doublePaneMinSize: sidePaneMinSize + chatPaneMinSize

    property ThemeType dark: CwtchDark{}
    property ThemeType light: CwtchLight{}
    property ThemeType theme: gcd.theme == "dark" ? dark : light

    // 0-4. replace gcd.themeScale with whatever your app has!
-    property int scale: gcd.themeScale < 0.8 ? 0 : (gcd.themeScale < 1.2 ? 2 : 4)
-
-    onScaleChanged: console.log("new scale:", scale)
+    property int scale: gcd.themeScaleNew

 	// magnification system: all size-sets should generally respect these semantics:
 	//
@ -137,27 +127,34 @@ Item {
 	// section: PADDING //
 	//////////////////////

-    readonly property variant paddingMinimalBase: [0, 1, 2]
-    readonly property int     paddingMinimal: paddingMinimalBase[p[scale]]
-    readonly property variant paddingStandardBase: [2, 6, 10]
+    readonly property variant paddingMinimalBase: [1, 4, 6]
+	readonly property int     paddingMinimal: paddingMinimalBase[p[scale]]
+	readonly property variant paddingSmallBase: [3, 10, 15]
+	readonly property int     paddingSmall: paddingSmallBase[p[scale]]
+    readonly property variant paddingStandardBase: [8, 20, 30]
    readonly property int     paddingStandard: paddingStandardBase[p[scale]]
-    readonly property variant paddingLargeBase: [4, 10, 15]
+    readonly property variant paddingLargeBase: [10, 30, 40]
    readonly property int     paddingLarge: paddingLargeBase[p[scale]]

-    readonly property variant paddingClickTargetBase: gcd.os == "android" ? [3, 10, 15] : [1, 4, 8]
+    readonly property variant paddingClickTargetBase: gcd.os == "android" ? [10, 40, 100] : [3, 10, 15]
    readonly property int     paddingClickTarget: paddingClickTargetBase[p[scale]]

 	////////////////////////
 	// section: TEXT SIZE //
 	////////////////////////

-    readonly property variant textSmallPtBase: [8, 10, 12]
+    readonly property variant textSmallPtBase: [8, 12, 16]
    readonly property int     textSmallPt: textSmallPtBase[t[scale]]
-    readonly property variant textMediumPtBase: [10, 12, 14]
+    readonly property variant textMediumPtBase: [10, 16, 24]
    readonly property int     textMediumPt: textMediumPtBase[t[scale]]
-    readonly property variant textLargePtBase: [16, 20, 24]
+    readonly property variant textLargePtBase: [16, 24, 32]
    readonly property int     textLargePt: textLargePtBase[t[scale]]

+	readonly property variant textSubHeaderPtBase: [12, 18, 26]
+	readonly property int     textSubHeaderPt: textHeaderPtBase[t[scale]]
+	readonly property variant textHeaderPtBase: [16, 24, 32]
+	readonly property int     textHeaderPt: textHeaderPtBase[t[scale]]
+
    /////////////////////////////////
    // section: ELEMENT DIMENSIONS //
    /////////////////////////////////
@ -168,4 +165,24 @@ Item {
    readonly property int uiIconSizeM: uiIconSizeMBase[p[scale]]
    readonly property variant uiIconSizeLBase: [32, 48, 60]
    readonly property int uiIconSizeL: uiIconSizeLBase[p[scale]]
+
+    readonly property variant uiEmojiSizeBase: [24, 32, 48]
+    readonly property int uiEmojiSize: uiEmojiSizeBase[p[scale]]
+    readonly property variant contactPortraitSizeBase: [60, 72, 84]
+    readonly property int contactPortraitSize: contactPortraitSizeBase[p[scale]]
+
+    ///////////////////////////////////////
+    // section: OLD FONT SIZES REFERENCE //
+    ///////////////////////////////////////
+
+    // old size (usually given to font.pixelSize but occasionally to font.pointSize) -> new size
+    readonly property int badgeTextSize: 12
+    readonly property int statusTextSize: 12
+    // readonly property int chatMetaTextSize: 15 -> textSmallPt
+    // readonly property int secondaryTextSize: 20 -> textSmallPt
+    readonly property int chatSize: textMediumPt //was:20
+    // readonly property int primaryTextSize: 25 -> textMediumPt
+    readonly property int tabSize: textMediumPt //was:25
+    // readonly property int subHeaderSize: 35 -> textSubHeaderPt
+    // readonly property int headerSize: 50 -> textHeaderPt
 }