lilith/jami-client-qt
1
0
Fork 0
mirror of https://git.jami.net/savoirfairelinux/jami-client-qt.git synced 2025-09-10 03:53:23 +02:00
Code Activity

settingsview: ui fixes

Browse source 
1. JamiSwitch add tooltip (wip)
2. PushButton add preferredHeight/preferredWidth (bug?)
3. UsernameLineEdit use ResponsiveImage
4. SettingsView fix settings menu
5. Move LogsView to window
6. ToggleSwitch use JamiSwitch

Change-Id: I07a455639e88550a7f0e40963550f8f842827370
This commit is contained in:
Ming Rui Zhang 2021-09-24 16:43:16 -04:00 • committed by Sébastien Blin
parent aa04677cf3
commit 1b259f9a2b
14 changed files with 157 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
qml.qrc
View file

@ -172,5 +172,6 @@
<file>qtquickcontrols2.conf</file>
<file>src/commoncomponents/JamiFlickable.qml</file>
<file>src/AccountMigrationView.qml</file>
<file>src/settingsview/js/logviewwindowcreation.js</file>
</qresource>
</RCC>

12
src/commoncomponents/JamiSwitch.qml
View file

@ -24,6 +24,18 @@ import net.jami.Constants 1.1
Switch {
id: root
property alias toolTipText: toolTip.text
hoverEnabled: true
MaterialToolTip {
id: toolTip
parent: root
visible: hovered && (toolTipText.length > 0)
delay: Qt.styleHints.mousePressAndHoldInterval
}
indicator: Rectangle {
id: handleBackground

10
src/commoncomponents/PushButton.qml
View file

@ -36,6 +36,8 @@ AbstractButton {
// Shape will default to a 15px circle
// but can be sized accordingly.
property int preferredSize: 30
property int preferredHeight: 0
property int preferredWidth: 0
property int preferredMargin: 16
// Note the radius will default to preferredSize
property alias radius: background.radius
@ -71,8 +73,8 @@ AbstractButton {
property alias imagePadding: image.padding
property alias imageOffset: image.offset
width: preferredSize
height: preferredSize
width: preferredWidth ? preferredWidth : preferredSize
height: preferredHeight ? preferredHeight : preferredSize
checkable: false
checked: false
@ -99,8 +101,8 @@ AbstractButton {
anchors.leftMargin: textContent.text ? preferredMargin : 0
anchors.verticalCenter: root.verticalCenter
containerHeight: preferredSize
containerWidth: preferredSize
containerWidth: preferredWidth ? preferredWidth : preferredSize
containerHeight: preferredHeight ? preferredHeight : preferredSize
source: {
if (checkable && checkedImageSource)

15
src/commoncomponents/UsernameLineEdit.qml
View file

@ -81,26 +81,17 @@ MaterialLineEdit {
}
}
Image {
ResponsiveImage {
id: lineEditImage
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 16
width: 24
height: 24
anchors.rightMargin: JamiTheme.preferredMarginSize / 2
visible: nameRegistrationState !== UsernameLineEdit.NameRegistrationState.SEARCHING
source: nameRegistrationState === UsernameLineEdit.NameRegistrationState.SEARCHING ?
"" : __iconSource
layer {
enabled: true
effect: ColorOverlay {
id: overlay
color: borderColor
}
}
color: borderColor
}
AnimatedImage {

10
src/constant/JamiStrings.qml
View file

@ -134,6 +134,9 @@ Item {
property string videoCodecs: qsTr("Video Codecs")
property string audioCodecs: qsTr("Audio Codecs")
// AdvancedNameServerSettings
property string nameServer: qsTr("Name Server")
// AdvancedSDPSettings
property string sdpSettingsTitle: qsTr("SDP Session Negotiation (ICE Fallback)")
property string sdpSettingsSubtitle: qsTr("Only used during negotiation in case ICE is not supported")
@ -152,9 +155,12 @@ Item {
// SettingsHeader
property string back: qsTr("Back")
// AVSettingsPage
property string accountSettingsTitle: qsTr("Account Settings")
property string accountSettingsMenuTitle: qsTr("Account")
property string generalSettingsTitle: qsTr("General")
property string pluginSettingsTitle: qsTr("Plugin")
property string avSettingsTitle: qsTr("Audio and Video Settings")
property string avSettingsMenuTitle: qsTr("Audio/Video")
// AudioSettings
property string audio: qsTr("Audio")

6
src/settingsview/SettingsView.qml
View file

@ -117,13 +117,13 @@ Rectangle {
title: {
switch(selectedMenu){
case SettingsView.Account:
return qsTr("Account Settings")
return JamiStrings.accountSettingsTitle
case SettingsView.General:
return qsTr("General")
return JamiStrings.generalSettingsTitle
case SettingsView.Media:
return JamiStrings.avSettingsTitle
case SettingsView.Plugin:
return qsTr("Plugin")
return JamiStrings.pluginSettingsTitle
}
}

4
src/settingsview/components/AdvancedNameServerSettings.qml
View file

@ -40,7 +40,7 @@ ColumnLayout {
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
text: qsTr("Name Server")
text: JamiStrings.nameServer
color: JamiTheme.textColor
elide: Text.ElideRight
}
@ -53,7 +53,7 @@ ColumnLayout {
Layout.preferredHeight: JamiTheme.preferredFieldHeight
itemWidth: root.itemWidth
titleField: qsTr("Address")
titleField: JamiStrings.address
textField: CurrentAccount.uri_RingNS

98
src/settingsview/components/LogsView.qml
View file

@ -26,7 +26,7 @@ import net.jami.Constants 1.1
import "../../commoncomponents"
Dialog {
Window {
id: root
property bool cancelPressed: false
@ -46,6 +46,10 @@ Dialog {
UtilsAdapter.monitor(continuous)
}
title: JamiStrings.logsViewTitle
width: 600
height: 500
Connections {
target: UtilsAdapter
@ -87,37 +91,25 @@ Dialog {
hasOpened = true
}
title: JamiStrings.logsViewTitle
width: 800
height: 700
standardButtons: Dialog.NoButton
ColumnLayout {
anchors.fill: parent
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.fillHeight: true
anchors.centerIn: parent
height: root.height
width: root.width
spacing: 0
Rectangle {
id: buttonRectangleBackground
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.preferredHeight: JamiTheme.preferredFieldHeight * 2
color: JamiTheme.backgroundColor
border.color: color
border.width: 0
height: JamiTheme.preferredFieldHeight * 2
color: JamiTheme.backgroundColor
radius: JamiTheme.modalPopupRadius
RowLayout {
id: buttons
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
anchors.centerIn: parent
ToggleSwitch {
@ -230,55 +222,51 @@ Dialog {
}
}
Rectangle {
id: flickableRectangleBackground
property alias text: logsText.text
JamiFlickable {
id: scrollView
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.fillHeight: true
color: JamiTheme.primaryBackgroundColor
border.color: color
border.width: 6
height: root.height - buttonRectangleBackground.height
interactive: true
attachedFlickableMoving: contentHeight > height || scrollView.moving
ScrollView {
id: scrollView
TextArea.flickable: TextArea {
id: logsText
Layout.fillHeight: true
Layout.fillWidth: true
anchors.fill: flickableRectangleBackground
font.pointSize: JamiTheme.textFontSize
font.hintingPreference: Font.PreferNoHinting
TextArea {
id: logsText
readOnly: true
color: JamiTheme.textColor
wrapMode: TextArea.Wrap
selectByMouse: true
readOnly: true
text: ""
color: JamiTheme.textColor
wrapMode: TextArea.Wrap
selectByMouse: true
background: Rectangle {
border.width: 0
color: JamiTheme.transparentColor
}
MouseArea {
anchors.fill: logsText
acceptedButtons: Qt.RightButton
hoverEnabled: true
MouseArea {
anchors.fill: logsText
acceptedButtons: Qt.RightButton
hoverEnabled: true
onClicked: {
selectBeginning = logsText.selectionStart
selectEnd = logsText.selectionEnd
rightClickMenu.open()
logsText.select(selectBeginning, selectEnd)
}
onClicked: {
selectBeginning = logsText.selectionStart
selectEnd = logsText.selectionEnd
rightClickMenu.open()
logsText.select(selectBeginning, selectEnd)
}
Menu {
id: rightClickMenu
Menu {
id: rightClickMenu
MenuItem {
text: JamiStrings.logsViewCopy
onTriggered: {
logsText.copy()
}
MenuItem {
text: JamiStrings.logsViewCopy
onTriggered: {
logsText.copy()
}
}
}

4
src/settingsview/components/SettingSpinBox.qml
View file

@ -63,7 +63,6 @@ RowLayout {
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.alignment: Qt.AlignCenter
font.family: "Monospace"
font.pointSize: JamiTheme.buttonFontSize
font.kerning: true
@ -75,8 +74,9 @@ RowLayout {
hoverEnabled: true
background: Rectangle {
border.color: enabled ? root.borderColor : "transparent"
border.color: enabled ? root.borderColor : JamiTheme.transparentColor
color: JamiTheme.editBackgroundColor
radius: JamiTheme.primaryRadius
}
onEditingFinished: newValue()

1
src/settingsview/components/SettingsMaterialLineEdit.qml
View file

@ -59,6 +59,7 @@ RowLayout {
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: itemWidth
Layout.preferredHeight: root.height
font.pointSize: JamiTheme.settingsFontSize
font.kerning: true

12
src/settingsview/components/SettingsMenu.qml
View file

@ -32,13 +32,13 @@ Rectangle {
signal itemSelected(int index)
Component.onCompleted: {
listModel.append({ 'type': SettingsView.Account, 'name': qsTr("Account"),
listModel.append({ 'type': SettingsView.Account, 'name': JamiStrings.accountSettingsMenuTitle,
'iconSource': JamiResources.account_24dp_svg})
listModel.append({ 'type': SettingsView.General, 'name': qsTr("General"),
listModel.append({ 'type': SettingsView.General, 'name': JamiStrings.generalSettingsTitle,
'iconSource': JamiResources.gear_black_24dp_svg})
listModel.append({ 'type': SettingsView.Media, 'name': qsTr("Audio/Video"),
listModel.append({ 'type': SettingsView.Media, 'name': JamiStrings.avSettingsMenuTitle,
'iconSource': JamiResources.media_black_24dp_svg})
listModel.append({ 'type': SettingsView.Plugin, 'name': qsTr("Plugin"),
listModel.append({ 'type': SettingsView.Plugin, 'name': JamiStrings.pluginSettingsTitle,
'iconSource': JamiResources.plugin_settings_black_24dp_svg})
}
@ -68,8 +68,8 @@ Rectangle {
Component.onCompleted: checked = type === SettingsView.Account
width: root.width
height: 64
preferredHeight: 64
preferredWidth: root.width
preferredMargin: 24
buttonText: name

10
src/settingsview/components/ToggleSwitch.qml
View file

@ -54,7 +54,7 @@ RowLayout {
color: JamiTheme.textColor
}
Switch {
JamiSwitch {
id: switchOfLayout
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
@ -62,16 +62,12 @@ RowLayout {
Layout.preferredHeight: heightOfSwitch
hoverEnabled: true
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
ToolTip.visible: hovered && (tooltipText.length > 0)
ToolTip.text: tooltipText
toolTipText: tooltipText
Accessible.role: Accessible.Button
Accessible.name: root.labelText
Accessible.description: root.tooltipText
onToggled: {
switchToggled()
}
onToggled: switchToggled()
}
}

10
src/settingsview/components/TroubleshootSettings.qml
View file

@ -25,16 +25,13 @@ import net.jami.Adapters 1.1
import net.jami.Constants 1.1
import "../../commoncomponents"
import "../js/logviewwindowcreation.js" as LogViewWindowCreation
ColumnLayout {
id: root
property int itemWidth
LogsView {
id: logsView
}
Label {
Layout.fillWidth: true
@ -80,7 +77,10 @@ ColumnLayout {
text: JamiStrings.troubleshootButton
onClicked: logsView.open()
onClicked: {
LogViewWindowCreation.createlogViewWindowObject()
LogViewWindowCreation.showLogViewWindow()
}
}
}
}

62
src/settingsview/js/logviewwindowcreation.js Normal file
View file

@ -0,0 +1,62 @@
/*
* Copyright (C) 2020 by Savoir-faire Linux
* Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// Global select screen window component, object variable for creation.
var logViewWindowComponent
var logViewWindowObject
function createlogViewWindowObject() {
if (logViewWindowObject)
return
logViewWindowComponent = Qt.createComponent(
"../components/LogsView.qml")
if (logViewWindowComponent.status === Component.Ready)
finishCreation()
else if (logViewWindowComponent.status === Component.Error)
console.log("Error loading component:",
logViewWindowComponent.errorString())
}
function finishCreation() {
logViewWindowObject = logViewWindowComponent.createObject()
if (logViewWindowObject === null) {
// Error Handling.
console.log("Error creating select screen object")
}
// Signal connection.
logViewWindowObject.onClosing.connect(destroyLogViewWindow)
}
function showLogViewWindow() {
logViewWindowObject.show()
var screen = logViewWindowObject.screen
logViewWindowObject.x = screen.virtualX +
(screen.width - logViewWindowObject.width) / 2
logViewWindowObject.y = screen.virtualY +
(screen.height - logViewWindowObject.height) / 2
}
// Destroy and reset selectScreenWindowObject when window is closed.
function destroyLogViewWindow() {
if(!logViewWindowObject)
return
logViewWindowObject.destroy()
logViewWindowObject = false
}