From c2881ac6b73c0a3001912823b0cb32f9c714f8a7 Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Tue, 13 Sep 2016 17:08:32 +0200 Subject: [PATCH] feat(DropZone): new DropZone component, supports filedialog and DropArea --- tests/languages/en.ts | 7 ++ tests/languages/fr.ts | 7 ++ tests/resources.qrc | 3 +- tests/ui/components/contact/Avatar.qml | 4 +- .../{DialogCheckBox.qml => CheckBoxText.qml} | 2 + tests/ui/components/form/DropZone.qml | 67 +++++++++++++++++++ tests/ui/components/form/ExclusiveButtons.qml | 4 +- .../components/form/TransparentComboBox.qml | 2 + tests/ui/views/mainWindow/conversation.qml | 19 +----- tests/ui/views/mainWindow/home.qml | 2 +- 10 files changed, 94 insertions(+), 23 deletions(-) rename tests/ui/components/form/{DialogCheckBox.qml => CheckBoxText.qml} (89%) create mode 100644 tests/ui/components/form/DropZone.qml diff --git a/tests/languages/en.ts b/tests/languages/en.ts index a15cad93a..9caaab1f0 100644 --- a/tests/languages/en.ts +++ b/tests/languages/en.ts @@ -1,6 +1,13 @@ + + DropZone + + fileChooserTitle + Please choose one or many files + + SelectContact diff --git a/tests/languages/fr.ts b/tests/languages/fr.ts index 70ce3e45d..217e296fd 100644 --- a/tests/languages/fr.ts +++ b/tests/languages/fr.ts @@ -1,6 +1,13 @@ + + DropZone + + fileChooserTitle + Merci de choisir un ou plusieurs fichiers + + SelectContact diff --git a/tests/resources.qrc b/tests/resources.qrc index f6578c4a5..8151ca2f0 100644 --- a/tests/resources.qrc +++ b/tests/resources.qrc @@ -11,7 +11,8 @@ ui/components/dialog/DialogDescription.qml ui/components/dialog/DialogPlus.qml ui/components/form/DarkButton.qml - ui/components/form/DialogCheckBox.qml + ui/components/form/CheckBoxText.qml + ui/components/form/DropZone.qml ui/components/form/ExclusiveButtons.qml ui/components/form/LightButton.qml ui/components/form/SmallButton.qml diff --git a/tests/ui/components/contact/Avatar.qml b/tests/ui/components/contact/Avatar.qml index 5256653a2..fa07c0385 100644 --- a/tests/ui/components/contact/Avatar.qml +++ b/tests/ui/components/contact/Avatar.qml @@ -19,7 +19,7 @@ Item { Text { anchors.centerIn: parent color: '#FFFFFF' - text: (function () { + text: { var spaceIndex = username.indexOf(' ') var firstLetter = username.charAt(0) @@ -28,7 +28,7 @@ Item { } return firstLetter + username.charAt(spaceIndex + 1) - })() + } } Image { diff --git a/tests/ui/components/form/DialogCheckBox.qml b/tests/ui/components/form/CheckBoxText.qml similarity index 89% rename from tests/ui/components/form/DialogCheckBox.qml rename to tests/ui/components/form/CheckBoxText.qml index 58c06f759..03951b59f 100644 --- a/tests/ui/components/form/DialogCheckBox.qml +++ b/tests/ui/components/form/CheckBoxText.qml @@ -1,6 +1,8 @@ import QtQuick 2.7 import QtQuick.Controls 2.0 +// =================================================================== +// Checkbox with clickable text. // =================================================================== CheckBox { diff --git a/tests/ui/components/form/DropZone.qml b/tests/ui/components/form/DropZone.qml new file mode 100644 index 000000000..0e8ef23bb --- /dev/null +++ b/tests/ui/components/form/DropZone.qml @@ -0,0 +1,67 @@ +import QtQuick 2.7 +import QtQuick.Dialogs 1.2 + +// =================================================================== + +Rectangle { + signal dropped (variant files) + + color: '#DDDDDD' + id: dropZone + + function emitFiles (files) { + // Filtering files, urls are forbidden. + files = files.reduce(function (files, file) { + var result = file.match(/^file:\/\/(.*)/) + + if (result) { + files.push(result[1]) + } + + return files + }, []) + + if (files.length > 0) { + dropped(files) + } + } + + DropArea { + anchors.fill: parent + + onDropped: { + dropZone.state = '' + if (drop.hasUrls) { + emitFiles(drop.urls) + } + } + onEntered: dropZone.state = 'hover' + onExited: dropZone.state = '' + } + + MouseArea { + anchors.fill: parent + onClicked: fileDialog.visible = true + } + + Image { + anchors.centerIn: parent + fillMode: Image.PreserveAspectFit + height: parent.height + source: 'qrc:/imgs/chat_attachment.svg' + width: parent.width + } + + FileDialog { + folder: shortcuts.home + id: fileDialog + title: qsTr('fileChooserTitle') + + onAccepted: emitFiles(fileDialog.fileUrls) + } + + states: State { + name: 'hover' + PropertyChanges { target: dropZone; color: '#BBBBBB' } + } +} diff --git a/tests/ui/components/form/ExclusiveButtons.qml b/tests/ui/components/form/ExclusiveButtons.qml index b8e06660f..f4464137a 100644 --- a/tests/ui/components/form/ExclusiveButtons.qml +++ b/tests/ui/components/form/ExclusiveButtons.qml @@ -6,7 +6,7 @@ Row { property int selectedButton: 0 property variant texts - signal buttonChanged (int button) + signal clicked (int button) spacing: 8 @@ -26,7 +26,7 @@ Row { onClicked: { if (selectedButton !== index) { selectedButton = index - buttonChanged(index) + clicked(index) } } } diff --git a/tests/ui/components/form/TransparentComboBox.qml b/tests/ui/components/form/TransparentComboBox.qml index 21e26e84d..8f01bc8aa 100644 --- a/tests/ui/components/form/TransparentComboBox.qml +++ b/tests/ui/components/form/TransparentComboBox.qml @@ -1,6 +1,8 @@ import QtQuick 2.7 import QtQuick.Controls 2.0 +// =================================================================== +// Discrete ComboBox which can be integrated in text. // =================================================================== ComboBox { diff --git a/tests/ui/views/mainWindow/conversation.qml b/tests/ui/views/mainWindow/conversation.qml index c5d398893..ad20d78db 100644 --- a/tests/ui/views/mainWindow/conversation.qml +++ b/tests/ui/views/mainWindow/conversation.qml @@ -130,6 +130,7 @@ ColumnLayout { } } + // Send area. Rectangle { Layout.fillWidth: true Layout.preferredHeight: 70 @@ -140,7 +141,6 @@ ColumnLayout { RowLayout { anchors.fill: parent - // Message to send. Flickable { Layout.preferredHeight: parent.height Layout.fillWidth: true @@ -151,24 +151,9 @@ ColumnLayout { } } - // DropArea. - Rectangle { + DropZone { Layout.preferredHeight: parent.height - newMessageArea.border.width * 2 Layout.preferredWidth: 40 - color: '#DDDDDD' - - DropArea { - anchors.fill: parent - } - - Image { - anchors.right: parent.right - anchors.top: parent.top - fillMode: Image.PreserveAspectFit - height: parent.height - source: 'qrc:/imgs/chat_attachment.svg' - width: parent.width - } } } } diff --git a/tests/ui/views/mainWindow/home.qml b/tests/ui/views/mainWindow/home.qml index ccd167bba..904fae5d3 100644 --- a/tests/ui/views/mainWindow/home.qml +++ b/tests/ui/views/mainWindow/home.qml @@ -59,7 +59,7 @@ ColumnLayout { Layout.fillWidth: true Layout.preferredHeight: 70 - DialogCheckBox { + CheckBoxText { anchors.left: parent.left anchors.leftMargin: 50 anchors.verticalCenter: parent.verticalCenter