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

Reviewed-on: #36

all comments appear addressed :)

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
+		}
+	}
+}

Column.qml

@@ -0,0 +1,9 @@
+import QtQuick 2.13
+
+import "." as Opaque
+import "theme"
+
+Column {
+	padding: Theme.paddingStandard
+	spacing: Theme.paddingSmall
+}

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

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 {

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"

LICENSE

@@ -0,0 +1,9 @@
+All code in this repository, unless otherwise indicated, is distributed under the following license:
+
+Copyright 2020 Open Privacy Research Society
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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" : ""

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
 

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
         }
     }

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
     }
 

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
+    }
 }

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

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()}
 }
 
 

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
     }
 

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];

i18n/translation_de.ts

@@ -4,98 +4,99 @@
 <context>
     <name>EmojiDrawer</name>
     <message>
-        <location filename="../EmojiDrawer.qml" line="64"/>
+        <location filename="../EmojiDrawer.qml" line="69"/>
+        <location filename="../EmojiDrawer.qml" line="95"/>
         <source>search</source>
         <extracomment>Search...</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="76"/>
+        <location filename="../EmojiDrawer.qml" line="112"/>
         <source>emojicat-expressions</source>
         <extracomment>Expressions</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="84"/>
+        <location filename="../EmojiDrawer.qml" line="121"/>
         <source>emojicat-activities</source>
         <extracomment>Activities</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="92"/>
+        <location filename="../EmojiDrawer.qml" line="129"/>
         <source>emojicat-food</source>
         <extracomment>Food, drink &amp; herbs</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="100"/>
+        <location filename="../EmojiDrawer.qml" line="137"/>
         <source>emojicat-gender</source>
         <extracomment>Gender, relationships &amp; sexuality</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="108"/>
+        <location filename="../EmojiDrawer.qml" line="145"/>
         <source>emojicat-nature</source>
         <extracomment>Nature and effects</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="116"/>
+        <location filename="../EmojiDrawer.qml" line="153"/>
         <source>emojicat-objects</source>
         <extracomment>Objects</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="124"/>
+        <location filename="../EmojiDrawer.qml" line="161"/>
         <source>emojicat-people</source>
         <extracomment>People and animals</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="132"/>
+        <location filename="../EmojiDrawer.qml" line="169"/>
         <source>emojicat-symbols</source>
         <extracomment>Symbols</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="140"/>
+        <location filename="../EmojiDrawer.qml" line="177"/>
         <source>emojicat-travel</source>
         <extracomment>Travel &amp; places</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="148"/>
+        <location filename="../EmojiDrawer.qml" line="185"/>
         <source>emojicat-misc</source>
         <extracomment>Miscellaneous</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="190"/>
+        <location filename="../EmojiDrawer.qml" line="225"/>
         <source>cycle-cats-android</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="190"/>
+        <location filename="../EmojiDrawer.qml" line="225"/>
         <source>cycle-cats-desktop</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="225"/>
+        <location filename="../EmojiDrawer.qml" line="260"/>
         <source>cycle-morphs-android</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="225"/>
+        <location filename="../EmojiDrawer.qml" line="260"/>
         <source>cycle-morphs-desktop</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="258"/>
+        <location filename="../EmojiDrawer.qml" line="293"/>
         <source>cycle-colours-android</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="258"/>
+        <location filename="../EmojiDrawer.qml" line="293"/>
         <source>cycle-colours-desktop</source>
         <translation type="unfinished"></translation>
     </message>

i18n/translation_en.ts

@@ -1,106 +1,89 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE TS>
-<TS version="2.1" language="en_US">
+<TS version="2.1" language="en">
 <context>
     <name>EmojiDrawer</name>
     <message>
