From 0f04ba61f2ef6e01310b7cdc0834ae20af52e413 Mon Sep 17 00:00:00 2001
From: Curt Grimes <github@curtgrimes.com>
Date: Wed, 27 Jun 2018 17:09:08 -0500
Subject: [PATCH] Implement font selection

---
 app/src/components/Transcript.vue             |  6 +++++-
 app/src/util/fontChoices.js                   |  2 +-
 .../views/settings/SettingsAppearanceView.vue | 19 +++++++++++++------
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/app/src/components/Transcript.vue b/app/src/components/Transcript.vue
index 9a56ddd..3db9c23 100644
--- 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
index 9d215c5..6c2b7e8 100644
--- 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
index c0501b6..3e3590b 100755
--- 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>