NN-607 modify export graph UI

frontend/src/components/toolbar/modules/EdgeOpacity.vue

@@ -1,34 +1,23 @@
 <template>
-  <div>
-    <div class="tool-item">
-      <div class="opacity">
-        <span>Background edge opacity</span>
-        <input
-          class="opacity-input"
-          type="number"
-          v-bind:min="opacityBackground.min"
-          v-bind:max="opacityBackground.max"
-          v-bind:step="opacityBackground.step"
-          v-model="opacityBackground.value"
-          v-on:change="change_opacity('background')"
-        />
-      </div>
+  <li class="flex flex-col gap-2 py-2 dark:text-[#c3c3c3]">
+    <div class="flex items-center justify-between gap-2">
+      Background edge opacity
+      <InputNumber :min="opacityBackground.min" :max="opacityBackground.max" :step="opacityBackground.step"
+        v-model="opacityBackground.value" @value-change="change_opacity('background')"
+        inputClass="w-12 h-8 text-center" />
     </div>
-    <div class="tool-item">
-      <div class="opacity">
-        <span>Highlighted edge opacity</span>
-        <input
-          class="opacity-input"
-          type="number"
-          v-bind:min="opacityHighlight.min"
-          v-bind:max="opacityHighlight.max"
-          v-bind:step="opacityHighlight.step"
-          v-model="opacityHighlight.value"
-          v-on:change="change_opacity('highlight')"
-        />
-      </div>
+    <Slider class="mx-1 mt-3 mb-3" :min="opacityBackground.min" :max="opacityBackground.max"
+      :step="opacityBackground.step" v-model="opacityBackground.value" />
+  </li>
+  <li class="flex flex-col gap-2 py-2 dark:text-[#c3c3c3]">
+    <div class="flex items-center justify-between gap-2">
+      Highlighted edge opacity
+      <InputNumber :min="opacityHighlight.min" :max="opacityHighlight.max" :step="opacityHighlight.step"
+        v-model="opacityHighlight.value" @value-change="change_opacity('highlight')" inputClass="w-12 h-8 text-center" />
     </div>
-  </div>
+    <Slider class="mx-1 mt-3 mb-3" :min="opacityHighlight.min" :max="opacityHighlight.max" :step="opacityHighlight.step"
+      v-model="opacityHighlight.value" />
+  </li>
 </template>
 
 <script>
@@ -66,28 +55,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.opacity input[type="number"] {
-  position: absolute;
-  margin-top: 0.1vw;
-  right: 6.3%;
-  width: 9%;
-  border-radius: 5px;
-  border: none;
-  height: 6%;
-  font-family: "ABeeZee", sans-serif;
-  font-size: 0.7vw;
-  color: #0a0a1a;
-  background-color: #ddd;
-  -moz-appearance: textfield;
-  appearance: textfield;
-  text-align: center;
-}
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-</style>

frontend/src/components/toolbar/modules/ExportEdges.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="tool-item">
-    <span v-on:click="export_edges">Export edges as .csv</span>
-  </div>
+  <Button severity="secondary" type="button" label="Export edges as .csv" icon="pi pi-download" iconPos="right"
+    class="!w-full !justify-between !rounded-lg" @click="export_edges" />
 </template>
 
 <script>

frontend/src/components/toolbar/modules/ExportGraph.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="tool-item">
-    <span v-on:click="export_graph">Export graph as .js </span>
-  </div>
+  <Button severity="secondary" type="button" label="Export graph as .js" icon="pi pi-download" iconPos="right"
+  class="!w-full !justify-between !rounded-lg" @click="export_graph" />
 </template>
 
 <script>

frontend/src/components/toolbar/modules/ExportProteins.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="tool-item">
-    <span v-on:click="export_proteins">Export proteins as .csv</span>
-  </div>
+  <Button severity="secondary" type="button" label="Export proteins as .csv" icon="pi pi-download" iconPos="right"
+    class="!w-full !justify-between !rounded-lg" @click="export_proteins" />
 </template>
 
 <script>

frontend/src/components/toolbar/modules/ExportingButton.vue

@@ -1,11 +1,29 @@
 <template>
-  <div>
-    <div class="tool-item">
-      <span v-on:click="open_export()">Export proteins as .csv</span>
-    </div>
-  </div>
+  <Button severity="secondary" type="button" label="Export proteins as .csv" icon="pi pi-download" iconPos="right"
+    class="!w-full !justify-between !rounded-lg" @click="toggle" />
+  <Popover class="w-[12rem]" ref="op" :pt="{ content: { class: 'px-1 flex flex-col gap-1' } }">
+    <Button text plain severity="secondary" type="button" label="White / .png" class="!justify-start !py-1"
+      @click="take_screen('white', 'png')" />
+    <Button text plain severity="secondary" type="button" label="Black / .png" class="!justify-start !py-1"
+      @click="take_screen('black', 'png')" />
+    <Button text plain severity="secondary" type="button" label="White / .svg" class="!justify-start !py-1"
+      @click="take_screen('white', 'svg')" />
+    <Button text plain severity="secondary" type="button" label="Black / .svg" class="!justify-start !py-1"
+      @click="take_screen('black', 'svg')" />
+
+  </Popover>
 </template>
 
+<script setup>
+import { ref } from "vue";
+
+const op = ref();
+
+const toggle = (event) => {
+  op.value.toggle(event);
+};
+</script>
+
 <script>
 export default {
   name: "ExportingButton",
@@ -14,11 +32,12 @@ export default {
     return {};
   },
   methods: {
-    open_export() {
-      this.emitter.emit("openExportScreen", this.mode);
+    take_screen(color, format) {
+      this.emitter.emit("exportGraph", {
+        params: { color, format },
+        mode: this.mode,
+      });
     },
   },
 };
 </script>
-
-<style scoped></style>