Task 65423

notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties

@@ -164,6 +164,7 @@ notes.filter.label.published.notes=Published
 notes.filter.label.drafts=Drafts
 notes.label.translations=Translation:
 notes.label.translation.add=Add a new translation:
+notes.label.addTheTranslation=Add the translation
 notes.label.chooseLangage=Choose language
 notes.label.translation.originalVersion=Original version
 notes.label.noTranslations=No translation

notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties

@@ -166,6 +166,7 @@ notes.filter.label.drafts=Brouillons
 
 notes.label.translations=Translation:
 notes.label.translation.add=Ajouter une translation:
+notes.label.addTheTranslation=Ajouter la translation
 notes.label.chooseLangage=Choisir une langue
 notes.label.translation.originalVersion=Version originale
 notes.label.noTranslations=Pas de translation

notes-webapp/src/main/webapp/skin/less/notes/notes.less

@@ -1158,13 +1158,9 @@ ul.note-manual-child  {
   color: @primaryColor !important;
 }
 
-.left-separator {
-  border-left: solid;
-}
-
-
-.right-separator {
-  border-right: solid;
+.bar-separator {
+  border-right: solid 2px @greyColor;
+  height: 26px;
 }
 
 

notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue

@@ -24,9 +24,10 @@
               <img :src="srcImageNote">
               <span class="notesFormTitle ps-2">{{ noteFormTitle }}</span>
               <v-icon
-                v-if="notesMultilingualActive && note.id"
+                v-if="notesMultilingualActive && noteId"
                 size="22"
-                class="primary--text clickable pa-2"
+                class="clickable pa-2"
+                :class="langBottonColor"
                 @click="showTranslations">
                 fa-language
               </v-icon>
@@ -71,7 +72,9 @@
         <note-translation-edit-bar
           v-if="notesMultilingualActive"
           ref="translationsEditBar"
-          :note="note" />
+          :note="note"
+          :languages="languages"
+          :translations="translations" />
         <div id="notesTop" class="width-full darkComposerEffect"></div>
       </div>
 
@@ -167,6 +170,8 @@ export default {
       spaceGroupId: null,
       showTranslationBar: false,
       slectedLanguage: null,
+      translations: null,
+      languages: [],
     };
   },
   computed: {
@@ -192,7 +197,11 @@ export default {
     },
     notesMultilingualActive() {
       return eXo?.env?.portal?.notesMultilingual;
+    },
+    langBottonColor(){
+      return this.translations?.length>0 ? 'primary--text':'';
     }
+
   },
   watch: {
     'note.title'() {
@@ -206,9 +215,10 @@ export default {
         this.autoSave();
         this.hideTranslations();
       }
-    },
+    }
   },
   created() {
+    this.getAvailableLanguages();
     window.addEventListener('beforeunload', () => {
       if (!this.postingNote && this.note.draftPage && this.note.id) {
         const currentDraft = localStorage.getItem(`draftNoteId-${this.note.id}`);
@@ -235,6 +245,7 @@ export default {
       } else {
         this.getNote(this.noteId);
       }
+      this.getNoteLanguages();
     }
     if (urlParams.has('parentNoteId')) {
       this.parentPageId = urlParams.get('parentNoteId');
@@ -276,10 +287,11 @@ export default {
       }
     });
     this.$root.$on('add-translation', lang => {
-      this.slectedLanguage=lang;
+      this.slectedLanguage=lang.value;
+      this.translations.unshift(lang);
       this.note.content='';
       this.note.title='';
-      this.note.lang=lang;
+      this.note.lang=lang.value;
       this.initCKEditor();
     });
     this.$root.$on('lang-translation-changed', lang => {
@@ -750,16 +762,18 @@ export default {
     setToolBarEffect() {
       const element = CKEDITOR.instances['notesContent'] ;
       const elementNewTop = document.getElementById('notesTop');
-      element.on('contentDom', function () {
-        this.document.on('click', function(){
-          elementNewTop.classList.add('darkComposerEffect');
+      if (element){
+        element.on('contentDom', function () {
+          this.document.on('click', function(){
+            elementNewTop.classList.add('darkComposerEffect');
+          });
         });
-      });
-      element.on('contentDom', function () {
-        this.document.on('keyup', function(){
-          elementNewTop.classList.add('darkComposerEffect');
+        element.on('contentDom', function () {
+          this.document.on('keyup', function(){
+            elementNewTop.classList.add('darkComposerEffect');
+          });
         });
-      });
+      }
       $('#notesEditor').parent().click(() => {
         elementNewTop.classList.remove('darkComposerEffect');
         elementNewTop.classList.add('greyComposerEffect');
@@ -776,7 +790,7 @@ export default {
         if (CKEDITOR.instances['notesContent']) {
           CKEDITOR.instances['notesContent'].status = 'ready';
           window.setTimeout(() => {
-            this.$nextTick().then(() => CKEDITOR.instances['notesContent'].focus());
+            this.$nextTick().then(() => CKEDITOR.instances['notesContent']?.focus());
           }, 200);
         }        
       }
@@ -923,9 +937,30 @@ export default {
       }
     },
     getBody: function() {
-      const newData = CKEDITOR.instances['notesContent'].getData();
+      const newData = CKEDITOR.instances['notesContent']?.getData();
       return newData ? newData : null;
-    }
+    },
+    getNoteLanguages(){
+      return this.$notesService.getNoteLanguages(this.noteId).then(data => {
+        this.translations =  data || [];
+        if (this.translations.length>0) {
+          this.translations = this.languages.filter(item1 => this.translations.some(item2 => item2 === item1.value));
+          this.languages = this.languages.filter(item1 => !this.translations.some(item2 => item2.value === item1.value));
+        }
+        if (this.isMobile) {
+          this.translations.unshift({value: '',text: this.$t('notes.label.translation.originalVersion')});
+        }
+      });
+    },
+    getAvailableLanguages(){
+      return this.$notesService.getAvailableLanguages().then(data => {
+        this.languages = data || [];
+        this.languages.unshift({value: '',text: this.$t('notes.label.chooseLangage')});
+        if (this.translations){
+          this.languages = this.languages.filter(item1 => !this.translations.some(item2 => item2.value === item1.value));
+        }
+      });
+    },
   }
 };
 </script>

notes-webapp/src/main/webapp/vue-app/notes-editor/components/TranslationsEditBar.vue

@@ -3,37 +3,47 @@
     v-if="showTranslationbar"
     id="translationBar"
     class="d-flex flex-nowrap text-truncate px-1 pt-4 pb-3">
-    <v-btn
-      id="translationBarBackButton"
-      class="px-4  my-auto "
-      small
-      icon
-      @click="hide">
-      <v-icon size="22" class="icon-default-color">fa-arrow-left</v-icon>
-    </v-btn>
-    <div class="px-4 height-auto left-separator right-separator d-flex flex-nowrap">
+    <v-tooltip bottom>
+      <template #activator="{ on, attrs }">
+        <v-btn
+          id="translationBarBackButton"
+          aria-label="translation back button"
+          class="mx-4  my-auto "
+          small
+          icon
+          v-on="on"
+          v-bind="attrs"
+          @click="hide">
+          <v-icon size="22">fa-arrow-left</v-icon>
+        </v-btn>
+      </template>
+      <span class="caption">{{ $t('notes.label.button.back') }}</span>
+    </v-tooltip>
+    <div class="bar-separator my-auto"></div>
+    <div class="px-4 height-auto d-flex flex-nowrap">
       <div class=" d-flex flex-wrap my-auto  height-auto translation-chips">
         <div v-if="!isMobile" class=" d-flex flex-wrap my-auto  height-auto">
           <v-chip
             color="primary"
-            class="ma-1"
+            class="my-auto mx-1"
             small
             :outlined="!!selectedTranslation.value"
             @click="changeTranslation({value: ''})">
             {{ $t('notes.label.translation.originalVersion') }}
           </v-chip>
-          <div v-if="!isMobile" class="ps-2 ma-2">{{ $t('notes.label.translations') }}</div>
-          <div v-if="!translations || translations.length===0" class="ps-2 ma-2 text-sub-title">{{ $t('notes.label.noTranslations') }}</div>
+          <div v-if="!isMobile" class="ps-2 my-auto mx-1">{{ $t('notes.label.translations') }}</div>
+          <div v-if="!translations || translations.length===0" class="ps-2 my-auto mx-1 text-sub-title">{{ $t('notes.label.noTranslations') }}</div>
           <v-chip
             v-for="(translation, i) in translationToShow"
             :key="i"
             close
             small
             :outlined="translation.value!==selectedTranslation.value"
             color="primary"
+            close-label="translation remove button"
             @click:close="removeTranslation(translation)"
             @click="changeTranslation(translation)"
-            class="ma-1">
+            class="my-auto mx-1">
             {{ translation.text }}
           </v-chip>
         </div>
@@ -49,11 +59,11 @@
               width="32"
               fab
               depressed
+              class="my-1"
               v-bind="attrs"
               v-on="on">
               <v-avatar
-                size="
-              32"
+                size="32"
                 class="notDisplayedIdentitiesOverlay">
                 <div class="notDisplayedIdentities d-flex align-center justify-center">
                   +{{ moreTranslations.length }}
@@ -63,7 +73,7 @@
             <v-chip
               v-show="isMobile"
               color="primary"
-              class="ma-1"
+              class="my-auto mx-1"
               small
               v-bind="attrs"
               v-on="on">
@@ -81,16 +91,18 @@
                 small
                 :outlined="item.value!==selectedTranslation.value"
                 color="primary"
+                close-label="translation remove button"
                 @click:close="removeTranslation(item)"
                 @click="changeTranslation(item)"
-                class="ma-2">
+                class="my-auto mx-1">
                 {{ item.text }}
               </v-chip>
             </v-list-item>
           </v-list>
         </v-menu>
       </div>
     </div>
+    <div class="bar-separator my-auto"></div>
     <div class="px-2  my-auto  height-auto width-auto  d-flex flex-nowrap">
       <div v-if="!isMobile" class="ma-2">{{ $t('notes.label.translation.add') }}</div>
       <select
@@ -104,13 +116,22 @@
           {{ item.text }}
         </option>
       </select>
-      <v-btn
-        class="my-auto "
-        small
-        icon
-        @click="add()">
-        <v-icon size="18" class="icon-default-color py-3">fa-plus</v-icon>
-      </v-btn>
+      <v-tooltip bottom>
+        <template #activator="{ on, attrs }">
+          <v-btn
+            aria-label="translation add button"
+            class="my-auto "
+            small
+            icon
+            v-on="on"
+            v-bind="attrs"
+            :disabled="selectedLang.value===''"
+            @click="add()">
+            <v-icon size="18" class="icon-default-color py-3">fa-plus</v-icon>
+          </v-btn>
+        </template>
+        <span class="caption">{{ $t('notes.label.addTheTranslation') }}</span>
+      </v-tooltip>
     </div>
   </div>
 </template>
@@ -121,17 +142,23 @@ export default {
       type: Object,
       default: () => null,
     },
+    translations: {
+      type: Object,
+      default: () => null,
+    },
+    languages: {
+      type: Object,
+      default: () => null,
+    },
   },
 
   data: () => ({
     moreTranslationsMenu: false,
     showTranslationbar: false,
-    languages: [],
     selectedLang: {},
     selectedTranslation: {value: ''},
     displayActionMenu: true,
     noteLanguages: [],
-    translations: null,
   }),
 
   mounted() {
@@ -141,9 +168,6 @@ export default {
 
   },
 
-  created() {
-    this.getAvailableLanguages();
-  },
 
   computed: {
     moreTranslations(){
@@ -177,10 +201,9 @@ export default {
       this.$root.$emit('hide-translations');
     },
     add(){
-      this.translations.unshift(this.selectedLang);
+      this.$root.$emit('add-translation', this.selectedLang);
       this.selectedTranslation=this.selectedLang;
       this.languages = this.languages.filter(item => item.value !== this.selectedLang.value);
-      this.$root.$emit('add-translation', this.selectedLang.value);
       this.selectedLang={value: '',text: this.$t('notes.label.chooseLangage')};
       
     },
@@ -192,27 +215,6 @@ export default {
       this.selectedTranslation=translation;
       this.$root.$emit('lang-translation-changed', this.selectedTranslation.value);
     },
-    getAvailableLanguages(){
-      return this.$notesService.getAvailableLanguages().then(data => {
-        this.languages = data || [];
-        this.languages.unshift({value: '',text: this.$t('notes.label.chooseLangage')});
-        if (this.translations){
-          this.languages = this.languages.filter(item1 => !this.translations.some(item2 => item2.value === item1.value));
-        }       
-      });
-    },
-    getNoteLanguages(){
-      return this.$notesService.getNoteLanguages(this.noteId).then(data => {
-        this.translations =  data || [];
-        if (this.translations.length>0) {
-          this.translations = this.languages.filter(item1 => this.translations.some(item2 => item2 === item1.value));
-          this.languages = this.languages.filter(item1 => !this.translations.some(item2 => item2.value === item1.value));
-        }
-        if (this.isMobile) {
-          this.translations.unshift({value: '',text: this.$t('notes.label.translation.originalVersion')});
-        }
-      });
-    },
     removeTranslation(translation){
       return this.$notesService.deleteNoteTranslation(this.noteId,translation.value).then(() => {
         this.translations=this.translations.filter(item => item.value !== translation.value);