Browse Source

fix(nc-gui): Wrong chevron Icon in grouping UI

pull/7566/head
Ramesh Mane 10 months ago
parent
commit
f5d409b2b7
  1. 3
      packages/nc-gui/assets/nc-icons/chevron-down.svg
  2. 5
      packages/nc-gui/components/cell/RichText.vue
  3. 18
      packages/nc-gui/components/smartsheet/grid/GroupBy.vue
  4. 2
      packages/nc-gui/utils/iconUtils.ts

3
packages/nc-gui/assets/nc-icons/chevron-down.svg

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 222 B

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

@ -8,7 +8,7 @@ import { generateJSON } from '@tiptap/html'
import Underline from '@tiptap/extension-underline'
import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
import { Link } from '@/helpers/dbTiptapExtensions/links'
import { IsExpandedFormOpenInj, ReadonlyInj, RowHeightInj, IsFormInj } from '#imports'
import { IsExpandedFormOpenInj, IsFormInj, ReadonlyInj, RowHeightInj } from '#imports'
const props = defineProps<{
value?: string | null
@ -201,7 +201,8 @@ watch(editorDom, () => {
'mt-2.5 flex-grow': fullMode,
'nc-scrollbar-md': !fullMode || (!fullMode && isExpandedFormOpen),
'flex-grow': isExpandedFormOpen,
[`!overflow-hidden children:line-clamp-${rowHeight}`]: !fullMode && readOnly && rowHeight && !isExpandedFormOpen && !isForm,
[`!overflow-hidden children:line-clamp-${rowHeight}`]:
!fullMode && readOnly && rowHeight && !isExpandedFormOpen && !isForm,
}"
/>
</div>

18
packages/nc-gui/components/smartsheet/grid/GroupBy.vue

@ -241,20 +241,10 @@ const shouldRenderCell = (column) =>
<div class="flex !sticky left-[15px]">
<div class="flex items-center">
<span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow">
<svg
focusable="false"
data-icon="right"
width="1em"
height="1em"
fill="currentColor"
aria-hidden="true"
viewBox="64 64 896 896"
:style="`${activeGroups.includes(i) ? 'transform: rotate(90deg)' : ''}`"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
></path>
</svg>
<GeneralIcon
icon="chevronDown"
:style="`${activeGroups.includes(i) ? 'transform: rotate(360deg)' : 'transform: rotate(270deg)'}`"
></GeneralIcon>
</span>
</div>
<div class="flex items-center">

2
packages/nc-gui/utils/iconUtils.ts

@ -111,6 +111,7 @@ import NcNotification from '~icons/material-symbols/notifications-outline'
import NcCommentHere from '~icons/nc-icons/comment-here'
import NcAddDataSource from '~icons/nc-icons/add-data-source'
import NcDatabaseIcon from '~icons/nc-icons/database'
import NcChevronDown from '~icons/nc-icons/chevron-down'
// keep it for reference
// todo: remove it after all icons are migrated
@ -462,6 +463,7 @@ export const iconMap = {
commentHere: NcCommentHere,
fileImage: FileImageIcon,
paste: h('span', { class: 'material-symbols' }, 'content_paste'),
chevronDown: NcChevronDown,
}
export const getMdiIcon = (type: string): any => {

Loading…
Cancel
Save