-        <location filename="../EmojiDrawer.qml" line="190"/>
         <source>cycle-cats-android</source>
         <translation>Click to cycle category.
         Long-press to reset.</translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="190"/>
         <source>cycle-cats-desktop</source>
         <translation>Click to cycle category.
         Right-click to reset.</translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="225"/>
         <source>cycle-morphs-android</source>
         <translation>Click to cycle morphs.
         Long-press to reset.</translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="225"/>
         <source>cycle-morphs-desktop</source>
         <translation>Click to cycle morphs.
         Right-click to reset.</translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="258"/>
         <source>cycle-colours-android</source>
         <translation>Click to cycle colours.
         Long-press to reset.</translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="258"/>
         <source>cycle-colours-desktop</source>
         <translation>Click to cycle colours.
         Right-click to reset.</translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="64"/>
         <source>search</source>
         <extracomment>Search...</extracomment>
         <translation>Search...</translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="76"/>
         <source>emojicat-expressions</source>
         <extracomment>Expressions</extracomment>
         <translation>Expressions</translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="84"/>
         <source>emojicat-activities</source>
         <extracomment>Activities</extracomment>
         <translation>Activities</translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="92"/>
         <source>emojicat-food</source>
         <extracomment>Food, drink &amp; herbs</extracomment>
         <translation>Food, drink &amp; herbs</translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="100"/>
         <source>emojicat-gender</source>
         <extracomment>Gender, relationships &amp; sexuality</extracomment>
         <translation>Gender, relationships &amp; sexuality</translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="108"/>
         <source>emojicat-nature</source>
         <extracomment>Nature and effects</extracomment>
         <translation>Nature and effects</translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="116"/>
         <source>emojicat-objects</source>
         <extracomment>Objects</extracomment>
         <translation>Objects</translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="124"/>
         <source>emojicat-people</source>
         <extracomment>People and animals</extracomment>
         <translation>People and animals</translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="132"/>
         <source>emojicat-symbols</source>
         <extracomment>Symbols</extracomment>
         <translation>Symbols</translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="140"/>
         <source>emojicat-travel</source>
         <extracomment>Travel &amp; places</extracomment>
         <translation>Travel &amp; places</translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="148"/>
         <source>emojicat-misc</source>
         <extracomment>Miscellaneous</extracomment>
         <translation>Miscellaneous</translation>

i18n/translation_es.ts

@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE TS>
+<TS version="2.1" language="es">
+<context>
+    <name>EmojiDrawer</name>
+    <message>
+        <source>cycle-cats-android</source>
+        <translation>Click para cambiar categoría. Mantenga pulsado para reiniciar.</translation>
+    </message>
+    <message>
+        <source>cycle-cats-desktop</source>
+        <translation>Click para cambiar categoría. Click derecho para reiniciar.</translation>
+    </message>
+    <message>
+        <source>cycle-morphs-android</source>
+        <translation>Click para cambiar transformaciones. Mantenga pulsado para reiniciar.</translation>
+    </message>
+    <message>
+        <source>cycle-morphs-desktop</source>
+        <translation>Click para cambiar transformaciones. Click derecho para reiniciar.</translation>
+    </message>
+    <message>
+        <source>cycle-colours-android</source>
+        <translation>Click para cambiar de colores. Mantenga pulsado para reiniciar.</translation>
+    </message>
+    <message>
+        <source>cycle-colours-desktop</source>
+        <translation>Click para cambiar colores. Click derecho para reiniciar.</translation>
+    </message>
+    <message>
+        <source>search</source>
+        <extracomment>Search...</extracomment>
+        <translation>Búsqueda...</translation>
+    </message>
+    <message>
+        <source>emojicat-expressions</source>
+        <extracomment>Expressions</extracomment>
+        <translation>Expresiones</translation>
+    </message>
+    <message>
+        <source>emojicat-activities</source>
+        <extracomment>Activities</extracomment>
+        <translation>Actividades</translation>
+    </message>
+    <message>
+        <source>emojicat-food</source>
+        <extracomment>Food, drink &amp; herbs</extracomment>
+        <translation>Alimentos, bebidas y hierbas</translation>
+    </message>
+    <message>
+        <source>emojicat-gender</source>
+        <extracomment>Gender, relationships &amp; sexuality</extracomment>
+        <translation>Género, relaciones y sexualidad</translation>
+    </message>
+    <message>
+        <source>emojicat-nature</source>
+        <extracomment>Nature and effects</extracomment>
+        <translation>Naturaleza y efectos</translation>
+    </message>
+    <message>
+        <source>emojicat-objects</source>
+        <extracomment>Objects</extracomment>
+        <translation>Objetos</translation>
+    </message>
+    <message>
+        <source>emojicat-people</source>
+        <extracomment>People and animals</extracomment>
+        <translation>Personas y animales</translation>
+    </message>
+    <message>
+        <source>emojicat-symbols</source>
+        <extracomment>Symbols</extracomment>
+        <translation>Símbolos</translation>
+    </message>
+    <message>
+        <source>emojicat-travel</source>
+        <extracomment>Travel &amp; places</extracomment>
+        <translation>Viajes y lugares</translation>
+    </message>
+    <message>
+        <source>emojicat-misc</source>
+        <extracomment>Miscellaneous</extracomment>
+        <translation>Miscelánea</translation>
+    </message>
+</context>
+</TS>

i18n/translation_fr.ts

@@ -4,98 +4,99 @@
 <context>
     <name>EmojiDrawer</name>
     <message>
