Merge pull request #685 from PaulHax/mouse-instructions

feat(ControlsModal): list mouse view controls

src/components/AboutBox.vue

@@ -7,6 +7,14 @@
       For investigational use only
     </v-alert>
     <v-card-text>
+      <v-btn
+        class="my-2"
+        @click="openKeyboardShortcuts"
+        prepend-icon="mdi-keyboard"
+        color="secondary"
+      >
+        Keyboard Shortcuts and View Controls
+      </v-btn>
       <h2 class="mt-2">About VolView</h2>
       <v-divider class="mb-2" />
       <p class="float-right">
@@ -198,6 +206,7 @@
 import { defineComponent } from 'vue';
 import { useDisplay } from 'vuetify';
 import VolViewFullLogo from './icons/VolViewFullLogo.vue';
+import { useKeyboardShortcutsStore } from '../store/keyboard-shortcuts';
 
 export default defineComponent({
   name: 'AboutBox',
@@ -207,7 +216,13 @@ export default defineComponent({
   setup() {
     const display = useDisplay();
 
+    const keyboardStore = useKeyboardShortcutsStore();
+    const openKeyboardShortcuts = () => {
+      keyboardStore.settingsOpen = true;
+    };
+
     return {
+      openKeyboardShortcuts,
       mobile: display.xs,
       versions: {
         volview: __VERSIONS__.volview,

src/components/App.vue

@@ -28,7 +28,7 @@
             </div>
           </div>
         </v-main>
-        <keyboard-shortcuts />
+        <controls-modal />
       </v-app>
       <persistent-overlay
         :disabled="!dragHover"
@@ -70,7 +70,7 @@ import LayoutGrid from '@/src/components/LayoutGrid.vue';
 import ModulePanel from '@/src/components/ModulePanel.vue';
 import DragAndDrop from '@/src/components/DragAndDrop.vue';
 import PersistentOverlay from '@/src/components/PersistentOverlay.vue';
-import KeyboardShortcuts from '@/src/components/KeyboardShortcuts.vue';
+import ControlsModal from '@/src/components/ControlsModal.vue';
 import { useImageStore } from '@/src/store/datasets-images';
 import { useServerStore } from '@/src/store/server';
 import { useGlobalErrorHook } from '@/src/composables/useGlobalErrorHook';
@@ -85,7 +85,7 @@ export default defineComponent({
     DragAndDrop,
     ModulePanel,
     PersistentOverlay,
-    KeyboardShortcuts,
+    ControlsModal,
     WelcomePage,
     AppBar,
   },

src/components/KeyboardShortcuts.vue → src/components/ControlsModal.vue

@@ -1,14 +1,26 @@
 <template>
   <closeable-dialog v-model="keyboardStore.settingsOpen">
-    <v-card>
-      <v-card-title class="d-flex flex-row align-center">
-        Keyboard Shortcuts
-      </v-card-title>
-      <v-table class="pa-4">
-        <thead>
-          <th class="text-left">Command</th>
-          <th class="text-left">Keybinding</th>
-        </thead>
+    <v-card class="pa-4">
+      <div class="text-h4 pb-2">View Controls</div>
+      <v-table>
+        <tbody>
+          <tr>
+            <td>Scroll Slices</td>
+            <td>Mouse wheel or 2 finger vertical scroll</td>
+          </tr>
+          <tr>
+            <td>Zoom</td>
+            <td>Right mouse button + move vertically</td>
+          </tr>
+          <tr>
+            <td>Pan</td>
+            <td>Shift + left mouse button + move</td>
+          </tr>
+        </tbody>
+      </v-table>
+
+      <div class="text-h4 pb-2">Keyboard Shortcuts</div>
+      <v-table>
         <tbody>
           <tr v-for="[action, key] in bindings" :key="action">
             <td>{{ action }}</td>

src/components/Settings.vue

@@ -2,6 +2,14 @@
   <v-card>
     <v-card-title class="d-flex flex-row align-center">Settings</v-card-title>
     <v-card-text>
+      <v-btn
+        class="my-2"
+        @click="openKeyboardShortcuts"
+        prepend-icon="mdi-keyboard"
+        color="secondary"
+      >
+        Keyboard Shortcuts and View Controls
+      </v-btn>
       <v-switch
         :label="`Dark Theme (${dark ? 'On' : 'Off'})`"
         v-model="dark"
@@ -27,15 +35,6 @@
         hide-details
       ></v-switch>
 
-      <v-btn
-        class="my-2"
-        @click="openKeyboardShortcuts"
-        prepend-icon="mdi-keyboard"
-        color="secondary"
-      >
-        Keyboard Shortcuts
-      </v-btn>
-
       <v-divider class="mt-2 mb-6"></v-divider>
       <dicom-web-settings />
 
@@ -52,14 +51,14 @@ import { useTheme } from 'vuetify';
 import { useLocalStorage } from '@vueuse/core';
 
 import { useKeyboardShortcutsStore } from '@/src/store/keyboard-shortcuts';
+import { useViewCameraStore } from '@/src/store/view-configs/camera';
 import DicomWebSettings from './dicom-web/DicomWebSettings.vue';
 import ServerSettings from './ServerSettings.vue';
 import { DarkTheme, LightTheme, ThemeStorageKey } from '../constants';
 import {
   useErrorReporting,
   errorReportingConfigured,
 } from '../utils/errorReporting';
-import { useViewCameraStore } from '@/src/store/view-configs/camera';
 
 export default defineComponent({
   setup() {

src/constants.ts

@@ -61,7 +61,7 @@ export const ACTIONS = {
   },
 
   mergeNewPolygon: {
-    readable: 'Hold down to merge new polygons with overlapping polygons',
+    readable: 'Hold to merge new polygons with overlapping polygons',
   },
 
   showKeyboardShortcuts: {