Browse Source

Merge pull request #7566 from nocodb/nc-fix/ui-fixes

Nc fic minor UI changes
pull/7577/head
Raju Udava 10 months ago committed by GitHub
parent
commit
5e799eb833
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 4
      packages/nc-gui/assets/nc-icons/arrow-down.svg
  2. 4
      packages/nc-gui/assets/nc-icons/arrow-up.svg
  3. 3
      packages/nc-gui/assets/nc-icons/chevron-down.svg
  4. 11
      packages/nc-gui/assets/nc-icons/copy.svg
  5. 6
      packages/nc-gui/assets/nc-icons/download.svg
  6. 6
      packages/nc-gui/assets/nc-icons/duplicate.svg
  7. 11
      packages/nc-gui/assets/nc-icons/edit.svg
  8. 2
      packages/nc-gui/assets/nc-icons/eye.svg
  9. 4
      packages/nc-gui/assets/nc-icons/paste.svg
  10. 10
      packages/nc-gui/assets/nc-icons/pencil.svg
  11. 4
      packages/nc-gui/assets/nc-icons/rename.svg
  12. 6
      packages/nc-gui/assets/nc-icons/trash.svg
  13. 6
      packages/nc-gui/assets/nc-icons/upload.svg
  14. 4
      packages/nc-gui/assets/nc-icons/user.svg
  15. 7
      packages/nc-gui/components/cell/RichText.vue
  16. 8
      packages/nc-gui/components/cell/TextArea.vue
  17. 7
      packages/nc-gui/components/cell/attachment/Modal.vue
  18. 4
      packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
  19. 2
      packages/nc-gui/components/dashboard/TreeView/TableNode.vue
  20. 2
      packages/nc-gui/components/dlg/TableRename.vue
  21. 2
      packages/nc-gui/components/nc/Pagination.vue
  22. 2
      packages/nc-gui/components/smartsheet/Pagination.vue
  23. 14
      packages/nc-gui/components/smartsheet/details/Fields.vue
  24. 4
      packages/nc-gui/components/smartsheet/details/Webhooks.vue
  25. 18
      packages/nc-gui/components/smartsheet/grid/GroupBy.vue
  26. 8
      packages/nc-gui/components/smartsheet/grid/Table.vue
  27. 2
      packages/nc-gui/components/smartsheet/header/Menu.vue
  28. 2
      packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
  29. 15
      packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
  30. 6
      packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
  31. 2
      packages/nc-gui/components/workspace/ProjectList.vue
  32. 2
      packages/nc-gui/components/workspace/View.vue
  33. 4
      packages/nc-gui/pages/account/index.vue
  34. 36
      packages/nc-gui/utils/iconUtils.ts
  35. 16
      tests/playwright/pages/Dashboard/Grid/index.ts

4
packages/nc-gui/assets/nc-icons/arrow-down.svg

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 3.33337V12.6667" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.6666 8L7.99998 12.6667L3.33331 8" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 367 B

4
packages/nc-gui/assets/nc-icons/arrow-up.svg

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 12.6667V3.33337" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.33331 8.00004L7.99998 3.33337L12.6666 8.00004" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 379 B

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

11
packages/nc-gui/assets/nc-icons/copy.svg

@ -0,0 +1,11 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_184_4881)">
<path d="M13.3333 6H7.33333C6.59695 6 6 6.59695 6 7.33333V13.3333C6 14.0697 6.59695 14.6667 7.33333 14.6667H13.3333C14.0697 14.6667 14.6667 14.0697 14.6667 13.3333V7.33333C14.6667 6.59695 14.0697 6 13.3333 6Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.33334 10H2.66667C2.31305 10 1.97391 9.85956 1.72386 9.60952C1.47381 9.35947 1.33334 9.02033 1.33334 8.66671V2.66671C1.33334 2.31309 1.47381 1.97395 1.72386 1.7239C1.97391 1.47385 2.31305 1.33337 2.66667 1.33337H8.66667C9.02029 1.33337 9.35943 1.47385 9.60948 1.7239C9.85953 1.97395 10 2.31309 10 2.66671V3.33337" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_184_4881">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 970 B

6
packages/nc-gui/assets/nc-icons/download.svg

@ -1,5 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10" stroke="#1F293A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.66675 6.66663L8.00008 9.99996L11.3334 6.66663" stroke="#1F293A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 10V2" stroke="#1F293A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.66675 6.66663L8.00008 9.99996L11.3334 6.66663" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 10V2" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 643 B

