Skip to content

Commit

Permalink
Task 65423 (#722)
Browse files Browse the repository at this point in the history 
Task-65423: Add a language
  • Loading branch information
@mkrout @exo-swf
mkrout authored and exo-swf committed Sep 19, 2023
1 parent 9758e6e commit be2a034
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 76 deletions.
1 change: 1 addition & 0 deletions notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 3 additions & 7 deletions notes-webapp/src/main/webapp/skin/less/notes/notes.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}


Expand Down
69 changes: 52 additions & 17 deletions notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -167,6 +170,8 @@ export default {
spaceGroupId: null,
showTranslationBar: false,
slectedLanguage: null,
translations: null,
languages: [],
};
},
computed: {
Expand All @@ -192,7 +197,11 @@ export default {
},
notesMultilingualActive() {
return eXo?.env?.portal?.notesMultilingual;
},
langBottonColor(){
return this.translations?.length>0 ? 'primary--text':'';
}
},
watch: {
'note.title'() {
Expand All @@ -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}`);
Expand All @@ -235,6 +245,7 @@ export default {
} else {
this.getNote(this.noteId);
}
this.getNoteLanguages();
}
if (urlParams.has('parentNoteId')) {
this.parentPageId = urlParams.get('parentNoteId');
Expand Down Expand Up @@ -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 => {
Expand Down Expand Up @@ -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');
Expand All @@ -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);
}
}
Expand Down Expand Up @@ -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>
106 changes: 54 additions & 52 deletions notes-webapp/src/main/webapp/vue-app/notes-editor/components/TranslationsEditBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 }}
Expand All @@ -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">
Expand All @@ -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
Expand All @@ -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>
Expand All @@ -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() {
Expand All @@ -141,9 +168,6 @@ export default {
},
created() {
this.getAvailableLanguages();
},
computed: {
moreTranslations(){
Expand Down Expand Up @@ -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')};
},
Expand All @@ -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);
Expand Down

0 comments on commit be2a034

Please sign in to comment.