-        <location filename="../EmojiDrawer.qml" line="64"/>
+        <location filename="../EmojiDrawer.qml" line="69"/>
+        <location filename="../EmojiDrawer.qml" line="95"/>
         <source>search</source>
         <extracomment>Search...</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="76"/>
+        <location filename="../EmojiDrawer.qml" line="112"/>
         <source>emojicat-expressions</source>
         <extracomment>Expressions</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="84"/>
+        <location filename="../EmojiDrawer.qml" line="121"/>
         <source>emojicat-activities</source>
         <extracomment>Activities</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="92"/>
+        <location filename="../EmojiDrawer.qml" line="129"/>
         <source>emojicat-food</source>
         <extracomment>Food, drink &amp; herbs</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="100"/>
+        <location filename="../EmojiDrawer.qml" line="137"/>
         <source>emojicat-gender</source>
         <extracomment>Gender, relationships &amp; sexuality</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="108"/>
+        <location filename="../EmojiDrawer.qml" line="145"/>
         <source>emojicat-nature</source>
         <extracomment>Nature and effects</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="116"/>
+        <location filename="../EmojiDrawer.qml" line="153"/>
         <source>emojicat-objects</source>
         <extracomment>Objects</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="124"/>
+        <location filename="../EmojiDrawer.qml" line="161"/>
         <source>emojicat-people</source>
         <extracomment>People and animals</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="132"/>
+        <location filename="../EmojiDrawer.qml" line="169"/>
         <source>emojicat-symbols</source>
         <extracomment>Symbols</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="140"/>
+        <location filename="../EmojiDrawer.qml" line="177"/>
         <source>emojicat-travel</source>
         <extracomment>Travel &amp; places</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="148"/>
+        <location filename="../EmojiDrawer.qml" line="185"/>
         <source>emojicat-misc</source>
         <extracomment>Miscellaneous</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="190"/>
+        <location filename="../EmojiDrawer.qml" line="225"/>
         <source>cycle-cats-android</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="190"/>
+        <location filename="../EmojiDrawer.qml" line="225"/>
         <source>cycle-cats-desktop</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="225"/>
+        <location filename="../EmojiDrawer.qml" line="260"/>
         <source>cycle-morphs-android</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="225"/>
+        <location filename="../EmojiDrawer.qml" line="260"/>
         <source>cycle-morphs-desktop</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="258"/>
+        <location filename="../EmojiDrawer.qml" line="293"/>
         <source>cycle-colours-android</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="258"/>
+        <location filename="../EmojiDrawer.qml" line="293"/>
         <source>cycle-colours-desktop</source>
         <translation type="unfinished"></translation>
     </message>

i18n/translation_it.ts

@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE TS>
+<TS version="2.1" language="it">
+<context>
+    <name>EmojiDrawer</name>
+    <message>
+        <source>cycle-cats-android</source>
+        <translation>Fare clic per scorrere le categorie.
+Pressione lunga per resettare.</translation>
+    </message>
+    <message>
+        <source>cycle-cats-desktop</source>
+        <translation>Fare clic per scorrere le categorie.
+Cliccare con il tasto destro per resettare.</translation>
+    </message>
+    <message>
+        <source>cycle-morphs-android</source>
+        <translation>Fare clic per scorrere i morph.
+Pressione lunga per resettare.</translation>
+    </message>
+    <message>
+        <source>cycle-morphs-desktop</source>
+        <translation>Fare clic per scorrere i morph.
+Cliccare con il tasto destro per resettare.</translation>
+    </message>
+    <message>
+        <source>cycle-colours-android</source>
+        <translation>Fare clic per scorrere i colori.
+Pressione lunga per resettare.</translation>
+    </message>
+    <message>
+        <source>cycle-colours-desktop</source>
+        <translation>Fare clic per scorrere i colori.
+Cliccare con il tasto destro per resettare.</translation>
+    </message>
+    <message>
+        <source>search</source>
+        <extracomment>Search...</extracomment>
+        <translation>Ricerca...</translation>
+    </message>
+    <message>
+        <source>emojicat-expressions</source>
+        <extracomment>Expressions</extracomment>
+        <translation>Espressioni</translation>
+    </message>
+    <message>
+        <source>emojicat-activities</source>
+        <extracomment>Activities</extracomment>
+        <translation>Attività</translation>
+    </message>
+    <message>
+        <source>emojicat-food</source>
+        <extracomment>Food, drink &amp; herbs</extracomment>
+        <translation>Cibo, bevande ed erbe aromatiche</translation>
+    </message>
+    <message>
+        <source>emojicat-gender</source>
+        <extracomment>Gender, relationships &amp; sexuality</extracomment>
+        <translation>Genere, relazioni e sessualità</translation>
+    </message>
+    <message>
+        <source>emojicat-nature</source>
+        <extracomment>Nature and effects</extracomment>
+        <translation>Natura ed effetti</translation>
+    </message>
+    <message>
+        <source>emojicat-objects</source>
+        <extracomment>Objects</extracomment>
+        <translation>Oggetti</translation>
+    </message>
+    <message>
+        <source>emojicat-people</source>
+        <extracomment>People and animals</extracomment>
+        <translation>Persone e animali</translation>
+    </message>
+    <message>
+        <source>emojicat-symbols</source>
+        <extracomment>Symbols</extracomment>
+        <translation>Simboli</translation>
+    </message>
+    <message>
+        <source>emojicat-travel</source>
+        <extracomment>Travel &amp; places</extracomment>
+        <translation>Viaggi e luoghi</translation>
+    </message>
+    <message>
+        <source>emojicat-misc</source>
+        <extracomment>Miscellaneous</extracomment>
+        <translation>Miscellanea</translation>
+    </message>
+</context>
+</TS>