After

Width:  |  Height:  |  Size: 658 B

6
packages/nc-gui/assets/nc-icons/duplicate.svg

@ -0,0 +1,6 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.0625 3.75H2.125C1.82663 3.75 1.54048 3.86853 1.3295 4.0795C1.11853 4.29048 1 4.57663 1 4.875V13.875C1 14.1734 1.11853 14.4595 1.3295 14.6705C1.54048 14.8815 1.82663 15 2.125 15H8.875C9.17337 15 9.45952 14.8815 9.67049 14.6705C9.88147 14.4595 10 14.1734 10 13.875V7.6875L6.0625 3.75Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.0625 3.75V7.6875H10" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 3.5V1.875C5 1.57663 5.11853 1.29048 5.3295 1.0795C5.54048 0.868526 5.82663 0.75 6.125 0.75H10.0625L14 4.6875V10.875C14 11.1734 13.8815 11.4595 13.6705 11.6705C13.4595 11.8815 13.1734 12 12.875 12H10.0625" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.0625 0.75V4.6875H14" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

11
packages/nc-gui/assets/nc-icons/edit.svg

@ -0,0 +1,11 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_184_5634)">
<path d="M7.33331 2.66663H2.66665C2.31302 2.66663 1.97389 2.8071 1.72384 3.05715C1.47379 3.3072 1.33331 3.64634 1.33331 3.99996V13.3333C1.33331 13.6869 1.47379 14.0261 1.72384 14.2761C1.97389 14.5262 2.31302 14.6666 2.66665 14.6666H12C12.3536 14.6666 12.6927 14.5262 12.9428 14.2761C13.1928 14.0261 13.3333 13.6869 13.3333 13.3333V8.66663" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.3333 1.66665C12.5985 1.40144 12.9582 1.25244 13.3333 1.25244C13.7084 1.25244 14.0681 1.40144 14.3333 1.66665C14.5985 1.93187 14.7475 2.29158 14.7475 2.66665C14.7475 3.04173 14.5985 3.40144 14.3333 3.66665L7.99998 9.99999L5.33331 10.6667L5.99998 7.99999L12.3333 1.66665Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_184_5634">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

2
packages/nc-gui/assets/nc-icons/eye.svg

@ -1,4 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.666504 8.00033C0.666504 8.00033 3.33317 2.66699 7.99984 2.66699C12.6665 2.66699 15.3332 8.00033 15.3332 8.00033C15.3332 8.00033 12.6665 13.3337 7.99984 13.3337C3.33317 13.3337 0.666504 8.00033 0.666504 8.00033Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M0.666656 7.99996C0.666656 7.99996 3.33332 2.66663 7.99999 2.66663C12.6667 2.66663 15.3333 7.99996 15.3333 7.99996C15.3333 7.99996 12.6667 13.3333 7.99999 13.3333C3.33332 13.3333 0.666656 7.99996 0.666656 7.99996Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 634 B

After

Width:  |  Height:  |  Size: 634 B

4
packages/nc-gui/assets/nc-icons/paste.svg

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.6667 2.66663H12C12.3536 2.66663 12.6928 2.8071 12.9428 3.05715C13.1928 3.3072 13.3333 3.64634 13.3333 3.99996V13.3333C13.3333 13.6869 13.1928 14.0261 12.9428 14.2761C12.6928 14.5262 12.3536 14.6666 12 14.6666H3.99999C3.64637 14.6666 3.30723 14.5262 3.05718 14.2761C2.80713 14.0261 2.66666 13.6869 2.66666 13.3333V3.99996C2.66666 3.64634 2.80713 3.3072 3.05718 3.05715C3.30723 2.8071 3.64637 2.66663 3.99999 2.66663H5.33332" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 1.33337H6.00001C5.63182 1.33337 5.33334 1.63185 5.33334 2.00004V3.33337C5.33334 3.70156 5.63182 4.00004 6.00001 4.00004H10C10.3682 4.00004 10.6667 3.70156 10.6667 3.33337V2.00004C10.6667 1.63185 10.3682 1.33337 10 1.33337Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 965 B

10
packages/nc-gui/assets/nc-icons/pencil.svg

