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

34
app/src/components/v-form/form-field-label.vue
View File

@@ -6,8 +6,9 @@
:value="field.field"
@update:model-value="$emit('toggle-batch', field)"
/>
<span v-tooltip="edited ? t('edited') : null" class="field-name" @click="toggle">
{{ field.name }}
<span class="field-name" @click="toggle">
<span v-if="edited" v-tooltip="t('edited')" class="edit-dot"></span>
<v-text-overflow :text="field.name" />
<v-icon v-if="field.meta?.required === true" class="required" sup name="star" />
<v-icon v-if="!disabled" class="ctx-arrow" :class="{ active }" name="arrow_drop_down" />
</span>
@@ -66,6 +67,7 @@ export default defineComponent({
emits: ['toggle-batch'],
setup() {
const { t } = useI18n();
return { t };
},
});
@@ -75,10 +77,14 @@ export default defineComponent({
.label {
position: relative;
display: flex;
width: max-content;
margin-bottom: 8px;
cursor: pointer;
.v-text-overflow {
display: inline;
white-space: normal;
}
&.readonly {
cursor: not-allowed;
}
@@ -96,13 +102,11 @@ export default defineComponent({
.required {
--v-icon-color: var(--primary);
margin-left: -3px;
margin-left: 3px;
}
.ctx-arrow {
position: absolute;
top: -3px;
right: -24px;
margin-top: -3px;
color: var(--foreground-subdued);
opacity: 0;
transition: opacity var(--fast) var(--transition);
@@ -119,7 +123,7 @@ export default defineComponent({
}
&.edited {
&::before {
.edit-dot {
position: absolute;
top: 7px;
left: -7px;
@@ -129,7 +133,6 @@ export default defineComponent({
background-color: var(--foreground-subdued);
border-radius: 4px;
content: '';
pointer-events: none;
}
.field-name {
@@ -137,5 +140,18 @@ export default defineComponent({
padding-left: 16px;
}
}
@media (min-width: 960px) {
display: block;
.v-text-overflow {
display: initial;
white-space: nowrap;
}
.field-name {
display: flex;
}
}
}
</style>