-
-
-
-
+
+
+
-
-
-
-
-
- ![icon]()
-
-
+
- ![icon]()
+
+
+
+ {{ activeExtension.title }}
+
+
+ {{ activeExtension.title }}
+ {{ activeExtension.subTitle }}
+
+
+
+
+
+
-
+ (null)
-const extensionManifest = ref(null)
+const extensionManifest = ref()
-const extensionMinHeight = computed(() => {
- switch (extension.value.extensionId) {
- case 'nc-data-exporter':
- return 'min-h-[300px] h-[300px]'
- case 'nc-json-exporter':
- return 'min-h-[194px] h-[194px]'
- case 'nc-csv-import':
- return 'min-h-[180px] h-[180px]'
+const fullscreenModalMaxWidth = computed(() => {
+ const modalMaxWidth = {
+ xs: 'min(calc(100vw - 32px), 448px)',
+ sm: 'min(calc(100vw - 32px), 640px)',
+ md: 'min(calc(100vw - 48px), 900px)',
+ lg: 'min(calc(100vw - 48px), 1280px)',
}
+
+ return extensionManifest.value?.config?.modalMaxWith
+ ? modalMaxWidth[extensionManifest.value?.config?.modalMaxWith] || modalMaxWidth.lg
+ : modalMaxWidth.lg
})
+const expandExtension = () => {
+ if (!collapsed.value) return
+
+ collapsed.value = false
+}
+
onMounted(() => {
until(extensionsLoaded)
.toMatch((v) => v)
.then(() => {
extensionManifest.value = availableExtensions.value.find((ext) => ext.id === extension.value.extensionId)
- if (!extensionManifest) {
+ if (!extensionManifest.value) {
return
}
@@ -94,7 +102,11 @@ onMounted(() => {
// close fullscreen on escape key press
useEventListener('keydown', (e) => {
- if (e.key === 'Escape') {
+ // Check if the event target or its closest parent is an input, select, or textarea
+ const isFormElement = (e?.target as HTMLElement)?.closest('input, select, textarea')
+
+ // If the target is not a form element and the key is 'Escape', close fullscreen
+ if (e.key === 'Escape' && !isFormElement) {
fullscreen.value = false
}
})
@@ -132,78 +144,103 @@ eventBus.on((event, payload) => {
+
-
-
-
-
@@ -104,17 +138,21 @@ const detailsBody = activeExtension.value?.description ? marked.parse(activeExte
+
+
diff --git a/packages/nc-gui/components/extensions/Extension.vue b/packages/nc-gui/components/extensions/Extension.vue
index 39fbbbdcc3..e3f1096938 100644
--- a/packages/nc-gui/components/extensions/Extension.vue
+++ b/packages/nc-gui/components/extensions/Extension.vue
@@ -11,7 +11,7 @@ const {
extensionsLoaded,
availableExtensions,
eventBus,
- getExtensionIcon,
+ getExtensionAssetsUrl,
duplicateExtension,
showExtensionDetails,
} = useExtensions()
@@ -56,26 +56,34 @@ const { fullscreen, collapsed } = useProvideExtensionHelper(extension)
const component = refAdd Extension
-
-
+
-
+
![icon]()
-
+ >
+
+
{{ extension.title }}
-
+
{{ extension.title }}
-
-
-
+
-
+
+
+
+
-
-
+
+
{{ activeError }}
-
+
-
+
-
+
-
+
![icon]()
-
-
+ >
+
+
{{ extension.title }}
-
+
{{ extension.title }}
@@ -266,7 +315,7 @@ eventBus.on((event, payload) => {
-
-
+
+
-
+
-
+
-
+
@@ -34,7 +34,7 @@ const emits = defineEmits(['rename', 'duplicate', 'showDetails', 'clearData', 'd
('')
@@ -17,7 +17,7 @@ const filteredAvailableExtensions = computed(() =>
(availableExtensions.value || []).filter(
(ext) =>
ext.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
- ext.description.toLowerCase().includes(searchQuery.value.toLowerCase()),
+ ext.subTitle.toLowerCase().includes(searchQuery.value.toLowerCase()),
),
)
@@ -35,72 +35,77 @@ const onAddExtension = (ext: any) => {
-
-
-
Extensions Marketplace
+
+
+
+
-
- Extensions Marketplace
+
-
-
-
+
+
+
+
+
+
+
-
-
-
-
- ![icon]()
-
-
-
-
-
+
+
-
- {{ ext.title }}
-
-
-
+
-
+ ![icon]()
+
+
+
-
+
+
+
+ {{ ext.title }}
+
+
+ {{ ext.subTitle }}
{{ ext.description }}
-
@@ -109,4 +114,27 @@ const onAddExtension = (ext: any) => {
-
+
+
+
diff --git a/packages/nc-gui/components/extensions/Pane.vue b/packages/nc-gui/components/extensions/Pane.vue
index 31a569c274..54b54c329e 100644
--- a/packages/nc-gui/components/extensions/Pane.vue
+++ b/packages/nc-gui/components/extensions/Pane.vue
@@ -1,6 +1,8 @@
@@ -54,96 +135,112 @@ watch(isPanelExpanded, (newValue) => {
:size="extensionPanelSize"
min-size="10%"
max-size="60%"
- class="flex flex-col gap-3 bg-[#F0F3FF]"
+ class="nc-extension-pane"
:style="{
minWidth: isReady ? '300px' : `${normalizePaneMaxWidth}%`,
maxWidth: `${normalizePaneMaxWidth}%`,
}"
>
-
- 
+
+
+
+
+
+
- {{ $t('title.noResultsMatchedYourSearch') }}
+ {{ $t('title.noResultsMatchedYourSearch') }}
+
- {{ $t('title.noResultsMatchedYourSearch') }}
+ {{ $t('title.noResultsMatchedYourSearch') }}
+
-
-
-
-
-
No extensions added
- Add Extensions from the community extensions marketplace
-
-
+
+
+
-
-
-
-
-
+
-
-
+
+
+
+
-
+
+
+
+
+
+
-
+
+ {
@apply pb-3;
}
}
+
+.nc-extension-pane {
+ @apply flex flex-col bg-gray-50 rounded-l-xl border-1 border-gray-200 z-30 -mt-1px;
+
+ box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.16), 0px 8px 8px -4px rgba(0, 0, 0, 0.04);
+}
diff --git a/packages/nc-gui/components/project/View.vue b/packages/nc-gui/components/project/View.vue
index 7a2d4f9bbe..7db6246b23 100644
--- a/packages/nc-gui/components/project/View.vue
+++ b/packages/nc-gui/components/project/View.vue
@@ -112,10 +112,10 @@ watch(
-
+
-
-
- {{ $t('title.noResultsMatchedYourSearch') }}
+
+
-
-
- {{ $t('title.noResultsMatchedYourSearch') }}
+
+
+
-
+
+
+
+
+
+ {{ $t('title.noResultsMatchedYourSearch') }}
+
+
+
+ {{ $t('title.noResultsMatchedYourSearch') }}
+
-
-
+
+
diff --git a/packages/nc-gui/components/smartsheet/Topbar.vue b/packages/nc-gui/components/smartsheet/Topbar.vue
index 5e461f36d8..338fed4c9e 100644
--- a/packages/nc-gui/components/smartsheet/Topbar.vue
+++ b/packages/nc-gui/components/smartsheet/Topbar.vue
@@ -53,31 +53,41 @@ const topbarBreadcrumbItemWidth = computed(() => {
+
+
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index c3255f69af..2d4ced89da 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -232,10 +232,10 @@ const onReady = () => {
.nc-extensions-content-resizable-wrapper > {
.splitpanes__splitter {
- @apply !w-0 relative overflow-visible;
+ @apply !w-0 relative overflow-visible z-40 -ml-1px;
}
.splitpanes__splitter:before {
- @apply bg-gray-200 w-0.25 absolute left-0 top-0 h-full z-40;
+ @apply bg-gray-200 absolute left-0 top-[12px] h-[calc(100%_-_24px)] rounded-full z-40;
content: '';
}
diff --git a/packages/nc-gui/components/workspace/View.vue b/packages/nc-gui/components/workspace/View.vue
index 9bef25cd01..c086eb569e 100644
--- a/packages/nc-gui/components/workspace/View.vue
+++ b/packages/nc-gui/components/workspace/View.vue
@@ -69,8 +69,11 @@ onMounted(() => {
-
+
+
+
+
+
+
+
-
-
-
+
+
+
-