From c5478fa828efe008b870db12ef7fe94c9a78651a Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Fri, 23 Sep 2016 17:08:40 +0200 Subject: [PATCH] feat(dialog): use style file --- tests/resources.qrc | 3 +- tests/ui/components/dialog/ConfirmDialog.qml | 20 ++++++---- .../components/dialog/DialogDescription.qml | 13 ++++--- tests/ui/components/dialog/DialogPlus.qml | 39 +++++++++++-------- tests/ui/style/Constants.qml | 7 ++++ .../Style.qml => components/Collapse.qml} | 8 ++-- tests/ui/style/components/Dialog.qml | 20 ++++++++++ tests/ui/style/qmldir | 5 ++- tests/ui/views/mainWindow/mainWindow.qml | 2 +- 9 files changed, 81 insertions(+), 36 deletions(-) create mode 100644 tests/ui/style/Constants.qml rename tests/ui/style/{collapse/Style.qml => components/Collapse.qml} (100%) create mode 100644 tests/ui/style/components/Dialog.qml diff --git a/tests/resources.qrc b/tests/resources.qrc index c282b1cc9..cbefaadc9 100644 --- a/tests/resources.qrc +++ b/tests/resources.qrc @@ -33,8 +33,9 @@ ui/components/form/DarkButton.qml ui/components/invertedMouseArea/InvertedMouseArea.qml ui/scripts/utils.js + ui/style/components/Dialog.qml + ui/style/components/Collapse.qml ui/style/qmldir - ui/style/collapse/Style.qml ui/style/Constants.qml ui/views/newCall.qml ui/views/manageAccounts.qml diff --git a/tests/ui/components/dialog/ConfirmDialog.qml b/tests/ui/components/dialog/ConfirmDialog.qml index a408b66fa..4aacd7776 100644 --- a/tests/ui/components/dialog/ConfirmDialog.qml +++ b/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 } diff --git a/tests/ui/components/dialog/DialogDescription.qml b/tests/ui/components/dialog/DialogDescription.qml index 84b4f9888..202fd7479 100644 --- a/tests/ui/components/dialog/DialogDescription.qml +++ b/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 } diff --git a/tests/ui/components/dialog/DialogPlus.qml b/tests/ui/components/dialog/DialogPlus.qml index f35cb4f83..2f85f6e72 100644 --- a/tests/ui/components/dialog/DialogPlus.qml +++ b/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 } } } diff --git a/tests/ui/style/Constants.qml b/tests/ui/style/Constants.qml new file mode 100644 index 000000000..b5c48cc83 --- /dev/null +++ b/tests/ui/style/Constants.qml @@ -0,0 +1,7 @@ +pragma Singleton +import QtQuick 2.7 + +QtObject { + property int zPopup: 999 + property int zMax: 999999 +} diff --git a/tests/ui/style/collapse/Style.qml b/tests/ui/style/components/Collapse.qml similarity index 100% rename from tests/ui/style/collapse/Style.qml rename to tests/ui/style/components/Collapse.qml index 61560a0cc..c4f5d4b0b 100644 --- a/tests/ui/style/collapse/Style.qml +++ b/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' + } } diff --git a/tests/ui/style/components/Dialog.qml b/tests/ui/style/components/Dialog.qml new file mode 100644 index 000000000..0b01f75e7 --- /dev/null +++ b/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 + } +} diff --git a/tests/ui/style/qmldir b/tests/ui/style/qmldir index bc00e95da..f80ea58b9 100644 --- a/tests/ui/style/qmldir +++ b/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 diff --git a/tests/ui/views/mainWindow/mainWindow.qml b/tests/ui/views/mainWindow/mainWindow.qml index c34e7c526..f41d7a025 100644 --- a/tests/ui/views/mainWindow/mainWindow.qml +++ b/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' } }