Browse Source

fix: rich text field (long text with rich text option enabled), display expand icon only on hover

pull/7148/head
Ramesh Mane 1 year ago
parent
commit
e8527e01ea
  1. 13
      packages/nc-gui/components/cell/TextArea.vue

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

@ -175,7 +175,7 @@ watch(editEnabled, () => {
:overlay-class-name="isVisible ? 'nc-textarea-dropdown-active' : undefined" :overlay-class-name="isVisible ? 'nc-textarea-dropdown-active' : undefined"
> >
<div <div
class="flex flex-row pt-0.5 w-full" class="flex flex-row pt-0.5 w-full rich-wrapper"
:class="{ :class="{
'min-h-10': rowHeight !== 1, 'min-h-10': rowHeight !== 1,
'min-h-6.5': rowHeight === 1, 'min-h-6.5': rowHeight === 1,
@ -239,7 +239,7 @@ watch(editEnabled, () => {
<NcTooltip <NcTooltip
v-if="!isVisible" v-if="!isVisible"
placement="bottom" placement="bottom"
class="!absolute right-0 bottom-1 !hidden nc-text-area-expand-btn" class="!absolute right-0 bottom-1 nc-text-area-expand-btn"
:class="{ 'right-0 bottom-1': editEnabled, '!bottom-0': !isRichMode }" :class="{ 'right-0 bottom-1': editEnabled, '!bottom-0': !isRichMode }"
> >
<template #title>{{ $t('title.expand') }}</template> <template #title>{{ $t('title.expand') }}</template>
@ -296,8 +296,13 @@ watch(editEnabled, () => {
textarea:focus { textarea:focus {
box-shadow: none; box-shadow: none;
} }
:deep(.nc-text-area-expand-btn) { :deep(.nc-text-area-expand-btn) {
@apply !block; @apply !hidden;
}
.rich-wrapper:hover,
.rich-wrapper:active {
:deep(.nc-text-area-expand-btn) {
@apply !block cursor-pointer;
}
} }
</style> </style>

Loading…
Cancel
Save