github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix(nc-gui): add focus box shadow for switch btn in form view

pull/7741/head
Ramesh Mane 9 months ago
parent
6ddf2a18ea
commit
4f8d187d07
1 changed files with 36 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      packages/nc-gui/components/smartsheet/Form.vue

53
packages/nc-gui/components/smartsheet/Form.vue
Unescape View File

@ -63,6 +63,11 @@ const hiddenColTypes = [
UITypes.LastModifiedBy, UITypes.LastModifiedBy,
] ]
const enum NcForm {
heading = 'nc-form-heading',
subheading = 'nc-form-sub-heading',
}
const { isMobileMode, user } = useGlobal() const { isMobileMode, user } = useGlobal()
const formRef = ref() const formRef = ref()
@ -339,7 +344,7 @@ function shouldSkipColumn(col: Record<string, any>) {
) )
} }
async function handleAddOrRemoveAllColumns(value: boolean) { async function handleAddOrRemoveAllColumns<T>(value: T) {
if (isLocked.value || !isEditable) return if (isLocked.value || !isEditable) return
if (value) { if (value) {
@ -607,8 +612,11 @@ useEventListener(
(e?.relatedTarget as HTMLElement)?.getAttribute('data-title') || (e?.relatedTarget as HTMLElement)?.getAttribute('data-title') ||
(e?.relatedTarget as HTMLElement)?.offsetParent?.closest('.nc-form-focus-element')?.getAttribute('data-title') || (e?.relatedTarget as HTMLElement)?.offsetParent?.closest('.nc-form-focus-element')?.getAttribute('data-title') ||
(e?.relatedTarget as HTMLElement)?.closest('.nc-form-focus-element')?.getAttribute('data-title') (e?.relatedTarget as HTMLElement)?.closest('.nc-form-focus-element')?.getAttribute('data-title')
if (
if (activeRow.value && nextActiveFieldTitle && activeRow.value !== nextActiveFieldTitle) { (activeRow.value || [NcForm.heading, NcForm.subheading].includes(nextActiveFieldTitle as NcForm)) &&
nextActiveFieldTitle &&
activeRow.value !== nextActiveFieldTitle
) {
if (isTabPressed.value) { if (isTabPressed.value) {
activeRow.value = nextActiveFieldTitle activeRow.value = nextActiveFieldTitle
} }
@ -720,7 +728,7 @@ useEventListener(
</div> </div>
</div> </div>
<div v-else class="h-full w-full flex" data-testid="nc-form-wrapper"> <div v-else class="nc-form-wrapper h-full w-full flex" data-testid="nc-form-wrapper">
<div v-if="isLoadingFormView" class="flex-1"></div> <div v-if="isLoadingFormView" class="flex-1"></div>
<div <div
v-else-if="formViewData" v-else-if="formViewData"
@ -868,16 +876,16 @@ useEventListener(
'mb-4 py-0 lg:py-0': !isEditable, 'mb-4 py-0 lg:py-0': !isEditable,
}, },
{ {
'hover:bg-gray-50': activeRow !== 'nc-form-heading' && isEditable, 'hover:bg-gray-50': activeRow !== NcForm.heading && isEditable,
}, },
{ {
'bg-gray-50': activeRow === 'nc-form-heading' && isEditable, 'bg-gray-50': activeRow === NcForm.heading && isEditable,
}, },
{ {
'!hover:bg-white !ring-0 !cursor-auto': isLocked, '!hover:bg-white !ring-0 !cursor-auto': isLocked,
}, },
]" ]"
@click.stop="onFormItemClick({ title: 'nc-form-heading' })" @click.stop="onFormItemClick({ title: NcForm.heading })"
> >
<a-form-item v-if="isEditable" class="!my-0"> <a-form-item v-if="isEditable" class="!my-0">
<a-textarea <a-textarea
@ -895,8 +903,8 @@ useEventListener(
:disabled="isLocked" :disabled="isLocked"
placeholder="Form Title" placeholder="Form Title"
:bordered="false" :bordered="false"
data-testid="nc-form-heading" :data-testid="NcForm.heading"
data-title="nc-form-heading" :data-title="NcForm.heading"
@blur="updateView" @blur="updateView"
@keydown.enter="updateView" @keydown.enter="updateView"
/> />
@ -918,16 +926,16 @@ useEventListener(
'mb-4 py-0 lg:py-0': !isEditable, 'mb-4 py-0 lg:py-0': !isEditable,
}, },
{ {
'hover:bg-gray-50': activeRow !== 'nc-form-sub-heading' && isEditable, 'hover:bg-gray-50': activeRow !== NcForm.subheading && isEditable,
}, },
{ {
'bg-gray-50': activeRow === 'nc-form-sub-heading' && isEditable, 'bg-gray-50': activeRow === NcForm.subheading && isEditable,
}, },
{ {
'!hover:bg-white !ring-0 !cursor-auto': isLocked, '!hover:bg-white !ring-0 !cursor-auto': isLocked,
}, },
]" ]"
@click.stop="onFormItemClick({ title: 'nc-form-sub-heading' })" @click.stop="onFormItemClick({ title: NcForm.subheading })"
> >
<LazyCellRichText <LazyCellRichText
v-if="isEditable && !isLocked" v-if="isEditable && !isLocked"
@ -935,9 +943,9 @@ useEventListener(
:placeholder="$t('msg.info.formDesc')" :placeholder="$t('msg.info.formDesc')"
class="nc-form-focus-element font-medium text-base !text-gray-500" class="nc-form-focus-element font-medium text-base !text-gray-500"
is-form-field is-form-field
:autofocus="activeRow === 'nc-form-sub-heading'" :autofocus="activeRow === NcForm.subheading"
data-testid="nc-form-sub-heading" :data-testid="NcForm.subheading"
data-title="nc-form-sub-heading" :data-title="NcForm.subheading"
@update:value="updateView" @update:value="updateView"
/> />
<LazyCellRichText <LazyCellRichText
@ -1348,8 +1356,9 @@ useEventListener(
<div class="flex-1 flex flex-row items-center truncate cursor-pointer"> <div class="flex-1 flex flex-row items-center truncate cursor-pointer">
<div class="flex-1 font-base my-1.5">{{ $t('activity.selectAllFields') }}</div> <div class="flex-1 font-base my-1.5">{{ $t('activity.selectAllFields') }}</div>
<div class="flex items-center px-2"> <div class="flex items-center px-2">
<NcSwitch <a-switch
:checked="visibleColumns.length === localColumns.length" :checked="visibleColumns.length === localColumns.length"
size="small"
@change="handleAddOrRemoveAllColumns" @change="handleAddOrRemoveAllColumns"
/> />
</div> </div>
@ -1406,7 +1415,7 @@ useEventListener(
<span v-if="isRequired(field, field.required)" class="text-red-500 text-sm align-top">&nbsp;*</span> <span v-if="isRequired(field, field.required)" class="text-red-500 text-sm align-top">&nbsp;*</span>
</div> </div>
</div> </div>
<NcSwitch :checked="!!field.show" :disabled="field.required || isLocked || !isEditable" /> <a-switch :checked="!!field.show" :disabled="field.required || isLocked || !isEditable" size="small" />
</div> </div>
</div> </div>
</template> </template>
@ -1726,6 +1735,16 @@ useEventListener(
} }
} }
} }
.nc-form-wrapper {
.ant-switch:focus,
.ant-switch-checked:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
&:hover {
box-shadow: none;
}
}
}
</style> </style>
<style lang="scss"> <style lang="scss">

Write Preview
Loading…
Cancel
Save