[Editor] design patches

Author: RobinB27

notes.md

@@ -25,44 +25,44 @@
 - [X] Drop shadow for fixations
 - [X] Completion handler improvements (soft complete (not all manually done), complete (all manually done))
 - [X] Scan path rendering
-- [ ] **Good colours** (I believe mostly done)
-- [X] ***Clean up options (remove some, add some others)***
+- [X] Good colours -> the current config is okay
+- [X] *Clean up options (remove some, add some others)
 - [X] Colour picker for Color objects
 - [X] Moving back all the way with arrows -> arrow right stops working -> JS was dumb (mod of negative number is negative number wtf)
 - [X] T1 R552, popeye slice point 2 assigns to multiple?
 - [X] Multiple lines showing from annotations
 - [X] Cmd-starting commands (cmd + +, etc) should also be a thing
 - [X] Trackpad zoom & move
-- [X] **Highlighting current fixation (probably add colour change back, or some outline?)**
+- [X] Highlighting current fixation (probably add colour change back, or some outline?)
 - [X] Highlight box for all algos visualization
 - [X] If high agreement, highlight the corresponding box only and user can then (obviously) press space to confirm, else show all options (togglable via setting ofc)
-- [ ] **Keybind panel (possible to keep open?)**
-- [ ] **Put button to open keybind panel in collapsed sidebar**
-- [ ] **Quick guide instead of always visible keybind panel choosable (or none ofc)** -> See below for more details
-- [X] **Download annotations button** -> *export to CSV*
+- [ ] ~~Keybind panel (possible to keep open?)~~ -> this wouldn't work well, the keybind panel is huge
+- [X] Put button to open keybind panel in collapsed sidebar
+- [X] Download annotations button -> *export to CSV*
 - [X] Invalid fixation keybind -> shift delete or shift backspace
 - [X] Fix delete annotation bind (doesn't fully unassign, also requires two backspaces)
 - [X] Invalid fixation rendering
-- [ ] **Add button to mark fixation as invalid** -> annotations.markFixationAsInvalid is func to be called -> On hover show keybind
+- [X] Add button to mark fixation as invalid -> annotations.markFixationAsInvalid is func to be called -> On hover show keybind
 - [X] Backspace moves backwards if no annotation present
 - [X] Space bar assignment doesn't work (on Mac at least) --> TODO: Verify
 - [ ] ~~Optional: Show zoom box if lots of fixations close by~~
 - [X] Zoom to fixation
 - [X] Move to fixation when moving around (and zoom factor > 1)
 - [ ] **Render hovered boxes above everything else (to make it more legible, maybe add condition to this)**
 
-### Quick guide
+### ~~Quick guide~~
 A short summary for how to use the editor, preferrably graphical, with the most important keybinds on there.
 Just an idea from the meeting, doesn't have to happen, but could be a solid idea.
 Alternatively add a button to restart the tour somewhere (maybe in the keybinds panel)
 
-
+-> We already have a welcome panel, the tour & the keybinds panel.
+I think adding more user guidance would end up being confusing (i.e. suppose I'm looking for info x, in which of these 4 places do I check for x now?)
 
 ## General
 - [X] Deployment
 - [X] Update theme colours 
 - [X] Better error handling for backend errors (i.e. better notifications)
-- [ ] **RWD fixes (Signup and Login views)**
+- [X] 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
 - [X] Buttons with long actions need spinners or other progress indicator
@@ -73,14 +73,13 @@ Alternatively add a button to restart the tour somewhere (maybe in the keybinds
 - [X] "Select All" on Survey-creation doesn't work
 - [X] Upload pre-assigned points with multi-file select button on Text creation
 - [X] Design
-- [ ] Bug testing
 - [X] Reload surveys on create
 - [X] New Survey options
 - [ ] Add parser for char bounding boxes for the uid based format (take inspiration from the annotations one)
 - [ ] Upload: Allow multiple files for multiple readers or one file with multiple readers -- TODO: Testing
 - [ ] 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
+- [ ] **Define file contents specs somewhere** -> Needs integration & design, see `src/components/admin/FileSpecs.vue` (What is this for?)
+- [ ] Optional: Magic link regen
 - [X] Magic link panel close warning
 - [X] survey delete -- TODO: Testing
 - [X] survey export -- TODO: Testing

src/editor/components/SidePane.vue

@@ -118,14 +118,6 @@
                 >
                     <i class="fa-xl fa-solid fa-circle-xmark"></i>
                 </span>
-                <span
-                    v-if="showExportButton"
-                    class="clickable-icon"
-                    title="Export annotations as CSV"
-                    @click="exportCsv"
-                >
-                    <i class="fa-xl fa-solid fa-file-csv"></i>
-                </span>
             </div>
             <div class="options-bar-right">
                 <span class="clickable-icon" @click="toggleCollapse()">
@@ -134,11 +126,6 @@
             </div>
         </div>
         <!-- Collapsed -->
-        <div v-if="isSideBarCollapsed" class="options-bar">
-            <span class="clickable-icon gear-icon" title="Options" @click="togglePreferences">
-                <i class="fa-lg fa-solid fa-gear"></i>
-            </span>
-        </div>
         <div v-if="isSideBarCollapsed" class="options-bar">
             <span
                 class="clickable-icon"
@@ -191,6 +178,20 @@
                 <i class="fa-xl fa-solid fa-file-csv"></i>
             </span>
         </div>
+        <div v-if="isSideBarCollapsed" class="options-bar bottom">
+            <span
+                class="clickable-icon"
+                title="Show keybinds"
+                @click="toggleKeybinds"
+            >
+                <i class="fa-xl fa-solid fa-circle-question"></i>
+            </span>
+        </div>
+        <div v-if="isSideBarCollapsed" class="options-bar">
+            <span class="clickable-icon gear-icon" title="Options" @click="togglePreferences">
+                <i class="fa-lg fa-solid fa-gear"></i>
+            </span>
+        </div>
         <!-- Content -->
         <div v-if="!isSideBarCollapsed">
             <div id="tour-options" class="options-bar-sm">
@@ -204,6 +205,14 @@
                     >
                         <i class="fa-lg fa-regular fa-circle-question"></i>
                     </span>
+                    <span
+                        v-if="showExportButton"
+                        class="clickable-icon"
+                        title="Export annotations as CSV"
+                        @click="exportCsv"
+                    >
+                        <i class="fa-lg fa-solid fa-file-csv"></i>
+                    </span>
                     <span
                         id="tour-preferences"
                         class="clickable-icon gear-icon"
@@ -237,7 +246,6 @@
     width: 400px;       // Hardcoded, scalable sidebar (that looks good) is much work
     min-width: 400px;
     max-width: 22vw;
-    display: block;
     overflow-x: hidden;
     transition: width 0.25s, min-width 0.25s;
 
@@ -294,7 +302,7 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
-            width: 60px;
+            width: 90px;
         }
 
         .clickable-icon {

src/scss/components/floating-form.scss

@@ -48,13 +48,13 @@
         @include rwd-ratio("square", "standard") {
           /* border-color: green; */
           width: 55vw;
-          height: 55vh;
+          height: 70vh;
         }
 
         @include rwd-ratio("standard", "wide") {
           /* border-color: lightcoral; */
           width: 35vw;
-          height: 60vh;
+          height: 70vh;
         }
 
         @include rwd-ratio("wide", "ultrawide") {

src/views/StartView.vue

@@ -67,6 +67,7 @@
         justify-content: center;
         align-items: center;
         flex-direction: row;
+        overflow: hidden;
 
         >.top-bar {
             height: 8vh;
@@ -99,6 +100,10 @@
                     justify-content: space-between;
                     width: 25rem;
 
+                    @media screen and (max-width: 800px) {
+                        margin-left: 1rem;
+                    }
+
                     >button {
                         margin-bottom: 1rem;
                         width: 12rem;
@@ -112,6 +117,13 @@
                         justify-content: left;
                         margin-bottom: 1rem;
 
+                        @media screen and (max-width: 800px) {
+                            flex-direction: column;
+                            align-items: flex-start;
+                            justify-content: space-between;
+                            height: 6rem;
+                        }
+
                         >button {
                             width: 12rem;
                         }
@@ -121,11 +133,18 @@
                 .tagline {
                     margin-top: 0px;
                     margin-bottom: 6vh;
+
+                    @media screen and (max-width: 800px) {
+                        margin-left: 1rem;
+                    }
                 }
 
                 .logo {
                     height: 15vh;
                     justify-content: left;
+                    @media screen and (max-width: 800px) {
+                        margin-left: 1rem;
+                    }
                 }
             }
 

src/views/auth/SignupView.vue

@@ -295,7 +295,15 @@
         }
     }
 
+    .buttons {
+        margin-top: 1rem;
+    }
+
     .inputs {
+        overflow-y: auto;
+        overflow-x: hidden;
+        scrollbar-color: var( --theme-bg-4 ) var( --theme-bg-3 );
+
         >.desc {
             color: var(--theme-bg-3-20);
             font-size: 0.85rem;