updated language modal

ui/app/AppLayouts/Profile/Sections/Data/locales.js

@@ -1,17 +1,17 @@
 var locales = [
-            "en",
+            {locale: "en", name: "English"},
-            "ar",
+            {locale: "ar", name: "Arabic"},
-            "de",
+            {locale: "de", name: "Dutch"},
-            "es",
+            {locale: "es", name: "Spanish"},
-            "fil",
+            {locale: "fil", name: "Filipino"},
-            "fr",
+            {locale: "fr", name: "French"},
-            "id",
+            {locale: "id", name: "Indonesian"},
-            "it",
+            {locale: "it", name: "Italian"},
-            "ko",
+            {locale: "ko", name: "Korean"},
-            "pt_BR",
+            {locale: "pt_BR", name: "Portuguese (Brazil)"},
-            "ru",
+            {locale: "ru", name: "Russian"},
-            "tr",
+            {locale: "tr", name: "Turkish"},
-            "ur",
+            {locale: "ur", name: "Urdu"},
-            "zh",
+            {locale: "zh", name: "Chinese (Mainland China)"},
-            "zh_TW",
+            {locale: "zh_TW", name: "Chinese (Taiwan)"}
-];
+];

ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import "../../../../imports"
 import "../../../../shared"
+import "../../../../shared/status"
 import "./Data/locales.js" as Locales_JSON
 
 Item {
@@ -10,65 +11,25 @@ Item {
     Layout.fillHeight: true
     Layout.fillWidth: true
 
+    property Component languagePopup: LanguageModal {}
+
     Item {
+        anchors.top: parent.top
+        anchors.topMargin: topMargin
+        anchors.bottom: parent.bottom
         width: contentMaxWidth
         anchors.horizontalCenter: parent.horizontalCenter
 
-        RowLayout {
+        Column {
-            property string currentLocale: appSettings.locale
+            id: generalColumn
-            id: languageSetting
+            width: parent.width
-            anchors.top: parent.top
+
-            anchors.topMargin: 24
+            StatusSettingsLineButton {
-            anchors.left: parent.left
-            anchors.leftMargin: 24
-            StyledText {
                 //% "Language"
                 text: qsTrId("language")
-            }
+                //% "Default"
-            Select {
+                currentValue: appSettings.locale === "" ? qsTrId("default") : appSettings.locale
-                id: select
+                onClicked: languagePopup.createObject(languageContainer).open()
-                anchors.right: undefined
-                anchors.left: undefined
-                width: 100
-                Layout.leftMargin: Style.current.padding
-                model: Locales_JSON.locales
-                selectedItemView: Item {
-                    anchors.fill: parent
-                    StyledText {
-                        id: selectedTextField
-                        text: languageSetting.currentLocale
-                        anchors.left: parent.left
-                        anchors.leftMargin: Style.current.padding
-                        anchors.verticalCenter: parent.verticalCenter
-                        font.pixelSize: 15
-                        verticalAlignment: Text.AlignVCenter
-                        height: 22
-                    }
-                }
-                menu.delegate: Component {
-                    MenuItem {
-                        id: menuItem
-                        height: itemText.height + 4
-                        width: parent.width
-                        padding: 10
-                        onTriggered: function () {
-                            const locale = Locales_JSON.locales[index]
-                            profileModel.changeLocale(locale)
-                            appSettings.locale = locale
-                        }
-
-                        StyledText {
-                            id: itemText
-                            text: Locales_JSON.locales[index]
-                            anchors.left: parent.left
-                            anchors.leftMargin: 5
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-                        background: Rectangle {
-                            color: menuItem.highlighted ? Style.current.backgroundHover : Style.current.transparent
-                        }
-                    }
-                }
             }
         }
     }

ui/app/AppLayouts/Profile/Sections/LanguageModal.qml

@@ -0,0 +1,51 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import "../../../../imports"
+import "../../../../shared"
+import "../../../../shared/status"
+import "./Data/locales.js" as Locales_JSON
+
+ModalPopup {
+    id: popup
+
+    //% "Language"
+    title: qsTrId("Language")
+
+    onClosed: {
+        destroy()
+    }
+
+    Column {
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.rightMargin: Style.current.padding
+        anchors.leftMargin: Style.current.padding
+        height: 50
+
+        spacing: Style.current.padding
+
+        ButtonGroup {
+            id: languageGroup
+        }
+
+        Repeater {
+            model: Locales_JSON.locales
+            height: 50
+
+            StatusRadioButtonRow {
+                text: modelData.name
+                buttonGroup: languageGroup
+                checked: appSettings.locale === modelData.locale
+                onRadioCheckedChanged: {
+                    if (checked) {
+                        profileModel.changeLocale(modelData.locale)
+                        appSettings.locale = modelData.locale
+                    }
+                }
+            }
+        }
+    }
+}
+

ui/app/AppLayouts/Profile/Sections/qmldir

@@ -10,3 +10,4 @@ HelpContainer 1.0 HelpContainer.qml
 AboutContainer 1.0 AboutContainer.qml
 SignoutContainer 1.0 SignoutContainer.qml
 BackupSeedModal 1.0 BackupSeedModal.qml
+LanguageModal 1.0 LanguageModal.qml