Browse Source

Nc fix: Update user menu dropdown icons (#8198)

* fix(nc-gui): updated user menu icon

* fix(nc-gui): remove copy auth token option and update user menu icons

* chore(nc-gui): lint

* fix(nc-gui): use computed value for switch size
pull/8228/head
Ramesh Mane 3 months ago committed by GitHub
parent
commit
90a295901e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 5
      packages/nc-gui/assets/nc-icons/discord.svg
  2. 17
      packages/nc-gui/assets/nc-icons/help.svg
  3. 7
      packages/nc-gui/assets/nc-icons/reddit.svg
  4. 15
      packages/nc-gui/assets/nc-icons/settings.svg
  5. 3
      packages/nc-gui/assets/nc-icons/twitter.svg
  6. 56
      packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
  7. 14
      packages/nc-gui/components/nc/Switch.vue
  8. 14
      packages/nc-gui/utils/iconUtils.ts

5
packages/nc-gui/assets/nc-icons/discord.svg

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M12.8516 3.88457C11.9593 3.47514 11.0024 3.17349 10.0019 3.00072C9.98372 2.99739 9.96552 3.00572 9.95613 3.02239C9.83307 3.24126 9.69676 3.52681 9.6013 3.75124C8.52524 3.59014 7.45469 3.59014 6.40069 3.75124C6.30521 3.52182 6.16395 3.24126 6.04033 3.02239C6.03095 3.00628 6.01275 2.99795 5.99453 3.00072C4.99461 3.17294 4.03774 3.47459 3.14488 3.88457C3.13715 3.88791 3.13052 3.89347 3.12613 3.90068C1.31115 6.61223 0.813946 9.25712 1.05786 11.8692C1.05896 11.882 1.06613 11.8942 1.07607 11.902C2.27354 12.7814 3.4335 13.3153 4.57191 13.6691C4.59013 13.6747 4.60944 13.668 4.62103 13.653C4.89032 13.2853 5.13037 12.8975 5.33619 12.4897C5.34834 12.4659 5.33675 12.4375 5.31192 12.4281C4.93116 12.2836 4.5686 12.1075 4.21984 11.9076C4.19226 11.8915 4.19005 11.852 4.21543 11.8331C4.28882 11.7781 4.36223 11.7209 4.43231 11.6631C4.44499 11.6526 4.46265 11.6503 4.47756 11.657C6.76875 12.7031 9.24923 12.7031 11.5134 11.657C11.5283 11.6498 11.546 11.652 11.5592 11.6626C11.6293 11.7203 11.7027 11.7781 11.7766 11.8331C11.802 11.852 11.8003 11.8915 11.7728 11.9076C11.424 12.1114 11.0614 12.2836 10.6801 12.4275C10.6553 12.437 10.6443 12.4659 10.6564 12.4897C10.8666 12.8969 11.1067 13.2847 11.371 13.6525C11.3821 13.668 11.4019 13.6747 11.4201 13.6691C12.5641 13.3153 13.724 12.7814 14.9215 11.902C14.932 11.8942 14.9386 11.8826 14.9397 11.8698C15.2316 8.8499 14.4508 6.2267 12.8698 3.90124C12.8659 3.89347 12.8593 3.88791 12.8516 3.88457ZM5.67835 10.2787C4.98854 10.2787 4.42016 9.64544 4.42016 8.86769C4.42016 8.08994 4.97752 7.45665 5.67835 7.45665C6.38468 7.45665 6.94755 8.0955 6.93651 8.86769C6.93651 9.64544 6.37915 10.2787 5.67835 10.2787ZM10.3303 10.2787C9.64048 10.2787 9.0721 9.64544 9.0721 8.86769C9.0721 8.08994 9.62944 7.45665 10.3303 7.45665C11.0366 7.45665 11.5995 8.0955 11.5885 8.86769C11.5885 9.64544 11.0366 10.2787 10.3303 10.2787Z"
fill="#5865F2" />
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

17
packages/nc-gui/assets/nc-icons/help.svg

@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<g clip-path="url(#clip0_3711_477)">
<path
d="M8.00004 14.6667C11.6819 14.6667 14.6667 11.6819 14.6667 8.00004C14.6667 4.31814 11.6819 1.33337 8.00004 1.33337C4.31814 1.33337 1.33337 4.31814 1.33337 8.00004C1.33337 11.6819 4.31814 14.6667 8.00004 14.6667Z"
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8 11.3334H8.00667" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M6.06006 6.00001C6.21679 5.55446 6.52616 5.17875 6.93336 4.93944C7.34056 4.70012 7.81932 4.61264 8.28484 4.69249C8.75036 4.77234 9.1726 5.01436 9.47678 5.3757C9.78095 5.73703 9.94743 6.19436 9.94673 6.66668C9.94673 8.00001 7.94673 8.66668 7.94673 8.66668"
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<clipPath id="clip0_3711_477">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

7
packages/nc-gui/assets/nc-icons/reddit.svg

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z"
fill="#FF4500" />
<path
d="M12.6667 8.00008C12.6667 7.43517 12.2082 6.97669 11.6433 6.97669C11.3649 6.97669 11.1193 7.08312 10.9392 7.26324C10.2433 6.76382 9.27722 6.43634 8.21289 6.3954L8.67956 4.20944L10.1942 4.52874C10.2106 4.91353 10.5298 5.22464 10.9228 5.22464C11.324 5.22464 11.6515 4.89716 11.6515 4.49599C11.6515 4.09482 11.324 3.76733 10.9228 3.76733C10.6363 3.76733 10.3907 3.93108 10.276 4.17669L8.58131 3.81646C8.53219 3.80827 8.48307 3.81646 8.44213 3.84102C8.40119 3.86558 8.37663 3.90652 8.36026 3.95564L7.84447 6.3954C6.75558 6.42815 5.78131 6.74745 5.07722 7.26324C4.8971 7.09131 4.6433 6.97669 4.37312 6.97669C3.80821 6.97669 3.34973 7.43517 3.34973 8.00008C3.34973 8.41763 3.59535 8.76967 3.95558 8.93342C3.93921 9.03166 3.93102 9.1381 3.93102 9.24453C3.93102 10.8165 5.75675 12.0855 8.0164 12.0855C10.276 12.0855 12.1018 10.8165 12.1018 9.24453C12.1018 9.1381 12.0936 9.03985 12.0772 8.9416C12.4129 8.77786 12.6667 8.41763 12.6667 8.00008ZM5.66669 8.72874C5.66669 8.32757 5.99418 8.00008 6.39535 8.00008C6.79652 8.00008 7.124 8.32757 7.124 8.72874C7.124 9.12991 6.79652 9.45739 6.39535 9.45739C5.99418 9.45739 5.66669 9.12991 5.66669 8.72874ZM9.7357 10.6527C9.23628 11.1521 8.28657 11.1849 8.00821 11.1849C7.72985 11.1849 6.77195 11.1439 6.28073 10.6527C6.20704 10.579 6.20704 10.4562 6.28073 10.3825C6.35441 10.3089 6.47722 10.3089 6.5509 10.3825C6.86201 10.6936 7.53336 10.8083 8.0164 10.8083C8.49944 10.8083 9.1626 10.6936 9.4819 10.3825C9.55558 10.3089 9.67839 10.3089 9.75207 10.3825C9.80938 10.4644 9.80938 10.579 9.7357 10.6527ZM9.6047 9.45739C9.20353 9.45739 8.87605 9.12991 8.87605 8.72874C8.87605 8.32757 9.20353 8.00008 9.6047 8.00008C10.0059 8.00008 10.3334 8.32757 10.3334 8.72874C10.3334 9.12991 10.0059 9.45739 9.6047 9.45739Z"
fill="white" />
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

15
packages/nc-gui/assets/nc-icons/settings.svg

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<g clip-path="url(#clip0_3711_1275)">
<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" />
<path
d="M12.9333 9.99996C12.8445 10.201 12.8181 10.4241 12.8573 10.6404C12.8965 10.8566 12.9996 11.0562 13.1533 11.2133L13.1933 11.2533C13.3173 11.3771 13.4156 11.5242 13.4827 11.686C13.5498 11.8479 13.5843 12.0214 13.5843 12.1966C13.5843 12.3718 13.5498 12.5453 13.4827 12.7072C13.4156 12.8691 13.3173 13.0161 13.1933 13.14C13.0695 13.2639 12.9224 13.3623 12.7605 13.4294C12.5987 13.4965 12.4252 13.531 12.25 13.531C12.0747 13.531 11.9012 13.4965 11.7394 13.4294C11.5775 13.3623 11.4305 13.2639 11.3066 13.14L11.2666 13.1C11.1095 12.9463 10.9099 12.8432 10.6937 12.804C10.4774 12.7647 10.2544 12.7912 10.0533 12.88C9.85611 12.9645 9.68795 13.1048 9.5695 13.2836C9.45105 13.4625 9.38748 13.6721 9.38663 13.8866V14C9.38663 14.3536 9.24615 14.6927 8.9961 14.9428C8.74605 15.1928 8.40691 15.3333 8.05329 15.3333C7.69967 15.3333 7.36053 15.1928 7.11048 14.9428C6.86044 14.6927 6.71996 14.3536 6.71996 14V13.94C6.7148 13.7193 6.64337 13.5053 6.51497 13.3258C6.38656 13.1462 6.20712 13.0095 5.99996 12.9333C5.79888 12.8445 5.57583 12.8181 5.35957 12.8573C5.1433 12.8965 4.94375 12.9996 4.78663 13.1533L4.74663 13.1933C4.6228 13.3173 4.47574 13.4156 4.31388 13.4827C4.15202 13.5498 3.97851 13.5843 3.80329 13.5843C3.62807 13.5843 3.45457 13.5498 3.29271 13.4827C3.13084 13.4156 2.98379 13.3173 2.85996 13.1933C2.73599 13.0695 2.63765 12.9224 2.57055 12.7605C2.50345 12.5987 2.46891 12.4252 2.46891 12.25C2.46891 12.0747 2.50345 11.9012 2.57055 11.7394C2.63765 11.5775 2.73599 11.4305 2.85996 11.3066L2.89996 11.2666C3.05365 11.1095 3.15675 10.9099 3.19596 10.6937C3.23517 10.4774 3.2087 10.2544 3.11996 10.0533C3.03545 9.85611 2.89513 9.68795 2.71627 9.5695C2.53741 9.45105 2.32782 9.38748 2.11329 9.38663H1.99996C1.64634 9.38663 1.3072 9.24615 1.05715 8.9961C0.807102 8.74605 0.666626 8.40691 0.666626 8.05329C0.666626 7.69967 0.807102 7.36053 1.05715 7.11048C1.3072 6.86044 1.64634 6.71996 1.99996 6.71996H2.05996C2.28062 6.7148 2.49463 6.64337 2.67416 6.51497C2.85369 6.38656 2.99044 6.20712 3.06663 5.99996C3.15537 5.79888 3.18184 5.57583 3.14263 5.35957C3.10342 5.1433 3.00032 4.94375 2.84663 4.78663L2.80663 4.74663C2.68266 4.6228 2.58431 4.47574 2.51721 4.31388C2.45011 4.15202 2.41558 3.97851 2.41558 3.80329C2.41558 3.62807 2.45011 3.45457 2.51721 3.29271C2.58431 3.13084 2.68266 2.98379 2.80663 2.85996C2.93046 2.73599 3.07751 2.63765 3.23937 2.57055C3.40124 2.50345 3.57474 2.46891 3.74996 2.46891C3.92518 2.46891 4.09868 2.50345 4.26055 2.57055C4.42241 2.63765 4.56946 2.73599 4.69329 2.85996L4.73329 2.89996C4.89041 3.05365 5.08997 3.15675 5.30623 3.19596C5.5225 3.23517 5.74555 3.2087 5.94663 3.11996H5.99996C6.19714 3.03545 6.3653 2.89513 6.48375 2.71627C6.60221 2.53741 6.66577 2.32782 6.66663 2.11329V1.99996C6.66663 1.64634 6.8071 1.3072 7.05715 1.05715C7.3072 0.807102 7.64634 0.666626 7.99996 0.666626C8.35358 0.666626 8.69272 0.807102 8.94277 1.05715C9.19282 1.3072 9.33329 1.64634 9.33329 1.99996V2.05996C9.33415 2.27448 9.39771 2.48408 9.51616 2.66294C9.63461 2.8418 9.80278 2.98212 9.99996 3.06663C10.201 3.15537 10.4241 3.18184 10.6404 3.14263C10.8566 3.10342 11.0562 3.00032 11.2133 2.84663L11.2533 2.80663C11.3771 2.68266 11.5242 2.58431 11.686 2.51721C11.8479 2.45011 12.0214 2.41558 12.1966 2.41558C12.3718 2.41558 12.5453 2.45011 12.7072 2.51721C12.8691 2.58431 13.0161 2.68266 13.14 2.80663C13.2639 2.93046 13.3623 3.07751 13.4294 3.23937C13.4965 3.40124 13.531 3.57474 13.531 3.74996C13.531 3.92518 13.4965 4.09868 13.4294 4.26055C13.3623 4.42241 13.2639 4.56946 13.14 4.69329L13.1 4.73329C12.9463 4.89041 12.8432 5.08997 12.804 5.30623C12.7647 5.5225 12.7912 5.74555 12.88 5.94663V5.99996C12.9645 6.19714 13.1048 6.3653 13.2836 6.48375C13.4625 6.60221 13.6721 6.66577 13.8866 6.66663H14C14.3536 6.66663 14.6927 6.8071 14.9428 7.05715C15.1928 7.3072 15.3333 7.64634 15.3333 7.99996C15.3333 8.35358 15.1928 8.69272 14.9428 8.94277C14.6927 9.19282 14.3536 9.33329 14 9.33329H13.94C13.7254 9.33415 13.5158 9.39771 13.337 9.51616C13.1581 9.63461 13.0178 9.80278 12.9333 9.99996V9.99996Z"
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<clipPath id="clip0_3711_1275">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.6 KiB

3
packages/nc-gui/assets/nc-icons/twitter.svg

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M1.03413 1L6.43938 8.22732L1 14.1034H2.22419L6.98634 8.95882L10.834 14.1034H15L9.29062 6.4696L14.3535 1H13.1294L8.74366 5.7381L5.20009 1H1.03413ZM2.83439 1.90174H4.74824L13.1995 13.2016H11.2856L2.83439 1.90174Z" fill="currentColor"/>
</svg>

After

Width:  |  Height:  |  Size: 347 B

56
packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue

@ -1,26 +1,12 @@
<script lang="ts" setup>
import {
computed,
message,
navigateTo,
onMounted,
ref,
storeToRefs,
useCopy,
useGlobal,
useSidebarStore,
useUsers,
watch,
} from '#imports'
import { computed, navigateTo, onMounted, ref, storeToRefs, useGlobal, useSidebarStore, useUsers, watch } from '#imports'
const { user, signOut, token, appInfo } = useGlobal()
const { user, signOut, appInfo } = useGlobal()
// So watcher in users store is triggered
useUsers()
const { leftSidebarState } = storeToRefs(useSidebarStore())
const { copy } = useCopy(true)
const name = computed(() => user.value?.display_name?.trim())
const isMenuOpen = ref(false)
@ -47,16 +33,6 @@ const logout = async () => {
}
}
const onCopy = async () => {
try {
await copy(token.value!)
isAuthTokenCopied.value = true
} catch (e: any) {
console.error(e)
message.error(e.message)
}
}
watch(isMenuOpen, () => {
if (isAuthTokenCopied.value) {
isAuthTokenCopied.value = false
@ -99,16 +75,6 @@ onMounted(() => {
<span class="menu-btn"> {{ $t('general.logout') }}</span>
</div>
</NcMenuItem>
<template v-if="!isMobileMode">
<NcMenuItem @click="onCopy">
<div v-e="['c:auth-token:copy']" class="flex gap-2 items-center">
<GeneralIcon v-if="isAuthTokenCopied" icon="check" class="group-hover:text-black menu-icon" />
<GeneralIcon v-else icon="copy" class="menu-icon" />
<template v-if="isAuthTokenCopied"> {{ $t('title.copiedAuthToken') }} </template>
<template v-else> {{ $t('title.copyAuthToken') }} </template>
</div>
</NcMenuItem>
</template>
<NcDivider />
<a
v-e="['c:nocodb:discord']"
@ -118,7 +84,7 @@ onMounted(() => {
rel="noopener noreferrer"
>
<NcMenuItem class="social-icon-wrapper">
<GeneralIcon class="social-icon" icon="discord" />
<GeneralIcon class="social-icon" icon="ncDiscord" />
<span class="menu-btn"> {{ $t('labels.community.joinDiscord') }} </span>
</NcMenuItem>
</a>
@ -130,7 +96,7 @@ onMounted(() => {
rel="noopener noreferrer"
>
<NcMenuItem class="social-icon-wrapper">
<GeneralIcon class="social-icon" icon="reddit" />
<GeneralIcon class="social-icon" icon="ncReddit" />
<span class="menu-btn"> {{ $t('labels.community.joinReddit') }} </span>
</NcMenuItem>
</a>
@ -142,7 +108,7 @@ onMounted(() => {
rel="noopener noreferrer"
>
<NcMenuItem class="social-icon-wrapper group">
<GeneralIcon class="text-gray-500 group-hover:text-gray-800 my-0.5" icon="twitter" />
<GeneralIcon class="social-icon text-gray-500 group-hover:text-gray-800" icon="ncTwitter" />
<span class="menu-btn"> {{ $t('labels.twitter') }} </span>
</NcMenuItem>
</a>
@ -181,7 +147,7 @@ onMounted(() => {
rel="noopener"
>
<NcMenuItem>
<GeneralIcon icon="help" class="menu-icon mt-0.5" />
<GeneralIcon icon="ncHelp" class="menu-icon mt-0.5" />
<span class="menu-btn"> {{ $t('title.forum') }} </span>
</NcMenuItem>
</a>
@ -194,7 +160,7 @@ onMounted(() => {
rel="noopener"
>
<NcMenuItem>
<GeneralIcon icon="doc" class="menu-icon mt-0.5" />
<GeneralIcon icon="file" class="menu-icon mt-0.5" />
<span class="menu-btn"> {{ $t('title.docs') }} </span>
</NcMenuItem>
</a>
@ -202,7 +168,7 @@ onMounted(() => {
<NcDivider />
<nuxt-link v-e="['c:user:settings']" class="!no-underline" to="/account/profile">
<NcMenuItem> <GeneralIcon icon="settings" class="menu-icon" /> {{ $t('title.accountSettings') }} </NcMenuItem>
<NcMenuItem> <GeneralIcon icon="ncSettings" class="menu-icon" /> {{ $t('title.accountSettings') }} </NcMenuItem>
</nuxt-link>
</template>
</NcMenu>
@ -222,9 +188,9 @@ onMounted(() => {
line-height: 1.5;
}
.menu-icon {
@apply !min-h-4.5;
@apply w-4 h-4;
line-height: 1rem;
font-size: 1.125rem;
font-size: 1rem;
}
:deep(.ant-popover-inner-content) {
@ -232,7 +198,7 @@ onMounted(() => {
}
.social-icon {
@apply my-0.5;
@apply my-0.5 w-4 h-4 stroke-transparent;
// Make icon black and white
filter: grayscale(100%);

14
packages/nc-gui/components/nc/Switch.vue

@ -7,13 +7,25 @@ const emit = defineEmits(['change', 'update:checked'])
const checked = useVModel(props, 'checked', emit)
const switchSize = computed(() => (['default', 'small'].includes(props.size) ? props.size : undefined))
const onChange = (e: boolean) => {
emit('change', e)
}
</script>
<template>
<a-switch v-model:checked="checked" :disabled="disabled" class="nc-switch" v-bind="$attrs" :size="size" @change="onChange">
<a-switch
v-model:checked="checked"
:disabled="disabled"
class="nc-switch"
:class="{
'size-xsmall': size === 'xsmall',
}"
v-bind="$attrs"
:size="switchSize"
@change="onChange"
>
</a-switch>
<span v-if="$slots.default" class="cursor-pointer pl-2" @click="checked = !checked">
<slot />

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

@ -168,6 +168,14 @@ import NcCellAttachment from '~icons/nc-icons/cell-attachment'
import NcCircleCheck from '~icons/nc-icons/circle-check'
import OnetoOneIcon from '~icons/nc-icons/onetoone'
import NcDiscord from '~icons/nc-icons/discord'
import NcReddit from '~icons/nc-icons/reddit'
import NcTwitter from '~icons/nc-icons/twitter'
import NcFile from '~icons/nc-icons/file'
import NcSettings from '~icons/nc-icons/settings'
import NcHelp from '~icons/nc-icons/help'
// keep it for reference
// todo: remove it after all icons are migrated
/* export const iconMapOld = {
@ -569,6 +577,12 @@ export const iconMap = {
phoneCall: NcPhoneCall,
crop: NcCrop,
circleCheck2: NcCircleCheck,
ncDiscord: NcDiscord,
ncReddit: NcReddit,
ncTwitter: NcTwitter,
file: NcFile,
ncSettings: NcSettings,
ncHelp: NcHelp,
}
export const getMdiIcon = (type: string): any => {

Loading…
Cancel
Save