Browse Source

fix: nc button ui and word wrap

pull/6500/head
sreehari jayaraj 1 year ago
parent
commit
e4cf30f58a
  1. 25
      packages/nc-gui/components/smartsheet/Form.vue
  2. 2
      packages/nc-gui/composables/useSharedFormViewStore.ts
  3. 18
      packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
  4. 4
      packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue

25
packages/nc-gui/components/smartsheet/Form.vue

@ -428,27 +428,27 @@ watch(view, (nextView) => {
</div> </div>
<div class="flex flex-wrap gap-2 mb-4"> <div class="flex flex-wrap gap-2 mb-4">
<button <NcButton
v-if="hiddenColumns.length" v-if="hiddenColumns.length"
type="button" type="secondary"
class="nc-form-add-all color-transition bg-white transform hover:(text-primary ring ring-accent ring-opacity-100) active:translate-y-[1px] px-2 py-1 shadow-md rounded" class="nc-form-add-all"
data-testid="nc-form-add-all" data-testid="nc-form-add-all"
@click="addAllColumns" @click="addAllColumns"
> >
<!-- Add all --> <!-- Add all -->
{{ $t('general.addAll') }} {{ $t('general.addAll') }}
</button> </NcButton>
<button <NcButton
v-if="localColumns.length" v-if="localColumns.length"
type="button" type="secondary"
class="nc-form-remove-all color-transition bg-white transform hover:(text-primary ring ring-accent ring-opacity-100) active:translate-y-[1px] px-2 py-1 shadow-md rounded" class="nc-form-remove-all"
data-testid="nc-form-remove-all" data-testid="nc-form-remove-all"
@click="removeAllColumns" @click="removeAllColumns"
> >
<!-- Remove all --> <!-- Remove all -->
{{ $t('general.removeAll') }} {{ $t('general.removeAll') }}
</button> </NcButton>
</div> </div>
</div> </div>
@ -785,15 +785,16 @@ watch(view, (nextView) => {
</Draggable> </Draggable>
<div class="justify-center flex mt-6"> <div class="justify-center flex mt-6">
<button <NcButton
type="submit" html-type="submit"
type="primary"
:disabled="!isUIAllowed('dataInsert')" :disabled="!isUIAllowed('dataInsert')"
class="uppercase scaling-btn nc-form-submit" class="nc-form-submit"
data-testid="nc-form-submit" data-testid="nc-form-submit"
@click="submitForm" @click="submitForm"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </NcButton>
</div> </div>
</a-card> </a-card>
</a-form> </a-form>

2
packages/nc-gui/composables/useSharedFormViewStore.ts

@ -213,8 +213,6 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
submitted.value = true submitted.value = true
progress.value = false progress.value = false
await message.success(sharedFormView.value?.success_msg || 'Saved successfully.')
} catch (e: any) { } catch (e: any) {
console.log(e) console.log(e)
await message.error(await extractSdkResponseErrorMsg(e)) await message.error(await extractSdkResponseErrorMsg(e))

18
packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue

@ -72,14 +72,17 @@ const onDecode = async (scannedCodeValue: string) => {
<template> <template>
<div class="h-full flex flex-col items-center"> <div class="h-full flex flex-col items-center">
<div <div
class="color-transition relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(bg-white dark:bg-slate-700 rounded-lg border-1 border-gray-200 shadow-xl)" class="color-transition flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(bg-white dark:bg-slate-700 rounded-lg border-1 border-gray-200 shadow-xl)"
> >
<template v-if="sharedFormView"> <template v-if="sharedFormView">
<h1 class="prose-2xl font-bold self-center my-4" style="word-break: break-all"> <h1 class="prose-2xl font-bold self-center my-4 break-words">
{{ sharedFormView.heading }} {{ sharedFormView.heading }}
</h1> </h1>
<h2 v-if="sharedFormView.subheading" class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6"> <h2
v-if="sharedFormView.subheading"
class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6 break-words"
>
{{ sharedFormView.subheading }} {{ sharedFormView.subheading }}
</h2> </h2>
@ -197,14 +200,9 @@ const onDecode = async (scannedCodeValue: string) => {
</div> </div>
<div class="text-center mt-4"> <div class="text-center mt-4">
<button <NcButton type="primary" html-type="submit" data-testid="shared-form-submit-button" @click="submitForm">
type="submit"
class="uppercase scaling-btn prose-sm"
data-testid="shared-form-submit-button"
@click="submitForm"
>
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </NcButton>
</div> </div>
</div> </div>
</div> </div>

4
packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue

@ -237,14 +237,14 @@ onMounted(() => {
</script> </script>
<template> <template>
<div ref="el" class="survey pt-8 md:p-0 w-full h-full flex flex-col"> <div ref="el" class="survey pt-8 md:p-0 w-full h-full flex flex-col bg-[red]">
<div <div
v-if="sharedFormView" v-if="sharedFormView"
style="height: max(40vh, 225px); min-height: 225px" style="height: max(40vh, 225px); min-height: 225px"
class="max-w-[max(33%,600px)] mx-auto flex flex-col justify-end" class="max-w-[max(33%,600px)] mx-auto flex flex-col justify-end"
> >
<div class="px-4 md:px-0 flex flex-col justify-end"> <div class="px-4 md:px-0 flex flex-col justify-end">
<h1 class="prose-2xl font-bold self-center my-4" data-testid="nc-survey-form__heading" style="word-break: break-all"> <h1 class="prose-2xl font-bold self-center my-4" data-testid="nc-survey-form__heading">
{{ sharedFormView.heading }} {{ sharedFormView.heading }}
</h1> </h1>

Loading…
Cancel
Save