@ -0,0 +1,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_184_4900)">
<path d="M11.3333 2.00004C11.5084 1.82494 11.7163 1.68605 11.9451 1.59129C12.1738 1.49653 12.419 1.44775 12.6667 1.44775C12.9143 1.44775 13.1595 1.49653 13.3883 1.59129C13.617 1.68605 13.8249 1.82494 14 2.00004C14.1751 2.17513 14.314 2.383 14.4088 2.61178C14.5035 2.84055 14.5523 3.08575 14.5523 3.33337C14.5523 3.58099 14.5035 3.82619 14.4088 4.05497C14.314 4.28374 14.1751 4.49161 14 4.66671L5 13.6667L1.33333 14.6667L2.33333 11L11.3333 2.00004Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_184_4900">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 790 B

4
packages/nc-gui/assets/nc-icons/rename.svg

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 13.3334H14" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11 2.33328C11.2652 2.06806 11.6249 1.91907 12 1.91907C12.1857 1.91907 12.3696 1.95565 12.5412 2.02672C12.7128 2.09779 12.8687 2.20196 13 2.33328C13.1313 2.4646 13.2355 2.6205 13.3066 2.79208C13.3776 2.96367 13.4142 3.14756 13.4142 3.33328C13.4142 3.519 13.3776 3.7029 13.3066 3.87448C13.2355 4.04606 13.1313 4.20196 13 4.33328L4.66667 12.6666L2 13.3333L2.66667 10.6666L11 2.33328Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 707 B

6
packages/nc-gui/assets/nc-icons/trash.svg

@ -0,0 +1,6 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 4H3.33333H14" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.33333 4.00004V2.66671C5.33333 2.31309 5.4738 1.97395 5.72385 1.7239C5.9739 1.47385 6.31304 1.33337 6.66666 1.33337H9.33333C9.68695 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M12.6667 4.00004V13.3334C12.6667 13.687 12.5262 14.0261 12.2761 14.2762C12.0261 14.5262 11.6869 14.6667 11.3333 14.6667H4.66666C4.31304 14.6667 3.9739 14.5262 3.72385 14.2762C3.4738 14.0261 3.33333 13.687 3.33333 13.3334V4.00004H12.6667Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.33333 7.33337V11.3334" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.66667 7.33337V11.3334" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

6
packages/nc-gui/assets/nc-icons/upload.svg

@ -1,5 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10" stroke="#1F293A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.3334 5.33333L8.00008 2L4.66675 5.33333" stroke="#1F293A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 2V10" stroke="#4A5268" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.3333 5.33333L8 2L4.66667 5.33333" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 2V10" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 637 B

After

Width:  |  Height:  |  Size: 646 B

4
packages/nc-gui/assets/nc-icons/user.svg

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3334 14V12.6667C13.3334 11.9594 13.0524 11.2811 12.5523 10.781C12.0522 10.281 11.3739 10 10.6667 10H5.33335C4.62611 10 3.94783 10.281 3.44774 10.781C2.94764 11.2811 2.66669 11.9594 2.66669 12.6667V14" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.99998 7.33333C9.47274 7.33333 10.6666 6.13943 10.6666 4.66667C10.6666 3.19391 9.47274 2 7.99998 2C6.52722 2 5.33331 3.19391 5.33331 4.66667C5.33331 6.13943 6.52722 7.33333 7.99998 7.33333Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 707 B

