feat: add DisplaySettingsLayout with language and appearance settings

- Add language selection dropdown (Deutsch, English, Français, etc.)
- Add dark mode toggle switch
- Add theme color selection (Blue, Orange, Pink, Purple, Green)
- Enable DisplaySettingsLayout in SettingsPage menu
- Add German and English translations for all new UI strings

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Eduard Wisch 2026-02-06 19:18:05 +01:00
parent a73458dfb6
commit fdee074dc9
5 changed files with 214 additions and 1 deletions

View file

@ -7838,4 +7838,52 @@ Pour les activer dans un projet commercial, merci de nous contacter.</source>
<translation>Ok</translation>
</message>
</context>
<context>
<name>DisplaySettingsLayout</name>
<message>
<source>settings_display_language_title</source>
<extracomment>Language</extracomment>
<translation>Sprache</translation>
</message>
<message>
<source>settings_display_appearance_title</source>
<extracomment>Appearance</extracomment>
<translation>Erscheinungsbild</translation>
</message>
<message>
<source>settings_display_language_select</source>
<extracomment>Language</extracomment>
<translation>Sprache</translation>
</message>
<message>
<source>settings_display_language_subtitle</source>
<extracomment>Select your preferred language</extracomment>
<translation>Wählen Sie Ihre bevorzugte Sprache</translation>
</message>
<message>
<source>settings_display_language_restart_hint</source>
<extracomment>Restart required for language change</extracomment>
<translation>Neustart erforderlich für Sprachwechsel</translation>
</message>
<message>
<source>settings_display_dark_mode_title</source>
<extracomment>Dark mode</extracomment>
<translation>Dunkelmodus</translation>
</message>
<message>
<source>settings_display_dark_mode_subtitle</source>
<extracomment>Enable dark mode for the interface</extracomment>
<translation>Dunkelmodus für die Oberfläche aktivieren</translation>
</message>
<message>
<source>settings_display_theme_color_title</source>
<extracomment>Theme color</extracomment>
<translation>Farbschema</translation>
</message>
<message>
<source>settings_display_theme_color_subtitle</source>
<extracomment>Choose the main color theme</extracomment>
<translation>Wählen Sie das Hauptfarbschema</translation>
</message>
</context>
</TS>

View file

@ -7737,4 +7737,52 @@ To enable them in a commercial project, please contact us.</translation>
<translation>Ok</translation>
</message>
</context>
<context>
<name>DisplaySettingsLayout</name>
<message>
<source>settings_display_language_title</source>
<extracomment>Language</extracomment>
<translation>Language</translation>
</message>
<message>
<source>settings_display_appearance_title</source>
<extracomment>Appearance</extracomment>
<translation>Appearance</translation>
</message>
<message>
<source>settings_display_language_select</source>
<extracomment>Language</extracomment>
<translation>Language</translation>
</message>
<message>
<source>settings_display_language_subtitle</source>
<extracomment>Select your preferred language</extracomment>
<translation>Select your preferred language</translation>
</message>
<message>
<source>settings_display_language_restart_hint</source>
<extracomment>Restart required for language change</extracomment>
<translation>Restart required for language change</translation>
</message>
<message>
<source>settings_display_dark_mode_title</source>
<extracomment>Dark mode</extracomment>
<translation>Dark mode</translation>
</message>
<message>
<source>settings_display_dark_mode_subtitle</source>
<extracomment>Enable dark mode for the interface</extracomment>
<translation>Enable dark mode for the interface</translation>
</message>
<message>
<source>settings_display_theme_color_title</source>
<extracomment>Theme color</extracomment>
<translation>Theme color</translation>
</message>
<message>
<source>settings_display_theme_color_subtitle</source>
<extracomment>Choose the main color theme</extracomment>
<translation>Choose the main color theme</translation>
</message>
</context>
</TS>

View file

