Browse Source

fix: Improved rich checkbox style and expand btn style

pull/7046/head
Muhammed Mustafa 10 months ago
parent
commit
d3b0e1462b
  1. 23
      packages/nc-gui/components/cell/RichText.vue
  2. 23
      packages/nc-gui/components/cell/TextArea.vue

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

@ -172,6 +172,9 @@ const focusEditorEnd = () => {
} }
.nc-textarea-rich { .nc-textarea-rich {
.ProseMirror {
@apply pt-1;
}
.ProseMirror-focused { .ProseMirror-focused {
// remove all border // remove all border
outline: none; outline: none;
@ -195,11 +198,27 @@ const focusEditorEnd = () => {
} }
} }
ul,
ol {
@apply !my-0;
}
ul[data-type='taskList'] { ul[data-type='taskList'] {
@apply ml-0; @apply ml-1;
li { li {
@apply flex flex-row items-baseline gap-x-2; @apply flex flex-row gap-x-2;
list-style-type: none; list-style-type: none;
input {
@apply mt-0.75 flex rounded-sm;
z-index: -10;
}
// Unchecked
input:not(:checked) {
// Add border to checkbox
border-width: 1.5px;
@apply border-gray-700;
}
} }
} }

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

@ -155,22 +155,24 @@ watch(editEnabled, () => {
<span v-else>{{ vModel }}</span> <span v-else>{{ vModel }}</span>
<div <NcTooltip
v-if="active && !isExpandedFormOpen" v-if="active && !isExpandedFormOpen"
class="!absolute right-0 bottom-0 h-6 w-5 group cursor-pointer flex justify-end gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-none p-1 hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)" placement="bottom"
class="!absolute right-0 bottom-1"
:class="{ 'right-2 bottom-2': editEnabled }" :class="{ 'right-2 bottom-2': editEnabled }"
>
<template #title>{{ $t('title.expand') }}</template>
<NcButton
type="secondary"
size="xsmall"
data-testid="attachment-cell-file-picker-button" data-testid="attachment-cell-file-picker-button"
@click.stop="isVisible = !isVisible" @click.stop="isVisible = !isVisible"
> >
<NcTooltip placement="bottom"> <component :is="iconMap.expand" class="transform group-hover:(!text-grey-800 ) scale-120 text-gray-700 text-xs" />
<template #title>{{ $t('title.expand') }}</template> </NcButton>
<component
:is="iconMap.expand"
class="transform dark:(!text-white) group-hover:(!text-grey-800 ) scale-120 text-gray-700 text-xs"
/>
</NcTooltip> </NcTooltip>
</div> </div>
</div>
<template #overlay> <template #overlay>
<div ref="inputWrapperRef" class="flex flex-col min-w-200 min-h-70 py-3 pl-3 pr-1 expanded-cell-input relative"> <div ref="inputWrapperRef" class="flex flex-col min-w-200 min-h-70 py-3 pl-3 pr-1 expanded-cell-input relative">
<div <div
@ -198,8 +200,7 @@ watch(editEnabled, () => {
/> />
<LazyCellRichText <LazyCellRichText
v-else v-else-if="isVisible"
:key="String(isVisible)"
v-model:value="vModel" v-model:value="vModel"
class="ml-2 mt-2 nc-scrollbar-md" class="ml-2 mt-2 nc-scrollbar-md"
:style="{ :style="{

Loading…
Cancel
Save