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

Reviewed-on: #36 all comments appear addressed :)
addressing comments on #36
2020-12-16 17:48:48 -08:00 · 2020-12-16 17:34:15 -08:00 · 2020-12-14 17:19:50 -08:00 · 2020-12-14 17:16:49 -08:00 · 2020-12-11 14:17:36 -08:00 · 2020-12-11 14:04:26 -08:00
40 changed files with 749 additions and 1008 deletions
--- a/Button.qml
+++ b/Button.qml
@ -4,7 +4,6 @@ import QtQuick.Controls 2.4
 import QtQuick.Controls.Material 2.0
 import QtQuick.Layouts 1.3

-import "fonts/Twemoji.js" as T
 import "theme"
 import "fonts"

@ -40,12 +39,23 @@ Rectangle {

        Image {
            id: ico
-            source: icon!="" ? gcd.assetPath + "fontawesome/"+icon+".svg" : "";
+            source: icon!="" ? gcd.assetPath + "core/"+icon+".webp" : "";
            visible: icon != ""
            height: button.height / 2
            sourceSize.height: button.height / 2
+
+            ColorOverlay{
+                id: iconColorOverlay
+                color: textColor
+                anchors.fill: ico
+                source: ico
+                antialiasing: true
+                smooth: true
+            }
        }

+
+
        Label {
            id: buttonText
            font.family: Fonts.applicationFontRegular.name
--- a/ButtonTextField.qml
+++ b/ButtonTextField.qml
@ -14,6 +14,9 @@ TextField {
    font.pixelSize: Theme.secondaryTextSize * gcd.themeScale
    width: parent.width - 20

+    // IMPORTANT: Setting a dynamic height on the internal button widget caused it to crash on Android when
+    // resized (smaller), so we set an explicit height on TextField which seems to resolve the issue.
+    height: font.pixelSize + 20
    property string icon
    property string button_text
    signal clicked
--- a/Collapser.qml
+++ b/Collapser.qml
@ -0,0 +1,31 @@
+import QtQuick 2.13
+
+import "." as Opaque
+import "theme"
+
+Opaque.Column {
+	id: root
+
+	//: Show
+	readonly property string strShow: qsTr("collapser-show")
+	//: Hide
+	readonly property string strHide: qsTr("collapser-hide")
+
+	property string textShow: strShow
+	property string textHide: strHide
+	property bool expanded: false
+
+	height: expanded ? childrenRect.height + 2 * root.padding : lblTitle.height + root.padding + root.spacing
+	Behavior on height { PropertyAnimation {} }
+	clip: true
+
+	Opaque.Label {
+		id: lblTitle
+		text: root.expanded ? root.textHide + " ▲" : root.textShow + " ▼"
+		header: true
+		MouseArea {
+			anchors.fill: parent
+			onClicked: root.expanded = !root.expanded
+		}
+	}
+}
--- a/Column.qml
+++ b/Column.qml
@ -0,0 +1,9 @@
+import QtQuick 2.13
+
+import "." as Opaque
+import "theme"
+
+Column {
+	padding: Theme.paddingStandard
+	spacing: Theme.paddingSmall
+}
--- a/ComboBox.qml
+++ b/ComboBox.qml
@ -5,18 +5,18 @@ import QtGraphicalEffects 1.12
 import "theme"


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

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

        text: control.model.get(control.currentIndex)["text"]
        font: control.font
@ -62,7 +62,7 @@ ComboBox {

        Icon {
            iconColor: Theme.toolbarIconColor
-            source: gcd.assetPath + "core/chevron_left-24px.svg"
+            source: gcd.assetPath + "core/chevron_left-24px.webp"

            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
@ -78,17 +78,17 @@ ComboBox {
    delegate: ItemDelegate {
        width: control.width
        highlighted: control.highlightedIndex === index
-        height: ciText.height + (4 * gcd.themeScale)
+        height: ciText.height + 2 * Theme.paddingMinimal

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

                text: model["text"] //control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
                color: Theme.mainTextColor
--- a/EllipsisLabel.qml
+++ b/EllipsisLabel.qml
@ -1,58 +0,0 @@
-import QtQuick 2.7
-import QtQuick.Controls 2.4
-import QtQuick.Controls.Material 2.0
-import QtQuick.Layouts 1.3
-import CustomQmlTypes 1.0
-import "." as Widgets
-import "theme"
-
-
-// Needs the parent to have an onWidthChanged that calls .textResize()
-Item {
-    property string text
-
-    property alias color: label.color
-    property alias size: label.font.pixelSize
-    property alias weight: label.font.weight
-    property alias strikeout: label.font.strikeout
-    property alias font: label.font
-    property alias topPadding: label.topPadding
-    property alias leftPadding: label.leftPadding
-    property int extraPadding: 0
-
-    property Item container: parent
-
-    height: textMetric.height
-    width: textMetric.width + 10
-    anchors.leftMargin: 10
-
-    Label {
-        id: label
-        textFormat: Text.PlainText
-
-        elide: Text.ElideRight
-        text: textMetric.text
-    }
-
-    TextMetrics {
-        id: textMetric
-        text: text
-        font: label.font
-    }
-
-    onTextChanged: {
-        textResize()
-    }
-
-    function textResize() {
-        textMetric.text = text
-        var i = 2
-        var containerWidth = container != null ? container.width : 50
-        // - 30 for padding
-        while (textMetric.width > containerWidth - ((30 + extraPadding) * gcd.themeScale) && textMetric.width > 50) {
-            textMetric.text = text.slice(0, text.length - (i * 3)) + "..."
-            i++
-        }
-    }
-
-}
--- a/EmojiDrawer.qml
+++ b/EmojiDrawer.qml
@ -14,11 +14,18 @@ Item {
    id: root
    implicitHeight: 0
    height: implicitHeight
-    property int size: 24
+    property int size: 32
    property int requestedHeight: size * 8
    property string morph: "clw"
    property string color: "v1"
-    property bool narrowMode: width < (txtSearch.width + root.size * 14 + btnX.width)
+    // can't bind to the width of the category bar when narrow=true, so we have to calculate it ourselves
+    // narrowMode when (width of emoji drawer) < (category icon size + padding)
+    //                                           * (number of categories, minus one which is a VLine)
+    //                                           - padding (no spacing at the end)
+    //                                           + 2 * (left/right margin size)
+    property bool narrowMode: width < (root.size + categoryRow.spacing) * (categoryRow.children.length - 1) - categoryRow.spacing + categoryContainer.anchors.margins * 2
+    property bool searchMode: false
+    property string catimgpath: gcd.assetPath + "emojidrawer/" + (gcd.theme != "dark" ? "lightmode_" : "darkmode_")

    signal picked(string shortcode)
    signal slideopen()
@ -27,6 +34,7 @@ Item {

    Rectangle {
        color: Theme.backgroundPaneColor
+        border.color: Theme.dividerColor
        anchors.fill: parent
    }

@ -46,124 +54,149 @@ Item {
        duration: 400;
    }

-    Button {
-        id: btnX
-        anchors.top: parent.top
-        anchors.right: parent.right
-        text: "x"
-
-        onClicked: animClose.start()
-    }
-
    ColumnLayout {
+    	id: categoryContainer
        anchors.fill: parent
+        anchors.margins: 10


        RowLayout {
-            TextField {
-                id: txtSearch
-                //: Search...
-                placeholderText: qsTr("search")
-                onTextChanged: {
-                    if (text == "") emojiModel.model = folder_expressions
-                    else emojiModel.model = folder_search
-                    emojiModel.updatefilters()
-                }
+        	id: categoryRow
+        	spacing: 10
+
+        	Row {
+				ImageButton {
+					tooltip: qsTr("search")
+					source: gcd.assetPath + "core/search-24px.webp"
+					size: root.size
+					color: root.searchMode ? Theme.dividerColor : "transparent"
+					onClicked: {
+						root.searchMode = !root.searchMode
+						if (!root.searchMode) txtSearch.text = ""
+						else txtSearch.focus = true
+					}
+					imgSrc.visible: false
+
+					ColorOverlay {
+						color: root.searchMode ? Theme.backgroundMainColor : Theme.dividerColor
+						anchors.fill: parent.imgSrc
+						source: parent.imgSrc
+						antialiasing: true
+						smooth: true
+					}
+				}
+
+				TextField {
+					id: txtSearch
+					visible: root.searchMode
+					implicitWidth: 200
+					implicitHeight: root.size
+					//: Search...
+					placeholderText: qsTr("search")
+					onTextChanged: {
+						if (text == "") emojiModel.model = folder_expressions
+						else emojiModel.model = folder_search
+						emojiModel.updatefilters()
+					}
+					font.pixelSize: root.size * 0.5
+					background: Rectangle {
+						color: Theme.dividerColor
+					}
+				}
            }

            ImageButton {
                id: btnEmojiExpressionsGroup
-                visible: !root.narrowMode
+                visible: !root.narrowMode && !root.searchMode
                //: Expressions
                tooltip: qsTr("emojicat-expressions")
-                source: gcd.assetPath + "mutstd/smile.webp"
+                source: catimgpath + "big_smile.webp"
                size: root.size
                onClicked:  emojiModel.model = folder_expressions
            }
+
            ImageButton {
-                visible: !root.narrowMode
+                visible: !root.narrowMode && !root.searchMode
                //: Activities
                tooltip: qsTr("emojicat-activities")
-                source: gcd.assetPath + "mutstd/artist_r1.webp"
+                source: catimgpath + "volleyball.webp"
                size: root.size
                onClicked: emojiModel.model = folder_activities_clothing
            }
            ImageButton {
-                visible: !root.narrowMode
+                visible: !root.narrowMode && !root.searchMode
                //: Food, drink & herbs
                tooltip: qsTr("emojicat-food")
-                source: gcd.assetPath + "mutstd/red_apple.webp"
+                source: catimgpath + "red_apple.webp"
                size: root.size
                onClicked: emojiModel.model = folder_food_drink_herbs
            }
            ImageButton {
-                visible: !root.narrowMode
+                visible: !root.narrowMode && !root.searchMode
                //: Gender, relationships & sexuality
                tooltip: qsTr("emojicat-gender")
                size: root.size
-                source: gcd.assetPath + "mutstd/pride_100.webp"
+                source: catimgpath + "transgender_symbol.webp"
                onClicked: emojiModel.model = folder_gsr
            }
            ImageButton {
-                visible: !root.narrowMode
+                visible: !root.narrowMode && !root.searchMode
                //: Nature and effects
                tooltip: qsTr("emojicat-nature")
-                source: gcd.assetPath + "mutstd/sun_behind_small_cloud.webp"
+                source: catimgpath + "crescent.webp"
                size: root.size
                onClicked: emojiModel.model = folder_nature
            }
            ImageButton {
-                visible: !root.narrowMode
+                visible: !root.narrowMode && !root.searchMode
                //: Objects
                tooltip: qsTr("emojicat-objects")
-                source: gcd.assetPath + "mutstd/crystal_ball.webp"
+                source: catimgpath + "light_bulb.webp"
                size: root.size
                onClicked: emojiModel.model = folder_objects
            }
            ImageButton {
-                visible: !root.narrowMode
+                visible: !root.narrowMode && !root.searchMode
                //: People and animals
                tooltip: qsTr("emojicat-people")
-                source: gcd.assetPath + "mutstd/crow.webp"
+                source: catimgpath + "bear.webp"
                size: root.size
                onClicked: emojiModel.model = folder_people
            }
            ImageButton {
-                visible: !root.narrowMode
+                visible: !root.narrowMode && !root.searchMode
                //: Symbols
                tooltip: qsTr("emojicat-symbols")
-                source: gcd.assetPath + "mutstd/purple_heart.webp"
+                source: catimgpath + "pentacle.webp"
                size: root.size
                onClicked: emojiModel.model = folder_symbols
            }
            ImageButton {
-                visible: !root.narrowMode
+                visible: !root.narrowMode && !root.searchMode
                //: Travel & places
                tooltip: qsTr("emojicat-travel")
-                source: gcd.assetPath + "mutstd/airplane.webp"
+                source: catimgpath + "airplane.webp"
                size: root.size
                onClicked: emojiModel.model = folder_travel_places
            }
            ImageButton {
-                visible: !root.narrowMode
+                visible: !root.narrowMode && !root.searchMode
                //: Miscellaneous
                tooltip: qsTr("emojicat-misc")
-                source: gcd.assetPath + "mutstd/hash_char.webp"
+                source: catimgpath + "hash.webp"
                size: root.size
                onClicked: emojiModel.model = folder_utils
            }
-            ImageButton {
-                visible: !root.narrowMode
-                id: btnUndefinedGroup
-                // (no tooltip; this is a catchall group meant to detect unclassified emoji during development)
-                //TODO: remove this category upon finalizing the Emoji Drawer
-                source: gcd.assetPath + "mutstd/undefined_character.webp"
-                size: root.size
-                onClicked: emojiModel.model = folder_other
+
+            Rectangle {
+            	width: 2
+            	height: root.size * 0.8
+            	color: Theme.dividerColor
+            	visible: !root.narrowMode && !root.searchMode
            }

            Item {
-                visible: root.narrowMode
+                visible: root.narrowMode && !root.searchMode
                height: root.size
                width: root.size

@ -173,17 +206,16 @@ Item {
                    source: cats[index].source
                    property int index: 0
                    property var cats: [
-                    {source: gcd.assetPath + "mutstd/smile.webp", model: folder_expressions},
-                    {source: gcd.assetPath + "mutstd/artist_r1.webp", model: folder_activities_clothing},
-                    {source: gcd.assetPath + "mutstd/red_apple.webp", model: folder_food_drink_herbs},
-                    {source: gcd.assetPath + "mutstd/pride_100.webp", model: folder_gsr},
-                    {source: gcd.assetPath + "mutstd/sun_behind_small_cloud.webp", model: folder_nature},
-                    {source: gcd.assetPath + "mutstd/crystal_ball.webp", model: folder_objects},
-                    {source: gcd.assetPath + "mutstd/crow.webp", model: folder_people},
-                    {source: gcd.assetPath + "mutstd/purple_heart.webp", model: folder_symbols},
-                    {source: gcd.assetPath + "mutstd/airplane.webp", model: folder_travel_places},
-                    {source: gcd.assetPath + "mutstd/hash_char.webp", model: folder_utils},
-                    {source: gcd.assetPath + "mutstd/undefined_character.webp", model: folder_other}
+                    {source: catimgpath + "big_smile.webp", model: folder_expressions},
+                    {source: catimgpath + "volleyball.webp", model: folder_activities_clothing},
+                    {source: catimgpath + "red_apple.webp", model: folder_food_drink_herbs},
+                    {source: catimgpath + "transgender_symbol.webp", model: folder_gsr},
+                    {source: catimgpath + "crescent.webp", model: folder_nature},
+                    {source: catimgpath + "light_bulb.webp", model: folder_objects},
+                    {source: catimgpath + "bear.webp", model: folder_people},
+                    {source: catimgpath + "pentacle.webp", model: folder_symbols},
+                    {source: catimgpath + "airplane.webp", model: folder_travel_places},
+                    {source: catimgpath + "hash.webp", model: folder_utils}
                    ]
                    height: root.size * (maCatRot.pressed ? 0.8 : 1.0)
                    width: root.size * (maCatRot.pressed ? 0.8 : 1.0)
@ -283,8 +315,8 @@ Item {
            Layout.fillWidth: true
            Layout.fillHeight: true
            height: root.size * 3
-            cellWidth: root.size
-            cellHeight: root.size
+            cellWidth: root.size * 1.2
+            cellHeight: root.size * 1.2
            clip: true
            ScrollBar.vertical: ScrollBar {}
            maximumFlickVelocity: 1250
@ -305,7 +337,6 @@ Item {
    ListModel { id: folder_symbols }
    ListModel { id: folder_travel_places }
    ListModel { id: folder_utils }
-    ListModel { id: folder_other }
    ListModel { id: folder_search }

    DelegateModel {
@ -313,14 +344,14 @@ Item {
        model: folder_expressions

        delegate: Item {
-            width: root.size
-            height: root.size
+            width: root.size * 1.2
+            height: root.size * 1.2

            Image {
                id: img
                //source: "file://" + gcd.binaryPath + "/assets/mutstd/" + code + ".webp"
                source: gcd.assetPath + "mutstd/" + code + ".webp"
-                width: root.size * (mouseArea.pressed ? 0.7 : 0.8)
+                width: root.size * (mouseArea.pressed ? 0.9 : 1)
                height: width
                anchors.centerIn: parent
                property string shortcode: code
@ -351,7 +382,6 @@ Item {
            folder_symbols.clear()
            folder_travel_places.clear()
            folder_utils.clear()
-            folder_other.clear()
            folder_search.clear()
        }

@ -369,7 +399,7 @@ Item {
                    continue;
                }

-                var model = folder_other
+                var model = folder_expressions
                if (txtSearch.text == "") {
                    switch(Mutant.standard.manifest[i].cat) {
                        case "activities_clothing": model = folder_activities_clothing; break;
--- a/HLine.qml
+++ b/HLine.qml
@ -3,7 +3,7 @@ import "theme"

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

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

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

-
    Rectangle {
        height: 10
        color:"transparent"
--- a/Icon.qml
+++ b/Icon.qml
@ -4,7 +4,6 @@ import QtQuick.Controls 2.4
 import QtQuick.Controls.Material 2.0
 import QtQuick.Layouts 1.3

-import "fonts/Twemoji.js" as T
 import "." as Widgets
 import "theme"

@ -21,6 +20,8 @@ Rectangle {
    property alias iconColor: iconColorOverlay.color

    property alias source: srcImg.source
+    property alias sourceWidth: srcImg.sourceSize.width
+    property alias sourceHeight: srcImg.sourceSize.height

    property real rotationAngle: 0.0

@ -28,14 +29,8 @@ Rectangle {

    signal hover(bool hover)

-    //property int horizontalPadding: 0
-    //property int verticalPadding: 0
-
    property int size: Math.min(height, width)

-    //property int innerHeight: height - (verticalPadding*2)
-    //property int innerWidth: width - (horizontalPadding*2)
-
    Image {
        id: srcImg
        anchors.verticalCenter: parent.verticalCenter
--- a/9
+++ b/9
@ -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.
--- a/ScalingLabel.qml
+++ b/ScalingLabel.qml
@ -7,13 +7,18 @@ import QtQuick.Window 2.11
 import "theme"
 import "fonts"

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

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

-    property int size: Theme.contactPortraitSize
-    property real logscale: 4 * Math.log10(gcd.themeScale + 1)
-    property int baseWidth:  size * logscale
-    height: size * logscale
+    height: Theme.contactPortraitSize
+    width: Theme.contactPortraitSize
+    implicitWidth: Theme.contactPortraitSize
+    implicitHeight: Theme.contactPortraitSize

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

-    implicitWidth: baseWidth
-    implicitHeight: baseWidth

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

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

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

-    property real logscale: 4 * Math.log10(gcd.themeScale + 1)
    property string displayName
    property alias image: portrait.source
    property string handle
@ -43,62 +42,75 @@ Item {

    property alias content: extraMeta.children

+    property alias portraitOverlayColor: portrait.overlayColor
+    property alias portraitPerformTransform: portrait.performTransform
+
    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

-            spacing: 2 * gcd.themeScale
-
-
-            EllipsisLabel { // CONTACT NAME
+            Opaque.Label { // CONTACT NAME
                id: cn
-                anchors.right: parent.right
-                anchors.left: parent.left
-                size: Theme.usernameSize * gcd.themeScale
-                font.family: Fonts.applicationFontExtraBold.name
-                font.styleName: "ExtraBold"
+                width: parent.width
+                elide: Text.ElideRight
+                header: true
                text: displayName
+                wrapMode: Text.NoWrap
            }

-            EllipsisLabel { // Onion
+            TextMetrics {
+            	id: cnMetric
+            	font: cn.font
+            	text: cn.text
+            }
+
+            Opaque.Label { // Onion
                id: onion
                text: handle
-                anchors.right: parent.right
-                anchors.left: parent.left
-                size: Theme.secondaryTextSize * gcd.themeScale
+                width: parent.width
+                elide: Text.ElideRight
+                wrapMode: Text.NoWrap
            }

-            onWidthChanged: {
-                cn.textResize()
-                onion.textResize()
+            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
        }
    }
@ -117,6 +129,11 @@ Item {
        onExited: {
            isHover = false
        }
+
+        onCanceled: {
+            isHover = false
+        }
+
    }

    Connections { // UPDATE UNREAD MESSAGES COUNTER
--- a/RadioButton.qml
+++ b/RadioButton.qml
@ -3,6 +3,7 @@ import QtQuick 2.7
 import QtQuick.Controls 2.13
 import "theme"
 import "fonts"
+import "." as Opaque

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

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

--- a/ResponsiveContainer.qml
+++ b/ResponsiveContainer.qml
@ -3,6 +3,7 @@ import QtQuick.Controls 2.4
 import QtQuick.Controls.Material 2.0
 import QtQuick.Layouts 1.3
 import QtQuick.Controls 1.4
+import "theme"


 GridLayout {
@ -10,7 +11,7 @@ GridLayout {

    // have children ... control weather to stack or row them
    // n * minWidth determin
-    property int minCellWidth: 500
+    property int minCellWidth: Theme.sidePaneMinSize * gcd.themeScale


    onWidthChanged: resizeCheck()
--- a/ScrollBar.qml
+++ b/ScrollBar.qml
@ -10,8 +10,8 @@ import "../const"


 T.ScrollBar {
-    palette.dark: Theme.defaultButtonColor
-    palette.mid: Theme.dividerColor
+    palette.dark: Theme.scrollbarDefaultColor
+    palette.mid: Theme.scrollbarActiveColor

    id: control

@ -20,6 +20,7 @@ T.ScrollBar {
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
    implicitContentHeight + topPadding + bottomPadding)

+    width: 10
    padding: 2
    visible: control.policy !== T.ScrollBar.AlwaysOff && control.size < 1.0

@ -28,7 +29,7 @@ T.ScrollBar {
        implicitHeight: control.interactive ? 6 : 2

        radius: width / 2
-        color: control.pressed ? control.palette.dark : control.palette.mid
+        color: control.pressed ?  control.palette.mid : control.palette.dark
        opacity: 1.0
    }
 }
--- a/Setting.qml
+++ b/Setting.qml
@ -15,10 +15,9 @@ import "../opaque/theme"
 Column {
    id: tehcol

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

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

        width: parent.width

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

        anchors.horizontalCenter: parent.horizontalCenter

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


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

    }

-    Opaque.HLine { visible: !last }
+    Opaque.HLine {
+    	width: parent.width - 20
+    	visible: !last
+    }
 }
--- a/SettingsList.qml
+++ b/SettingsList.qml
@ -12,28 +12,13 @@ import "../opaque/styles"
 import "../opaque/theme"


-ColumnLayout { // settingsList
-    id: root
-    anchors.right: parent.right
-    anchors.left: parent.left
-    anchors.top: parent.top
-    anchors.bottom: parent.bottom
-    anchors.topMargin: 20

-    property alias settings: flick.children
-
-    Flickable {
-        anchors.fill: parent
-        id: flick
-
-        boundsBehavior: Flickable.StopAtBounds
-        clip:true
-
-        contentWidth: root.width
-        contentHeight: root.height
-
-        // Settings go here in a col
-    }
+Flickable {
+    id: flick
+    boundsBehavior: Flickable.StopAtBounds
+    contentWidth: parent.width
+    clip:true
+    flickableDirection: Flickable.VerticalFlick
 }


--- a/Tab.qml
+++ b/Tab.qml
@ -1,42 +0,0 @@
-import QtGraphicalEffects 1.0
-import QtQuick 2.7
-import QtQuick.Controls 2.4
-import QtQuick.Controls.Material 2.0
-import QtQuick.Layouts 1.3
-
-import "fonts/Twemoji.js" as T
-import "theme"
-import "fonts"
-import "." as Opaque
-
-Rectangle {
-    id: root
-
-    property bool active: false
-    property alias text: label.text
-
-    color: Theme.backgroundMainColor
-
-    signal clicked
-
-    height: label.height
-
-
-    Opaque.ScalingLabel {
-        id: label
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: root.active ? Theme.mainTextColor : Theme.altTextColor
-        size: Theme.tabSize
-
-        font.family: Fonts.applicationFontRegular.name
-        font.styleName: "Bold"
-    }
-
-    MouseArea {
-        anchors.fill: parent
-        onClicked: {
-            parent.focus = true
-            parent.clicked()
-        }
-    }
-}
--- a/TabBar.qml
+++ b/TabBar.qml
@ -0,0 +1,44 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+
+import "." as Opaque
+import "./theme"
+
+// Tabs.qml
+//
+// Example 1:
+// Tabs {
+//   model: [qsTr("tab1-name"), qsTr("tab2-name"), qsTr("tab3-name")]
+//   onCurrentIndexChanged: {
+//     //...eg: loader.source = filenames[currentIndex]
+//   }
+// }
+ListView {
+	id: root
+
+	// properties
+	property color highlightColor: Theme.dividerColor
+
+	// contents & appearance config
+	model: ["your", "model", "here"]
+	delegate: Opaque.Label {
+		// contents & appearance config
+		text: model.modelData
+		elide: Text.ElideRight
+		horizontalAlignment: Text.AlignHCenter
+		size: Theme.textSmallPt
+		bold: true
+
+		// functionality
+		MouseArea { anchors.fill: parent; onClicked: root.currentIndex = index; }
+		width: root.width / root.model.length
+	}
+	highlight: Rectangle { id: hl; radius: 5; color: root.highlightColor; x: 0; width: root.width / root.model.length;}
+
+	// functionality
+	height: Theme.uiIconSizeS
+	orientation: Qt.Horizontal
+	interactive: true
+	highlightFollowsCurrentItem: true
+	boundsBehavior: Flickable.StopAtBounds
+}
--- a/ToggleSwitch.qml
+++ b/ToggleSwitch.qml
@ -3,30 +3,24 @@ import QtQuick.Controls.Styles 1.4
 import QtQuick 2.12
 import "theme"

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


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

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

 Rectangle { // Global Toolbar
    id: toolbar
@ -16,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
@ -27,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()
@ -37,13 +38,13 @@ Rectangle { // Global Toolbar
    Icon {
        id: btnLeftMenu
        iconColor: Theme.toolbarIconColor
-        source: gcd.assetPath + "core/menu-24px.svg"
+        source: gcd.assetPath + "core/menu-24px.webp"


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

        onClicked: { leftMenu() }
    }
@ -51,60 +52,50 @@ Rectangle { // Global Toolbar
    Icon {
        id: btnLeftBack
        iconColor: Theme.toolbarIconColor
-        source: gcd.assetPath + "core/chevron_left-24px.svg"
+        source: gcd.assetPath + "core/chevron_left-24px.webp"

        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
-        width: 30
-        height: 30
+        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
-
-        EllipsisLabel {
-            id: paneTitle
-
-            visible: true
-            anchors.horizontalCenter: parent.horizontalCenter
-
-            color: Theme.mainTextColor
-            size: Theme.tabSize * gcd.themeScale
-            weight: Font.Bold
-            font.family: Fonts.applicationFontRegular.name
-            font.styleName: "Bold"
-            text: "global toolbar"
-
-            //extraPadding: btnRightMenu.width + 10
-
-        }
-
-        onWidthChanged: { paneTitle.textResize() }
-    }
+	TextMetrics {
+		id: paneTitleTextMetric
+		text: paneTitle.text
+		font: paneTitle.font
+	}

    Icon {
        id: btnRightMenu
        iconColor: Theme.toolbarIconColor
-        source: gcd.assetPath + "core/more_vert-24px.svg"
+        source: gcd.assetPath + "core/more_vert-24px.webp"

        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.textResize()
        paneTitle.visible = true
    }

--- a/UnderlineTextField.qml
+++ b/UnderlineTextField.qml
@ -13,11 +13,14 @@ TextField {
    property bool error: false

    color:  error ? errorColor : Theme.mainTextColor
-    font.pixelSize: Theme.secondaryTextSize * gcd.themeScale * gcd.themeScale
+    font.pixelSize: Theme.secondaryTextSize * gcd.themeScale
    signal clicked
    smooth: true
    placeholderTextColor: Theme.altTextColor

+    // NOTE: Android Password Fields don't work unless we set an explicit character.
+    passwordCharacter: "*"
+
    background: Rectangle {
        id: bg
        anchors.fill: parent
--- a/controls/ImageButton.qml
+++ b/controls/ImageButton.qml
@ -7,13 +7,21 @@ Item {
    property alias source: img.source
    property int size: 24
    property string tooltip: ""
+    property alias color: bgRect.color
    width: size
    height: size
    signal clicked()
+    property alias imgSrc: img

    ToolTip.visible: tooltip != "" && ma.containsMouse
    ToolTip.text: tooltip

+    Rectangle {
+    	id: bgRect
+    	anchors.fill: parent
+    	color: "transparent"
+    }
+
    Image {
        id: img
        width: root.size * (ma.pressed ? 0.5 : 0.8)
--- a/fonts/MutantStandard.js
+++ b/fonts/MutantStandard.js
--- a/fonts/Twemoji.js
+++ b/fonts/Twemoji.js
--- a/i18n/translation_de.ts
+++ b/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>
--- a/i18n/translation_en.ts
+++ b/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>
--- a/i18n/translation_es.qm
+++ b/i18n/translation_es.qm
--- a/i18n/translation_es.ts
+++ b/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>
--- a/i18n/translation_fr.ts
+++ b/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>
--- a/i18n/translation_it.qm
+++ b/i18n/translation_it.qm
--- a/i18n/translation_it.ts
+++ b/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>
--- a/i18n/translation_pt.ts
+++ b/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>
--- a/opaque.pro
+++ b/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

--- a/qml.qrc
+++ b/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>
--- a/theme/CwtchDark.qml
+++ b/theme/CwtchDark.qml
@ -38,12 +38,15 @@ ThemeType {
    textfieldButtonColor: purple
    textfieldButtonTextColor: darkGreyPurple

+    scrollbarDefaultColor: purple
+    scrollbarActiveColor: hotPink
+
    portraitOnlineBorderColor: whitePurple
    portraitOnlineBackgroundColor: whitePurple
    portraitOnlineTextColor: whitePurple
    portraitConnectingBorderColor: purple //mauvePurple
    portraitConnectingBackgroundColor: purple //darkGreyPurple
-    portraitConnectingTextColor: whitePurple
+    portraitConnectingTextColor: purple
    portraitOfflineBorderColor: purple
    portraitOfflineBackgroundColor: purple
    portraitOfflineTextColor: purple
@ -58,6 +61,9 @@ ThemeType {
    portraitContactBadgeTextColor: whitePurple
    portraitProfileBadgeColor: mauvePurple
    portraitProfileBadgeTextColor: darkGreyPurple
+
+    portraitOverlayOfflineColor: mauvePurple
+
    dropShadowColor: mauvePurple
    dropShadowPaneColor: darkGreyPurple

@ -82,6 +88,8 @@ ThemeType {
    statusbarOnlineColor: mauvePurple
    statusbarOnlineFontColor: whitePurple

+    chatOverlayWarningTextColor: purple
+
    messageFromMeBackgroundColor: mauvePurple
    messageFromMeTextColor: whitePurple
    messageFromOtherBackgroundColor: deepPurple
--- a/theme/CwtchLight.qml
+++ b/theme/CwtchLight.qml
@ -39,6 +39,9 @@ ThemeType {
    textfieldButtonColor: hotPink
    textfieldButtonTextColor: whitePurple

+    scrollbarDefaultColor: darkPurple
+    scrollbarActiveColor: hotPink
+
    portraitOnlineBorderColor: darkPurple
    portraitOnlineBackgroundColor: darkPurple
    portraitOnlineTextColor: darkPurple
@ -59,6 +62,9 @@ ThemeType {
    portraitContactBadgeTextColor: whitePurple
    portraitProfileBadgeColor: brightPurple
    portraitProfileBadgeTextColor: whitePurple
+
+    portraitOverlayOfflineColor: whitePurple
+
    dropShadowColor: purple
    dropShadowPaneColor: purple

@ -83,6 +89,8 @@ ThemeType {
    statusbarOnlineColor: darkPurple
    statusbarOnlineFontColor: whitePurple

+    chatOverlayWarningTextColor: purple
+
    messageFromMeBackgroundColor: darkPurple
    messageFromMeTextColor: whitePurple
    messageFromOtherBackgroundColor: purple
--- a/theme/Theme.qml
+++ b/theme/Theme.qml
@ -55,6 +55,8 @@ Item {
    readonly property color portraitProfileBadgeColor: theme.portraitProfileBadgeColor
    readonly property color portraitProfileBadgeTextColor: theme.portraitProfileBadgeTextColor

+    readonly property color portraitOverlayOfflineColor: theme.portraitOverlayOfflineColor
+
    readonly property color toggleColor: theme.toggleColor
    readonly property color toggleOffColor: theme.toggleOffColor
    readonly property color toggleOnColor: theme.toggleOnColor
@ -77,6 +79,7 @@ Item {
    readonly property color statusbarOnlineColor: theme.statusbarOnlineColor
    readonly property color statusbarOnlineFontColor: theme.statusbarOnlineFontColor

+    readonly property color chatOverlayWarningTextColor: theme.chatOverlayWarningTextColor
    readonly property color messageFromMeBackgroundColor: theme.messageFromMeBackgroundColor
    readonly property color messageFromMeTextColor: theme.messageFromMeTextColor
    readonly property color messageFromOtherBackgroundColor: theme.messageFromOtherBackgroundColor
@ -88,21 +91,98 @@ Item {
    readonly property color messageStatusAlertColor: theme.messageStatusAlertColor
    readonly property color messageStatusAlertTextColor: theme.messageStatusAlertTextColor

-    readonly property int headerSize: 50
-    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 color scrollbarDefaultColor: theme.scrollbarDefaultColor
+    readonly property color scrollbarActiveColor: theme.scrollbarActiveColor

-    readonly property int sidePaneMinSize: 700
-    readonly property int doublePaneMinSize: 1000
+
+	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
 }
--- a/theme/ThemeType.qml
+++ b/theme/ThemeType.qml
@ -28,6 +28,9 @@ QtObject {
    property color textfieldButtonColor: "red"
    property color textfieldButtonTextColor: "red"

+    property color scrollbarDefaultColor: "red"
+    property color scrollbarActiveColor: "red"
+
    property color portraitOnlineBorderColor: "red"
    property color portraitOnlineBackgroundColor: "red"
    property color portraitOnlineTextColor: "red"
@ -49,6 +52,9 @@ QtObject {
    property color portraitContactBadgeTextColor: "red"
    property color portraitProfileBadgeColor: "red"
    property color portraitProfileBadgeTextColor: "red"
+
+    property color portraitOverlayOfflineColor: "red"
+
    property color dropShadowColor: "black"
    property color dropShadowPaneColor: "black"
    property color toggleColor: "black"
@ -73,6 +79,7 @@ QtObject {
    property color statusbarOnlineColor: "red"
    property color statusbarOnlineFontColor: "red"

+    property color chatOverlayWarningTextColor: "red"
    property color messageFromMeBackgroundColor: "red"
    property color messageFromMeTextColor: "red"
    property color messageFromOtherBackgroundColor: "red"
Author	SHA1	Message	Date
Dan Ballard	136e613ab5	Merge pull request 'new scaling system pass one' (#36 ) from newscale into master Reviewed-on: #36 all comments appear addressed :)	2020-12-16 17:48:48 -08:00
erinn	a998ebc935	addressing comments on #36	2020-12-16 17:34:15 -08:00
erinn	6b285e4bbc	Merge branch 'master' of https://git.openprivacy.ca/openprivacy/opaque into HEAD	2020-12-14 17:19:50 -08:00
erinn	3c4b713e9d	new scaling system pass one	2020-12-14 17:16:49 -08:00
erinn	f678d629b4	Merge pull request 'italian and spanish translations (emoji drawer)' (#35 ) from i18n into master Reviewed-on: #35	2020-12-11 14:17:36 -08:00
Dan Ballard	ae63ff95af	italian and spanish translations (emoji drawer)	2020-12-11 14:04:26 -08:00
Sarah Jamie Lewis	48d9d1d11f	Merge pull request 'new zoom system prototype' (#34 ) from newzoom into master Reviewed-on: #34	2020-12-08 17:44:00 -08:00
erinn	ccdc1cf5e0	Merge branch 'master' into newzoom	2020-12-08 17:38:15 -08:00
Dan Ballard	dd8dde1fb3	Merge branch 'master' of https://git.openprivacy.ca/openprivacy/opaque	2020-12-07 23:22:38 -08:00
Dan Ballard	8d4873da27	add LICENSE	2020-12-07 23:22:26 -08:00
erinn	41015ec049	wip new zoom system	2020-12-02 22:31:16 -08:00
Dan Ballard	b2855cba61	Merge pull request 'add chatOverlayWarningTextColor' (#33 ) from colourmepurple into master Reviewed-on: #33	2020-12-02 16:05:02 -08:00
erinn	07a9fecf52	add chatOverlayWarningTextColor to ThemeType	2020-12-02 16:03:52 -08:00
erinn	feec7398b0	add chatOverlayWarningTextColor to Theme	2020-12-02 16:02:00 -08:00
erinn	4fb1f62522	merge master	2020-12-02 15:56:24 -08:00
erinn	837e753bf9	add chatOverlayWarningTextColor	2020-12-02 15:54:33 -08:00
erinn	365eedbd90	Merge pull request 'responsive size fixes' (#32 ) from responsiveFix into master Reviewed-on: #32	2020-12-02 15:03:28 -08:00
Dan Ballard	da9701e816	portrait use gcd.themeScale instead of logScale	2020-12-02 11:59:15 -08:00
Dan Ballard	6207752cea	responsive size fixes	2020-12-01 17:13:07 -08:00
erinn	d9cc60c21f	Merge pull request 'OnCanceled event for PortraitRow' (#31 ) from user-feedback-hover into master Reviewed-on: #31	2020-11-27 13:38:23 -08:00
Sarah Jamie Lewis	f6a73fabe0	OnCanceled event for PortraitRow If anything else steals the mouse active we will revert to being not hovered	2020-11-27 13:16:48 -08:00
Sarah Jamie Lewis	a9d5302d15	Merge pull request 'remove twemoji, restore emoji fontsize support' (#30 ) from inputboxfixes into master Reviewed-on: #30	2020-11-26 16:53:12 -08:00
Sarah Jamie Lewis	6409443563	Merge branch 'master' into inputboxfixes	2020-11-26 16:53:07 -08:00
erinn	51b8b0fc7b	remove twemoji, restore emoji fontsize support	2020-11-26 16:29:09 -08:00
erinn	0d6ce27a9e	Merge pull request 'Themeable Scrollbars - make scrollbars more visible' (#29 ) from user-feedback-scroll into master Reviewed-on: #29	2020-11-26 16:22:50 -08:00
Sarah Jamie Lewis	cbeeb07e6b	Themeable Scrollbars - make scrollbars more visible	2020-11-26 15:56:40 -08:00
Sarah Jamie Lewis	dab30aa164	Merge pull request 'emoji drawer updates' (#28 ) from emodrawer2 into master Reviewed-on: #28	2020-11-26 12:17:12 -08:00
erinn	67a662f11b	emojidrawer polish	2020-11-25 18:37:51 -08:00
erinn	a6d1b3f330	redesigned emoji drawer	2020-11-24 22:18:11 -08:00
Dan Ballard	a69fb3cff2	Merge pull request 'add tabbar' (#27 ) from tabbar into master Reviewed-on: #27	2020-11-23 16:24:26 -08:00
erinn	e9f0bd2a5a	add tabbar	2020-11-23 16:19:34 -08:00
erinn	d78fcdc8e6	add tabbar	2020-11-23 15:44:26 -08:00
erinn	d6b56d0278	Merge pull request 'Remove settings from SettingsList' (#26 ) from settings-dive into master Reviewed-on: #26	2020-11-23 12:46:02 -08:00
Sarah Jamie Lewis	1548b16a5a	Remove settings from SettingsList Flickabke reparents children whichs means scrolling won't work without some ridiculous client hacks anyway, so there is nothing to be gained by setting the children here.	2020-11-23 12:25:25 -08:00
Sarah Jamie Lewis	3b9675e259	Fixes as a Result of Android Testing: (#25 ) Use Primary Text Size Opaque Button Images Color Themselves Correctly Fixes as a Result of Android Testing: Fixes Crashes related to ButtonTextField Resize Fixes Crashes related to EllipsisLabel Reviewed-on: #25	2020-11-19 16:15:50 -08:00
Dan Ballard	b8d0133878	Merge branch 'master' of https://git.openprivacy.ca/openprivacy/opaque	2020-11-17 17:46:21 -08:00
Dan Ballard	e144fef041	adding subheading text size	2020-11-17 17:46:06 -08:00
Dan Ballard	8e19e89fa4	Merge pull request 'Svg -> Webp + Toolbar Scaling' (#24 ) from android_deep_dive into master Reviewed-on: #24	2020-11-17 12:07:03 -08:00
Sarah Jamie Lewis	983dd84efa	Svg -> Webp	2020-11-17 12:02:12 -08:00
erinn	80eaf1a0d2	Merge pull request 'allow tab size to be controled' (#22 ) from tabSize into master Reviewed-on: #22	2020-11-12 12:29:39 -08:00
Dan Ballard	290ab69e09	allow tab size to be controled	2020-11-10 17:40:23 -08:00
erinn	15e3f5ab84	Merge pull request 'PortraitRow supports color overlay for portrait' (#21 ) from maskPortrait into master Reviewed-on: #21	2020-11-04 13:26:23 -08:00
Dan Ballard	621a846f95	PortraitRow supports color overlay for portrait	2020-11-03 17:05:40 -08:00