Keyboard Shortcuts (#193)

Add the keyboard shortcuts button

Add task keyboard shortcuts

Add info

Move keyboard shortcuts modal toggle to menu

Add modal for shortcuts

Add shortkeys for some task actions

Add shortkey to toggle menu

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/193

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,44 @@
+.keyboard-shortcuts-button {
+  position: fixed;
+  bottom: calc(1rem - 4px);
+  right: 1rem;
+  z-index: 4500; // The modal has a z-index of 4000
+
+  color: $grey;
+  transition: color $transition;
+}
+
+.keyboard-shortcuts-modal {
+  z-index: 4600;
+
+  .card-content {
+    text-align: left;
+
+    .info {
+      font-style: italic;
+    }
+
+    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;
+}