diff --git a/resources/icons/Horizontal_view.svg b/resources/icons/Horizontal_view.svg new file mode 100644 index 00000000..2d581feb --- /dev/null +++ b/resources/icons/Horizontal_view.svg @@ -0,0 +1 @@ + \ 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 00000000..429bc0e4 --- /dev/null +++ b/resources/icons/Vertical_view.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/commoncomponents/MaterialRadioButton.qml b/src/app/commoncomponents/MaterialRadioButton.qml index 410e1229..28b4bb50 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 . */ +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 + } + } + } + } } diff --git a/src/app/commoncomponents/PhotoboothView.qml b/src/app/commoncomponents/PhotoboothView.qml index 3cf67ee5..509bdb7e 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 c067a14f..39ed2aa6 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 161d83d6..8e451933 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 b335f755..a71baf03 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 b9d8d378..59b94b74 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 efde2569..febc9ab1 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 + + 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) diff --git a/src/app/settingsview/components/CallSettingsPage.qml b/src/app/settingsview/components/CallSettingsPage.qml index 357cf08d..3bbb4987 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 eb1a2a0d..f439e4d9 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,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