DroppableTextArea.qml 2.43 KB
Newer Older
1 2
import QtQuick 2.7
import QtQuick.Controls 2.0
3 4 5 6
import QtQuick.Dialogs 1.2

import Common.Styles 1.0

7 8
// ===================================================================

9 10
Item {
  signal dropped (var files)
11 12 13

  property alias placeholderText: textArea.placeholderText

14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
  function _emitFiles (files) {
    // Filtering files, other 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)
    }
  }

  // Text area.
32
  Flickable {
33 34 35
    ScrollBar.vertical: ForceScrollBar {
      id: scrollBar
    }
36 37 38
    TextArea.flickable: TextArea {
      id: textArea

39
      background: Rectangle {
40
        color: DroppableTextAreaStyle.backgroundColor
41 42
      }

43 44 45
      rightPadding: fileChooserButton.width +
        fileChooserButton.anchors.rightMargin +
        DroppableTextAreaStyle.fileChooserButton.margins
46 47
      wrapMode: TextArea.Wrap
    }
48
    anchors.fill: parent
49 50 51

    // Necessary, else `placeHolderText` can get out of the component.
    clip: true
52 53 54
  }

  // Handle click to select files.
55
  ActionButton {
56 57 58 59
    id: fileChooserButton

    anchors {
      right: parent.right
60 61
      rightMargin: scrollBar.width +
        DroppableTextAreaStyle.fileChooserButton.margins
62
      verticalCenter: parent.verticalCenter
63
    }
64 65
    icon: 'attachment'
    iconSize: DroppableTextAreaStyle.fileChooserButton.size
66 67 68 69 70 71 72 73 74 75 76

    onClicked: fileDialog.open()

    FileDialog {
      id: fileDialog

      folder: shortcuts.home
      title: qsTr('fileChooserTitle')

      onAccepted: _emitFiles(fileDialog.fileUrls)
    }
77 78 79 80

    TooltipArea {
      text: qsTr('attachmentTooltip')
    }
81 82
  }

83 84 85 86 87
  // Hover style.
  Rectangle {
    id: hoverContent

    anchors.fill: parent
88
    color: DroppableTextAreaStyle.hoverContent.backgroundColor
89 90 91 92
    visible: false

    Text {
      anchors.centerIn: parent
93 94 95
      color: DroppableTextAreaStyle.hoverContent.text.color
      font.pointSize: DroppableTextAreaStyle.hoverContent.text.fontSize
      text: qsTr('dropYourAttachment')
96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
    }
  }

  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 }
    }
116 117
  }
}