Small css fixes [SCI-10745]

This commit is contained in:
Anton 2024-05-28 12:26:16 +02:00
parent 8640fec536
commit 70495c36d6
2 changed files with 6 additions and 3 deletions

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="max-w-[600px] py-3.5"> <div class="max-w-[600px] py-3.5">
<div class="flex flex-col pb-6 overflow-y-auto max-h-[calc(80vh_-_160px)]"> <div class="flex flex-col pb-6 overflow-y-auto w-[calc(100%_+_1rem)] px-2 -ml-2 max-h-[calc(80vh_-_160px)]">
<div class="sci-label mb-2" data-e2e="e2e-TX-globalSearch-filters-filterByType">{{ i18n.t('search.filters.by_type') }}</div> <div class="sci-label mb-2" data-e2e="e2e-TX-globalSearch-filters-filterByType">{{ i18n.t('search.filters.by_type') }}</div>
<div class="flex items-center gap-2 flex-wrap mb-6"> <div class="flex items-center gap-2 flex-wrap mb-6">
<template v-for="group in searchGroups" :key="group.value"> <template v-for="group in searchGroups" :key="group.value">

View file

@ -20,7 +20,7 @@
<div class="mb-4"> <div class="mb-4">
<h5>{{ i18n.t("experiments.canvas.modal_manage_tags.project_tags", { project: this.projectName }) }}</h5> <h5>{{ i18n.t("experiments.canvas.modal_manage_tags.project_tags", { project: this.projectName }) }}</h5>
</div> </div>
<div class="max-h-80 overflow-y-auto" v-click-outside="finishEditMode"> <div ref="scrollContainer" class="max-h-80 overflow-y-auto" v-click-outside="finishEditMode">
<template v-for="tag in sortedAllTags" :key="tag.id"> <template v-for="tag in sortedAllTags" :key="tag.id">
<div <div
class="flex items-center gap-3 px-3 py-2.5 group" class="flex items-center gap-3 px-3 py-2.5 group"
@ -109,7 +109,6 @@
</GeneralDropdown> </GeneralDropdown>
<input type="text" v-model="newTag.name" <input type="text" v-model="newTag.name"
ref="newTagNameInput" ref="newTagNameInput"
@click="setRandomColor"
:placeholder="i18n.t('experiments.canvas.modal_manage_tags.new_tag_name')" :placeholder="i18n.t('experiments.canvas.modal_manage_tags.new_tag_name')"
class="border-0 focus:outline-none bg-transparent" /> 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="!creatingTag" class="sn-icon sn-icon-edit opacity-0 group-hover:opacity-50 ml-auto"></i>
@ -204,6 +203,8 @@ export default {
startEditMode(tag) { startEditMode(tag) {
if (!this.canManage) return; if (!this.canManage) return;
const scrollPosition = this.$refs.scrollContainer.scrollTop;
this.finishEditMode(); this.finishEditMode();
tag.initialName = tag.attributes.name; tag.initialName = tag.attributes.name;
@ -211,6 +212,7 @@ export default {
this.tagToUpdate = tag; this.tagToUpdate = tag;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.modal.querySelector('input').focus(); this.$refs.modal.querySelector('input').focus();
this.$refs.scrollContainer.scrollTop = scrollPosition;
}); });
}, },
finishEditMode(e, tag = null) { finishEditMode(e, tag = null) {
@ -317,6 +319,7 @@ export default {
this.creatingTag = true; this.creatingTag = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.newTagNameInput.focus(); this.$refs.newTagNameInput.focus();
this.setRandomColor();
}); });
}, },
cancelCreating(e) { cancelCreating(e) {