feat(ui/modules/Linphone/Codecs): in progress

linphone-desktop/assets/languages/en.ts

@@ -240,27 +240,27 @@ Server url not configured.</translation>
     <name>CodecsViewer</name>
     <message>
         <source>codecMime</source>
-        <translation type="unfinished"></translation>
+        <translation>Name</translation>
     </message>
     <message>
         <source>codecEncoderDescription</source>
-        <translation type="unfinished"></translation>
+        <translation>Description</translation>
     </message>
     <message>
         <source>codecEncoderClockRate</source>
-        <translation type="unfinished"></translation>
+        <translation>Rate (Hz)</translation>
     </message>
     <message>
         <source>codecBitrate</source>
-        <translation type="unfinished"></translation>
+        <translation>Bitrate (Kbit/s)</translation>
     </message>
     <message>
         <source>codecRecvFmtp</source>
-        <translation type="unfinished"></translation>
+        <translation>Parameters</translation>
     </message>
     <message>
         <source>codecStatus</source>
-        <translation type="unfinished"></translation>
+        <translation>Status</translation>
     </message>
 </context>
 <context>

linphone-desktop/ui/modules/Linphone/Codecs/CodecAttribute.qml

@@ -5,7 +5,7 @@ import Linphone.Styles 1.0
 // =============================================================================
 
 Text {
-  color: CodecsViewerStyle.attribute.color
+  color: CodecsViewerStyle.attribute.text.color
   elide: Text.ElideRight
-  font.pointSize: CodecsViewerStyle.attribute.fontSize
+  font.pointSize: CodecsViewerStyle.attribute.text.fontSize
 }

linphone-desktop/ui/modules/Linphone/Codecs/CodecLegend.qml

@@ -12,6 +12,4 @@ Text {
     bold: true
     pointSize: CodecsViewerStyle.legend.fontSize
   }
-
-  horizontalAlignment: Text.AlignHCenter
 }

linphone-desktop/ui/modules/Linphone/Codecs/CodecsViewer.qml

