github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

refactor(gui-v2): replace `pink-500` with `accent` color

pull/3249/head
braks 2 years ago
parent
47808a5eaa
commit
0444a20bd4
14 changed files with 66 additions and 66 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      packages/nc-gui-v2/assets/style.scss
  2. 4
      packages/nc-gui-v2/components/cell/attachment/Carousel.vue
  3. 12
      packages/nc-gui-v2/components/cell/attachment/Modal.vue
  4. 8
      packages/nc-gui-v2/components/cell/attachment/index.vue
  5. 12
      packages/nc-gui-v2/components/dashboard/TreeView.vue
  6. 10
      packages/nc-gui-v2/components/general/MiniSidebar.vue
  7. 4
      packages/nc-gui-v2/components/general/PreviewAs.vue
  8. 6
      packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
  9. 2
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  10. 8
      packages/nc-gui-v2/components/template/Editor.vue
  11. 14
      packages/nc-gui-v2/layouts/base.vue
  12. 30
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
  13. 2
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
  14. 12
      packages/nc-gui-v2/pages/index/index.vue

8
packages/nc-gui-v2/assets/style.scss
Unescape View File

@ -49,7 +49,7 @@ a {
&:hover { &:hover {
.nc-icon { .nc-icon {
@apply text-pink-500; @apply text-accent;
} }
} }
} }
@ -191,11 +191,11 @@ a {
} }
&:hover::after { &:hover::after {
@apply transform scale-110 ring ring-pink-500; @apply transform scale-110 ring ring-accent;
} }
&:active::after { &:active::after {
@apply ring ring-pink-500; @apply ring ring-accent;
} }
} }
@ -232,7 +232,7 @@ a {
} }
.ant-dropdown-menu-item, .ant-menu-item { .ant-dropdown-menu-item, .ant-menu-item {
@apply !py-0 active:(ring ring-pink-500); @apply !py-0 active:(ring ring-accent);
} }
.ant-dropdown-menu-title-content, .ant-dropdown-menu-title-content,

4
packages/nc-gui-v2/components/cell/attachment/Carousel.vue
Unescape View File

