fix: change script buttons to icons

src/confirm/views/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="frame flex flex-col h-100">
+  <div class="page-confirm frame flex flex-col h-100">
     <div class="frame-block">
       <div class="buttons pull-right">
         <vm-dropdown class="confirm-options" align="right">

src/options/style.css

@@ -1,23 +1,11 @@
-html {
-  background: #f0f0f0;
-}
-
-.main {
-  position: relative;
-  max-width: 65rem;
-  height: 100%;
-  margin: 0 auto;
-}
 aside {
   position: absolute;
   background: #fafafa;
-  top: 3rem;
+  top: 0;
   left: 0;
   width: 14rem;
-  padding: 1rem 1rem 0;
-  border: 1px solid darkgray;
-  border-right: none;
-  border-radius: 1rem 0 0 1rem;
+  padding: 4rem 1rem 0;
+  border: none;
   text-align: right;
 }
 aside img {
@@ -155,5 +143,4 @@ section {
   padding: 1.2rem;
   background: white;
   border-left: 1px solid darkgray;
-  border-right: 1px solid darkgray;
 }

src/options/views/app.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="main">
-    <aside>
+  <div class="page-options pos-rel h-100">
+    <aside class="h-100">
       <img src="/public/images/icon128.png">
       <h1 v-text="i18n('extName')"></h1>
       <hr>

src/options/views/script-item.vue

@@ -2,7 +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"
+      <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">
         <svg class="icon"><use xlink:href="#question" /></svg>
@@ -16,12 +16,27 @@
       <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>
-      <button v-text="i18n('buttonEdit')" @click="onEdit"></button>
-      <button @click="onEnable" v-text="labelEnable"></button>
-      <button v-text="i18n('buttonRemove')" @click="onRemove"></button>
-      <button v-if="canUpdate" :disabled="script.checking"
-      v-text="i18n('buttonUpdate')" @click="onUpdate"></button>
+    <div class="buttons">
+      <tooltip :title="i18n('buttonEdit')">
+        <button @click="onEdit">
+          <svg class="icon"><use xlink:href="#code" /></svg>
+        </button>
+      </tooltip>
+      <tooltip :title="labelEnable">
+        <button @click="onEnable">
+          <svg class="icon"><use :xlink:href="`#toggle-${script.enabled ? 'on' : 'off'}`" /></svg>
+        </button>
+      </tooltip>
+      <tooltip :title="i18n('buttonRemove')">
+        <button @click="onRemove">
+          <svg class="icon"><use xlink:href="#trash" /></svg>
+        </button>
+      </tooltip>
+      <tooltip v-if="canUpdate" :title="i18n('buttonUpdate')">
+        <button :disabled="script.checking" @click="onUpdate">
+          <svg class="icon"><use xlink:href="#refresh" /></svg>
+        </button>
+      </tooltip>
       <span v-text="script.message"></span>
     </div>
   </div>
@@ -29,6 +44,7 @@
 
 <script>
 import { sendMessage, getLocaleString } from 'src/common';
+import Tooltip from './tooltip';
 import { store } from '../utils';
 
 const DEFAULT_ICON = '/public/images/icon48.png';
@@ -56,6 +72,9 @@ function loadImage(url) {
 
 export default {
   props: ['script'],
+  components: {
+    Tooltip,
+  },
   data() {
     return {
       safeIcon: DEFAULT_ICON,
@@ -255,9 +274,14 @@ export default {
 </script>
 
 <style>
-.script-info {
-  > *:not(:last-child) {
-    margin-right: 8px;
+.script {
+  .buttons {
+    line-height: 1;
+  }
+  &-info {
+    > *:not(:last-child) {
+      margin-right: 8px;
+    }
   }
 }
 </style>

src/options/views/tab-installed.vue

@@ -162,13 +162,15 @@ export default {
 </script>
 
 <style>
+$header-height: 4rem;
+
 .tab-installed {
   padding: 0;
   > header {
-    height: 3rem;
+    height: $header-height;
     align-items: center;
-    padding: 0 .5rem;
-    line-height: 1.5;
+    padding: 0 1rem;
+    line-height: 1;
     border-bottom: 1px solid darkgray;
   }
   .dropdown-menu {
@@ -190,7 +192,7 @@ export default {
 .backdrop,
 .scripts {
   position: absolute;
-  top: 3rem;
+  top: $header-height;
   left: 0;
   right: 0;
   bottom: 0;

src/options/views/tooltip.vue

@@ -21,8 +21,10 @@ export default {
 $bg-color: rgba(0,0,0,.8);
 $border-side: 4px solid transparent;
 $border-base: 6px solid $bg-color;
+$gap: 10px;
 
 .tooltip {
+  display: inline-block;
   position: relative;
   &-title {
     display: none;
@@ -51,7 +53,7 @@ $border-base: 6px solid $bg-color;
     }
     &.tooltip-up {
       bottom: 100%;
-      margin-bottom: 1rem;
+      margin-bottom: $gap;
       &::before {
         top: 100%;
         border-top: $border-base;
@@ -61,7 +63,7 @@ $border-base: 6px solid $bg-color;
     }
     &.tooltip-down {
       top: 100%;
-      margin-top: 1rem;
+      margin-top: $gap;
       &::before {
         bottom: 100%;
         border-left: $border-side;

src/popup/views/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div class="page-popup">
     <div class="logo" :class="{disabled:!options.isApplied}">
       <img src="/public/images/icon128.png">
     </div>