adding new widgets: Flickable, ScrollBar, Tab; Additional changes and fixes around messaging

Button.qml

@@ -16,8 +16,10 @@ Rectangle {
     height: 20 * gcd.themeScale
     Layout.minimumHeight: height
     Layout.maximumHeight: height
-    color: mousedown ? Theme.defaultButtonActiveColor : Theme.defaultButtonColor
+    property color inactiveColor: Theme.defaultButtonColor
-    border.color:  mousedown ? Theme.defaultButtonActiveColor : Theme.defaultButtonColor
+    property color activeColor: Theme.defaultButtonActiveColor
+    color: mousedown ? activeColor : inactiveColor
+    border.color:  mousedown ? activeColor : inactiveColor
     border.width: 1
     radius: override_radius
     antialiasing: true
@@ -31,14 +33,14 @@ 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" : "";
+            visible: icon != ""
             height: button.height / 2
             sourceSize.height: button.height / 2
         }
@@ -49,8 +51,6 @@ Rectangle {
             font.styleName: "ExtraBold"
             font.pixelSize: button.height / 2
             color: Theme.defaultButtonTextColor
-            anchors.left: ico.right
-            anchors.leftMargin: 6
             visible: button.text != "" && button.text != undefined
         }
 

EmojiDrawer.qml

