github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Prevent overflow with long collection names on Access Control page (#21120)

Browse Source 
* Prevent overflow with long collection names on Access Control page

* Add changeset
This commit is contained in:
Pascal Jufer
2024-01-17 20:51:53 +01:00
committed by GitHub
parent 70de6168b8
commit 5984a32992
2 changed files with 42 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/little-poems-cross.md Normal file
View File

@@ -0,0 +1,5 @@
---
'@directus/app': patch
---
Ensured long collection names are not overflowing permission table on Access Control page

65
app/src/modules/settings/routes/roles/item/components/permissions-overview-row.vue
View File

@@ -31,15 +31,16 @@ function isLoading(action: string) {
<template>
<div class="permissions-overview-row">
<span class="name">
<span v-tooltip.left="collection.name">{{ collection.collection }}</span>
<span class="actions">
<span class="all" @click="setFullAccessAll">{{ t('all') }}</span>
<span class="divider">/</span>
<span class="none" @click="setNoAccessAll">{{ t('none') }}</span>
</span>
<span v-tooltip.left="collection.name" class="name">{{ collection.collection }}</span>
<span class="actions">
<span class="all" @click="setFullAccessAll">{{ t('all') }}</span>
<span class="divider">/</span>
<span class="none" @click="setNoAccessAll">{{ t('none') }}</span>
</span>
<span class="spacer" />
<template v-for="action in editablePermissionActions" :key="action">
<permissions-overview-toggle
v-if="!disabledActions?.includes(action)"
@@ -63,46 +64,54 @@ function isLoading(action: string) {
padding: 0 12px;
.name {
flex-grow: 1;
font-family: var(--theme--fonts--monospace--font-family);
overflow: hidden;
text-overflow: ellipsis;
}
.actions {
margin-left: 8px;
color: var(--theme--foreground-subdued);
font-size: 12px;
opacity: 0;
transition: opacity var(--fast) var(--transition);
.actions {
font-family: var(--theme--fonts--monospace--font-family);
margin-left: 8px;
color: var(--theme--foreground-subdued);
font-size: 12px;
opacity: 0;
transition: opacity var(--fast) var(--transition);
span {
cursor: pointer;
span {
cursor: pointer;
&:hover {
&.all {
color: var(--theme--success);
}
&:hover {
&.all {
color: var(--theme--success);
}
&.none {
color: var(--theme--danger);
}
&.none {
color: var(--theme--danger);
}
}
}
.divider {
margin: 0 6px;
cursor: default;
}
.divider {
margin: 0 6px;
cursor: default;
}
}
&:hover .name .actions {
&:hover .actions {
opacity: 1;
}
.spacer {
flex-grow: 1;
width: 20px;
}
.null {
display: flex;
justify-content: center;
width: 24px;
color: var(--theme--foreground);
cursor: not-allowed;
}
:is(.permissions-overview-toggle, .null) + :is(.permissions-overview-toggle, .null) {