Browse Source

Merge pull request #3287 from nocodb/fix/menu-active-styles

pull/3298/head
Braks 2 years ago committed by GitHub
parent
commit
8680074c3c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 38
      packages/nc-gui-v2/components/dashboard/settings/Modal.vue
  2. 4
      packages/nc-gui-v2/components/general/HelpAndSupport.vue
  3. 8
      packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
  4. 2
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
  5. 12
      packages/nc-gui-v2/windi.config.ts

38
packages/nc-gui-v2/components/dashboard/settings/Modal.vue

@ -1,19 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import type { FunctionalComponent, SVGAttributes } from 'vue' import type { FunctionalComponent, SVGAttributes } from 'vue'
import { useI18n } from 'vue-i18n'
import AuditTab from './AuditTab.vue' import AuditTab from './AuditTab.vue'
import AppStore from './AppStore.vue' import AppStore from './AppStore.vue'
import Metadata from './Metadata.vue' import Metadata from './Metadata.vue'
import UIAcl from './UIAcl.vue' import UIAcl from './UIAcl.vue'
import Misc from './Misc.vue' import Misc from './Misc.vue'
import { useI18n, useUIPermission, useVModel, watch } from '#imports'
import ApiTokenManagement from '~/components/tabs/auth/ApiTokenManagement.vue' import ApiTokenManagement from '~/components/tabs/auth/ApiTokenManagement.vue'
import UserManagement from '~/components/tabs/auth/UserManagement.vue' import UserManagement from '~/components/tabs/auth/UserManagement.vue'
import StoreFrontOutline from '~icons/mdi/storefront-outline' import StoreFrontOutline from '~icons/mdi/storefront-outline'
import TeamFillIcon from '~icons/ri/team-fill' import TeamFillIcon from '~icons/ri/team-fill'
import MultipleTableIcon from '~icons/mdi/table-multiple' import MultipleTableIcon from '~icons/mdi/table-multiple'
import NootbookOutline from '~icons/mdi/notebook-outline' import NootbookOutline from '~icons/mdi/notebook-outline'
import { useUIPermission, useVModel, watch } from '#imports'
import MdiCloseIcon from '~icons/mdi/close'
interface Props { interface Props {
modelValue: boolean modelValue: boolean
@ -140,22 +138,27 @@ watch(
> >
<div class="flex flex-row justify-between w-full items-center mb-1"> <div class="flex flex-row justify-between w-full items-center mb-1">
<a-typography-title class="ml-4 select-none" type="secondary" :level="5">SETTINGS</a-typography-title> <a-typography-title class="ml-4 select-none" type="secondary" :level="5">SETTINGS</a-typography-title>
<a-button type="text" class="!rounded-md border-none -mt-1.5 -mr-1" @click="vModel = false"> <a-button type="text" class="!rounded-md border-none -mt-1.5 -mr-1" @click="vModel = false">
<template #icon> <template #icon>
<MdiCloseIcon class="cursor-pointer mt-1 nc-modal-close" /> <MdiClose class="cursor-pointer mt-1 nc-modal-close" />
</template> </template>
</a-button> </a-button>
</div> </div>
<a-layout class="mt-3 modal-body flex"> <a-layout class="mt-3 h-[75vh] overflow-y-auto flex">
<!-- Side tabs --> <!-- Side tabs -->
<a-layout-sider theme="light"> <a-layout-sider>
<a-menu v-model:selected-keys="selectedTabKeys" class="h-full" mode="inline" :open-keys="[]"> <a-menu v-model:selected-keys="selectedTabKeys" class="tabs-menu h-full" :open-keys="[]">
<a-menu-item v-for="(tab, key) of tabsInfo" :key="key"> <a-menu-item
<div class="flex flex-row items-center space-x-2"> v-for="(tab, key) of tabsInfo"
<component :is="tab.icon" class="flex" /> :key="key"
class="group active:(!ring-0) hover:(!bg-primary !bg-opacity-25)"
<div class="flex select-none"> >
<div class="flex items-center space-x-2">
<component :is="tab.icon" class="group-hover:text-accent" />
<div class="select-none">
{{ tab.title }} {{ tab.title }}
</div> </div>
</div> </div>
@ -166,7 +169,7 @@ watch(
<!-- Sub Tabs --> <!-- Sub Tabs -->
<a-layout-content class="h-auto px-4 scrollbar-thumb-gray-500"> <a-layout-content class="h-auto px-4 scrollbar-thumb-gray-500">
<a-menu v-model:selectedKeys="selectedSubTabKeys" :open-keys="[]" mode="horizontal"> <a-menu v-model:selectedKeys="selectedSubTabKeys" :open-keys="[]" mode="horizontal">
<a-menu-item v-for="(tab, key) of selectedTab.subTabs" :key="key" class="select-none"> <a-menu-item v-for="(tab, key) of selectedTab.subTabs" :key="key" class="active:(!ring-0) select-none">
{{ tab.title }} {{ tab.title }}
</a-menu-item> </a-menu-item>
</a-menu> </a-menu>
@ -177,9 +180,10 @@ watch(
</a-modal> </a-modal>
</template> </template>
<style scoped> <style lang="scss" scoped>
.modal-body { .tabs-menu {
@apply h-[75vh]; :deep(.ant-menu-item-selected) {
@apply overflow-y-auto; @apply border-r-3 border-primary bg-primary !bg-opacity-25;
}
} }
</style> </style>

4
packages/nc-gui-v2/components/general/HelpAndSupport.vue

@ -36,12 +36,12 @@ const openSwaggerLink = () => {
<!-- todo: i18n --> <!-- todo: i18n -->
<a-typography-title :level="4" class="!mb-6 !text-gray-500">Help center</a-typography-title> <a-typography-title :level="4" class="!mb-6 !text-gray-500">Help center</a-typography-title>
<GeneralSocialCard show-swagger-link class="!w-full nc-social-card"> <GeneralSocialCard class="!w-full nc-social-card">
<template #before> <template #before>
<a-list-item v-if="project"> <a-list-item v-if="project">
<nuxt-link <nuxt-link
v-t="['e:docs']" v-t="['e:docs']"
class="text-primary !no-underline !text-current py-4 font-weight-medium" class="!no-underline !text-current py-4 font-semibold"
target="_blank" target="_blank"
@click="openSwaggerLink" @click="openSwaggerLink"
> >

8
packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue

@ -1,6 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, inject, ref, useSmartsheetStoreOrThrow } from '#imports' import { ReloadViewDataHookInj, computed, inject, onClickOutside, ref, useSmartsheetStoreOrThrow } from '#imports'
import { ReloadViewDataHookInj } from '~/context'
const reloadData = inject(ReloadViewDataHookInj)! const reloadData = inject(ReloadViewDataHookInj)!
@ -8,7 +7,9 @@ const { search, meta } = useSmartsheetStoreOrThrow()
// todo: where is this value supposed to come from? it's not in the store // todo: where is this value supposed to come from? it's not in the store
const isDropdownOpen = ref(false) const isDropdownOpen = ref(false)
const searchDropdown = ref(null) const searchDropdown = ref(null)
onClickOutside(searchDropdown, () => (isDropdownOpen.value = false)) onClickOutside(searchDropdown, () => (isDropdownOpen.value = false))
const columns = computed(() => const columns = computed(() =>
@ -42,8 +43,7 @@ function onPressEnter() {
:options="columns" :options="columns"
dropdown-class-name="!py-0 !rounded" dropdown-class-name="!py-0 !rounded"
class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0" class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
> />
</a-select>
</div> </div>
<a-input <a-input
v-model:value="search.query" v-model:value="search.query"

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

@ -362,6 +362,8 @@ const onMenuClose = (visible: boolean) => {
</div> </div>
</template> </template>
<template #expandIcon></template>
<a-menu-item> <a-menu-item>
<div class="nc-project-menu-item group" @click.stop="openColorPicker('primary')"> <div class="nc-project-menu-item group" @click.stop="openColorPicker('primary')">
<ClarityColorPickerSolid class="group-hover:text-accent" /> <ClarityColorPickerSolid class="group-hover:text-accent" />

12
packages/nc-gui-v2/windi.config.ts

@ -57,6 +57,18 @@ export default defineConfig({
primary: 'rgba(var(--color-primary), var(--tw-text-opacity))', primary: 'rgba(var(--color-primary), var(--tw-text-opacity))',
accent: 'rgba(var(--color-accent), var(--tw-text-opacity))', accent: 'rgba(var(--color-accent), var(--tw-text-opacity))',
}, },
borderColor: {
primary: 'rgba(var(--color-primary), var(--tw-border-opacity))',
accent: 'rgba(var(--color-accent), var(--tw-border-opacity))',
},
backgroundColor: {
primary: 'rgba(var(--color-primary), var(--tw-bg-opacity))',
accent: 'rgba(var(--color-accent), var(--tw-bg-opacity))',
},
ringColor: {
primary: 'rgba(var(--color-primary), var(--tw-ring-opacity))',
accent: 'rgba(var(--color-accent), var(--tw-ring-opacity))',
},
colors: { colors: {
...windiColors, ...windiColors,
...themeColors, ...themeColors,

Loading…
Cancel
Save