Move keyboard shortcuts to controls screen in settings. Reorder setti…

…ngs.
curtgrimes · May 6, 2018 · 6ce8508 · 6ce8508
1 parent 056b31f
commit 6ce8508
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 103 deletions.
diff --git a/app/src/data/changelog.js b/app/src/data/changelog.js
@@ -4,7 +4,7 @@ export default [
         date: "2018-04-01",
         notes: [
             'A rewrite of Web Captioner to make fixes and future development much easier. Please leave me <a href="/feedback">lots of feedback</a>.',
-            'Added <a href="/captioner/settings/keyboard-shortcuts">keyboard shortcuts</a> because keyboard shortcuts are cool. For example, toggle fullscreen mode with <kbd>w</kbd> then <kbd>x</kbd>.',
+            'Added <a href="/captioner/settings/controls">keyboard shortcuts</a> because keyboard shortcuts are cool. For example, toggle fullscreen mode with <kbd>w</kbd> then <kbd>x</kbd>.',
             'Added an option to show asterisks for <a href="/captioner/settings/censor">censored words</a>.',
             'Added search box in <a href="/captioner/settings/language">language settings</a>.',
             'Removed the chroma key background color setting for simplicity. You can still change the background color on the <a href="/captioner/settings/appearance">appearance tab</a>.',

diff --git a/app/src/router/index.js b/app/src/router/index.js
@@ -18,7 +18,6 @@ const SettingsCensorView = () => import('../views/settings/SettingsCensorView.vu
 const SettingsControlsView = () => import('../views/settings/SettingsControlsView.vue')
 const SettingsVmixView = () => import('../views/settings/SettingsVmixView.vue')
 const SettingsRemoteDisplaysView = () => import('../views/settings/SettingsRemoteDisplaysView.vue')
-const SettingsKeyboardShortcutsView = () => import('../views/settings/SettingsKeyboardShortcutsView.vue')
 const CaptionerView = () => import('../views/CaptionerView.vue')
 const Transcript = () => import('../components/Transcript.vue')
 const SaveToFileModal = () => import('../components/SaveToFileModal.vue')
@@ -99,13 +98,6 @@ export function createRouter () {
                   navbarTitle: 'vMix',
                 },
               },
-              {
-                path: 'keyboard-shortcuts',
-                component: SettingsKeyboardShortcutsView,
-                meta: {
-                  navbarTitle: 'Keyboard Shortcuts',
-                },
-              },
             ]
           },
         ]

diff --git a/app/src/views/SettingsView.vue b/app/src/views/SettingsView.vue
@@ -18,25 +18,23 @@
 
       <!-- xs navigation -->
       <div :hidden="showBackButton" class="d-sm-none col p-0 bg-white pb-5 mb-3"> <!--  pb-5 mb-3 for bottom navbar space -->
-        <h3 class="text-muted pl-3 pt-2 small">General</h3>
         <b-list-group flush>
           <b-list-group-item to="/captioner/settings/about">About</b-list-group-item>
+        </b-list-group>
+        <h3 class="text-muted pl-3 pt-2 small">General</h3>
+        <b-list-group flush>
           <b-list-group-item to="/captioner/settings/appearance">Appearance</b-list-group-item>
           <b-list-group-item to="/captioner/settings/censor">Censor</b-list-group-item>
           <b-list-group-item to="/captioner/settings/controls">Controls</b-list-group-item>
           <b-list-group-item to="/captioner/settings/language">Language</b-list-group-item>
+          <b-list-group-item to="/captioner/settings/remote-displays">Remote Displays</b-list-group-item>
           <b-list-group-item to="/captioner/settings/word-replacements">Word Replacements</b-list-group-item>
           <!-- <b-list-group-item to="/captioner/settings/title-cards">Title Cards</b-list-group-item> -->
         </b-list-group>
         <h3 class="text-muted pl-3 pt-2 small">Integrations</h3>
         <b-list-group flush>
-          <b-list-group-item to="/captioner/settings/remote-displays">Remote Displays</b-list-group-item>
           <b-list-group-item to="/captioner/settings/vmix">vMix</b-list-group-item>
         </b-list-group>
-        <h3 class="text-muted pl-3 pt-2 small">Other</h3>
-        <b-list-group flush>
-          <b-list-group-item to="/captioner/settings/keyboard-shortcuts">Keyboard Shortcuts</b-list-group-item>
-        </b-list-group>
       </div>
 
       <!-- non-xs navigation -->
@@ -48,22 +46,21 @@
               <nav>
                 <b-nav vertical pills>
                   <b-nav-item to="/captioner/settings/about">About</b-nav-item>
