misc: component style fixes

1. JamiSwitch checked,focused color fixes
2. Avoid MaterialButton dashed line on focus
3. Placeholder text color fixes

Change-Id: I9b04f643e3553fc1f493183eb0e30646818362bd

src/commoncomponents/JamiSwitch.qml

@@ -25,6 +25,8 @@ Switch {
     id: root
 
     indicator: Rectangle {
+        id: handleBackground
+
         implicitWidth: JamiTheme.switchPreferredWidth
         implicitHeight: JamiTheme.switchPreferredHeight
 
@@ -33,23 +35,26 @@ Switch {
 
         radius: JamiTheme.switchIndicatorRadius
 
-        color: root.checked ? JamiTheme.switchBackgroundCheckedColor : JamiTheme.whiteColor
-        border.color: root.checked ? JamiTheme.switchBackgroundCheckedColor :
-                                     JamiTheme.switchBackgroundBorderColor
+        color: root.checked ? JamiTheme.switchBackgroundCheckedColor :
+                              JamiTheme.switchBackgroundColor
+        border.color: handleBackground.color
 
         Rectangle {
+            id: handle
+
             x: root.checked ? parent.width - width : 0
             y: parent.height / 2 - height / 2
 
             width: JamiTheme.switchIndicatorPreferredWidth
-            height: JamiTheme.switchIndicatorPreferredHeight
+            height: JamiTheme.switchPreferredHeight
 
             radius: JamiTheme.switchIndicatorRadius
 
-            color: (root.down || root.focus) ? Qt.darker(JamiTheme.switchBackgroundBorderColor, 1.2) :
-                                               JamiTheme.whiteColor
-            border.color: root.checked ? JamiTheme.switchBackgroundCheckedColor :
-                                         JamiTheme.switchIndicatorBorderColor
+            color: root.checked ? JamiTheme.switchHandleCheckedColor :
+                                  JamiTheme.switchHandleColor
+            border.color: root.focus ? (root.checked ? JamiTheme.switchHandleCheckedBorderColor :
+                                                       JamiTheme.switchHandleBorderColor) :
+                                       JamiTheme.transparentColor
         }
     }
 

src/commoncomponents/MaterialButton.qml

@@ -25,7 +25,7 @@ import net.jami.Constants 1.1
 // TODO: this component suffers from excessive responsibility
 // and should have fixed width and content width defined variations
 // as well as better handling for the animated icon
-Button {
+AbstractButton {
     id: root
 
     property bool outlined: false
@@ -138,7 +138,7 @@ Button {
 
                 Layout.alignment: Qt.AlignVCenter
                 Layout.leftMargin: hasIcon ?
-                                       JamiTheme.preferredMarginSize / 2 :
+                                       JamiTheme.preferredMarginSize :
                                        undefined
                 sourceComponent: animatedSource_.length !== 0 ?
                                      animatedIconComponent :
@@ -168,7 +168,6 @@ Button {
     }
 
     background: Rectangle {
-        anchors.fill: parent
         color: {
             if (root.outlined)
                 return "transparent"

src/commoncomponents/MaterialLineEdit.qml

@@ -40,11 +40,12 @@ TextField {
     wrapMode: Text.Wrap
     readOnly: false
     selectByMouse: true
-    selectionColor: JamiTheme.placeHolderTextFontColor
+    selectionColor: JamiTheme.placeholderTextColor
 
     font.pointSize: JamiTheme.materialLineEditPointSize
     font.kerning: true
 
+    placeholderTextColor: JamiTheme.placeholderTextColor
     color: JamiTheme.textColor
 
     LineEditContextMenu {

src/constant/JamiTheme.qml

@@ -60,7 +60,6 @@ Item {
     property color notificationRed: "#ff3b30"
     property color notificationBlue: "#31b7ff"
     property color unPresenceOrange: "orange"
-    property color placeHolderTextFontColor: "#767676"
     property color draftTextColor: "#cf5300"
     property color selectedTabColor: primaryForegroundColor
     property color filterBadgeColor: "#eed4d8"
@@ -99,9 +98,12 @@ Item {
     property color closeButtonLighterBlack: "#4c4c4c"
 
     // Jami switch
-    property color switchBackgroundBorderColor: "#cccccc"
-    property color switchBackgroundCheckedColor: primaryBackgroundColor
-    property color switchIndicatorBorderColor: "#999999"
+    property color switchBackgroundColor: darkTheme ? "#373737" : "#9f9f9f"
+    property color switchBackgroundCheckedColor: "#8dbaea"
+    property color switchHandleColor: darkTheme ? Qt.darker(lightGrey_, 2) : whiteColor
+    property color switchHandleCheckedColor: "#1b76d1"
+    property color switchHandleBorderColor: darkTheme ? whiteColor : Qt.darker(lightGrey_, 2)
+    property color switchHandleCheckedBorderColor: Qt.darker(lightGrey_, 3)
 
     // Call buttons
     property color acceptButtonGreen: "#4caf50"
@@ -158,7 +160,7 @@ Item {
     property color fileInTimestampColor: darkTheme ? "#999" : "#555"
     property color chatviewBgColor: darkTheme ? bgDarkMode_ : whiteColor
     property color bgInvitationRectColor: darkTheme ? "#222222" : whiteColor
-    property color placeholderTextColor: darkTheme ? "#2b2b2b" : "#d3d3d3"
+    property color placeholderTextColor: darkTheme ? "#7a7a7a" : "#767676"
     property color inviteHoverColor: darkTheme ? blackColor : whiteColor
     property color chatviewButtonColor: darkTheme ? whiteColor : blackColor
     property color bgTextInput: darkTheme ? "#060608" : whiteColor
@@ -270,10 +272,9 @@ Item {
     property real lineEditContextMenuSeparatorsHeight: 2
 
     // Jami switch
-    property real switchIndicatorRadius: 13
-    property real switchPreferredHeight: 18
+    property real switchIndicatorRadius: 30
+    property real switchPreferredHeight: 25
     property real switchPreferredWidth: 48
-    property real switchIndicatorPreferredHeight: 26
     property real switchIndicatorPreferredWidth: 26
 
     // Modal Popup

src/mainview/components/ContactSearchBar.qml

@@ -82,10 +82,10 @@ Rectangle {
         font.kerning: true
 
         selectByMouse: true
-        selectionColor: JamiTheme.placeHolderTextFontColor
+        selectionColor: JamiTheme.placeholderTextColor
 
         placeholderText: JamiStrings.contactSearchConversation
-        placeholderTextColor: JamiTheme.placeHolderTextFontColor
+        placeholderTextColor: JamiTheme.placeholderTextColor
 
         background: Rectangle {
             id: searchBarBackground

src/mainview/components/MessageBarTextArea.qml

@@ -84,9 +84,9 @@ JamiFlickable {
         renderType: Text.NativeRendering
         wrapMode: TextEdit.Wrap
         selectByMouse: true
-        selectionColor: JamiTheme.placeHolderTextFontColor
+        selectionColor: JamiTheme.placeholderTextColor
         textFormat: TextEdit.PlainText
-        placeholderTextColor: JamiTheme.placeHolderTextFontColor
+        placeholderTextColor: JamiTheme.placeholderTextColor
 
         cursorDelegate: Rectangle {
             visible: textArea.cursorVisible