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

Reviewed-on: #36

all comments appear addressed :)

Badge.qml

@@ -7,12 +7,12 @@ import CustomQmlTypes 1.0
 import "theme"
 
 Rectangle {
-    width: parent.width * 0.25
-    height: width
-    radius: width/2
-    anchors.right: parent.right
-    anchors.bottom: parent.bottom
-    anchors.margins: parent.width * 0.09
+    property int size
+
+    width: size
+    height: size
+    radius: size/2
+
     property alias content: container.children
 
     Column {
@@ -20,5 +20,4 @@ Rectangle {
         anchors.verticalCenter: parent.verticalCenter
         anchors.horizontalCenter: parent.horizontalCenter
     }
-
 }

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"
 
@@ -16,8 +15,11 @@ Rectangle {
     height: 20 * gcd.themeScale
     Layout.minimumHeight: height
     Layout.maximumHeight: height
-    color: mousedown ? Theme.defaultButtonActiveColor : Theme.defaultButtonColor
-    border.color:  mousedown ? Theme.defaultButtonActiveColor : Theme.defaultButtonColor
+    property color inactiveColor: Theme.defaultButtonColor
+    property color activeColor: Theme.defaultButtonActiveColor
+    property color textColor: Theme.defaultButtonTextColor
+    color: mousedown ? activeColor : inactiveColor
+    border.color:  mousedown ? activeColor : inactiveColor
     border.width: 1
     radius: override_radius
     antialiasing: true
@@ -31,26 +33,35 @@ Rectangle {
     property string tooltip
     signal clicked
 
-
     RowLayout {
         anchors.centerIn: parent
+        spacing: 6 * gcd.themeScale
 
         Image {
-            anchors.left: parent.left
             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
             font.styleName: "ExtraBold"
             font.pixelSize: button.height / 2
-            color: Theme.defaultButtonTextColor
-            anchors.left: ico.right
-            anchors.leftMargin: 6
+            color: button.textColor
             visible: button.text != "" && button.text != undefined
         }
 

ButtonTextField.qml

@@ -10,10 +10,13 @@ import "theme"
 // ButtonTextField integrates a text field and a button
 TextField {
     id: tf
-    color:  Theme.mainTextColor
+    color:  Theme.textfieldTextColor
     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
@@ -22,8 +25,8 @@ TextField {
 
     background: Rectangle {
         radius: 10
-        color: Theme.backgroundMainColor
-        border.color: Theme.backgroundMainColor
+        color: Theme.textfieldBackgroundColor
+        border.color: Theme.textfieldBorderColor
         layer.enabled: true
         layer.effect: DropShadow {
             transparentBorder: true
@@ -41,6 +44,10 @@ TextField {
         override_radius: 10
         height: parent.height;
 
+        inactiveColor: Theme.textfieldButtonColor
+        activeColor: Theme.textfieldButtonColor
+        textColor: Theme.textfieldButtonTextColor
+
         onClicked: {
             parent.focus = true;
             parent.clicked();

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

@@ -0,0 +1,133 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.impl 2.12
+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: Theme.textNormalPt + Theme.paddingMinimal * 2
+    font.pointSize: Theme.textNormalPt
+
+    // visible item
+    contentItem: Label {
+        id: displayItem
+        leftPadding: Theme.paddingStandard
+
+        text: control.model.get(control.currentIndex)["text"]
+        font: control.font
+        color: Theme.mainTextColor
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    background: Rectangle {
+        radius: control.height / 4
+        color: Theme.backgroundMainColor
+        border.color: Theme.backgroundMainColor
+
+        layer.enabled: true
+        layer.effect: DropShadow {
+            transparentBorder: true
+            horizontalOffset: 0
+            verticalOffset: 0
+            samples: 10
+            radius: 8
+            color: Theme.dropShadowColor
+        }
+    }
+
+    // activate arrow button
+    indicator: Rectangle {
+        height: control.height
+        width: control.height
+        anchors.right: control.right
+        radius: control.height / 4
+        color: Theme.backgroundPaneColor
+        border.color: Theme.backgroundPaneColor
+
+        layer.enabled: true
+        layer.effect: DropShadow {
+            transparentBorder: true
+            horizontalOffset: 0
+            verticalOffset: 0
+            samples: 10
+            radius: 8
+            color: Theme.dropShadowColor
+        }
+
+        Icon {
+            iconColor: Theme.toolbarIconColor
+            source: gcd.assetPath + "core/chevron_left-24px.webp"
+
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: parent.height * 0.75
+            height: parent.height * 0.75
+            rotationAngle: 270
+
+            onClicked: { popup.visible = true }
+        }
+    }
+
+    // items in the popup
+    delegate: ItemDelegate {
+        width: control.width
+        highlighted: control.highlightedIndex === index
+        height: ciText.height + 2 * Theme.paddingMinimal
+
+        contentItem:
+        Rectangle {
+            anchors.fill: parent
+            color: control.highlightedIndex === index ? Theme.backgroundHilightElementColor : Theme.backgroundMainColor
+            Label {
+                id: ciText
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left:parent.left
+                anchors.leftMargin: Theme.paddingStandard
+
+                text: model["text"] //control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
+                color: Theme.mainTextColor
+                font: control.font
+                elide: Text.ElideRight
+                verticalAlignment: Text.AlignVCenter
+            }
+        }
+
+    }
+
+    popup: Popup {
+        y: control.height - 1
+        width: control.width
+        implicitHeight: contentItem.implicitHeight + 2
+        padding: 1
+
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight
+            model: control.popup.visible ? control.delegateModel : null
+            currentIndex: control.highlightedIndex
+
+            ScrollIndicator.vertical: ScrollIndicator { }
+        }
+
+        background: Rectangle {
+            radius: 2
+            border.color: Theme.backgroundMainColor
+
+            layer.enabled: true
+            layer.effect: DropShadow {
+                transparentBorder: true
+                horizontalOffset: 0
+                verticalOffset: 0
+                samples: 10
+                radius: 8
+                color: Theme.dropShadowColor
+            }
+        }
+    }
+}

EllipsisLabel.qml

@@ -1,56 +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 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) && containerWidth > 50) {
-            textMetric.text = text.slice(0, text.length - (i * 3)) + "..."
-            i++
-        }
-    }
-
-}

EmojiDrawer.qml

@@ -12,12 +12,21 @@ import "theme"
 
 Item {
     id: root
-    height: 0
-    property int size: 24
+    implicitHeight: 0
+    height: implicitHeight
+    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()
     signal slideclosed()
@@ -25,13 +34,14 @@ Item {
 
     Rectangle {
         color: Theme.backgroundPaneColor
+        border.color: Theme.dividerColor
         anchors.fill: parent
     }
 
     PropertyAnimation {
         id: animClose;
         target: root;
-        properties: "height";
+        properties: "implicitHeight";
         to: 0;
         duration: 400;
     }
@@ -39,129 +49,154 @@ Item {
     PropertyAnimation {
         id: animOpen;
         target: root;
-        properties: "height";
+        properties: "implicitHeight";
         to: requestedHeight;
         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
 
@@ -171,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)
@@ -281,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
@@ -303,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 {
@@ -311,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
@@ -349,7 +382,6 @@ Item {
             folder_symbols.clear()
             folder_travel_places.clear()
             folder_utils.clear()
-            folder_other.clear()
             folder_search.clear()
         }
 
@@ -367,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;

Flickable.qml

@@ -0,0 +1,25 @@
+//import QtGraphicalEffects 1.0
+//import QtQuick 2.7
+//import QtQuick.Controls 2.4
+//import QtQuick.Controls.Material 2.0
+
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.impl 2.12
+
+import QtQuick.Templates 2.12 as T
+
+//import QtQuick.Layouts 1.3
+
+import "../opaque" as Opaque
+import "../opaque/theme"
+import "../const"
+
+Flickable {
+    id: sv
+    clip: true
+
+    boundsBehavior: Flickable.StopAtBounds
+
+    ScrollBar.vertical: Opaque.ScrollBar {}
+}

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"

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"
 
@@ -16,32 +15,45 @@ Rectangle {
 
     property bool isHover: false
 
-    color: isHover ? backgroundColor : hilightBackgroundColor
+    color: isHover ? hilightBackgroundColor : backgroundColor
 
     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
 
     signal clicked()
 
+    signal hover(bool hover)
+
+    property int size: Math.min(height, width)
+
     Image {
         id: srcImg
-        anchors.fill: parent
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: size
+        width: size
         antialiasing: true
         smooth: true
         visible: false
         // Apparently qml can now only DOWN-SCALE/SHRINK the SVG, so with this hack it which won't cause blurriness/pixelation
-        sourceSize.width: root.width*2
-        sourceSize.height: root.height*2
+        sourceSize.width: size*2
+        sourceSize.height: size*2
     }
 
     ColorOverlay{
         id: iconColorOverlay
         anchors.fill: srcImg
+
         source: srcImg
 
         antialiasing: true
         smooth: true
+        transform: Rotation { origin.x: width/2; origin.y: height / 2; angle: rotationAngle}
     }
 
     MouseArea {  // Full row mouse area triggering onClick
@@ -53,10 +65,12 @@ Rectangle {
 
         onEntered: {
             isHover = true
+            root.hover(true)
         }
 
         onExited: {
             isHover = false
+            root.hover(false)
         }
     }
 

IconTextField.qml

@@ -8,7 +8,7 @@ import "theme"
 
 // IconTextField integrates a text field and an icon
 TextField {
-    color:  Theme.mainTextColor
+    color:  Theme.textfieldTextColor
     font.pixelSize: Theme.secondaryTextSize * gcd.themeScale * gcd.themeScale
     width: parent.width - 20
     property alias icon: icon_.source
@@ -19,8 +19,8 @@ TextField {
 
     background: Rectangle {
         radius: 10
-        color: Theme.backgroundMainColor
-        border.color: Theme.backgroundMainColor
+        color: Theme.textfieldBackgroundColor
+        border.color: Theme.textfieldBorderColor
         layer.enabled: true
         layer.effect: DropShadow {
             transparentBorder: true
@@ -42,8 +42,8 @@ TextField {
         height: parent.height-4;
         width: parent.height-4;
 
-        iconColor: Theme.altTextColor
-        backgroundColor: Theme.backgroundMainColor
+        iconColor: Theme.textfieldTextColor
+        backgroundColor: Theme.textfieldBackgroundColor
     }
 
 }

LICENSE

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

Label.qml

@@ -0,0 +1,25 @@
+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 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.pointSize: size
+    wrapMode: multiline ? Text.WordWrap : Text.NoWrap
+    elide: Text.ElideRight
+    color: Theme.mainTextColor
+    textFormat: Text.PlainText
+    property bool header: false
+    property real size: header ? Theme.textHeaderPt : Theme.textMediumPt
+    property bool bold: header
+    property bool multiline: true
+
+    font.family: bold ? Fonts.applicationFontRegular.name : Fonts.applicationFontBold.name
+    font.styleName: bold ? "Bold" : ""
+}

Portrait.qml

@@ -8,29 +8,31 @@ import "theme"
 
 Item {
     id: imgProfile
-    implicitWidth: baseWidth
-    implicitHeight: baseWidth
 
     property string source
     property alias badgeColor: badge.color
 
-    property real logscale: 4 * Math.log10(gcd.themeScale + 1)
-    property int baseWidth:  78 * logscale
-    height: 78 * logscale
+    height: Theme.contactPortraitSize
+    width: Theme.contactPortraitSize
+    implicitWidth: Theme.contactPortraitSize
+    implicitHeight: Theme.contactPortraitSize
 
     property alias portraitBorderColor: mainImage.color
     property alias portraitColor: imageInner.color
     property alias badgeVisible: badge.visible
     property alias badgeContent: badge.content
 
+    property bool performTransform: false
+    property alias overlayColor: iconColorOverlay.color
+    property real rotationAngle: 0.0
+
 
     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
 
@@ -48,18 +50,33 @@ Item {
                 anchors.fill: parent
                 fillMode: Image.PreserveAspectFit
                 visible: false
+
+                sourceSize.width: imageInner.width*2
+                sourceSize.height: imageInner.height*2
+            }
+
+            ColorOverlay{
+                id: iconColorOverlay
+                anchors.fill: img
+
+                source: img
+                visible: false
+
+                antialiasing: true
+                smooth: true
+                transform: Rotation { origin.x: width/2; origin.y: height / 2; angle: rotationAngle}
             }
 
             Image { // CIRCLE MASK
                 id: mask
                 fillMode: Image.PreserveAspectFit
                 visible: false
-                source: "qrc:/qml/images/extra/clipcircle.png"
+                source: "qrc:/qml/opaque/images/clipcircle.png"
             }
 
             OpacityMask {
                 anchors.fill: img
-                source: img
+                source: performTransform ? iconColorOverlay : img
                 maskSource: mask
             }
         }
@@ -67,5 +84,9 @@ Item {
 
     Badge {
         id: badge
+        size: parent.width * 0.25
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.margins: parent.width * 0.09
     }
 }

PortraitRow.qml

@@ -5,19 +5,17 @@ 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
 import QtQuick.Controls.Styles 1.4
 
-Item { // LOTS OF NESTING TO DEAL WITH QT WEIRDNESS, SORRY
+Item {
     id: crItem
-    anchors.left: parent.left
-    anchors.right: parent.right
-    height: 78 * logscale + 3
-    implicitHeight: 78 * logscale + 3 //height
+    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
@@ -25,78 +23,94 @@ Item { // LOTS OF NESTING TO DEAL WITH QT WEIRDNESS, SORRY
     property bool isHover
     property string tag // profile version/type
 
-    property alias badgeColor: portrait.badgeColor
+    property color rowColor: Theme.backgroundMainColor
+    property color rowHilightColor: Theme.backgroundHilightElementColor
     property alias portraitBorderColor: portrait.portraitBorderColor
     property alias portraitColor: portrait.portraitColor
     property alias nameColor: cn.color
     property alias onionColor: onion.color
     property alias onionVisible: onion.visible
+
+    property alias badgeColor: portrait.badgeColor
     property alias badgeVisible: portrait.badgeVisible
     property alias badgeContent: portrait.badgeContent
+
     property alias hoverEnabled: buttonMA.hoverEnabled
 
+    // Ideally read only for icons to match against
+    property alias color: crRect.color
+
     property alias content: extraMeta.children
 
-    // TODO: should be in ContactRow
-    property bool blocked
+    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
-        color: isHover ? Theme.backgroundPaneColor : (isActive ? Theme.backgroundPaneColor : Theme.backgroundMainColor)
+        // 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
-                weight: Font.Bold
-                strikeout: blocked
+                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
-                strikeout: blocked
+                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
         }
     }
@@ -115,6 +129,11 @@ Item { // LOTS OF NESTING TO DEAL WITH QT WEIRDNESS, SORRY
         onExited: {
             isHover = false
         }
+
+        onCanceled: {
+            isHover = false
+        }
+
     }
 
     Connections { // UPDATE UNREAD MESSAGES COUNTER
@@ -124,15 +143,9 @@ Item { // LOTS OF NESTING TO DEAL WITH QT WEIRDNESS, SORRY
             isActive = false
         }
 
-        onUpdateContactBlocked: function(_handle, _blocked) {
-            if (handle == _handle) {
-                blocked = _blocked
-            }
-        }
-
         onUpdateContactDisplayName: function(_handle, _displayName) {
             if (handle == _handle) {
-                displayName = _displayName + (blocked == true ? " (blocked)" : "")
+                displayName = _displayName
             }
         }
 

RadioButton.qml

@@ -1,27 +1,41 @@
 import QtQuick 2.7
 
 import QtQuick.Controls 2.13
-
+import "theme"
+import "fonts"
+import "." as Opaque
 
 RadioButton {
     id: control
 
-    property real size: 12
-    spacing: 0
+    property color textColor: Theme.mainTextColor
+    property color indicatorColor: Theme.boxCheckedColor
+    //property real size: 12
+    spacing: 0 //4 * gcd.themeScale
+
 
     indicator: Rectangle {
         width: 16 * gcd.themeScale
         height: 16 * gcd.themeScale
         anchors.verticalCenter: parent.verticalCenter
-        radius: 9
+        radius: 9 * gcd.themeScale
         border.width: 1
 
         Rectangle {
             anchors.fill: parent
             visible: control.checked
-            color: "black"
-            radius: 9
-            anchors.margins: 4
+            color: indicatorColor
+            radius: 9 * gcd.themeScale
+            anchors.margins: 4 * gcd.themeScale
         }
     }
+
+    contentItem: Opaque.Label {
+        size: Theme.textMediumPt
+        color: textColor
+        text: control.text
+        bold: true
+        leftPadding: control.indicator.width + control.spacing
+    }
+
 }

Readme.md

@@ -1 +1,30 @@
 # Opaque
+Open Privacy's Awesome Qt-based User Experience Library!
+
+## Usage
+Add the Opaque widgets as a submodule wherever your QML files are stored:
+
+```
+cd qml
+git submodule add https://git.openprivacy.ca/openprivacy/opaque.git
+git submodule init
+git submodule update
+```
+
+Compile as normal. :)
+
+## Translations
+
+Currently the EmojiDrawer is the only widget that needs translations, and it hasn't been fully ported into the translation system yet.
+
+To use translations, install the appropriate `i18n/*` files as Qt translators. For example, in Cwtch we load translations as follows:
+
+```
+gcd.OpaqueTranslator = core.NewQTranslator(nil)
+gcd.OpaqueTranslator.Load("translation_"+core.QLocale_System().Name(), ":/qml/opaque/i18n/", "", "")
+core.QCoreApplication_InstallTranslator(gcd.OpaqueTranslator)
+```
+
+## Widgets
+
+Documentation coming soon. :)

ResponsiveContainer.qml

@@ -0,0 +1,28 @@
+import QtQuick 2.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 {
+    id: root
+
+    // have children ... control weather to stack or row them
+    // n * minWidth determin
+    property int minCellWidth: Theme.sidePaneMinSize * gcd.themeScale
+
+
+    onWidthChanged: resizeCheck()
+
+    function resizeCheck() {
+        if (width < children.length * minCellWidth) {
+            root.rows = -1
+            root.columns = 1
+        } else {
+            root.rows = 1
+            root.columns = -1
+        }
+    }
+}

ScalingLabel.qml

@@ -1,15 +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 QtQuick.Window 2.11
-import "theme"
-
-Label {
-    font.pixelSize: gcd.themeScale * size
-    wrapMode: Text.WordWrap
-    color: Theme.mainTextColor
-    textFormat: Text.PlainText
-    property real size: 12
-}

ScrollBar.qml

@@ -0,0 +1,35 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.impl 2.12
+
+import QtQuick.Templates 2.12 as T
+
+import "../opaque" as Opaque
+import "../opaque/theme"
+import "../const"
+
+
+T.ScrollBar {
+    palette.dark: Theme.scrollbarDefaultColor
+    palette.mid: Theme.scrollbarActiveColor
+
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+    implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+    implicitContentHeight + topPadding + bottomPadding)
+
+    width: 10
+    padding: 2
+    visible: control.policy !== T.ScrollBar.AlwaysOff && control.size < 1.0
+
+    contentItem: Rectangle {
+        implicitWidth: control.interactive ? 6 : 2
+        implicitHeight: control.interactive ? 6 : 2
+
+        radius: width / 2
+        color: control.pressed ?  control.palette.mid : control.palette.dark
+        opacity: 1.0
+    }
+}

Setting.qml

@@ -15,14 +15,14 @@ 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
 
     property alias label: settingLabel.text
+    property alias description: settingDescriptionLabel.text
     property alias field: fieldContainer.children
 
 
@@ -30,21 +30,31 @@ Column {
     Grid {
         id: container
         columns: inline ? 2 : 1
-        spacing: 10
-        padding: 10
+        spacing: Theme.paddingStandard
+        padding: Theme.paddingStandard
 
         width: parent.width
 
-        property int gridWidth: inline ? (parent.width / 2) - 20 : parent.width - 20
+        property int gridWidth: (inline ? (width - spacing)/2 : width) - 2*padding
 
         anchors.horizontalCenter: parent.horizontalCenter
 
-        Opaque.EllipsisLabel {
-            id: settingLabel
-            width: container.gridWidth
-            color: Theme.mainTextColor
-            size: Theme.secondaryTextSize * gcd.themeScale
-            font.weight: Font.Bold
+        Column {
+            Opaque.Label {
+                id: settingLabel
+                width: container.gridWidth
+                header: true
+                visible: text != ""
+            }
+
+
+            Opaque.Label {
+                id: settingDescriptionLabel
+                width: container.gridWidth
+                size: Theme.textSmallPt
+                visible: settingDescriptionLabel.text != ""
+                topPadding:10
+            }
         }
 
 
@@ -57,5 +67,8 @@ Column {
 
     }
 
-    Opaque.HLine { visible: !last }
+    Opaque.HLine {
+    	width: parent.width - 20
+    	visible: !last
+    }
 }

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
 }
 
 

Slider.qml

@@ -0,0 +1,43 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.impl 2.12
+import QtGraphicalEffects 1.12
+import "theme"
+
+Slider {
+    id: control
+
+    property color buttonColor: Theme.sliderButtonColor
+    property color buttonActiveColor: Theme.defaultButtonActiveColor
+    property color barRightColor: Theme.sliderBarRightColor
+    property color barLeftColor: Theme.sliderBarLeftColor
+
+    background: Rectangle {
+        x: control.leftPadding
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: 200
+        implicitHeight: 4
+        width: control.availableWidth
+        height: implicitHeight
+        radius: 2
+        color: control.barRightColor
+
+        Rectangle {
+            width: control.visualPosition * parent.width
+            height: parent.height
+            color: control.barLeftColor
+            radius: 2
+        }
+    }
+
+    handle: Rectangle {
+        x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: 26 * gcd.themeScale
+        implicitHeight: 26 * gcd.themeScale
+        radius: 13 * gcd.themeScale
+        color: control.pressed ? control.buttonActiveColor : control.buttonColor
+        border.color: control.buttonColor
+    }
+
+}

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

TextField.qml

@@ -2,14 +2,30 @@ import QtQuick 2.7
 import QtQuick.Controls 2.13
 import "theme"
 
+/*!
+\qmltype TextField
+\inqmlmodule Opaque
+\inherits QtQuick::Item
+\index Index
+\brief Basic single-line text input box.
+
+For example:
+
+*/
 TextField {
-    color: "black"
+    property color errorColor: Theme.textfieldErrorColor
+    property bool error: false
+
+    color: error ? errorColor : Theme.textfieldTextColor
     font.pointSize: 10 * gcd.themeScale
     width: 100
 
+    // selectByMouse shouldn't be enabled on mobile
+    selectByMouse: gcd.os != "android" && !readOnly
+
     background: Rectangle {
         radius: 2
-        color: Theme.backgroundPaneColor
-        border.color: Theme.defaultButtonActiveColor
+        color: Theme.textfieldBackgroundColor
+        border.color: error ? errorColor : Theme.textfieldBorderColor
     }
 }

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") };
-
     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() {isToggled = !isToggled; onToggled()}
 }
 
 

Toolbar.qml

@@ -4,9 +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 "fonts"
 
 Rectangle { // Global Toolbar
     id: toolbar
@@ -14,18 +14,21 @@ 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
     Layout.maximumHeight: height
-    color: Theme.backgroundMainColor
+    color: Theme.toolbarMainColor
 
     property alias leftMenuVisible: btnLeftMenu.visible
     property alias backVisible: btnLeftBack.visible
     property alias rightMenuVisible: btnRightMenu.visible
 
-    property alias titleWidth: paneArea.width
+    property int rightPaneWidth: 0
 
 
     signal leftMenu()
@@ -35,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() }
     }
@@ -49,58 +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
-            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 = width
-        paneTitle.textResize()
         paneTitle.visible = true
     }
 
@@ -113,7 +108,7 @@ Rectangle { // Global Toolbar
         target: gcd
 
         onSetToolbarTitle: function(handle) {
-            setTitle(handle, theStack.width)
+            setTitle(handle)
             btnRightMenu.visible = true
         }
     }

UnderlineTextField.qml

@@ -9,13 +9,18 @@ import "theme"
 // UnderlineTextField is a textfield styled as just an underline
 TextField {
     property alias backgroundColor: bg.color
+    property color errorColor: Theme.textfieldErrorColor
+    property bool error: false
 
-    color:  Theme.mainTextColor
-    font.pixelSize: Theme.secondaryTextSize * gcd.themeScale * gcd.themeScale
+    color:  error ? errorColor : Theme.mainTextColor
+    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
@@ -29,6 +34,6 @@ TextField {
         anchors.left: parent.left
         anchors.right: parent.right
         height: 2
-        color: Theme.mainTextColor
+        color: error ? errorColor : Theme.mainTextColor
     }
 }

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)

fonts/Fonts.qml

@@ -9,7 +9,7 @@ QtObject {
         source: "qrc:/qml/opaque/fonts/opensans/OpenSans-Bold.ttf"
     }
 
-    property FontLoader applicationFontExtrBold: FontLoader {
+    property FontLoader applicationFontExtraBold: FontLoader {
         id: opensansExtraBold
         source: "qrc:/qml/opaque/fonts/opensans/OpenSans-ExtraBold.ttf"
     }

i18n/translation_de.ts

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

i18n/translation_en.ts

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

i18n/translation_es.ts

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

i18n/translation_fr.ts

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

i18n/translation_it.ts

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

i18n/translation_pt.ts

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

opaque.pro

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

qml.qrc

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

theme/CwtchDark.qml

@@ -1,51 +1,103 @@
 
 ThemeType {
-    readonly property color darkGrayPurple: "#281831"
+    readonly property color darkGreyPurple: "#281831"
     readonly property color deepPurple: "#422850"
     readonly property color mauvePurple: "#8E64A5"
     readonly property color purple: "#DFB9DE"
-    readonly property color whitePurple: "#FFFDFF"
+    readonly property color whitePurple: "#E3DFE4"
     readonly property color softPurple: "#FDF3FC"
     readonly property color pink: "#E85DA1"
     readonly property color hotPink: "#D01972"
+    readonly property color lightGrey: "#9E9E9E"
+    readonly property color softGreen: "#A0FFB0"
+    readonly property color softRed: "#FFA0B0"
 
-    backgroundMainColor: darkGrayPurple
-    backgroundPaneColor: deepPurple
+    backgroundMainColor: darkGreyPurple
+    backgroundPaneColor: darkGreyPurple
+    backgroundHilightElementColor: deepPurple
 
-    mainTextColor: purple
-    altTextColor: mauvePurple
-    defaultButtonColor: mauvePurple
+    dividerColor: deepPurple
+
+    mainTextColor: whitePurple
+    altTextColor: whitePurple
+    hilightElementTextColor: purple
+    defaultButtonColor: hotPink
     defaultButtonActiveColor: pink
     defaultButtonTextColor: whitePurple
+    defaultButtonDisabledColor: deepPurple
+    defaultButtonDisabledTextColor: darkGreyPurple
+    altButtonColor: darkGreyPurple
+    altButtonTextColor: purple
+    altButtonDisabledColor: darkGreyPurple
+    altButtonDisabledTextColor: purple
+
+    textfieldBackgroundColor: deepPurple
+    textfieldBorderColor: deepPurple
+    textfieldTextColor: purple
+    textfieldErrorColor: hotPink
+    textfieldButtonColor: purple
+    textfieldButtonTextColor: darkGreyPurple
+
+    scrollbarDefaultColor: purple
+    scrollbarActiveColor: hotPink
 
     portraitOnlineBorderColor: whitePurple
-    portraitOnlineBackgroundColor: darkGrayPurple
+    portraitOnlineBackgroundColor: whitePurple
     portraitOnlineTextColor: whitePurple
-    portraitConnectingBorderColor: mauvePurple
-    portraitConnectingBackgroundColor: darkGrayPurple
-    portraitConnectingTextColor: whitePurple
-    portraitOfflineBorderColor: deepPurple
-    portraitOfflineBackgroundColor: darkGrayPurple
-    portraitOfflineTextColor: softPurple
+    portraitConnectingBorderColor: purple //mauvePurple
+    portraitConnectingBackgroundColor: purple //darkGreyPurple
+    portraitConnectingTextColor: purple
+    portraitOfflineBorderColor: purple
+    portraitOfflineBackgroundColor: purple
+    portraitOfflineTextColor: purple
+    portraitBlockedBorderColor: lightGrey
+    portraitBlockedBackgroundColor: lightGrey
+    portraitBlockedTextColor: lightGrey
+
+    portraitOnlineBadgeColor: softGreen
+    portraitOfflineBadgeColor: softRed
 
     portraitContactBadgeColor: hotPink
     portraitContactBadgeTextColor: whitePurple
     portraitProfileBadgeColor: mauvePurple
-    dropShadowColor: mauvePurple
-    dropShadowPaneColor: darkGrayPurple
+    portraitProfileBadgeTextColor: darkGreyPurple
 
-    toggleColor: darkGrayPurple
+    portraitOverlayOfflineColor: mauvePurple
+
+    dropShadowColor: mauvePurple
+    dropShadowPaneColor: darkGreyPurple
+
+    toggleColor: darkGreyPurple
     toggleOnColor: whitePurple
-    toggleOffColor: mauvePurple
+    toggleOffColor: deepPurple
+    sliderButtonColor: whitePurple
+    sliderBarLeftColor: mauvePurple
+    sliderBarRightColor: mauvePurple
+    boxCheckedColor: hotPink
 
     toolbarIconColor: whitePurple
+    toolbarMainColor: darkGreyPurple
+    toolbarAltColor: deepPurple
 
     statusbarDisconnectedInternetColor: whitePurple
     statusbarDisconnectedInternetFontColor: deepPurple
-    statusbarDisconnectedTorColor: darkGrayPurple
+    statusbarDisconnectedTorColor: darkGreyPurple
     statusbarDisconnectedTorFontColor: whitePurple
     statusbarConnectingColor: deepPurple
     statusbarConnectingFontColor: whitePurple
     statusbarOnlineColor: mauvePurple
     statusbarOnlineFontColor: whitePurple
+
+    chatOverlayWarningTextColor: purple
+
+    messageFromMeBackgroundColor: mauvePurple
+    messageFromMeTextColor: whitePurple
+    messageFromOtherBackgroundColor: deepPurple
+    messageFromOtherTextColor: whitePurple
+
+    messageStatusNormalColor: deepPurple
+    messageStatusBlockedColor: lightGrey
+    messageStatusBlockedTextColor: whitePurple
+    messageStatusAlertColor: mauvePurple
+    messageStatusAlertTextColor: whitePurple
 }

theme/CwtchLight.qml

@@ -8,15 +8,39 @@ ThemeType {
     readonly property color greyPurple: "#775F84"
     readonly property color pink: "#E85DA1"
     readonly property color hotPink: "#D01972"
+    readonly property color lightGrey: "#B3B6B3"
+    readonly property color softGreen: "#A0FFB0"
+    readonly property color softRed: "#FFA0B0"
 
     backgroundMainColor: whitePurple
     backgroundPaneColor: softPurple
+    backgroundHilightElementColor: softPurple
+
+    dividerColor: purple
 
     mainTextColor: darkPurple
     altTextColor: purple
+    hilightElementTextColor: darkPurple
+
     defaultButtonColor: hotPink
     defaultButtonActiveColor: pink
     defaultButtonTextColor: whitePurple
+    defaultButtonDisabledColor: purple
+    defaultButtonDisabledTextColor: whitePurple
+    altButtonColor: whitePurple
+    altButtonTextColor: purple
+    altButtonDisabledColor: softPurple
+    altButtonDisabledTextColor: purple
+
+    textfieldBackgroundColor: whitePurple
+    textfieldBorderColor: purple
+    textfieldTextColor: purple
+    textfieldErrorColor: hotPink
+    textfieldButtonColor: hotPink
+    textfieldButtonTextColor: whitePurple
+
+    scrollbarDefaultColor: darkPurple
+    scrollbarActiveColor: hotPink
 
     portraitOnlineBorderColor: darkPurple
     portraitOnlineBackgroundColor: darkPurple
@@ -24,21 +48,37 @@ ThemeType {
     portraitConnectingBorderColor: greyPurple
     portraitConnectingBackgroundColor: greyPurple
     portraitConnectingTextColor: greyPurple
-    portraitOfflineBorderColor: purple
-    portraitOfflineBackgroundColor: purple
-    portraitOfflineTextColor: purple
+    portraitOfflineBorderColor: greyPurple //purple
+    portraitOfflineBackgroundColor: greyPurple //purple
+    portraitOfflineTextColor: greyPurple//purple
+    portraitBlockedBorderColor: lightGrey
+    portraitBlockedBackgroundColor: lightGrey
+    portraitBlockedTextColor: lightGrey
+
+    portraitOnlineBadgeColor: softGreen
+    portraitOfflineBadgeColor: softRed
 
     portraitContactBadgeColor: hotPink
     portraitContactBadgeTextColor: whitePurple
     portraitProfileBadgeColor: brightPurple
+    portraitProfileBadgeTextColor: whitePurple
+
+    portraitOverlayOfflineColor: whitePurple
+
     dropShadowColor: purple
     dropShadowPaneColor: purple
 
     toggleColor: whitePurple
     toggleOnColor: hotPink
     toggleOffColor: purple
+    sliderButtonColor: pink
+    sliderBarLeftColor: purple
+    sliderBarRightColor: purple
+    boxCheckedColor: darkPurple
 
     toolbarIconColor: darkPurple
+    toolbarMainColor: whitePurple
+    toolbarAltColor: softPurple
 
     statusbarDisconnectedInternetColor: softPurple
     statusbarDisconnectedInternetFontColor: darkPurple
@@ -48,4 +88,17 @@ ThemeType {
     statusbarConnectingFontColor: whitePurple
     statusbarOnlineColor: darkPurple
     statusbarOnlineFontColor: whitePurple
+
+    chatOverlayWarningTextColor: purple
+
+    messageFromMeBackgroundColor: darkPurple
+    messageFromMeTextColor: whitePurple
+    messageFromOtherBackgroundColor: purple
+    messageFromOtherTextColor: darkPurple
+
+    messageStatusNormalColor: purple
+    messageStatusBlockedColor: lightGrey
+    messageStatusBlockedTextColor: whitePurple
+    messageStatusAlertColor: hotPink
+    messageStatusAlertTextColor: whitePurple
 }

theme/Theme.qml

@@ -5,12 +5,31 @@ import QtQuick 2.0
 Item {
     readonly property color backgroundMainColor: theme.backgroundMainColor
     readonly property color backgroundPaneColor: theme.backgroundPaneColor
+    readonly property color backgroundHilightElementColor: theme.backgroundHilightElementColor
+
+    readonly property color dividerColor: theme.dividerColor
 
     readonly property color mainTextColor: theme.mainTextColor
     readonly property color altTextColor: theme.altTextColor
+    readonly property color hilightElementTextColor: theme.hilightElementTextColor
+
     readonly property color defaultButtonColor: theme.defaultButtonColor
     readonly property color defaultButtonActiveColor: theme.defaultButtonActiveColor
     readonly property color defaultButtonTextColor: theme.defaultButtonTextColor
+    readonly property color defaultButtonDisabledColor: theme.defaultButtonDisabledColor
+    readonly property color defaultButtonDisabledTextColor: theme.defaultButtonDisabledTextColor
+    readonly property color altButtonColor: theme.altButtonColor
+    readonly property color altButtonTextColor: theme.altButtonTextColor
+    readonly property color altButtonDisabledColor: theme.altButtonDisabledColor
+    readonly property color altButtonDisabledTextColor: theme.altButtonDisabledTextColor
+
+    readonly property color textfieldBackgroundColor: theme.textfieldBackgroundColor
+    readonly property color textfieldBorderColor: theme.textfieldBorderColor
+    readonly property color textfieldTextColor: theme.textfieldTextColor
+    readonly property color textfieldErrorColor: theme.textfieldErrorColor
+    readonly property color textfieldButtonColor: theme.textfieldButtonColor
+    readonly property color textfieldButtonTextColor: theme.textfieldButtonTextColor
+
 
     readonly property color dropShadowColor: theme.dropShadowColor
     readonly property color dropShadowPaneColor: theme.dropShadowPaneColor
@@ -24,16 +43,32 @@ Item {
     readonly property color portraitOfflineBorderColor: theme.portraitOfflineBorderColor
     readonly property color portraitOfflineBackgroundColor: theme.portraitOfflineBackgroundColor
     readonly property color portraitOfflineTextColor: theme.portraitOfflineTextColor
+    readonly property color portraitBlockedBorderColor: theme.portraitBlockedBorderColor
+    readonly property color portraitBlockedBackgroundColor: theme.portraitBlockedBackgroundColor
+    readonly property color portraitBlockedTextColor: theme.portraitBlockedTextColor
+
+    readonly property color portraitOnlineBadgeColor: theme.portraitOnlineBadgeColor
+    readonly property color portraitOfflineBadgeColor: theme.portraitOfflineBadgeColor
 
     readonly property color portraitContactBadgeColor: theme.portraitContactBadgeColor
     readonly property color portraitContactBadgeTextColor: theme.portraitContactBadgeTextColor
     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
+    readonly property color sliderButtonColor: theme.sliderButtonColor
+    readonly property color sliderBarLeftColor: theme.sliderBarLeftColor
+    readonly property color sliderBarRightColor: theme.sliderBarRightColor
+    readonly property color boxCheckedColor: theme.boxCheckedColor
+
 
     readonly property color toolbarIconColor: theme.toolbarIconColor
+    readonly property color toolbarMainColor: theme.toolbarMainColor
+    readonly property color toolbarAltColor: theme.toolbarAltColor
 
     readonly property color statusbarDisconnectedInternetColor: theme.statusbarDisconnectedInternetColor
     readonly property color statusbarDisconnectedInternetFontColor: theme.statusbarDisconnectedInternetFontColor
@@ -44,20 +79,110 @@ Item {
     readonly property color statusbarOnlineColor: theme.statusbarOnlineColor
     readonly property color statusbarOnlineFontColor: theme.statusbarOnlineFontColor
 
-    readonly property int headerSize: 50
-    readonly property int usernameSize: 30
-    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 color chatOverlayWarningTextColor: theme.chatOverlayWarningTextColor
+    readonly property color messageFromMeBackgroundColor: theme.messageFromMeBackgroundColor
+    readonly property color messageFromMeTextColor: theme.messageFromMeTextColor
+    readonly property color messageFromOtherBackgroundColor: theme.messageFromOtherBackgroundColor
+    readonly property color messageFromOtherTextColor: theme.messageFromOtherTextColor
 
-    readonly property int sidePaneMinSize: 700
-    readonly property int doublePaneMinSize: 1000
+    readonly property color messageStatusNormalColor: theme.messageStatusNormalColor
+    readonly property color messageStatusBlockedColor: theme.messageStatusBlockedColor
+    readonly property color messageStatusBlockedTextColor: theme.messageStatusBlockedTextColor
+    readonly property color messageStatusAlertColor: theme.messageStatusAlertColor
+    readonly property color messageStatusAlertTextColor: theme.messageStatusAlertTextColor
+
+    readonly property color scrollbarDefaultColor: theme.scrollbarDefaultColor
+    readonly property color scrollbarActiveColor: theme.scrollbarActiveColor
+
+
+	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: dark
+    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
 }

theme/ThemeType.qml

@@ -3,12 +3,33 @@ import QtQuick 2.0
 QtObject {
     property color backgroundMainColor: "red"
     property color backgroundPaneColor: "red"
+    property color backgroundHilightElementColor: "red"
+
+    property color dividerColor: "red"
 
     property color mainTextColor: "red"
     property color altTextColor: "red"
+    property color hilightElementTextColor: "red"
+
     property color defaultButtonColor: "red"
     property color defaultButtonActiveColor: "red"
     property color defaultButtonTextColor: "red"
+    property color defaultButtonDisabledColor: "red"
+    property color defaultButtonDisabledTextColor: "red"
+    property color altButtonColor: "red"
+    property color altButtonTextColor: "red"
+    property color altButtonDisabledColor: "red"
+    property color altButtonDisabledTextColor: "red"
+
+    property color textfieldBackgroundColor: "red"
+    property color textfieldBorderColor: "red"
+    property color textfieldTextColor: "red"
+    property color textfieldErrorColor: "red"
+    property color textfieldButtonColor: "red"
+    property color textfieldButtonTextColor: "red"
+
+    property color scrollbarDefaultColor: "red"
+    property color scrollbarActiveColor: "red"
 
     property color portraitOnlineBorderColor: "red"
     property color portraitOnlineBackgroundColor: "red"
@@ -19,17 +40,35 @@ QtObject {
     property color portraitOfflineBorderColor: "red"
     property color portraitOfflineBackgroundColor: "red"
     property color portraitOfflineTextColor: "red"
+    property color portraitBlockedBorderColor: "red"
+    property color portraitBlockedBackgroundColor: "red"
+    property color portraitBlockedTextColor: "red"
+
+    property color portraitOnlineBadgeColor: "red"
+    property color portraitOfflineBadgeColor: "red"
+
 
     property color portraitContactBadgeColor: "red"
     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"
     property color toggleOnColor: "black"
     property color toggleOffColor: "black"
+    property color sliderButtonColor: "red"
+    property color sliderBarLeftColor: "red"
+    property color sliderBarRightColor: "red"
+    property color boxCheckedColor: "red"
+
 
     property color toolbarIconColor: "red"
+    property color toolbarMainColor: "red"
+    property color toolbarAltColor: "red"
 
     property color statusbarDisconnectedInternetColor: "red"
     property color statusbarDisconnectedInternetFontColor: "red"
@@ -40,6 +79,19 @@ 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"
+    property color messageFromOtherTextColor: "red"
+
+    property color messageStatusNormalColor: "red"
+    property color messageStatusBlockedColor: "red"
+    property color messageStatusBlockedTextColor: "red"
+    property color messageStatusAlertColor: "red"
+    property color messageStatusAlertTextColor: "red"
+
+
     // ... more to come