mirrors/linphone-desktop
1
0
Fork 0
mirror of https://gitlab.linphone.org/BC/public/linphone-desktop.git synced 2026-02-07 15:08:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(ui/modules/Common/Form/Placements): refactoring, responsive components

Browse source
This commit is contained in:
Ronan Abhamon 2017-03-03 12:05:00 +01:00
parent 1718531247
commit 576a756422
24 changed files with 308 additions and 268 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
linphone-desktop/resources.qrc
View file

@ -194,13 +194,12 @@
<file>ui/modules/Common/Form/+linux/SearchBox.qml</file>
<file>ui/modules/Common/Form/ListForm.qml</file>
<file>ui/modules/Common/Form/Placements/FormEmptyLine.qml</file>
<file>ui/modules/Common/Form/Placements/FormEntry.qml</file>
<file>ui/modules/Common/Form/Placements/FormGroup.qml</file>
<file>ui/modules/Common/Form/Placements/FormHeaderEntry.qml</file>
<file>ui/modules/Common/Form/Placements/FormHeaderGroup.qml</file>
<file>ui/modules/Common/Form/Placements/FormHeader.qml</file>
<file>ui/modules/Common/Form/Placements/FormLine.qml</file>
<file>ui/modules/Common/Form/Placements/Form.qml</file>
<file>ui/modules/Common/Form/Placements/FormTableEntry.qml</file>
<file>ui/modules/Common/Form/Placements/FormTableLine.qml</file>
<file>ui/modules/Common/Form/Placements/FormTable.qml</file>
<file>ui/modules/Common/Form/SearchBox.qml</file>
<file>ui/modules/Common/Form/StaticListForm.qml</file>
<file>ui/modules/Common/Form/Switch.qml</file>
@ -241,10 +240,10 @@
<file>ui/modules/Common/Styles/Form/Fields/TextFieldStyle.qml</file>
<file>ui/modules/Common/Styles/Form/ListFormStyle.qml</file>
<file>ui/modules/Common/Styles/Form/Placements/FormGroupStyle.qml</file>
<file>ui/modules/Common/Styles/Form/Placements/FormHeaderGroupStyle.qml</file>
<file>ui/modules/Common/Styles/Form/Placements/FormHeaderStyle.qml</file>
<file>ui/modules/Common/Styles/Form/Placements/FormLineStyle.qml</file>
<file>ui/modules/Common/Styles/Form/Placements/FormStyle.qml</file>
<file>ui/modules/Common/Styles/Form/Placements/FormTableLineStyle.qml</file>
<file>ui/modules/Common/Styles/Form/Placements/FormTableStyle.qml</file>
<file>ui/modules/Common/Styles/Form/SearchBoxStyle.qml</file>
<file>ui/modules/Common/Styles/Form/SwitchStyle.qml</file>
<file>ui/modules/Common/Styles/Form/Tab/TabButtonStyle.qml</file>

6
linphone-desktop/ui/modules/Common/Form/Fields/HexField.qml
View file

