fix: make section fields label & field width 35-65%
This commit is contained in:
Shariq Ansari
parent
069b58506f
commit
1c54f2faca
@ -10,166 +10,168 @@
|
|||||||
class="section-field flex items-center gap-2 px-3 leading-5 first:mt-3"
|
class="section-field flex items-center gap-2 px-3 leading-5 first:mt-3"
|
||||||
>
|
>
|
||||||
<Tooltip :text="__(field.label)" :hoverDelay="1">
|
<Tooltip :text="__(field.label)" :hoverDelay="1">
|
||||||
<div class="sm:w-[106px] w-36 shrink-0 truncate text-sm text-gray-600">
|
<div class="w-[35%] min-w-20 shrink-0 truncate text-sm text-gray-600">
|
||||||
<span>{{ __(field.label) }}</span>
|
<span>{{ __(field.label) }}</span>
|
||||||
<span class="text-red-500">{{ field.reqd ? ' *' : '' }}</span>
|
<span class="text-red-500">{{ field.reqd ? ' *' : '' }}</span>
|
||||||
</div>
|
</div>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<div
|
<div class="flex items-center justify-between w-[65%]">
|
||||||
class="grid min-h-[28px] flex-1 items-center overflow-hidden text-base"
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
v-if="
|
class="grid min-h-[28px] flex-1 items-center overflow-hidden text-base"
|
||||||
field.read_only && !['checkbox', 'dropdown'].includes(field.type)
|
|
||||||
"
|
|
||||||
class="flex h-7 cursor-pointer items-center px-2 py-1 text-gray-600"
|
|
||||||
>
|
>
|
||||||
<Tooltip :text="__(field.tooltip)">
|
<div
|
||||||
<div>{{ data[field.name] }}</div>
|
v-if="
|
||||||
</Tooltip>
|
field.read_only && !['checkbox', 'dropdown'].includes(field.type)
|
||||||
</div>
|
"
|
||||||
<div v-else-if="field.type === 'dropdown'">
|
class="flex h-7 cursor-pointer items-center px-2 py-1 text-gray-600"
|
||||||
<NestedPopover>
|
>
|
||||||
<template #target="{ open }">
|
<Tooltip :text="__(field.tooltip)">
|
||||||
<Button
|
<div>{{ data[field.name] }}</div>
|
||||||
:label="data[field.name]"
|
</Tooltip>
|
||||||
class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-gray-100 px-2 py-1.5 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
|
</div>
|
||||||
>
|
<div v-else-if="field.type === 'dropdown'">
|
||||||
<div v-if="data[field.name]" class="truncate">
|
<NestedPopover>
|
||||||
{{ data[field.name] }}
|
<template #target="{ open }">
|
||||||
</div>
|
<Button
|
||||||
<div v-else class="text-base leading-5 text-gray-500">
|
:label="data[field.name]"
|
||||||
{{ field.placeholder }}
|
class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-gray-100 px-2 py-1.5 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
|
||||||
</div>
|
>
|
||||||
<template #suffix>
|
<div v-if="data[field.name]" class="truncate">
|
||||||
<FeatherIcon
|
{{ data[field.name] }}
|
||||||
:name="open ? 'chevron-up' : 'chevron-down'"
|
</div>
|
||||||
class="h-4 text-gray-600"
|
<div v-else class="text-base leading-5 text-gray-500">
|
||||||
/>
|
{{ field.placeholder }}
|
||||||
</template>
|
</div>
|
||||||
</Button>
|
<template #suffix>
|
||||||
</template>
|
<FeatherIcon
|
||||||
<template #body>
|
:name="open ? 'chevron-up' : 'chevron-down'"
|
||||||
<div
|
class="h-4 text-gray-600"
|
||||||
class="my-2 space-y-1.5 divide-y rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl"
|
/>
|
||||||
>
|
</template>
|
||||||
<div>
|
</Button>
|
||||||
<DropdownItem
|
</template>
|
||||||
v-if="field.options?.length"
|
<template #body>
|
||||||
v-for="option in field.options"
|
<div
|
||||||
:key="option.name"
|
class="my-2 space-y-1.5 divide-y rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl"
|
||||||
:option="option"
|
>
|
||||||
/>
|
<div>
|
||||||
<div v-else>
|
<DropdownItem
|
||||||
<div class="p-1.5 px-7 text-base text-gray-500">
|
v-if="field.options?.length"
|
||||||
{{ __('No {0} Available', [field.label]) }}
|
v-for="option in field.options"
|
||||||
|
:key="option.name"
|
||||||
|
:option="option"
|
||||||
|
/>
|
||||||
|
<div v-else>
|
||||||
|
<div class="p-1.5 px-7 text-base text-gray-500">
|
||||||
|
{{ __('No {0} Available', [field.label]) }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="pt-1.5">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
class="w-full !justify-start"
|
||||||
|
:label="__('Create New')"
|
||||||
|
@click="field.create()"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<FeatherIcon name="plus" class="h-4" />
|
||||||
|
</template>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pt-1.5">
|
</template>
|
||||||
<Button
|
</NestedPopover>
|
||||||
variant="ghost"
|
</div>
|
||||||
class="w-full !justify-start"
|
<FormControl
|
||||||
:label="__('Create New')"
|
v-else-if="field.type == 'checkbox'"
|
||||||
@click="field.create()"
|
class="form-control"
|
||||||
>
|
:type="field.type"
|
||||||
<template #prefix>
|
v-model="data[field.name]"
|
||||||
<FeatherIcon name="plus" class="h-4" />
|
@change.stop="emit('update', field.name, $event.target.checked)"
|
||||||
</template>
|
:disabled="Boolean(field.read_only)"
|
||||||
</Button>
|
/>
|
||||||
</div>
|
<FormControl
|
||||||
</div>
|
v-else-if="
|
||||||
|
['email', 'number', 'date', 'password', 'textarea'].includes(
|
||||||
|
field.type,
|
||||||
|
)
|
||||||
|
"
|
||||||
|
class="form-control"
|
||||||
|
:class="{
|
||||||
|
'[&_input]:text-gray-500':
|
||||||
|
field.type === 'date' && !data[field.name],
|
||||||
|
}"
|
||||||
|
:type="field.type"
|
||||||
|
:value="data[field.name]"
|
||||||
|
:placeholder="field.placeholder"
|
||||||
|
:debounce="500"
|
||||||
|
@change.stop="emit('update', field.name, $event.target.value)"
|
||||||
|
/>
|
||||||
|
<FormControl
|
||||||
|
v-else-if="field.type === 'select'"
|
||||||
|
class="form-control cursor-pointer [&_select]:cursor-pointer"
|
||||||
|
type="select"
|
||||||
|
v-model="data[field.name]"
|
||||||
|
:options="field.options"
|
||||||
|
:placeholder="field.placeholder"
|
||||||
|
@change.stop="emit('update', field.name, $event.target.value)"
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
v-else-if="['lead_owner', 'deal_owner'].includes(field.name)"
|
||||||
|
class="form-control"
|
||||||
|
:value="data[field.name] && getUser(data[field.name]).full_name"
|
||||||
|
doctype="User"
|
||||||
|
:filters="field.filters"
|
||||||
|
@change="(data) => emit('update', field.name, data)"
|
||||||
|
:placeholder="'Select' + ' ' + field.label + '...'"
|
||||||
|
:hideMe="true"
|
||||||
|
>
|
||||||
|
<template v-if="data[field.name]" #prefix>
|
||||||
|
<UserAvatar class="mr-1.5" :user="data[field.name]" size="sm" />
|
||||||
</template>
|
</template>
|
||||||
</NestedPopover>
|
<template #item-prefix="{ option }">
|
||||||
|
<UserAvatar class="mr-1.5" :user="option.value" size="sm" />
|
||||||
|
</template>
|
||||||
|
<template #item-label="{ option }">
|
||||||
|
<Tooltip :text="option.value">
|
||||||
|
<div class="cursor-pointer">
|
||||||
|
{{ getUser(option.value).full_name }}
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
</template>
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
v-else-if="field.type === 'link'"
|
||||||
|
class="form-control select-text"
|
||||||
|
:value="data[field.name]"
|
||||||
|
:doctype="field.doctype"
|
||||||
|
:filters="field.filters"
|
||||||
|
:placeholder="field.placeholder"
|
||||||
|
@change="(data) => emit('update', field.name, data)"
|
||||||
|
:onCreate="field.create"
|
||||||
|
/>
|
||||||
|
<FormControl
|
||||||
|
v-else
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
:value="data[field.name]"
|
||||||
|
:placeholder="field.placeholder"
|
||||||
|
:debounce="500"
|
||||||
|
@change.stop="emit('update', field.name, $event.target.value)"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<FormControl
|
<ArrowUpRightIcon
|
||||||
v-else-if="field.type == 'checkbox'"
|
v-if="field.type === 'link' && field.link && data[field.name]"
|
||||||
class="form-control"
|
class="h-4 w-4 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
|
||||||
:type="field.type"
|
@click="field.link(data[field.name])"
|
||||||
v-model="data[field.name]"
|
|
||||||
@change.stop="emit('update', field.name, $event.target.checked)"
|
|
||||||
:disabled="Boolean(field.read_only)"
|
|
||||||
/>
|
/>
|
||||||
<FormControl
|
<EditIcon
|
||||||
v-else-if="
|
v-if="field.type === 'link' && field.edit && data[field.name]"
|
||||||
['email', 'number', 'date', 'password', 'textarea'].includes(
|
class="size-3.5 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
|
||||||
field.type,
|
@click="field.edit(data[field.name])"
|
||||||
)
|
|
||||||
"
|
|
||||||
class="form-control"
|
|
||||||
:class="{
|
|
||||||
'[&_input]:text-gray-500':
|
|
||||||
field.type === 'date' && !data[field.name],
|
|
||||||
}"
|
|
||||||
:type="field.type"
|
|
||||||
:value="data[field.name]"
|
|
||||||
:placeholder="field.placeholder"
|
|
||||||
:debounce="500"
|
|
||||||
@change.stop="emit('update', field.name, $event.target.value)"
|
|
||||||
/>
|
|
||||||
<FormControl
|
|
||||||
v-else-if="field.type === 'select'"
|
|
||||||
class="form-control cursor-pointer [&_select]:cursor-pointer"
|
|
||||||
type="select"
|
|
||||||
v-model="data[field.name]"
|
|
||||||
:options="field.options"
|
|
||||||
:placeholder="field.placeholder"
|
|
||||||
@change.stop="emit('update', field.name, $event.target.value)"
|
|
||||||
/>
|
|
||||||
<Link
|
|
||||||
v-else-if="['lead_owner', 'deal_owner'].includes(field.name)"
|
|
||||||
class="form-control"
|
|
||||||
:value="data[field.name] && getUser(data[field.name]).full_name"
|
|
||||||
doctype="User"
|
|
||||||
:filters="field.filters"
|
|
||||||
@change="(data) => emit('update', field.name, data)"
|
|
||||||
:placeholder="'Select' + ' ' + field.label + '...'"
|
|
||||||
:hideMe="true"
|
|
||||||
>
|
|
||||||
<template v-if="data[field.name]" #prefix>
|
|
||||||
<UserAvatar class="mr-1.5" :user="data[field.name]" size="sm" />
|
|
||||||
</template>
|
|
||||||
<template #item-prefix="{ option }">
|
|
||||||
<UserAvatar class="mr-1.5" :user="option.value" size="sm" />
|
|
||||||
</template>
|
|
||||||
<template #item-label="{ option }">
|
|
||||||
<Tooltip :text="option.value">
|
|
||||||
<div class="cursor-pointer">
|
|
||||||
{{ getUser(option.value).full_name }}
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
</template>
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
v-else-if="field.type === 'link'"
|
|
||||||
class="form-control select-text"
|
|
||||||
:value="data[field.name]"
|
|
||||||
:doctype="field.doctype"
|
|
||||||
:filters="field.filters"
|
|
||||||
:placeholder="field.placeholder"
|
|
||||||
@change="(data) => emit('update', field.name, data)"
|
|
||||||
:onCreate="field.create"
|
|
||||||
/>
|
|
||||||
<FormControl
|
|
||||||
v-else
|
|
||||||
class="form-control"
|
|
||||||
type="text"
|
|
||||||
:value="data[field.name]"
|
|
||||||
:placeholder="field.placeholder"
|
|
||||||
:debounce="500"
|
|
||||||
@change.stop="emit('update', field.name, $event.target.value)"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<ArrowUpRightIcon
|
|
||||||
v-if="field.type === 'link' && field.link && data[field.name]"
|
|
||||||
class="h-4 w-4 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
|
|
||||||
@click="field.link(data[field.name])"
|
|
||||||
/>
|
|
||||||
<EditIcon
|
|
||||||
v-if="field.type === 'link' && field.edit && data[field.name]"
|
|
||||||
class="size-3.5 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
|
|
||||||
@click="field.edit(data[field.name])"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</FadedScrollableDiv>
|
</FadedScrollableDiv>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user