Browse Source

style: fix size of popup menu

Make sure text on menu buttons is always visible.
Gerald 7 years ago
parent
commit
e2e3060eaa
3 changed files with 12 additions and 8 deletions
  1. 3 0
      src/common/ui/style/style.css
  2. 6 5
      src/popup/style.css
  3. 3 3
      src/popup/views/app.vue

+ 3 - 0
src/common/ui/style/style.css

@@ -117,6 +117,9 @@ button {
     width: 0;
   }
 }
+.flex-1 {
+  flex: 1;
+}
 .pos-rel {
   position: relative;
 }

+ 6 - 5
src/popup/style.css

@@ -24,13 +24,8 @@ body {
     cursor: pointer;
     text-align: center;
     white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
     .submenu & {
       text-align: left;
-      > .flex-auto {
-        margin-left: 1rem;
-      }
     }
     &.disabled {
       color: gray;
@@ -45,6 +40,9 @@ body {
     .icon {
       flex: 0 0 1rem;
     }
+    > .icon:first-child {
+      margin-right: 1rem;
+    }
     > .flex-auto {
       &:first-child {
         padding-left: 1rem;
@@ -53,6 +51,9 @@ body {
         padding-right: 1rem;
       }
     }
+    > .flex-1 {
+      padding-right: 2rem;
+    }
   }
   &.expand {
     background: #fbfbfb;

+ 3 - 3
src/popup/views/app.vue

@@ -5,18 +5,18 @@
     </div>
     <div class="menu-item" :class="{disabled:!options.isApplied}" @click="onToggle">
       <icon :name="getSymbolCheck(options.isApplied)"></icon>
-      <div class="flex-auto" v-text="options.isApplied ? i18n('menuScriptEnabled') : i18n('menuScriptDisabled')"></div>
+      <div class="flex-1" v-text="options.isApplied ? i18n('menuScriptEnabled') : i18n('menuScriptDisabled')"></div>
     </div>
     <div class="menu">
       <div class="menu-item" @click="onManage">
         <icon name="cog"></icon>
-        <div class="flex-auto" v-text="i18n('menuDashboard')"></div>
+        <div class="flex-1" v-text="i18n('menuDashboard')"></div>
       </div>
     </div>
     <div class="menu" v-show="store.domain">
       <div class="menu-item" @click="onFindSameDomainScripts">
         <icon name="search"></icon>
-        <div class="flex-auto" v-text="i18n('menuFindScripts')"></div>
+        <div class="flex-1" v-text="i18n('menuFindScripts')"></div>
       </div>
     </div>
     <div class="menu menu-commands" v-show="commands.length" :class="{expand: activeMenu === 'commands'}">