@ -1,5 +1,7 @@
import QtQuick 2.7
import Common.Styles 1.0
// =============================================================================
Item {
@ -23,7 +25,7 @@ Item {
// ---------------------------------------------------------------------------
implicitHeight: textField.height
implicitWidth: textField.width
width: TextFieldStyle.background.width
// ---------------------------------------------------------------------------
@ -40,6 +42,8 @@ Item {
regExp: /[0-9A-Fa-f]*/
}
width: parent.width
onEditingFinished: {
text = _computeText('0x' + text)
wrapper.editingFinished(parseInt(text, 16))

5
linphone-desktop/ui/modules/Common/Form/Fields/PortField.qml
View file

@ -1,5 +1,6 @@
import QtQuick 2.7
import Common.Styles 1.0
import Utils 1.0
// =============================================================================
@ -47,7 +48,7 @@ Item {
// ---------------------------------------------------------------------------
implicitHeight: textField.height
implicitWidth: textField.width
width: TextFieldStyle.background.width
// ---------------------------------------------------------------------------
@ -66,6 +67,8 @@ Item {
: Utils.PORT_REGEX
}
width: parent.width
// Workaround to supports empty string.
Keys.onReturnPressed: editingFinished()
onActiveFocusChanged: !activeFocus && editingFinished()

5
linphone-desktop/ui/modules/Common/Form/Placements/Form.qml
View file

@ -12,10 +12,11 @@ Column {
spacing: FormStyle.spacing
ColumnLayout {
width: parent.width
// ---------------------------------------------------------------------------
ColumnLayout {
spacing: FormStyle.header.spacing
width: parent.width
Text {
id: title

42
linphone-desktop/ui/modules/Common/Form/Placements/FormEntry.qml
View file

@ -1,42 +0,0 @@
import QtQuick 2.7
import QtQuick.Layouts 1.3
import Common.Styles 1.0
// =============================================================================
// Like a `FormGroup` but without label.
// Must be used in a `FormLine`.
// =============================================================================
Item {
default property alias _content: content.data
// ---------------------------------------------------------------------------
implicitHeight: content.height
width: FormGroupStyle.content.width
Item {
id: content
readonly property int currentHeight: _content[0] ? _content[0].height : 0
readonly property int currentWidth: _content[0] ? _content[0].width : 0
anchors {
horizontalCenter: parent.horizontalCenter
top: width > FormGroupStyle.legend.width
? parent.top
: undefined
verticalCenter: width > FormGroupStyle.legend.width
? undefined
: parent.verticalCenter
}
height: currentHeight
width: currentWidth > FormGroupStyle.content.width
? FormGroupStyle.content.width
: currentWidth
}
}

43
linphone-desktop/ui/modules/Common/Form/Placements/FormGroup.qml
View file

@ -3,19 +3,19 @@ import QtQuick.Layouts 1.3
import Common.Styles 1.0
// =============================================================================
// Display a form component with a legend.
// Must be used in a `FormLine`.
// =============================================================================
RowLayout {
property alias label: label.text
default property alias _content: content.data
default property var _content: null
// ---------------------------------------------------------------------------
spacing: FormGroupStyle.spacing
width: parent.maxItemWidth
// ---------------------------------------------------------------------------
Text {
id: label
@ -31,17 +31,36 @@ RowLayout {
verticalAlignment: Text.AlignVCenter
}
// ---------------------------------------------------------------------------
Item {
id: content
readonly property int currentHeight: _content ? _content.height : 0
readonly property int currentHeight: _content[0] ? _content[0].height : 0
Layout.alignment: (
currentHeight < FormGroupStyle.legend.height
? Qt.AlignVCenter
: Qt.AlignTop
) | Qt.AlignLeft
Layout.alignment: currentHeight < FormGroupStyle.legend.height
? Qt.AlignVCenter
: Qt.AlignTop
Layout.maximumWidth: FormGroupStyle.content.width
Layout.fillWidth: true
Layout.preferredHeight: currentHeight
Layout.preferredWidth: FormGroupStyle.content.width
Loader {
active: !!_content
anchors.fill: parent
sourceComponent: Item {
id: content
data: [ _content ]
width: parent.width
Component.onCompleted: _content.width = Qt.binding(function () {
var contentWidth = content.width
var wishedWidth = FormGroupStyle.content.maxWidth
return contentWidth > wishedWidth ? wishedWidth : contentWidth
})
}
}
}
}

10
linphone-desktop/ui/modules/Common/Form/Placements/FormHeader.qml
View file

@ -1,10 +0,0 @@
import Common.Styles 1.0
// =============================================================================
// Like a `FormLine` but used as form header.
// =============================================================================
FormLine {
height: FormHeaderStyle.height
width: parent.width
}

28
linphone-desktop/ui/modules/Common/Form/Placements/FormHeaderEntry.qml
View file

@ -1,28 +0,0 @@
import QtQuick 2.7
import Common.Styles 1.0
// =============================================================================
// Display a title on a `FormEntry`.
// Must be used in a `FormHeader`.
// =============================================================================
Item {
property alias text: text.text
height: parent.height
width: FormGroupStyle.content.width
Text {
id: text
anchors.centerIn: parent
color: FormHeaderGroupStyle.text.color
elide: Text.ElideRight
font {
bold: true
pointSize: FormHeaderGroupStyle.text.fontSize
}
}
}

34
linphone-desktop/ui/modules/Common/Form/Placements/FormHeaderGroup.qml
View file

@ -1,34 +0,0 @@
import QtQuick 2.7
import Common.Styles 1.0
// =============================================================================
// Display a title on a `FormGroup`.
// Must be used in a `FormHeader`.
// =============================================================================
Item {
property alias text: text.text
height: parent.height
width: FormGroupStyle.spacing + FormGroupStyle.legend.width + FormGroupStyle.content.width
Text {
id: text
anchors {
fill: parent
leftMargin: FormGroupStyle.spacing + FormGroupStyle.legend.width
}
color: FormHeaderGroupStyle.text.color
elide: Text.ElideRight
font {
bold: true
pointSize: FormHeaderGroupStyle.text.fontSize
}
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}

13
linphone-desktop/ui/modules/Common/Form/Placements/FormLine.qml
View file

@ -1,12 +1,21 @@
import QtQuick 2.7
import QtQuick.Layouts 1.3
import Common.Styles 1.0
// =============================================================================
// A line of `FormGroup`/`FormEntry`.
// =============================================================================
Row {
readonly property double maxItemWidth: {
var n = children.length
var curWidth = width / n - (n - 1) * spacing
var maxWidth = FormGroupStyle.legend.width + FormGroupStyle.content.maxWidth + FormGroupStyle.spacing
return curWidth < maxWidth ? curWidth : maxWidth
}
// ---------------------------------------------------------------------------
spacing: FormLineStyle.spacing
width: parent.width
}

56
linphone-desktop/ui/modules/Common/Form/Placements/FormTable.qml Normal file
View file

@ -0,0 +1,56 @@
import QtQuick 2.7
import Common.Styles 1.0
// =============================================================================
Column {
id: formTable
property alias titles: header.model
readonly property double maxItemWidth: {
var n = titles.length
var curWidth = (width - FormTableStyle.entry.width) / n - (n - 1) * FormTableLineStyle.spacing
var maxWidth = FormTableStyle.entry.maxWidth
return curWidth < maxWidth ? curWidth : maxWidth
}
// ---------------------------------------------------------------------------
spacing: FormTableStyle.spacing
width: parent.width
// ---------------------------------------------------------------------------
Row {
spacing: FormTableLineStyle.spacing
width: parent.width
// No title for the titles column.
Item {
height: FormTableStyle.entry.height
width: FormTableStyle.entry.width
}
Repeater {
id: header
Text {
id: text
color: FormTableStyle.entry.text.color
elide: Text.ElideRight
horizontalAlignment: Text.AlignHCenter
text: modelData
height: FormTableStyle.entry.height
width: formTable.maxItemWidth
font {
bold: true
pointSize: FormTableStyle.entry.text.fontSize
}
}
}
}
}

28
linphone-desktop/ui/modules/Common/Form/Placements/FormTableEntry.qml Normal file
View file

@ -0,0 +1,28 @@
import QtQuick 2.7
import Common.Styles 1.0
// =============================================================================
Item {
default property var _content
readonly property int currentHeight: _content ? _content.height : 0
// ---------------------------------------------------------------------------
height: currentHeight
width: parent.maxItemWidth
Loader {
active: !!_content
anchors.fill: parent
sourceComponent: Item {
id: item
data: [ _content ]
Component.onCompleted: _content.anchors.centerIn = item
}
}
}

36
linphone-desktop/ui/modules/Common/Form/Placements/FormTableLine.qml Normal file
View file

@ -0,0 +1,36 @@
import QtQuick 2.7
import QtQuick.Layouts 1.3
import Common.Styles 1.0
// =============================================================================
Row {
property alias title: title.text
readonly property double maxItemWidth: parent.maxItemWidth
// ---------------------------------------------------------------------------
spacing: FormLineStyle.spacing
width: parent.width
// ---------------------------------------------------------------------------
Text {
id: title
color: FormTableStyle.entry.text.color
elide: Text.ElideRight
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
height: FormTableStyle.entry.height
width: FormTableStyle.entry.width
font {
bold: false
pointSize: FormTableStyle.entry.text.fontSize
}
}
}

2
linphone-desktop/ui/modules/Common/Form/Tab/TabContainer.qml
View file

@ -44,8 +44,6 @@ Rectangle {
top: parent.top
topMargin: TabContainerStyle.topMargin
}
width: parent.width
}
}

2
linphone-desktop/ui/modules/Common/Styles/Form/ComboBoxStyle.qml
View file

@ -11,7 +11,7 @@ QtObject {
property int height: 36
property int iconSize: 10
property int radius: 4
property int width: 400
property int width: 200
property QtObject border: QtObject {
property color color: Colors.c

3
linphone-desktop/ui/modules/Common/Styles/Form/Placements/FormGroupStyle.qml
View file

@ -9,8 +9,7 @@ QtObject {
property int spacing: 20
property QtObject content: QtObject {
property int height: 300
property int width: 200
property int maxWidth: 400
}
property QtObject legend: QtObject {

13
linphone-desktop/ui/modules/Common/Styles/Form/Placements/FormHeaderGroupStyle.qml
View file

@ -1,13 +0,0 @@
pragma Singleton
import QtQuick 2.7
import Common 1.0
// =============================================================================
QtObject {
property QtObject text: QtObject {
property color color: Colors.j
property int fontSize: 10
}
}

2
linphone-desktop/ui/modules/Common/Styles/Form/Placements/FormLineStyle.qml
View file

@ -4,5 +4,5 @@ import QtQuick 2.7
// =============================================================================
QtObject {
property int spacing: 10
property int spacing: 20
}

2
linphone-desktop/ui/modules/Common/Styles/Form/Placements/FormHeaderStyle.qml → linphone-desktop/ui/modules/Common/Styles/Form/Placements/FormTableLineStyle.qml
View file

@ -4,5 +4,5 @@ import QtQuick 2.7
// =============================================================================
QtObject {
property int height: 30
property int spacing: 20
}

21
linphone-desktop/ui/modules/Common/Styles/Form/Placements/FormTableStyle.qml Normal file
View file

@ -0,0 +1,21 @@
pragma Singleton
import QtQuick 2.7
import Common 1.0
// =============================================================================
QtObject {
property int spacing: 10
property QtObject entry: QtObject {
property int height: 36
property int width: 200
property int maxWidth: 400
property QtObject text: QtObject {
property color color: Colors.j
property int fontSize: 10
}
}
}

2
linphone-desktop/ui/modules/Common/Styles/Form/Tab/TabContainerStyle.qml
View file

@ -9,7 +9,7 @@ QtObject {
property color color: Colors.k
property int bottomMargin: 30
property int leftMargin: 30
property int rightMargin: 30
property int rightMargin: 40
property int topMargin: 30
property QtObject separator: QtObject {

4
linphone-desktop/ui/modules/Common/Styles/qmldir
View file

@ -29,10 +29,10 @@ singleton TextAreaFieldStyle 1.0 Form/Fields/TextAreaFieldStyle.qml
singleton TextFieldStyle 1.0 Form/Fields/TextFieldStyle.qml
singleton FormGroupStyle 1.0 Form/Placements/FormGroupStyle.qml
singleton FormHeaderStyle 1.0 Form/Placements/FormHeaderStyle.qml
singleton FormHeaderGroupStyle 1.0 Form/Placements/FormHeaderGroupStyle.qml
singleton FormLineStyle 1.0 Form/Placements/FormLineStyle.qml
singleton FormStyle 1.0 Form/Placements/FormStyle.qml
singleton FormTableLineStyle 1.0 Form/Placements/FormTableLineStyle.qml
singleton FormTableStyle 1.0 Form/Placements/FormTableStyle.qml
singleton TabButtonStyle 1.0 Form/Tab/TabButtonStyle.qml
singleton TabContainerStyle 1.0 Form/Tab/TabContainerStyle.qml

7
linphone-desktop/ui/modules/Common/qmldir
View file

@ -41,12 +41,11 @@ TextField 1.0 Form/Fields/TextField.qml
Form 1.0 Form/Placements/Form.qml
FormEmptyLine 1.0 Form/Placements/FormEmptyLine.qml
FormEntry 1.0 Form/Placements/FormEntry.qml
FormGroup 1.0 Form/Placements/FormGroup.qml
FormHeader 1.0 Form/Placements/FormHeader.qml
FormHeaderEntry 1.0 Form/Placements/FormHeaderEntry.qml
FormHeaderGroup 1.0 Form/Placements/FormHeaderGroup.qml
FormLine 1.0 Form/Placements/FormLine.qml
FormTable 1.0 Form/Placements/FormTable.qml
FormTableEntry 1.0 Form/Placements/FormTableEntry.qml
FormTableLine 1.0 Form/Placements/FormTableLine.qml
TabBar 1.0 Form/Tab/TabBar.qml
TabButton 1.0 Form/Tab/TabButton.qml

201
linphone-desktop/ui/views/App/Settings/SettingsNetwork.qml
View file

@ -104,128 +104,123 @@ TabContainer {
title: qsTr('networkProtocolAndPortsTitle')
width: parent.width
FormHeader {
FormHeaderGroup {
text: qsTr('portHeader')
}
FormTable {
titles: [
qsTr('portHeader'),
qsTr('randomPortHeader'),
qsTr('enabledPortHeader')
]
FormHeaderEntry {
text: qsTr('randomPortHeader')
}
FormTableLine {
title: qsTr('sipUdpPortLabel')
FormHeaderEntry {
text: qsTr('enabledPortHeader')
}
}
FormTableEntry {
NumericField {
minValue: 0
maxValue: 65535
readOnly: randomSipUdpPort.checked || !enableSipUdpPort.checked
}
}
FormLine {
FormGroup {
label: qsTr('sipUdpPortLabel')
FormTableEntry {
Switch {
id: randomSipUdpPort
NumericField {
minValue: 0
maxValue: 65535
readOnly: randomSipUdpPort.checked || !enableSipUdpPort.checked
enabled: enableSipUdpPort.checked
}
}
FormTableEntry {
Switch {
id: enableSipUdpPort
}
}
}
FormEntry {
Switch {
id: randomSipUdpPort
FormTableLine {
title: qsTr('sipTcpPortLabel')
enabled: enableSipUdpPort.checked
FormTableEntry {
NumericField {
minValue: 0
maxValue: 65535
readOnly: randomSipTcpPort.checked || !enableSipTcpPort.checked
}
}
FormTableEntry {
Switch {
id: randomSipTcpPort
enabled: enableSipTcpPort.checked
}
}
FormTableEntry {
Switch {
id: enableSipTcpPort
}
}
}
FormEntry {
Switch {
id: enableSipUdpPort
FormTableLine {
id: audioRtpUdpPort
readonly property int defaultPort: 7078
title: qsTr('audioRtpUdpPortLabel')
FormTableEntry {
PortField {
readOnly: randomAudioRtpUdpPort.checked
supportsRange: true
text: SettingsModel.audioPortRange.join(':')
onEditingFinished: SettingsModel.audioPortRange = [ portA, portB ]
}
}
}
}
FormLine {
FormGroup {
label: qsTr('sipTcpPortLabel')
FormTableEntry {
Switch {
id: randomAudioRtpUdpPort
NumericField {
minValue: 0
maxValue: 65535
readOnly: randomSipTcpPort.checked || !enableSipTcpPort.checked
checked: SettingsModel.audioPortRange[0] === -1
onClicked: SettingsModel.audioPortRange = checked
? [ audioRtpUdpPort.defaultPort, -1 ]
: [ -1, -1 ]
}
}
}
FormEntry {
Switch {
id: randomSipTcpPort
FormTableLine {
id: videoRtpUdpPort
enabled: enableSipTcpPort.checked
readonly property int defaultPort: 9078
title: qsTr('videoRtpUdpPortLabel')
FormTableEntry {
PortField {
readOnly: randomVideoRtpUdpPort.checked
supportsRange: true
text: SettingsModel.videoPortRange.join(':')
onEditingFinished: SettingsModel.videoPortRange = [ portA, portB ]
}
}
}
FormEntry {
Switch {
id: enableSipTcpPort
}
}
}
FormTableEntry {
Switch {
id: randomVideoRtpUdpPort
FormLine {
id: audioRtpUdpPort
checked: SettingsModel.videoPortRange[0] === -1
readonly property int defaultPort: 7078
FormGroup {
label: qsTr('audioRtpUdpPortLabel')
PortField {
readOnly: randomAudioRtpUdpPort.checked
supportsRange: true
text: SettingsModel.audioPortRange.join(':')
onEditingFinished: SettingsModel.audioPortRange = [ portA, portB ]
}
}
FormEntry {
Switch {
id: randomAudioRtpUdpPort
checked: SettingsModel.audioPortRange[0] === -1
onClicked: SettingsModel.audioPortRange = checked
? [ audioRtpUdpPort.defaultPort, -1 ]
: [ -1, -1 ]
}
}
}
FormLine {
id: videoRtpUdpPort
readonly property int defaultPort: 9078
FormGroup {
label: qsTr('videoRtpUdpPortLabel')
PortField {
readOnly: randomVideoRtpUdpPort.checked
supportsRange: true
text: SettingsModel.videoPortRange.join(':')
onEditingFinished: SettingsModel.videoPortRange = [ portA, portB ]
}
}
FormEntry {
Switch {
id: randomVideoRtpUdpPort
checked: SettingsModel.videoPortRange[0] === -1
onClicked: SettingsModel.videoPortRange = checked
? [ videoRtpUdpPort.defaultPort, -1 ]
: [ -1, -1 ]
onClicked: SettingsModel.videoPortRange = checked
? [ videoRtpUdpPort.defaultPort, -1 ]
: [ -1, -1 ]
}
}
}
}
@ -304,9 +299,7 @@ TabContainer {
}
FormLine {
FormGroup {
label: ''
}
FormGroup {}
FormGroup {
label: qsTr('turnPasswordLabel')
@ -338,6 +331,8 @@ TabContainer {
onEditingFinished: SettingsModel.dscpSip = value
}
}
FormGroup {}
}
FormLine {