fix: add button for home page

close #156

icons/home.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M937.772 573.35H880.4c-25.349 0-45.898 20.615-45.898 46.047v310.822c0 19.075-15.413 34.534-34.423 34.534H616.488c-19.01 0-34.423-15.46-34.423-34.534V711.491H444.373V930.22c0 19.075-15.412 34.534-34.425 34.534H226.356c-19.01 0-34.42-15.46-34.42-34.534V619.396c0-25.431-20.55-46.048-45.899-46.048H88.665c-19.013 0-34.425-15.463-34.425-34.535 0-4.899 1.075-9.521 2.909-13.743a34.458 34.458 0 0 1 7.603-11.546L477.57 76.64c9.657-9.68 23.552-12.133 35.649-7.95 12.096-4.183 25.992-1.73 35.649 7.95l412.816 436.884a34.495 34.495 0 0 1 7.605 11.546c1.834 4.22 2.906 8.844 2.906 13.743 0 19.072-15.412 34.535-34.423 34.535z"/></svg>

src/_locales/cs/messages.yml

@@ -406,3 +406,9 @@ labelSearchScript:
 labelNoSearchScripts:
   description: Message shown when no script is found in search results.
   message: ''
+buttonHome:
+  description: Button to open homepage.
+  message: ''
+buttonSupport:
+  description: Button to open support page.
+  message: ''

src/_locales/de/messages.yml

@@ -408,3 +408,9 @@ labelSearchScript:
 labelNoSearchScripts:
   description: Message shown when no script is found in search results.
   message: Kein Skript gefunden.
+buttonHome:
+  description: Button to open homepage.
+  message: ''
+buttonSupport:
+  description: Button to open support page.
+  message: ''

src/_locales/en/messages.yml

@@ -406,3 +406,9 @@ labelSearchScript:
 labelNoSearchScripts:
   description: Message shown when no script is found in search results.
   message: No script is found.
+buttonHome:
+  description: Button to open homepage.
+  message: Homepage
+buttonSupport:
+  description: Button to open support page.
+  message: Support page

src/_locales/es/messages.yml

@@ -410,3 +410,9 @@ labelSearchScript:
 labelNoSearchScripts:
   description: Message shown when no script is found in search results.
   message: No se encontraron scripts.
+buttonHome:
+  description: Button to open homepage.
+  message: ''
+buttonSupport:
+  description: Button to open support page.
+  message: ''

src/_locales/hr/messages.yml

@@ -1,11 +1,11 @@
 extName:
-  description: Ime ove extenzije.
+  description: Name of this extension.
   message: Violentmonkey
 extDescription:
-  description: Opis ove extenzije.
+  description: Description for this extension.
   message: Omogućava korištenje korisničkih skripti u web pregledniku.
 msgUpdated:
-  description: Poruka koja se prikazuje kada je skripta obnovljena/reinstalirana.
+  description: Message shown when a script is updated/reinstalled.
   message: Skripta je obnovljena.
 msgErrorFetchingScript:
   description: Message shown when Violentmonkey fails fetching a new version of the script.
@@ -14,11 +14,11 @@ msgInstalled:
   description: Message shown when a script is installed.
   message: Skripta je instalirana.
 Warning:
-  description: Pokaži upozorenja s notifikacijom.
+  description: Show warnings with a notification.
   message: Upozorenje
   touched: false
 msgWarnGrant:
-  description: Poruka koja se pirkazuje kad `@grant` nije nađen u skripti.
+  description: Message shown when `@grant` is not found in a script.
   message: 'Skripta [$1] nema `@grant` linije! Klikni da vidiš više detalja.'
   touched: false
 labelNoName:
@@ -54,10 +54,10 @@ installOptionTrack:
   description: Option to track the loading local file before window is closed.
   message: Track lokalni fajl prije no što se ovaj prozor zatvori
 buttonConfirmInstallation:
-  description: Gumb kojim se potvrđuje instalacija skripte.
+  description: Button to confirm installation of a script.
   message: Potvrdi instalaciju
 buttonClose:
