Browse Source

fix/Fixed styling of search and bottom buttons of tree view

pull/3288/head
Muhammed Mustafa 2 years ago
parent
commit
5e291c964f
  1. 6
      packages/nc-gui-v2/components/dashboard/TreeView.vue
  2. 85
      packages/nc-gui-v2/components/general/HelpAndSupport.vue
  3. 2
      packages/nc-gui-v2/components/general/ShareBaseButton.vue
  4. 48
      packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue

6
packages/nc-gui-v2/components/dashboard/TreeView.vue

@ -401,10 +401,10 @@ function openTableCreateDialog() {
<a-divider class="!my-0" />
<div class="flex items-start flex-col justify-start px-4 py-3 gap-2">
<GeneralShareBaseButton class="py-1 px-2 text-primary font-bold cursor-pointer select-none" />
<div class="flex items-start flex-col justify-start px-2 py-3 gap-2">
<GeneralShareBaseButton class="py-1.5 px-2 text-primary font-bold cursor-pointer select-none" />
<GeneralHelpAndSupport class="py-1 px-2 text-gray-500 cursor-pointer select-none" />
<GeneralHelpAndSupport class="px-2 text-gray-500 cursor-pointer select-none" />
<DashboardGithubStarButton class="ml-2 py-1" />
</div>

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

@ -15,54 +15,53 @@ const openSwaggerLink = () => {
</script>
<template>
<div>
<div @click="showDrawer = true">
<div class="flex items-center space-x-1">
<MdiCommentTextOutline class="mr-1 nc-share-base" />
<!-- todo: i18n -->
<div>APIs & Support</div>
</div>
</div>
<div
class="flex items-center space-x-1 w-full cursor-pointer pl-3 py-1.5 hover:(text-primary bg-primary bg-opacity-5)"
@click="showDrawer = true"
>
<MdiCommentTextOutline class="mr-1 nc-share-base" />
<!-- todo: i18n -->
<div>APIs & Support</div>
</div>
<a-drawer
v-model:visible="showDrawer"
class="h-full relative"
placement="right"
size="small"
:closable="false"
:body-style="{ padding: '12px 24px 0 24px', background: '#fafafa' }"
>
<div class="flex flex-col w-full h-full p-4 pb-0">
<!-- todo: i18n -->
<a-typography-title :level="4" class="!mb-6 !text-gray-500">Help center</a-typography-title>
<a-drawer
v-model:visible="showDrawer"
class="h-full relative"
placement="right"
size="small"
:closable="false"
:body-style="{ padding: '12px 24px 0 24px', background: '#fafafa' }"
>
<div class="flex flex-col w-full h-full p-4 pb-0">
<!-- todo: i18n -->
<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">
<template #before>
<a-list-item v-if="project">
<nuxt-link
v-t="['e:docs']"
class="text-primary !no-underline !text-current py-4 font-weight-medium"
target="_blank"
@click="openSwaggerLink"
>
<div class="ml-3 flex items-center text-sm">
<LogosSwagger />
<!-- todo: i18n -->
<span class="ml-3">{{ project.title }} : Swagger Documentation</span>
</div>
</nuxt-link>
</a-list-item>
</template>
</GeneralSocialCard>
<GeneralSocialCard show-swagger-link class="!w-full nc-social-card">
<template #before>
<a-list-item v-if="project">
<nuxt-link
v-t="['e:docs']"
class="text-primary !no-underline !text-current py-4 font-weight-medium"
target="_blank"
@click="openSwaggerLink"
>
<div class="ml-3 flex items-center text-sm">
<LogosSwagger />
<!-- todo: i18n -->
<span class="ml-3">{{ project.title }} : Swagger Documentation</span>
</div>
</nuxt-link>
</a-list-item>
</template>
</GeneralSocialCard>
<div class="flex-1 my-2"></div>
<div class="flex-1 my-2"></div>
<GeneralSponsors class="!w-full" />
<GeneralSponsors class="!w-full" />
<div class="min-h-10 w-full" />
</div>
</a-drawer>
</div>
<div class="min-h-10 w-full" />
</div>
</a-drawer>
</template>
<style scoped lang="scss">

2
packages/nc-gui-v2/components/general/ShareBaseButton.vue

@ -9,7 +9,7 @@ const { isUIAllowed } = useUIPermission()
</script>
<template>
<div class="flex items-center">
<div class="flex items-center w-full pl-3 hover:(text-primary bg-primary bg-opacity-5)">
<div
v-if="
isUIAllowed('newUser') &&

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

@ -8,6 +8,8 @@ const { search, meta } = useSmartsheetStoreOrThrow()
// todo: where is this value supposed to come from? it's not in the store
const isDropdownOpen = ref(false)
const searchDropdown = ref(null)
onClickOutside(searchDropdown, () => (isDropdownOpen.value = false))
const columns = computed(() =>
meta.value?.columns?.map((c) => ({
@ -22,21 +24,35 @@ function onPressEnter() {
</script>
<template>
<a-input v-model:value="search.query" size="small" class="max-w-[200px]" placeholder="Filter query" @press-enter="onPressEnter">
<template #addonBefore>
<div class="flex items-center relative" @click="isDropdownOpen = true">
<MdiMagnify class="text-grey" />
<MdiMenuDown class="text-grey" />
<div class="flex flex-row border-1 rounded-sm">
<div
ref="searchDropdown"
class="flex items-center relative bg-gray-50 px-2 cursor-pointer border-r-1"
:class="{ '!bg-gray-100 ': isDropdownOpen }"
@click="isDropdownOpen = !isDropdownOpen"
>
<MdiMagnify class="text-grey" />
<MdiMenuDown class="text-grey" />
<a-select
v-model:value="search.field"
size="small"
:dropdown-match-select-width="false"
:options="columns"
class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
>
</a-select>
</div>
</template>
</a-input>
<a-select
v-model:value="search.field"
:open="isDropdownOpen"
size="small"
:dropdown-match-select-width="false"
:options="columns"
class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
>
</a-select>
</div>
<a-input
v-model:value="search.query"
size="small"
class="max-w-[200px]"
placeholder="Filter query"
:bordered="false"
@press-enter="onPressEnter"
>
<template #addonBefore> </template>
</a-input>
</div>
</template>

Loading…
Cancel
Save