github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-28 18:57:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

Ensure menus closes when another one gets opened (#7962)

Browse Source 
* ensure menus closes when another one gets opened

* revert focusout event for v-menu

* change field-select and only make labels clickable

* change v-click-outside to pointerdown event

* Remove default behavior

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
This commit is contained in:
Azri Kahar
2021-09-22 07:15:30 +08:00
committed by GitHub
parent 72e16dec24
commit d3ba3a4246
3 changed files with 37 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/components/v-menu/v-menu.vue
View File

@@ -28,7 +28,6 @@
handler: deactivate,
middleware: onClickOutsideMiddleware,
disabled: isActive === false || closeOnClick === false,
events: ['click'],
}"
class="v-menu-popper"
:class="{ active: isActive, attached }"

2
app/src/modules/settings/routes/data-model/fields/components/field-select-menu.vue
View File

@@ -1,7 +1,7 @@
<template>
<v-menu show-arrow placement="bottom-end">
<template #activator="{ toggle }">
<v-icon clickable name="more_vert" @click.stop="toggle" />
<v-icon clickable name="more_vert" @click="toggle" />
</template>
<v-list>

57
app/src/modules/settings/routes/data-model/fields/components/field-select.vue
View File

@@ -48,19 +48,25 @@
</template>
</draggable>
<v-input v-else class="field" :class="{ hidden }" readonly clickable @click="openFieldDetail">
<v-input v-else class="field" :class="{ hidden }" readonly>
<template #prepend>
<v-icon class="drag-handle" name="drag_indicator" @click.stop />
</template>
<template #input>
<div v-tooltip="interfaceName ? `${field.name} (${interfaceName})` : field.name" class="label">
<span class="name">
{{ field.field }}
<v-icon v-if="field.meta?.required === true" name="star" class="required" sup />
</span>
<span v-if="field.meta" class="interface">{{ interfaceName }}</span>
<span v-else class="interface">{{ t('db_only_click_to_configure') }}</span>
<div
v-tooltip="interfaceName ? `${field.name} (${interfaceName})` : field.name"
class="label"
@click="openFieldDetail"
>
<div class="label-inner">
<span class="name">
{{ field.field }}
<v-icon v-if="field.meta?.required === true" name="star" class="required" sup />
</span>
<span v-if="field.meta" class="interface">{{ interfaceName }}</span>
<span v-else class="interface">{{ t('db_only_click_to_configure') }}</span>
</div>
</div>
</template>
@@ -456,24 +462,33 @@ export default defineComponent({
}
.label {
display: flex;
flex-grow: 1;
align-items: center;
align-self: stretch;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
.name {
font-family: var(--family-monospace);
}
.label-inner {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.interface {
display: none;
color: var(--foreground-subdued);
font-family: var(--family-monospace);
opacity: 0;
transition: opacity var(--fast) var(--transition);
.name {
margin-right: 12px;
font-family: var(--family-monospace);
}
@media (min-width: 600px) {
display: initial;
.interface {
display: none;
color: var(--foreground-subdued);
font-family: var(--family-monospace);
opacity: 0;
transition: opacity var(--fast) var(--transition);
@media (min-width: 600px) {
display: initial;
}
}
}
}