mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
1.8 KiB
74 lines
1.8 KiB
<script lang="ts" setup> |
|
import { storeToRefs, useViewsStore } from '#imports' |
|
|
|
const { openedViewsTab, activeView } = storeToRefs(useViewsStore()) |
|
|
|
const { isUIAllowed } = useRoles() |
|
|
|
const { onViewsTabChange } = useViewsStore() |
|
|
|
const onClickDetails = () => { |
|
if (isUIAllowed('fieldAdd')) { |
|
onViewsTabChange('field') |
|
} else { |
|
onViewsTabChange('relation') |
|
} |
|
} |
|
</script> |
|
|
|
<template> |
|
<div class="flex flex-row p-1 mx-3 mt-3 mb-3 bg-gray-100 rounded-lg gap-x-0.5 nc-view-sidebar-tab"> |
|
<div |
|
v-e="['c:project:mode:data']" |
|
class="tab" |
|
:class="{ |
|
active: openedViewsTab === 'view', |
|
}" |
|
@click="onViewsTabChange('view')" |
|
> |
|
<GeneralViewIcon v-if="activeView?.type" class="tab-icon" :meta="{ type: activeView?.type }" ignore-color /> |
|
<GeneralLoader v-else class="tab-icon" /> |
|
<div class="tab-title nc-tab">{{ $t('general.data') }}</div> |
|
</div> |
|
<div |
|
v-e="['c:project:mode:details']" |
|
class="tab" |
|
:class="{ |
|
active: openedViewsTab !== 'view', |
|
}" |
|
@click="onClickDetails" |
|
> |
|
<GeneralIcon |
|
icon="erd" |
|
class="tab-icon" |
|
:class="{}" |
|
:style="{ |
|
fontWeight: 500, |
|
}" |
|
/> |
|
<div class="tab-title nc-tab">{{ $t('general.details') }}</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<style scoped> |
|
.tab { |
|
@apply flex flex-row items-center h-7.5 justify-center px-2 py-1 bg-gray-100 rounded-lg gap-x-1.5 text-gray-500 hover:text-black cursor-pointer transition-all duration-300 select-none; |
|
} |
|
|
|
.tab-icon { |
|
font-size: 1.1rem !important; |
|
@apply min-w-4.5; |
|
} |
|
.tab .tab-title { |
|
@apply min-w-0; |
|
word-break: 'keep-all'; |
|
white-space: 'nowrap'; |
|
display: 'inline'; |
|
line-height: 0.95; |
|
} |
|
|
|
.active { |
|
@apply bg-white shadow text-brand-500 hover:text-brand-500; |
|
} |
|
</style>
|
|
|