github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-26 07:48:19 -05:00
Code Issues Packages Projects Releases Wiki Activity

add dot indicator to groups with modified fields (#10147)

Browse Source
This commit is contained in:
Azri Kahar
2021-12-01 08:29:38 +08:00
committed by GitHub
parent 57494d8cca
commit 481d03df7d
2 changed files with 49 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template>
<v-item :value="field.field" scope="group-accordion" class="accordion-section">
<template #default="{ active, toggle }">
<div class="label type-title" :class="{ active }" @click="handleModifier($event, toggle)">
<div class="label type-title" :class="{ active, edited }" @click="handleModifier($event, toggle)">
<v-icon class="icon" :class="{ active }" name="expand_more" />
{{ field.name }}
<v-icon
@@ -113,6 +113,13 @@ export default defineComponent({
});
});
const edited = computed(() => {
if (!props.values) return false;
const editedFields = Object.keys(props.values);
return fieldsInSection.value.some((field) => editedFields.includes(field.field)) ? true : false;
});
const validationMessage = computed(() => {
const validationError = props.validationErrors.find((error) => error.field === props.field.field);
if (validationError === undefined) return;
@@ -124,7 +131,7 @@ export default defineComponent({
}
});
return { fieldsInSection, handleModifier, validationMessage };
return { fieldsInSection, edited, handleModifier, validationMessage };
function handleModifier(event: MouseEvent, toggle: () => void) {
if (props.multiple === false) {
@@ -152,6 +159,7 @@ export default defineComponent({
}
.label {
position: relative;
display: flex;
align-items: center;
margin: 8px 0;
@@ -165,6 +173,19 @@ export default defineComponent({
color: var(--foreground-normal);
}
.label.edited::before {
position: absolute;
top: 14px;
left: -7px;
display: block;
width: 4px;
height: 4px;
background-color: var(--foreground-subdued);
border-radius: 4px;
content: '';
pointer-events: none;
}
.icon {
margin-right: 12px;
transform: rotate(-90deg);

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

@@ -5,7 +5,7 @@
:style="{
'--v-divider-label-color': headerColor,
}"
:class="{ active }"
:class="{ active, edited }"
:inline-title="false"
large
@click="toggle"
@@ -108,6 +108,13 @@ export default defineComponent({
setup(props) {
const { t } = useI18n();
const edited = computed(() => {
if (!props.values) return false;
const editedFields = Object.keys(props.values);
return props.fields.some((field) => editedFields.includes(field.field)) ? true : false;
});
const validationMessages = computed(() => {
if (!props.validationErrors) return;
@@ -134,7 +141,7 @@ export default defineComponent({
return errors.join('\n');
});
return { validationMessages };
return { edited, validationMessages };
},
});
</script>
@@ -158,6 +165,23 @@ export default defineComponent({
transform: rotate(0) !important;
}
.v-divider .title {
position: relative;
}
.v-divider.edited:not(.active) .title::before {
position: absolute;
top: 14px;
left: -7px;
display: block;
width: 4px;
height: 4px;
background-color: var(--foreground-subdued);
border-radius: 4px;
content: '';
pointer-events: none;
}
.header-icon {
margin-right: 12px !important;
}