feat(app): replace light/dark button by text button a/b

tests/resources.qrc

@@ -39,15 +39,16 @@
     <file>ui/modules/Linphone/Dialog/DialogDescription.qml</file>
     <file>ui/modules/Linphone/Dialog/DialogPlus.qml</file>
     <file>ui/modules/Linphone/ForceScrollBar.qml</file>
+    <file>ui/modules/Linphone/Form/AbstractTextButton.qml</file>
     <file>ui/modules/Linphone/Form/ActionBar.qml</file>
     <file>ui/modules/Linphone/Form/ActionButton.qml</file>
     <file>ui/modules/Linphone/Form/CheckBoxText.qml</file>
-    <file>ui/modules/Linphone/Form/DarkButton.qml</file>
     <file>ui/modules/Linphone/Form/DropZone.qml</file>
     <file>ui/modules/Linphone/Form/ExclusiveButtons.qml</file>
-    <file>ui/modules/Linphone/Form/LightButton.qml</file>
     <file>ui/modules/Linphone/Form/ListForm.qml</file>
     <file>ui/modules/Linphone/Form/SmallButton.qml</file>
+    <file>ui/modules/Linphone/Form/TextButtonA.qml</file>
+    <file>ui/modules/Linphone/Form/TextButtonB.qml</file>
     <file>ui/modules/Linphone/Form/TransparentComboBox.qml</file>
     <file>ui/modules/Linphone/Image/Icon.qml</file>
     <file>ui/modules/Linphone/InvertedMouseArea.qml</file>
@@ -60,8 +61,11 @@
     <file>ui/modules/Linphone/Styles/CollapseStyle.qml</file>
     <file>ui/modules/Linphone/Styles/DialogStyle.qml</file>
     <file>ui/modules/Linphone/Styles/ForceScrollBarStyle.qml</file>
+    <file>ui/modules/Linphone/Styles/Form/AbstractTextButtonStyle.qml</file>
     <file>ui/modules/Linphone/Styles/Form/ExclusiveButtonsStyle.qml</file>
     <file>ui/modules/Linphone/Styles/Form/SmallButtonStyle.qml</file>
+    <file>ui/modules/Linphone/Styles/Form/TextButtonAStyle.qml</file>
+    <file>ui/modules/Linphone/Styles/Form/TextButtonBStyle.qml</file>
     <file>ui/modules/Linphone/Styles/MenuStyle.qml</file>
     <file>ui/modules/Linphone/Styles/PopupStyle.qml</file>
     <file>ui/modules/Linphone/Styles/qmldir</file>

tests/ui/modules/Linphone/Dialog/ConfirmDialog.qml

