feat(ui/views/App/Calls/ZrtpTokenAuthentication): coding style & refactoring

linphone-desktop/assets/languages/en.ts

@@ -833,7 +833,7 @@ your friend&apos;s SIP address or username.</translation>
     <name>MessageMenu</name>
     <message>
         <source>copy</source>
-        <translation type="unfinished"></translation>
+        <translation>Copy</translation>
     </message>
 </context>
 <context>
@@ -1362,23 +1362,23 @@ your friend&apos;s SIP address or username.</translation>
 <context>
     <name>ZrtpTokenAuthentication</name>
     <message>
-        <source>Confirm the following SAS with peer:</source>
-        <translation>Confirm the following SAS with peer:</translation>
+        <source>confirmSas</source>
+        <translation>Confirm the following SAS with peer.</translation>
     </message>
     <message>
-        <source>Say:</source>
+        <source>codeA</source>
         <translation>Say:</translation>
     </message>
     <message>
-        <source>Your correspondent should say:</source>
+        <source>codeB</source>
         <translation>Your correspondent should say:</translation>
     </message>
     <message>
-        <source>Deny</source>
+        <source>deny</source>
         <translation>DENY</translation>
     </message>
     <message>
-        <source>Accept</source>
+        <source>accept</source>
         <translation>ACCEPT</translation>
     </message>
 </context>

linphone-desktop/assets/languages/fr.ts

@@ -1361,24 +1361,24 @@ un chat ou ajouter un contact.</translation>
 <context>
     <name>ZrtpTokenAuthentication</name>
     <message>
-        <source>Confirm the following SAS with peer:</source>
-        <translation>Confirmez le SAS suivant avec votre interlocuteur :</translation>
+        <source>confirmSas</source>
+        <translation>Confirmez le SAS suivant avec votre interlocuteur.</translation>
     </message>
     <message>
-        <source>Say:</source>
+        <source>codeA</source>
         <translation>Dites :</translation>
     </message>
     <message>
-        <source>Your correspondent should say:</source>
+        <source>codeB</source>
         <translation>Votre interlocuteur devrait dire :</translation>
     </message>
     <message>
-        <source>Deny</source>
-        <translation>REJETER</translation>
+        <source>deny</source>
+        <translation>REFUSER</translation>
     </message>
     <message>
-        <source>Accept</source>
-        <translation>VALIDER</translation>
+        <source>accept</source>
+        <translation>ACCEPTER</translation>
     </message>
 </context>
 </TS>

linphone-desktop/ui/views/App/Calls/Incall.js

@@ -9,7 +9,7 @@
 // =============================================================================
 
 function computeAvatarSize (maxSize) {
-  var height = zrtp.visible ? container.height - zrtp.height : container.height
+  var height = container.height
   var width = container.width
 
   var size = height < maxSize && height > 0 ? height : maxSize

linphone-desktop/ui/views/App/Calls/Incall.qml

@@ -249,8 +249,19 @@ Rectangle {
       }
     }
 
+    // -------------------------------------------------------------------------
+    // Zrtp.
+    // -------------------------------------------------------------------------
+
     ZrtpTokenAuthentication {
       id: zrtp
+
+      Layout.fillWidth: true
+      Layout.margins: CallStyle.container.margins
+      Layout.preferredHeight: CallStyle.zrtpArea.height
+
+      call: incall.call
+      z: Constants.zPopup
     }
 
     // -------------------------------------------------------------------------

linphone-desktop/ui/views/App/Calls/ZrtpTokenAuthentication.qml

 import QtQuick 2.7
-import QtQuick.Controls 2.1
 import QtQuick.Layouts 1.3
 
 import Common 1.0
-import Common.Styles 1.0
-import Linphone 1.0
-import LinphoneUtils 1.0
-import Utils 1.0
 
 import App.Styles 1.0
 