-  description: Gumb za zatvaranje prozora.
+  description: Button to close window.
   message: Zatvori
 msgErrorLoadingData:
   description: >-
@@ -79,16 +79,16 @@ msgLoadingData:
   description: Message shown on confirm page when the script to be installed is loading.
   message: Učitavam podatke skripte...
 sideMenuInstalled:
-  description: 'Side menu: Instalirane skripte'
+  description: 'Side menu: Installed scripts'
   message: Instalirane skripte
 sideMenuSettings:
-  description: 'Side menu: Postavke'
+  description: 'Side menu: Settings'
   message: Postavke
 sideMenuAbout:
   description: 'Side menu: About'
   message: O extenziji
 buttonNew:
-  description: Gumb za kreiranje nove skripte.
+  description: Button to create a new script.
   message: Nova
 buttonUpdateAll:
   description: Check all scripts for updates.
@@ -154,7 +154,7 @@ labelTranslator:
   message: 'Prevoditelj: '
 anchorTranslator:
   description: Translator shown on about tab.
-  message: 'diomed'
+  message: diomed
 labelCurrentLang:
   description: Label of current language.
   message: 'Trenutni jezik: '
@@ -201,19 +201,19 @@ buttonSaveClose:
   description: Button to save modifications of a script and then close the editing page.
   message: Sačuvaj & Zatvori
 labelNoScripts:
-  description: Poruka koja se prikazuje kad nijedna skripta nije instalirana.
+  description: Message shown when no script is installed.
   message: 'Ups, još nemaš nijednu skriptu.'
 buttonDisable:
   description: Button to disable a script.
   message: Onemogući
 buttonEnable:
-  description: Gumb za omogućavanje skripte.
+  description: Button to enable a script.
   message: Omogući
 buttonEdit:
-  description: Gumb za uređivanje skripte.
+  description: Button to edit a script.
   message: Uredi
 buttonRemove:
-  description: Gumb za micanje skripte.
+  description: Button to remove a script.
   message: Makni
 buttonUpdate:
   description: Check a script for updates.
@@ -304,7 +304,7 @@ msgInvalidScript:
   message: Skripta ne valja!
 labelShowBadge:
   description: Option to show number of running scripts on the badge.
-  message: Na bedžu [znački] prikaži broj skripti koje rade
+  message: 'Na bedžu [znački] prikaži broj skripti koje rade'
 labelLineNumber:
   description: Label for line number jumper.
   message: 'Linija br.: '
@@ -406,3 +406,9 @@ labelSearchScript:
 labelNoSearchScripts:
   description: Message shown when no script is found in search results.
   message: Nijedna skripta nije nađena.
+buttonHome:
+  description: Button to open homepage.
+  message: ''
+buttonSupport:
+  description: Button to open support page.
+  message: ''

src/_locales/id/messages.yml

@@ -408,3 +408,9 @@ labelSearchScript:
 labelNoSearchScripts:
   description: Message shown when no script is found in search results.
   message: No script is found.
+buttonHome:
+  description: Button to open homepage.
+  message: ''
+buttonSupport:
+  description: Button to open support page.
+  message: ''

src/_locales/ja/messages.yml

@@ -406,3 +406,9 @@ labelSearchScript:
 labelNoSearchScripts:
   description: Message shown when no script is found in search results.
   message: スクリプトは見つかりませんでした。
+buttonHome:
+  description: Button to open homepage.
+  message: ''
+buttonSupport:
+  description: Button to open support page.
+  message: ''

src/_locales/pl/messages.yml

@@ -411,3 +411,9 @@ labelSearchScript:
 labelNoSearchScripts:
   description: Message shown when no script is found in search results.
   message: Nie znaleziono skryptu.
+buttonHome:
+  description: Button to open homepage.
+  message: ''
+buttonSupport:
+  description: Button to open support page.
+  message: ''

src/_locales/ro/messages.yml