i18n/translation_pt.ts

@@ -4,98 +4,99 @@
 <context>
     <name>EmojiDrawer</name>
     <message>
-        <location filename="../EmojiDrawer.qml" line="64"/>
+        <location filename="../EmojiDrawer.qml" line="69"/>
+        <location filename="../EmojiDrawer.qml" line="95"/>
         <source>search</source>
         <extracomment>Search...</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="76"/>
+        <location filename="../EmojiDrawer.qml" line="112"/>
         <source>emojicat-expressions</source>
         <extracomment>Expressions</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="84"/>
+        <location filename="../EmojiDrawer.qml" line="121"/>
         <source>emojicat-activities</source>
         <extracomment>Activities</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="92"/>
+        <location filename="../EmojiDrawer.qml" line="129"/>
         <source>emojicat-food</source>
         <extracomment>Food, drink &amp; herbs</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="100"/>
+        <location filename="../EmojiDrawer.qml" line="137"/>
         <source>emojicat-gender</source>
         <extracomment>Gender, relationships &amp; sexuality</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="108"/>
+        <location filename="../EmojiDrawer.qml" line="145"/>
         <source>emojicat-nature</source>
         <extracomment>Nature and effects</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="116"/>
+        <location filename="../EmojiDrawer.qml" line="153"/>
         <source>emojicat-objects</source>
         <extracomment>Objects</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="124"/>
+        <location filename="../EmojiDrawer.qml" line="161"/>
         <source>emojicat-people</source>
         <extracomment>People and animals</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="132"/>
+        <location filename="../EmojiDrawer.qml" line="169"/>
         <source>emojicat-symbols</source>
         <extracomment>Symbols</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="140"/>
+        <location filename="../EmojiDrawer.qml" line="177"/>
         <source>emojicat-travel</source>
         <extracomment>Travel &amp; places</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="148"/>
+        <location filename="../EmojiDrawer.qml" line="185"/>
         <source>emojicat-misc</source>
         <extracomment>Miscellaneous</extracomment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="190"/>
+        <location filename="../EmojiDrawer.qml" line="225"/>
         <source>cycle-cats-android</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="190"/>
+        <location filename="../EmojiDrawer.qml" line="225"/>
         <source>cycle-cats-desktop</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="225"/>
+        <location filename="../EmojiDrawer.qml" line="260"/>
         <source>cycle-morphs-android</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="225"/>
+        <location filename="../EmojiDrawer.qml" line="260"/>
         <source>cycle-morphs-desktop</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="258"/>
+        <location filename="../EmojiDrawer.qml" line="293"/>
         <source>cycle-colours-android</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../EmojiDrawer.qml" line="258"/>
+        <location filename="../EmojiDrawer.qml" line="293"/>
         <source>cycle-colours-desktop</source>
         <translation type="unfinished"></translation>
     </message>

opaque.pro

@@ -20,6 +20,8 @@ RESOURCES += qml.qrc
 
 TRANSLATIONS =  i18n/translation_en.ts \
 		i18n/translation_de.ts \
+		i18n/translation_es.ts \
+		i18n/translation_it.ts \
 		i18n/translation_pt.ts \
 		i18n/translation_fr.ts
 

qml.qrc

@@ -1,35 +1,41 @@
 <RCC>
     <qresource prefix="/">
