test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: moved dropdown option to tab

Browse Source
This commit is contained in:
Shariq Ansari 2024-12-23 23:11:12 +05:30
parent 545b601852
commit 6a06cbd08d
1 changed files with 66 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
frontend/src/components/FieldLayoutEditor.vue
View File

@ -1,70 +1,70 @@
<template> <template>
<div class="flex flex-col gap-5.5"> <div class="flex flex-col gap-5.5">
<div <div
class="flex justify-between items-center gap-1 text-base bg-surface-gray-2 rounded py-2 px-2.5" class="flex items-center gap-2 text-base bg-surface-gray-2 rounded py-2 px-2.5"
> >
<div class="flex items-center gap-1"> <Draggable
<Draggable v-if="tabs.length && !tabs[tabIndex].no_tabs"
v-if="tabs.length && !tabs[tabIndex].no_tabs" :list="tabs"
:list="tabs" item-key="label"
item-key="label" class="flex items-center gap-2"
class="flex items-center gap-1" @end="(e) => (tabIndex = e.newIndex)"
@end="(e) => (tabIndex = e.newIndex)" >
> <template #item="{ element: tab, index: i }">
<template #item="{ element: tab, index: i }"> <div
<div class="flex items-center gap-2 cursor-pointer rounded"
class="cursor-pointer rounded" :class="[
:class="[ tabIndex == i
tabIndex == i ? 'text-ink-gray-9 bg-surface-white shadow-sm'
? 'text-ink-gray-9 bg-surface-white shadow-sm' : 'text-ink-gray-5 hover:text-ink-gray-9 hover:bg-surface-white hover:shadow-sm',
: 'text-ink-gray-5 hover:text-ink-gray-9 hover:bg-surface-white hover:shadow-sm', tab.editingLabel ? 'p-1' : 'px-2 py-1',
tab.editingLabel ? 'p-1' : 'px-2 py-1', ]"
]" @click="tabIndex = i"
@click="tabIndex = i" >
> <div @dblclick="() => (tab.editingLabel = true)">
<div @dblclick="() => (tab.editingLabel = true)"> <div v-if="!tab.editingLabel" class="flex items-center gap-2">
<div v-if="!tab.editingLabel" class="flex items-center gap-2"> {{ __(tab.label) || __('Untitled') }}
{{ __(tab.label) || __('Untitled') }} </div>
</div> <div v-else class="flex gap-1 items-center">
<div v-else class="flex gap-1 items-center"> <Input
<Input v-model="tab.label"
v-model="tab.label" @keydown.enter="tab.editingLabel = false"
@keydown.enter="tab.editingLabel = false" @blur="tab.editingLabel = false"
@blur="tab.editingLabel = false" @click.stop
@click.stop />
/> <Button
<Button v-if="tab.editingLabel"
v-if="tab.editingLabel" icon="check"
icon="check" variant="ghost"
variant="ghost" @click="tab.editingLabel = false"
@click="tab.editingLabel = false" />
/>
</div>
</div> </div>
</div> </div>
</template> <Dropdown
</Draggable> v-if="!tab.no_tabs && tabIndex == i"
<Button :options="getTabOptions(tab)"
variant="ghost" class="!h-4"
class="!h-6.5 !text-ink-gray-5 hover:!text-ink-gray-9" @click.stop
@click="addTab" >
:label="__('Add Tab')" <template #default>
> <Button variant="ghost" class="!p-1 !h-4">
<template #prefix> <FeatherIcon name="more-horizontal" class="h-4" />
<FeatherIcon name="plus" class="h-4" /> </Button>
</template> </template>
</Button> </Dropdown>
</div> </div>
<Dropdown
v-if="tabs.length && !tabs[tabIndex].no_tabs"
:options="getTabOptions(tabs[tabIndex])"
>
<template #default>
<Button variant="ghost">
<FeatherIcon name="more-horizontal" class="h-4" />
</Button>
</template> </template>
</Dropdown> </Draggable>
<Button
variant="ghost"
class="!h-6.5 !text-ink-gray-5 hover:!text-ink-gray-9"
@click="addTab"
:label="__('Add Tab')"
>
<template v-slot:[slotName]>
<FeatherIcon name="plus" class="h-4" />
</template>
</Button>
</div> </div>
<div v-show="tabIndex == i" v-for="(tab, i) in tabs" :key="tab.label"> <div v-show="tabIndex == i" v-for="(tab, i) in tabs" :key="tab.label">
<Draggable <Draggable
@ -207,6 +207,12 @@ const props = defineProps({
}) })
const tabIndex = ref(0) const tabIndex = ref(0)
const slotName = computed(() => {
if (props.tabs.length == 1 && props.tabs[0].no_tabs) {
return 'prefix'
}
return 'default'
})
const restrictedFieldTypes = [ const restrictedFieldTypes = [
'Geolocation', 'Geolocation',