@@ -406,3 +406,9 @@ labelSearchScript:
 labelNoSearchScripts:
   description: Message shown when no script is found in search results.
   message: ''
+buttonHome:
+  description: Button to open homepage.
+  message: ''
+buttonSupport:
+  description: Button to open support page.
+  message: ''

src/_locales/ru/messages.yml

@@ -413,3 +413,9 @@ labelSearchScript:
 labelNoSearchScripts:
   description: Message shown when no script is found in search results.
   message: Скрипты не найдены.
+buttonHome:
+  description: Button to open homepage.
+  message: ''
+buttonSupport:
+  description: Button to open support page.
+  message: ''

src/_locales/sr/messages.yml

@@ -406,3 +406,9 @@ labelSearchScript:
 labelNoSearchScripts:
   description: Message shown when no script is found in search results.
   message: ''
+buttonHome:
+  description: Button to open homepage.
+  message: ''
+buttonSupport:
+  description: Button to open support page.
+  message: ''

src/_locales/vi/messages.yml

@@ -406,3 +406,9 @@ labelSearchScript:
 labelNoSearchScripts:
   description: Message shown when no script is found in search results.
   message: ''
+buttonHome:
+  description: Button to open homepage.
+  message: ''
+buttonSupport:
+  description: Button to open support page.
+  message: ''

src/_locales/zh/messages.yml

@@ -404,3 +404,9 @@ labelSearchScript:
 labelNoSearchScripts:
   description: Message shown when no script is found in search results.
   message: 没有找到脚本！
+buttonHome:
+  description: Button to open homepage.
+  message: 主页
+buttonSupport:
+  description: Button to open support page.
+  message: 支持页面

src/common/ui/style/style.css

@@ -65,6 +65,7 @@ svg {
 }
 
 .btn-ghost,
