settings: code clean up

Correct Layout and Anchors emplacement
Erase inutile code
Fix binding loop warnings
Replace magic numbers by JamiTheme values
Remove multiline comments from qml files

Change-Id: Icdde094750ccc39fa3b3c9fb9368f8609eb8981d
Gitlab: #5
diff --git a/src/mainview/MainView.qml b/src/mainview/MainView.qml
index bfd2f7f..1377a7d 100644
--- a/src/mainview/MainView.qml
+++ b/src/mainview/MainView.qml
@@ -1,4 +1,3 @@
-
 /*
  * Copyright (C) 2020 by Savoir-faire Linux
  * Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
@@ -24,10 +23,8 @@
 import QtGraphicalEffects 1.14
 import net.jami.Models 1.0
 
+// Import qml component files.
 
-/*
- * Import qml component files.
- */
 import "components"
 import "../wizardview"
 import "../settingsview"
@@ -51,9 +48,7 @@
     property int savedWelcomeViewMaxWidth: 0
     property bool sidePanelHidden: false
 
-    /*
-     * To calculate tab bar bottom border hidden rect left margin.
-     */
+    // To calculate tab bar bottom border hidden rect left margin.
     property int tabBarLeftMargin: 8
     property int tabButtonShrinkSize: 8
     property bool inSettingsView: false
@@ -92,9 +87,7 @@
 
     function recursionStackViewItemMove(stackOne, stackTwo, depth=1) {
 
-        /*
-         * Move all items (expect the bottom item) to stacktwo by the same order in stackone.
-         */
+        // Move all items (expect the bottom item) to stacktwo by the same order in stackone.
         if (stackOne.depth === depth) {
             return
         }
@@ -163,10 +156,8 @@
             }
 
 
