feat(dialog): use style file

tests/resources.qrc

@@ -33,8 +33,9 @@
     <file>ui/components/form/DarkButton.qml</file>
     <file>ui/components/invertedMouseArea/InvertedMouseArea.qml</file>
     <file>ui/scripts/utils.js</file>
+    <file>ui/style/components/Dialog.qml</file>
+    <file>ui/style/components/Collapse.qml</file>
     <file>ui/style/qmldir</file>
-    <file>ui/style/collapse/Style.qml</file>
     <file>ui/style/Constants.qml</file>
     <file>ui/views/newCall.qml</file>
     <file>ui/views/manageAccounts.qml</file>

tests/ui/components/dialog/ConfirmDialog.qml

@@ -1,24 +1,30 @@
 import QtQuick 2.7
 
 import 'qrc:/ui/components/form'
+import 'qrc:/ui/style'
 
+// ===================================================================
+// A simple dialog with OK/Cancel buttons.
 // ===================================================================
 
 DialogPlus {
+    id: dialog
+
     buttons: [
         DarkButton {
-            onClicked: exit(0)
             text: qsTr('cancel')
+
+            onClicked: exit(0)
         },
         DarkButton {
-            onClicked: exit(1)
             text: qsTr('confirm')
+
+            onClicked: exit(1)
         }
     ]
     centeredButtons: true
-    id: dialog
-    maximumWidth: 370
-    maximumHeight: 150
-    minimumWidth: 370
-    minimumHeight: 150
+    maximumHeight: DialogStyle.confirm.height
+    maximumWidth: DialogStyle.confirm.width
+    minimumHeight: DialogStyle.confirm.height
+    minimumWidth: DialogStyle.confirm.width
 }

tests/ui/components/dialog/DialogDescription.qml

@@ -1,5 +1,7 @@
 import QtQuick 2.7
 
+import 'qrc:/ui/style'
+
 // ===================================================================
 // Description content used by dialogs.
 // ===================================================================
@@ -7,14 +9,15 @@ import QtQuick 2.7
 Item {
     property alias text: description.text
 
-    height: text ? 90 : 25
+    height: text ? DialogStyle.description.height : DialogStyle.description.minHeight
 
     Text {
-        anchors.fill: parent
-        anchors.leftMargin: 50
-        anchors.rightMargin: 50
-        font.pointSize: 12
         id: description
+
+        anchors.fill: parent
+        anchors.leftMargin: DialogStyle.leftMargin
+        anchors.rightMargin: DialogStyle.rightMargin
+        font.pointSize: DialogStyle.description.fontSize
         verticalAlignment: Text.AlignVCenter
         wrapMode: Text.WordWrap
     }

tests/ui/components/dialog/DialogPlus.qml

@@ -2,63 +2,68 @@ import QtQuick 2.7
 import QtQuick.Layouts 1.3
 import QtQuick.Window 2.2
 
+import 'qrc:/ui/style'
+
 // ===================================================================
 // Helper to build quickly dialogs.
 // ===================================================================
 
 Window {
     default property alias content: content.data // Required.
-    property alias buttons: buttons.data // Required.
+    property alias buttons: buttons.data // Optionnal.
     property alias descriptionText: description.text // Optionnal.
-    property bool centeredButtons // Optionnal.
+    property bool centeredButtons: false
 
-    property bool disableExitStatus // Internal property.
+    property bool _disableExitStatus
 
     signal exitStatus (int status)
 
-    modality: Qt.WindowModal
-
-    // Handle normal windows close.
-    onClosing: !disableExitStatus && exitStatus(0)
-
     // Derived class must use this function instead of close.
     function exit (status) {
-        if (!disableExitStatus) {
-            disableExitStatus = true
+        if (!_disableExitStatus) {
+            _disableExitStatus = true
             exitStatus(status)
             close()
         }
     }
 
+    modality: Qt.WindowModal
+
+    // Handle normal windows close.
+    onClosing: !_disableExitStatus && exitStatus(0)
+
     ColumnLayout {
         anchors.fill: parent
         spacing: 0
 
         // Description.
         DialogDescription {
-            Layout.fillWidth: true
             id: description
+
+            Layout.fillWidth: true
         }
 
         // Content.
         Item {
+            id: content
+
             Layout.fillHeight: true
             Layout.fillWidth: true
-            id: content
         }
 
         // Buttons.
         Item {
             Layout.fillWidth: true
-            height: 60
+            Layout.preferredHeight: DialogStyle.buttonsAreaHeight
 
             Row {
+                id: buttons
+
                 anchors.left: (!centeredButtons && parent.left) || undefined
                 anchors.centerIn: centeredButtons ? parent : undefined
-                anchors.leftMargin: 50
-                height: 30
-                id: buttons
-                spacing: 20
+                anchors.leftMargin: DialogStyle.leftMargin
+                anchors.verticalCenter: (!centeredButtons && parent.verticalCenter) || undefined
+                spacing: DialogStyle.buttonsSpacing
             }
         }
     }

tests/ui/style/Constants.qml

@@ -0,0 +1,7 @@
+pragma Singleton
+import QtQuick 2.7
+
+QtObject {
+    property int zPopup: 999
+    property int zMax: 999999
+}

tests/ui/style/components/Collapse.qml

@@ -2,11 +2,11 @@ pragma Singleton
 import QtQuick 2.7
 
 QtObject {
-    property var background: Rectangle {
-        color: 'transparent'
-    }
-
     property int animationDuration: 200
     property int iconSize: 32
     property string icon: 'collapse'
+
+    property var background: Rectangle {
+        color: 'transparent'
+    }
 }

tests/ui/style/components/Dialog.qml

@@ -0,0 +1,20 @@
+pragma Singleton
+import QtQuick 2.7
+
+QtObject {
+    property int buttonsAreaHeight: 60
+    property int buttonsSpacing: 20
+    property int leftMargin: 50
+    property int rightMargin: 50
+
+    property QtObject description: QtObject {
+        property int fontSize: 12
+        property int height: 90
+        property int minHeight: 25
+    }
+
+    property QtObject confirm: QtObject {
+        property int height: 150
+        property int width: 370
+    }
+}

tests/ui/style/qmldir

@@ -1,5 +1,8 @@
+# See: https://wiki.qt.io/Qml_Styling
+
 module Style
 
 singleton Constants 1.0 Constants.qml
 
-singleton CollapseStyle 1.0 collapse/Style.qml
+singleton CollapseStyle 1.0 components/Collapse.qml
+singleton DialogStyle 1.0 components/Dialog.qml

tests/ui/views/mainWindow/mainWindow.qml

@@ -130,7 +130,7 @@ ApplicationWindow {
         Loader {
             Layout.fillHeight: true
             Layout.fillWidth: true
-            source: 'qrc:/ui/views/mainWindow/conversation.qml'
+            source: 'qrc:/ui/views/mainWindow/contacts.qml'
         }
     }