Add modal for shortcuts

src/App.vue

@@ -221,6 +221,9 @@
 						<transition name="fade">
 							<router-view/>
 						</transition>
+						<a class="keyboard-shortcuts-button" @click="keyboardShortcutsActive = true">
+							<icon icon="keyboard"/>
+						</a>
 					</div>
 				</div>
 			</div>
@@ -274,6 +277,10 @@
 				<p>Please check your network connection and try again.</p>
 			</div>
 		</div>
+
+		<transition name="fade">
+			<keyboard-shortcuts v-if="keyboardShortcutsActive" @close="keyboardShortcutsActive = false"/>
+		</transition>
 	</div>
 </template>
 
@@ -287,10 +294,12 @@
 	import swEvents from './ServiceWorker/events'
 	import Notification from './components/misc/notification'
 	import {CURRENT_LIST, IS_FULLPAGE, ONLINE} from './store/mutation-types'
+	import KeyboardShortcuts from './components/misc/keyboard-shortcuts'
 
 	export default {
 		name: 'app',
 		components: {
+			KeyboardShortcuts,
 			Notification,
 		},
 		data() {
@@ -300,6 +309,7 @@
 				currentDate: new Date(),
 				userMenuActive: false,
 				authTypes: authTypes,
+				keyboardShortcutsActive: false,
 
 				// Service Worker stuff
 				updateAvailable: false,

src/components/misc/keyboard-shortcuts.vue

@@ -0,0 +1,34 @@
+<template>
+	<div class="modal-mask keyboard-shortcuts-modal">
+		<div class="modal-container" @click.self="close()">
+			<div class="modal-content">
+				<div class="card has-background-white has-no-shadow">
+					<header class="card-header">
+						<p class="card-header-title">Available Keyboard Shortcuts</p>
+					</header>
+					<div class="card-content content">
+						<p>
+							<strong>Mark a task as done:</strong>
+							<span class="shortcuts">
+								<span>ctrl</span>
+								<i>+</i>
+								<span>click</span>
+							</span>
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'keyboard-shortcuts',
+		methods: {
+			close() {
+				this.$emit('close')
+			},
+		},
+	}
+</script>

src/main.js

@@ -68,6 +68,7 @@ import { faList } from '@fortawesome/free-solid-svg-icons'
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons'
 import { faFilter } from '@fortawesome/free-solid-svg-icons'
 import { faFillDrip } from '@fortawesome/free-solid-svg-icons'
+import { faKeyboard } from '@fortawesome/free-solid-svg-icons'
 import { faComments } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
@@ -115,6 +116,7 @@ library.add(faList)
 library.add(faEllipsisV)
 library.add(faFilter)
 library.add(faFillDrip)
+library.add(faKeyboard)
 
 Vue.component('icon', FontAwesomeIcon)
 

src/styles/components/_all.scss

@@ -20,3 +20,4 @@
 @import 'color-picker';
 @import 'namespaces';
 @import 'legal';
+@import 'keyboard-shortcuts';

src/styles/components/keyboard-shortcuts.scss

@@ -0,0 +1,37 @@
+.keyboard-shortcuts-button {
+  position: fixed;
+  bottom: calc(1rem - 4px);
+  right: 1rem;
+  z-index: 4500; // The modal has a z-index of 4000
+}
+
+.keyboard-shortcuts-modal {
+  z-index: 4600;
+
+  .card-content {
+    text-align: left;
+
+    p {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .shortcuts {
+        display: flex;
+        align-items: center;
+
+        i {
+          padding: 0 .25rem;
+        }
+
+        span {
+          padding: .1rem .35rem;
+          border: 1px solid $grey-light;
+          background: lighten($grey-lightest, 2.5);
+          border-radius: 3px;
+          font-size: .75rem;
+        }
+      }
+    }
+  }
+}

src/styles/theme/theme.scss

@@ -71,3 +71,7 @@ button.table {
   max-width: $desktop;
   margin: 0 auto;
 }
+
+.has-no-shadow {
+  box-shadow: none !important;
+}