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

directus · Dec 1, 2021 · 481d03d · 481d03d
1 parent 57494d8
commit 481d03d
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 4 deletions.
diff --git a/app/src/interfaces/group-accordion/accordion-section.vue b/app/src/interfaces/group-accordion/accordion-section.vue
@@ -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);

diff --git a/app/src/interfaces/group-detail/group-detail.vue b/app/src/interfaces/group-detail/group-detail.vue
@@ -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;
 }