fix: update popup style

src/popup/style.css

@@ -1,43 +1,83 @@
 body {
-  min-width: 20rem;
+  min-width: 30rem;
+  background: #f8f8f8;
+}
+
+footer {
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 12px;
+  color: #999;
+  > span {
+    cursor: pointer;
+    &:hover {
+      color: #666;
+    }
+  }
 }
 
 .logo {
-  margin-top: 1rem;
   text-align: center;
   img {
-    width: 4rem;
+    width: 32px;
   }
   &.disabled > img {
     opacity: .5;
   }
 }
 
+.menu-area {
+  cursor: pointer;
+  &:hover {
+    background: cornflowerblue;
+    color: white;
+  }
+  &.disabled {
+    color: gray;
+    &:hover {
+      color: silver;
+    }
+  }
+}
+
+.ext-name {
+  margin-top: 12px;
+  font-size: 12px;
+  &.disabled {
+    color: gray;
+  }
+}
+
+.menu-buttons {
+  align-items: center;
+  padding: 8px;
+  background: white;
+  > .menu-area {
+    padding: 8px;
+  }
+  .icon {
+    display: block;
+    width: 20px;
+    height: 20px;
+  }
+}
+
 .menu {
+  background: white;
   border-top: 1px solid silver;
   &-item {
     position: relative;
     display: flex;
     align-items: center;
-    height: 2rem;
+    min-height: 2rem;
     padding-left: 1rem;
     padding-right: 1rem;
-    cursor: pointer;
-    text-align: center;
+    text-align: left;
     white-space: nowrap;
     .submenu & {
       text-align: left;
     }
-    &.disabled {
-      color: gray;
-      &:hover {
-        color: silver;
-      }
-    }
-    &:hover {
-      background: cornflowerblue;
-      color: white;
-    }
     .icon {
       flex: 0 0 1rem;
     }
@@ -100,3 +140,15 @@ body {
     }
   }
 }
+
+.message {
+  position: absolute;
+  max-width: 100%;
+  left: 0;
+  bottom: 0;
+  padding: 4px 8px;
+  word-wrap: break-word;
+  font-size: 12px;
+  background: #fdfdfd;
+  border: 1px solid #ddd;
+}

src/popup/views/app.vue

@@ -1,29 +1,42 @@
 <template>
   <div class="page-popup">
-    <div class="logo" :class="{disabled:!options.isApplied}">
-      <img src="/public/images/icon128.png">
-    </div>
-    <div class="menu-item" :class="{disabled:!options.isApplied}" @click="onToggle">
-      <icon :name="getSymbolCheck(options.isApplied)"></icon>
+    <div class="flex menu-buttons">
+      <div class="logo" :class="{disabled:!options.isApplied}">
+        <img src="/public/images/icon128.png">
+      </div>
       <div
-        class="flex-1"
-        v-text="options.isApplied ? i18n('menuScriptEnabled') : i18n('menuScriptDisabled')"
+        class="flex-1 ml-1 ext-name"
+        :class="{disabled:!options.isApplied}"
+        v-text="i18n('extName')"
       />
-    </div>
-    <div class="menu">
-      <div class="menu-item" @click="onManage">
+      <tooltip
+        class="menu-area"
+        :class="{disabled:!options.isApplied}"
+        :content="options.isApplied ? i18n('menuScriptEnabled') : i18n('menuScriptDisabled')"
+        placement="bottom"
+        align="end"
+        @click.native="onToggle">
+        <icon :name="getSymbolCheck(options.isApplied)"></icon>
+      </tooltip>
+      <tooltip
+        class="menu-area"
+        :content="i18n('menuDashboard')"
+        placement="bottom"
+        align="end"
+        @click.native="onManage">
         <icon name="cog"></icon>
-        <div class="flex-1" v-text="i18n('menuDashboard')"></div>
-      </div>
-    </div>
-    <div class="menu">
-      <div class="menu-item" @click="onCreateScript">
-        <icon name="code"></icon>
-        <div class="flex-1" v-text="i18n('menuNewScript')"></div>
-      </div>
+      </tooltip>
+      <tooltip
+        class="menu-area"
+        :content="i18n('menuNewScript')"
+        placement="bottom"
+        align="end"
+        @click.native="onCreateScript">
+        <icon name="plus"></icon>
+      </tooltip>
     </div>
     <div class="menu" v-show="store.domain">
-      <div class="menu-item" @click="onFindSameDomainScripts">
+      <div class="menu-item menu-area" @click="onFindSameDomainScripts">
         <icon name="search"></icon>
         <div class="flex-1" v-text="i18n('menuFindScripts')"></div>
       </div>
@@ -32,7 +45,7 @@
       class="menu menu-commands"
       v-show="commands.length"
       :class="{expand: activeMenu === 'commands'}">
-      <div class="menu-item" @click="toggleMenu('commands')">
+      <div class="menu-item menu-area" @click="toggleMenu('commands')">
         <div class="flex-auto" v-text="i18n('menuCommands')"></div>
         <icon name="arrow" class="icon-collapse"></icon>
       </div>
@@ -40,7 +53,7 @@
         <div
           v-for="(item, index) in commands"
           :key="index"
-          class="menu-item"
+          class="menu-item menu-area"
           @click="onCommand(item)">
           <span v-text="item.name"></span>
         </div>
@@ -50,18 +63,18 @@
       v-show="scripts.length"
       class="menu menu-scripts"
       :class="{expand: activeMenu === 'scripts'}">
-      <div class="menu-item" @click="toggleMenu('scripts')">
+      <div class="menu-item menu-area" @click="toggleMenu('scripts')">
         <div class="flex-auto" v-text="i18n('menuMatchedScripts')"></div>
         <icon name="arrow" class="icon-collapse"></icon>
       </div>
       <div class="submenu">
-        <div v-for="(item, index) in scripts" :key="index">
+        <div v-for="(item, index) in scripts" :key="index" @mouseenter="message = item.name" @mouseleave="message = ''">
           <div
-            class="menu-item"
+            class="menu-item menu-area"
             :class="{ disabled: !item.data.config.enabled }"
             @click="onToggleScript(item)">
             <icon :name="getSymbolCheck(item.data.config.enabled)"></icon>
-            <div class="flex-auto ellipsis" v-text="item.name" :title="item.name"></div>
+            <div class="flex-auto ellipsis" v-text="item.name" />
           </div>
           <div class="submenu-buttons">
             <div class="submenu-button" @click="onEditScript(item)">
@@ -71,10 +84,17 @@
         </div>
       </div>
     </div>
+    <footer>
+      <span @click="onVisitWebsite">Visit Website</span>
+    </footer>
+    <div class="message" v-if="message">
+      <div v-text="message"></div>
+    </div>
   </div>
 </template>
 
 <script>
+import Tooltip from 'vueleton/lib/tooltip/bundle';
 import options from '#/common/options';
 import { getLocaleString, sendMessage } from '#/common';
 import Icon from '#/common/ui/icon';
@@ -92,12 +112,14 @@ options.hook(changes => {
 export default {
   components: {
     Icon,
+    Tooltip,
   },
   data() {
     return {
       store,
       options: optionsData,
       activeMenu: 'scripts',
+      message: null,
     };
   },
   computed: {
@@ -132,6 +154,12 @@ export default {
       browser.runtime.openOptionsPage();
       window.close();
     },
+    onVisitWebsite() {
+      browser.tabs.create({
+        url: 'https://violentmonkey.github.io/',
+      });
+      window.close();
+    },
     onEditScript(item) {
       browser.tabs.create({
         url: browser.runtime.getURL(`/options/index.html#scripts/${item.data.props.id}`),