SettingsPage: update design

- moved view layout from appearance to callSettings
- changed layoutView from combobox to radio button
- removed rectangle on radiobutton for theme
- changed typo of appearance
- MaterialRadionButton, added icon, color variables, behavior on visibility

Change-Id: I3b088297799c9aeede6fd092d80fdf49cd89ced9

resources/icons/Horizontal_view.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.53" height="24.001" viewBox="0 0 31.53 24.001"><defs><style>.a,.c{fill:none;}.a{stroke:#005699;stroke-width:1.5px;}.b{stroke:none;}</style></defs><g transform="translate(1122.53 -712) rotate(90)"><g class="a" transform="translate(712 1122.53) rotate(-90)"><rect class="b" width="31.53" height="15.334"/><rect class="c" x="0.75" y="0.75" width="30.03" height="13.834"/></g><g class="a" transform="translate(726.667 1122.53) rotate(-90)"><rect class="b" width="31.53" height="9.333"/><rect class="c" x="0.75" y="0.75" width="30.03" height="7.833"/></g></g></svg>

resources/icons/Vertical_view.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.333" height="24" viewBox="0 0 31.333 24"><defs><style>.a,.c{fill:none;}.a{stroke:#005699;stroke-width:1.5px;}.b{stroke:none;}</style></defs><g transform="translate(-712 -1091)"><g class="a" transform="translate(712 1115) rotate(-90)"><rect class="b" width="24" height="22.667"/><rect class="c" x="0.75" y="0.75" width="22.5" height="21.167"/></g><g class="a" transform="translate(734 1115) rotate(-90)"><rect class="b" width="24" height="9.333"/><rect class="c" x="0.75" y="0.75" width="22.5" height="7.833"/></g></g></svg>

src/app/commoncomponents/MaterialRadioButton.qml

@@ -14,74 +14,122 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
+import Qt5Compat.GraphicalEffects
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
 import net.jami.Constants 1.1
 import net.jami.Models 1.1
 
 RadioButton {
     id: root
+    property color backgroundColor: JamiTheme.radioBackgroundColor
+    property color borderColor: JamiTheme.radioBorderColor
+    property color borderOuterRectangle: "transparent"
+    property color checkedColor: JamiTheme.radioBorderColor
+    property string iconSource: ""
+    property color textColor: JamiTheme.textColor
 
-    property string color: JamiTheme.textColor
+    height: implicitHeight
-    property string bgColor: ""
-    useSystemFocusVisuals: false
-
-    indicator: Rectangle {
-        id: rect
-        anchors.left: parent.left
-        anchors.verticalCenter: parent.verticalCenter
-        color: root.bgColor
-
-        border {
-            id: border
-            color: JamiTheme.buttonTintedBlue
-            width: 1
-        }
-
-        implicitWidth: 20
-        implicitHeight: 20
-        radius: 10
-
-        Rectangle {
-            id: innerRect
-
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            width: 10
-            height: 10
-            radius: 10
-            visible: checked || hovered
-
-            Behavior on visible  {
-                NumberAnimation {
-                    from: 0
-                    duration: JamiTheme.shortFadeDuration
-                }
-            }
-
-            color: JamiTheme.buttonTintedBlue
-
-            HoverHandler {
-                target: parent
-            }
-        }
-    }
-
-    contentItem: Text {
-        text: root.text
-        color: root.color
-        anchors.left: rect.right
-        anchors.leftMargin: root.spacing
-        verticalAlignment: Text.AlignVCenter
-        horizontalAlignment: Text.AlignLeft
-        font.pixelSize: JamiTheme.settingsDescriptionPixelSize
-    }
 
     Keys.onPressed: function (event) {
         if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
             root.checked = true;
         }
     }
+
+    Rectangle {
+        anchors.fill: parent
+        color: backgroundColor
+        radius: JamiTheme.settingsBoxRadius
+
+        border {
+            color: borderOuterRectangle
+            width: 1
+        }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: "transparent"
+        radius: JamiTheme.settingsBoxRadius
+        visible: checked || hovered
+
+        border {
+            color: borderColor
+            width: 1
+        }
+
+        Behavior on visible  {
+            enabled: hovered
+
+            NumberAnimation {
+                duration: JamiTheme.shortFadeDuration
+                from: 0
+            }
+        }
+    }
+
+    contentItem: RowLayout {
+        spacing: 10
+
+        anchors.left: root.indicator.right
+        anchors.leftMargin: root.spacing
+
+        ResponsiveImage {
+            color: borderColor
+            height: JamiTheme.radioImageSize
+            source: iconSource
+            visible: iconSource !== ""
+            width: JamiTheme.radioImageSize
+        }
+
+        Text {
+            color: textColor
+            font.pixelSize: JamiTheme.settingsDescriptionPixelSize
+            text: root.text
+            wrapMode: Text.WordWrap
+        }
+    }
+
+    indicator: Rectangle {
+        id: indicatorRectangle
+        anchors.left: parent.left
+        anchors.leftMargin: 18
+        anchors.verticalCenter: parent.verticalCenter
+        color: "transparent"
+        implicitHeight: 20
+        implicitWidth: 20
+        radius: JamiTheme.settingsBoxRadius
+        z: 1
+
+        border {
+            id: border
+            color: borderColor
+            width: 1
+        }
+        Rectangle {
+            id: innerRect
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            color: checkedColor
+            height: 12
+            radius: JamiTheme.settingsBoxRadius
+            visible: checked || hovered
+            width: 12
+
+            HoverHandler {
+                target: parent
+            }
+
+            Behavior on visible  {
+                enabled: hovered
+
+                NumberAnimation {
+                    duration: JamiTheme.shortFadeDuration
+                    from: 0
+                }
+            }
+        }
+    }
 }

