Display image name

owncloud · Jul 19, 2019 · c0a0188 · c0a0188
1 parent 54d36ba
commit c0a0188
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/apps/media-viewer/src/Mediaviewer.vue b/apps/media-viewer/src/Mediaviewer.vue
@@ -8,15 +8,14 @@
     <oc-spinner class="uk-position-center" v-if="loading" size="large" />
     <oc-icon v-if="failed" name="review" variation="danger" size="large" class="uk-position-center uk-z-index" />
 
-    <div class="uk-overlay uk-overlay-primary uk-light uk-padding-small uk-position-medium uk-position-bottom-center">
-      <div class="uk-width-large uk-flex uk-flex-middle uk-flex-center uk-flex-between" style="user-select:none;">
-        <div class="uk-flex uk-flex-middle uk-flex-center">
+    <div class="uk-position-medium uk-position-bottom-center">
+      <div class="uk-overlay uk-overlay-default uk-padding-small uk-text-center uk-text-meta uk-text-truncate">{{ image.name }}</div>
+      <div class="uk-overlay uk-overlay-primary uk-light uk-padding-small">
+        <div class="uk-width-large uk-flex uk-flex-middle uk-flex-center uk-flex-around" style="user-select:none;">
           <oc-icon role="button" class="oc-cursor-pointer" size="medium" @click="prev" name="chevron_left" />
           <!-- @TODO: Bring back working uk-light -->
           <span class="uk-text-small" style="color:#fff"> {{ activeIndex + 1 }} <span v-translate>of</span> {{ mediaFiles.length }} </span>
           <oc-icon role="button" class="oc-cursor-pointer" size="medium" @click="next" name="chevron_right" />
-        </div>
-        <div class="uk-flex uk-flex-middle uk-flex-center">
           <oc-icon role="button" class="oc-cursor-pointer" @click="downloadFile" name="file_download"  />
           <oc-icon role="button" class="oc-cursor-pointer" @click="closeApp" name="close"/>
         </div>
@@ -71,6 +70,7 @@ export default {
       this.mediaSource(this.thumbPath).then(imageUrl => {
         this.images.push({
           id: this.activeMediaFile.id,
+          name: this.activeMediaFile.name,
           url: imageUrl
         })
         this.image = this.activeMediaFileCached