fix: add labels for select components and fix their position

dessant · Apr 30, 2018 · 3deba4e · 3deba4e
1 parent 37279c2
commit 3deba4e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 57 deletions.
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -245,98 +245,68 @@
     "description": "Title of the option section."
   },
 
+  "optionTitle_clearAllDataTypes": {
+    "message": "Clear all data types",
+    "description": "Title of the option."
+  },
+
   "optionValue_clearAllDataTypesAction_main": {
-    "message": "Clear all data types from browser toolbar",
+    "message": "From browser toolbar",
     "description": "Value of the option."
   },
 
   "optionValue_clearAllDataTypesAction_sub": {
-    "message": "Clear all data types from browser toolbar popup",
+    "message": "From browser toolbar popup",
     "description": "Value of the option."
   },
 
   "optionValue_clearAllDataTypesAction_false": {
-    "message": "Do not clear all data types from browser toolbar",
+    "message": "Disable",
     "description": "Value of the option."
   },
 
+  "optionTitle_clearSince": {
+    "message": "Time range",
+    "description": "Title of the option."
+  },
+
   "optionValue_clearSince_1hour": {
-    "message": "Clear data from the past hour",
+    "message": "Last hour",
     "description": "Value of the option."
   },
 
   "optionValue_clearSince_3hours": {
-    "message": "Clear data from the past 3 hours",
+    "message": "Last 3 hours",
     "description": "Value of the option."
   },
 
   "optionValue_clearSince_1day": {
-    "message": "Clear data from the past day",
+    "message": "Last day",
     "description": "Value of the option."
   },
 
   "optionValue_clearSince_1week": {
-    "message": "Clear data from the past week",
+    "message": "Last week",
     "description": "Value of the option."
   },
 
   "optionValue_clearSince_4weeks": {
-    "message": "Clear data from the past 4 weeks",
+    "message": "Last 4 weeks",
     "description": "Value of the option."
   },
 
   "optionValue_clearSince_90days": {
-    "message": "Clear data from the past 90 days",
+    "message": "Last 90 days",
     "description": "Value of the option."
   },
 
   "optionValue_clearSince_365days": {
-    "message": "Clear data from the past 365 days",
+    "message": "Last 365 days",
     "description": "Value of the option."
   },
 
   "optionValue_clearSince_epoch": {
-    "message": "Clear data from the beginning of time",
-    "description": "Value of the option."
-  },
-
-  "optionValue_clearSinceAction_1hour": {
-    "message": "The past hour",
-    "description": "Value of the option."
-  },
-
-  "optionValue_clearSinceAction_3hours": {
-    "message": "The past 3 hours",
-    "description": "Value of the option."
-  },
-
-  "optionValue_clearSinceAction_1day": {
-    "message": "The past day",
-    "description": "Value of the option."
-  },
-
-  "optionValue_clearSinceAction_1week": {
-    "message": "The past week",
-    "description": "Value of the option."
-  },
-
-  "optionValue_clearSinceAction_4weeks": {
-    "message": "The past 4 weeks",
-    "description": "Value of the option."
-  },
-
-  "optionValue_clearSinceAction_90days": {
-    "message": "The past 90 days",
-    "description": "Value of the option."
-  },
-
-  "optionValue_clearSinceAction_365days": {
-    "message": "The past 365 days",
-    "description": "Value of the option."
-  },
-
-  "optionValue_clearSinceAction_epoch": {
-    "message": "The beginning of time",
+    "message": "All time",
     "description": "Value of the option."
   },
 

diff --git a/src/action/App.vue b/src/action/App.vue
@@ -17,7 +17,9 @@
       @after-enter="handleSizeChange"
       @after-leave="handleSizeChange">
     <div class="settings" v-if="showSettings">
-      <v-select v-model="clearSince" :options="selectOptions.clearSinceAction">
+      <v-select :label="getText('optionTitle_clearSince')"
+          v-model="clearSince"
+          :options="selectOptions.clearSince">
       </v-select>
     </div>
   </transition>
@@ -77,7 +79,7 @@ export default {
 
       showSettings: false,
       selectOptions: getOptionLabels({
-        clearSinceAction: [
+        clearSince: [
           '1hour',
           '3hours',
           '1day',
@@ -170,6 +172,11 @@ $mdc-theme-primary: #1abc9c;
 
 @import 'vue-resize/dist/vue-resize';
 
+.mdc-select__menu {
+  top: -48px !important;
+  left: inherit !important;
+}
+
 body,
 #app {
   height: 100%;

diff --git a/src/options/App.vue b/src/options/App.vue
@@ -26,16 +26,18 @@
     </div>
     <div class="option-wrap">
       <div class="option select">
-        <v-select v-model="options.clearAllDataTypesAction"
+        <v-select :label="getText('optionTitle_clearAllDataTypes')"
+            v-model="options.clearAllDataTypesAction"
             :options="selectOptions.clearAllDataTypesAction">
         </v-select>
       </div>
       <div class="option select">
-        <v-select v-model="options.clearSince"
+        <v-select :label="getText('optionTitle_clearSince')"
+            v-model="options.clearSince"
             :options="selectOptions.clearSince">
         </v-select>
       </div>
-      <div class="option select">
+      <div class="option">
         <v-form-field input-id="nos"
             :label="getText('optionTitle_notifyOnSuccess')">
           <v-switch id="nos" v-model="options.notifyOnSuccess"></v-switch>
@@ -194,6 +196,6 @@ body {
 }
 
 .option.select {
-  align-items: end;
+  height: 56px;
 }
 </style>