settingsview: ui fixes

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

qml.qrc

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

src/commoncomponents/JamiSwitch.qml

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

src/commoncomponents/PushButton.qml

@@ -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
+    width: preferredWidth ? preferredWidth : preferredSize
-    height: 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: preferredWidth ? preferredWidth : preferredSize
-        containerWidth: preferredSize
+        containerHeight: preferredHeight ? preferredHeight : preferredSize
 
         source: {
             if (checkable && checkedImageSource)

src/commoncomponents/UsernameLineEdit.qml

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

src/constant/JamiStrings.qml

@@ -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")
-
+    property string accountSettingsTitle: qsTr("Account Settings")
-    // AVSettingsPage
+    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")

src/settingsview/SettingsView.qml

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

src/settingsview/components/AdvancedNameServerSettings.qml

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

src/settingsview/components/LogsView.qml

@@ -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
+        spacing: 0
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-        anchors.centerIn: parent
-        height: root.height
-        width: root.width
 
         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 {
+        JamiFlickable {
-            id: flickableRectangleBackground
+            id: scrollView
-            property alias text: logsText.text
 
             Layout.alignment: Qt.AlignHCenter
             Layout.fillWidth: true
             Layout.fillHeight: true
 
-            color: JamiTheme.primaryBackgroundColor
+            interactive: true
-            border.color: color
+            attachedFlickableMoving: contentHeight > height || scrollView.moving
-            border.width: 6
-            height: root.height - buttonRectangleBackground.height
 
-            ScrollView {
+            TextArea.flickable: TextArea {
-                id: scrollView
+                id: logsText
 
-                Layout.fillHeight: true
+                font.pointSize: JamiTheme.textFontSize
-                Layout.fillWidth: true
+                font.hintingPreference: Font.PreferNoHinting
-                anchors.fill: flickableRectangleBackground
 
-                TextArea {
+                readOnly: true
-                    id: logsText
+                color: JamiTheme.textColor
+                wrapMode: TextArea.Wrap
+                selectByMouse: true
 
-                    readOnly: true
+                background: Rectangle {
-                    text: ""
+                    border.width: 0
-                    color: JamiTheme.textColor
+                    color: JamiTheme.transparentColor
-                    wrapMode: TextArea.Wrap
+                }
-                    selectByMouse: true
 
-                    MouseArea {
+                MouseArea {
-                        anchors.fill: logsText
+                    anchors.fill: logsText
-                        acceptedButtons: Qt.RightButton
+                    acceptedButtons: Qt.RightButton
-                        hoverEnabled: true
+                    hoverEnabled: true
 
-                        onClicked: {
+                    onClicked: {
-                            selectBeginning = logsText.selectionStart
+                        selectBeginning = logsText.selectionStart
-                            selectEnd = logsText.selectionEnd
+                        selectEnd = logsText.selectionEnd
-                            rightClickMenu.open()
+                        rightClickMenu.open()
-                            logsText.select(selectBeginning, selectEnd)
+                        logsText.select(selectBeginning, selectEnd)
-                        }
+                    }
 
-                        Menu {
+                    Menu {
-                            id: rightClickMenu
+                        id: rightClickMenu
 
-                            MenuItem {
+                        MenuItem {
-                                text: JamiStrings.logsViewCopy
+                            text: JamiStrings.logsViewCopy
-                                onTriggered: {
+                            onTriggered: {
-                                    logsText.copy()
+                                logsText.copy()
-                                }
                             }
                         }
                     }

src/settingsview/components/SettingSpinBox.qml

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

src/settingsview/components/SettingsMaterialLineEdit.qml

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

src/settingsview/components/SettingsMenu.qml

@@ -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
+                preferredHeight: 64
-                height: 64
+                preferredWidth: root.width
                 preferredMargin: 24
 
                 buttonText: name

src/settingsview/components/ToggleSwitch.qml

@@ -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
+        toolTipText: tooltipText
-        ToolTip.visible: hovered && (tooltipText.length > 0)
-        ToolTip.text: tooltipText
 
         Accessible.role: Accessible.Button
         Accessible.name: root.labelText
         Accessible.description: root.tooltipText
 
-        onToggled: {
+        onToggled: switchToggled()
-            switchToggled()
-        }
     }
 }

src/settingsview/components/TroubleshootSettings.qml

@@ -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()
+            }
         }
     }
 }

src/settingsview/js/logviewwindowcreation.js

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