-Item {
-    height: CallStyle.zrtpArea.height
-    visible: false
+// =============================================================================
+
+ColumnLayout {
+  id: zrtp
+
+  // ---------------------------------------------------------------------------
+
+  property var call
+
+  // ---------------------------------------------------------------------------
+
+  visible: false
+
+  // ---------------------------------------------------------------------------
+  // Main text.
+  // ---------------------------------------------------------------------------
+
+  Text {
     Layout.fillWidth: true
-    anchors.top: container.bottom
-    Layout.margins: CallStyle.container.margins
-
-    GridLayout {
-        anchors.centerIn: parent
-        columns: 1
-
-        Text {
-            Layout.fillWidth: true
-            anchors.horizontalCenter: parent.horizontalCenter
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-            text: qsTr("Confirm the following SAS with peer:")
-            elide: Text.ElideRight
-            font.pointSize: CallStyle.zrtpArea.fontSize
-            font.bold: true
-            color: Colors.j
-        }
-
-        RowLayout {
-            anchors.horizontalCenter: parent.horizontalCenter
-            spacing: CallStyle.zrtpArea.vu.spacing
-            Layout.fillWidth: true
-
-            Text {
-                text: qsTr("Say:")
-                font.pointSize: CallStyle.zrtpArea.fontSize
-                color: Colors.j
-            }
-
-            Text {
-                text: incall.call.localSAS
-                font.pointSize: CallStyle.zrtpArea.fontSize
-                font.bold: true
-                color: Colors.i
-            }
-
-            Text {
-                text: "-"
-                font.pointSize: CallStyle.zrtpArea.fontSize
-                color: Colors.j
-            }
-
-            Text {
-                text: qsTr("Your correspondent should say:")
-                font.pointSize: CallStyle.zrtpArea.fontSize
-                color: Colors.j
-            }
-
-            Text {
-                text: incall.call.remoteSAS
-                font.pointSize: CallStyle.zrtpArea.fontSize
-                font.bold: true
-                color: Colors.i
-            }
-        }
-
-        RowLayout {
-            anchors.horizontalCenter: parent.horizontalCenter
-            spacing: CallStyle.zrtpArea.vu.spacing
-            Layout.fillWidth: true
-
-            TextButtonA {
-                text: qsTr('Deny')
-                onClicked: {
-                    zrtp.visible = false
-                    incall.call.verifyAuthenticationToken(false)
-                }
-            }
-            
-            TextButtonB {
-                text: qsTr('Accept')
-                onClicked: {
-                    zrtp.visible = false
-                    incall.call.verifyAuthenticationToken(true)
-                }
-            }
-        }
+
+    horizontalAlignment: Text.AlignHCenter
+    verticalAlignment: Text.AlignVCenter
+
+    text: qsTr('confirmSas')
+
+    color: CallStyle.zrtpArea.text.colorA
+    elide: Text.ElideRight
+
+    font {
+      bold: true
+      pointSize: CallStyle.zrtpArea.text.fontSize
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Rules.
+  // ---------------------------------------------------------------------------
+
+  Row {
+    Layout.alignment: Qt.AlignHCenter
+
+    spacing: CallStyle.zrtpArea.text.wordsSpacing
+
+    Text {
+      color: CallStyle.zrtpArea.text.colorA
+      font.pointSize: CallStyle.zrtpArea.text.fontSize
+      text: qsTr('codeA')
+    }
+
+    Text {
+      color: CallStyle.zrtpArea.text.colorB
+
+      font {
+        bold: true
+        pointSize: CallStyle.zrtpArea.text.fontSize
+      }
+
+      text: zrtp.call.localSAS
+    }
+
+    Text {
+      color: CallStyle.zrtpArea.text.colorA
+      font.pointSize: CallStyle.zrtpArea.text.fontSize
+      text: '-'
+    }
+
+    Text {
+      color: CallStyle.zrtpArea.text.colorA
+      font.pointSize: CallStyle.zrtpArea.text.fontSize
+      text: qsTr('codeB')
+    }
+
+    Text {
+      color: CallStyle.zrtpArea.text.colorB
+
+      font {
+        bold: true
+        pointSize: CallStyle.zrtpArea.text.fontSize
+      }
+
+      text: zrtp.call.remoteSAS
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Buttons.
+  // ---------------------------------------------------------------------------
+
+  Row {
+    Layout.alignment: Qt.AlignHCenter
+
+    spacing: CallStyle.zrtpArea.buttons.spacing
+
+    TextButtonA {
+      text: qsTr('deny')
+      onClicked: {
+        zrtp.visible = false
+        zrtp.call.verifyAuthenticationToken(false)
+      }
+    }
+
+    TextButtonB {
+      text: qsTr('accept')
+      onClicked: {
+        zrtp.visible = false
+        zrtp.call.verifyAuthenticationToken(true)
+      }
     }
-}
\ No newline at end of file
+  }
+}

linphone-desktop/ui/views/App/Styles/Calls/CallStyle.qml

@@ -79,10 +79,16 @@ QtObject {
 
   property QtObject zrtpArea: QtObject {
     property int height: 50
-    property int fontSize: 12
 
-    property QtObject vu: QtObject {
-      property int spacing: 5
+    property QtObject buttons: QtObject {
+      property int spacing: 10
+    }
+
+    property QtObject text: QtObject {
+      property color colorA: Colors.j
+      property color colorB: Colors.i
+      property int fontSize: 12
+      property int wordsSpacing: 5
     }
   }
 }