@ -152,6 +152,7 @@ list(APPEND _LINPHONEAPP_QML_FILES
view/Page/Layout/Settings/CallSettingsLayout.qml
view/Page/Layout/Settings/CallForwardSettingsLayout.qml
view/Page/Layout/Settings/ContactsSettingsLayout.qml
view/Page/Layout/Settings/DisplaySettingsLayout.qml
view/Page/Layout/Settings/MeetingsSettingsLayout.qml
view/Page/Layout/Settings/ContactsSettingsProviderLayout.qml
view/Page/Layout/Settings/DebugSettingsLayout.qml

View file

@ -22,7 +22,7 @@ AbstractSettingsMenu {
//: "Réunions"
{title: qsTr("settings_meetings_title"), layout: "MeetingsSettingsLayout", visible: !SettingsCpp.disableMeetingsFeature},
//: "Affichage"
//{title: qsTr("settings_user_interface_title"), layout: "DisplaySettingsLayout"},
{title: qsTr("settings_user_interface_title"), layout: "DisplaySettingsLayout"},
//: "Security"
// {title: qsTr("settings_security_title"), layout: "SecuritySettingsLayout"},
//: "Réseau"

View file

@ -0,0 +1,116 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls.Basic as Control
import Linphone
import SettingsCpp 1.0
import UtilsCpp
import 'qrc:/qt/qml/Linphone/view/Style/buttonStyle.js' as ButtonStyle
import "qrc:/qt/qml/Linphone/view/Control/Tool/Helper/utils.js" as Utils
AbstractSettingsLayout {
id: mainItem
width: parent?.width
contentModel: [
{
//: Language
title: qsTr("settings_display_language_title"),
subTitle: "",
contentComponent: languageComponent
},
{
//: Appearance
title: qsTr("settings_display_appearance_title"),
subTitle: "",
contentComponent: appearanceComponent
}
]
onSave: {
SettingsCpp.save()
}
onUndo: SettingsCpp.undo()
// Language settings
////////////////////
Component {
id: languageComponent
ColumnLayout {
spacing: Utils.getSizeWithScreenRatio(20)
ComboSetting {
Layout.fillWidth: true
//: Language
titleText: qsTr("settings_display_language_select")
//: Select your preferred language
subTitleText: qsTr("settings_display_language_subtitle")
propertyName: "configLocale"
propertyOwner: SettingsCpp
model: [
{text: "English", value: "en"},
{text: "Deutsch", value: "de"},
{text: "Francais", value: "fr"},
{text: "Espanol", value: "es"},
{text: "Portugues", value: "pt"},
{text: "Italiano", value: "it"},
{text: "Nederlands", value: "nl"},
{text: "Polski", value: "pl"},
{text: "Cesky", value: "cs"},
{text: "Slovensky", value: "sk"},
{text: "Magyar", value: "hu"},
{text: "Suomi", value: "fi"},
{text: "Russkiy", value: "ru"},
{text: "Ukrayinska", value: "uk"},
{text: "Zhongwen", value: "zh_Hans"}
]
}
Text {
Layout.fillWidth: true
//: Restart required for language change
text: qsTr("settings_display_language_restart_hint")
color: DefaultStyle.main2_500main
font.pixelSize: Typography.p2.pixelSize
wrapMode: Text.WordWrap
}
}
}
// Appearance settings
//////////////////////
Component {
id: appearanceComponent
ColumnLayout {
spacing: Utils.getSizeWithScreenRatio(20)
SwitchSetting {
Layout.fillWidth: true
//: Dark mode
titleText: qsTr("settings_display_dark_mode_title")
//: Enable dark mode for the interface
subTitleText: qsTr("settings_display_dark_mode_subtitle")
propertyName: "darkModeAllowed"
propertyOwner: SettingsCpp
}
ComboSetting {
Layout.fillWidth: true
//: Theme color
titleText: qsTr("settings_display_theme_color_title")
//: Choose the main color theme
subTitleText: qsTr("settings_display_theme_color_subtitle")
propertyName: "themeMainColor"
propertyOwner: SettingsCpp
model: [
{text: "Green", value: "green"},
{text: "Blue", value: "blue"},
{text: "Orange", value: "orange"},
{text: "Red", value: "red"},
{text: "Purple", value: "purple"}
]
}
}
}
}