Remove pointer logic to use html tags

src/assets/sass/components/_note.scss

@@ -1,4 +1,4 @@
-note, .note-placeholder {
+adele-note, .note-placeholder {
     display: inline-block;
     text-decoration: underline;
     white-space: pre-wrap;
@@ -7,4 +7,3 @@ note, .note-placeholder {
         cursor: pointer;
     }
 }
-

src/assets/sass/components/_speechparts.scss

@@ -1,5 +1,5 @@
 
-.speech-parts.content {
+speechparts.content {
     margin-top: 24px;
 
     & > p {
@@ -8,55 +8,57 @@
     }
 }
 
-.speech-part, speechpart, .speech-part-item {
+adele-speechpart, .speech-part-item {
 
     &:hover {
         cursor: pointer;
     }
 
     padding: 0.35em;
     border-radius: 5px;
+}
 
-    &.type-01.active, &.type-01.nav, &.type-01:hover, &[type='1'] {
+.quill-editor adele-speechpart, adele-speechpart:hover, adele-speechpart.active, .speech-part-item {
+    &[type_id='1'], &.type-01 {
         background-color: #f2e9d0;
     }
-    &.type-02.active, &.type-02.nav, &.type-02:hover, &[type='2'] {
+    &[type_id='2'], &.type-02 {
         background-color: #c3aed6;
     }
-    &.type-03.active, &.type-03.nav, &.type-03:hover, &[type='3'] {
+    &[type_id='3'], &.type-03 {
         background-color: #edcfa9;;
     }
-    &.type-04.active, &.type-04.nav, &.type-04:hover, &[type='4'] {
+    &[type_id='4'], &.type-04 {
         background-color: #bfdcae;
     }
-    &.type-05.active, &.type-05.nav, &.type-05:hover, &[type='5'] {
+    &[type_id='5'], &.type-05 {
         background-color: #bad7df;
     }
-    &.type-06.active, &.type-06.nav, &.type-06:hover, &[type='6'] {
+    &[type_id='6'], &.type-06 {
         background-color: #ffe2e2;
     }
-    &.type-07.active, &.type-07.nav, &.type-07:hover, &[type='7'] {
+    &[type_id='7'], &.type-07 {
         background-color: #99ddcc;
     }
-    &.type-08.active, &.type-08.nav, &.type-08:hover, &[type='8'] {
+    &[type_id='8'], &.type-08 {
         background-color: #f7e7bd;
     }
-    &.type-09.active, &.type-09.nav, &.type-09:hover, &[type='9'] {
+    &[type_id='9'], &.type-09 {
         background-color: #9cada4;
     }
-    &.type-10.active, &.type-10.nav, &.type-10:hover, &[type='10'] {
+    &[type_id='10'], &.type-10 {
         background-color: #8fc0a9;
     }
-    &.type-11.active, &.type-11.nav, &.type-11:hover, &[type='11'] {
+    &[type_id='11'], &.type-11 {
         background-color: rgb(174, 243, 211);
     }
-    &.type-12.active, &.type-12.nav, &.type-12:hover, &[type='12'] {
+    &[type_id='12'], &.type-12 {
         background-color: #ebcfc4;
     }
-    &.type-13.active, &.type-13.nav, &.type-13:hover, &[type='13'] {
+    &[type_id='13'], &.type-13 {
         background-color: #dd9866;
     }
-    &.type-14.active, &.type-14.nav, &.type-14:hover, &[type='14'] {
+    &[type_id='14'], &.type-14 {
         background-color: #aaaaaa;
     }
 }

src/assets/sass/elements/_segment.scss

@@ -1,35 +1,36 @@
+.transcription-edit, .translation-edit {
+    adele-segment::before {
+        color: white;
+        font-weight: bold;
+        padding: 4px;
+    }
 
-segment::before {
-    color: white;
-    font-weight: bold;
-    padding: 4px;
-}
-
-.rich-text-editor {
-    counter-reset: transcriptionSegment;
-    segment {
-        counter-increment: transcriptionSegment;
-        content: counter(transcriptionSegment)
-    }}
+    .rich-text-editor {
+        counter-reset: transcriptionSegment;
+        adele-segment {
+            counter-increment: transcriptionSegment;
+            content: counter(transcriptionSegment)
+        }}
 
-.translation-editor {
-    counter-reset: translationSegment;
-    segment {
-        counter-increment: translationSegment;
-        content: counter(translationSegment)
+    .translation-editor {
+        counter-reset: translationSegment;
+        adele-segment {
+            counter-increment: translationSegment;
+            content: counter(translationSegment)
+        }
     }
-}
 
-segment {
-    height: 4px;
-    width: 100%;
-    padding-top: 3px;
-    padding-bottom: 3px;
-    border-bottom: 3px dashed $yellow;
+    adele-segment {
+        height: 4px;
+        width: 100%;
+        padding-top: 3px;
+        padding-bottom: 3px;
+        border-bottom: 3px dashed $yellow;
 
-    display: block;
-    cursor: pointer;
-    &:hover {
-        border-bottom: 3px dashed grey;
+        display: block;
+        cursor: pointer;
+        &:hover {
+            border-bottom: 3px dashed grey;
+        }
     }
 }

src/components/dashboard/WorkflowRadioStepsLight.vue

@@ -25,7 +25,7 @@
       <div class="step">
         <validation-radio-icon
           class="validation-icon"
-          :is-validated="exist['alignment-translation']"
+          :is-validated="validation['alignment-translation']"
           :is-content-empty="!exist['alignment-translation']"
         />
         <span class="step-label">Alignement</span>
@@ -92,4 +92,4 @@ li {
   }
   .validation-icon {
   }
-</style>
+</style>

src/components/document/edition/DocumentEditionCommentaries.vue

@@ -99,7 +99,7 @@ export default {
       },
       getCommentaryContent(label) {
         const com = this.getCommentary(label);
-        return com ? com.withNotes : ''
+        return com ? com.content : ''
       },
       toggleImageVisibility() {
         this.imageVisibility = !this.imageVisibility
@@ -110,4 +110,4 @@ export default {
 
 <style>
 
-</style>
+</style>

src/components/document/edition/DocumentEditionSpeechParts.vue

@@ -0,0 +1,43 @@
+<template>
+  <section>
+    <speech-parts-content-action-bar />
+    <rich-text-editor
+      v-if="!speechPartsContentLoading"
+      :initial-content="speechPartsContent"
+      change-action="speechPartsContent/changed"
+    />
+  </section>
+</template>
+
+
+<script>
+
+import { mapState, mapGetters } from 'vuex';
+import RichTextEditor from "@/components/editors/RichTextEditor.vue"
+import SpeechPartsContentActionBar from "@/components/document/edition/actionbars/SpeechPartsActionBar.vue";
+
+export default {
+    name: "DocumentEditionSpeechParts",
+    components: {
+        RichTextEditor,
+        SpeechPartsContentActionBar 
+    },
+    props: {
+    },
+    computed: {
+      ...mapState('speechPartsContent', ['speechPartsContent', 'speechPartsContentLoading']),
+      ...mapGetters('document', ['documentOwner']),
+      ...mapState('user', ['currentUser'])
+    },
+    async created() {
+    console.log(this.speechPartsContent)
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style>
+
+</style>

src/components/document/edition/DocumentEditionTranslation.vue

@@ -37,4 +37,4 @@ export default {
 
 <style>
 
-</style>
+</style>

src/components/document/edition/actionbars/SpeechPartsActionBar.vue

@@ -4,35 +4,45 @@
     class="edition-action-bar"
   >
     <div class="field is-grouped">
-      <!-- SAVE SPEECH PARTS 
+      <!-- SAVE SPEECH PARTS -->
       <p 
         class="control"
       >
         <save-speech-parts-button />
       </p>
-      --> 
       <!-- VALIDATE / UNVALIDATE SPEECH PARTS --> 
       <p
         v-if="currentUserIsTeacher && selectedUserId == document.user_id"
         class="control  m-b-md"
       >
         <validate-speech-parts-button :doc-id="document.id" />
       </p>
+      <!-- DELETE SPEECH PARTS --> 
+      <p
+        class="control"
+      >
+        <delete-speech-parts-button
+          :doc-id="document.id"
+          :user-id="selectedUserId"
+        />
+      </p>
     </div>
   </div>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
 
-//import SaveSpeechPartsButton from '../actions/SaveSpeechPartsButton.vue'
+import SaveSpeechPartsButton from '../actions/SaveSpeechPartsButton.vue'
 import ValidateSpeechPartsButton from '../actions/ValidateSpeechPartsButton.vue'
+import DeleteSpeechPartsButton from '../actions/DeleteSpeechPartsButton.vue'
 
 export default {
     name: 'SpeechPartsActionBar',
     components: {
-     // SaveSpeechPartsButton,
-      ValidateSpeechPartsButton
+      SaveSpeechPartsButton,
+      ValidateSpeechPartsButton,
+      DeleteSpeechPartsButton,
     },
     computed: {
         ...mapState('document', ['document']),
@@ -46,4 +56,4 @@ export default {
 
     }
 }
-</script>
+</script>