feat: add Help link to navigation dropdown (#826)

* feat: add Help link to navigation dropdown

* feat: update to use `md-` buttons

docker-compose.yml

@@ -1,8 +1,6 @@
 # docker-compose file for frontend development
 # do not use in production!
-# https://www.grampsweb.org/dev-frontend/setup/
-
-version: "3.8"
+# https://www.grampsweb.org/development/frontend/setup/
 
 services:
   gramps-proxy:

lang/en.json

@@ -250,5 +250,9 @@
   "Most specific position on the human Y chromosome tree": "Most specific position on the human Y chromosome tree",
   "Paternal Lineage": "Paternal Lineage",
   "Add Y-DNA data": "Add Y-DNA data",
-  "Unfortunately, your browser does not support the display of PDF files. To view the file anyway, you can download it using the button below.": "Unfortunately, your browser does not support the display of PDF files. To view the file anyway, you can download it using the button below."
+  "Unfortunately, your browser does not support the display of PDF files. To view the file anyway, you can download it using the button below.": "Unfortunately, your browser does not support the display of PDF files. To view the file anyway, you can download it using the button below.",
+  "Help": "Help",
+  "User Documentation": "User Documentation",
+  "Administrator Documentation": "Administrator Documentation",
+  "Forum": "Forum"
 }

src/components/GrampsjsPages.js

@@ -56,6 +56,7 @@ import '../views/GrampsjsViewNewRepository.js'
 import '../views/GrampsjsViewNewNote.js'
 import '../views/GrampsjsViewNewMedia.js'
 import '../views/GrampsjsViewNewTask.js'
+import '../views/GrampsjsViewHelp.js'
 
 class GrampsjsPages extends GrampsjsAppStateMixin(LitElement) {
   static get styles() {
@@ -179,6 +180,11 @@ class GrampsjsPages extends GrampsjsAppStateMixin(LitElement) {
         grampsId="${this.appState.path.pageId}"
       ></grampsjs-view-ydna>
 
+      <grampsjs-view-help
+        class="page"
+        ?active=${this.appState.path.page === 'help'}
+        .appState="${this.appState}"
+      ></grampsjs-view-help>
       <grampsjs-view-map
         class="page"
         ?active=${this.appState.path.page === 'map'}

src/components/GrampsjsSettingsMenu.js

@@ -16,6 +16,7 @@ import {
   mdiWrench,
   mdiAccountMultiple,
   mdiAccountCog,
+  mdiHelp,
 } from '@mdi/js'
 import {sharedStyles} from '../SharedStyles.js'
 import {GrampsjsAppStateMixin} from '../mixins/GrampsjsAppStateMixin.js'
@@ -27,6 +28,7 @@ const menuItems = [
   ['Administration', '/settings/administration', mdiWrench, true],
   ['Manage users', '/settings/users', mdiAccountMultiple, true],
   ['System Information', '/settings/info', mdiInformation, false],
+  ['Help', '/help', mdiHelp, false],
 ]
 
 class GrampsjsSettingsMenu extends GrampsjsAppStateMixin(LitElement) {

src/views/GrampsjsViewHelp.js

@@ -0,0 +1,67 @@
+import {css, html} from 'lit'
+
+import {mdiOpenInNew} from '@mdi/js'
+import {GrampsjsView} from './GrampsjsView.js'
+
+export class GrampsjsViewHelp extends GrampsjsView {
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        .button-container {
+          display: flex;
+          gap: 0.5em;
+          margin-top: 1em;
+          margin-bottom: 0.5em;
+          --button-height: 48px;
+        }
+      `,
+    ]
+  }
+
+  renderContent() {
+    return html`
+      <h2>${this._('Help')}</h2>
+
+      <div>
+        <md-outlined-button
+          href="https://www.grampsweb.org/user-guide"
+          target="_blank"
+        >
+          ${this._('User Documentation')}
+          <grampsjs-icon
+            .path="${mdiOpenInNew}"
+            slot="icon"
+            color="var(--mdc-theme-primary)"
+          ></grampsjs-icon>
+        </md-outlined-button>
+
+        <md-outlined-button
+          href="https://www.grampsweb.org/administration/admin"
+          target="_blank"
+        >
+          ${this._('Administrator Documentation')}
+          <grampsjs-icon
+            .path="${mdiOpenInNew}"
+            slot="icon"
+            color="var(--mdc-theme-primary)"
+          ></grampsjs-icon>
+        </md-outlined-button>
+
+        <md-outlined-button
+          href="https://gramps.discourse.group/c/gramps-web"
+          target="_blank"
+        >
+          ${this._('Forum')}
+          <grampsjs-icon
+            .path="${mdiOpenInNew}"
+            slot="icon"
+            color="var(--mdc-theme-primary)"
+          ></grampsjs-icon>
+        </md-outlined-button>
+      </div>
+    `
+  }
+}
+
+window.customElements.define('grampsjs-view-help', GrampsjsViewHelp)