Add file and dir description tips

KoToXir · Oct 24, 2018 · 20d167e · 20d167e
1 parent 067374b
commit 20d167e
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 5 deletions.
diff --git a/src/components/FilePath.vue b/src/components/FilePath.vue
@@ -1,12 +1,12 @@
 <template>
     <div>
-        <ol class="breadcrumb">
+        <ol class="breadcrumb" ref="ol">
             <li class="breadcrumb-item">
                 <router-link to="/">{{ baseUrl }}</router-link>
             </li>
             <li v-for="part in parts" :key="part.i" :class="{active: part.active}" class="breadcrumb-item">
-                <span v-if="part.active">{{ part.file.name }}</span>
-                <router-link v-else :to="part.file.path">{{ part.file.name }}</router-link>
+                <span v-if="part.active" :title="part.file.description" data-tooltip="toggle">{{ part.file.name }}</span>
+                <router-link v-else :to="part.file.path" :title="part.file.description" data-tooltip="toggle">{{ part.file.name }}</router-link>
             </li>
             <li v-if="isSearch" class="breadcrumb-item">
                 <span>搜索文件：{{ query }}</span>
@@ -16,6 +16,9 @@
 </template>
 
 <script>
+    import jQuery from 'jquery';
+
+    const $ = jQuery;
     const _ = require('lodash');
 
     export default {
@@ -71,6 +74,22 @@
                 }
                 return _.reverse(parts);
             }
+        },
+        mounted() {
+            this.addTooltipEventListener();
+        },
+        updated() {
+            this.addTooltipEventListener();
+        },
+        methods: {
+            addTooltipEventListener() {
+                this.$nextTick(() => {
+                    $('.tooltip').remove();
+                    $(this.$el).find('[data-tooltip="toggle"]').tooltip({
+                        placement: 'bottom'
+                    });
+                });
+            }
         }
     };
 </script>
diff --git a/src/components/FileTable.vue b/src/components/FileTable.vue
@@ -20,8 +20,9 @@
                         </svg>
                     </td>
                     <td>
-                        <router-link v-if="file.isDir" :to="file.path" :title="file.name">{{ file.name }}</router-link>
-                        <a v-else :href="file.fullUrl" :title="file.name" target="_blank">{{ file.name }}</a></td>
+                        <router-link v-if="file.isDir" :to="file.path" :title="file.description" data-tooltip="toggle">{{ file.name }}</router-link>
+                        <a v-else :href="file.fullUrl" :title="file.description" target="_blank" data-tooltip="toggle">{{ file.name }}</a>
+                    </td>
                     <td :title="file.size" class="text-right">{{ file.sizeReadable }}</td>
                     <td :title="file.timeForHuman">{{ file.timeFromNowForHuman }}</td>
                 </tr>
@@ -37,6 +38,10 @@
 </template>
 
 <script>
+    import jQuery from 'jquery';
+
+    const $ = jQuery;
+
     export default {
         props: {
             files: {
@@ -71,6 +76,12 @@
                 return this.files.length <= 0;
             }
         },
+        mounted() {
+            this.addTooltipEventListener();
+        },
+        updated() {
+            this.addTooltipEventListener();
+        },
         methods: {
             sort(field) {
                 if (field === this.orderBy) {
@@ -79,6 +90,14 @@
                     this.orderBy = field;
                     this.desc = this.defaultIsDesc[field];
                 }
+            },
+            addTooltipEventListener() {
+                this.$nextTick(() => {
+                    $('.tooltip').remove();
+                    $(this.$el).find('[data-tooltip="toggle"]').tooltip({
+                        placement: 'bottom'
+                    });
+                });
             }
         }
     };

diff --git a/src/helpers.js b/src/helpers.js
@@ -44,6 +44,9 @@ export function prepareFiles(file, parent = null) {
         });
     }
     file.fullUrl = process.env.VUE_APP_DOWNLOAD_BASE_URL + file.path;
+    if (!file.hasOwnProperty('description')) {
+        file.description = '';
+    }
     file.sizeReadable = readableSize(file.size);
     file.timeForHuman = moment.unix(file.time).format('lll');
     file.timeFromNowForHuman = moment.unix(file.time).fromNow();

diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,7 @@
 import './styles/index.scss';
 import Down52PojieCn from './Down52PojieCn';
 
+require('popper.js');
 require('bootstrap');
 
 window.Down52PojieCn = Down52PojieCn;
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -143,3 +143,7 @@ $navbar-dark-color: #fff;
 .copyright span {
   display: inline-block;
 }
+
+.tooltip-inner {
+  max-width: initial;
+}