feat(ui/modules/Common/Form/Placements/Form): supports vertical orientation

linphone-desktop/resources.qrc

@@ -195,11 +195,13 @@
     <file>ui/modules/Common/Form/ListForm.qml</file>
     <file>ui/modules/Common/Form/Placements/FormEmptyLine.qml</file>
     <file>ui/modules/Common/Form/Placements/FormGroup.qml</file>
+    <file>ui/modules/Common/Form/Placements/FormHGroup.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/Placements/FormVGroup.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>
@@ -239,11 +241,12 @@
     <file>ui/modules/Common/Styles/Form/Fields/TextAreaFieldStyle.qml</file>
     <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/FormHGroupStyle.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/Placements/FormVGroupStyle.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>

linphone-desktop/ui/modules/Common/Form/Placements/Form.qml

@@ -7,6 +7,7 @@ import Common.Styles 1.0
 
 Column {
   property alias title: title.text
+  property int orientation: Qt.Horizontal
 
   // ---------------------------------------------------------------------------
 

linphone-desktop/ui/modules/Common/Form/Placements/FormEmptyLine.qml

@@ -5,6 +5,6 @@ import Common.Styles 1.0
 // =============================================================================
 
 Item {
-  height: FormGroupStyle.legend.height
+  height: FormHGroupStyle.legend.height
   width: parent.width
 }

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

 import QtQuick 2.7
-import QtQuick.Layouts 1.3
-
-import Common.Styles 1.0
 
 // =============================================================================
 
-RowLayout {
-  property alias label: label.text
+Loader {
+  id: loader
+
+  // ---------------------------------------------------------------------------
+
+  property string label
+  readonly property int orientation: parent.orientation
 
   default property var _content: null
 
   // ---------------------------------------------------------------------------
 
-  spacing: FormGroupStyle.spacing
+  sourceComponent: orientation === Qt.Horizontal ? hGroup : vGroup
   width: parent.maxItemWidth
 
   // ---------------------------------------------------------------------------
 
-  Text {
-    id: label
+  Component {
+    id: hGroup
 
-    Layout.preferredHeight: FormGroupStyle.legend.height
-    Layout.preferredWidth: FormGroupStyle.legend.width
-
-    color: FormGroupStyle.legend.color
-    elide: Text.ElideRight
-    font.pointSize: FormGroupStyle.legend.fontSize
-
-    horizontalAlignment: Text.AlignRight
-    verticalAlignment: Text.AlignVCenter
+    FormHGroup {
+      _content: loader._content
+      label: loader.label
+    }
   }
 
-  // ---------------------------------------------------------------------------
-
-  Item {
-    readonly property int currentHeight: _content ? _content.height : 0
-
-    Layout.alignment: (
-      currentHeight < FormGroupStyle.legend.height
-        ? Qt.AlignVCenter
-        : Qt.AlignTop
-    ) | Qt.AlignLeft
-
-    Layout.fillWidth: true
-    Layout.preferredHeight: currentHeight
-
-    Loader {
-      active: !!_content
-      anchors.fill: parent
-
-      sourceComponent: Item {
-        id: content
-
-        data: [ _content ]
-        width: parent.width
+  Component {
+    id: vGroup
 
-        Component.onCompleted: _content.width = Qt.binding(function () {
-          var contentWidth = content.width
-          var wishedWidth = FormGroupStyle.content.maxWidth
-          return contentWidth > wishedWidth ? wishedWidth : contentWidth
-        })
-      }
+    FormVGroup {
+      _content: loader._content
+      label: loader.label
     }
   }
 }

linphone-desktop/ui/modules/Common/Form/Placements/FormHGroup.qml

+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+
+import Common.Styles 1.0
+
+// =============================================================================
+
+RowLayout {
+  property alias label: label.text
+
+  default property var _content: null
+
+  // ---------------------------------------------------------------------------
+
+  spacing: FormHGroupStyle.spacing
+
+  // ---------------------------------------------------------------------------
+
+  Text {
+    id: label
+
+    Layout.preferredHeight: FormHGroupStyle.legend.height
+    Layout.preferredWidth: FormHGroupStyle.legend.width
+
+    color: FormHGroupStyle.legend.color
+    elide: Text.ElideRight
+    font.pointSize: FormHGroupStyle.legend.fontSize
+
+    horizontalAlignment: Text.AlignRight
+    verticalAlignment: Text.AlignVCenter
+  }
+
+  // ---------------------------------------------------------------------------
+
+  Item {
+    readonly property int currentHeight: _content ? _content.height : 0
+
+    Layout.alignment: (
+      currentHeight < FormHGroupStyle.legend.height
+        ? Qt.AlignVCenter
+        : Qt.AlignTop
+    ) | Qt.AlignLeft
+
+    Layout.fillWidth: true
+    Layout.preferredHeight: currentHeight
+
+    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 = FormHGroupStyle.content.maxWidth
+          return contentWidth > wishedWidth ? wishedWidth : contentWidth
+        })
+      }
+    }
+  }
+}

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

 import QtQuick 2.7
-import QtQuick.Layouts 1.3
 
 import Common.Styles 1.0
 
@@ -9,10 +8,13 @@ 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
+    var maxWidth = orientation === Qt.Horizontal
+      ? FormHGroupStyle.legend.width + FormHGroupStyle.content.maxWidth + FormHGroupStyle.spacing
+      : FormVGroupStyle.content.maxWidth
 
     return curWidth < maxWidth ? curWidth : maxWidth
   }