7
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 } from '#imports'
import { IsExpandedFormOpenInj, IsFormInj, ReadonlyInj, RowHeightInj } from '#imports'
const props = defineProps<{
value?: string | null
@ -26,6 +26,8 @@ const rowHeight = inject(RowHeightInj, ref(1 as const))
const readOnlyCell = inject(ReadonlyInj, ref(false))
const isForm = inject(IsFormInj, ref(false))
const turndownService = new TurndownService({})
turndownService.addRule('lineBreak', {
@ -199,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,
[`!overflow-hidden children:line-clamp-${rowHeight}`]:
!fullMode && readOnly && rowHeight && !isExpandedFormOpen && !isForm,
}"
/>
</div>

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

@ -207,15 +207,15 @@ watch(inputWrapperRef, () => {
:class="{
'min-h-10': rowHeight !== 1 || isExpandedFormOpen,
'min-h-9': rowHeight === 1 && !isExpandedFormOpen,
'h-full': isForm,
'h-full w-full': isForm,
}"
>
<div
v-if="isRichMode"
class="w-full cursor-pointer nc-readonly-rich-text-wrapper"
:style="{
maxHeight: isExpandedFormOpen ? `${height}px` : `${25 * (rowHeight || 1)}px`,
minHeight: isExpandedFormOpen ? `${height}px` : `${25 * (rowHeight || 1)}px`,
maxHeight: isForm ? undefined : isExpandedFormOpen ? `${height}px` : `${25 * (rowHeight || 1)}px`,
minHeight: isForm ? undefined : isExpandedFormOpen ? `${height}px` : `${25 * (rowHeight || 1)}px`,
}"
@dblclick="onExpand"
@keydown.enter="onExpand"
@ -271,7 +271,7 @@ watch(inputWrapperRef, () => {
v-if="!isVisible"
placement="bottom"
class="!absolute right-0 hidden nc-text-area-expand-btn group-hover:block z-3"
:class="isExpandedFormOpen || isForm || isRichMode ? 'top-1' : 'bottom-1'"
:class="isExpandedFormOpen || isForm ? 'top-1' : 'bottom-1'"
>
<template #title>{{ $t('title.expand') }}</template>
<NcButton type="secondary" size="xsmall" data-testid="attachment-cell-file-picker-button" @click.stop="onExpand">

7
packages/nc-gui/components/cell/attachment/Modal.vue

@ -158,8 +158,8 @@ const handleFileDelete = (i: number) => {
<a-tooltip v-if="isSharedForm || (!readOnly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
<template #title> {{ $t('title.renameFile') }} </template>
<div class="nc-attachment-download group-hover:(opacity-100) mr-[35px]">
<component :is="iconMap.edit" @click.stop="renameFile(item, i)" />
<div class="nc-attachment-rename group-hover:(opacity-100) mr-[35px]">
<component :is="iconMap.rename" @click.stop="renameFile(item, i)" />
</div>
</a-tooltip>
@ -249,7 +249,8 @@ const handleFileDelete = (i: number) => {
}
}
.nc-attachment-download {
.nc-attachment-download,
.nc-attachment-rename {
@apply bg-white absolute bottom-2 right-2;
@apply transition-opacity duration-150 ease-in opacity-0 hover:ring;
@apply cursor-pointer rounded shadow flex items-center p-1 border-1;

4
packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@ -463,7 +463,7 @@ const projectDelete = () => {
<template v-if="!isSharedBase">
<NcMenuItem v-if="isUIAllowed('baseRename')" data-testid="nc-sidebar-project-rename" @click="enableEditMode">
<div v-e="['c:base:rename']" class="flex gap-2 items-center">
<GeneralIcon icon="edit" class="group-hover:text-black" />
<GeneralIcon icon="rename" class="group-hover:text-black" />
{{ $t('general.rename') }}
</div>
</NcMenuItem>
@ -717,7 +717,7 @@ const projectDelete = () => {
<template v-else-if="contextMenuTarget.type === 'table'">
<NcMenuItem v-if="isUIAllowed('tableRename')" @click="openRenameTableDialog(contextMenuTarget.value, true)">
<div v-e="['c:table:rename']" class="nc-base-option-item flex gap-2 items-center">
<GeneralIcon icon="edit" class="text-gray-700" />
<GeneralIcon icon="rename" class="text-gray-700" />
{{ $t('general.rename') }}
</div>
</NcMenuItem>

2
packages/nc-gui/components/dashboard/TreeView/TableNode.vue

@ -268,7 +268,7 @@ const isTableOpened = computed(() => {
@click="openRenameTableDialog(table, base.sources[sourceIndex].id)"
>
<div v-e="['c:table:rename']" class="flex gap-2 items-center">
<GeneralIcon icon="edit" class="text-gray-700" />
<GeneralIcon icon="rename" class="text-gray-700" />
{{ $t('general.rename') }}
</div>
</NcMenuItem>

2
packages/nc-gui/components/dlg/TableRename.vue

@ -193,7 +193,7 @@ const renameTable = async (undo = false, disableTitleDiffCheck?: boolean | undef
<NcModal v-model:visible="dialogShow" size="small">
<template #header>
<div class="flex flex-row items-center gap-x-2">
<GeneralIcon icon="table" />
<GeneralIcon icon="rename" />
{{ $t('activity.renameTable') }}
</div>
</template>

2
packages/nc-gui/components/nc/Pagination.vue

@ -56,7 +56,7 @@ const pagesList = computed(() => {
</script>
<template>
<div class="nc-pagination flex flex-row items-center gap-x-2">
<div v-if="totalPages > 1" class="nc-pagination flex flex-row items-center gap-x-2">
<component :is="props.firstPageTooltip && mode === 'full' ? NcTooltip : 'div'" v-if="mode === 'full'">
<template v-if="props.firstPageTooltip" #title>
{{ props.firstPageTooltip }}

2
packages/nc-gui/components/smartsheet/Pagination.vue

@ -100,7 +100,7 @@ const renderAltOrOptlKey = () => {
'ml-8': alignLeft,
}"
>
<div v-if="isViewDataLoading" class="flex flex-row justify-center item-center min-h-10 min-w-42">
<div v-if="isViewDataLoading" class="nc-pagination-skeleton flex flex-row justify-center item-center min-h-10 min-w-42">
<a-skeleton :active="true" :title="true" :paragraph="false" class="-mt-1 max-w-60" />
</div>
<NcPagination

14
packages/nc-gui/components/smartsheet/details/Fields.vue

@ -5,7 +5,6 @@ import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
import Draggable from 'vuedraggable'
import { onKeyDown, useMagicKeys } from '@vueuse/core'
import type { ColumnType, SelectOptionsType } from 'nocodb-sdk'
import { Icon } from '@iconify/vue'
import { type Field, getUniqueColumnName, ref, useSmartsheetStoreOrThrow } from '#imports'
interface TableExplorerColumn extends ColumnType {
@ -1054,7 +1053,8 @@ watch(
data-testid="nc-field-item-action-duplicate"
@click="duplicateField(field)"
>
<Icon class="iconify text-gray-800" icon="lucide:copy" /><span>{{ $t('general.duplicate') }}</span>
<GeneralIcon icon="duplicate" class="text-gray-800" />
<span>{{ $t('general.duplicate') }}</span>
</NcMenuItem>
<NcMenuItem
v-if="!field.pv"
@ -1062,18 +1062,16 @@ watch(
data-testid="nc-field-item-action-insert-above"
@click="addField(field, true)"
>
<Icon class="iconify text-gray-800" icon="lucide:arrow-up" /><span>{{
$t('general.insertAbove')
}}</span>
<GeneralIcon icon="ncArrowUp" class="text-gray-800" />
<span>{{ $t('general.insertAbove') }}</span>
</NcMenuItem>
<NcMenuItem
key="table-explorer-insert-below"
data-testid="nc-field-item-action-insert-below"
@click="addField(field)"
>
<Icon class="iconify text-gray-800" icon="lucide:arrow-down" /><span>{{
$t('general.insertBelow')
}}</span>
<GeneralIcon icon="ncArrowDown" class="text-gray-800" />
<span>{{ $t('general.insertBelow') }}</span>
</NcMenuItem>
<a-menu-divider class="my-1.5" />

4
packages/nc-gui/components/smartsheet/details/Webhooks.vue

@ -265,7 +265,9 @@ watch(
@click="copyWebhook(hook)"
>
<template #loading> {{ $t('general.duplicating') }} </template>
<div class="flex items-center gap-x-1"><GeneralIcon icon="copy" /> {{ $t('general.duplicate') }}</div>
<div class="flex items-center gap-x-1">
<GeneralIcon icon="duplicate"></GeneralIcon> {{ $t('general.duplicate') }}
</div>
</NcButton>
<NcButton type="text" class="w-full !rounded-md !px-2" :centered="false" @click="openDeleteModal(hook.id!)">
<div class="flex items-center justify-start gap-x-1 !text-red-500">

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">

8
packages/nc-gui/components/smartsheet/grid/Table.vue

@ -1712,7 +1712,7 @@ onKeyStroke('ArrowDown', onDown)
@click="emits('bulkUpdateDlg')"
>
<div v-e="['a:row:update-bulk']" class="flex gap-2 items-center">
<component :is="iconMap.edit" />
<component :is="iconMap.ncEdit" />
{{ $t('title.updateSelectedRows') }}
</div>
</NcMenuItem>
@ -1893,11 +1893,11 @@ onKeyStroke('ArrowDown', onDown)
<template #overlay>
<div class="relative overflow-visible min-h-17 w-10">
<div
class="absolute -top-19 flex flex-col min-h-34.5 w-70 p-1.5 bg-white rounded-lg border-1 border-gray-200 justify-start overflow-hidden"
class="absolute -top-21 flex flex-col min-h-34.5 w-70 p-1.5 bg-white rounded-lg border-1 border-gray-200 justify-start overflow-hidden"
style="box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.06), 0px -12px 16px -4px rgba(0, 0, 0, 0.1)"
:class="{
'-left-44': !isAddNewRecordGridMode,
'-left-32': isAddNewRecordGridMode,
'-left-32.5': !isAddNewRecordGridMode,
'-left-21.5': isAddNewRecordGridMode,
}"
>
<div

2
packages/nc-gui/components/smartsheet/header/Menu.vue

@ -313,7 +313,7 @@ const isDuplicateAllowed = computed(() => {
<NcMenu class="flex flex-col gap-1 border-gray-200 nc-column-options">
<NcMenuItem @click="onEditPress">
<div class="nc-column-edit nc-header-menu-item">
<component :is="iconMap.edit" class="text-gray-700" />
<component :is="iconMap.ncEdit" class="text-gray-700" />
<!-- Edit -->
{{ $t('general.edit') }}
</div>

2
packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue

@ -242,7 +242,7 @@ watch(rightSidebarState, () => {
<template #overlay>
<NcMenu :data-testid="`view-sidebar-view-actions-${vModel.alias || vModel.title}`">
<NcMenuItem size="small" :centered="false" @click.stop="onDblClick">
<GeneralIcon icon="edit" />
<GeneralIcon icon="rename" />
Rename
</NcMenuItem>
<NcMenuItem size="small" :centered="false" class="nc-view-copy-icon" @click.stop="onDuplicate">

15
packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue

@ -3,9 +3,6 @@ import type { TableType, ViewType } from 'nocodb-sdk'
import { ViewTypes } from 'nocodb-sdk'
import { LockType } from '~/lib'
import UploadIcon from '~icons/nc-icons/upload'
import DownloadIcon from '~icons/nc-icons/download'
const props = defineProps<{
view: ViewType
table: TableType
@ -167,13 +164,13 @@ const onDelete = async () => {
<NcDivider />
<template v-if="!view?.is_default">
<NcMenuItem v-if="lockType !== LockType.Locked" @click="onRenameMenuClick">
<GeneralIcon icon="edit" />
<GeneralIcon icon="rename" />
{{ $t('activity.renameView') }}
</NcMenuItem>
<NcTooltip v-else>
<template #title> {{ $t('msg.info.disabledAsViewLocked') }} </template>
<NcMenuItem class="!cursor-not-allowed !text-gray-400">
<GeneralIcon icon="edit" />
<GeneralIcon icon="rename" />
{{ $t('activity.renameView') }}
</NcMenuItem>
</NcTooltip>
@ -181,10 +178,10 @@ const onDelete = async () => {
<GeneralIcon icon="duplicate" class="nc-view-copy-icon" />
{{ $t('labels.duplicateView') }}
</NcMenuItem>
<NcDivider />
</template>
<template v-if="view.type !== ViewTypes.FORM">
<NcDivider />
<template v-if="isUIAllowed('csvTableImport') && !isPublicView">
<NcSubMenu key="upload">
<template #title>
@ -197,7 +194,7 @@ const onDelete = async () => {
]"
class="nc-base-menu-item group"
>
<UploadIcon class="w-4 h-4" />
<GeneralIcon icon="upload" />
{{ $t('general.upload') }}
</div>
</template>
@ -217,7 +214,7 @@ const onDelete = async () => {
class="nc-base-menu-item"
:class="{ disabled: lockType === LockType.Locked }"
>
<component :is="iconMap.upload" />
<component :is="iconMap.cloudUpload" />
{{ `${$t('general.upload')} ${type.toUpperCase()}` }}
</div>
</NcMenuItem>
@ -235,7 +232,7 @@ const onDelete = async () => {
]"
class="nc-base-menu-item group nc-view-context-download-option"
>
<DownloadIcon class="w-4 h-4" />
<GeneralIcon icon="download" />
{{ $t('general.download') }}
</div>
</template>

6
packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue

@ -1,7 +1,5 @@
<script lang="ts" setup>
import type { Ref } from '@vue/reactivity'
import UploadIcon from '~icons/nc-icons/upload'
import DownloadIcon from '~icons/nc-icons/download'
import {
ActiveViewInj,
IsLockedInj,
@ -120,7 +118,7 @@ useMenuCloseOnEsc(open)
<a-sub-menu key="upload">
<template #title>
<div v-e="['c:navdraw:preview-as']" class="nc-base-menu-item group">
<UploadIcon class="w-4 h-4" />
<GeneralIcon type="upload" />
{{ $t('general.upload') }}
<div class="flex-1" />
@ -147,7 +145,7 @@ useMenuCloseOnEsc(open)
<a-sub-menu key="download">
<template #title>
<div v-e="['c:download']" class="nc-base-menu-item group">
<DownloadIcon class="w-4 h-4" />
<GeneralIcon icon="download" />
{{ $t('general.download') }}
<div class="flex-1" />

2
packages/nc-gui/components/workspace/ProjectList.vue

@ -339,7 +339,7 @@ const setIcon = async (icon: string, base: BaseType) => {
<a-menu>
<a-menu-item @click="enableEdit(i)">
<div class="nc-menu-item-wrapper">
<GeneralIcon icon="edit" class="text-gray-700" />
<GeneralIcon icon="rename" class="text-gray-700" />
{{ $t('general.rename') }} {{ $t('objects.project') }}
</div>
</a-menu-item>

2
packages/nc-gui/components/workspace/View.vue

@ -61,7 +61,7 @@ onMounted(() => {
<a-tab-pane key="collaborators" class="w-full">
<template #tab>
<div class="flex flex-row items-center px-2 pb-1 gap-x-1.5">
<PhUsersBold />
<GeneralIcon icon="users" class="!h-3.5 !w-3.5" />
Members
</div>
</template>

4
packages/nc-gui/pages/account/index.vue

@ -65,7 +65,7 @@ const logout = async () => {
@click="navigateTo('/account/profile')"
>
<div class="flex items-center space-x-2">
<GeneralIcon icon="account" />
<GeneralIcon icon="user" class="!h-3.5 !w-3.5" />
<div class="select-none">{{ $t('labels.profile') }}</div>
</div>
@ -102,7 +102,7 @@ const logout = async () => {
</NcMenuItem>
<a-sub-menu key="users" class="!bg-white !my-0">
<template #icon>
<MdiAccountSupervisorOutline />
<GeneralIcon icon="users" class="!h-3.5 !w-3.5" />
</template>
<template #title>{{ $t('objects.users') }}</template>

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

@ -21,17 +21,14 @@ import TablerColumnInsertRight from '~icons/tabler/column-insert-right'
import MdiEyeCircleOutline from '~icons/mdi/eye-circle-outline'
import MsGroup from '~icons/material-symbols/groups-outline-rounded'
import MsAddBoxOutline from '~icons/nc-icons/add-box'
import MsDownloadRounded from '~icons/nc-icons/download'
import LogosAirtable from '~icons/logos/airtable'
import MsSort from '~icons/material-symbols/sort'
import MaterialSymbolsEdit from '~icons/material-symbols/edit-outline-rounded'
import MaterialDuplicate from '~icons/material-symbols/file-copy-outline-rounded'
import MaterialSymbolsWarningOutlineRounded from '~icons/material-symbols/warning-outline-rounded'
import MaterialSymbolsDragIndicator from '~icons/ri/draggable'
import PlusSquare from '~icons/nc-icons/plus-square'
import MobileShare from '~icons/nc-icons/share'
import PhLayout from '~icons/ph/layout'
import Delete from '~icons/material-symbols/delete-outline-rounded'
import Minus from '~icons/material-symbols/remove-rounded'
import Code from '~icons/material-symbols/code-rounded'
import Palette from '~icons/material-symbols/palette-outline'
@ -99,6 +96,7 @@ import NcUnStar from '~icons/nc-icons/star-remove'
import NcSearch from '~icons/nc-icons/search'
import NcCreditCard from '~icons/nc-icons/credit-card'
import NcLayers from '~icons/nc-icons/layers'
import NcUser from '~icons/nc-icons/user'
import NcUsers from '~icons/nc-icons/users'
import NcCheck from '~icons/nc-icons/check'
import NcIconsRowHeightMedium from '~icons/nc-icons/row-height-medium'
@ -110,6 +108,18 @@ 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'
import NcTrash from '~icons/nc-icons/trash'
import NcPencil from '~icons/nc-icons/pencil'
import NcRename from '~icons/nc-icons/rename'
import NcDuplicate from '~icons/nc-icons/duplicate'
import NcEdit from '~icons/nc-icons/edit'
import NcCopy from '~icons/nc-icons/copy'
import NcPaste from '~icons/nc-icons/paste'
import NcArrowUp from '~icons/nc-icons/arrow-up'
import NcArrowDown from '~icons/nc-icons/arrow-down'
import NcUpload from '~icons/nc-icons/upload'
import NcDownload from '~icons/nc-icons/download'
// keep it for reference
// todo: remove it after all icons are migrated
@ -327,18 +337,20 @@ export const iconMap = {
accountCircle: h('span', { class: 'material-symbols' }, 'account_circle'),
phUser: PhUser,
phUsers: PhUsers,
user: NcUser,
users: NcUsers,
cloudDownload: h('span', { class: 'material-symbols' }, 'cloud_download'),
download: MsDownloadRounded,
upload: h('span', { class: 'material-symbols' }, 'cloud_upload'),
download: NcDownload,
cloudUpload: h('span', { class: 'material-symbols' }, 'cloud_upload'),
upload: NcUpload,
hook: Phishing,
erd: h('span', { class: 'material-symbols' }, 'account_tree'),
plus: h('span', { class: 'material-symbols', style: '-webkit-text-stroke: 0.3px' }, 'add'),
plusSquare: PlusSquare,
minus: Minus,
help: h('span', { class: 'material-symbols' }, 'help'),
copy: h('span', { class: 'material-symbols' }, 'content_copy'),
duplicate: MaterialDuplicate,
copy: NcCopy,
duplicate: NcDuplicate,
clipboard: h('span', { class: 'material-symbols' }, 'content_paste'),
settings: h('span', { class: 'material-symbols' }, 'settings'),
image: h('span', { class: 'material-symbols' }, 'image'),
@ -361,7 +373,7 @@ export const iconMap = {
csv: PhCsvThin, // h('span', { class: 'material-symbols' }, 'grid_on'),
code: Code,
palette: h(Palette, {}, () => 'palette'),
delete: Delete,
delete: NcTrash,
deleteListItem: h('span', { class: 'material-symbols' }, 'delete'),
import: h('span', { class: 'material-symbols' }, 'system_update_alt'),
edit: MaterialSymbolsEdit,
@ -459,7 +471,13 @@ export const iconMap = {
role_no_access: NoAccess,
commentHere: NcCommentHere,
fileImage: FileImageIcon,
paste: h('span', { class: 'material-symbols' }, 'content_paste'),
paste: NcPaste,
chevronDown: NcChevronDown,
pencil: NcPencil,
rename: NcRename,
ncEdit: NcEdit,
ncArrowUp: NcArrowUp,
ncArrowDown: NcArrowDown,
}
export const getMdiIcon = (type: string): any => {

16
tests/playwright/pages/Dashboard/Grid/index.ts

@ -302,12 +302,12 @@ export class GridPage extends BasePage {
async verifyTotalRowCount({ count }: { count: number }) {
// wait for 100 ms and try again : 5 times
let i = 0;
await this.get().locator(`.nc-pagination`).waitFor();
await this.get().locator(`.nc-pagination-skeleton`).waitFor({ state: 'hidden' });
let records = await this.get().locator(`[data-testid="grid-pagination"]`).allInnerTexts();
let recordCnt = records[0].split(' ')[0];
while (parseInt(recordCnt) !== count && i < 5) {
await this.get().locator(`.nc-pagination`).waitFor();
await this.get().locator(`.nc-pagination-skeleton`).waitFor({ state: 'hidden' });
records = await this.get().locator(`[data-testid="grid-pagination"]`).allInnerTexts();
recordCnt = records[0].split(' ')[0];
@ -319,6 +319,11 @@ export class GridPage extends BasePage {
}
async verifyPaginationCount({ count }: { count: string }) {
if (await this.get().locator('.nc-pagination').isHidden()) {
expect(1).toBe(+count);
return;
}
await expect(this.get().locator(`.nc-pagination .total`)).toHaveText(count);
}
@ -329,6 +334,8 @@ export class GridPage extends BasePage {
type: 'first-page' | 'last-page' | 'next-page' | 'prev-page';
skipWait?: boolean;
}) {
if (await this.get().locator('.nc-pagination').isHidden()) return;
if (!skipWait) {
await this.get().locator(`.nc-pagination .${type}`).click();
await this.waitLoading();
@ -345,6 +352,11 @@ export class GridPage extends BasePage {
}
async verifyActivePage({ pageNumber }: { pageNumber: string }) {
if (await this.get().locator('.nc-pagination').isHidden()) {
expect(1).toBe(+pageNumber);
return;
}
await expect(this.get().locator(`.nc-pagination .ant-select-selection-item`)).toHaveText(pageNumber);
}

Loading…
Cancel
Save