scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-12-16 05:42:13 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix CSS issues assigned user task flyout [SCI-10367] (#7253)

Browse source
This commit is contained in:
wandji 2024-03-13 16:24:58 +01:00 • committed by GitHub
parent 3d1907d972
commit cc388d9669
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 27 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
app/javascript/vue/my_modules/renderers/designated_users.vue
View file

@ -1,5 +1,5 @@
<template>
<GeneralDropdown @open="loadUsers" @close="closeFlyout">
<GeneralDropdown @open="() => loadUsers(true)" @close="closeFlyout">
<template v-slot:field>
<div v-if="!params.data.folder" class="flex items-center gap-1 cursor-pointer h-9" @click="openAccessModal">
<div v-for="(user, i) in visibleUsers" :key="i" :title="user.full_name">
@ -24,25 +24,25 @@
:placeholder="i18n.t('experiments.table.search')" />
<i class="sn-icon sn-icon-search"></i>
</div>
<div class="h-64 overflow-y-auto">
<perfect-scrollbar class="relative max-h-96 overflow-y-auto max-w-[280px]">
<div v-for="user in allUsers"
:key="user.value"
@click="selectUser(user)"
:class="{
'!bg-sn-super-light-blue': selectedUsers.includes(user.value),
'!bg-sn-super-light-blue': selectedUsers.some(({ value }) => value === user.value),
'cursor-pointer hover:bg-sn-super-light-grey': canManage
}"
class="whitespace-nowrap rounded px-3 py-2.5 flex items-center gap-2
hover:no-underline leading-5"
>
<div class="sci-checkbox-container">
<input type="checkbox" class="sci-checkbox" :disabled="!canManage" :checked="selectedUsers.includes(user.value)" />
<input type="checkbox" class="sci-checkbox" :disabled="!canManage" :checked="selectedUsers.some(({ value }) => value === user.value)" />
<label class="sci-checkbox-label"></label>
</div>
<img :src="user.params.avatar_url" class="w-7 h-7" />
{{ user.label }}
<span class="truncate">{{ user.label }}</span>
</div>
</div>
</perfect-scrollbar>
</template>
</GeneralDropdown>
</template>
@ -92,14 +92,18 @@ export default {
this.loadUsers();
}
},
created() {
this.selectedUsers = this.users.map((user) => (user.id));
},
methods: {
loadUsers() {
loadUsers(setSelectedUsers = false) {
axios.get(`${this.params.data.urls.users_list}?query=${this.query}`)
.then((response) => {
this.allUsers = response.data.users;
if (setSelectedUsers) {
this.selectedUsers = response.data.users.filter((item) => this.users.some((user) => user.id === item.value));
this.allUsers = response.data.users;
this.flyoutLoaded = true;
} else {
const nonAssignedUsers = response.data.users.filter((item) => !this.selectedUsers.some(({ value }) => value === item.value));
this.allUsers = this.selectedUsers.concat(nonAssignedUsers);
}
});
},
closeFlyout() {
@ -116,11 +120,11 @@ export default {
this.changed = true;
if (this.selectedUsers.includes(user.value)) {
if (this.selectedUsers.some(({ value }) => value === user.value)) {
axios.delete(user.params.unassign_url, {
table: true
}).then(() => {
this.selectedUsers = this.selectedUsers.filter((id) => id !== user.value);
this.selectedUsers = this.selectedUsers.filter(({ value }) => value !== user.value);
});
} else {
axios.post(user.params.assign_url, {
@ -131,7 +135,7 @@ export default {
}
}).then((response) => {
this.allUsers.find((u) => u.value === user.value).params.unassign_url = response.data.unassign_url;
this.selectedUsers.push(user.value);
this.selectedUsers.push(user);
});
}
}

10
app/javascript/vue/shared/mixins/fixed_flyout.js
View file

@ -45,6 +45,7 @@ export default {
if (!field || !flyout) return;
const rect = field.getBoundingClientRect();
const flyoutRect = flyout.getBoundingClientRect();
const screenHeight = window.innerHeight;
const windowHasScroll = document.documentElement.scrollHeight > document.documentElement.clientHeight;
@ -62,11 +63,18 @@ export default {
} else {
flyout.style.minWidth = `${width}px`;
}
if (this.position === 'right') {
if (window.innerWidth - flyoutRect.right < 0) { // when flyout is out of screen
flyout.style.left = 'unset';
flyout.style.right = `${rightScrollOffset}px`;
} else if (this.position === 'right') {
flyout.style.right = `${right - rightScrollOffset}px`;
flyout.style.left = 'unset';
} else {
flyout.style.left = `${left}px`;
flyout.style.right = 'unset';
}
if (bottom < top) {
flyout.style.bottom = `${bottom}px`;
flyout.style.top = 'unset';