Add help dropdown to navbar

Closes #350.
getodk · Dec 16, 2020 · 4da96f4 · 4da96f4
1 parent d870d70
commit 4da96f4
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 11 deletions.
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
@@ -26,6 +26,7 @@ except according to the terms contained in the LICENSE file.
       <div id="navbar-collapse" class="collapse navbar-collapse">
         <navbar-links v-if="loggedIn"/>
         <ul class="nav navbar-nav navbar-right">
+          <navbar-help-dropdown/>
           <navbar-locale-dropdown/>
           <navbar-actions :logged-in="loggedIn"/>
         </ul>
@@ -36,13 +37,20 @@ except according to the terms contained in the LICENSE file.
 
 <script>
 import NavbarActions from './navbar/actions.vue';
+import NavbarHelpDropdown from './navbar/help-dropdown.vue';
 import NavbarLinks from './navbar/links.vue';
 import NavbarLocaleDropdown from './navbar/locale-dropdown.vue';
+
 import { requestData } from '../store/modules/request';
 
 export default {
   name: 'Navbar',
-  components: { NavbarActions, NavbarLinks, NavbarLocaleDropdown },
+  components: {
+    NavbarActions,
+    NavbarHelpDropdown,
+    NavbarLinks,
+    NavbarLocaleDropdown
+  },
   computed: {
     // The component does not assume that this data will exist when the
     // component is created.
@@ -137,15 +145,8 @@ $shadow-color: #dedede;
     }
   }
 
-  .navbar-right {
-    margin-right: -25px;
-
-    > li {
-      margin-right: 10px;
-
-      &:last-child { margin-right: 0; }
-    }
-  }
+  .navbar-right { margin-right: -25px; }
+  #navbar-actions { margin-left: 10px; }
 }
 
 // Navbar is collapsed.

diff --git a/src/components/navbar/help-dropdown.vue b/src/components/navbar/help-dropdown.vue
@@ -0,0 +1,53 @@
+<!--
+Copyright 2020 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <li id="navbar-help-dropdown" class="dropdown">
+    <a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button"
+      aria-haspopup="true" aria-expanded="false">
+      <span class="icon-question-circle"></span><span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu">
+      <li>
+        <doc-link to="central-intro/">{{ $t('docs') }}</doc-link>
+      </li>
+      <li>
+        <a href="https://forum.getodk.org/" target="_blank">{{ $t('forum') }}</a>
+      </li>
+      <li>
+        <a href="/version.txt" target="_blank">{{ $t('version') }}</a>
+      </li>
+    </ul>
+  </li>
+</template>
+
+<script>
+import DocLink from '../doc-link.vue';
+
+export default {
+  name: 'NavbarHelpDropdown',
+  components: { DocLink }
+};
+</script>
+
+<i18n lang="json5">
+{
+  "en": {
+    // This is the text of a link that links to the documentation.
+    "docs": "Docs",
+    // This is the text of a link.
+    "forum": "Community forum",
+    // This is the text of a link that shows what version of ODK Central is in
+    // use.
+    "version": "Version"
+  }
+}
+</i18n>
diff --git a/src/components/navbar/locale-dropdown.vue b/src/components/navbar/locale-dropdown.vue
@@ -11,7 +11,7 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <li id="navbar-locale-dropdown" class="dropdown">
-    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
+    <a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button"
       aria-haspopup="true" aria-expanded="false">
       {{ $i18n.locale }}<span class="caret"></span>
     </a>

diff --git a/transifex/strings_en.json b/transifex/strings_en.json
@@ -1889,6 +1889,20 @@
         }
       }
     },
+    "NavbarHelpDropdown": {
+      "docs": {
+        "string": "Docs",
+        "developer_comment": "This is the text of a link that links to the documentation."
+      },
+      "forum": {
+        "string": "Community forum",
+        "developer_comment": "This is the text of a link."
+      },
+      "version": {
+        "string": "Version",
+        "developer_comment": "This is the text of a link that shows what version of ODK Central is in use."
+      }
+    },
     "NavbarLinks": {
       "projects": {
         "string": "Projects",