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

fix(nc-gui): update marketplace modal

pull/9351/head
Ramesh Mane 3 months ago
parent
d067afa919
commit
2976e70feb
1 changed files with 117 additions and 57 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. 174
      packages/nc-gui/components/extensions/Market.vue

174
packages/nc-gui/components/extensions/Market.vue
Unescape View File

@ -37,7 +37,7 @@ const onAddExtension = (ext: any) => {
v-model:visible="vModel"
:class="{ active: vModel }"
:footer="null"
:width="1154"
:width="1024"
size="medium"
wrap-class-name="nc-modal-extension-market"
>
@ -50,67 +50,104 @@ const onAddExtension = (ext: any) => {
</NcButton>
</div>
<div class="flex flex-col h-[calc(100%_-_65px)] px-6 py-4">
<div class="h-full flex flex-col gap-6 flex-1 pt-2">
<div class="flex flex max-w-[470px]">
<a-input
v-model:value="searchQuery"
type="text"
class="nc-input-border-on-value !h-8 !px-3 !py-1 !rounded-lg"
placeholder="Search for an extension..."
allow-clear
>
<template #prefix>
<GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
</template>
</a-input>
</div>
<div
class="max-h-[calc(100%_-_40px)] flex flex-wrap gap-3 nc-scrollbar-thin pb-2"
:class="{
'h-full': searchQuery && !filteredAvailableExtensions.length && availableExtensions.length,
}"
>
<template v-for="ext of filteredAvailableExtensions" :key="ext.id">
<div
class="nc-market-extension-item w-full md:w-[calc(50%_-_6px)] flex items-center gap-3 border-1 rounded-xl p-3 cursor-pointer hover:bg-gray-50 transition-all"
@click="onExtensionClick(ext.id)"
>
<div class="h-[60px] w-[60px] overflow-hidden m-auto flex-none">
<img :src="getExtensionAssetsUrl(ext.iconUrl)" alt="icon" class="w-full h-full object-contain" />
</div>
<div class="flex-1 flex flex-grow flex-col gap-1">
<div class="font-weight-600 text-base line-clamp-1">
{{ ext.title }}
</div>
<div class="flex flex-col h-[calc(100%_-_65px)]">
<NcTabs class="h-full">
<template #leftExtra>
<div class="w-2"></div>
</template>
<div class="max-h-[32px] text-xs text-gray-500 line-clamp-2">{{ ext.subTitle }}</div>
</div>
<NcButton size="xsmall" type="secondary" class="flex-none !px-7px" @click.stop="onAddExtension(ext)">
<div class="flex items-center gap-1 -ml-3px text-small">
<GeneralIcon icon="plus" />
{{ $t('general.add') }}
</div>
</NcButton>
<a-tab-pane key="integrations" class="w-full h-full">
<template #tab>
<div class="tab-title">
{{ $t('general.extensions') }}
</div>
</template>
<div
v-if="searchQuery && !filteredAvailableExtensions.length && availableExtensions.length"
class="w-full h-full flex items-center justify-center"
>
<div class="pb-6 text-gray-500 flex flex-col items-center gap-6 text-center">
<img
src="~assets/img/placeholder/no-search-result-found.png"
class="!w-[164px] flex-none"
alt="No search results found"
/>
{{ $t('title.noResultsMatchedYourSearch') }}
<div class="h-full py-6">
<div class="h-full flex flex-col gap-6 flex-1">
<div class="flex flex max-w-[470px] px-6">
<a-input
v-model:value="searchQuery"
type="text"
class="nc-input-border-on-value !h-8 !px-3 !py-1 !rounded-lg"
placeholder="Search for an extension..."
allow-clear
>
<template #prefix>
<GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
</template>
</a-input>
</div>
<div
class="max-h-[calc(100%_-_40px)] flex flex-wrap gap-6 nc-scrollbar-thin px-6"
:class="{
'h-full': searchQuery && !filteredAvailableExtensions.length && availableExtensions.length,
}"
>
<template v-for="ext of filteredAvailableExtensions" :key="ext.id">
<div
class="nc-market-extension-item w-full md:w-[calc(50%_-_12px)] flex items-center gap-3 border-1 rounded-xl p-3 cursor-pointer hover:bg-gray-50 transition-all"
@click="onExtensionClick(ext.id)"
>
<div class="h-[60px] w-[60px] overflow-hidden m-auto flex-none">
<img :src="getExtensionAssetsUrl(ext.iconUrl)" alt="icon" class="w-full h-full object-contain" />
</div>
<div class="flex-1 flex flex-grow flex-col gap-1">
<div class="font-weight-600 text-base line-clamp-1">
{{ ext.title }}
</div>
<div class="max-h-[32px] text-xs text-gray-500 line-clamp-2">{{ ext.subTitle }}</div>
</div>
<NcButton size="xsmall" type="secondary" class="flex-none !px-7px" @click.stop="onAddExtension(ext)">
<div class="flex items-center gap-1 -ml-3px text-small">
<GeneralIcon icon="plus" />
{{ $t('general.add') }}
</div>
</NcButton>
</div>
</template>
<div
v-if="searchQuery && !filteredAvailableExtensions.length && availableExtensions.length"
class="w-full h-full flex items-center justify-center"
>
<div class="pb-6 text-gray-500 flex flex-col items-center gap-6 text-center">
<img
src="~assets/img/placeholder/no-search-result-found.png"
class="!w-[164px] flex-none"
alt="No search results found"
/>
{{ $t('title.noResultsMatchedYourSearch') }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a-tab-pane>
<a-tab-pane key="scripts" class="w-full h-full" disabled>
<template #tab>
<NcTooltip>
<template #title>
{{ $t('msg.toast.futureRelease') }}
</template>
<div class="tab-title text-gray-400">Scripts</div>
</NcTooltip>
</template>
<div class="h-full p-6"></div>
</a-tab-pane>
<a-tab-pane key="build-extension" class="w-full h-full" disabled>
<template #tab>
<NcTooltip>
<template #title>
{{ $t('msg.toast.futureRelease') }}
</template>
<div class="tab-title text-gray-400">Build an extension</div>
</NcTooltip>
</template>
<div class="h-full p-6"></div>
</a-tab-pane>
</NcTabs>
</div>
</div>
</NcModal>
@ -122,6 +159,29 @@ const onAddExtension = (ext: any) => {
box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08), 0px 2px 4px -2px rgba(0, 0, 0, 0.04);
}
}
.tab {
@apply flex flex-row items-center gap-x-2;
}
:deep(.ant-tabs-nav) {
@apply !pl-0;
}
:deep(.ant-tabs-tab) {
@apply pt-2 pb-3;
}
:deep(.ant-tabs-content) {
@apply nc-content-max-w;
}
:deep(.ant-tabs-content-top) {
@apply !h-full;
}
.tab-info {
@apply flex pl-1.25 px-1.5 py-0.75 rounded-md text-xs;
}
.tab-title {
@apply flex flex-row items-center gap-x-2 py-[1px];
}
</style>
<style lang="scss">

Write Preview
Loading…
Cancel
Save