Quick View: Support Drive and beautify UI for quick view.

ui/file_manager/file_manager/foreground/elements/files_quick_view.js

Index: ui/file_manager/file_manager/foreground/elements/files_quick_view.js
diff --git a/ui/file_manager/file_manager/foreground/elements/files_quick_view.js b/ui/file_manager/file_manager/foreground/elements/files_quick_view.js
index 30c11e348b1a23978bc6a85391e5b2ef25eb809a..13e2f2b862d9810cbc0e8e7f0716eb7acc78ff37 100644
--- a/ui/file_manager/file_manager/foreground/elements/files_quick_view.js
+++ b/ui/file_manager/file_manager/foreground/elements/files_quick_view.js
@@ -6,13 +6,14 @@ var FilesQuickView = Polymer({
   is: 'files-quick-view',
 
   properties: {
+    // File media type, e.g. image, video.
+    type: String,
     filePath: String,
-    image: String,
-    video: String,
+    isUnsupported: Boolean,

[oka, 2016/06/27 13:40:09]

Remove.

+    contentUrl: String,
     videoPoster: String,
-    audio: String,
-    contentThumbnailUrl: String,
-    unsupported: Boolean,
+    audioArtwork: String,
+    autoplay: Boolean,
 
     // metadata-box-active-changed event is fired on attribute change.
     metadataBoxActive: {
@@ -26,41 +27,109 @@ var FilesQuickView = Polymer({
     'iron-overlay-closed': 'clear',
   },
 
+  // Clears fields.
   clear: function() {
     this.filePath = '';
-    this.image = '';
-    this.video = '';
-    this.audio = '';
-    this.contentThumbnailUrl = '';
-    this.unsupported = false;
+    this.type = '';
+    this.contentUrl = '';
+    this.videoPoster = '';
+    this.audioArtwork = '';
+    this.autoplay = false;
   },
 
-  // Open the dialog.
+  // Opens the dialog.
   open: function() {
     if (!this.isOpened())
       this.$.dialog.open();
   },
 
+  // Closes the dialog.
   close: function() {
     if (this.isOpened())
       this.$.dialog.close();
   },
 
+  /**
+   * @return {boolean}
+   */
   isOpened: function() {
     // TODO(oka): This is a workaround to satisfy closure compiler.
     // Update ['opened'] to .opened.
     return (/** @type{Object} */ (this.$.dialog))['opened'];
   },
 
+  /**
+   * @return {!FilesMetadataBox}
+   */
   getFilesMetadataBox: function() {
     return this.$['metadata-box'];
   },
 
-  // Client should assign the function to open the file.
+  /**
+   * Client should assign the function to open the file.
+   *
+   * @param {!Event} event
+   */
   onOpenInNewButtonTap: function(event) {},
 
+  /**
+   * @param {!Event} event
+   *
+   * @private
+   */
   onCloseButtonTap_: function(event) {
     this.close();
   },
 
+  /**
+   * @param {!Event} event tap event.
+   *
+   * @private
+   */
+  onContentPanelTap_: function(event) {
+    var target = event.detail.sourceEvent.target;
+    if (target.classList.contains('close-on-click'))
+      this.close();
+  },
+
+  /**
+   * @param {string} type
+   * @return {boolean}
+   *
+   * @private
+   */
+  isImage_: function(type) {
+    return type === 'image';
+  },
+
+  /**
+   * @param {string} type
+   * @return {boolean}
+   *
+   * @private
+   */
+  isVideo_: function(type) {
+    return type === 'video';
+  },
+
+  /**
+   * @param {string} type
+   * @return {boolean}
+   *
+   * @private
+   */
+  isAudio_: function(type) {
+    return type === 'audio';
+  },
+
+  /**
+   * @param {string} type
+   * @return {boolean}
+   *
+   * @private
+   */
+  isUnsupported_: function(type) {
+    return !this.isImage_(type) && !this.isVideo_(type) && !this.isAudio_(type);
+  },
+
 });