+  readonly property int orientation: parent.orientation
 
   // ---------------------------------------------------------------------------
 

linphone-desktop/ui/modules/Common/Form/Placements/FormVGroup.qml

+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+
+import Common.Styles 1.0
+
+// =============================================================================
+
+ColumnLayout {
+  property alias label: label.text
+
+  default property var _content: null
+
+  // ---------------------------------------------------------------------------
+
+  spacing: FormVGroupStyle.spacing
+  width: parent.maxItemWidth
+
+  // ---------------------------------------------------------------------------
+
+  Text {
+    id: label
+
+    Layout.fillWidth: true
+
+    color: FormVGroupStyle.legend.color
+    elide: Text.ElideRight
+
+    font {
+      bold: true
+      pointSize: FormVGroupStyle.legend.fontSize
+    }
+
+    verticalAlignment: Text.AlignVCenter
+  }
+
+  // ---------------------------------------------------------------------------
+
+  Item {
+    readonly property int currentHeight: _content ? _content.height : 0
+
+    Layout.fillWidth: true
+    Layout.preferredHeight: currentHeight
+
+    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 = FormVGroupStyle.content.maxWidth
+          return contentWidth > wishedWidth ? wishedWidth : contentWidth
+        })
+      }
+    }
+  }
+}

linphone-desktop/ui/modules/Common/Styles/Form/Placements/FormVGroupStyle.qml

+pragma Singleton
+import QtQuick 2.7
+
+import Common 1.0
+
+// =============================================================================
+
+QtObject {
+  property int spacing: 5
+
+  property QtObject content: QtObject {
+    property int maxWidth: 400
+  }
+
+  property QtObject legend: QtObject {
+    property color color: Colors.j
+    property int fontSize: 10
+  }
+}

linphone-desktop/ui/modules/Common/Styles/qmldir

@@ -28,11 +28,12 @@ singleton NumericFieldStyle         1.0 Form/Fields/NumericFieldStyle.qml
 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 FormHGroupStyle           1.0 Form/Placements/FormHGroupStyle.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 FormVGroupStyle           1.0 Form/Placements/FormVGroupStyle.qml
 
 singleton TabButtonStyle            1.0 Form/Tab/TabButtonStyle.qml
 singleton TabContainerStyle         1.0 Form/Tab/TabContainerStyle.qml