@ -55,7 +55,7 @@ onClickOutside(carouselRef, () => {
</div> </div>
<div <div
class="select-none group hover:ring active:ring-pink-500 cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow" class="select-none group hover:ring active:ring-accent cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow"
@click.stop="downloadFile(selectedImage)" @click.stop="downloadFile(selectedImage)"
> >
<h3 class="group-hover:text-primary">{{ selectedImage && selectedImage.title }}</h3> <h3 class="group-hover:text-primary">{{ selectedImage && selectedImage.title }}</h3>
@ -133,7 +133,7 @@ onClickOutside(carouselRef, () => {
} }
.ant-carousel :deep(.slick-arrow.custom-slick-arrow) { .ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
@apply text-4xl text-white hover:text-primary active:text-pink-500 opacity-100 cursor-pointer z-1; @apply text-4xl text-white hover:text-primary active:text-accent opacity-100 cursor-pointer z-1;
} }
.ant-carousel :deep(.custom-slick-arrow:before) { .ant-carousel :deep(.custom-slick-arrow:before) {
display: none; display: none;

12
packages/nc-gui-v2/components/cell/attachment/Modal.vue
Unescape View File

@ -66,7 +66,7 @@ function onClick(item: Record<string, any>) {
class="nc-attach-file group" class="nc-attach-file group"
@click="open" @click="open"
> >
<MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" /> <MaterialSymbolsAttachFile class="transform group-hover:(text-accent scale-120)" />
Attach File Attach File
</div> </div>
@ -83,9 +83,9 @@ function onClick(item: Record<string, any>) {
<general-overlay <general-overlay
v-model="isOverDropZone" v-model="isOverDropZone"
inline inline
class="text-white ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl" class="text-white ring ring-accent bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
> >
<MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" /> <MaterialSymbolsFileCopyOutline class="text-accent" height="35" width="35" />
<div class="text-white text-3xl">Drop here</div> <div class="text-white text-3xl">Drop here</div>
</general-overlay> </general-overlay>
</template> </template>
@ -155,7 +155,7 @@ function onClick(item: Record<string, any>) {
.nc-attach-file { .nc-attach-file {
@apply select-none cursor-pointer color-transition flex items-center gap-1 border-1 p-2 rounded @apply select-none cursor-pointer color-transition flex items-center gap-1 border-1 p-2 rounded
@apply hover:(bg-primary bg-opacity-10 text-primary ring); @apply hover:(bg-primary bg-opacity-10 text-primary ring);
@apply active:(ring-pink-500 bg-primary bg-opacity-20); @apply active:(ring-accent bg-primary bg-opacity-20);
} }
.nc-attachment-item { .nc-attachment-item {
@ -176,7 +176,7 @@ function onClick(item: Record<string, any>) {
} }
&:active::after { &:active::after {
@apply ring ring-pink-500 shadow transform scale-103; @apply ring ring-accent shadow transform scale-103;
} }
} }
} }
@ -185,7 +185,7 @@ function onClick(item: Record<string, any>) {
@apply bg-white absolute bottom-2 right-2; @apply bg-white absolute bottom-2 right-2;
@apply transition-opacity duration-150 ease-in opacity-0 hover:ring; @apply transition-opacity duration-150 ease-in opacity-0 hover:ring;
@apply cursor-pointer rounded shadow flex items-center p-1 border-1; @apply cursor-pointer rounded shadow flex items-center p-1 border-1;
@apply active:(ring border-0 ring-pink-500); @apply active:(ring border-0 ring-accent);
} }
.nc-attachment-remove { .nc-attachment-remove {

8
packages/nc-gui-v2/components/cell/attachment/index.vue
Unescape View File

@ -100,9 +100,9 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
v-model="isOverDropZone" v-model="isOverDropZone"
inline inline
:target="currentCellRef" :target="currentCellRef"
class="text-white text-lg ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl" class="text-white text-lg ring ring-accent bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
> >
<MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here <MaterialSymbolsFileCopyOutline class="text-accent" /> Drop here
</general-overlay> </general-overlay>
</template> </template>
@ -118,7 +118,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
<template #title> Click or drop a file into cell </template> <template #title> Click or drop a file into cell </template>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120) text-gray-500 text-[10px]" /> <MaterialSymbolsAttachFile class="transform group-hover:(text-accent scale-120) text-gray-500 text-[10px]" />
<div v-if="!visibleItems.length" class="group-hover:text-primary text-gray-500 text-xs">Add file(s)</div> <div v-if="!visibleItems.length" class="group-hover:text-primary text-gray-500 text-xs">Add file(s)</div>
</div> </div>
@ -167,7 +167,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
<template #title> View attachments </template> <template #title> View attachments </template>
<MdiArrowExpand <MdiArrowExpand
class="select-none transform group-hover:(text-pink-500 scale-120) text-[10px] text-gray-500" class="select-none transform group-hover:(text-accent scale-120) text-[10px] text-gray-500"
@click.stop="modalVisible = true" @click.stop="modalVisible = true"
/> />
</a-tooltip> </a-tooltip>

12
packages/nc-gui-v2/components/dashboard/TreeView.vue
Unescape View File

@ -250,7 +250,7 @@ function openTableCreateDialog() {
@click="openAirtableImportDialog" @click="openAirtableImportDialog"
> >
<div class="color-transition nc-project-menu-item group"> <div class="color-transition nc-project-menu-item group">
<MdiTableLarge class="group-hover:text-pink-500" /> <MdiTableLarge class="group-hover:text-accent" />
<!-- TODO: i18n --> <!-- TODO: i18n -->
Airtable Airtable
</div> </div>
@ -258,7 +258,7 @@ function openTableCreateDialog() {
<a-menu-item v-if="isUIAllowed('csvImport')" key="quick-import-csv" @click="openQuickImportDialog('csv')"> <a-menu-item v-if="isUIAllowed('csvImport')" key="quick-import-csv" @click="openQuickImportDialog('csv')">
<div class="color-transition nc-project-menu-item group"> <div class="color-transition nc-project-menu-item group">
<MdiFileDocumentOutline class="group-hover:text-pink-500" /> <MdiFileDocumentOutline class="group-hover:text-accent" />
<!-- TODO: i18n --> <!-- TODO: i18n -->
CSV file CSV file
</div> </div>
@ -266,7 +266,7 @@ function openTableCreateDialog() {
<a-menu-item v-if="isUIAllowed('jsonImport')" key="quick-import-json" @click="openQuickImportDialog('json')"> <a-menu-item v-if="isUIAllowed('jsonImport')" key="quick-import-json" @click="openQuickImportDialog('json')">
<div class="color-transition nc-project-menu-item group"> <div class="color-transition nc-project-menu-item group">
<MdiCodeJson class="group-hover:text-pink-500" /> <MdiCodeJson class="group-hover:text-accent" />
<!-- TODO: i18n --> <!-- TODO: i18n -->
JSON file JSON file
</div> </div>
@ -278,7 +278,7 @@ function openTableCreateDialog() {
@click="openQuickImportDialog('excel')" @click="openQuickImportDialog('excel')"
> >
<div class="color-transition nc-project-menu-item group"> <div class="color-transition nc-project-menu-item group">
<MdiFileExcel class="group-hover:text-pink-500" /> <MdiFileExcel class="group-hover:text-accent" />
<!-- TODO: i18n --> <!-- TODO: i18n -->
Microsoft Excel Microsoft Excel
</div> </div>
@ -294,7 +294,7 @@ function openTableCreateDialog() {
target="_blank" target="_blank"
class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)" class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
> >
<MdiOpenInNew class="group-hover:text-pink-500" /> <MdiOpenInNew class="group-hover:text-accent" />
<!-- TODO: i18n --> <!-- TODO: i18n -->
Request a data source you need? Request a data source you need?
</a> </a>
@ -505,7 +505,7 @@ function openTableCreateDialog() {
} }
:deep(.ant-dropdown-menu-item) { :deep(.ant-dropdown-menu-item) {
@apply !py-0 active:(ring ring-pink-500); @apply !py-0 active:(ring ring-accent);
} }
:deep(.ant-dropdown-menu-title-content) { :deep(.ant-dropdown-menu-title-content) {

10
packages/nc-gui-v2/components/general/MiniSidebar.vue
Unescape View File

@ -74,24 +74,24 @@ const logout = () => {
</span> </span>
</template> </template>
<a-menu-item class="active:(ring ring-pink-500)"> <a-menu-item class="active:(ring ring-accent)">
<div <div
v-t="['c:project:create:xcdb']" v-t="['c:project:create:xcdb']"
class="group flex items-center gap-2 py-2 hover:text-primary" class="group flex items-center gap-2 py-2 hover:text-primary"
@click="navigateTo('/project/create')" @click="navigateTo('/project/create')"
> >
<MdiPlus class="text-lg group-hover:text-pink-500" /> <MdiPlus class="text-lg group-hover:text-accent" />
{{ $t('activity.createProject') }} {{ $t('activity.createProject') }}
</div> </div>
</a-menu-item> </a-menu-item>
<a-menu-item class="rounded-b active:(ring ring-pink-500)"> <a-menu-item class="rounded-b active:(ring ring-accent)">
<div <div
v-t="['c:project:create:extdb']" v-t="['c:project:create:extdb']"
class="group flex items-center gap-2 py-2 hover:text-primary" class="group flex items-center gap-2 py-2 hover:text-primary"
@click="navigateTo('/project/create-external')" @click="navigateTo('/project/create-external')"
> >
<MdiDatabaseOutline class="text-lg group-hover:text-pink-500" /> <MdiDatabaseOutline class="text-lg group-hover:text-accent" />
<div v-html="$t('activity.createProjectExtended.extDB')" /> <div v-html="$t('activity.createProjectExtended.extDB')" />
</div> </div>
</a-menu-item> </a-menu-item>
@ -125,7 +125,7 @@ const logout = () => {
@apply flex w-full justify-center items-center h-12 group p-2; @apply flex w-full justify-center items-center h-12 group p-2;
&.active { &.active {
@apply bg-pink-500 border-t-1 border-b-1; @apply bg-accent border-t-1 border-b-1;
} }
} }
} }

4
packages/nc-gui-v2/components/general/PreviewAs.vue
Unescape View File

@ -80,7 +80,7 @@ watch(previewAs, () => window.location.reload())
<template v-for="role of roleList" :key="role.title"> <template v-for="role of roleList" :key="role.title">
<a-menu-item @click="previewAs = role.title"> <a-menu-item @click="previewAs = role.title">
<div class="nc-project-menu-item group"> <div class="nc-project-menu-item group">
<component :is="roleIcon[role.title]" class="group-hover:text-pink-500" /> <component :is="roleIcon[role.title]" class="group-hover:text-accent" />
<span class="capitalize" :class="{ 'x-active--text': role.title === previewAs }"> <span class="capitalize" :class="{ 'x-active--text': role.title === previewAs }">
{{ role.title }} {{ role.title }}
@ -92,7 +92,7 @@ watch(previewAs, () => window.location.reload())
<template v-if="previewAs"> <template v-if="previewAs">
<a-menu-item @click="previewAs = null"> <a-menu-item @click="previewAs = null">
<div class="nc-project-menu-item group"> <div class="nc-project-menu-item group">
<MdiClose class="group-hover:text-pink-500" /> <MdiClose class="group-hover:text-accent" />
<!-- Reset Preview --> <!-- Reset Preview -->
<span class="text-capitalize text-xs whitespace-nowrap"> <span class="text-capitalize text-xs whitespace-nowrap">
{{ $t('activity.resetReview') }} {{ $t('activity.resetReview') }}

6
packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
Unescape View File

@ -38,7 +38,7 @@ const icon = computed(() => {
case UITypes.LinkToAnotherRecord: case UITypes.LinkToAnotherRecord:
switch ((column?.value?.colOptions as LinkToAnotherRecordType)?.type) { switch ((column?.value?.colOptions as LinkToAnotherRecordType)?.type) {
case RelationTypes.MANY_TO_MANY: case RelationTypes.MANY_TO_MANY:
return { icon: MMIcon, color: 'text-pink-500' } return { icon: MMIcon, color: 'text-accent' }
case RelationTypes.HAS_MANY: case RelationTypes.HAS_MANY:
return { icon: HMIcon, color: 'text-yellow-500' } return { icon: HMIcon, color: 'text-yellow-500' }
case RelationTypes.BELONGS_TO: case RelationTypes.BELONGS_TO:
@ -52,7 +52,7 @@ const icon = computed(() => {
case UITypes.Lookup: case UITypes.Lookup:
switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) { switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) {
case RelationTypes.MANY_TO_MANY: case RelationTypes.MANY_TO_MANY:
return { icon: TableColumnPlusBefore, color: 'text-pink-500' } return { icon: TableColumnPlusBefore, color: 'text-accent' }
case RelationTypes.HAS_MANY: case RelationTypes.HAS_MANY:
return { icon: TableColumnPlusBefore, color: 'text-yellow-500' } return { icon: TableColumnPlusBefore, color: 'text-yellow-500' }
case RelationTypes.BELONGS_TO: case RelationTypes.BELONGS_TO:
@ -62,7 +62,7 @@ const icon = computed(() => {
case UITypes.Rollup: case UITypes.Rollup:
switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) { switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) {
case RelationTypes.MANY_TO_MANY: case RelationTypes.MANY_TO_MANY:
return { icon: RollupIcon, color: 'text-pink-500' } return { icon: RollupIcon, color: 'text-accent' }
case RelationTypes.HAS_MANY: case RelationTypes.HAS_MANY:
return { icon: RollupIcon, color: 'text-yellow-500' } return { icon: RollupIcon, color: 'text-yellow-500' }
case RelationTypes.BELONGS_TO: case RelationTypes.BELONGS_TO:

2
packages/nc-gui-v2/components/smartsheet/Grid.vue
Unescape View File

@ -412,7 +412,7 @@ const onNavigate = (dir: NavigateDir) => {
class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)" class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
> >
<MdiArrowExpand <MdiArrowExpand
class="select-none transform hover:(text-pink-500 scale-120) nc-row-expand" class="select-none transform hover:(text-accent scale-120) nc-row-expand"
@click="expandForm(row, state)" @click="expandForm(row, state)"
/> />
</div> </div>

8
packages/nc-gui-v2/components/template/Editor.vue
Unescape View File

@ -700,7 +700,7 @@ onMounted(() => {
<a-button class="group" @click="addNewColumnRow(table, 'Number')"> <a-button class="group" @click="addNewColumnRow(table, 'Number')">
<div class="flex items-center"> <div class="flex items-center">
<mdi-numeric class="group-hover:!text-pink-500 flex text-lg" /> <mdi-numeric class="group-hover:!text-accent flex text-lg" />
</div> </div>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -713,7 +713,7 @@ onMounted(() => {
<a-button class="group" @click="addNewColumnRow(table, 'SingleLineText')"> <a-button class="group" @click="addNewColumnRow(table, 'SingleLineText')">
<div class="flex items-center"> <div class="flex items-center">
<mdi-alpha-a class="group-hover:!text-pink-500 text-lg" /> <mdi-alpha-a class="group-hover:!text-accent text-lg" />
</div> </div>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -726,7 +726,7 @@ onMounted(() => {
<a-button class="group" @click="addNewColumnRow(table, 'LongText')"> <a-button class="group" @click="addNewColumnRow(table, 'LongText')">
<div class="flex items-center"> <div class="flex items-center">
<mdi-text class="group-hover:!text-pink-500 text-lg" /> <mdi-text class="group-hover:!text-accent text-lg" />
</div> </div>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -739,7 +739,7 @@ onMounted(() => {
<a-button class="group" @click="addNewColumnRow(table, 'SingleLineText')"> <a-button class="group" @click="addNewColumnRow(table, 'SingleLineText')">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<mdi-plus class="group-hover:!text-pink-500 text-lg" /> <mdi-plus class="group-hover:!text-accent text-lg" />
</div> </div>
</a-button> </a-button>
</a-tooltip> </a-tooltip>

14
packages/nc-gui-v2/layouts/base.vue
Unescape View File

@ -54,19 +54,19 @@ const logout = () => {
<template #title> Switch language</template> <template #title> Switch language</template>
<div class="flex pr-4 items-center"> <div class="flex pr-4 items-center">
<GeneralLanguage class="cursor-pointer text-2xl hover:text-pink-500" /> <GeneralLanguage class="cursor-pointer text-2xl hover:text-accent" />
</div> </div>
</a-tooltip> </a-tooltip>
<template v-if="signedIn && !isSharedBase"> <template v-if="signedIn && !isSharedBase">
<a-dropdown :trigger="['click']"> <a-dropdown :trigger="['click']">
<MdiDotsVertical class="md:text-xl cursor-pointer hover:text-pink-500 nc-menu-accounts" @click.prevent /> <MdiDotsVertical class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts" @click.prevent />
<template #overlay> <template #overlay>
<a-menu class="!py-0 leading-8 !rounded"> <a-menu class="!py-0 leading-8 !rounded">
<a-menu-item key="0" class="!rounded-t"> <a-menu-item key="0" class="!rounded-t">
<nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group no-underline" to="/user"> <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group no-underline" to="/user">
<MdiAt class="mt-1 group-hover:text-pink-500" />&nbsp; <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
<span class="prose group-hover:text-primary"> {{ email }}</span> <span class="prose group-hover:text-primary"> {{ email }}</span>
</nuxt-link> </nuxt-link>
@ -76,7 +76,7 @@ const logout = () => {
<a-menu-item key="1" class="!rounded-b group"> <a-menu-item key="1" class="!rounded-b group">
<div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout"> <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
<MdiLogout class="group-hover:text-pink-500" />&nbsp; <MdiLogout class="group-hover:text-accent" />&nbsp;
<span class="prose group-hover:text-primary"> <span class="prose group-hover:text-primary">
{{ $t('general.signOut') }} {{ $t('general.signOut') }}
@ -109,7 +109,7 @@ const logout = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.nc-lang-btn { .nc-lang-btn {
@apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white active:(ring ring-pink-500) hover:(ring ring-pink-500); @apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white active:(ring ring-accent) hover:(ring ring-accent);
&::after { &::after {
@apply rounded-full absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary; @apply rounded-full absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
@ -118,11 +118,11 @@ const logout = () => {
} }
&:hover::after { &:hover::after {
@apply transform scale-110 ring ring-pink-500; @apply transform scale-110 ring ring-accent;
} }
&:active::after { &:active::after {
@apply ring ring-pink-500; @apply ring ring-accent;
} }
} }
</style> </style>

30
packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
Unescape View File

@ -186,7 +186,7 @@ const copyAuthToken = async () => {
</a-tooltip> </a-tooltip>
<div v-else class="text-lg font-semibold truncate">{{ project.title }}</div> <div v-else class="text-lg font-semibold truncate">{{ project.title }}</div>
<MdiChevronDown class="min-w-[28.5px] group-hover:text-pink-500 text-2xl" /> <MdiChevronDown class="min-w-[28.5px] group-hover:text-accent text-2xl" />
</template> </template>
<template v-else> <template v-else>
@ -199,7 +199,7 @@ const copyAuthToken = async () => {
<a-menu-item-group> <a-menu-item-group>
<template #title> <template #title>
<div class="group select-none flex items-center gap-4 py-1"> <div class="group select-none flex items-center gap-4 py-1">
<MdiFolder class="group-hover:text-pink-500 text-xl" /> <MdiFolder class="group-hover:text-accent text-xl" />
<div class="flex flex-col"> <div class="flex flex-col">
<div class="text-lg group-hover:(!text-primary) font-semibold truncate">{{ project.title }}</div> <div class="text-lg group-hover:(!text-primary) font-semibold truncate">{{ project.title }}</div>
@ -207,7 +207,7 @@ const copyAuthToken = async () => {
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<div class="group-hover:(!text-primary)">ID:</div> <div class="group-hover:(!text-primary)">ID:</div>
<div class="text-xs group-hover:text-pink-500 truncate font-italic">{{ project.id }}</div> <div class="text-xs group-hover:text-accent truncate font-italic">{{ project.id }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -215,7 +215,7 @@ const copyAuthToken = async () => {
<a-menu-item key="copy"> <a-menu-item key="copy">
<div class="nc-project-menu-item group" @click.stop="copyProjectInfo"> <div class="nc-project-menu-item group" @click.stop="copyProjectInfo">
<MdiContentCopy class="group-hover:text-pink-500" /> <MdiContentCopy class="group-hover:text-accent" />
Copy Project Info Copy Project Info
</div> </div>
</a-menu-item> </a-menu-item>
@ -229,14 +229,14 @@ const copyAuthToken = async () => {
class="nc-project-menu-item group" class="nc-project-menu-item group"
@click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)" @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
> >
<MdiApi class="group-hover:text-pink-500" /> <MdiApi class="group-hover:text-accent" />
Swagger: Rest APIs Swagger: Rest APIs
</div> </div>
</a-menu-item> </a-menu-item>
<a-menu-item key="copy"> <a-menu-item key="copy">
<div v-t="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken"> <div v-t="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken">
<MdiScriptTextKeyOutline class="group-hover:text-pink-500" /> <MdiScriptTextKeyOutline class="group-hover:text-accent" />
Copy Auth Token Copy Auth Token
</div> </div>
</a-menu-item> </a-menu-item>
@ -250,7 +250,7 @@ const copyAuthToken = async () => {
class="nc-project-menu-item group" class="nc-project-menu-item group"
@click="toggleDialog(true, 'teamAndAuth')" @click="toggleDialog(true, 'teamAndAuth')"
> >
<MdiCog class="group-hover:text-pink-500" /> <MdiCog class="group-hover:text-accent" />
Team & Settings Team & Settings
</div> </div>
</a-menu-item> </a-menu-item>
@ -260,13 +260,13 @@ const copyAuthToken = async () => {
<a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as"> <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as">
<template #title> <template #title>
<div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group"> <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
<MdiFileEyeOutline class="group-hover:text-pink-500" /> <MdiFileEyeOutline class="group-hover:text-accent" />
Preview Project As Preview Project As
<div class="flex-1" /> <div class="flex-1" />
<MaterialSymbolsChevronRightRounded <MaterialSymbolsChevronRightRounded
class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400" class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
/> />
</div> </div>
</template> </template>
@ -279,12 +279,12 @@ const copyAuthToken = async () => {
<a-sub-menu key="language" class="lang-menu scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0"> <a-sub-menu key="language" class="lang-menu scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0">
<template #title> <template #title>
<div class="nc-project-menu-item group"> <div class="nc-project-menu-item group">
<MaterialSymbolsTranslate class="group-hover:text-pink-500 nc-language" /> <MaterialSymbolsTranslate class="group-hover:text-accent nc-language" />
Language Language
<div class="flex-1" /> <div class="flex-1" />
<MaterialSymbolsChevronRightRounded <MaterialSymbolsChevronRightRounded
class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400" class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
/> />
</div> </div>
</template> </template>
@ -297,12 +297,12 @@ const copyAuthToken = async () => {
<a-sub-menu v-if="isUIAllowed('previewAs')" key="account"> <a-sub-menu v-if="isUIAllowed('previewAs')" key="account">
<template #title> <template #title>
<div class="nc-project-menu-item group"> <div class="nc-project-menu-item group">
<MdiAccount class="group-hover:text-pink-500" /> <MdiAccount class="group-hover:text-accent" />
Account Account
<div class="flex-1" /> <div class="flex-1" />
<MaterialSymbolsChevronRightRounded <MaterialSymbolsChevronRightRounded
class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400" class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
/> />
</div> </div>
</template> </template>
@ -311,7 +311,7 @@ const copyAuthToken = async () => {
<a-menu-item key="0" class="!rounded-t"> <a-menu-item key="0" class="!rounded-t">
<nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group no-underline" to="/user"> <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group no-underline" to="/user">
<MdiAt class="mt-1 group-hover:text-pink-500" />&nbsp; <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
<span class="prose-sm">{{ email }}</span> <span class="prose-sm">{{ email }}</span>
</nuxt-link> </nuxt-link>
@ -319,7 +319,7 @@ const copyAuthToken = async () => {
<a-menu-item key="1" class="!rounded-b"> <a-menu-item key="1" class="!rounded-b">
<div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout"> <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
<MdiLogout class="group-hover:(!text-pink-500)" />&nbsp; <MdiLogout class="group-hover:(!text-accent)" />&nbsp;
<span class="prose-sm"> <span class="prose-sm">
{{ $t('general.signOut') }} {{ $t('general.signOut') }}

2
packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
Unescape View File

@ -121,7 +121,7 @@ function openQuickImportDialog(type: QuickImportTypes, file: File) {
class="text-3xl flex items-center justify-center gap-2 border-1 border-dashed rounded hover:border-primary" class="text-3xl flex items-center justify-center gap-2 border-1 border-dashed rounded hover:border-primary"
@click="open" @click="open"
> >
<template v-if="isOverDropZone"> <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here </template> <template v-if="isOverDropZone"> <MaterialSymbolsFileCopyOutline class="text-accent" /> Drop here </template>
</general-overlay> </general-overlay>
<div class="flex flex-col gap-6 items-center justify-center md:w-1/2 mx-auto text-center"> <div class="flex flex-col gap-6 items-center justify-center md:w-1/2 mx-auto text-center">

12
packages/nc-gui-v2/pages/index/index.vue
Unescape View File

@ -81,12 +81,12 @@ onMounted(() => {
<a-tooltip title="Reload projects"> <a-tooltip title="Reload projects">
<span <span
class="transition-all duration-200 h-full flex items-center group hover:ring active:(ring ring-pink-500) rounded-full mt-1" class="transition-all duration-200 h-full flex items-center group hover:ring active:(ring ring-accent) rounded-full mt-1"
:class="isLoading ? 'animate-spin ring ring-gray-200' : ''" :class="isLoading ? 'animate-spin ring ring-gray-200' : ''"
> >
<MdiRefresh <MdiRefresh
v-t="['a:project:refresh']" v-t="['a:project:refresh']"
class="text-xl text-gray-500 group-hover:text-pink-500 cursor-pointer" class="text-xl text-gray-500 group-hover:text-accent cursor-pointer"
:class="isLoading ? '!text-primary' : ''" :class="isLoading ? '!text-primary' : ''"
@click="loadProjects" @click="loadProjects"
/> />
@ -165,7 +165,7 @@ onMounted(() => {
<a-table-column key="title" :title="$t('general.title')" data-index="title"> <a-table-column key="title" :title="$t('general.title')" data-index="title">
<template #default="{ text }"> <template #default="{ text }">
<div <div
class="capitalize color-transition group-hover:text-pink-500 !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap" class="capitalize color-transition group-hover:text-accent !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap"
> >
{{ text }} {{ text }}
</div> </div>
@ -204,7 +204,7 @@ onMounted(() => {
<style scoped> <style scoped>
.nc-action-btn { .nc-action-btn {
@apply text-gray-500 hover:(text-pink-500 ring) active:(ring ring-pink-500) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full; @apply text-gray-500 hover:(text-accent ring) active:(ring ring-accent) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
} }
.nc-new-project-menu { .nc-new-project-menu {
@ -217,11 +217,11 @@ onMounted(() => {
} }
&:hover::after { &:hover::after {
@apply transform scale-110 ring ring-pink-500; @apply transform scale-110 ring ring-accent;
} }
&:active::after { &:active::after {
@apply ring ring-pink-500; @apply ring ring-accent;
} }
} }

Write Preview
Loading…
Cancel
Save