Browse Source

fix: table design

pull/6496/head
sreehari jayaraj 12 months ago
parent
commit
5d0c4b0f90
  1. 2
      packages/nc-gui/assets/nc-icons/commentor.svg
  2. 2
      packages/nc-gui/assets/nc-icons/editor.svg
  3. 2
      packages/nc-gui/assets/nc-icons/viewer.svg
  4. 38
      packages/nc-gui/components/project/AccessSettings.vue

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

@ -3,7 +3,7 @@
<rect width="16" height="16" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_22_1091)">
<path d="M8 14.2V8.99998C8 8.81109 8.06389 8.65276 8.19167 8.52498C8.31944 8.3972 8.47778 8.33331 8.66667 8.33331H13.3333C13.5222 8.33331 13.6806 8.3972 13.8083 8.52498C13.9361 8.65276 14 8.81109 14 8.99998V12.3333C14 12.5222 13.9361 12.6805 13.8083 12.8083C13.6806 12.9361 13.5222 13 13.3333 13H10L8.56667 14.4333C8.45556 14.5444 8.33333 14.5722 8.2 14.5166C8.06667 14.4611 8 14.3555 8 14.2ZM9.33333 11.6666H12.6667V9.66665H9.33333V11.6666Z" fill="#1C1B1F"/>
<path d="M8 14.2V8.99998C8 8.81109 8.06389 8.65276 8.19167 8.52498C8.31944 8.3972 8.47778 8.33331 8.66667 8.33331H13.3333C13.5222 8.33331 13.6806 8.3972 13.8083 8.52498C13.9361 8.65276 14 8.81109 14 8.99998V12.3333C14 12.5222 13.9361 12.6805 13.8083 12.8083C13.6806 12.9361 13.5222 13 13.3333 13H10L8.56667 14.4333C8.45556 14.5444 8.33333 14.5722 8.2 14.5166C8.06667 14.4611 8 14.3555 8 14.2ZM9.33333 11.6666H12.6667V9.66665H9.33333V11.6666Z" fill="currentColor" stroke="none"/>
<path d="M7.33333 7.33333C6.6 7.33333 5.97222 7.07222 5.45 6.55C4.92778 6.02778 4.66667 5.4 4.66667 4.66667C4.66667 3.93333 4.92778 3.30556 5.45 2.78333C5.97222 2.26111 6.6 2 7.33333 2C8.06667 2 8.69444 2.26111 9.21667 2.78333C9.73889 3.30556 10 3.93333 10 4.66667C10 5.4 9.73889 6.02778 9.21667 6.55C8.69444 7.07222 8.06667 7.33333 7.33333 7.33333ZM7.33333 6C7.7 6 8.01389 5.86944 8.275 5.60833C8.53611 5.34722 8.66667 5.03333 8.66667 4.66667C8.66667 4.3 8.53611 3.98611 8.275 3.725C8.01389 3.46389 7.7 3.33333 7.33333 3.33333C6.96667 3.33333 6.65278 3.46389 6.39167 3.725C6.13056 3.98611 6 4.3 6 4.66667C6 5.03333 6.13056 5.34722 6.39167 5.60833C6.65278 5.86944 6.96667 6 7.33333 6ZM2 11.3333V10.8167C2 10.4389 2.09444 10.0889 2.28333 9.76667C2.47222 9.44445 2.73333 9.2 3.06667 9.03333C3.63333 8.74444 4.27222 8.5 4.98333 8.3C5.69444 8.1 6.13333 8 7 8C7 8.33331 7 8.83331 7 9.33331C6.33333 9.38887 5.52222 9.51944 5 9.69167C4.47778 9.86389 4.03889 10.0444 3.68333 10.2333C3.57222 10.2889 3.48611 10.3694 3.425 10.475C3.36389 10.5806 3.33333 10.6944 3.33333 10.8167V11.3333H6.78333V12.6132L3.33333 12.6667C2.96667 12.6667 2.65278 12.5361 2.39167 12.275C2.13056 12.0139 2 11.7 2 11.3333Z" fill="currentColor" stroke="none"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

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