-<file>./HLine.qml</file>
-<file>./styles/CwtchTextFieldStyle.qml</file>
-<file>./styles/CwtchComboBoxStyle.qml</file>
-<file>./styles/CwtchTextAreaStyle.qml</file>
-<file>./styles/CwtchExpandingButton.qml</file>
-<file>./styles/CwtchProgress.qml</file>
-<file>./ButtonTextField.qml</file>
-<file>./IconTextField.qml</file>
-<file>./EllipsisLabel.qml</file>
-<file>./Badge.qml</file>
-<file>./controls/Loader.qml</file>
-<file>./controls/ImageButton.qml</file>
-<file>./controls/FlagButton.qml</file>
-<file>./controls/Variables.qml</file>
-<file>./FontAwesome.qml</file>
-<file>./Icon.qml</file>
-<file>./TextField.qml</file>
-<file>./PortraitRow.qml</file>
-<file>./ScalingLabel.qml</file>
-<file>./UnderlineTextField.qml</file>
-<file>./EmojiDrawer.qml</file>
-<file>./ToggleSwitch.qml</file>
-<file>./Button.qml</file>
-<file>./theme/ThemeType.qml</file>
-<file>./theme/Theme.qml</file>
-<file>./theme/CwtchDark.qml</file>
-<file>./theme/CwtchLight.qml</file>
-<file>./Portrait.qml</file>
-<file>./Toolbar.qml</file>
-<file>./fonts/Fonts.qml</file>
-<file>./RadioButton.qml</file>
+	<file>./HLine.qml</file>
+	<file>./styles/CwtchTextFieldStyle.qml</file>
+	<file>./styles/CwtchComboBoxStyle.qml</file>
+	<file>./styles/CwtchTextAreaStyle.qml</file>
+	<file>./styles/CwtchExpandingButton.qml</file>
+	<file>./styles/CwtchProgress.qml</file>
+	<file>./ButtonTextField.qml</file>
+	<file>./IconTextField.qml</file>
+	<file>./EllipsisLabel.qml</file>
+	<file>./Badge.qml</file>
+	<file>./controls/Loader.qml</file>
+	<file>./controls/ImageButton.qml</file>
+	<file>./controls/FlagButton.qml</file>
+	<file>./controls/Variables.qml</file>
+	<file>./FontAwesome.qml</file>
+	<file>./Icon.qml</file>
+	<file>./TextField.qml</file>
+	<file>./PortraitRow.qml</file>
+	<file>./Label.qml</file>
+	<file>./UnderlineTextField.qml</file>
+	<file>./EmojiDrawer.qml</file>
+	<file>./ToggleSwitch.qml</file>
+	<file>./Button.qml</file>
+	<file>./theme/ThemeType.qml</file>
+	<file>./theme/Theme.qml</file>
+	<file>./theme/CwtchDark.qml</file>
+	<file>./theme/CwtchLight.qml</file>
+	<file>./Portrait.qml</file>
+	<file>./Toolbar.qml</file>
+	<file>./fonts/Fonts.qml</file>
+	<file>./RadioButton.qml</file>
+	<file>i18n/translation_de.qm</file>
+	<file>i18n/translation_en.qm</file>
+	<file>i18n/translation_fr.qm</file>
+	<file>i18n/translation_es.qm</file>
+	<file>i18n/translation_it.qm</file>
+	<file>i18n/translation_pt.qm</file>
     </qresource>
 </RCC>

theme/Theme.qml

@@ -94,22 +94,95 @@ 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.themeScaleNew
+
+	// magnification system: all size-sets should generally respect these semantics:
+	//
+	//            scale
+	//          0 1 2 3 4
+	// padding  S M M M L
+	// text     S S M L L
+	//
+	// use the syntax "propertyName: propertyNameBase[p[scale]]" for padding that
+	// has S/M/L granularity (and likewise t[scale] for text)
+	// use the syntax "propertyName: propertyNameBase[scale]" for things that you
+	// would prefer have 0/1/2/3/4 granularity.
+
+	readonly property variant p: [0, 1, 1, 1, 2]
+	readonly property variant t: [0, 0, 1, 2, 2]
+
+	//////////////////////
+	// section: PADDING //
+	//////////////////////
+
+    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: [10, 30, 40]
+    readonly property int     paddingLarge: paddingLargeBase[p[scale]]
+
+    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, 12, 16]
+    readonly property int     textSmallPt: textSmallPtBase[t[scale]]
+    readonly property variant textMediumPtBase: [10, 16, 24]
+    readonly property int     textMediumPt: textMediumPtBase[t[scale]]
+    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 //
+    /////////////////////////////////
+
+    readonly property variant uiIconSizeSBase: [8, 16, 24]
+    readonly property int uiIconSizeS: uiIconSizeSBase[p[scale]]
+    readonly property variant uiIconSizeMBase: [24, 32, 48]
+    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
 }