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"

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
+    font.pointSize: size
-    wrapMode: Text.WordWrap
+    wrapMode: multiline ? Text.WordWrap : Text.NoWrap
+    elide: Text.ElideRight
     color: Theme.mainTextColor
     textFormat: Text.PlainText
-    property real size: 12
+    property bool header: false
-    property bool bold: 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
+    height: Theme.contactPortraitSize
-    property int baseWidth:  size * gcd.themeScale
+    width: Theme.contactPortraitSize
-    height: size * gcd.themeScale
+    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.right: extraMeta.left
-            anchors.leftMargin: 4 * logscale
+            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
+                header: true
-                font.family: Fonts.applicationFontExtraBold.name
-                font.styleName: "ExtraBold"
                 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 {
+    contentItem: Opaque.Label {
-        size: Theme.chatMetaTextSize
+        size: Theme.textMediumPt
         color: textColor
         text: control.text
-        font.family: Fonts.applicationFontRegular.name
+        bold: true
-        font.styleName: "Bold"
         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: Theme.paddingSmall
-    spacing: 10
     property bool inline: true
     property bool last: false
 
@@ -31,31 +30,28 @@ Column {
     Grid {
         id: container
         columns: inline ? 2 : 1
-        spacing: 10 * gcd.themeScale
+        spacing: Theme.paddingStandard
-        padding: 10 * gcd.themeScale
+        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
+                header: true
-                size: Theme.secondaryTextSize * gcd.themeScale
-                font.weight: Font.Bold
                 visible: text != ""
             }
 
 
-            Opaque.ScalingLabel {
+            Opaque.Label {
                 id: settingDescriptionLabel
                 width: container.gridWidth
-                color: Theme.mainTextColor
+                size: Theme.textSmallPt
-                size: Theme.chatMetaTextSize * gcd.themeScale
                 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
+		size: Theme.textSmallPt
-		font.pixelSize: Theme.chatMetaTextSize * gcd.themeScale
+		bold: true
-		font.weight: Font.Bold
 
 		// 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
+// ToggleSwtch implements a stylized toggle switch.
-// perform any additional operations needed to define the behavior of the 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
+        width: toolbar.iconSize
-        height: 30 * gcd.themeScale
+        height: toolbar.iconSize
 
         onClicked: { leftMenu() }
     }
@@ -54,33 +56,29 @@ Rectangle { // Global Toolbar
 
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
-        width: 30 * gcd.themeScale
+        width: toolbar.iconSize
-        height: 30 * gcd.themeScale
+        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"
+	}
 
-
+	TextMetrics {
-    Rectangle {
+		id: paneTitleTextMetric
-        id: paneArea
+		text: paneTitle.text
-        anchors.right: parent.right
+		font: paneTitle.font
-
+	}
-       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"
-        }
-    }
 
     Icon {
         id: btnRightMenu
@@ -90,15 +88,14 @@ Rectangle { // Global Toolbar
         visible: false
         anchors.verticalCenter: parent.verticalCenter
         anchors.right: parent.right
-        width: 30
+        width: toolbar.iconSize
-        height: 30
+        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];

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>

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 variant sidePaneMinSizeBase: [200, 400, 600]
-    readonly property int doublePaneMinSize: 1400
+    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)
+    property int scale: gcd.themeScaleNew
-
-    onScaleChanged: console.log("new scale:", scale)
 
 	// 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 variant paddingMinimalBase: [1, 4, 6]
-    readonly property int     paddingMinimal: paddingMinimalBase[p[scale]]
+	readonly property int     paddingMinimal: paddingMinimalBase[p[scale]]
-    readonly property variant paddingStandardBase: [2, 6, 10]
+	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
 }