@ -4,6 +4,6 @@
</mask>
<g mask="url(#mask0_21_1063)">
<path d="M7.33333 8.00002C6.6 8.00002 5.97222 7.73891 5.45 7.21669C4.92778 6.69447 4.66667 6.06669 4.66667 5.33335C4.66667 4.60002 4.92778 3.97224 5.45 3.45002C5.97222 2.9278 6.6 2.66669 7.33333 2.66669C8.06667 2.66669 8.69444 2.9278 9.21667 3.45002C9.73889 3.97224 10 4.60002 10 5.33335C10 6.06669 9.73889 6.69447 9.21667 7.21669C8.69444 7.73891 8.06667 8.00002 7.33333 8.00002ZM2 11.4667C2 11.0889 2.09444 10.7417 2.28333 10.425C2.47222 10.1084 2.73333 9.86669 3.06667 9.70002C3.73333 9.36669 4.425 9.11113 5.14167 8.93335C5.85833 8.75558 6.58889 8.66669 7.33333 8.66669C7.72222 8.66669 8.11111 8.70002 8.5 8.76669C8.88889 8.83335 9.27778 8.91113 9.66667 9.00002L8.53333 10.1334C8.33333 10.0778 8.13333 10.0417 7.93333 10.025C7.73333 10.0084 7.53333 10 7.33333 10C6.68889 10 6.05833 10.0778 5.44167 10.2334C4.825 10.3889 4.23333 10.6111 3.66667 10.9C3.55556 10.9556 3.47222 11.0334 3.41667 11.1334C3.36111 11.2334 3.33333 11.3445 3.33333 11.4667V12H7.33333V12.65C7.33333 12.65 7.33333 13 7.33333 13.3334H3.33333C2.96667 13.3334 2.65278 13.2028 2.39167 12.9417C2.13056 12.6806 2 12.3667 2 12V11.4667ZM7.33333 6.66669C7.7 6.66669 8.01389 6.53613 8.275 6.27502C8.53611 6.01391 8.66667 5.70002 8.66667 5.33335C8.66667 4.96669 8.53611 4.6528 8.275 4.39169C8.01389 4.13058 7.7 4.00002 7.33333 4.00002C6.96667 4.00002 6.65278 4.13058 6.39167 4.39169C6.13056 4.6528 6 4.96669 6 5.33335C6 5.70002 6.13056 6.01391 6.39167 6.27502C6.65278 6.53613 6.96667 6.66669 7.33333 6.66669Z" fill="currentColor" stroke="none"/>
<path d="M7.93333 13.27V12.17C7.93333 12.0811 7.95 11.995 7.98333 11.9117C8.01667 11.8283 8.06667 11.7533 8.13333 11.6867L11.6167 8.22001C11.7167 8.12001 11.8278 8.04779 11.95 8.00334C12.0722 7.9589 12.1944 7.93668 12.3167 7.93668C12.45 7.93668 12.5778 7.96168 12.7 8.01168C12.8222 8.06168 12.9333 8.13668 13.0333 8.23668L13.65 8.85334C13.7389 8.95334 13.8083 9.06445 13.8583 9.18668C13.9083 9.3089 13.9333 9.43112 13.9333 9.55334C13.9333 9.67557 13.9111 9.80057 13.8667 9.92834C13.8222 10.0561 13.75 10.17 13.65 10.27L10.1833 13.7367C10.1167 13.8033 10.0417 13.8533 9.95833 13.8867C9.875 13.92 9.78889 13.9367 9.7 13.9367H8.6C8.41111 13.9367 8.25278 13.8728 8.125 13.745C7.99722 13.6172 7.93333 13.4589 7.93333 13.27ZM8.93333 12.9367H9.56667L11.5833 10.9033L11.2833 10.5867L10.9667 10.2867L8.93333 12.3033V12.9367ZM11.2833 10.5867L10.9667 10.2867L11.5833 10.9033L11.2833 10.5867Z" fill="#1C1B1F"/>
<path d="M7.93333 13.27V12.17C7.93333 12.0811 7.95 11.995 7.98333 11.9117C8.01667 11.8283 8.06667 11.7533 8.13333 11.6867L11.6167 8.22001C11.7167 8.12001 11.8278 8.04779 11.95 8.00334C12.0722 7.9589 12.1944 7.93668 12.3167 7.93668C12.45 7.93668 12.5778 7.96168 12.7 8.01168C12.8222 8.06168 12.9333 8.13668 13.0333 8.23668L13.65 8.85334C13.7389 8.95334 13.8083 9.06445 13.8583 9.18668C13.9083 9.3089 13.9333 9.43112 13.9333 9.55334C13.9333 9.67557 13.9111 9.80057 13.8667 9.92834C13.8222 10.0561 13.75 10.17 13.65 10.27L10.1833 13.7367C10.1167 13.8033 10.0417 13.8533 9.95833 13.8867C9.875 13.92 9.78889 13.9367 9.7 13.9367H8.6C8.41111 13.9367 8.25278 13.8728 8.125 13.745C7.99722 13.6172 7.93333 13.4589 7.93333 13.27ZM8.93333 12.9367H9.56667L11.5833 10.9033L11.2833 10.5867L10.9667 10.2867L8.93333 12.3033V12.9367ZM11.2833 10.5867L10.9667 10.2867L11.5833 10.9033L11.2833 10.5867Z" fill="currentColor" stroke="none"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

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