+                </b-nav>
+                <hr/>
+                <b-nav vertical pills>
                   <b-nav-item to="/captioner/settings/appearance">Appearance</b-nav-item>
                   <b-nav-item to="/captioner/settings/censor">Censor</b-nav-item>
                   <b-nav-item to="/captioner/settings/controls">Controls</b-nav-item>
                   <b-nav-item to="/captioner/settings/language">Language</b-nav-item>
+                  <b-nav-item to="/captioner/settings/remote-displays">Remote Displays</b-nav-item>
                   <b-nav-item to="/captioner/settings/word-replacements">Word Replacements</b-nav-item>
                   <!-- <b-nav-item to="/captioner/settings/title-cards">Title Cards</b-nav-item> -->
                 </b-nav>
                 <hr/>
                 <b-nav vertical pills>
-                  <b-nav-item to="/captioner/settings/remote-displays">Remote Displays</b-nav-item>
                   <b-nav-item to="/captioner/settings/vmix">vMix</b-nav-item>
                 </b-nav>
-                <hr/>
-                <b-nav vertical pills>
-                  <b-nav-item to="/captioner/settings/keyboard-shortcuts">Keyboard Shortcuts</b-nav-item>
-                </b-nav>
               </nav>
             </div>
           </div>

diff --git a/app/src/views/settings/SettingsControlsView.vue b/app/src/views/settings/SettingsControlsView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="settings-controls-view">
     <div class="row">
-      <div class="col-sm-6">
+      <div class="col-md-6">
         <h3>Screen Layout</h3>
         <b-list-group>
           <b-list-group-item button :active="!largerLayout" @click="largerLayout = false" @mouseover="largerPreview = false" @mouseleave="largerPreview = largerLayout">
@@ -14,9 +14,9 @@
           </b-list-group-item>
         </b-list-group>
       </div>
-      <div class="col-sm-6">
-        <h3>&nbsp;</h3>
-        <div class="preview" :class="{'default-size': !largerPreview}">
+      <div class="col-md-6 mt-3 mt-md-0">
+        <h3 class="d-none d-md-block">&nbsp;</h3>
+        <div class="preview" :class="{'default-size': !largerPreview}" style="min-height:300px">
           <div class="text-preview-mockup-wrap main-preview w-100 d-flex" v-bind:style="{backgroundColor: backgroundColor, padding: (alignmentPadding/2)+'em'}" v-bind:class="previewWrapTextPositionClass">
             <div class="text-preview-mockup p-1 d-flex" style="cursor:default" v-bind:style="{color: textColor}" v-bind:class="previewTextPositionClass">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce est ligula, tristique at lectus aliquet, pellentesque rutrum diam. Fusce molestie mauris nec congueat lectus aliquet, pellentesque rutrum diam. Fusce molestie mauris necligulamauris necligula, tristique at lectus aliquet, pellentesque rutrum diam. Fusce molestie mauris nec congueat lectus aliquet, pellentesque rutrum diam. Fus Fusce molestie mauris nec congueat lectus aliquet, pellentesque rutrum diam. Fusce molestie mauris necligulamauris necligdiam. Fusce molestie mauris nec congueat lectus aliquet, pellentesque rutrum diam. Fusce molestie mauriula, tristique at lectus aliquet, pellentesque rutrum diam. Fusce molestie mauris nec congueat lectus aliquet, pellentesque rutrum diam. Fus Fusce molestie mauris nec congueat lectus aliquet, pellentesque rutrum diam. Fusce molestie mauris necligulamauris necligula, tristique at lectus aliquet, pellentesque rutrum diam. Fusce molestie mauris nec congueat lectus aliquet, pellentesque rutrum diam. Fusce molestie mauris nec congue placerat.</div>
           </div>
@@ -40,7 +40,63 @@
         </b-card> -->
       </div>
     </div>
