[Frontend] minor updates

Author: RobinB27

notes.md

@@ -1,10 +1,9 @@
 # Improvement ideas
 ## Editor
-- [ ] Bug testing (I can't recall the issues we had previously)
 - [ ] Possibly: Resize listener on canvas container
-- [ ] **Move advanced options into a popover instead of the sidebar**
-- [ ] **Autosave -- TODO: Add button to disable (`src/editor/index.ts` exports the option to do so)**
-- [ ] **Legend displaying what the colours mean**
+- [X] Move advanced options into a popover instead of the sidebar -> default collapsed, expanded
+- [X] Autosave
+- [X] Legend displaying what the colours mean
 - [X] Fix animation for sidebar collapse
 - [X] Heatmap i.e. points are coloured based on the entropy
 - [X] Loading of disagreement metrics from backend
@@ -20,7 +19,6 @@
 - [X] Keybind to flag as invalid
 - [X] Shift to show all algorithms for current fixation
 - [X] Use other combination for the above, as shift key cannot be detected (neither all other modifiers)
-- [ ] **Do we need more settings for the above?**
 - [X] Fixation click on fixation in box directly assigning it
 - [X] Test the above, may need to be changed to a more complex handler
 - [X] Filter annotations by algorithms
@@ -31,12 +29,12 @@
 
 ## General
 - [X] Deployment
-- [ ] **Update theme colours (currently primarily the blue and black themes look good)**
+- [X] Update theme colours 
 - [X] Better error handling for backend errors (i.e. better notifications)
 - [ ] **RWD fixes (Signup and Login views)**
 - [X] Block if device is too small (also touch devices don't work!) -> Design?
 - [ ] Take care of all TODOs in the code
-- [ ] **Buttons with long actions need spinners or other progress indicator** (I can also do that)
+- [ ] **Buttons with long actions need spinners or other progress indicator** (I can also do that) (then do it?)
 
 
 
@@ -52,7 +50,7 @@
 - [ ] Pre-annotations: One file for each algorithm, filename is the algo name (minus extension).
 - [ ] **Define file contents specs somewhere** -> Needs integration & design, see `src/components/admin/FileSpecs.vue`
 - [ ] Magic link regen
-- [ ] Magic link panel close warning
+- [X] Magic link panel close warning
 - [X] survey delete -- TODO: Testing
 - [X] survey export -- TODO: Testing
 - [X] on index errors open parser settings panel

src/editor/components/EditorView.vue

@@ -3,7 +3,7 @@
     import {
         type Ref, ref
     } from 'vue';
-    import PropertyPane from './PropertyPane.vue';
+    import LegendPane from './LegendPane.vue';
     import editor from '..';
     import {
         editorDataLoadingLocal
@@ -40,8 +40,8 @@
             Image: <input type="file" accept="image/*" @change="e => loader.loadImage( e as InputEvent )">
             Points: <input type="file" accept=".csv" @change="e => loader.loadPointsCSV( e as InputEvent )">
         </div>
-        <PropertyPane
-            :show-property-pane="true"
+        <LegendPane
+            :show="true"
         />
         <div class="canvas-wrapper">
             <canvas id="text" ref="textCanvas"></canvas>

src/editor/components/LegendPane.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+    import {
+        type Ref,
+        ref
+    } from 'vue';
+    import type {
+        EditorPoint
+    } from '../types/annotation';
+    import ColorOption from '@/components/settings/ColorOption.vue';
+    import { assignedFixationColor, machineAssignedFixationColor, selectedFixationColor, unassignedFixationColor } from '../config';
+
+    const props = defineProps<{
+        'show': boolean,
+    }>();
+    const isDragging = ref( false );
+    const pos: Ref<EditorPoint> = ref( {
+        'x': 10,
+        'y': 10
+    } );
+
+    let oldPos: EditorPoint = {
+        'x': 0,
+        'y': 0
+    };
+
+    const clickPos: EditorPoint = {
+        'x': 0,
+        'y': 0
+    };
+
+    const dragHandler = ( ev: MouseEvent ) => {
+        if ( !isDragging.value && ev.buttons === 1 ) {
+            isDragging.value = true;
+            oldPos = {
+                ...pos.value
+            };
+            clickPos.x = ev.x;
+            clickPos.y = ev.y;
+        } else if ( isDragging.value ) {
+            pos.value = {
+                'x': oldPos.x + ( clickPos.x - ev.x ),
+                'y': oldPos.y + ( clickPos.y - ev.y )
+            };
+        }
+    };
+
+    const mouseUp = () => {
+        isDragging.value = false;
+    };
+</script>
+
+<template>
+    <div
+        v-if="props.show"
+        id="tour-properties"
+        class="legend"
+        :style="`bottom: ${ pos.y }px; right: ${ pos.x }px;`"
+        @mousemove="dragHandler"
+        @mouseup="mouseUp"
+    >
+        <h2>Legend</h2>
+        <div class="placeholder">
+            <p>Fixation Colors</p>
+            <ColorOption v-model="selectedFixationColor" text="Selected" />
+            <ColorOption v-model="assignedFixationColor" text="User-assigned" />
+            <ColorOption v-model="machineAssignedFixationColor" text="Algorithm-assigned" />
+            <ColorOption v-model="unassignedFixationColor" text="Unassigned" />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+.legend {
+    position: absolute;
+    width: 15rem;
+    height: 16rem;
+    z-index: 1;
+    box-shadow: 0px 0px 10px var(--theme-bg-1);
+
+    user-select: none;
+
+    >h2 {
+        margin: 0px;
+        padding-bottom: 1rem;
+    }
+
+    >div {
+        background-color: var(--theme-bg-1);
+        padding: 10px;
+
+        >p {
+            color: var(--theme-background-text-20);
+            margin: 0px;
+            padding-bottom: 1rem;
+        }
+    }
+
+    background-color: var(--theme-bg-2);
+    padding: 1rem;
+    border-radius: 10px;
+}
+</style>

src/editor/components/OptionsPane.vue

@@ -10,13 +10,14 @@
         linesDisplayOptions
     } from '../config';
     import SliderOptions from '@/components/settings/SliderOptions.vue';
+    import SwitchOption from '@/components/settings/SwitchOption.vue';
+import { isAutoSaveEnabled } from '..';
 </script>
 
 <template>
     <div class="options-pane">
         <div class="options-container">
             <div class="options-section">
-                <p> Display </p>
                 <SliderOptions
                     v-model="boxesDisplay"
                     :options="boxesDisplayOptions"
@@ -37,6 +38,7 @@
                     :options="fixationIndexDisplayOptions"
                     text="Fixation Index"
                 />
+                <SwitchOption text="Autosave" v-model="isAutoSaveEnabled" />
             </div>
         </div>
     </div>
@@ -70,6 +72,7 @@
         justify-content: space-between;
 
         .options-section {
+            padding-top: 1rem;
 
             .slider-option {
                 width: 16rem;

src/editor/components/PreferencesPane.vue

@@ -25,7 +25,6 @@
     };
 
     const show = defineModel<boolean>();
-    // TODO: Think about which options should go where
 </script>
 
 <template>
@@ -38,7 +37,7 @@
             <div>
                 <div class="options-container">
                     <div class="options-section">
-                        <p>Advanced</p>
+                        <p>Display</p>
                         <SliderOptions
                             v-model="boxesDisplay"
                             :options="boxesDisplayOptions"
@@ -91,7 +90,7 @@
                     </div>
 
                     <div class="options-section">
-                        <p>Further display</p>
+                        <p>Details</p>
 
                         <div class="slider-option">
                             <p>Line width</p>