diff --git a/Collapser.qml b/Collapser.qml
new file mode 100644
index 0000000..baa7cac
--- /dev/null
+++ 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
+ }
+ }
+}
\ No newline at end of file
diff --git a/Column.qml b/Column.qml
new file mode 100644
index 0000000..ea84a57
--- /dev/null
+++ b/Column.qml
@@ -0,0 +1,9 @@
+import QtQuick 2.13
+
+import "." as Opaque
+import "theme"
+
+Column {
+ padding: Theme.paddingStandard
+ spacing: Theme.paddingSmall
+}
\ No newline at end of file
diff --git a/ComboBox.qml b/ComboBox.qml
index 36e406f..b02dc74 100644
--- 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
diff --git a/EmojiDrawer.qml b/EmojiDrawer.qml
index 6436bec..c511e00 100644
--- 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 {
diff --git a/HLine.qml b/HLine.qml
index 12a6741..1922e2e 100644
--- 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"
diff --git a/ScalingLabel.qml b/Label.qml
similarity index 50%
rename from ScalingLabel.qml
rename to Label.qml
index fd03ec1..0405367 100644
--- a/ScalingLabel.qml
+++ b/Label.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" : ""
diff --git a/Portrait.qml b/Portrait.qml
index ea8dbf0..2d4e3fa 100644
--- 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
diff --git a/PortraitRow.qml b/PortraitRow.qml
index 3ef63a0..6e1e4e2 100644
--- 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
}
}
diff --git a/RadioButton.qml b/RadioButton.qml
index 2cf9ff2..13e754c 100644
--- 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
}
diff --git a/Setting.qml b/Setting.qml
index 40b093f..21a9446 100644
--- 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
+ }
}
diff --git a/TabBar.qml b/TabBar.qml
index 7f8cb44..c7aedb2 100644
--- 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
diff --git a/ToggleSwitch.qml b/ToggleSwitch.qml
index ccbe73b..7e9274a 100644
--- 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()}
}
diff --git a/Toolbar.qml b/Toolbar.qml
index 1f558ff..95a43cc 100644
--- 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
}
diff --git a/fonts/MutantStandard.js b/fonts/MutantStandard.js
index 11f587c..f86196f 100644
--- 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];
diff --git a/qml.qrc b/qml.qrc
index 2424e61..59d0300 100644
--- a/qml.qrc
+++ b/qml.qrc
@@ -18,7 +18,7 @@
./Icon.qml
./TextField.qml
./PortraitRow.qml
- ./ScalingLabel.qml
+ ./Label.qml
./UnderlineTextField.qml
./EmojiDrawer.qml
./ToggleSwitch.qml
@@ -37,6 +37,5 @@
i18n/translation_es.qm
i18n/translation_it.qm
i18n/translation_pt.qm
-
diff --git a/theme/Theme.qml b/theme/Theme.qml
index ba40c9a..a4d3110 100644
--- 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
}