src/app/commoncomponents/PhotoboothView.qml

@@ -34,7 +34,7 @@ Item {
     property real avatarSize
     property bool doubleEditAvatar: false
 
-    height: Math.max(avatarSize, buttonSize)
+    height: avatarSize
 
     Rectangle {
         id: imageLayer

src/app/constant/JamiStrings.qml

@@ -886,7 +886,7 @@ Item {
     property string enableAccountDescription: qsTr("Enabling your account allows you to be contacted on Jami")
 
     // General
-    property string appearence: qsTr("Appearance")
+    property string appearance: qsTr("Appearance")
 
     // System
     property string experimental: qsTr("Experimental")

src/app/constant/JamiTheme.qml

@@ -142,7 +142,7 @@ Item {
     property color switchHandleBorderColor: tintedBlue
     property color switchHandleCheckedBorderColor: darkTheme ? "#0071c9" : "#005699"
 
-    //Combobox
+    // Combobox
     property color comboBoxBackgroundColor: darkTheme ? editBackgroundColor : selectedColor
     property color comboboxBorderColorActive: darkTheme ? "#03B9E9" : "#005699"
     property color comboboxBorderColor: darkTheme ? "#1D5F70" : "#A3C2DA"
@@ -151,11 +151,11 @@ Item {
     property color comboboxTextColor: darkTheme ? "#03B9E9" : "#005699"
     property color comboboxTextColorHovered: tintedBlue
 
-    //Spinbox
+    // Spinbox
     property color spinboxBackgroundColor: darkTheme ? editBackgroundColor : selectedColor
     property color spinboxBorderColor: darkTheme ? "#1D5F70" : "#A3C2DA"
 
-    //Toast
+    // Toast
     property color toastColor: darkTheme ? "#f0f0f0" : "#000000"
     property color toastRectColor: !darkTheme ? "#f0f0f0" : "#000000"
     property real toastFontSize: calcSize(15)
@@ -231,7 +231,7 @@ Item {
     property color messageWebViewFooterButtonImageColor: darkTheme ? "#838383" : "#656565"
     property color chatviewUsernameColor: "#A7A7A7"
 
-    //ChatView Footer
+    // ChatView Footer
     property color chatViewFooterListColor: darkTheme ? blackColor : "#E5E5E5"
     property color chatViewFooterImgColor: darkTheme ? whiteColor : blackColor
     property color showMoreButtonOpenColor: darkTheme ? "#123F4A" : "#CCCCCC"
@@ -239,13 +239,13 @@ Item {
     property color chatViewFooterSendButtonColor: darkTheme ? "#03B9E9" : "#005699"
     property color chatViewFooterSendButtonImgColor: darkTheme ? blackColor : whiteColor
 
-    //mapPosition
+    // mapPosition
     property color mapButtonsOverlayColor: darkTheme ? "#000000" : "#f0f0f0"
     property color mapButtonColor: darkTheme ? "#f0f0f0" : "#000000"
     property color sharePositionIndicatorColor: darkTheme ? "#03B9E9" : "#005699"
     property color sharedPositionIndicatorColor: darkTheme ? whiteColor : blackColor
 
-    //EmojiReact
+    // EmojiReact
     property real emojiBubbleSize: calcSize(17)
     property real emojiBubbleSizeBig: calcSize(21)
     property real emojiReactSize: calcSize(12)
@@ -271,7 +271,7 @@ Item {
     property color typingDotsNormalColor: darkTheme ? "#686b72" : "lightgrey"
     property color typingDotsEnlargeColor: darkTheme ? "white" : Qt.darker("lightgrey", 3.0)
 
-    // Font.
+    // Font
     property color faddedFontColor: darkTheme ? "#c0c0c0" : "#a0a0a0"
     property color faddedLastInteractionFontColor: darkTheme ? "#c0c0c0" : "#505050"
 
@@ -383,7 +383,7 @@ Item {
     property real recordingBtnSize: 12
     property real recordingIndicatorSize: 24
 
-    //TimestampInfo
+    // TimestampInfo
     property int timestampLinePadding: 40
     property int dayTimestampTopMargin: 8
     property int dayTimestampBottomMargin: 8
@@ -394,7 +394,7 @@ Item {
     property real timestampFont: calcSize(12)
     property int timestampIntervalTime: 120
 
-    //swarmDetailsPage
+    // SwarmDetailsPage
     property real swarmDetailsPageTopMargin: 32
     property real swarmDetailsPageDocumentsMargins: 5
     property real swarmDetailsPageDocumentsMediaRadius: 15
@@ -403,7 +403,7 @@ Item {
     property real swarmDetailsPageDocumentsHeight: 40 * baseZoom
     property real swarmDetailsPageDocumentsMinHeight: 40
 
-    //Call information
+    // Call information
     property real textFontPointSize: calcSize(10)
     property real titleFontPointSize: calcSize(13)
     property color callInfoColor: whiteColor
@@ -535,11 +535,11 @@ Item {
 
     property real cornerIconSize: 40
 
-    //InfoBox
+    // InfoBox
     property real infoBoxTitleFontSize: calcSize(13)
     property real infoBoxDescFontSize: calcSize(12)
 
-    //Tipbox
+    // Tipbox
     property real tipBoxTitleFontSize: calcSize(13)
     property real tipBoxContentFontSize: calcSize(12)
     property color tipBoxBackgroundColor: darkTheme ? blackColor : whiteColor
@@ -548,10 +548,10 @@ Item {
     property color tooltipShortCutBackgroundColor: darkTheme ? blackColor : "#2c2c2c"
     property color tooltipShortCutTextColor: "#a7a7a7"
 
-    //sharePosition
+    // SharePosition
     property real timerButtonsFontSize: calcSize(11)
 
-    //Popups
+    // Popups
     property real popuptextSize: calcSize(15)
     property real popupButtonsMargin: 20
     property real popupPhotoTextSize: calcSize(18)
@@ -564,7 +564,7 @@ Item {
     property real textEditError: calcSize(15)
     property real maximumCharacters: 50
 
-    //MaterialButton
+    // MaterialButton
     property real buttontextPadding: 10
     property real buttontextWizzardPadding: 30
     property real buttontextHeightMargin: 21
@@ -577,7 +577,7 @@ Item {
     // JamiScrollBar
     property int scrollBarHandleSize: 6
 
-    //KeyboardShortcutTable
+    // KeyboardShortcutTable
     property int titleRectMargin: 25
     property int keyboardShortcutTabBarSize: 24
     property int keyboardShortcutDelegateSize: 50
@@ -616,6 +616,17 @@ Item {
     property int settingsMenuHeaderButtonHeight: 50
     property int settingsListViewsSpacing: 10
 
+    // MaterialRadioButton
+    property int radioImageSize: 30
+    property color radioBackgroundColor: darkTheme ? "#515151" : "#F0EFEF"
+    property color radioBorderColor: darkTheme ? "#03B9E9" : "#005699"
+    property color lightThemeBackgroundColor: JamiTheme.whiteColor
+    property color lightThemeCheckedColor: "#005699"
+    property color lightThemeBorderColor: "#005699"
+    property color darkThemeBackgroundColor: JamiTheme.darkTheme ? JamiTheme.blackColor : JamiTheme.bgDarkMode_
+    property color darkThemeCheckedColor: "#03B9E9"
+    property color darkThemeBorderColor: "#03B9E9"
+
     function setTheme(dark) {
         darkTheme = dark;
     }

src/app/settingsview/SettingsSidePanel.qml

@@ -67,7 +67,7 @@ SidePanelBase {
                         "title": JamiStrings.system
                     }, {
                         "id": 6,
-                        "title": JamiStrings.appearence
+                        "title": JamiStrings.appearance
                     }, {
                         "id": 7,
                         "title": JamiStrings.locationSharingLabel

src/app/settingsview/SettingsView.qml

@@ -41,7 +41,7 @@ ListSelectionView {
         "CallSettingsPage": Qt.resolvedUrl("components/CallSettingsPage.qml"),
         "AdvancedSettingsPage": Qt.resolvedUrl("components/AdvancedSettingsPage.qml"),
         "SystemSettingsPage": Qt.resolvedUrl("components/SystemSettingsPage.qml"),
-        "AppearenceSettingsPage": Qt.resolvedUrl("components/AppearenceSettingsPage.qml"),
+        "AppearanceSettingsPage": Qt.resolvedUrl("components/AppearanceSettingsPage.qml"),
         "LocationSharingSettingsPage": Qt.resolvedUrl("components/LocationSharingSettingsPage.qml"),
         "FileTransferSettingsPage": Qt.resolvedUrl("components/FileTransferSettingsPage.qml"),
         "CallRecordingSettingsPage": Qt.resolvedUrl("components/CallRecordingSettingsPage.qml"),
@@ -116,7 +116,7 @@ ListSelectionView {
                 replace(currentItem, viewNode.resources["SystemSettingsPage"], StackView.Immediate);
                 break;
             case 6:
-                replace(currentItem, viewNode.resources["AppearenceSettingsPage"], StackView.Immediate);
+                replace(currentItem, viewNode.resources["AppearanceSettingsPage"], StackView.Immediate);
                 break;
             case 7:
                 replace(currentItem, viewNode.resources["LocationSharingSettingsPage"], StackView.Immediate);

src/app/settingsview/components/AppearanceSettingsPage.qml

@@ -32,10 +32,10 @@ SettingsPageBase {
 
     property int itemWidth: 188
 
-    title: JamiStrings.appearence
+    title: JamiStrings.appearance
 
     flickableContent: ColumnLayout {
-        id: appearenceSettingsColumnLayout
+        id: appearanceSettingsColumnLayout
 
         width: contentFlickableWidth
         spacing: JamiTheme.settingsBlockSpacing
@@ -70,10 +70,8 @@ SettingsPageBase {
                 Layout.fillWidth: true
 
                 checked: UtilsAdapter.getAppValue(Settings.EnableTypingIndicator)
-
                 labelText: JamiStrings.enableTypingIndicator
                 descText: JamiStrings.enableTypingIndicatorDescription
-
                 tooltipText: JamiStrings.enableTypingIndicator
 
                 onSwitchToggled: UtilsAdapter.setAppValue(Settings.Key.EnableTypingIndicator, checked)
@@ -96,57 +94,12 @@ SettingsPageBase {
                     UtilsAdapter.setAppValue(Settings.Key.DisplayHyperlinkPreviews, checked);
                 }
             }
-
-            SettingsComboBox {
-                id: outputComboBoxSetting
-
-                Layout.fillWidth: true
-                Layout.preferredHeight: JamiTheme.preferredFieldHeight
-
-                labelText: JamiStrings.layout
-                tipText: JamiStrings.layout
-                comboModel: ListModel {
-                    id: layoutModel
-                    Component.onCompleted: {
-                        append({
-                                "textDisplay": JamiStrings.horizontalViewOpt
-                            });
-                        append({
-                                "textDisplay": JamiStrings.verticalViewOpt
-                            });
-                    }
-                }
-                widthOfComboBox: itemWidth
-                role: "textDisplay"
-
-                modelIndex: UtilsAdapter.getAppValue(Settings.Key.ShowChatviewHorizontally) ? 1 : 0
-
-                onActivated: {
-                    UtilsAdapter.setAppValue(Settings.Key.ShowChatviewHorizontally, comboModel.get(modelIndex).textDisplay === JamiStrings.verticalViewOpt);
-                }
-
-                Connections {
-                    target: UtilsAdapter
-
-                    function onChangeLanguage() {
-                        var idx = outputComboBoxSetting.modelIndex;
-                        layoutModel.clear();
-                        layoutModel.append({
-                                "textDisplay": JamiStrings.horizontalViewOpt
-                            });
-                        layoutModel.append({
-                                "textDisplay": JamiStrings.verticalViewOpt
-                            });
-                        outputComboBoxSetting.modelIndex = idx;
-                    }
-                }
-            }
         }
 
         ColumnLayout {
             id: themeSettings
 
-            Layout.preferredWidth: parent.width
+            width: parent.width
             spacing: JamiTheme.settingsCategorySpacing
 
             property var nativeDarkThemeShift: UtilsAdapter.hasNativeDarkTheme() ? 1 : 0
@@ -179,104 +132,66 @@ SettingsPageBase {
                 font.kerning: true
             }
 
-            ButtonGroup {
-                id: optionsB
-            }
-
             Flow {
 
                 Layout.preferredWidth: parent.width
                 Layout.preferredHeight: childrenRect.height
-                spacing: 5
+                spacing: 10
+
+                ButtonGroup {
+                    id: optionsB
+                }
+
+                MaterialRadioButton {
+                    id: lightThemeButton
 
-                Rectangle {
-                    id: lightThemeButtonBg
                     width: 165
                     height: 60
-                    border.color: JamiTheme.darkTheme ? "transparent" : JamiTheme.tintedBlue
+                    backgroundColor: JamiTheme.lightThemeBackgroundColor
-                    color: JamiTheme.whiteColor
+                    textColor: JamiTheme.blackColor
-                    radius: JamiTheme.settingsBoxRadius
+                    checkedColor: JamiTheme.lightThemeCheckedColor
+                    borderColor: JamiTheme.lightThemeBorderColor
+                    borderOuterRectangle: JamiTheme.radioBackgroundColor
 
-                    MaterialRadioButton {
+                    text: JamiStrings.light
-                        id: lightThemeButton
+                    ButtonGroup.group: optionsB
 
-                        property bool focusOnChild: true
+                    onCheckedChanged: {
-                        anchors.fill: parent
+                        if (checked)
-                        anchors.leftMargin: 19
+                            UtilsAdapter.setAppValue(Settings.Key.AppTheme, "Light");
-
-                        text: JamiStrings.light
-                        ButtonGroup.group: optionsB
-                        color: JamiTheme.blackColor
-                        bgColor: lightThemeButtonBg.color
-
-                        KeyNavigation.down: darkThemeButton
-                        KeyNavigation.tab: KeyNavigation.down
-
-                        onCheckedChanged: {
-                            if (checked)
-                                UtilsAdapter.setAppValue(Settings.Key.AppTheme, "Light");
-                        }
                     }
                 }
 
-                Rectangle {
+                MaterialRadioButton {
-                    id: darkThemeButtonBg
+                    id: darkThemeButton
 
                     width: 165
                     height: 60
-                    color: JamiTheme.darkTheme ? JamiTheme.blackColor : JamiTheme.bgDarkMode_
+                    backgroundColor: JamiTheme.darkThemeBackgroundColor
-                    border.color: JamiTheme.darkTheme ? JamiTheme.tintedBlue : "transparent"
+                    textColor: JamiTheme.whiteColor
-                    radius: JamiTheme.settingsBoxRadius
+                    checkedColor: JamiTheme.darkThemeCheckedColor
+                    borderColor: JamiTheme.darkThemeBorderColor
 
-                    MaterialRadioButton {
+                    text: JamiStrings.dark
-                        id: darkThemeButton
+                    ButtonGroup.group: optionsB
 
-                        property bool focusOnChild: true
+                    onCheckedChanged: {
-                        anchors.fill: parent
+                        if (checked)
-                        anchors.leftMargin: 19
+                            UtilsAdapter.setAppValue(Settings.Key.AppTheme, "Dark");
-
-                        text: JamiStrings.dark
-                        ButtonGroup.group: optionsB
-                        color: JamiTheme.whiteColor
-                        bgColor: darkThemeButtonBg.color
-
-                        KeyNavigation.up: lightThemeButton
-                        KeyNavigation.down: sysThemeButton
-                        KeyNavigation.tab: KeyNavigation.down
-
-                        onCheckedChanged: {
-                            if (checked)
-                                UtilsAdapter.setAppValue(Settings.Key.AppTheme, "Dark");
-                        }
                     }
                 }
 
-                Rectangle {
+                MaterialRadioButton {
-                    id: sysThemeButtonBg
+                    id: sysThemeButton
 
                     width: 165
                     height: 60
-                    color: JamiTheme.darkTheme ? "#515151" : JamiTheme.sysColor
+                    text: JamiStrings.system
-                    radius: JamiTheme.settingsBoxRadius
+                    ButtonGroup.group: optionsB
 
-                    MaterialRadioButton {
+                    onCheckedChanged: {
-                        id: sysThemeButton
+                        if (checked)
-
+                            UtilsAdapter.setAppValue(Settings.Key.AppTheme, "System");
-                        property bool focusOnChild: true
-                        anchors.fill: parent
-                        anchors.leftMargin: 19
-
-                        text: JamiStrings.system
-                        ButtonGroup.group: optionsB
-                        color: JamiTheme.darkTheme ? JamiTheme.whiteColor : JamiTheme.blackColor
-                        bgColor: sysThemeButtonBg.color
-
-                        KeyNavigation.up: darkThemeButton
-
-                        onCheckedChanged: {
-                            if (checked)
-                                UtilsAdapter.setAppValue(Settings.Key.AppTheme, "System");
-                        }
                     }
                 }
             }
@@ -310,6 +225,7 @@ SettingsPageBase {
                 Layout.alignment: Qt.AlignLeft
                 Layout.fillWidth: true
                 Layout.fillHeight: true
+                Layout.topMargin: 10
 
                 value: Math.round(UtilsAdapter.getAppValue(Settings.BaseZoom) * 100.0)
 

src/app/settingsview/components/CallSettingsPage.qml

@@ -17,6 +17,7 @@
  */
 import QtQuick
 import QtQuick.Layouts
+import QtQuick.Controls
 import QtMultimedia
 import net.jami.Models 1.1
 import net.jami.Adapters 1.1
@@ -301,5 +302,80 @@ SettingsPageBase {
                 }
             }
         }
+
+        ColumnLayout {
+            id: chatViewSettings
+
+            width: parent.width
+            spacing: 9
+
+            function isComplete() {
+                var horizontalView = UtilsAdapter.getAppValue(Settings.Key.ShowChatviewHorizontally) ? 1 : 0;
+                verticalRadio.checked = horizontalView === 0;
+                horizontalRadio.checked = horizontalView === 1;
+            }
+
+            Component.onCompleted: chatViewSettings.isComplete()
+
+            Text {
+
+                Layout.alignment: Qt.AlignLeft
+                Layout.preferredWidth: parent.width
+
+                text: JamiStrings.chatSettingsTitle
+                color: JamiTheme.textColor
+                horizontalAlignment: Text.AlignLeft
+                verticalAlignment: Text.AlignVCenter
+                wrapMode: Text.WordWrap
+
+                font.pixelSize: JamiTheme.settingsTitlePixelSize
+                font.kerning: true
+            }
+
+            Flow {
+
+                Layout.preferredWidth: parent.width
+                Layout.preferredHeight: childrenRect.height
+                spacing: 5
+
+                ButtonGroup {
+                    id: optionsB
+                }
+
+                MaterialRadioButton {
+                    id: verticalRadio
+                    width: 255
+                    height: 60
+
+                    text: JamiStrings.verticalViewOpt
+                    ButtonGroup.group: optionsB
+                    iconSource: JamiResources.horizontal_view_svg
+
+                    onCheckedChanged: {
+                        if (checked) {
+                            UtilsAdapter.setAppValue(Settings.Key.ShowChatviewHorizontally, false);
+                        }
+                    }
+                }
+
+                MaterialRadioButton {
+                    id: horizontalRadio
+
+                    width: 255
+                    height: 60
+
+                    text: JamiStrings.horizontalViewOpt
+                    ButtonGroup.group: optionsB
+                    //color: JamiTheme.blackColor
+                    iconSource: JamiResources.vertical_view_svg
+
+                    onCheckedChanged: {
+                        if (checked) {
+                            UtilsAdapter.setAppValue(Settings.Key.ShowChatviewHorizontally, true);
+                        }
+                    }
+                }
+            }
+        }
     }
 }

src/app/wizardview/components/CreateSIPAccountPage.qml

@@ -26,14 +26,14 @@ import "../../commoncomponents"
 
 Rectangle {
     id: root
-
     property int preferredHeight: createSIPAccountPageColumnLayout.implicitHeight + 2 * JamiTheme.preferredMarginSize
 
-    signal showThisPage
+    color: JamiTheme.secondaryBackgroundColor
 
     function clearAllTextFields() {
         UtilsAdapter.setTempCreationImageFromString();
     }
+    signal showThisPage
 
     Connections {
         target: WizardViewStepModel
@@ -46,168 +46,132 @@ Rectangle {
             }
         }
     }
-
-    color: JamiTheme.secondaryBackgroundColor
-
     StackLayout {
         id: createAccountStack
-
-        objectName: "createAccountStack"
         anchors.fill: parent
+        objectName: "createAccountStack"
 
         Rectangle {
-
             Layout.fillHeight: true
             Layout.fillWidth: true
             color: JamiTheme.secondaryBackgroundColor
 
             ColumnLayout {
                 id: createSIPAccountPageColumnLayout
-
-                spacing: JamiTheme.wizardViewPageLayoutSpacing
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.verticalCenter: parent.verticalCenter
+                spacing: JamiTheme.wizardViewPageLayoutSpacing
                 width: Math.max(508, root.width - 100)
 
                 Label {
-
-                    text: JamiStrings.sipAccount
                     Layout.alignment: Qt.AlignCenter
                     Layout.preferredWidth: Math.min(450, root.width - JamiTheme.preferredMarginSize * 2)
                     Layout.topMargin: JamiTheme.preferredMarginSize
+                    color: JamiTheme.textColor
                     font.pixelSize: JamiTheme.wizardViewTitleFontPixelSize
                     horizontalAlignment: Text.AlignHCenter
+                    text: JamiStrings.sipAccount
                     verticalAlignment: Text.AlignVCenter
-                    color: JamiTheme.textColor
                 }
-
                 Label {
-                    text: JamiStrings.configureExistingSIP
+                    Layout.alignment: Qt.AlignCenter
                     Layout.preferredWidth: Math.min(360, root.width - JamiTheme.preferredMarginSize * 2)
                     Layout.topMargin: JamiTheme.wizardViewDescriptionMarginSize
-                    Layout.alignment: Qt.AlignCenter
+                    color: JamiTheme.textColor
                     font.pixelSize: JamiTheme.wizardViewDescriptionFontPixelSize
                     font.weight: Font.Medium
-                    wrapMode: Text.WordWrap
                     horizontalAlignment: Text.AlignHCenter
+                    text: JamiStrings.configureExistingSIP
                     verticalAlignment: Text.AlignVCenter
-                    color: JamiTheme.textColor
+                    wrapMode: Text.WordWrap
                 }
-
                 ModalTextEdit {
                     id: sipServernameEdit
-
+                    KeyNavigation.down: sipUsernameEdit
-                    objectName: "sipServernameEdit"
+                    KeyNavigation.tab: KeyNavigation.down
-
+                    KeyNavigation.up: backButton
                     Layout.alignment: Qt.AlignCenter
                     Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
                     Layout.topMargin: JamiTheme.wizardViewBlocMarginSize
-
+                    objectName: "sipServernameEdit"
                     placeholderText: JamiStrings.server
 
-                    KeyNavigation.tab: KeyNavigation.down
-                    KeyNavigation.up: backButton
-                    KeyNavigation.down: sipUsernameEdit
-
                     onAccepted: sipUsernameEdit.forceActiveFocus()
                 }
-
                 ModalTextEdit {
                     id: sipUsernameEdit
-
+                    KeyNavigation.down: sipPasswordEdit
-                    objectName: "sipUsernameEdit"
+                    KeyNavigation.tab: KeyNavigation.down
-
+                    KeyNavigation.up: sipServernameEdit
                     Layout.alignment: Qt.AlignCenter
                     Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
                     Layout.topMargin: JamiTheme.wizardViewMarginSize
-
+                    objectName: "sipUsernameEdit"
                     placeholderText: JamiStrings.username
 
-                    KeyNavigation.tab: KeyNavigation.down
-                    KeyNavigation.up: sipServernameEdit
-                    KeyNavigation.down: sipPasswordEdit
-
                     onAccepted: sipPasswordEdit.forceActiveFocus()
                 }
-
                 PasswordTextEdit {
                     id: sipPasswordEdit
-
+                    KeyNavigation.down: tlsRadioButton
-                    objectName: "sipPasswordEdit"
+                    KeyNavigation.tab: KeyNavigation.down
-
+                    KeyNavigation.up: sipUsernameEdit
                     Layout.alignment: Qt.AlignCenter
                     Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
                     Layout.topMargin: JamiTheme.wizardViewMarginSize
-
+                    objectName: "sipPasswordEdit"
                     placeholderText: JamiStrings.password
 
-                    KeyNavigation.tab: KeyNavigation.down
-                    KeyNavigation.up: sipUsernameEdit
-                    KeyNavigation.down: tlsRadioButton
-
                     onAccepted: tlsRadioButton.forceActiveFocus()
                 }
+                Flow {
+                    Layout.alignment: Qt.AlignCenter
+                    Layout.preferredHeight: childrenRect.height
+                    Layout.preferredWidth: tlsRadioButton.width + udpRadioButton.width + 10
+                    Layout.topMargin: JamiTheme.wizardViewMarginSize
+                    spacing: 10
 
-                ButtonGroup {
+                    ButtonGroup {
-                    id: optionsB
+                        id: optionsB
-                }
+                    }
-
-                RowLayout {
-
-                    Layout.alignment: Qt.AlignHCenter
-                    Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
-                    Layout.topMargin: JamiTheme.wizardViewBlocMarginSize
-
                     MaterialRadioButton {
                         id: tlsRadioButton
-                        Layout.alignment: Qt.AlignHCenter
-                        text: JamiStrings.tls
                         ButtonGroup.group: optionsB
-                        checked: true
-                        bgColor: JamiTheme.secondaryBackgroundColor
 
-                        KeyNavigation.up: sipPasswordEdit
                         KeyNavigation.down: udpRadioButton
                         KeyNavigation.tab: KeyNavigation.down
-                    }
+                        KeyNavigation.up: sipPasswordEdit
 
+                        checked: true
+
+                        height: 40
+                        text: JamiStrings.tls
+                        width: 120
+                    }
                     MaterialRadioButton {
                         id: udpRadioButton
-                        Layout.alignment: Qt.AlignHCenter
-                        text: JamiStrings.udp
                         ButtonGroup.group: optionsB
-                        color: JamiTheme.textColor
-                        bgColor: JamiTheme.secondaryBackgroundColor
 
-                        KeyNavigation.up: tlsRadioButton
                         KeyNavigation.down: createAccountButton
                         KeyNavigation.tab: KeyNavigation.down
+                        KeyNavigation.up: tlsRadioButton
+
+                        height: 40
+                        text: JamiStrings.udp
+                        width: 120
                     }
                 }
-
                 MaterialButton {
                     id: createAccountButton
-
-                    TextMetrics {
-                        id: textSize
-                        font.weight: Font.Bold
-                        font.pixelSize: JamiTheme.wizardViewDescriptionFontPixelSize
-                        text: createAccountButton.text
-                    }
-
-                    objectName: "createSIPAccountButton"
-
-                    Layout.alignment: Qt.AlignCenter
-                    Layout.topMargin: JamiTheme.wizardViewBlocMarginSize
-
-                    preferredWidth: textSize.width + 2 * JamiTheme.buttontextWizzardPadding
-                    primary: true
-
-                    text: JamiStrings.addSip
-
-                    KeyNavigation.up: udpRadioButton
                     KeyNavigation.down: personalizeAccount
                     KeyNavigation.tab: KeyNavigation.down
+                    KeyNavigation.up: udpRadioButton
+                    Layout.alignment: Qt.AlignCenter
+                    Layout.topMargin: JamiTheme.wizardViewBlocMarginSize
+                    objectName: "createSIPAccountButton"
+                    preferredWidth: textSize.width + 2 * JamiTheme.buttontextWizzardPadding
+                    primary: true
+                    text: JamiStrings.addSip
 
                     onClicked: {
                         WizardViewStepModel.accountCreationInfo = JamiQmlUtils.setUpAccountCreationInputPara({
@@ -220,82 +184,77 @@ Rectangle {
                             });
                         WizardViewStepModel.nextStep();
                     }
-                }
-
-                MaterialButton {
-                    id: personalizeAccount
 
                     TextMetrics {
-                        id: personalizeAccountTextSize
+                        id: textSize
-                        font.weight: Font.Bold
                         font.pixelSize: JamiTheme.wizardViewDescriptionFontPixelSize
-                        text: personalizeAccount.text
+                        font.weight: Font.Bold
+                        text: createAccountButton.text
                     }
-
+                }
-                    text: JamiStrings.personalizeAccount
+                MaterialButton {
-                    tertiary: true
+                    id: personalizeAccount
-                    secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
+                    KeyNavigation.down: backButton
-                    preferredWidth: personalizeAccountTextSize.width + 2 * JamiTheme.buttontextWizzardPadding + 1
+                    KeyNavigation.tab: KeyNavigation.down
-
+                    KeyNavigation.up: createAccountButton
                     Layout.alignment: Qt.AlignCenter
                     Layout.bottomMargin: JamiTheme.wizardViewPageBackButtonMargins * 2
                     Layout.topMargin: JamiTheme.wizardViewBlocMarginSize
-
+                    preferredWidth: personalizeAccountTextSize.width + 2 * JamiTheme.buttontextWizzardPadding + 1
-                    KeyNavigation.up: createAccountButton
+                    secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
-                    KeyNavigation.down: backButton
+                    tertiary: true
-                    KeyNavigation.tab: KeyNavigation.down
+                    text: JamiStrings.personalizeAccount
 
                     onClicked: createAccountStack.currentIndex += 1
+
+                    TextMetrics {
+                        id: personalizeAccountTextSize
+                        font.pixelSize: JamiTheme.wizardViewDescriptionFontPixelSize
+                        font.weight: Font.Bold
+                        text: personalizeAccount.text
+                    }
                 }
             }
         }
-
         Rectangle {
-
             Layout.fillHeight: true
             Layout.fillWidth: true
             color: JamiTheme.secondaryBackgroundColor
 
             ColumnLayout {
-                spacing: JamiTheme.wizardViewPageLayoutSpacing
-
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.verticalCenter: parent.verticalCenter
 
                 width: Math.max(508, root.width - 100)
 
                 Label {
-
-                    text: JamiStrings.personalizeAccount
                     Layout.alignment: Qt.AlignCenter
                     Layout.preferredWidth: Math.min(450, root.width - JamiTheme.preferredMarginSize * 2)
                     Layout.topMargin: JamiTheme.preferredMarginSize
+                    color: JamiTheme.textColor
                     font.pixelSize: 26
                     horizontalAlignment: Text.AlignHCenter
+                    text: JamiStrings.personalizeAccount
                     verticalAlignment: Text.AlignVCenter
-                    color: JamiTheme.textColor
                 }
-
                 PhotoboothView {
                     id: currentAccountAvatar
-                    width: avatarSize
-                    height: avatarSize
-
                     Layout.alignment: Qt.AlignCenter
                     Layout.topMargin: 50
 
+                    avatarSize: 150
+                    width: avatarSize
+                    height: avatarSize
+
                     newItem: true
                     imageId: visible ? "temp" : ""
-                    avatarSize: 150
 
                     KeyNavigation.up: backButton
                     KeyNavigation.down: displayNameLineEdit
                     KeyNavigation.tab: KeyNavigation.down
                 }
-
                 ModalTextEdit {
                     id: displayNameLineEdit
-
                     Layout.alignment: Qt.AlignCenter
                     Layout.preferredWidth: Math.min(300, root.width - JamiTheme.preferredMarginSize * 2)
                     Layout.topMargin: 30
@@ -305,25 +264,21 @@ Rectangle {
                     KeyNavigation.down: backButton
                     KeyNavigation.tab: KeyNavigation.down
                 }
-
                 Text {
-
-                    Layout.topMargin: JamiTheme.preferredMarginSize
                     Layout.alignment: Qt.AlignCenter
                     Layout.preferredWidth: Math.min(320, root.width - JamiTheme.preferredMarginSize * 2)
+                    Layout.topMargin: JamiTheme.preferredMarginSize
+                    color: JamiTheme.textColor
+                    font.pixelSize: JamiTheme.headerFontSize
                     horizontalAlignment: Text.AlignHCenter
+                    lineHeight: JamiTheme.wizardViewTextLineHeight
+                    text: JamiStrings.customizeProfileDescription
                     verticalAlignment: Text.AlignVCenter
                     wrapMode: Text.WordWrap
-
-                    text: JamiStrings.customizeProfileDescription
-                    lineHeight: JamiTheme.wizardViewTextLineHeight
-                    font.pixelSize: JamiTheme.headerFontSize
-                    color: JamiTheme.textColor
                 }
             }
         }
     }
-
     BackButton {
         id: backButton