From 94b481fa9c2bd5a9e135b589dcb78aa5fe802c87 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 26 Nov 2018 00:19:28 +0300
Subject: cosmetic fixes

---
 src/components/font_control/font_control.vue | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

(limited to 'src/components/font_control/font_control.vue')

diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 004b5546..e97a2640 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="font-control style-control">
+<div class="font-control style-control" :class="{ custom: isCustom }">
   <label :for="preset === 'custom' ? name : name + '-font-switcher'" class="label">
     {{label}}
   </label>
@@ -16,18 +16,18 @@
       :disabled="!present"
       v-model="preset"
       class="font-switcher"
-      id="name + '-font-switcher'">
+      :id="name + '-font-switcher'">
       <option v-for="option in availableOptions" :value="option">
-        {{ option }}
+        {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
       </option>
     </select>
     <i class="icon-down-open"/>
   </label>
   <input
-    v-if="preset === 'custom'"
+    v-if="isCustom"
     class="custom-font"
     type="text"
-    id="name"
+    :id="name"
     v-model="family">
 </div>
 </template>
@@ -71,6 +71,9 @@ export default {
         this.$emit('input', this.lValue)
       }
     },
+    isCustom () {
+      return this.preset === 'custom'
+    },
     preset: {
       get () {
         console.log(this.family)
@@ -97,5 +100,15 @@ export default {
   input.custom-font {
     min-width: 10em;
   }
+  &.custom {
+    .select {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .custom-font {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2