From 2c97fea14d45cb953c560e6c0e47f118620fd65d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Blin?=
<sebastien.blin@savoirfairelinux.com>
Date: Mon, 15 May 2023 11:09:01 -0400
Subject: [PATCH] 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 | 1 +
resources/icons/Vertical_view.svg | 1 +
.../commoncomponents/MaterialRadioButton.qml | 126 +++++++----
src/app/commoncomponents/PhotoboothView.qml | 2 +-
src/app/constant/JamiStrings.qml | 2 +-
src/app/constant/JamiTheme.qml | 43 ++--
src/app/settingsview/SettingsSidePanel.qml | 2 +-
src/app/settingsview/SettingsView.qml | 4 +-
...ngsPage.qml => AppearanceSettingsPage.qml} | 168 ++++-----------
.../components/CallSettingsPage.qml | 76 +++++++
.../components/CreateSIPAccountPage.qml | 201 +++++++-----------
11 files changed, 317 insertions(+), 309 deletions(-)
create mode 100644 resources/icons/Horizontal_view.svg
create mode 100644 resources/icons/Vertical_view.svg
rename src/app/settingsview/components/{AppearenceSettingsPage.qml => AppearanceSettingsPage.qml} (64%)
diff --git a/resources/icons/Horizontal_view.svg b/resources/icons/Horizontal_view.svg
new file mode 100644
index 000000000..2d581feba
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/icons/Vertical_view.svg b/resources/icons/Vertical_view.svg
new file mode 100644
index 000000000..429bc0e47
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/app/commoncomponents/MaterialRadioButton.qml b/src/app/commoncomponents/MaterialRadioButton.qml
index 410e12294..28b4bb50d 100644
--- a/src/app/commoncomponents/MaterialRadioButton.qml
+++ b/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
+
+ height: implicitHeight
+
+ 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
+ }
- property string color: JamiTheme.textColor
- property string bgColor: ""
- useSystemFocusVisuals: false
+ Text {
+ color: textColor
+ font.pixelSize: JamiTheme.settingsDescriptionPixelSize
+ text: root.text
+ wrapMode: Text.WordWrap
+ }
+ }
indicator: Rectangle {
- id: rect
+ id: indicatorRectangle
anchors.left: parent.left
+ anchors.leftMargin: 18
anchors.verticalCenter: parent.verticalCenter
- color: root.bgColor
+ color: "transparent"
+ implicitHeight: 20
+ implicitWidth: 20
+ radius: JamiTheme.settingsBoxRadius
+ z: 1
border {
id: border
- color: JamiTheme.buttonTintedBlue
+ color: borderColor
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
+ color: checkedColor
+ height: 12
+ radius: JamiTheme.settingsBoxRadius
visible: checked || hovered
-
- Behavior on visible {
- NumberAnimation {
- from: 0
- duration: JamiTheme.shortFadeDuration
- }
- }
-
- color: JamiTheme.buttonTintedBlue
+ width: 12
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
- }
+ Behavior on visible {
+ enabled: hovered
- Keys.onPressed: function (event) {
- if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
- root.checked = true;
+ NumberAnimation {
+ duration: JamiTheme.shortFadeDuration
+ from: 0
+ }
+ }
}
}
}
diff --git a/src/app/commoncomponents/PhotoboothView.qml b/src/app/commoncomponents/PhotoboothView.qml
index 3cf67ee50..509bdb7ed 100644
--- a/src/app/commoncomponents/PhotoboothView.qml
+++ b/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
diff --git a/src/app/constant/JamiStrings.qml b/src/app/constant/JamiStrings.qml
index c067a14fd..39ed2aa65 100644
--- a/src/app/constant/JamiStrings.qml
+++ b/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")
diff --git a/src/app/constant/JamiTheme.qml b/src/app/constant/JamiTheme.qml
index 161d83d61..8e4519338 100644
--- a/src/app/constant/JamiTheme.qml
+++ b/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;
}
diff --git a/src/app/settingsview/SettingsSidePanel.qml b/src/app/settingsview/SettingsSidePanel.qml
index b335f755d..a71baf030 100644
--- a/src/app/settingsview/SettingsSidePanel.qml
+++ b/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
diff --git a/src/app/settingsview/SettingsView.qml b/src/app/settingsview/SettingsView.qml
index b9d8d378d..59b94b748 100644
--- a/src/app/settingsview/SettingsView.qml
+++ b/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);
diff --git a/src/app/settingsview/components/AppearenceSettingsPage.qml b/src/app/settingsview/components/AppearanceSettingsPage.qml
similarity index 64%
rename from src/app/settingsview/components/AppearenceSettingsPage.qml
rename to src/app/settingsview/components/AppearanceSettingsPage.qml
index efde25694..febc9ab1a 100644
--- a/src/app/settingsview/components/AppearenceSettingsPage.qml
+++ b/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
- Rectangle {
- id: lightThemeButtonBg
- width: 165
- height: 60
- border.color: JamiTheme.darkTheme ? "transparent" : JamiTheme.tintedBlue
- color: JamiTheme.whiteColor
- radius: JamiTheme.settingsBoxRadius
-
- MaterialRadioButton {
- id: lightThemeButton
-
- property bool focusOnChild: true
- anchors.fill: parent
- anchors.leftMargin: 19
-
- text: JamiStrings.light
- ButtonGroup.group: optionsB
- color: JamiTheme.blackColor
- bgColor: lightThemeButtonBg.color
+ ButtonGroup {
+ id: optionsB
+ }
- KeyNavigation.down: darkThemeButton
- KeyNavigation.tab: KeyNavigation.down
+ MaterialRadioButton {
+ id: lightThemeButton
- onCheckedChanged: {
- if (checked)
- UtilsAdapter.setAppValue(Settings.Key.AppTheme, "Light");
- }
+ width: 165
+ height: 60
+ backgroundColor: JamiTheme.lightThemeBackgroundColor
+ textColor: JamiTheme.blackColor
+ checkedColor: JamiTheme.lightThemeCheckedColor
+ borderColor: JamiTheme.lightThemeBorderColor
+ borderOuterRectangle: JamiTheme.radioBackgroundColor
+
+ text: JamiStrings.light
+ ButtonGroup.group: optionsB
+
+ onCheckedChanged: {
+ if (checked)
+ UtilsAdapter.setAppValue(Settings.Key.AppTheme, "Light");
}
}
- Rectangle {
- id: darkThemeButtonBg
+ MaterialRadioButton {
+ id: darkThemeButton
width: 165
height: 60
- color: JamiTheme.darkTheme ? JamiTheme.blackColor : JamiTheme.bgDarkMode_
- border.color: JamiTheme.darkTheme ? JamiTheme.tintedBlue : "transparent"
- radius: JamiTheme.settingsBoxRadius
-
- MaterialRadioButton {
- id: darkThemeButton
+ backgroundColor: JamiTheme.darkThemeBackgroundColor
+ textColor: JamiTheme.whiteColor
+ checkedColor: JamiTheme.darkThemeCheckedColor
+ borderColor: JamiTheme.darkThemeBorderColor
- property bool focusOnChild: true
- anchors.fill: parent
- anchors.leftMargin: 19
+ text: JamiStrings.dark
+ ButtonGroup.group: optionsB
- 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");
- }
+ onCheckedChanged: {
+ if (checked)
+ UtilsAdapter.setAppValue(Settings.Key.AppTheme, "Dark");
}
}
- Rectangle {
- id: sysThemeButtonBg
+ MaterialRadioButton {
+ id: sysThemeButton
width: 165
height: 60
- color: JamiTheme.darkTheme ? "#515151" : JamiTheme.sysColor
- radius: JamiTheme.settingsBoxRadius
-
- MaterialRadioButton {
- id: sysThemeButton
+ text: JamiStrings.system
+ ButtonGroup.group: optionsB
- 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");
- }
+ 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)
diff --git a/src/app/settingsview/components/CallSettingsPage.qml b/src/app/settingsview/components/CallSettingsPage.qml
index 357cf08d3..3bbb4987a 100644
--- a/src/app/settingsview/components/CallSettingsPage.qml
+++ b/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);
+ }
+ }
+ }
+ }
+ }
}
}
diff --git a/src/app/wizardview/components/CreateSIPAccountPage.qml b/src/app/wizardview/components/CreateSIPAccountPage.qml
index eb1a2a0d3..f439e4d94 100644
--- a/src/app/wizardview/components/CreateSIPAccountPage.qml
+++ b/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,169 +46,133 @@ 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
-
- objectName: "sipServernameEdit"
-
+ KeyNavigation.down: sipUsernameEdit
+ 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
-
- objectName: "sipUsernameEdit"
-
+ KeyNavigation.down: sipPasswordEdit
+ 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
-
- objectName: "sipPasswordEdit"
-
+ KeyNavigation.down: tlsRadioButton
+ 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 {
- id: optionsB
- }
-
- RowLayout {
-
- Layout.alignment: Qt.AlignHCenter
- Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
- Layout.topMargin: JamiTheme.wizardViewBlocMarginSize
-
+ ButtonGroup {
+ id: optionsB
+ }
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"
-
+ 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
- KeyNavigation.up: udpRadioButton
- KeyNavigation.down: personalizeAccount
- KeyNavigation.tab: KeyNavigation.down
-
onClicked: {
WizardViewStepModel.accountCreationInfo = JamiQmlUtils.setUpAccountCreationInputPara({
"hostname": sipServernameEdit.dynamicText,
@@ -220,82 +184,77 @@ Rectangle {
});
WizardViewStepModel.nextStep();
}
- }
-
- MaterialButton {
- id: personalizeAccount
TextMetrics {
- id: personalizeAccountTextSize
- font.weight: Font.Bold
+ id: textSize
font.pixelSize: JamiTheme.wizardViewDescriptionFontPixelSize
- text: personalizeAccount.text
+ font.weight: Font.Bold
+ text: createAccountButton.text
}
-
- text: JamiStrings.personalizeAccount
- tertiary: true
- secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
- preferredWidth: personalizeAccountTextSize.width + 2 * JamiTheme.buttontextWizzardPadding + 1
-
+ }
+ MaterialButton {
+ id: personalizeAccount
+ KeyNavigation.down: backButton
+ KeyNavigation.tab: KeyNavigation.down
+ KeyNavigation.up: createAccountButton
Layout.alignment: Qt.AlignCenter
Layout.bottomMargin: JamiTheme.wizardViewPageBackButtonMargins * 2
Layout.topMargin: JamiTheme.wizardViewBlocMarginSize
-
- KeyNavigation.up: createAccountButton
- KeyNavigation.down: backButton
- KeyNavigation.tab: KeyNavigation.down
+ preferredWidth: personalizeAccountTextSize.width + 2 * JamiTheme.buttontextWizzardPadding + 1
+ secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
+ tertiary: true
+ 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
--
GitLab