From f8e4d72fe8a074bde92bd7f144acd1ebc6f04715 Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Fri, 14 Oct 2016 17:07:53 +0200 Subject: [PATCH] fix(DroppableTextArea): nice features, supports drag and drop/button click to select file --- tests/languages/en.ts | 13 ++- tests/languages/fr.ts | 13 ++- tests/resources.qrc | 1 - tests/ui/modules/Common/Borders.qml | 4 + tests/ui/modules/Common/DropZone.qml | 67 ----------- tests/ui/modules/Common/DroppableTextArea.qml | 108 ++++++++++++++++-- tests/ui/modules/Common/qmldir | 3 - 7 files changed, 124 insertions(+), 85 deletions(-) delete mode 100644 tests/ui/modules/Common/DropZone.qml diff --git a/tests/languages/en.ts b/tests/languages/en.ts index 28c4747c4..d6f3ddf90 100644 --- a/tests/languages/en.ts +++ b/tests/languages/en.ts @@ -105,7 +105,18 @@ DropZone fileChooserTitle - Please choose one or many files + Please choose one or many files + + + + DroppableTextArea + + fileChooserTitle + Please choose one or many files + + + DROP YOUR ATTACHMENT + diff --git a/tests/languages/fr.ts b/tests/languages/fr.ts index beea66ea5..e3d804de6 100644 --- a/tests/languages/fr.ts +++ b/tests/languages/fr.ts @@ -105,7 +105,18 @@ DropZone fileChooserTitle - Merci de choisir un ou plusieurs fichiers + Merci de choisir un ou plusieurs fichiers + + + + DroppableTextArea + + fileChooserTitle + Merci de choisir un ou plusieurs fichiers + + + DROP YOUR ATTACHMENT + diff --git a/tests/resources.qrc b/tests/resources.qrc index 33d556a11..743468c01 100644 --- a/tests/resources.qrc +++ b/tests/resources.qrc @@ -34,7 +34,6 @@ ui/modules/Common/Dialog/DialogDescription.qml ui/modules/Common/Dialog/DialogPlus.qml ui/modules/Common/DroppableTextArea.qml - ui/modules/Common/DropZone.qml ui/modules/Common/ForceScrollBar.qml ui/modules/Common/Form/AbstractTextButton.qml ui/modules/Common/Form/ActionBar.qml diff --git a/tests/ui/modules/Common/Borders.qml b/tests/ui/modules/Common/Borders.qml index 51f5ce9e4..b37ee6955 100644 --- a/tests/ui/modules/Common/Borders.qml +++ b/tests/ui/modules/Common/Borders.qml @@ -1,5 +1,9 @@ import QtQuick 2.7 +// =================================================================== +// Alternative to rectangle border which is a limited feature. +// Allow the use of different borders (size, color...) for each +// rectangle side. // =================================================================== Item { diff --git a/tests/ui/modules/Common/DropZone.qml b/tests/ui/modules/Common/DropZone.qml deleted file mode 100644 index 07cdbe0dc..000000000 --- a/tests/ui/modules/Common/DropZone.qml +++ /dev/null @@ -1,67 +0,0 @@ -import QtQuick 2.7 -import QtQuick.Dialogs 1.2 - -// =================================================================== - -Rectangle { - signal dropped (var 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/modules/Common/DroppableTextArea.qml b/tests/ui/modules/Common/DroppableTextArea.qml index fc37bc8a2..4cfc56af5 100644 --- a/tests/ui/modules/Common/DroppableTextArea.qml +++ b/tests/ui/modules/Common/DroppableTextArea.qml @@ -1,23 +1,107 @@ import QtQuick 2.7 import QtQuick.Controls 2.0 -import QtQuick.Layouts 1.3 +import QtQuick.Dialogs 1.2 + +import Common.Styles 1.0 + +Item { + signal dropped (var files) -RowLayout { property alias placeholderText: textArea.placeholderText - Flickable { - Layout.preferredHeight: parent.height - Layout.fillWidth: true - ScrollBar.vertical: ScrollBar { } - TextArea.flickable: TextArea { - id: textArea + function _emitFiles (files) { + // Filtering files, other urls are forbidden. + files = files.reduce(function (files, file) { + var result = file.match(/^file:\/\/(.*)/) - wrapMode: TextArea.Wrap + if (result) { + files.push(result[1]) + } + + return files + }, []) + + if (files.length > 0) { + dropped(files) } } - DropZone { - Layout.preferredHeight: parent.height - Layout.preferredWidth: 40 + // Text area. + Flickable { + ScrollBar.vertical: ForceScrollBar { + id: scrollBar + } + TextArea.flickable: TextArea { + id: textArea + + rightPadding: fileChooserButton.width + fileChooserButton.anchors.rightMargin + 6 + wrapMode: TextArea.Wrap + } + anchors.fill: parent + } + + // Handle click to select files. + MouseArea { + id: fileChooserButton + + anchors { + right: parent.right + rightMargin: scrollBar.width + 6 + } + + height: parent.height + width: 40 + + onClicked: fileDialog.open() + + FileDialog { + id: fileDialog + + folder: shortcuts.home + title: qsTr('fileChooserTitle') + + onAccepted: _emitFiles(fileDialog.fileUrls) + } + + Icon { + anchors.fill: parent + fillMode: Image.PreserveAspectFit + icon: 'chat_attachment' + } + } + + // Hover style. + Rectangle { + id: hoverContent + + anchors.fill: parent + color: '#FFFFFF' + visible: false + + Text { + anchors.centerIn: parent + color: '#FE5E00' + font.pointSize: 11 + text: qsTr('DROP YOUR ATTACHMENT') + } + } + + DropArea { + anchors.fill: parent + keys: [ 'text/uri-list' ] + + onDropped: { + state = '' + if (drop.hasUrls) { + _emitFiles(drop.urls) + } + } + onEntered: state = 'hover' + onExited: state = '' + + states: State { + name: 'hover' + PropertyChanges { target: hoverContent; visible: true } + } } } diff --git a/tests/ui/modules/Common/qmldir b/tests/ui/modules/Common/qmldir index 8801f26a8..46daed783 100644 --- a/tests/ui/modules/Common/qmldir +++ b/tests/ui/modules/Common/qmldir @@ -21,9 +21,6 @@ Collapse 1.0 Collapse.qml ConfirmDialog 1.0 Dialog/ConfirmDialog.qml DialogPlus 1.0 Dialog/DialogPlus.qml -# DropZone -DropZone 1.0 DropZone.qml - # DroppableTextArea DroppableTextArea 1.0 DroppableTextArea.qml