scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-09-11 15:45:34 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #7471 from aignatov-bio/ai-sci-10587-small-improvments-for-tags-modal

Browse source 
Improve for tags modal [SCI-10587]
This commit is contained in:
ajugo 2024-04-15 16:29:11 +02:00 • committed by GitHub
commit 7e966837d2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 39 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/my_modules.js
View file

@ -112,8 +112,8 @@
},
optionLabel: (data) => {
if (data.value > 0) {
return `<span class="my-module-tags-color" style="background:${data.params.color}"></span>
${data.label}`;
return `<span class="h-6 px-1.5 flex items-center max-w-80 truncate text-sn-white rounded"
style="background:${data.params.color}">${data.label}</span>`;
}
return `<span class="my-module-tags-color new"><i class="sn-icon sn-icon-new-task"></i></span>
${data.label + ' '}

50
app/javascript/vue/my_modules/modals/tags.vue
View file

@ -37,7 +37,7 @@
<label class="sci-checkbox-label"></label>
</div>
<div v-if="!tag.editing" @click="startEditMode(tag)"
class="h-6 px-1.5 flex items-center max-w-80 truncate text-sn-white rounded"
class="h-6 px-1.5 flex items-center max-w-80 truncate text-sn-white cursor-text rounded"
:class="{
'cursor-pointer': canManage
}"
@ -64,15 +64,12 @@
</template>
</GeneralDropdown>
<input type="text" :value="tag.attributes.name" class="border-0 grow focus:outline-none bg-transparent" @change="updateTagName($event.target.value, tag)"/>
<i @click.stop="finishEditMode($event, tag)" class="sn-icon sn-icon-check cursor-pointer ml-auto"></i>
<i @click.stop="finishEditMode($event, tag)" class="sn-icon sn-icon-check cursor-pointer ml-auto opacity-50 hover:opacity-100" ></i>
</template>
<i v-if="canManage" @click.stop="deleteTag(tag)"
class="tw-hidden sn-icon sn-icon-delete cursor-pointer group-hover:block"
:class="{
'ml-auto': !tag.editing,
'!block': tag.editing
}"
></i>
<i v-if="canManage && !tag.editing" @click="startEditMode(tag)"
class="sn-icon sn-icon-edit cursor-pointer ml-auto tw-hidden group-hover:block opacity-50 hover:opacity-100" ></i>
<i v-if="canManage" @click.stop="deleteTag(tag)"
class="sn-icon sn-icon-delete cursor-pointer tw-hidden group-hover:block opacity-50 hover:opacity-100"></i>
</div>
</template>
</div>
@ -80,13 +77,20 @@
<div class="mb-4 mt-4">
{{ i18n.t('experiments.canvas.modal_manage_tags.create_new') }}
</div>
<div class="flex gap-2">
<div @click="startCreating"
v-click-outside="cancelCreating"
class="flex gap-2 cursor-pointer hover:bg-sn-super-light-grey
rounded px-3 py-2.5 group"
:class="{
'!bg-sn-super-light-blue': creatingTag
}"
>
<GeneralDropdown>
<template v-slot:field>
<div
class="h-6 w-6 border border-solid border-transparent rounded relative flex items-center justify-center text-sn-white"
:style="{ backgroundColor: newTag.color }"
:class="{'!border-sn-grey !text-sn-grey': !newTag.color}"
:class="{'!border-sn-grey !text-sn-grey bg-sn-white': !newTag.color}"
>
a
</div>
@ -104,11 +108,13 @@
</template>
</GeneralDropdown>
<input type="text" v-model="newTag.name"
ref="newTagNameInput"
:placeholder="i18n.t('experiments.canvas.modal_manage_tags.new_tag_name')"
class="border-0 focus:outline-none bg-transparent" />
<i v-if="!creatingTag" class="sn-icon sn-icon-edit opacity-0 group-hover:opacity-50 ml-auto"></i>
<i v-if="validNewTag" @click.stop="createTag" class="sn-icon sn-icon-check cursor-pointer ml-auto"></i>
<i @click.stop="newTag = { name: null, color: null }"
class="tw-hidden sn-icon sn-icon-delete cursor-pointer "
<i @click.stop="cancelCreating"
class="tw-hidden sn-icon sn-icon-close cursor-pointer "
:class="{
'ml-auto': !validNewTag,
'!block': newTag.name || newTag.color
@ -175,6 +181,7 @@ export default {
},
loadingTags: false,
tagToUpdate: null,
creatingTag: false,
query: ''
};
},
@ -198,6 +205,7 @@ export default {
this.finishEditMode();
tag.initialName = tag.attributes.name;
tag.editing = true;
this.tagToUpdate = tag;
this.$nextTick(() => {
@ -210,6 +218,9 @@ export default {
const tagToFinish = tag || this.allTags.find((t) => t.editing);
if (tagToFinish) {
if (this.tagToUpdate.attributes.name.length === 0) {
this.tagToUpdate.attributes.name = this.tagToUpdate.initialName;
}
tagToFinish.editing = false;
this.updateTag(this.tagToUpdate);
}
@ -283,6 +294,7 @@ export default {
}).then(() => {
this.newTag = { name: null, color: null };
this.loadAlltags();
this.creatingTag = false;
});
},
async deleteTag(tag) {
@ -299,6 +311,18 @@ export default {
} else {
document.body.style.overflow = 'hidden';
}
},
startCreating() {
this.creatingTag = true;
this.$nextTick(() => {
this.$refs.newTagNameInput.focus();
});
},
cancelCreating(e) {
if (e && e.target.closest('.sn-dropdown')) return;
this.creatingTag = false;
this.newTag = { name: null, color: null };
}
}
};