+.sep,
 button {
   display: inline-block;
   padding: 0 .5rem;
@@ -74,6 +75,7 @@ button {
   vertical-align: bottom;
 }
 .btn-ghost {
+  color: inherit;
   border: 1px solid transparent;
   &:hover {
     border-color: #bbb;
@@ -85,6 +87,13 @@ button {
   }
 }
 
+.sep {
+  &::after {
+    content: '';
+    border-right: 1px solid #bbb;
+  }
+}
+
 .pull-right {
   float: right;
 }

src/options/views/script-item.vue

@@ -2,11 +2,7 @@
   <div class="script" :class="{disabled:!script.enabled}" draggable="true" @dragstart.prevent="onDragStart">
     <img class="script-icon" :src="safeIcon">
     <div class="script-info flex">
-      <a class="script-name ellipsis" target="_blank" :href="homepageURL"
-      v-text="script.custom.name || getLocaleString('name')"></a>
-      <a class="script-support" v-if="script.meta.supportURL" target=_blank :href="script.meta.supportURL">
-        <icon name="question"></icon>
-      </a>
+      <div class="script-name ellipsis" v-text="script.custom.name || getLocaleString('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>
@@ -16,24 +12,35 @@
       <div class="script-version" v-text="script.meta.version?'v'+script.meta.version:''"></div>
     </div>
     <p class="script-desc ellipsis" v-text="script.custom.description || getLocaleString('description')"></p>
-    <div class="buttons flex">
-      <tooltip :title="i18n('buttonEdit')">
+    <div class="script-buttons flex">
+      <tooltip :title="i18n('buttonEdit')" align="start">
         <span class="btn-ghost" @click="onEdit">
           <icon name="code"></icon>
         </span>
       </tooltip>
-      <tooltip :title="labelEnable">
+      <tooltip :title="labelEnable" align="start">
         <span class="btn-ghost" @click="onEnable">
           <icon :name="`toggle-${script.enabled ? 'on' : 'off'}`"></icon>
         </span>
       </tooltip>
-      <tooltip v-if="canUpdate" :title="i18n('buttonUpdate')">
+      <tooltip v-if="canUpdate" :title="i18n('buttonUpdate')" align="start">
         <span class="btn-ghost" :disabled="script.checking" @click="onUpdate">
           <icon name="refresh"></icon>
         </span>
       </tooltip>
+      <span class="sep"></span>
+      <tooltip v-if="homepageURL || script.meta.supportURL" :title="i18n('buttonHome')" align="start">
+        <a class="btn-ghost" target="_blank" :href="homepageURL">
+          <icon name="home"></icon>
+        </a>
+      </tooltip>
+      <tooltip v-if="script.meta.supportURL" :title="i18n('buttonSupport')" align="start">
+        <a class="btn-ghost" target="_blank" :href="script.meta.supportURL">
+          <icon name="question"></icon>
+        </a>
+      </tooltip>
       <div class="flex-auto" v-text="script.message"></div>
-      <tooltip :title="i18n('buttonRemove')">
+      <tooltip :title="i18n('buttonRemove')" align="end">
         <span class="btn-ghost" @click="onRemove">
           <icon name="trash"></icon>
         </span>
@@ -291,9 +298,10 @@ export default {
     background: #f0f0f0;
     color: #999;
   }
-  .buttons {
+  &-buttons {
     align-items: center;
     line-height: 1;
+    color: #3e4651;
     > .flex-auto {
       margin-left: 1rem;
     }
@@ -331,6 +339,7 @@ export default {
   &-desc {
     margin-left: 3.5rem;
     line-height: 2rem;
+    color: #60646d;
     &::after {
       content: "\200b";
     }

src/options/views/tooltip.vue

@@ -1,7 +1,10 @@
 <template>
   <span class="tooltip">
     <slot></slot>
-    <div class="tooltip-title" :class="`tooltip-${placement}`" v-text="title"></div>
+    <div class="tooltip-title" :class="`tooltip-${placement} tooltip-align-${align}`">
+      <i></i>
+      <div v-text="title"></div>
+    </div>
   </span>
 </template>
 
@@ -13,6 +16,10 @@ export default {
       type: String,
       default: 'up',
     },
+    align: {
+      type: String,
+      default: 'center', // start | center | end
+    },
   },
 };
 </script>
@@ -29,56 +36,79 @@ $gap: 10px;
   &-title {
     display: none;
     position: absolute;
-    padding: 8px;
-    white-space: nowrap;
-    border-radius: 6px;
-    background: $bg-color;
     color: white;
     font-size: 12px;
     z-index: 100;
     .tooltip:hover & {
       display: block;
     }
-    &::before {
-      content: '';
+    > * {
       position: absolute;
+      white-space: nowrap;
+    }
+    > div {
+      padding: 8px;
+      background: $bg-color;
+      border-radius: 6px;
     }
     &.tooltip-up,
     &.tooltip-down {
-      &,
-      &::before {
-        left: 50%;
+      left: 50%;
+      > i {
         transform: translateX(-50%);
       }
+      &.tooltip-align-center {
+        > div {
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
+      &.tooltip-align-start {
+        > div {
+          left: -10px;
+        }
+      }
+      &.tooltip-align-end {
+        > div {
+          right: -10px;
+        }
+      }
     }
     &.tooltip-up {
       bottom: 100%;
       margin-bottom: $gap;
-      &::before {
+      > i {
         top: 100%;
         border-top: $border-base;
         border-left: $border-side;
         border-right: $border-side;
       }
+      > div {
+        bottom: 0;
+      }
     }
     &.tooltip-down {
       top: 100%;
       margin-top: $gap;
-      &::before {
+      > i {
         bottom: 100%;
         border-left: $border-side;
         border-right: $border-side;
         border-bottom: $border-base;
       }
+      > div {
+        top: 0;
+      }
     }
     &.tooltip-right {
       top: 50%;
       left: 100%;
-      transform: translate(10px,-50%);
-      &::before {
-        top: 50%;
-        right: 100%;
+      margin-left: 10px;
+      > * {
         transform: translateY(-50%);
+      }
+      > i {
+        right: 100%;
         border-top: $border-side;
         border-right: $border-base;
         border-bottom: $border-side;