Browse Source

fix: Made rich text modal more inline with design

pull/7046/head
Muhammed Mustafa 12 months ago
parent
commit
3c100a865a
  1. 70
      packages/nc-gui/components/cell/RichText.vue
  2. 14
      packages/nc-gui/components/cell/TextArea.vue
  3. 2
      packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
  4. 4
      packages/nc-gui/components/smartsheet/column/RichLongTextDefaultValue.vue

70
packages/nc-gui/components/cell/RichText.vue

@ -138,26 +138,14 @@ watch(editorDom, () => {
editor.value?.chain().focus().run()
}, 50)
})
const focusEditorEnd = () => {
setTimeout(() => {
if (!editor.value) return
const docSize = editor.value.state.doc.content.size
editor.value
?.chain()
.setTextSelection(docSize - 2)
.focus()
.run()
}, 50)
}
</script>
<template>
<div
class="h-full"
:class="{
'flex flex-col flex-grow': props.fullMode,
'flex flex-col flex-grow nc-rich-text-full': props.fullMode,
'nc-rich-text-embed': !props.fullMode,
}"
>
<div v-if="props.showMenu" class="absolute top-0 right-0.5">
@ -168,12 +156,11 @@ const focusEditorEnd = () => {
<EditorContent
ref="editorDom"
:editor="editor"
class="nc-textarea-rich w-full h-full nc-text-rich-scroll nc-scrollbar-md"
class="flex flex-col nc-textarea-rich w-full flex-grow"
:class="{
'ml-1.5 mt-0.5': props.fullMode,
'ml-1 mt-2.5': props.fullMode,
}"
/>
<div v-if="props.fullMode" class="flex flex-grow" @click="focusEditorEnd"></div>
</div>
</template>
@ -189,9 +176,55 @@ const focusEditorEnd = () => {
}
}
.nc-rich-text-embed {
.ProseMirror {
@apply !border-transparent;
}
}
.nc-rich-text-full {
@apply px-1.75;
.ProseMirror {
@apply pl-1 mt-0.75;
max-height: calc(min(60vh, 100rem));
overflow-y: scroll;
overflow-x: hidden;
scrollbar-width: thin !important;
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
border-radius: 10px;
margin-top: 4px;
margin-bottom: 4px;
}
&::-webkit-scrollbar-track-piece {
width: 0px;
}
&::-webkit-scrollbar {
@apply bg-transparent;
}
&::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
width: 4px;
@apply bg-gray-300;
}
&::-webkit-scrollbar-thumb:hover {
@apply bg-gray-400;
}
}
}
.nc-textarea-rich {
.ProseMirror {
@apply pt-1;
@apply flex flex-col flex-grow pt-1 border-1 border-gray-200 rounded-lg mr-2;
> * {
@apply ml-1;
@ -200,6 +233,7 @@ const focusEditorEnd = () => {
.ProseMirror-focused {
// remove all border
outline: none;
@apply border-brand-500;
}
p {

14
packages/nc-gui/components/cell/TextArea.vue

@ -256,7 +256,7 @@ watch(editEnabled, () => {
>
<div
v-if="column"
class="flex flex-row gap-x-1 items-center font-medium pl-3 pb-2.5 mb-1 border-b-1 border-gray-100 cursor-move"
class="flex flex-row gap-x-1 items-center font-medium pl-3 pb-2.5 border-b-1 border-gray-100 cursor-move"
:class="{
'select-none': isDragging,
}"
@ -282,17 +282,7 @@ watch(editEnabled, () => {
@keydown.escape="isVisible = false"
/>
<LazyCellRichText
v-else-if="isVisible"
v-model:value="vModel"
class="ml-2 nc-scrollbar-md"
:style="{
'max-height': 'calc(min(60vh, 100rem))',
}"
show-menu
full-mode
:read-only="readOnly"
/>
<LazyCellRichText v-else-if="isVisible" v-model:value="vModel" show-menu full-mode :read-only="readOnly" />
</div>
</template>
</NcDropdown>

2
packages/nc-gui/components/smartsheet/column/EditOrAdd.vue

@ -220,7 +220,7 @@ if (props.fromTableExplorer) {
:class="{
'bg-white': !props.fromTableExplorer,
'w-[400px]': !props.embedMode,
'!w-150': isTextArea(formState) && formState.meta.richMode,
'!w-146': isTextArea(formState) && formState.meta.richMode,
'!w-[600px]': formState.uidt === UITypes.Formula && !props.embedMode,
'!w-[500px]': formState.uidt === UITypes.Attachment && !props.embedMode && !appInfo.ee,
'shadow-lg border-1 border-gray-50 shadow-gray-100 rounded-md p-6': !embedMode,

4
packages/nc-gui/components/smartsheet/column/RichLongTextDefaultValue.vue

@ -18,8 +18,8 @@ const cdfValue = computed({
<div>
<div class="!my-3 text-xs">{{ $t('placeholder.defaultValue') }}</div>
<div class="flex flex-row gap-2">
<div class="border-1 relative pt-12 flex items-center w-full px-0 my-[-4px] border-gray-300 rounded-md !max-h-70">
<LazyCellRichText v-model:value="cdfValue" class="ml-3 my-2" show-menu full-mode />
<div class="border-1 relative pt-11 flex items-center w-full px-0 my-[-4px] border-gray-300 rounded-md !max-h-70 !pb-2.5">
<LazyCellRichText v-model:value="cdfValue" class="border-t-1 border-gray-100" show-menu full-mode />
</div>
</div>
</div>

Loading…
Cancel
Save