-
+  <h3>Keyboard Shortcuts</h3>
+  <div class="list-group mt-sm-3">
+      <div class="list-group-item">
+        <div class="row">
+          <div class="col-6">Toggle captioning on/off</div>
+          <div class="col-6 text-right"><kbd>w</kbd> then <kbd>c</kbd></div>
+        </div>
+      </div>
+      <div class="list-group-item">
+        <div class="row">
+          <div class="col-6">Toggle fullscreen mode on/off</div>
+          <div class="col-6 text-right"><kbd>w</kbd> then <kbd>x</kbd></div>
+        </div>
+      </div>
+      <div class="list-group-item">
+        <div class="row">
+          <div class="col-6">Show captions in new window</div>
+          <div class="col-6 text-right"><kbd>w</kbd> then <kbd>n</kbd></div>
+        </div>
+      </div>
+      <div class="list-group-item">
+        <div class="row">
+          <div class="col-6">Open Settings</div>
+          <div class="col-6 text-right"><kbd>w</kbd> then <kbd>s</kbd></div>
+        </div>
+      </div>
+      <div class="list-group-item">
+        <div class="row">
+          <div class="col-6">Increase text size</div>
+          <div class="col-6 text-right"><kbd v-if="isMac">&#8984;</kbd><kbd v-else>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>&gt;</kbd></div>
+        </div>
+      </div>
+      <div class="list-group-item">
+        <div class="row">
+          <div class="col-6">Decrease text size</div>
+          <div class="col-6 text-right"><kbd v-if="isMac">&#8984;</kbd><kbd v-else>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>&lt;</kbd></div>
+        </div>
+      </div>
+      <div class="list-group-item">
+        <div class="row">
+          <div class="col-6">Open "Save as File" dialog</div>
+          <div class="col-6 text-right"><kbd>w</kbd> then <kbd>f</kbd></div>
+        </div>
+      </div>
+      <div class="list-group-item">
+        <div class="row">
+          <div class="col-6">Clear transcript</div>
+          <div class="col-6 text-right"><kbd>w</kbd> then <kbd>p</kbd> then <kbd>p</kbd></div>
+        </div>
+      </div>
+      <div class="list-group-item">
+        <div class="row">
+          <div class="col-6">List keyboard shortcuts</div>
+          <div class="col-6 text-right"><kbd>?</kbd></div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -51,10 +107,14 @@ export default {
   data: function() {
     return {
       largerPreview: false,
+      isMac: false,
     };
   },
   mounted: function() {
     this.largerPreview = this.largerLayout;
+
+    // Do only client-side
+    this.isMac = navigator ? navigator.platform.toUpperCase().indexOf('MAC') >= 0 : false;
   },
   computed: {
     largerLayout: {

diff --git a/app/src/views/settings/SettingsKeyboardShortcutsView.vue b/app/src/views/settings/SettingsKeyboardShortcutsView.vue
diff --git a/app/src/views/settings/SettingsRemoteDisplaysView.vue b/app/src/views/settings/SettingsRemoteDisplaysView.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="settings-remote-displays-view">
     <p>Send live captions to another tablet, phone, computer, or browser on this computer.</p>
-    <p>Visit <strong><a href="/connect" target="_blank">webcaptioner.com/connect</a></strong> on another device or browser window to get its 6-digit connection code.</p>
+    <p>Visit <strong><a :href="connectURL" target="_blank">{{connectURLDisplay}}</a></strong> on another device or browser window to get its 6-digit connection code.</p>
     <div class="input-group">
         <input type="text" v-autofocus maxlength="6" @keydown="connectSuccessful = null" @keydown.enter="approveRoomRequest(connectId)" ref="connectIdInput" autofocus class="form-control" placeholder="Connection Code" v-model="connectId" />
         <div class="input-group-append">
             <button class="btn btn-secondary" :disabled="!Boolean(connectId)" type="submit" @click="approveRoomRequest(connectId)">Add Display</button>
         </div>
     </div>
-    <b-alert :show="remoteDisplayConnectIdNotFoundError" variant="danger" class="my-3"><span class="fa fa-times" aria-hidden="true"></span> Display not found. Visit <strong><a href="/connect" target="_blank">webcaptioner.com/connect</a></strong> on another device or browser window to get its 6-digit connection code.</b-alert>
+    <b-alert :show="remoteDisplayConnectIdNotFoundError" variant="danger" class="my-3"><span class="fa fa-times" aria-hidden="true"></span> Display not found. Visit <strong><a :href="connectURL" target="_blank">{{connectURLDisplay}}</a></strong> on another device or browser window to get its 6-digit connection code.</b-alert>
     <!-- <b-alert :show="remoteDisplayConnectIdFoundMessage" variant="success" class="my-3"><span class="fa fa-check" aria-hidden="true"></span> Added display.</b-alert> -->
     <div v-if="remoteDisplays.length">
         <hr class="my-4" />
@@ -62,8 +62,14 @@ export default {
     return {
       connectId: null,
       connectSuccessful: null,
+      connectURL: null, // populated client-side on mount
+      connectURLDisplay: null, // populated client-side on mount
     };
   },
+  mounted: function() {
+      this.connectURL = window.location.origin + '/connect';
+      this.connectURLDisplay = this.connectURL.replace('https://','').replace('http://','');
+  },
   watch: {
       remoteDisplayConnectIdNotFoundError: function(on) {
           if (on) {