Merge pull request 'Portrait performTransform + color; ScalingLabel bold option; TextField error option + color' (#17) from profileAddEdit into master

Reviewed-on: #17

Portrait.qml

@@ -8,8 +8,6 @@ import "theme"
 
 Item {
     id: imgProfile
-    implicitWidth: baseWidth
-    implicitHeight: baseWidth
 
     property string source
     property alias badgeColor: badge.color
@@ -24,6 +22,12 @@ Item {
     property alias badgeVisible: badge.visible
     property alias badgeContent: badge.content
 
+    property bool performTransform: false
+    property alias overlayColor: iconColorOverlay.color
+    property real rotationAngle: 0.0
+
+    implicitWidth: baseWidth
+    implicitHeight: baseWidth
 
     Rectangle {
         id: mainImage
@@ -54,6 +58,18 @@ Item {
                 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
@@ -63,7 +79,7 @@ Item {
 
             OpacityMask {
                 anchors.fill: img
-                source: img
+                source: performTransform ? iconColorOverlay : img
                 maskSource: mask
             }
         }

ScalingLabel.qml

@@ -5,6 +5,7 @@ import QtQuick.Controls.Material 2.0
 import QtQuick.Layouts 1.3
 import QtQuick.Window 2.11
 import "theme"
+import "fonts"
 
 Label {
     font.pixelSize: gcd.themeScale * size
@@ -12,4 +13,8 @@ Label {
     color: Theme.mainTextColor
     textFormat: Text.PlainText
     property real size: 12
+    property bool bold: false
+
+    font.family: bold ? Fonts.applicationFontRegular.name : Fonts.applicationFontBold.name
+    font.styleName: bold ? "Bold" : ""
 }

TextField.qml

@@ -13,7 +13,10 @@ For example:
 
 */
 TextField {
-    color: Theme.textfieldTextColor
+    property color errorColor: Theme.textfieldErrorColor
+    property bool error: false
+
+    color: error ? errorColor : Theme.textfieldTextColor
     font.pointSize: 10 * gcd.themeScale
     width: 100
 
@@ -23,6 +26,6 @@ TextField {
     background: Rectangle {
         radius: 2
         color: Theme.textfieldBackgroundColor
-        border.color: Theme.textfieldBorderColor
+        border.color: error ? errorColor : Theme.textfieldBorderColor
     }
 }

UnderlineTextField.qml

@@ -9,8 +9,10 @@ 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
+    color:  error ? errorColor : Theme.mainTextColor
     font.pixelSize: Theme.secondaryTextSize * gcd.themeScale * gcd.themeScale
     signal clicked
     smooth: true
@@ -29,6 +31,6 @@ TextField {
         anchors.left: parent.left
         anchors.right: parent.right
         height: 2
-        color: Theme.mainTextColor
+        color: error ? errorColor : Theme.mainTextColor
     }
 }

theme/CwtchDark.qml

@@ -33,6 +33,7 @@ ThemeType {
     textfieldBackgroundColor: deepPurple
     textfieldBorderColor: deepPurple
     textfieldTextColor: purple
+    textfieldErrorColor: hotPink
     textfieldButtonColor: purple
     textfieldButtonTextColor: darkGreyPurple
 
@@ -54,6 +55,7 @@ ThemeType {
     portraitContactBadgeColor: hotPink
     portraitContactBadgeTextColor: whitePurple
     portraitProfileBadgeColor: mauvePurple
+    portraitProfileBadgeTextColor: darkGreyPurple
     dropShadowColor: mauvePurple
     dropShadowPaneColor: darkGreyPurple
 

theme/CwtchLight.qml

@@ -34,6 +34,7 @@ ThemeType {
     textfieldBackgroundColor: whitePurple
     textfieldBorderColor: purple
     textfieldTextColor: purple
+    textfieldErrorColor: hotPink
     textfieldButtonColor: hotPink
     textfieldButtonTextColor: whitePurple
 
@@ -55,6 +56,7 @@ ThemeType {
     portraitContactBadgeColor: hotPink
     portraitContactBadgeTextColor: whitePurple
     portraitProfileBadgeColor: brightPurple
+    portraitProfileBadgeTextColor: whitePurple
     dropShadowColor: purple
     dropShadowPaneColor: purple
 

theme/Theme.qml

@@ -26,6 +26,7 @@ Item {
     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
 
@@ -51,6 +52,7 @@ Item {
     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 toggleColor: theme.toggleColor
     readonly property color toggleOffColor: theme.toggleOffColor

theme/ThemeType.qml

@@ -24,6 +24,7 @@ QtObject {
     property color textfieldBackgroundColor: "red"
     property color textfieldBorderColor: "red"
     property color textfieldTextColor: "red"
+    property color textfieldErrorColor: "red"
     property color textfieldButtonColor: "red"
     property color textfieldButtonTextColor: "red"
 
@@ -45,6 +46,7 @@ QtObject {
     property color portraitContactBadgeColor: "red"
     property color portraitContactBadgeTextColor: "red"
     property color portraitProfileBadgeColor: "red"
+    property color portraitProfileBadgeTextColor: "red"
     property color dropShadowColor: "black"
     property color dropShadowPaneColor: "black"
     property color toggleColor: "black"