Implement font selection

curtgrimes · Jun 27, 2018 · 0f04ba6 · 0f04ba6
1 parent 4f13676
commit 0f04ba6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/app/src/components/Transcript.vue b/app/src/components/Transcript.vue
@@ -2,7 +2,8 @@
   <div
     class="transcript d-flex"
     v-bind:class="[wrapTextPositionClass, (chromeless ? 'chromeless' : '')]"
-    v-bind:style="{height, color, backgroundColor, fontSize, lineHeight, letterSpacing, textTransform, padding, textShadow}">
+    v-bind:style="{height, color, backgroundColor, fontFamily, fontSize, lineHeight, letterSpacing, textTransform, padding, textShadow}">
+    <link type="text/css" rel="stylesheet" :href="'https://fonts.googleapis.com/css?family=' + fontFamily" />
     <span
       v-bind:class="textPositionClass"
       class="transcript-scroller"
@@ -62,6 +63,9 @@ export default {
     backgroundColor () {
       return this.$store.state.settings.appearance.background.color;
     },
+    fontFamily () {
+      return this.$store.state.settings.appearance.text.fontFamily;
+    },
     fontSize () {
       return this.$store.state.settings.appearance.text.textSize + 'em';
     },

diff --git a/app/src/util/fontChoices.js b/app/src/util/fontChoices.js
@@ -12,7 +12,7 @@ export default [
         displayName: 'Oswald',
     },
     {
-        googleFontNameKey: 'Lato:700',
+        googleFontNameKey: 'Lato',
         displayName: 'Lato',
     },
     {

diff --git a/app/src/views/settings/SettingsAppearanceView.vue b/app/src/views/settings/SettingsAppearanceView.vue
@@ -4,12 +4,19 @@
     <div class="form-group row">
       <label for="text-color" class="col-sm-6 col-form-label">Font Family</label>
       <div class="col-sm-6">
-        <div class="dropdown typeface-select">
-          <button class="btn btn-white btn-block dropdown-toggle" type="button" id="typefaceDropdownButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-bind:style="{fontFamily: fontFamily}">{{fontFamilyDisplayName}}</button>
-          <div class="dropdown-menu">
-              <a class="dropdown-item" href="javascript:void(0)" v-for="fontChoice in getFontChoices()" v-bind:key="fontChoice.googleFontNameKey" v-bind:style="{fontFamily: fontChoice.googleFontNameKey }" v-on:click="fontFamily = fontChoice.googleFontNameKey">{{fontChoice.displayName}}</a>
-          </div>
-        </div>
+        <b-dropdown class="d-block w-100" toggle-class="w-100">
+          <template slot="button-content">
+            <span :style="{fontFamily: fontFamilyDisplayName}">
+              {{fontFamilyDisplayName}}
+            </span>
+          </template>
+          <b-dropdown-item
+            v-for="fontChoice in getFontChoices()"
+            :key="fontChoice.googleFontNameKey"
+            :style="{fontFamily: fontChoice.googleFontNameKey }"
+            @click="fontFamily = fontChoice.googleFontNameKey"
+          >{{fontChoice.displayName}}</b-dropdown-item>
+        </b-dropdown>
       </div>
     </div>