@@ -14,7 +14,7 @@ Column {
   // Header.
   // ---------------------------------------------------------------------------
 
-  Row {
+  RowLayout {
     anchors {
       left: parent.left
       leftMargin: CodecsViewerStyle.leftMargin
@@ -50,6 +50,9 @@ Column {
     }
 
     CodecLegend {
+      Layout.fillWidth: true
+      Layout.leftMargin: 10
+
       text: qsTr('codecStatus')
     }
   }
@@ -76,6 +79,10 @@ Column {
     model: DelegateModel {
       id: visualModel
 
+      // -----------------------------------------------------------------------
+      // One codec.
+      // -----------------------------------------------------------------------
+
       delegate: MouseArea {
         id: dragArea
 
@@ -88,15 +95,23 @@ Column {
 
         drag {
           axis: Drag.YAxis
+
+          maximumY: (view.count - DelegateModel.itemsIndex) * height - height
+          minimumY: -DelegateModel.itemsIndex * height
+
           target: held ? content : undefined
         }
 
         height: CodecsViewerStyle.attribute.height
 
-        onPressAndHold: held = true
-        onReleased: held = false
+        onPressed: held = true
+        onReleased: {
+          held = false
 
-        RowLayout {
+          content.y = 0
+        }
+
+        Rectangle {
           id: content
 
           Drag.active: dragArea.held
@@ -104,45 +119,57 @@ Column {
           Drag.hotSpot.x: width / 2
           Drag.hotSpot.y: height / 2
 
+          color: CodecsViewerStyle.attribute.background.color.normal
+
           height: dragArea.height
           width: dragArea.width
 
-          spacing: CodecsViewerStyle.column.spacing
+          RowLayout {
+            anchors.fill: parent
 
-          CodecAttribute {
-            Layout.preferredWidth: CodecsViewerStyle.column.mimeWidth
-            text: $codec.mime
-          }
+            spacing: CodecsViewerStyle.column.spacing
 
-          CodecAttribute {
-            Layout.preferredWidth: CodecsViewerStyle.column.encoderDescriptionWidth
-            text: $codec.encoderDescription
-          }
+            CodecAttribute {
+              Layout.preferredWidth: CodecsViewerStyle.column.mimeWidth
+              text: $codec.mime
+            }
 
-          CodecAttribute {
-            Layout.preferredWidth: CodecsViewerStyle.column.clockRateWidth
-            text: $codec.clockRate
-          }
+            CodecAttribute {
+              Layout.preferredWidth: CodecsViewerStyle.column.encoderDescriptionWidth
+              text: $codec.encoderDescription
+            }
 
-          CodecAttribute {
-            Layout.preferredWidth: CodecsViewerStyle.column.bitrateWidth
-            text: $codec.bitrate
-          }
+            CodecAttribute {
+              Layout.preferredWidth: CodecsViewerStyle.column.clockRateWidth
+              text: $codec.clockRate
+            }
 
-          TextField {
-            Layout.preferredWidth: CodecsViewerStyle.column.recvFmtpWidth
-            text: $codec.recvFmtp
-          }
+            CodecAttribute {
+              Layout.preferredWidth: CodecsViewerStyle.column.bitrateWidth
+              text: $codec.bitrate
+            }
+
+            TextField {
+              Layout.preferredWidth: CodecsViewerStyle.column.recvFmtpWidth
+              text: $codec.recvFmtp
+            }
 
-          Switch {
-            checked: $codec.enabled
+            Switch {
+              Layout.fillWidth: true
+              Layout.leftMargin: 10
 
-            onClicked: view.model.enableCodec(index, !checked)
+              checked: $codec.enabled
+
+              onClicked: visualModel.model.enableCodec(index, !checked)
+            }
           }
         }
 
         DropArea {
-          anchors.fill: parent
+          anchors {
+            fill: parent
+            margins: CodecsViewerStyle.attribute.dropArea.margins
+          }
 
           onEntered: {
             visualModel.items.move(
@@ -151,6 +178,28 @@ Column {
             )
           }
         }
+
+        MouseArea {
+          id: mouseArea
+
+          anchors.fill: parent
+          hoverEnabled: true
+
+          onPressed: mouse.accepted = false
+        }
+
+        // ---------------------------------------------------------------------
+        // Animations/States codec.
+        // ---------------------------------------------------------------------
+
+        states: State {
+          when: mouseArea.containsMouse
+
+          PropertyChanges {
+            target: content
+            color: CodecsViewerStyle.attribute.background.color.hovered
+          }
+        }
       }
     }
   }

linphone-desktop/ui/modules/Linphone/Styles/Codecs/CodecsViewerStyle.qml

@@ -9,23 +9,36 @@ QtObject {
   property int leftMargin: 10
 
   property QtObject attribute: QtObject {
-    property color color: Colors.j
-    property int fontSize: 10
     property int height: 40
+
+    property QtObject background: QtObject {
+      property QtObject color: QtObject {
+        property color normal: Colors.a
+        property color hovered: Colors.y
+      }
+    }
+
+    property QtObject dropArea: QtObject {
+      property int margins: 5
+    }
+
+    property QtObject text: QtObject {
+      property color color: Colors.j
+      property int fontSize: 10
+    }
   }
 
   property QtObject column: QtObject {
-    property int spacing: 5
-
-    property int bitrateWidth: 100
+    property int bitrateWidth: 120
     property int clockRateWidth: 100
-    property int recvFmtpWidth: 200
-    property int encoderDescriptionWidth: 300
+    property int encoderDescriptionWidth: 280
     property int mimeWidth: 100
+    property int recvFmtpWidth: 200
+    property int spacing: 5
   }
 
   property QtObject legend: QtObject {
-    property color color: Colors.k
+    property color color: Colors.j
     property int fontSize: 10
     property int height: 50
   }