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

refactor(gui-v2): noco icon placement

pull/3023/head
braks 2 years ago
parent
9022aa6bcc
commit
fdf67aca70
2 changed files with 131 additions and 97 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      packages/nc-gui-v2/layouts/base.vue
  2. 222
      packages/nc-gui-v2/pages/nc/[projectId]/index.vue

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

@ -26,7 +26,11 @@ const logout = () => {
<a-layout class="!flex-col">
<a-layout-header class="flex !bg-primary items-center text-white pl-1 pr-4 shadow-lg">
<div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105" @click="navigateTo('/')">
<div
v-if="route.name === 'index'"
class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105"
@click="navigateTo('/')"
>
<img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
</div>

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { provideSidebar, ref, useProject, useRoute, useSidebar, useTabs, useUIPermission } from '#imports'
import { navigateTo, provideSidebar, ref, useProject, useRoute, useSidebar, useTabs, useUIPermission } from '#imports'
import { TabType } from '~/composables'
const route = useRoute()
@ -48,108 +48,138 @@ await loadTables()
collapsible
theme="light"
>
<a-dropdown :trigger="['click']">
<div style="height: var(--header-height)" class="border-b-1 group cursor-pointer w-full flex gap-4 items-center px-3">
<template v-if="isOpen">
<div class="text-xl font-semibold truncate">{{ project.title }}</div>
<div style="height: var(--header-height)" class="flex items-center !bg-primary text-white px-1 gap-2">
<div
v-if="isOpen"
class="w-[50px] transition-all duration-200 p-1 cursor-pointer transform hover:scale-105"
@click="navigateTo('/')"
>
<img alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
</div>
<MdiChevronDown class="min-w-[28.5px] group-hover:text-pink-500 text-2xl" />
</template>
<a-dropdown :trigger="['click']">
<div :class="[isOpen ? '' : 'justify-center']" class="group cursor-pointer w-full flex-1 flex gap-4 items-center">
<template v-if="isOpen">
<div class="text-xl font-semibold truncate">{{ project.title }}</div>
<template v-else>
<MdiFolder class="text-pink-500 cursor-pointer transform hover:scale-105 text-2xl" />
</template>
</div>
<MdiChevronDown class="min-w-[28.5px] group-hover:text-pink-500 text-2xl" />
</template>
<template #overlay>
<a-menu class="ml-2 !p-0 min-w-32 leading-8 !rounded">
<a-menu-item-group title="Project Settings">
<a-menu-item key="copy">
<div class="nc-project-menu-item group">
<MdiContentCopy class="group-hover:text-pink-500" />
Copy Project Info
</div>
</a-menu-item>
<a-menu-item key="api">
<a
v-if="isUIAllowed('apiDocs')"
v-t="['e:api-docs']"
:href="`/api/v1/db/meta/projects/${route.params.projectId}/swagger`"
target="_blank"
class="nc-project-menu-item group"
>
<MdiApi class="group-hover:text-pink-500" />
Swagger: Rest APIs
</a>
</a-menu-item>
<a-menu-divider />
<a-menu-item key="teamAndAuth">
<div
v-if="isUIAllowed('settings')"
v-t="['c:navdraw:project-settings']"
class="nc-project-menu-item group"
@click="toggleDialog(true, 'teamAndAuth')"
>
<MdiAccountGroup class="group-hover:text-pink-500" />
Team & Auth
</div>
</a-menu-item>
<a-menu-item key="appStore">
<div
v-if="isUIAllowed('settings')"
v-t="['c:navdraw:project-settings']"
class="nc-project-menu-item group"
@click="toggleDialog(true, 'appStore')"
>
<MdiStore class="group-hover:text-pink-500" />
App Store
</div>
</a-menu-item>
<a-menu-item key="metaData">
<div
v-if="isUIAllowed('settings')"
v-t="['c:navdraw:project-settings']"
class="nc-project-menu-item group"
@click="toggleDialog(true, 'metaData')"
>
<MdiTableBorder class="group-hover:text-pink-500" />
Project Metadata
</div>
</a-menu-item>
<a-menu-item key="audit">
<div
v-if="isUIAllowed('settings')"
v-t="['c:navdraw:project-settings']"
class="nc-project-menu-item group"
@click="toggleDialog(true, 'audit')"
>
<MdiNotebookCheckOutline class="group-hover:text-pink-500" />
Audit
</div>
</a-menu-item>
<a-menu-divider />
<a-sub-menu key="preview-as">
<template v-else>
<MdiFolder class="text-primary cursor-pointer transform hover:scale-105 text-2xl" />
</template>
</div>
<template #overlay>
<a-menu class="ml-6 !w-[300px] !p-0 !rounded">
<a-menu-item-group>
<template #title>
<div class="group select-none flex items-center gap-4 py-1">
<MdiFolder class="group-hover:text-pink-500 text-xl" />
<div class="flex flex-col">
<div class="text-lg group-hover:(!text-primary) font-semibold truncate">{{ project.title }}</div>
<div class="text-xs group-hover:text-pink-500 truncate font-italic">{{ project.id }}</div>
</div>
</div>
</template>
<a-menu-item key="copy">
<div class="nc-project-menu-item group">
<MdiContentCopy class="group-hover:text-pink-500" />
Preview Project As
Copy Project Info
</div>
</template>
</a-menu-item>
<a-menu-item key="api">
<a
v-if="isUIAllowed('apiDocs')"
v-t="['e:api-docs']"
:href="`/api/v1/db/meta/projects/${route.params.projectId}/swagger`"
target="_blank"
class="nc-project-menu-item group"
>
<MdiApi class="group-hover:text-pink-500" />
Swagger: Rest APIs
</a>
</a-menu-item>
<a-menu-divider />
<a-menu-item key="teamAndAuth">
<div
v-if="isUIAllowed('settings')"
v-t="['c:navdraw:project-settings']"
class="nc-project-menu-item group"
@click="toggleDialog(true, 'teamAndAuth')"
>
<MdiAccountGroup class="group-hover:text-pink-500" />
Team & Auth
</div>
</a-menu-item>
<a-menu-item key="appStore">
<div
v-if="isUIAllowed('settings')"
v-t="['c:navdraw:project-settings']"
class="nc-project-menu-item group"
@click="toggleDialog(true, 'appStore')"
>
<MdiStore class="group-hover:text-pink-500" />
App Store
</div>
</a-menu-item>
<a-menu-item key="metaData">
<div
v-if="isUIAllowed('settings')"
v-t="['c:navdraw:project-settings']"
class="nc-project-menu-item group"
@click="toggleDialog(true, 'metaData')"
>
<MdiTableBorder class="group-hover:text-pink-500" />
Project Metadata
</div>
</a-menu-item>
<a-menu-item key="audit">
<div
v-if="isUIAllowed('settings')"
v-t="['c:navdraw:project-settings']"
class="nc-project-menu-item group"
@click="toggleDialog(true, 'audit')"
>
<MdiNotebookCheckOutline class="group-hover:text-pink-500" />
Audit
</div>
</a-menu-item>
<a-menu-divider />
<a-menu-item> Foo </a-menu-item>
</a-sub-menu>
</a-menu-item-group>
</a-menu>
</template>
</a-dropdown>
<a-sub-menu key="preview-as">
<template #title>
<div class="nc-project-menu-item group">
<MdiContentCopy class="group-hover:text-pink-500" />
Preview Project As
<div class="flex-1" />
<MaterialSymbolsChevronRightRounded
class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
/>
</div>
</template>
<template #expandIcon></template>
<a-menu-item> Foo </a-menu-item>
</a-sub-menu>
</a-menu-item-group>
</a-menu>
</template>
</a-dropdown>
</div>
<a-tooltip placement="right">
<template #title> Toggle table list </template>
@ -183,7 +213,7 @@ await loadTables()
<style lang="scss" scoped>
.nc-project-menu-item {
@apply cursor-pointer flex items-center gap-2 py-3 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
@apply cursor-pointer flex items-center gap-2 py-2 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
}
:deep(.ant-dropdown-menu-item-group-title) {

Write Preview
Loading…
Cancel
Save