dynamic view > compare mode : disable comment

src/components/project/virtual-sample/DynamicView.vue

@@ -50,8 +50,10 @@ import { ref, computed, watch } from "vue";
 import { storeToRefs } from "pinia";
 import { usePageStore } from "../../../stores/page";
 import Interactive360 from "./Interactive360.vue";
+import { useDialogStore } from "../../../stores/dialog";
 
 const { page } = storeToRefs(usePageStore());
+const { isCommentsOpen, isCommentPanelEnabled } = storeToRefs(useDialogStore());
 
 const tracks = computed(
   () => page.value.steps[page.value.steps.length - 1].files.dynamic
@@ -59,6 +61,13 @@ const tracks = computed(
 
 const isCompareModeEnabled = ref(false);
 watch(isCompareModeEnabled, (newValue) => {
+  if (newValue) {
+    isCommentsOpen.value = false;
+    isCommentPanelEnabled.value = false;
+  } else {
+    isCommentPanelEnabled.value = true;
+  }
+
   if (!newValue && activeTracks.value.length === 2) {
     activeTracks.value.pop();
   }

src/components/project/virtual-sample/VirtualSample.vue

@@ -70,13 +70,16 @@
         }}</span>
       </button>
       <button
+        v-if="isCommentPanelEnabled"
         id="toggle-comments"
         :aria-pressed="isCommentsOpen"
         class="btn btn--transparent btn--outline"
         data-icon="comment"
         @click="isCommentsOpen = !isCommentsOpen"
       >
-        <span class="sr-only">{{ isCommentsOpen ? 'Masquer' : 'Afficher' }} les commentaires</span>
+        <span class="sr-only"
+          >{{ isCommentsOpen ? "Masquer" : "Afficher" }} les commentaires</span
+        >
       </button>
     </template>
     <Comments v-if="isCommentsOpen" @show-draft-marker="showDraftMarker" />
@@ -102,7 +105,7 @@ const { activeTab, currentFile, step, isLoopAnimationEnabled } = storeToRefs(
   useVirtualSampleStore()
 );
 isLoopAnimationEnabled.value = false;
-const { isCommentsOpen } = storeToRefs(useDialogStore());
+const { isCommentsOpen, isCommentPanelEnabled } = storeToRefs(useDialogStore());
 
 // Variables
 const router = useRouter();

src/stores/dialog.js

@@ -21,6 +21,7 @@ export const useDialogStore = defineStore("dialog", () => {
   }
 
   const route = useRoute();
+  const isCommentPanelEnabled = ref(true);
   const isCommentsOpen = ref(
     route.query.hasOwnProperty("comments") ? true : false
   );
@@ -133,6 +134,7 @@ export const useDialogStore = defineStore("dialog", () => {
     comments,
     draftComment,
     isCommentsOpen,
+    isCommentPanelEnabled,
     updateFile,
   };
 });