github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-30 16:58:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add required field indicators to accordion group (#11640)

Browse Source
This commit is contained in:
Azri Kahar
2022-02-16 22:24:01 +08:00
committed by GitHub
parent 62f5d09a41
commit bce3451be9
1 changed files with 31 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,7 @@
<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 v-if="field.meta?.required === true" class="required" sup name="star" />
<v-icon
v-if="!active && validationMessage"
v-tooltip="validationMessage"
@@ -150,13 +151,13 @@ export default defineComponent({
});
</script>
<style scoped>
<style lang="scss" scoped>
.accordion-section {
border-top: var(--border-width) solid var(--border-normal);
}
.accordion-section:last-child {
border-bottom: var(--border-width) solid var(--border-normal);
&:last-child {
border-bottom: var(--border-width) solid var(--border-normal);
}
}
.label {
@@ -167,34 +168,41 @@ export default defineComponent({
color: var(--foreground-subdued);
cursor: pointer;
transition: color var(--fast) var(--transition);
}
.label:hover,
.label.active {
color: var(--foreground-normal);
}
&:hover,
&.active {
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;
.required {
--v-icon-color: var(--primary);
margin-top: -12px;
margin-left: 2px;
}
&.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);
transition: transform var(--fast) var(--transition);
}
.icon.active {
transform: rotate(0);
&.active {
transform: rotate(0);
}
}
.warning {