Merge pull request #496 from Gencaster/489-node-editor-does-not-get-r…

…eset-when-switching-graphs improve exit graph dialog
Gencaster · Jul 26, 2023 · e9b0b3d · e9b0b3d
2 parents 5a21176 + 2bc4122
commit e9b0b3d
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 28 deletions.
diff --git a/caster-editor/src/assets/scss/_elementplus.scss b/caster-editor/src/assets/scss/_elementplus.scss
@@ -64,6 +64,10 @@
     width: calc(100% - 2 * $mobilePadding);
     max-width: 500px;
     border-radius: $borderRadius;
+
+    &.is-align-center {
+      transform: translateY(-5vh);
+    }
   }
 
   .el-dialog__header {

diff --git a/caster-editor/src/components/DialogAddGraph.vue b/caster-editor/src/components/DialogAddGraph.vue
@@ -4,6 +4,7 @@
       v-model="showDialog"
       title="Create graph"
       :show-close="false"
+      align-center
     >
       <ElInput
         id="graphNameInput"
@@ -12,14 +13,14 @@
       />
       <template #footer>
         <span class="dialog-footer">
-          <ElButton @click="() => emit('aborted')">Cancel</ElButton>
           <ElButton
-            color="#ADFF00"
+            type="danger"
+            @click="() => emit('aborted')"
+          >Cancel</ElButton>
+          <ElButton
             type="primary"
             @click="createGraph()"
-          >
-            Confirm
-          </ElButton>
+          > Confirm </ElButton>
         </span>
       </template>
     </ElDialog>

diff --git a/caster-editor/src/components/DialogAddNode.vue b/caster-editor/src/components/DialogAddNode.vue
@@ -3,6 +3,7 @@
     <ElDialog
       v-model="showDialog"
       title="Create new node"
+      align-center
       :show-close="true"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
@@ -15,7 +16,10 @@
       />
       <template #footer>
         <span class="dialog-footer">
-          <ElButton @click="() => emit('closed')">Cancel</ElButton>
+          <ElButton
+            type="danger"
+            @click="() => emit('closed')"
+          >Cancel</ElButton>
           <ElButton
             type="primary"
             :disabled="!hasName"

diff --git a/caster-editor/src/components/DialogDeleteNode.vue b/caster-editor/src/components/DialogDeleteNode.vue
@@ -6,21 +6,19 @@
       center
       lock-scroll
       :show-close="false"
+      align-center
     >
       <span> Are you sure to delete Node "{{ node.name }}"? </span>
       <template #footer>
         <span class="dialog-footer">
           <ElButton
-            text
-            bg
+            type="info"
             @click="emit('cancel')"
           >Cancel</ElButton>
           <ElButton
-            color="#FF0000"
+            type="danger"
             @click="deleteNode()"
-          >
-            Delete Node
-          </ElButton>
+          > Delete Node </ElButton>
         </span>
       </template>
     </ElDialog>

diff --git a/caster-editor/src/components/DialogExitGraph.vue b/caster-editor/src/components/DialogExitGraph.vue
@@ -6,16 +6,18 @@
       center
       lock-scroll
       :show-close="false"
+      align-center
     >
       <span>
-        Are you sure to exit without saving? <br>
-        Some of your changes might get lost.
+        Are you sure to exit the graph?
+        <span v-if="newScriptCellUpdates.size > 0">
+          <br><b>There are unsaved changes in the Node-Editor.</b>
+        </span>
       </span>
       <template #footer>
         <span class="dialog-footer">
           <ElButton
-            text
-            bg
+            type="info"
             @click="
               () => {
                 emit('cancel');
@@ -33,6 +35,8 @@
 </template>
 
 <script setup lang="ts">
+import { useInterfaceStore } from "@/stores/InterfaceStore";
+import { storeToRefs } from "pinia";
 import { ref, type Ref } from "vue";
 import { useRouter } from "vue-router";
 
@@ -41,10 +45,18 @@ const emit = defineEmits<{
   (e: "cancel"): void;
 }>();
 
+const interfaceStore = useInterfaceStore();
+const { selectedNodeForEditorUuid, newScriptCellUpdates } =
+  storeToRefs(interfaceStore);
+
 const showDialog: Ref<boolean> = ref(true);
 
 const exitGraph = () => {
   showDialog.value = false;
+
+  selectedNodeForEditorUuid.value = undefined;
+  interfaceStore.resetScriptCellUpdates();
+
   router.push({
     path: "/graph",
   });

diff --git a/caster-editor/src/components/DialogExitNode.vue b/caster-editor/src/components/DialogExitNode.vue
@@ -4,6 +4,7 @@
       v-model="showDialog"
       title="Exit node"
       center
+      align-center
       lock-scroll
       :show-close="false"
       :close-on-click-modal="false"

diff --git a/caster-editor/src/components/DialogRenameNode.vue b/caster-editor/src/components/DialogRenameNode.vue
@@ -6,21 +6,22 @@
       :show-close="false"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
+      align-center
     >
       <ElInput
         v-model="newName"
         placeholder="Please input"
       />
       <template #footer>
         <span class="dialog-footer">
-          <ElButton @click="emit('cancel')">Cancel</ElButton>
+          <ElButton
+            type="danger"
+            @click="emit('cancel')"
+          >Cancel</ElButton>
           <ElButton
             type="primary"
-            color="#ADFF00"
             @click="renameNode()"
-          >
-            Confirm
-          </ElButton>
+          > Confirm </ElButton>
         </span>
       </template>
     </ElDialog>

diff --git a/caster-editor/src/components/DialogUpdateAudioFile.vue b/caster-editor/src/components/DialogUpdateAudioFile.vue
@@ -6,6 +6,7 @@
       :show-close="false"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
+      align-center
     >
       <ElForm label-width="120px">
         <ElFormItem label="Name">
@@ -23,14 +24,14 @@
       </ElForm>
       <template #footer>
         <span class="dialog-footer">
-          <ElButton @click="emit('cancel')">Cancel</ElButton>
+          <ElButton
+            type="danger"
+            @click="emit('cancel')"
+          >Cancel</ElButton>
           <ElButton
             type="primary"
-            color="#ADFF00"
             @click="update()"
-          >
-            Confirm
-          </ElButton>
+          > Confirm </ElButton>
         </span>
       </template>
     </ElDialog>

diff --git a/caster-editor/src/components/Landing.vue b/caster-editor/src/components/Landing.vue
@@ -25,7 +25,7 @@
         </ElFormItem>
         <ElFormItem>
           <ElButton
-            :color="variables.greenLight"
+            type="primary"
             class="login-button"
             native-type="submit"
             @click="onSubmit"

diff --git a/caster-editor/src/components/LoginDialog.vue b/caster-editor/src/components/LoginDialog.vue
@@ -53,6 +53,7 @@ const showLoginScreen = ref<boolean>(true);
       :show-close="false"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
+      align-center
     >
       <ElForm
         ref="loginFormRef"

diff --git a/caster-front/src/assets/variables.scss b/caster-front/src/assets/variables.scss
@@ -9,7 +9,7 @@ $spacingXL: 6rem;
 // sizes
 $desktopMaxWidth: 1280px;
 $desktopMaxWidthText: 900px;
-$cardMaxWidth: 600px;
+$cardMaxWidth: 500px;
 $playerBarHeight: 50px;
 
 $mobilePadding: 12px;