lilith/jami-client-qt
1
0
Fork 0
mirror of https://git.jami.net/savoirfairelinux/jami-client-qt.git synced 2025-07-15 04:55:23 +02:00
Code Activity

SettingsPage: update design

Browse source 
- 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
This commit is contained in:
Sébastien Blin 2023-05-15 11:09:01 -04:00
parent 73419e417a
commit 2c97fea14d
11 changed files with 334 additions and 326 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
resources/icons/Horizontal_view.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 610 B

1
resources/icons/Vertical_view.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 573 B

158
src/app/commoncomponents/MaterialRadioButton.qml
View file

@ -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
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
}
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
}
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
}
}
}
}
}

2
src/app/commoncomponents/PhotoboothView.qml
View file

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

2
src/app/constant/JamiStrings.qml
View file

@ -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")

43
src/app/constant/JamiTheme.qml
View file

@ -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;
}

2
src/app/settingsview/SettingsSidePanel.qml
View file

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

4
src/app/settingsview/SettingsView.qml
View file

@ -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);

164
src/app/settingsview/components/AppearenceSettingsPage.qml → src/app/settingsview/components/AppearanceSettingsPage.qml
View file

@ -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
color: JamiTheme.whiteColor
radius: JamiTheme.settingsBoxRadius
backgroundColor: JamiTheme.lightThemeBackgroundColor
textColor: JamiTheme.blackColor
checkedColor: JamiTheme.lightThemeCheckedColor
borderColor: JamiTheme.lightThemeBorderColor
borderOuterRectangle: JamiTheme.radioBackgroundColor
MaterialRadioButton {
id: lightThemeButton
text: JamiStrings.light
ButtonGroup.group: optionsB
property bool focusOnChild: true
anchors.fill: parent
anchors.leftMargin: 19
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");
}
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
backgroundColor: JamiTheme.darkThemeBackgroundColor
textColor: JamiTheme.whiteColor
checkedColor: JamiTheme.darkThemeCheckedColor
borderColor: JamiTheme.darkThemeBorderColor
MaterialRadioButton {
id: darkThemeButton
text: JamiStrings.dark
ButtonGroup.group: optionsB
property bool focusOnChild: true
anchors.fill: parent
anchors.leftMargin: 19
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
text: JamiStrings.system
ButtonGroup.group: optionsB
MaterialRadioButton {
id: sysThemeButton
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)

76
src/app/settingsview/components/CallSettingsPage.qml
View file

@ -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);
}
}
}
}
}
}
}

207
src/app/wizardview/components/CreateSIPAccountPage.qml
View file

@ -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
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"
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
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