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

Fix form field label responsiveness (#13141)

Browse Source 
* fix form field label responsiveness

* tweaks

* conditionally prepend value edited tooltip

* use new translation key

* add key

* apply suggested changes

* revert text overflow props change

* use span edited dot for form field label

* update edit dot for group detail & accordion

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
This commit is contained in:
Azri Kahar
2022-06-08 22:39:41 +08:00
committed by GitHub
parent 2efff9fd16
commit 524cd00de7
3 changed files with 35 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/interfaces/group-accordion/accordion-section.vue
View File

@@ -2,6 +2,7 @@
<v-item :value="field.field" scope="group-accordion" class="accordion-section">
<template #default="{ active, toggle }">
<div class="label type-title" :class="{ active, edited }" @click="handleModifier($event, toggle)">
<span v-if="edited" v-tooltip="t('edited')" class="edit-dot"></span>
<v-icon class="icon" :class="{ active }" name="expand_more" />
<span class="field-name">{{ field.name }}</span>
<v-icon v-if="field.meta?.required === true" class="required" sup name="star" />
@@ -124,7 +125,7 @@ export default defineComponent({
if (!props.values) return false;
const editedFields = Object.keys(props.values);
return fieldsInSection.value.some((field) => editedFields.includes(field.field)) ? true : false;
return fieldsInSection.value.some((field) => editedFields.includes(field.field));
});
const validationMessage = computed(() => {
@@ -138,7 +139,7 @@ export default defineComponent({
}
});
return { fieldsInSection, edited, handleModifier, validationMessage };
return { t, fieldsInSection, edited, handleModifier, validationMessage };
function handleModifier(event: MouseEvent, toggle: () => void) {
if (props.multiple === false) {
@@ -199,7 +200,7 @@ export default defineComponent({
margin-left: 8px;
}
&.edited::before {
.edit-dot {
position: absolute;
top: 14px;
left: -7px;
@@ -209,7 +210,6 @@ export default defineComponent({
background-color: var(--foreground-subdued);
border-radius: 4px;
content: '';
pointer-events: none;
}
}

12
app/src/interfaces/group-detail/group-detail.vue
View File

@@ -12,6 +12,7 @@
>
<template v-if="headerIcon" #icon><v-icon :name="headerIcon" class="header-icon" /></template>
<template v-if="field.name">
<span v-if="edited" v-tooltip="t('edited')" class="edit-dot"></span>
<span class="title">{{ field.name }}</span>
</template>
<v-icon
@@ -122,7 +123,7 @@ export default defineComponent({
if (!props.values) return false;
const editedFields = Object.keys(props.values);
return props.fields.some((field) => editedFields.includes(field.field)) ? true : false;
return props.fields.some((field) => editedFields.includes(field.field));
});
const validationMessages = computed(() => {
@@ -157,7 +158,7 @@ export default defineComponent({
detailOpen.value = validationMessages.value.length > 0;
});
return { edited, validationMessages, detailOpen };
return { t, edited, validationMessages, detailOpen };
},
});
</script>
@@ -181,13 +182,13 @@ export default defineComponent({
transform: rotate(0) !important;
}
.v-divider .title {
.v-divider :deep(.type-text) {
position: relative;
}
.v-divider.edited:not(.active) .title::before {
.v-divider.edited:not(.active) .edit-dot {
position: absolute;
top: 14px;
top: 7px;
left: -7px;
display: block;
width: 4px;
@@ -195,7 +196,6 @@ export default defineComponent({
background-color: var(--foreground-subdued);
border-radius: 4px;
content: '';
pointer-events: none;
}
.header-icon {