feat: show lastUpdatedAt in tooltip

close #257

src/_locales/cs/messages.yml

@@ -417,3 +417,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: ''
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/_locales/de/messages.yml

@@ -419,3 +419,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: Sortieren nach $1
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/_locales/en/messages.yml

@@ -417,3 +417,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: Sort by $1
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: Last updated at $1

src/_locales/es/messages.yml

@@ -421,3 +421,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: ''
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/_locales/fi/messages.yml

@@ -419,3 +419,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: 'Järjestä $1:n mukaan'
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/_locales/fr/messages.yml

@@ -420,3 +420,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: ''
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/_locales/hr/messages.yml

@@ -417,3 +417,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: ''
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/_locales/id/messages.yml

@@ -419,3 +419,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: ''
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/_locales/it/messages.yml

@@ -282,7 +282,9 @@ msgNamespaceConflict:
   description: >-
     Message shown when namespace of the new script conflicts with an existent
     one.
-  message: Conflitto del namespace dello script! Per favore modifica @name e @namespace.
+  message: >-
+    Conflitto del namespace dello script! Per favore modifica @name e
+    @namespace.
 msgInvalidScript:
   description: Message shown when script is invalid.
   message: Script non valido!
@@ -417,3 +419,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: Ordina per $1
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/_locales/ja/messages.yml

@@ -417,3 +417,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: $1 によって
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/_locales/pl/messages.yml

@@ -422,3 +422,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: Sortuj wg $1
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/_locales/pt_BR/messages.yml

@@ -421,3 +421,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: Ordenar por $1
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/_locales/pt_PT/messages.yml

@@ -421,3 +421,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: Ordenar por $1
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/_locales/ro/messages.yml

@@ -417,3 +417,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: ''
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/_locales/ru/messages.yml

@@ -424,3 +424,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: Сортировать по $1
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/_locales/sr/messages.yml

@@ -417,3 +417,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: ''
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/_locales/tr/messages.yml

@@ -421,3 +421,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: ''
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/_locales/vi/messages.yml

@@ -417,3 +417,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: Sắp xếp theo $1
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/_locales/zh_CN/messages.yml

@@ -415,3 +415,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: 按 $1 排序
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: 最后更新于 $1

src/_locales/zh_TW/messages.yml

@@ -415,3 +415,6 @@ filterAlphabeticalOrder:
 labelFilterSort:
   description: Label for sort filter.
   message: ''
+labelLastUpdatedAt:
+  description: Label shown on last updated time.
+  message: ''

src/common/ui/tooltip.vue

@@ -85,6 +85,7 @@ $max-width: 250px;
       &.tooltip-align-center {
         > div {
           left: 50%;
+          // calc will be reduced by cssnano
           margin-left: calc(-$max-width / 2);
           text-align: center;
         }

src/options/views/script-item.vue

@@ -4,12 +4,15 @@
     <div class="script-info flex">
       <div class="script-name ellipsis" v-text="script._cache.name"></div>
       <div class="flex-auto"></div>
-      <div class="script-author ellipsis" :title="script.meta.author" v-if="author">
-        <span v-text="i18n('labelAuthor')"></span>
-        <a :href="'mailto:'+author.email" v-if="author.email" v-text="author.name"></a>
-        <span v-if="!author.email" v-text="author.name"></span>
-      </div>
-      <div class="script-version" v-text="script.meta.version ? `v${script.meta.version}` : ''"></div>
+      <tooltip :title="i18n('labelAuthor') + script.meta.author" class="script-author" v-if="author" align="end">
+        <icon name="author"></icon>
+        <a class="ellipsis" :href="`mailto:${author.email}`" v-if="author.email" v-text="author.name"></a>
+        <span class="ellipsis" v-else v-text="author.name"></span>
+      </tooltip>
+      <tooltip :title="lastModified.title" align="end">
+        <span v-text="script.meta.version ? `v${script.meta.version}` : ''"></span>
+        <span class="secondary" v-text="lastModified.show"></span>
+      </tooltip>
       <div v-if="script.config.removed" v-text="i18n('labelRemoved')"></div>
       <div v-if="script.config.removed">
         <tooltip :title="i18n('buttonUndo')" placement="left">
@@ -131,6 +134,29 @@ export default {
     description() {
       return this.script.custom.description || getLocaleString(this.script.meta, 'description');
     },
+    lastModified() {
+      const { lastModified } = this.script.props;
+      const ret = {};
+      if (lastModified) {
+        let delta = (Date.now() - lastModified) / 1000 / 60;
+        const units = [
+          [60, 'min'],
+          [24, 'h'],
+          [30, 'd'],
+          [12, 'mon'],
+          [-1, 'yr'],
+        ];
+        const unitInfo = units.find(([max]) => {
+          if (max < 0 || delta < max) return true;
+          delta = Math.floor(delta / max);
+          return false;
+        });
+        const date = new Date(lastModified);
+        ret.title = this.i18n('labelLastUpdatedAt', date.toLocaleString());
+        ret.show = `${delta | 0}${unitInfo[1]}`;
+      }
+      return ret;
+    },
   },
   mounted() {
     const { icon } = this.script.meta;
@@ -314,10 +340,17 @@ export default {
   &:hover {
     border-color: darkgray;
   }
+  .secondary {
+    color: gray;
+    font-size: small;
+  }
   &.disabled,
   &.removed {
     background: #f0f0f0;
     color: #999;
+    .secondary {
+      color: darkgray;
+    }
   }
   &.removed {
     padding-bottom: 10px;
@@ -336,6 +369,9 @@ export default {
     > .disabled {
       color: gainsboro;
     }
+    .icon {
+      display: block;
+    }
   }
   &-info {
     margin-left: 3.5rem;
@@ -344,9 +380,6 @@ export default {
     > *:not(:last-child) {
       margin-right: 8px;
     }
-    .icon {
-      display: block;
-    }
   }
   &-icon {
     position: absolute;
@@ -370,7 +403,13 @@ export default {
     }
   }
   &-author {
-    max-width: 30%;
+    > * {
+      vertical-align: middle;
+    }
+    > .ellipsis {
+      display: inline-block;
+      max-width: 100px;
+    }
   }
 }
 .dragging {

src/resources/icons/author.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M512 0C229.232 0 0 229.232 0 512c0 282.768 229.232 512 512 512 282.784 0 512-229.232 512-512C1024 229.232 794.784 0 512 0zm0 938.704c-103.856 0-199.52-34.992-277.328-93.456 57.712-5.424 164.32-29.744 165.328-136.56.288-31.632 21.968-46.576 0-69.008-22.432-22.944-34.752-70.208-44.8-115.008-1.872-8.304-7.472-13.664-14.08-18.784-27.552-7.808-48.112-37.68-48.112-73.568 0-18.48 5.664-35.184 14.688-48.32 1.536-7.072 2.704-13.936 2.688-20.304-.16-70.688-5.744-142.368 22.4-184 91.856-135.856 269.584-137.072 358.416 0 30.064 46.352 22.72 113.584 22.4 184-.032 6 .896 12.608 2.128 19.44 9.392 13.264 15.28 30.304 15.28 49.184 0 33.456-17.968 61.52-42.72 71.52-9.424 7.6-18.16 13.088-19.504 20.832-7.568 44.144-28.304 95.824-44.784 115.008-13.92 16.176-.32 37.376 0 69.008.976 106.816 107.6 131.136 165.312 136.56-77.776 58.464-173.504 93.456-277.312 93.456z"/></svg>