@ -4,6 +4,6 @@
</mask>
<g mask="url(#mask0_18_1042)">
<path d="M6.66665 8.00002C5.93331 8.00002 5.30554 7.73891 4.78331 7.21669C4.26109 6.69447 3.99998 6.06669 3.99998 5.33335C3.99998 4.60002 4.26109 3.97224 4.78331 3.45002C5.30554 2.9278 5.93331 2.66669 6.66665 2.66669C7.39998 2.66669 8.02776 2.9278 8.54998 3.45002C9.0722 3.97224 9.33331 4.60002 9.33331 5.33335C9.33331 6.06669 9.0722 6.69447 8.54998 7.21669C8.02776 7.73891 7.39998 8.00002 6.66665 8.00002ZM1.33331 12V11.4667C1.33331 11.1 1.42776 10.7556 1.61665 10.4334C1.80554 10.1111 2.06665 9.86669 2.39998 9.70002C2.96665 9.41113 3.60554 9.16669 4.31665 8.96669C4.71274 8.85529 4.93609 8.67502 5.79165 8.67502H6.02498C6.09165 8.67502 6.15831 8.68613 6.22498 8.70835C5.99998 9.00002 5.33331 9.66669 4.99998 10C4.99998 10 4.8376 10.2057 4.54165 10.3C3.91387 10.5 3.39998 10.7 2.99998 10.9C2.89998 10.9556 2.81942 11.0334 2.75831 11.1334C2.6972 11.2334 2.66665 11.3445 2.66665 11.4667V12H4.99998C5.33331 12.3334 5.33331 12.3334 5.66665 12.6917C5.90596 12.949 6.19998 13.1334 6.33331 13.3334H2.66665C2.29998 13.3334 1.98609 13.2028 1.72498 12.9417C1.46387 12.6806 1.33331 12.3667 1.33331 12ZM6.66665 6.66669C7.03331 6.66669 7.3472 6.53613 7.60831 6.27502C7.86942 6.01391 7.99998 5.70002 7.99998 5.33335C7.99998 4.96669 7.86942 4.6528 7.60831 4.39169C7.3472 4.13058 7.03331 4.00002 6.66665 4.00002C6.29998 4.00002 5.98609 4.13058 5.72498 4.39169C5.46387 4.6528 5.33331 4.96669 5.33331 5.33335C5.33331 5.70002 5.46387 6.01391 5.72498 6.27502C5.98609 6.53613 6.29998 6.66669 6.66665 6.66669Z" fill="currentColor" stroke="none"/>
<path d="M9.99998 12.6667C10.6555 12.6667 11.2639 12.5167 11.825 12.2167C12.3861 11.9167 12.8333 11.5111 13.1666 11C12.8333 10.4889 12.3861 10.0833 11.825 9.78333C11.2639 9.48333 10.6555 9.33333 9.99998 9.33333C9.34442 9.33333 8.73609 9.48333 8.17498 9.78333C7.61387 10.0833 7.16665 10.4889 6.83331 11C7.16665 11.5111 7.61387 11.9167 8.17498 12.2167C8.73609 12.5167 9.34442 12.6667 9.99998 12.6667ZM9.99998 14C8.93331 14 7.98054 13.7194 7.14165 13.1583C6.30276 12.5972 5.69998 11.8778 5.33331 11C5.69998 10.1222 6.30276 9.40278 7.14165 8.84167C7.98054 8.28056 8.93331 8 9.99998 8C11.0666 8 12.0194 8.28056 12.8583 8.84167C13.6972 9.40278 14.3 10.1222 14.6666 11C14.3 11.8778 13.6972 12.5972 12.8583 13.1583C12.0194 13.7194 11.0666 14 9.99998 14ZM9.99998 12C9.7222 12 9.48609 11.9028 9.29165 11.7083C9.0972 11.5139 8.99998 11.2778 8.99998 11C8.99998 10.7222 9.0972 10.4861 9.29165 10.2917C9.48609 10.0972 9.7222 10 9.99998 10C10.2778 10 10.5139 10.0972 10.7083 10.2917C10.9028 10.4861 11 10.7222 11 11C11 11.2778 10.9028 11.5139 10.7083 11.7083C10.5139 11.9028 10.2778 12 9.99998 12Z" fill="#1C1B1F"/>
<path d="M9.99998 12.6667C10.6555 12.6667 11.2639 12.5167 11.825 12.2167C12.3861 11.9167 12.8333 11.5111 13.1666 11C12.8333 10.4889 12.3861 10.0833 11.825 9.78333C11.2639 9.48333 10.6555 9.33333 9.99998 9.33333C9.34442 9.33333 8.73609 9.48333 8.17498 9.78333C7.61387 10.0833 7.16665 10.4889 6.83331 11C7.16665 11.5111 7.61387 11.9167 8.17498 12.2167C8.73609 12.5167 9.34442 12.6667 9.99998 12.6667ZM9.99998 14C8.93331 14 7.98054 13.7194 7.14165 13.1583C6.30276 12.5972 5.69998 11.8778 5.33331 11C5.69998 10.1222 6.30276 9.40278 7.14165 8.84167C7.98054 8.28056 8.93331 8 9.99998 8C11.0666 8 12.0194 8.28056 12.8583 8.84167C13.6972 9.40278 14.3 10.1222 14.6666 11C14.3 11.8778 13.6972 12.5972 12.8583 13.1583C12.0194 13.7194 11.0666 14 9.99998 14ZM9.99998 12C9.7222 12 9.48609 11.9028 9.29165 11.7083C9.0972 11.5139 8.99998 11.2778 8.99998 11C8.99998 10.7222 9.0972 10.4861 9.29165 10.2917C9.48609 10.0972 9.7222 10 9.99998 10C10.2778 10 10.5139 10.0972 10.7083 10.2917C10.9028 10.4861 11 10.7222 11 11C11 11.2778 10.9028 11.5139 10.7083 11.7083C10.5139 11.9028 10.2778 12 9.99998 12Z" fill="currentColor" stroke="none"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

