UI tweaks from review

mrc-ide · Jun 27, 2024 · b34ed78 · b34ed78
1 parent a576227
commit b34ed78
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/app/static/src/app/components/code/CodeTab.vue b/app/static/src/app/components/code/CodeTab.vue
@@ -15,9 +15,10 @@
         </div>
         <error-info :error="error"></error-info>
         <div class="mt-3">
-            <vertical-collapse v-if="showSelectedVariables" title="Select variables" collapse-id="select-variables">
+            <vertical-collapse v-if="showSelectedVariables" title="Graphs" collapse-id="select-variables">
                 <div class="ms-2">
-                    Drag variables to move to another graph, or to hide variable.
+                  Drag variables to 'Hidden variables' to remove them from your graph, or click 'Add Graph' to create a
+                  new graph to move them to.
                 </div>
                 <selected-variables
                     v-for="(_, index) in graphsConfig"
@@ -26,12 +27,14 @@
                     :dragging="draggingVariable"
                     @setDragging="setDraggingVariable"
                 ></selected-variables>
+                <button class="btn btn-primary mt-2 ms-2" id="add-graph-btn" @click="addGraph">
+                  <vue-feather size="20" class="inline-icon" type="plus"></vue-feather>
+                  Add Graph
+                </button>
                 <hidden-variables
                     @setDragging="setDraggingVariable"
                     :dragging="draggingVariable"
-                    style="clear: both"
                 ></hidden-variables>
-                <button class="btn btn-primary mt-2 float-end" id="add-graph-btn" @click="addGraph">Add Graph</button>
             </vertical-collapse>
         </div>
     </div>

diff --git a/app/static/src/app/components/code/SelectedVariables.vue b/app/static/src/app/components/code/SelectedVariables.vue
@@ -11,6 +11,9 @@
                     @dragend="endDrag"
                 >
                     {{ variable }}
+                    <span class="variable-delete">
+                      <button @click="removeVariable(graphIndex, variable)" v-tooltip="'Remove variable'">×</button>
+                    </span>
                 </span>
             </template>
             <div v-if="!selectedVariables.length" style="height: 3rem; background-color: #eee" class="p-2 me-4">
@@ -101,6 +104,7 @@ export default defineComponent({
 
         return {
             selectedVariables,
+            removeVariable,
             getStyle,
             startDrag,
             endDrag,

diff --git a/app/static/src/scss/style.scss b/app/static/src/scss/style.scss
@@ -130,4 +130,19 @@ $grey: #ccc;
 
 .drop-zone-inactive {
     border-color: #fff;
+}
+
+.variable-delete {
+    font-weight: normal;
+    margin-left: 0.3rem;
+    span {
+        opacity: 0.5;
+    }
+
+    button {
+        background-color: transparent;
+        border-width: 0;
+        color: white;
+        padding: 0;
+    }
 }