From f50be47456625d13d40a4f7fc825db6d082ff29c Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Wed, 5 Apr 2017 10:20:09 +0200 Subject: [PATCH] feat(ui/modules/Linphone/Codecs): in progress --- linphone-desktop/assets/languages/en.ts | 12 +- .../Linphone/Codecs/CodecAttribute.qml | 4 +- .../modules/Linphone/Codecs/CodecLegend.qml | 2 - .../modules/Linphone/Codecs/CodecsViewer.qml | 107 +++++++++++++----- .../Styles/Codecs/CodecsViewerStyle.qml | 29 +++-- 5 files changed, 107 insertions(+), 47 deletions(-) diff --git a/linphone-desktop/assets/languages/en.ts b/linphone-desktop/assets/languages/en.ts index b633334b6..f93c6b93c 100644 --- a/linphone-desktop/assets/languages/en.ts +++ b/linphone-desktop/assets/languages/en.ts @@ -240,27 +240,27 @@ Server url not configured. CodecsViewer codecMime - + Name codecEncoderDescription - + Description codecEncoderClockRate - + Rate (Hz) codecBitrate - + Bitrate (Kbit/s) codecRecvFmtp - + Parameters codecStatus - + Status diff --git a/linphone-desktop/ui/modules/Linphone/Codecs/CodecAttribute.qml b/linphone-desktop/ui/modules/Linphone/Codecs/CodecAttribute.qml index 80644a861..d61fde274 100644 --- a/linphone-desktop/ui/modules/Linphone/Codecs/CodecAttribute.qml +++ b/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 } diff --git a/linphone-desktop/ui/modules/Linphone/Codecs/CodecLegend.qml b/linphone-desktop/ui/modules/Linphone/Codecs/CodecLegend.qml index 66972fed4..a8a2a2d4b 100644 --- a/linphone-desktop/ui/modules/Linphone/Codecs/CodecLegend.qml +++ b/linphone-desktop/ui/modules/Linphone/Codecs/CodecLegend.qml @@ -12,6 +12,4 @@ Text { bold: true pointSize: CodecsViewerStyle.legend.fontSize } - - horizontalAlignment: Text.AlignHCenter } diff --git a/linphone-desktop/ui/modules/Linphone/Codecs/CodecsViewer.qml b/linphone-desktop/ui/modules/Linphone/Codecs/CodecsViewer.qml index d956de40a..eb8788798 100644 --- a/linphone-desktop/ui/modules/Linphone/Codecs/CodecsViewer.qml +++ b/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 + } - Switch { - checked: $codec.enabled + TextField { + Layout.preferredWidth: CodecsViewerStyle.column.recvFmtpWidth + text: $codec.recvFmtp + } - onClicked: view.model.enableCodec(index, !checked) + Switch { + Layout.fillWidth: true + Layout.leftMargin: 10 + + 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 + } + } } } } diff --git a/linphone-desktop/ui/modules/Linphone/Styles/Codecs/CodecsViewerStyle.qml b/linphone-desktop/ui/modules/Linphone/Styles/Codecs/CodecsViewerStyle.qml index 144b30b77..4957781f0 100644 --- a/linphone-desktop/ui/modules/Linphone/Styles/Codecs/CodecsViewerStyle.qml +++ b/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 }