@@ -12,12 +12,14 @@ import "theme"
 
 Item {
     id: root
-    height: 0
+    implicitHeight: 0
+    height: implicitHeight
     property int size: 24
     property int requestedHeight: size * 8
     property string morph: "clw"
     property string color: "v1"
     property bool narrowMode: width < (txtSearch.width + root.size * 14 + btnX.width)
+
     signal picked(string shortcode)
     signal slideopen()
     signal slideclosed()
@@ -31,7 +33,7 @@ Item {
     PropertyAnimation {
         id: animClose;
         target: root;
-        properties: "height";
+        properties: "implicitHeight";
         to: 0;
         duration: 400;
     }
@@ -39,7 +41,7 @@ Item {
     PropertyAnimation {
         id: animOpen;
         target: root;
-        properties: "height";
+        properties: "implicitHeight";
         to: requestedHeight;
         duration: 400;
     }

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

Icon.qml

@@ -16,7 +16,7 @@ Rectangle {
 
     property bool isHover: false
 
-    color: isHover ? backgroundColor : hilightBackgroundColor
+    color: isHover ? hilightBackgroundColor : backgroundColor
 
     property alias iconColor: iconColorOverlay.color
 
@@ -26,20 +26,32 @@ Rectangle {
 
     signal clicked()
 
+    //property int horizontalPadding: 0
+    //property int verticalPadding: 0
+
+    property int size: Math.min(height, width)
+
+    //property int innerHeight: height - (verticalPadding*2)
+    //property int innerWidth: width - (horizontalPadding*2)
+
     Image {
         id: srcImg
-        anchors.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.width: size*2
-        sourceSize.height: root.height*2
+        sourceSize.height: size*2
     }
 
     ColorOverlay{
         id: iconColorOverlay
         anchors.fill: srcImg
+
         source: srcImg
 
         antialiasing: true

ScrollBar.qml

@@ -0,0 +1,34 @@
+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.defaultButtonColor
+    palette.mid: Theme.dividerColor
+
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+    implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+    implicitContentHeight + topPadding + bottomPadding)
+
+    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.dark : control.palette.mid
+        opacity: 1.0
+    }
+}

Tab.qml

@@ -0,0 +1,42 @@
+import QtGraphicalEffects 1.0
+import QtQuick 2.7
+import QtQuick.Controls 2.4
+import QtQuick.Controls.Material 2.0
+import QtQuick.Layouts 1.3
+
+import "fonts/Twemoji.js" as T
+import "theme"
+import "fonts"
+import "." as Opaque
+
+Rectangle {
+    id: root
+
+    property bool active: false
+    property alias text: label.text
+
+    color: Theme.backgroundMainColor
+
+    signal clicked
+
+    height: label.height
+
+
+    Opaque.ScalingLabel {
+        id: label
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: root.active ? Theme.mainTextColor : Theme.altTextColor
+        size: Theme.tabSize
+
+        font.family: Fonts.applicationFontRegular.name
+        font.styleName: "Bold"
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            parent.focus = true
+            parent.clicked()
+        }
+    }
+}

TextField.qml

@@ -3,13 +3,13 @@ import QtQuick.Controls 2.13
 import "theme"
 
 /*!
-	\qmltype TextField
+\qmltype TextField
-	\inqmlmodule Opaque
+\inqmlmodule Opaque
-	\inherits QtQuick::Item
+\inherits QtQuick::Item
-	\index Index
+\index Index
-	\brief Basic single-line text input box.
+\brief Basic single-line text input box.
 
-	For example:
+For example:
 
 */
 TextField {

Toolbar.qml

@@ -7,6 +7,8 @@ import QtQuick.Layouts 1.3
 import "fonts/Twemoji.js" as T
 import "." as Widgets
 import "theme"
+import "../opaque/fonts"
+
 
 Rectangle { // Global Toolbar
     id: toolbar
@@ -74,6 +76,8 @@ Rectangle { // Global Toolbar
             color: Theme.mainTextColor
             size: Theme.tabSize * gcd.themeScale
             weight: Font.Bold
+            font.family: Fonts.applicationFontRegular.name
+            font.styleName: "Bold"
             text: "global toolbar"
 
             //extraPadding: btnRightMenu.width + 10

theme/CwtchDark.qml

@@ -15,12 +15,15 @@ ThemeType {
     backgroundPaneColor: deepPurple
     backgroundHilightElementColor: deepPurple
 
+    dividerColor: mauvePurple
+
     mainTextColor: purple
     altTextColor: mauvePurple
     hilightElementTextColor: purple
     defaultButtonColor: mauvePurple
     defaultButtonActiveColor: pink
     defaultButtonTextColor: whitePurple
+    defaultButtonDisabledColor: softPurple
 
     portraitOnlineBorderColor: whitePurple
     portraitOnlineBackgroundColor: darkGreyPurple
@@ -63,4 +66,10 @@ ThemeType {
     messageFromMeTextColor: darkGreyPurple
     messageFromOtherBackgroundColor: deepPurple
     messageFromOtherTextColor: whitePurple
+
+    messageStatusNormalColor: mauvePurple
+    messageStatusBlockedColor: lightGrey
+    messageStatusBlockedTextColor: whitePurple
+    messageStatusAlertColor: darkGreyPurple
+    messageStatusAlertTextColor: whitePurple
 }

theme/CwtchLight.qml

@@ -14,6 +14,7 @@ ThemeType {
     backgroundPaneColor: softPurple
     backgroundHilightElementColor: softPurple
 
+    dividerColor: purple
 
     mainTextColor: darkPurple
     altTextColor: purple
@@ -21,6 +22,7 @@ ThemeType {
     defaultButtonColor: hotPink
     defaultButtonActiveColor: pink
     defaultButtonTextColor: whitePurple
+    defaultButtonDisabledColor: purple
 
     portraitOnlineBorderColor: darkPurple
     portraitOnlineBackgroundColor: darkPurple
@@ -63,4 +65,10 @@ ThemeType {
     messageFromMeTextColor: whitePurple
     messageFromOtherBackgroundColor: purple
     messageFromOtherTextColor: darkPurple
+
+    messageStatusNormalColor: purple
+    messageStatusBlockedColor: lightGrey
+    messageStatusBlockedTextColor: whitePurple
+    messageStatusAlertColor: darkPurple
+    messageStatusAlertTextColor: whitePurple
 }

theme/Theme.qml

@@ -7,12 +7,15 @@ Item {
     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 dropShadowColor: theme.dropShadowColor
     readonly property color dropShadowPaneColor: theme.dropShadowPaneColor
@@ -57,6 +60,12 @@ Item {
     readonly property color messageFromOtherBackgroundColor: theme.messageFromOtherBackgroundColor
     readonly property color messageFromOtherTextColor: theme.messageFromOtherTextColor
 
+    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 int headerSize: 50
     readonly property int usernameSize: 30
     readonly property int tabSize: 25

theme/ThemeType.qml

@@ -5,12 +5,15 @@ QtObject {
     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 portraitOnlineBorderColor: "red"
     property color portraitOnlineBackgroundColor: "red"
@@ -54,6 +57,12 @@ QtObject {
     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