Quick View: Initial implementation of "No preview availale" and UI update.

ui/file_manager/file_manager/foreground/elements/files_quick_view.html

Index: ui/file_manager/file_manager/foreground/elements/files_quick_view.html
diff --git a/ui/file_manager/file_manager/foreground/elements/files_quick_view.html b/ui/file_manager/file_manager/foreground/elements/files_quick_view.html
index 2e8663004b5900dc8298ed907d76904c1dfbdc09..1e68e4de5d74efdf230d887fe5bd318c4a268bff 100644
--- a/ui/file_manager/file_manager/foreground/elements/files_quick_view.html
+++ b/ui/file_manager/file_manager/foreground/elements/files_quick_view.html
@@ -12,17 +12,17 @@
 <link rel="import" href="icons.html">
 
 <dom-module id="files-quick-view">
+  <link rel="import" type="css" href="../css/file_types.css">
   <style>
     :host {
       display: block;
     }
     paper-dialog {
       background: black;
-      height: 100%;
-      margin: 10px;
-      width: 100%;
+      height: 70%;
+      width: 70%;
     }
-    img, video, audio {
+    .content {
       bottom: 0;
       left: 0;
       margin: auto;
@@ -32,8 +32,16 @@
       right: 0;
       top: 0;
     }
+    #audio-control {
+      bottom: 0;
+      left: 0;
+      margin: 0;
+      position: absolute;
+      width: 100%;
+    }
     #toolbar {
-      --paper-toolbar-background: rgba(0, 0, 0, 0.5);
+      --paper-toolbar-background: rgba(127, 127, 127, 0.5);
+      --paper-toolbar-height: 32px;
       color: white;
       margin: 0;
       z-index: 1;
@@ -42,16 +50,24 @@
       position: absolute;
       right: 0px;
     }
+    paper-button {
+      padding: 4px;
+    }
     #metadata-box {
+      background: rgba(0,0,0,0.5);

[fukino, 2016/06/17 02:35:13]

needs spaces after ','

+      bottom: 0;
+      margin: 0;
       position: absolute;
-      right: 0px;
+      right: 0;
+      top: 32px;
+      z-index: 1;
     }
     #metadata-box[hidden] {
       display: none;
     }
   </style>
   <template>
-    <paper-dialog id="dialog">
+    <paper-dialog id="dialog" modal>
       <paper-toolbar id="toolbar">
         <div>[[filePath]]</div>
         <div id="buttons">
@@ -66,21 +82,34 @@
            </paper-button>
         </div>
       </paper-toolbar>
-      <template class="content" is="dom-if" if="[[image]]">
-        <div>
-          <img src="[[image]]"/>
-        </div>
-      </template>
-      <template class="content" is="dom-if" if="[[video]]">
-        <div>
-          <video controls autoplay src="[[video]]" poster="[[videoPoster]]"/>
-        </div>
-      </template>
-      <template class="content" is="dom-if" if="[[audio]]">
-        <div>
-          <audio autoplay controls src="[[audio]]"/>
-        </div>
-      </template>
+      <!-- TOOD(oka): Show default icon if image, video or audio was broken -->
+      <div>
+        <template is="dom-if" if="[[image]]">
+          <div generic-thumbnail="image">
+            <img class="content" src="[[image]]"/>
+          </div>
+        </template>
+        <template is="dom-if" if="[[video]]">
+          <div generic-thumbnail="video">
+            <!-- TODO(oka): Stop to autoplay if video is in Drive. -->
+            <video class="content" controls autoplay src="[[video]]" poster="[[videoPoster]]"/>
+          </div>
+        </template>
+        <template is="dom-if" if="[[audio]]">
+          <template is="dom-if" if="[[contentThumbnailUrl]]">
+            <img class="content" src="[[contentThumbnailUrl]]">
+          </template>
+          <template is="dom-if" if="[[!contentThumbnailUrl]]">
+            <div class="content" generic-thumbnail="audio"/>

[fukino, 2016/06/17 02:35:13]

self-closing tag for div is invalid in HTML5

[oka, 2016/06/17 23:13:54]

Done.

+          </template>
+          <!-- TODO(oka): Stop to autoplay if video is in Drive. -->
+          <audio id="audio-control" autoplay controls src="[[audio]]"/>
+        </template>
+        <!-- TODO(oka): Support folder icon -->
+        <template is="dom-if" if="[[unsupported]]"">
+          <div class="content" generic-thumbnail/>
+        </template>
+      </div>
       <files-metadata-box id="metadata-box" hidden="{{!metadataBoxActive}}"></file-metadata-box>
     </paper-dialog>
   </template>