Browse Source

feat(gui-v2): add dropdown to projects icon in sidebar

pull/3023/head
braks 2 years ago
parent
commit
643f36599c
  1. 46
      packages/nc-gui-v2/app.vue
  2. 1
      packages/nc-gui-v2/components.d.ts

46
packages/nc-gui-v2/app.vue

@ -45,9 +45,9 @@ const logout = () => {
</div> </div>
<template v-if="signedIn" #overlay> <template v-if="signedIn" #overlay>
<a-menu class="ml-2 !py-0 nc-user-menu min-w-32 dark:(!bg-gray-800) leading-8 !rounded"> <a-menu class="ml-2 !py-0 min-w-32 leading-8 !rounded">
<a-menu-item-group title="User Settings"> <a-menu-item-group title="User Settings">
<a-menu-item key="0" class="!rounded-t"> <a-menu-item key="email" class="!rounded-t">
<nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user"> <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
<MdiAt class="mt-1 group-hover:text-success" /> <MdiAt class="mt-1 group-hover:text-success" />
&nbsp; &nbsp;
@ -57,7 +57,7 @@ const logout = () => {
<a-menu-divider class="!m-0" /> <a-menu-divider class="!m-0" />
<a-menu-item key="1" class="!rounded-b"> <a-menu-item key="signout" class="!rounded-b">
<div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout"> <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout">
<MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp; <MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
<span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout"> <span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">
@ -71,13 +71,45 @@ const logout = () => {
</a-dropdown> </a-dropdown>
<div id="sidebar" ref="sidebar" class="text-white flex-auto flex flex-col items-center w-full"> <div id="sidebar" ref="sidebar" class="text-white flex-auto flex flex-col items-center w-full">
<a-tooltip placement="right"> <a-dropdown placement="right">
<template #title>My Projects</template>
<div :class="[route.name === 'index' ? 'active' : '']" class="nc-sidebar-left-item" @click="navigateTo('/')"> <div :class="[route.name === 'index' ? 'active' : '']" class="nc-sidebar-left-item" @click="navigateTo('/')">
<MdiFolder class="cursor-pointer transform hover:scale-105 text-2xl" /> <MdiFolder class="cursor-pointer transform hover:scale-105 text-2xl" />
</div> </div>
</a-tooltip>
<template #overlay>
<a-menu class="mt-6 select-none !py-0 min-w-32 leading-8 !rounded">
<a-menu-item-group>
<template #title>
<span class="cursor-pointer prose-sm text-gray-500 hover:text-primary" @click="navigateTo('/')">
{{ $t('objects.projects') }}
</span>
</template>
<a-menu-item class="active:(ring ring-pink-500)">
<div
v-t="['c:project:create:xcdb']"
class="group flex items-center gap-2 py-2 hover:text-primary"
@click="navigateTo('/project/create')"
>
<MdiPlus class="text-lg group-hover:text-pink-500" />
{{ $t('activity.createProject') }}
</div>
</a-menu-item>
<a-menu-item class="rounded-b active:(ring ring-pink-500)">
<div
v-t="['c:project:create:extdb']"
class="group flex items-center gap-2 py-2 hover:text-primary"
@click="navigateTo('/project/create-external')"
>
<MdiDatabaseOutline class="text-lg group-hover:text-pink-500" />
<div v-html="$t('activity.createProjectExtended.extDB')" />
</div>
</a-menu-item>
</a-menu-item-group>
</a-menu>
</template>
</a-dropdown>
<a-tooltip placement="right"> <a-tooltip placement="right">
<template v-if="project" #title>{{ project.title }}</template> <template v-if="project" #title>{{ project.title }}</template>

1
packages/nc-gui-v2/components.d.ts vendored

@ -76,6 +76,7 @@ declare module '@vue/runtime-core' {
MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default'] MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
MdiContentCopy: typeof import('~icons/mdi/content-copy')['default'] MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
MdiDatabase: typeof import('~icons/mdi/database')['default'] MdiDatabase: typeof import('~icons/mdi/database')['default']
MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default']
MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default'] MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default'] MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
MdiDrag: typeof import('~icons/mdi/drag')['default'] MdiDrag: typeof import('~icons/mdi/drag')['default']

Loading…
Cancel
Save