-            /*
-             * Check if it is coming from the current responsible call,
-             * and push views onto the correct stackview
-             */
+            // Check if it is coming from the current responsible call,
+            // and push views onto the correct stackview
             if (callStackView.responsibleAccountId === accountId
                     && callStackView.responsibleConvUid === convUid) {
                 pushCallStackView()
@@ -175,9 +166,7 @@
 
         function onCloseCallStack(accountId, convUid) {
 
-            /*
-             * Check if call stack view is on any of the stackview.
-             */
+            // Check if call stack view is on any of the stackview.
             if (callStackView.responsibleAccountId === accountId
                     && callStackView.responsibleConvUid === convUid) {
                 if (mainViewStack.find(function (item, index) {
@@ -199,9 +188,7 @@
 
         function onIncomingCallNeedToSetupMainView(accountId, convUid) {
 
-            /*
-             * Set up the call stack view that is needed by call overlay.
-             */
+            // Set up the call stack view that is needed by call overlay.
             if (!inSettingsView) {
                 mainViewStack.pop(null, StackView.Immediate)
                 sidePanelViewStack.pop(null, StackView.Immediate)
@@ -287,9 +274,7 @@
                                                       splitView.width - sidePanelViewStackPreferredWidth)
                 SplitView.fillHeight: true
 
-                /*
-                 * AccountComboBox is always visible
-                 */
+                // AccountComboBox is always visible
                 AccountComboBox {
                     id: accountComboBox
 
@@ -455,10 +440,7 @@
                 }
             }
 
-
-            /*
-             * Set up chatview.
-             */
+            // Set up chatview.
             MessagesAdapter.setupChatView(currentUID)
             callStackView.setLinkedWebview(
                         communicationPageMessageWebView)
@@ -473,9 +455,7 @@
             }
 
 
-            /*
-             * Push messageWebView or callStackView onto the correct stackview
-             */
+            // Push messageWebView or callStackView onto the correct stackview
             mainViewStack.pop(null, StackView.Immediate)
             sidePanelViewStack.pop(null, StackView.Immediate)
 
@@ -503,10 +483,7 @@
         }
 
         onAccountComboBoxNeedToShowWelcomePage: {
-
-            /*
-             * If the item argument is specified, all items down to (but not including) item will be popped.
-             */
+            // If the item argument is specified, all items down to (but not including) item will be popped.
             if (!inSettingsView) {
                 mainViewStack.pop(welcomePage)
                 welcomePage.updateWelcomePage()
@@ -535,9 +512,7 @@
         id: callStackView
 
         visible: false
-
         objectName: "callStackViewObject"
-
     }
 
     WelcomePage {
@@ -547,6 +522,7 @@
 
     SettingsView {
         id: settingsView
+        anchors.fill: parent
 
         visible: false
 
@@ -622,28 +598,20 @@
             })
 
 
-            /*
-             * Set qml MessageWebView object pointer to c++.
-             */
+            // Set qml MessageWebView object pointer to c++.
             MessagesAdapter.setQmlObject(this)
         }
     }
 
     onWidthChanged: {
-
-
-        /*
-         * Hide unnecessary stackview when width is changed.
-         */
+        // Hide unnecessary stackview when width is changed.
         if (mainViewWindow.width < sidePanelViewStackPreferredWidth
                 + mainViewStackPreferredWidth - 5
                 && mainViewStack.visible) {
             mainViewStack.visible = false
             sidePanelHidden = true
 
-            /*
-             * The find callback function is called for each item in the stack.
-             */
+            // The find callback function is called for each item in the stack.
             var inWelcomeViewStack = mainViewStack.find(
                         function (item, index) {
                             return index > 0
diff --git a/src/mainview/components/AboutPopUp.qml b/src/mainview/components/AboutPopUp.qml
index c4adffe..fea3ff0 100644
--- a/src/mainview/components/AboutPopUp.qml
+++ b/src/mainview/components/AboutPopUp.qml
@@ -27,15 +27,11 @@
     id: aboutPopUp
 
 
-    /*
-     * When dialog is opened, trigger mainViewWindow overlay which is defined in overlay.model (model : true is necessary).
-     */
+    // When dialog is opened, trigger mainViewWindow overlay which is defined in overlay.model (model : true is necessary).
     modal: true
 
 
-    /*
-     * Content height + margin.
-     */
+    // Content height + margin.
     contentHeight: aboutPopUpContentRectColumnLayout.height + 5 * 7
 
     ProjectCreditsScrollView {
@@ -129,9 +125,7 @@
                 verticalAlignment: Text.AlignVCenter
 
 
-                /*
-                 * TextMetrics does not work for multi-line.
-                 */
+                // TextMetrics does not work for multi-line.
                 text: qsTr("The Qt client for Jami.\nJami is a secured and distributed communication software.")
             }
 
@@ -141,9 +135,7 @@
                 Layout.alignment: Qt.AlignCenter
 
 
-                /*
-                 * Strangely, hoveredLink works badly when width grows too large
-                 */
+                // Strangely, hoveredLink works badly when width grows too large
                 Layout.preferredWidth: 50
                 Layout.preferredHeight: textMetricsjamiDeclarationHyperText.boundingRect.height
                 Layout.topMargin: 5
@@ -167,9 +159,7 @@
                     anchors.fill: parent
 
 
-                    /*
-                     * We don't want to eat clicks on the Text.
-                     */
+                    // We don't want to eat clicks on the Text.
                     acceptedButtons: Qt.NoButton
                     cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
                 }
diff --git a/src/mainview/components/AccountComboBoxPopup.qml b/src/mainview/components/AccountComboBoxPopup.qml
index f10b4f5..90aa0ef 100644
--- a/src/mainview/components/AccountComboBoxPopup.qml
+++ b/src/mainview/components/AccountComboBoxPopup.qml
@@ -35,9 +35,7 @@
     implicitWidth: accountComboBox.width - 1
 
 
-    /*
-     * Hack - limite the accounts that can be shown.
-     */
+    // Hack - limite the accounts that can be shown.
     implicitHeight: {
         comboBoxPopup.visible
         return Math.min(accountComboBox.height *
@@ -50,9 +48,7 @@
         id: comboBoxPopupListView
 
 
-        /*
-         * In list view, index is an interger.
-         */
+        // In list view, index is an interger.
         clip: true
         model: accountListModel
         implicitHeight: contentHeight
@@ -70,9 +66,7 @@
                 fillMode: Image.PreserveAspectFit
                 mipmap: true
 
-                /*
-                 * Role::Picture
-                 */
+                // Role::Picture
                 source: {
                     var data = accountListModel.data(accountListModel.index(index, 0), 259)
                     if (data === undefined) {
diff --git a/src/mainview/components/CallAdvancedOptions.qml b/src/mainview/components/CallAdvancedOptions.qml
index 7a9b4e9..92d5f09 100644
--- a/src/mainview/components/CallAdvancedOptions.qml
+++ b/src/mainview/components/CallAdvancedOptions.qml
@@ -31,9 +31,7 @@
     property int type: ContactPicker.ContactPickerType.JAMICONFERENCE
 
 
-    /*
-     * Important to keep it one, since enum in c++ starts at one for conferences.
-     */
+    // Important to keep it one, since enum in c++ starts at one for conferences.
     enum ContactPickerType {
         JAMICONFERENCE = 1,
         SIPTRANSFER
diff --git a/src/mainview/components/CallOverlay.qml b/src/mainview/components/CallOverlay.qml
index 7977c39..843df4c 100644
--- a/src/mainview/components/CallOverlay.qml
+++ b/src/mainview/components/CallOverlay.qml
@@ -122,9 +122,7 @@
         y: callOverlayRect.height / 2 - sipInputPanel.height / 2
     }
 
-    /*
-     * Timer to decide when overlay fade out.
-     */
+    // Timer to decide when overlay fade out.
     Timer {
         id: callOverlayTimer
         interval: 5000
@@ -220,11 +218,9 @@
         color: "transparent"
 
 
-        /*
-         * Rect states: "entered" state should make overlay fade in,
-         *              "freezed" state should make overlay fade out.
-         * Combine with PropertyAnimation of opacity.
-         */
+        // Rect states: "entered" state should make overlay fade in,
+        //              "freezed" state should make overlay fade out.
+        // Combine with PropertyAnimation of opacity.
         states: [
             State {
                 name: "entered"
@@ -283,9 +279,7 @@
         }
 
         onAddToConferenceButtonClicked: {
-            /*
-             * Create contact picker - conference.
-             */
+            // Create contact picker - conference.
             ContactPickerCreation.createContactPickerObjects(
                         ContactPicker.ContactPickerType.JAMICONFERENCE,
                         callOverlayRect)
@@ -321,9 +315,7 @@
     }
 
 
-    /*
-     * MouseAreas to make sure that overlay states are correctly set.
-     */
+    // MouseAreas to make sure that overlay states are correctly set.
     MouseArea {
         id: callOverlayButtonGroupLeftSideMouseArea
 
@@ -421,9 +413,7 @@
         id: callViewContextMenu
 
         onTransferCallButtonClicked: {
-            /*
-             * Create contact picker - sip transfer.
-             */
+            // Create contact picker - sip transfer.
             ContactPickerCreation.createContactPickerObjects(
                         ContactPicker.ContactPickerType.SIPTRANSFER,
                         callOverlayRect)
diff --git a/src/mainview/components/CallOverlayButtonGroup.qml b/src/mainview/components/CallOverlayButtonGroup.qml
index 88a097f..f145ab8 100644
--- a/src/mainview/components/CallOverlayButtonGroup.qml
+++ b/src/mainview/components/CallOverlayButtonGroup.qml
@@ -29,10 +29,8 @@
 Rectangle {
     id: root
 
-    /*
-     * ButtonCounts here is to make sure that flow layout margin is calculated correctly,
-     * since no other methods can make buttons at the layout center.
-     */
+    // ButtonCounts here is to make sure that flow layout margin is calculated correctly,
+    // since no other methods can make buttons at the layout center.
     property int buttonPreferredSize: 24
     property var isMaster: true
     property var isSip: false
diff --git a/src/mainview/components/CallStackView.qml b/src/mainview/components/CallStackView.qml
index 210de1b..a626f11 100644
--- a/src/mainview/components/CallStackView.qml
+++ b/src/mainview/components/CallStackView.qml
@@ -31,10 +31,8 @@
 
     anchors.fill: parent
 
-    /*
-     * When selected conversation is changed,
-     * these values will also be changed.
-     */
+    // When selected conversation is changed,
+    // these values will also be changed.
     property string responsibleConvUid: ""
     property string responsibleAccountId: ""
 
@@ -43,9 +41,7 @@
         videoCallPage.closeInCallConversation()
 
 
-        /*
-         * Close potential window, context menu releated windows.
-         */
+        // Close potential window, context menu releated windows.
         audioCallPage.closeContextMenuAndRelatedWindows()
 
         VideoCallFullScreenWindowContainerCreation.closeVideoCallFullScreenWindowContainer()
@@ -110,9 +106,7 @@
         function onShowOutgoingCallPage(accountId, convUid) {
 
 
-            /*
-             * Need to check whether it is the current selected conversation.
-             */
+            // Need to check whether it is the current selected conversation.
             if (responsibleConvUid === convUid
                     && responsibleAccountId === accountId) {
                 showOutgoingCallPage()
@@ -122,9 +116,7 @@
         function onShowIncomingCallPage(accountId, convUid) {
 
 
-            /*
-             * Check is done within the js.
-             */
+            // Check is done within the js.
             IncomingCallPageCreation.createincomingCallPageWindowObjects(
                         accountId, convUid)
             IncomingCallPageCreation.showIncomingCallPageWindow(accountId,
diff --git a/src/mainview/components/CallViewContextMenu.qml b/src/mainview/components/CallViewContextMenu.qml
index 5b2272a..54ae0b2 100644
--- a/src/mainview/components/CallViewContextMenu.qml
+++ b/src/mainview/components/CallViewContextMenu.qml
@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) 2020 by Savoir-faire Linux
  * Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
  * Author: Sébastien Blin <sebastien.blin@savoirfairelinux.com>
@@ -129,9 +129,7 @@
     function generateDeviceMenuItem() {
         var deviceContextMenuInfoMap = AvAdapter.populateVideoDeviceContextMenuItem()
 
-        /*
-         * Somehow, the map size is undefined, so use this instead.
-         */
+        // Somehow, the map size is undefined, so use this instead.
         var mapSize = deviceContextMenuInfoMap["size"]
 
         if (mapSize === 0)
@@ -166,19 +164,19 @@
         })
     }
 
-    /* TODO: In the future we want to implement this
+    // TODO: In the future we want to implement this
 
-    GeneralMenuItem {
-        id: advancedInfosItem
+    // GeneralMenuItem {
+    //     id: advancedInfosItem
 
-        itemName: qsTr("Advanced informations")
-        iconSource: "qrc:/images/icons/info-24px.svg"
-        leftBorderWidth: commonBorderWidth
-        rightBorderWidth: commonBorderWidth
+    //     itemName: qsTr("Advanced informations")
+    //     iconSource: "qrc:/images/icons/info-24px.svg"
+    //     leftBorderWidth: commonBorderWidth
+    //     rightBorderWidth: commonBorderWidth
 
-        onClicked: {
-            root.close()
-        }
-    }*/
+    //     onClicked: {
+    //         root.close()
+    //     }
+    // }
 }
 
diff --git a/src/mainview/components/ContactPicker.qml b/src/mainview/components/ContactPicker.qml
index 1d41406..cb93757 100644
--- a/src/mainview/components/ContactPicker.qml
+++ b/src/mainview/components/ContactPicker.qml
@@ -30,9 +30,7 @@
     property int type: ContactPicker.ContactPickerType.JAMICONFERENCE
 
 
-    /*
-     * Important to keep it one, since enum in c++ starts at one for conferences.
-     */
+    // Important to keep it one, since enum in c++ starts at one for conferences.
     enum ContactPickerType {
         JAMICONFERENCE = 1,
         SIPTRANSFER
@@ -136,9 +134,7 @@
     onAboutToShow: {
 
 
-        /*
-         * Reset the model on each show.
-         */
+        // Reset the model on each show.
         contactPickerListView.model = ContactAdapter.getContactSelectableModel(
                     type)
     }
diff --git a/src/mainview/components/ContactSearchBar.qml b/src/mainview/components/ContactSearchBar.qml
index ef75bbc..89fb42c 100644
--- a/src/mainview/components/ContactSearchBar.qml
+++ b/src/mainview/components/ContactSearchBar.qml
@@ -32,10 +32,8 @@
     }
 
 
-    /*
-     * Hack - there is no real way now to make TextField lose its focus,
-     * unless transfer it to other component.
-     */
+    // Hack - there is no real way now to make TextField lose its focus,
+    // unless transfer it to other component.
     function clearFocus() {
         fakeFocus.forceActiveFocus()
     }
diff --git a/src/mainview/components/ConversationSmartListViewItemDelegate.qml b/src/mainview/components/ConversationSmartListViewItemDelegate.qml
index 4e2fe3c..5357dc6 100644
--- a/src/mainview/components/ConversationSmartListViewItemDelegate.qml
+++ b/src/mainview/components/ConversationSmartListViewItemDelegate.qml
@@ -32,19 +32,15 @@
         target: conversationSmartListView
 
 
-        /*
-         * Hack, make sure that smartListItemDelegate does not show extra item
-         * when searching new contacts.
-         */
+        // Hack, make sure that smartListItemDelegate does not show extra item
+        // when searching new contacts.
         function onForceUpdatePotentialInvalidItem() {
             smartListItemDelegate.visible = conversationSmartListView.model.rowCount(
                         ) <= index ? false : true
         }
 
 
-        /*
-         * When currentIndex is -1, deselect items, if not, change select item
-         */
+        // When currentIndex is -1, deselect items, if not, change select item
         function onCurrentIndexIsChanged() {
             if (conversationSmartListView.currentIndex === -1
                     || conversationSmartListView.currentIndex !== index) {
@@ -184,9 +180,7 @@
             if (mouse.button === Qt.RightButton) {
                 smartListContextMenu.parent = mouseAreaSmartListItemDelegate
 
-                /*
-                 * Make menu pos at mouse.
-                 */
+                // Make menu pos at mouse.
                 var relativeMousePos = mapToItem(itemSmartListBackground,
                                                  mouse.x, mouse.y)
                 smartListContextMenu.x = relativeMousePos.x
diff --git a/src/mainview/components/IncomingCallPage.qml b/src/mainview/components/IncomingCallPage.qml
index 89b5ffa..9955efc 100644
--- a/src/mainview/components/IncomingCallPage.qml
+++ b/src/mainview/components/IncomingCallPage.qml
@@ -26,11 +26,9 @@
 import "../../commoncomponents"
 
 
-/*
- * IncomingCallPage as a seperate window,
- * exist at the right bottom, as a notification to user that
- * a call is incoming.
- */
+// IncomingCallPage as a seperate window,
+// exist at the right bottom, as a notification to user that
+// a call is incoming.
 Window {
     id: incomingCallPage
 
@@ -38,9 +36,7 @@
     property int minHeight: 400
 
 
-    /*
-     * The unique identifier for incomingCallPage
-     */
+    // The unique identifier for incomingCallPage
     property string responsibleAccountId: ""
     property string responsibleConvUid: ""
 
@@ -65,14 +61,12 @@
     function updatePositionToRightBottom() {
 
 
-        /*
-         * Screen right bottom,
-         * since the qt screen.virtualY, virtualX does not work properly,
-         * we need to calculate the screen x, y ourselves, by
-         * using to fact that window will always be in the middle if no x or y
-         * specificed.
-         * ex: https://doc.qt.io/qt-5/qscreen.html#geometry-prop
-         */
+        // Screen right bottom,
+        // since the qt screen.virtualY, virtualX does not work properly,
+        // we need to calculate the screen x, y ourselves, by
+        // using to fact that window will always be in the middle if no x or y
+        // specificed.
+        // ex: https://doc.qt.io/qt-5/qscreen.html#geometry-prop
         var virtualX = (incomingCallPage.x + width / 2) - screen.width / 2
         incomingCallPage.x = virtualX + screen.width - width
         incomingCallPage.y = screen.height - height - 50
@@ -96,9 +90,7 @@
         color: "black"
 
 
-        /*
-         * Simulate window drag. (top with height 30).
-         */
+        // Simulate window drag. (top with height 30).
         MouseArea {
             id: dragMouseArea
 
diff --git a/src/mainview/components/MediaHandlerItemDelegate.qml b/src/mainview/components/MediaHandlerItemDelegate.qml
index 6a0494d..6b4b4aa 100644
--- a/src/mainview/components/MediaHandlerItemDelegate.qml
+++ b/src/mainview/components/MediaHandlerItemDelegate.qml
@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) 2020 by Savoir-faire Linux
  * Author: Aline Gondim Santos <aline.gondimsantos@savoirfairelinux.com>
  *
diff --git a/src/mainview/components/MediaHandlerPicker.qml b/src/mainview/components/MediaHandlerPicker.qml
index 3030f44..56f9e45 100644
--- a/src/mainview/components/MediaHandlerPicker.qml
+++ b/src/mainview/components/MediaHandlerPicker.qml
@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) 2020 by Savoir-faire Linux
  * Author: Aline Gondim Santos <aline.gondimsantos@savoirfairelinux.com>
  *
diff --git a/src/mainview/components/MessageWebView.qml b/src/mainview/components/MessageWebView.qml
index 98bdd48..8453c41 100644
--- a/src/mainview/components/MessageWebView.qml
+++ b/src/mainview/components/MessageWebView.qml
@@ -111,16 +111,12 @@
         id: jsBridgeObject
 
 
-        /*
-         * ID, under which this object will be known at chatview.js side.
-         */
+        // ID, under which this object will be known at chatview.js side.
         WebChannel.id: "jsbridge"
 
 
-        /*
-         * Functions that are exposed, return code can be derived from js side
-         * by setting callback function.
-         */
+        // Functions that are exposed, return code can be derived from js side
+        // by setting callback function.
         function deleteInteraction(arg) {
             MessagesAdapter.deleteInteraction(arg)
         }
@@ -274,9 +270,7 @@
     }
 
 
-    /*
-     * Provide WebEngineProfile.
-     */
+    // Provide WebEngineProfile.
     WebEngineProfile {
         id: messageWebViewProfile
 
@@ -288,9 +282,7 @@
     }
 
 
-    /*
-     * Provide WebChannel by registering jsBridgeObject.
-     */
+    // Provide WebChannel by registering jsBridgeObject.
     WebChannel {
         id: messageWebViewChannel
         registeredObjects: [jsBridgeObject]
diff --git a/src/mainview/components/MessageWebViewHeader.qml b/src/mainview/components/MessageWebViewHeader.qml
index 8509f9a..0eaaeca 100644
--- a/src/mainview/components/MessageWebViewHeader.qml
+++ b/src/mainview/components/MessageWebViewHeader.qml
@@ -77,9 +77,7 @@
             Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
 
 
-            /*
-             * Width + margin.
-             */
+            // Width + margin.
             Layout.preferredWidth: messagingHeaderRect.width
                                    - backToWelcomeViewButton.width - buttonGroup.width - 45
             Layout.preferredHeight: messagingHeaderRect.height
diff --git a/src/mainview/components/OutgoingCallPage.qml b/src/mainview/components/OutgoingCallPage.qml
index b0b2aa8..4d2171a 100644
--- a/src/mainview/components/OutgoingCallPage.qml
+++ b/src/mainview/components/OutgoingCallPage.qml
@@ -48,9 +48,7 @@
     color: "black"
 
 
-    /*
-     * Prevent right click propagate to VideoCallPage.
-     */
+    // Prevent right click propagate to VideoCallPage.
     MouseArea {
         anchors.fill: parent
         propagateComposedEvents: false
diff --git a/src/mainview/components/ScreenRubberBand.qml b/src/mainview/components/ScreenRubberBand.qml
index 65c3266..3ae5714 100644
--- a/src/mainview/components/ScreenRubberBand.qml
+++ b/src/mainview/components/ScreenRubberBand.qml
@@ -24,13 +24,11 @@
 import net.jami.Models 1.0
 
 
-/*
- * ScreenRubberBand as a seperate frameless window,
- * is to simulate the whole screen area and provide the user
- * the ability to select certain area of it.
- *
- * Typically, it is used for video screen sharing.
- */
+// ScreenRubberBand as a seperate frameless window,
+// is to simulate the whole screen area and provide the user
+// the ability to select certain area of it.
+
+// Typically, it is used for video screen sharing.
 Window {
     id: screenRubberBandWindow
 
@@ -39,17 +37,13 @@
     flags: Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint | Qt.WA_TranslucentBackground
 
 
-    /*
-     * Opacity with 0.7 window that will fill the entire screen,
-     * provide the users to select the area that they
-     * want to share.
-     */
+    // Opacity with 0.7 window that will fill the entire screen,
+    // provide the users to select the area that they
+    // want to share.
     color: Qt.rgba(0, 0, 0, 0.7)
 
 
-    /*
-     * Rect for selection.
-     */
+    // Rect for selection.
     Rectangle {
         id: recSelect
 
@@ -74,9 +68,7 @@
         cursorShape: Qt.CrossCursor
 
 
-        /*
-         * Geo changing for user selection.
-         */
+        // Geo changing for user selection.
         onPressed: {
             originalX = mouseX
             originalY = mouseY
diff --git a/src/mainview/components/SelectScreen.qml b/src/mainview/components/SelectScreen.qml
index 506af48..0e8baa0 100644
--- a/src/mainview/components/SelectScreen.qml
+++ b/src/mainview/components/SelectScreen.qml
@@ -27,12 +27,9 @@
 
 import "../../commoncomponents"
 
-
-/*
- * SelectScreenWindow as a seperate window,
- * is to make user aware of which screen they want to share,
- * during the video call, if the context menu item is selected.
- */
+// SelectScreenWindow as a seperate window,
+// is to make user aware of which screen they want to share,
+// during the video call, if the context menu item is selected.
 Window {
     id: selectScreenWindow
 
@@ -42,15 +39,11 @@
     property int selectedScreenNumber: -1
 
 
-    /*
-     * Decide whether to show screen area or entire screen.
-     */
+    // Decide whether to show screen area or entire screen.
     property bool selectArea: false
 
 
-    /*
-     * How many rows the ScrollView should have.
-     */
+    // How many rows the ScrollView should have.
     function calculateRepeaterModel() {
         var numberOfScreens = Qt.application.screens.length
 
@@ -75,9 +68,7 @@
     title: "Screen sharing"
 
 
-    /*
-     * Note: Qt.application.screens[0] is the app's current existing screen.
-     */
+    // Note: Qt.application.screens[0] is the app's current existing screen.
     screen: Qt.application.screens[0]
 
     Rectangle {
@@ -110,9 +101,7 @@
             ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
 
 
-            /*
-             * Column of rows repeater (two screen captures in a row).
-             */
+            // Column of rows repeater (two screen captures in a row).
             Column {
                 id: screenSelectionScrollViewColumn
 
@@ -134,20 +123,16 @@
                             function onSelectedScreenNumberChanged() {
 
 
-                                /*
-                                 * Recover from green state.
-                                 */
+                                // Recover from green state.
                                 screenSelectionRectOdd.borderColor = JamiTheme.tabbarBorderColor
                                 screenSelectionRectEven.borderColor = JamiTheme.tabbarBorderColor
                             }
                         }
 
 
-                        /*
-                         * To make sure that two screen captures in one row,
-                         * a repeater of two rect is needed, which one in charge
-                         * of odd number screen, one in charge of even number screen.
-                         */
+                        // To make sure that two screen captures in one row,
+                        // a repeater of two rect is needed, which one in charge
+                        // of odd number screen, one in charge of even number screen.
                         Rectangle {
                             id: screenSelectionRectOdd
 
@@ -305,9 +290,7 @@
                 ScreenRubberBandCreation.showScreenRubberBandWindow()
 
 
-                /*
-                 * Destory selectScreenWindow once screenRubberBand is closed.
-                 */
+                // Destory selectScreenWindow once screenRubberBand is closed.
                 ScreenRubberBandCreation.connectOnClosingEvent(function () {
                     selectScreenWindow.close()
                 })
diff --git a/src/mainview/components/SidePanel.qml b/src/mainview/components/SidePanel.qml
index bf2d6ff..2a59f50 100644
--- a/src/mainview/components/SidePanel.qml
+++ b/src/mainview/components/SidePanel.qml
@@ -38,9 +38,7 @@
     signal needToAddNewAccount
 
 
-    /*
-     * Hack -> force redraw.
-     */
+    // Hack -> force redraw.
     function forceReselectConversationSmartListCurrentIndex() {
         var index = conversationSmartListView.currentIndex
         conversationSmartListView.currentIndex = -1
@@ -48,9 +46,7 @@
     }
 
 
-    /*
-     * For contact request conv to be focused correctly.
-     */
+    // For contact request conv to be focused correctly.
     function setCurrentUidSmartListModelIndex() {
         conversationSmartListView.currentIndex
                 = conversationSmartListView.model.currentUidSmartListModelIndex(
@@ -94,15 +90,11 @@
         conversationSmartListView.updateListView()
     }
 
-    /*
-     * Intended -> since strange behavior will happen without this for stackview.
-     */
+    // Intended -> since strange behavior will happen without this for stackview.
     anchors.top: parent.top
     anchors.fill: parent
 
-    /*
-     * Search bar container to embed search label
-     */
+    // Search bar container to embed search label
     ContactSearchBar {
         id: contactSearchBar
         width: sidePanelRect.width - 26
diff --git a/src/mainview/components/SipInputPanel.qml b/src/mainview/components/SipInputPanel.qml
index 8d547a2..efb0cd5 100644
--- a/src/mainview/components/SipInputPanel.qml
+++ b/src/mainview/components/SipInputPanel.qml
@@ -24,16 +24,12 @@
 
 import "../../commoncomponents"
 
-/*
- * SipInputPanel is a key pad that is designed to be
- * used in sip calls.
- */
+// SipInputPanel is a key pad that is designed to be
+// used in sip calls.
 Popup {
     id: sipInputPanelPopUp
 
-    /*
-     * Space between sipInputPanelRect and grid layout
-     */
+    // Space between sipInputPanelRect and grid layout
     property int sipPanelPadding: 20
 
     contentWidth: sipInputPanelRectGridLayout.implicitWidth + 20
diff --git a/src/mainview/components/UserProfile.qml b/src/mainview/components/UserProfile.qml
index 5c01efa..3e62c77 100644
--- a/src/mainview/components/UserProfile.qml
+++ b/src/mainview/components/UserProfile.qml
@@ -35,15 +35,11 @@
     property int preferredImgSize: 80
     modal: true
 
-    /*
-     * Content height + margin.
-     */
+    // Content height + margin.
     contentHeight: userProfileDialogLayout.implicitHeight + 60
     contentWidth: userProfileDialogLayout.implicitWidth + 60
 
-    /*
-     * Fake focus to make sure that text edit lose focus on close.
-     */
+    // Fake focus to make sure that text edit lose focus on close.
     FocusScope {
         id: fakeFocusTextEdit
     }
@@ -68,9 +64,7 @@
             mipmap: true
         }
 
-        /*
-         * Visible when user alias is not empty or equals to id.
-         */
+        // Visible when user alias is not empty or equals to id.
         Text {
             id: contactAlias
 
@@ -110,9 +104,7 @@
             color: JamiTheme.faddedFontColor
         }
 
-        /*
-         * Visible when user name is not empty or equals to alias.
-         */
+        // Visible when user name is not empty or equals to alias.
         Text {
             id: contactDisplayName
 
diff --git a/src/mainview/components/VideoCallPage.qml b/src/mainview/components/VideoCallPage.qml
index 105f7c8..5ec8c82 100644
--- a/src/mainview/components/VideoCallPage.qml
+++ b/src/mainview/components/VideoCallPage.qml
@@ -88,9 +88,7 @@
     function previewMagneticSnap() {
 
 
-        /*
-         * Calculate the position where the previewRenderer should attach to.
-         */
+        // Calculate the position where the previewRenderer should attach to.
         var previewRendererCenter = Qt.point(
                     previewRenderer.x + previewRenderer.width / 2,
                     previewRenderer.y + previewRenderer.height / 2)
@@ -102,9 +100,7 @@
             if (previewRendererCenter.y >= distantRendererCenter.y) {
 
 
-                /*
-                 * Bottom right.
-                 */
+                // Bottom right.
                 previewToX = Qt.binding(function () {
                     return videoCallPageMainRect.width - previewRenderer.width - previewMargin
                 })
@@ -114,9 +110,7 @@
             } else {
 
 
-                /*
-                 * Top right.
-                 */
+                // Top right.
                 previewToX = Qt.binding(function () {
                     return videoCallPageMainRect.width - previewRenderer.width - previewMargin
                 })
@@ -126,9 +120,7 @@
             if (previewRendererCenter.y >= distantRendererCenter.y) {
 
 
-                /*
-                 * Bottom left.
-                 */
+                // Bottom left.
                 previewToX = previewMargin
                 previewToY = Qt.binding(function () {
                     return videoCallPageMainRect.height - previewRenderer.height - previewMarginY
@@ -136,9 +128,7 @@
             } else {
 
 
-                /*
-                 * Top left.
-                 */
+                // Top left.
                 previewToX = previewMargin
                 previewToY = previewMarginY
             }
@@ -246,12 +236,10 @@
                     id: previewRenderer
 
 
-                    /*
-                    * Property is used in the {} expression for height (extra dependency),
-                    * it will not affect the true height expression, since expression
-                    * at last will be taken only, but it will force the height to update
-                    * and reevaluate getPreviewImageScalingFactor().
-                    */
+                    // Property is used in the {} expression for height (extra dependency),
+                    // it will not affect the true height expression, since expression
+                    // at last will be taken only, but it will force the height to update
+                    // and reevaluate getPreviewImageScalingFactor().
                     property int previewImageScalingFactorUpdated: 0
 
                     Connections {
@@ -266,7 +254,7 @@
                         return previewRenderer.width * previewRenderer.getPreviewImageScalingFactor()
                     }
                     x: videoCallPageMainRect.width - previewRenderer.width - previewMargin
-                    y: videoCallPageMainRect.height - previewRenderer.height - previewMargin - 56 /* Avoid overlay */
+                    y: videoCallPageMainRect.height - previewRenderer.height - previewMargin - 56 // Avoid overlay
                     z: -1
 
                     states: [
@@ -309,18 +297,14 @@
                         onPositionChanged: {
 
 
-                            /*
-                            * Calculate mouse position relative change.
-                            */
+                            // Calculate mouse position relative change.
                             var delta = Qt.point(mouse.x - clickPos.x,
                                                 mouse.y - clickPos.y)
                             var deltaW = previewRenderer.x + delta.x + previewRenderer.width
                             var deltaH = previewRenderer.y + delta.y + previewRenderer.height
 
 
-                            /*
-                            * Check if the previewRenderer exceeds the border of videoCallPageMainRect.
-                            */
+                            // Check if the previewRenderer exceeds the border of videoCallPageMainRect.
                             if (deltaW < videoCallPageMainRect.width
                                     && previewRenderer.x + delta.x > 1)
                                 previewRenderer.x += delta.x
diff --git a/src/mainview/components/VideoCallPageContextMenuDeviceItem.qml b/src/mainview/components/VideoCallPageContextMenuDeviceItem.qml
index a6a4f80..868950b 100644
--- a/src/mainview/components/VideoCallPageContextMenuDeviceItem.qml
+++ b/src/mainview/components/VideoCallPageContextMenuDeviceItem.qml
@@ -22,9 +22,7 @@
 
 import "../../commoncomponents"
 
-/*
- * Menu item wrapper for video device checkable item.
- */
+// Menu item wrapper for video device checkable item.
 GeneralMenuItem {
     id: videoCallPageContextMenuDeviceItem
 
diff --git a/src/mainview/js/videocallfullscreenwindowcontainercreation.js b/src/mainview/js/videocallfullscreenwindowcontainercreation.js
index 23a51d7..14c007c 100644
--- a/src/mainview/js/videocallfullscreenwindowcontainercreation.js
+++ b/src/mainview/js/videocallfullscreenwindowcontainercreation.js
@@ -1,4 +1,3 @@
-
 /*
  * Copyright (C) 2020 by Savoir-faire Linux
  * Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>