38
packages/nc-gui/components/project/AccessSettings.vue

@ -176,14 +176,14 @@ onMounted(async () => {
>
<Empty description="$t('title.noMembersFound')" />
</div>
<div v-else class="nc-collaborators-list !mt-10 rounded-md">
<div class="h-200 overflow-y-auto nc-scrollbar-md">
<table class="border-1">
<thead class="bg-gray-50 border-1 h-10 sticky top-0">
<th class="text-start w-1/4 text-gray-700 sticky top-0">{{ $t('objects.users') }}</th>
<th class="text-start w-1/4 text-gray-700 sticky top-0">{{ $t('title.dateJoined') }}</th>
<th class="text-start w-1/4 text-gray-700 sticky top-0">{{ $t('general.access') }}</th>
<th class="text-start w-1/4 text-gray-700 sticky top-0">Actions</th>
<div v-else class="nc-collaborators-list !mt-10">
<div class="h-160 nc-scrollbar-md rounded-lg border-1 w-250">
<table>
<thead class="bg-gray-50 h-10 sticky top-0">
<th class="text-start w-1/4 text-gray-700 sticky top-0 pr-40">{{ $t('objects.users') }}</th>
<th class="text-start w-1/4 text-gray-700 sticky top-0 pl-20">{{ $t('title.dateJoined') }}</th>
<th class="text-start w-2/4 text-gray-700 sticky top-0">{{ $t('general.access') }}</th>
<th class="pr-8 text-gray-700 sticky top-0">Actions</th>
</thead>
<tbody>
<tr v-for="(collab, i) of collaborators" :key="i" class="border-b-1 py-1 h-14">
@ -193,7 +193,7 @@ onMounted(async () => {
{{ collab.email }}
</span>
</td>
<td class="w-1/4 text-center">
<td class="w-1/4 text-center pl-20">
{{ timeAgo(collab.created_at) }}
</td>
<td class="w-1/4">
@ -218,7 +218,7 @@ onMounted(async () => {
</div>
</template>
</td>
<td class="w-1/4">
<td class="w-1/4 pr-8">
<div class="flex justify-center items-center">
<NcDropdown v-if="collab.roles !== ProjectRoles.OWNER" :trigger="['click']">
<MdiDotsVertical
@ -257,24 +257,6 @@ onMounted(async () => {
</template>
<style scoped lang="scss">
.badge-text {
@apply text-[14px] flex items-center justify-center gap-1 pt-0.5;
}
.nc-collaborators-list {
@apply border-1 shadow-sm border-gray-100 mt-1 flex flex-col w-full;
// todo: replace/remove 120px with proper value while updating invite ui
height: calc(100vh - calc(var(--topbar-height) + 9rem + 120px));
}
.nc-collaborators-list-header {
@apply flex flex-row justify-between items-center min-h-10 border-b-1 border-gray-100 pl-4;
}
.nc-collaborators-list-row {
@apply flex flex-row justify-between items-center min-h-16 border-b-1 border-gray-100 pl-4;
}
.color-band {
@apply w-6 h-6 left-0 top-2.5 rounded-full flex justify-center uppercase text-white font-weight-bold text-xs items-center;
}

Loading…
Cancel
Save