@@ -9,12 +9,12 @@ DialogPlus {
     id: dialog
 
     buttons: [
-        DarkButton {
+        TextButtonA {
             text: qsTr('cancel')
 
             onClicked: exit(0)
         },
-        DarkButton {
+        TextButtonA {
             text: qsTr('confirm')
 
             onClicked: exit(1)

tests/ui/modules/Linphone/Form/AbstractTextButton.qml

+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+import Linphone.Styles 1.0
+
+// ===================================================================
+
+Button {
+  id: button
+
+  property color colorHovered
+  property color colorNormal
+  property color colorPressed
+
+  // By default textColorNormal is the hovered/pressed text color.
+  property color textColorHovered: textColorNormal
+  property color textColorNormal
+  property color textColorPressed: textColorNormal
+
+  background: Rectangle {
+    color: button.down
+      ? colorPressed
+      : (button.hovered
+         ? colorHovered
+         : colorNormal
+        )
+    implicitHeight: AbstractTextButtonStyle.background.height
+    implicitWidth: AbstractTextButtonStyle.background.width
+    radius: AbstractTextButtonStyle.background.radius
+  }
+  contentItem: Text {
+    color: button.down
+      ? textColorPressed
+      : (button.hovered
+         ? textColorHovered
+         : textColorNormal
+        )
+    font.bold: true
+    font.pointSize: AbstractTextButtonStyle.text.fontSize
+    horizontalAlignment: Text.AlignHCenter
+    text: button.text
+    verticalAlignment: Text.AlignVCenter
+  }
+  hoverEnabled: true
+}

tests/ui/modules/Linphone/Form/DarkButton.qml

-import QtQuick 2.7
-import QtQuick.Controls 2.0
-
-// ===================================================================
-
-Button {
-    property string backgroundColor: '#434343'
-    property string textColor: '#FFFFFF'
-
-    background: Rectangle {
-        color: button.down ? '#FE5E00' : backgroundColor
-        implicitHeight: 30
-        implicitWidth: 160
-        radius: 4
-    }
-    contentItem: Text {
-        color: button.down ? '#FFFFFF' : textColor
-        font.pointSize: 8
-        font.weight: Font.DemiBold
-        horizontalAlignment: Text.AlignHCenter
-        id: text
-        text: button.text
-        verticalAlignment: Text.AlignVCenter
-    }
-    id: button
-}

tests/ui/modules/Linphone/Form/LightButton.qml

-import QtQuick 2.7
-
-// ===================================================================
-
-DarkButton {
-    backgroundColor: '#D1D1D1'
-    textColor: '#5A585B'
-}

tests/ui/modules/Linphone/Form/TextButtonA.qml

+import Linphone.Styles 1.0
+
+// ===================================================================
+
+AbstractTextButton {
+  colorHovered: TextButtonAStyle.backgroundColor.hovered
+  colorNormal: TextButtonAStyle.backgroundColor.normal
+  colorPressed: TextButtonAStyle.backgroundColor.pressed
+
+  textColorHovered: TextButtonAStyle.textColor.hovered
+  textColorNormal: TextButtonAStyle.textColor.normal
+  textColorPressed: TextButtonAStyle.textColor.pressed
+}

tests/ui/modules/Linphone/Form/TextButtonB.qml

+import Linphone.Styles 1.0
+
+// ===================================================================
+
+AbstractTextButton {
+  colorHovered: TextButtonBStyle.backgroundColor.hovered
+  colorNormal: TextButtonBStyle.backgroundColor.normal
+  colorPressed: TextButtonBStyle.backgroundColor.pressed
+
+  textColorHovered: TextButtonBStyle.textColor.hovered
+  textColorNormal: TextButtonBStyle.textColor.normal
+  textColorPressed: TextButtonBStyle.textColor.pressed
+}

tests/ui/modules/Linphone/Styles/Form/AbstractTextButtonStyle.qml

+pragma Singleton
+import QtQuick 2.7
+
+QtObject {
+  property QtObject background: QtObject {
+    property int height: 30
+    property int width: 160
+    property int radius: 4
+  }
+
+  property QtObject text: QtObject {
+    property int fontSize: 8
+  }
+}

tests/ui/modules/Linphone/Styles/Form/TextButtonAStyle.qml

+pragma Singleton
+import QtQuick 2.7
+
+import Linphone 1.0
+
+QtObject {
+  property QtObject backgroundColor: QtObject {
+    property color hovered: '#232323'
+    property color pressed: '#FE5E00'
+    property color normal: '#434343'
+  }
+
+  property QtObject textColor: QtObject {
+    property color hovered: '#FFFFFF'
+    property color pressed: '#FFFFFF'
+    property color normal: '#FFFFFF'
+  }
+}

tests/ui/modules/Linphone/Styles/Form/TextButtonBStyle.qml

+pragma Singleton
+import QtQuick 2.7
+
+import Linphone 1.0
+
+QtObject {
+  property QtObject backgroundColor: QtObject {
+    property color hovered: '#B1B1B1'
+    property color pressed: '#FE5E00'
+    property color normal: '#D1D1D1'
+  }
+
+  property QtObject textColor: QtObject {
+    property color hovered: '#5A585B'
+    property color pressed: '#FFFFFF'
+    property color normal: '#5A585B'
+  }
+}

tests/ui/modules/Linphone/Styles/qmldir

@@ -11,5 +11,8 @@ singleton PopupStyle            1.0 PopupStyle.qml
 singleton SearchBoxStyle          1.0 SearchBoxStyle.qml
 singleton TimelineStyle           1.0 TimelineStyle.qml
 
+singleton AbstractTextButtonStyle 1.0 Form/AbstractTextButtonStyle.qml
 singleton ExclusiveButtonsStyle   1.0 Form/ExclusiveButtonsStyle.qml
 singleton SmallButtonStyle        1.0 Form/SmallButtonStyle.qml
+singleton TextButtonAStyle        1.0 Form/TextButtonAStyle.qml
+singleton TextButtonBStyle        1.0 Form/TextButtonBStyle.qml

tests/ui/modules/Linphone/qmldir

@@ -28,11 +28,12 @@ ForceScrollBar       1.0 ForceScrollBar.qml
 ActionBar            1.0 Form/ActionBar.qml
 ActionButton         1.0 Form/ActionButton.qml
 CheckBoxText         1.0 Form/CheckBoxText.qml
-DarkButton           1.0 Form/DarkButton.qml
 DropZone             1.0 Form/DropZone.qml
 ExclusiveButtons     1.0 Form/ExclusiveButtons.qml
 LightButton          1.0 Form/LightButton.qml
 ListForm             1.0 Form/ListForm.qml
+TextButtonA          1.0 Form/TextButtonA.qml
+TextButtonB          1.0 Form/TextButtonB.qml
 TransparentComboBox  1.0 Form/TransparentComboBox.qml
 
 # Image

tests/ui/views/MainWindow/Contacts.qml

@@ -41,7 +41,7 @@ ColumnLayout {
                 ]
             }
 
-            LightButton {
+            TextButtonB {
                 text: qsTr('addContact')
             }
         }
@@ -198,7 +198,7 @@ ColumnLayout {
                                 anchors.fill: parent
                                 clip: true
                                 color: '#5A585B'
-                                font.weight: Font.DemiBold
+                                font.bold: true
                                 text: $username
                                 verticalAlignment: Text.AlignVCenter
                             }

tests/ui/views/MainWindow/Home.qml

@@ -27,7 +27,7 @@ ColumnLayout {
                 text: qsTr('invitContactQuestion')
             }
 
-            LightButton {
+            TextButtonB {
                 text: qsTr('invitContact')
             }
         }
@@ -43,7 +43,7 @@ ColumnLayout {
                 text: qsTr('addContactQuestion')
             }
 
-            LightButton {
+            TextButtonB {
                 text: qsTr('addContact')
             }
         }

tests/ui/views/ManageAccounts.qml

@@ -10,7 +10,7 @@ DialogPlus {
     minimumWidth: 480
     title: qsTr('manageAccountsTitle')
 
-    buttons: DarkButton {
+    buttons: TextButtonA {
         text: qsTr('validate')
     }
 

tests/ui/views/NewCall.qml

@@ -9,7 +9,7 @@ DialogPlus {
     minimumWidth: 420
     title: qsTr('newCallTitle')
 
-    buttons: DarkButton {
+    buttons: TextButtonA {
         text: qsTr('cancel')
     }