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 class="flex flex-wrap gap-2 mb-4">
<button
<NcButton
v-if="hiddenColumns.length"
type="button"
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"
type="secondary"
class="nc-form-add-all"
data-testid="nc-form-add-all"
@click="addAllColumns"
>
<!-- Add all -->
{{ $t('general.addAll') }}
</button>
</NcButton>
<button
<NcButton
v-if="localColumns.length"
type="button"
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"
type="secondary"
class="nc-form-remove-all"
data-testid="nc-form-remove-all"
@click="removeAllColumns"
>
<!-- Remove all -->
{{ $t('general.removeAll') }}
</button>
</NcButton>
</div>
</div>
@ -785,15 +785,16 @@ watch(view, (nextView) => {
</Draggable>
<div class="justify-center flex mt-6">
<button
type="submit"
<NcButton
html-type="submit"
type="primary"
:disabled="!isUIAllowed('dataInsert')"
class="uppercase scaling-btn nc-form-submit"
class="nc-form-submit"
data-testid="nc-form-submit"
@click="submitForm"
>
{{ $t('general.submit') }}
</button>
</NcButton>
</div>
</a-card>
</a-form>

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

@ -213,8 +213,6 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
submitted.value = true
progress.value = false
await message.success(sharedFormView.value?.success_msg || 'Saved successfully.')
} catch (e: any) {
console.log(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>
<div class="h-full flex flex-col items-center">
<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">
<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 }}
</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 }}
</h2>
@ -197,14 +200,9 @@ const onDecode = async (scannedCodeValue: string) => {
</div>
<div class="text-center mt-4">
<button
type="submit"
class="uppercase scaling-btn prose-sm"
data-testid="shared-form-submit-button"
@click="submitForm"
>
<NcButton type="primary" html-type="submit" data-testid="shared-form-submit-button" @click="submitForm">
{{ $t('general.submit') }}
</button>
</NcButton>
</div>
</div>
</div>

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

@ -237,14 +237,14 @@ onMounted(() => {
</script>
<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
v-if="sharedFormView"
style="height: max(40vh, 225px); min-height: 225px"
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">
<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 }}
</h1>

Loading…
Cancel
Save