From cc309a48bafd065feb35aab658775890a48f4267 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 23 Jan 2023 14:31:41 +0530
Subject: [PATCH 1/5] feat(nc-gui): Added fullscreen support to ERD

---
 .../dashboard/settings/DataSources.vue        |  2 +-
 .../components/dashboard/settings/Erd.vue     |  2 +-
 .../components/erd/FullScreenToggle.vue       | 28 +++++++++++++++++++
 packages/nc-gui/components/erd/View.vue       | 14 ++++++++--
 packages/nc-gui/components/erd/utils.ts       |  1 +
 5 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 packages/nc-gui/components/erd/FullScreenToggle.vue

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 8416dc186a..5bb4f89287 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -381,7 +381,7 @@ watch(
       <div v-else-if="vState === DataSourcesSubTab.UIAcl" class="max-h-600px overflow-y-auto">
         <UIAcl :base-id="activeBaseId" />
       </div>
-      <div v-else-if="vState === DataSourcesSubTab.ERD" class="max-h-600px overflow-y-auto">
+      <div v-else-if="vState === DataSourcesSubTab.ERD" class="h-full overflow-y-auto">
         <Erd :base-id="activeBaseId" />
       </div>
       <div v-else-if="vState === DataSourcesSubTab.Edit" class="max-h-600px overflow-y-auto">
diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
index 73025e8eef..0bdc501409 100644
--- a/packages/nc-gui/components/dashboard/settings/Erd.vue
+++ b/packages/nc-gui/components/dashboard/settings/Erd.vue
@@ -5,7 +5,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="w-full h-full !p-0 h-70vh">
+  <div class="w-full h-full !p-0">
     <ErdView :base-id="props.baseId" />
   </div>
 </template>
diff --git a/packages/nc-gui/components/erd/FullScreenToggle.vue b/packages/nc-gui/components/erd/FullScreenToggle.vue
new file mode 100644
index 0000000000..4162801e33
--- /dev/null
+++ b/packages/nc-gui/components/erd/FullScreenToggle.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { Panel, PanelPosition } from '@vue-flow/additional-components'
+import type { ERDConfig } from './utils'
+import MiFullscreen from '~icons/material-symbols/fullscreen'
+import MiFullscreenExit from '~icons/material-symbols/fullscreen-exit'
+
+const props = defineProps<{
+  config: ERDConfig
+}>()
+
+const config = useVModel(props, 'config')
+
+const toggleFullScreen = () => {
+  config.value.isFullScreen = !config.value.isFullScreen
+}
+</script>
+
+<template>
+  <Panel
+    class="text-xs bg-white border-1 rounded-md p-0.5 border-gray-50 z-50 nc-erd-histogram cursor-pointer hover:bg-gray-100"
+    :position="PanelPosition.TopLeft"
+  >
+    <div class="flex">
+      <MiFullscreenExit v-if="config.isFullScreen" class="h-5 w-5" @click="() => toggleFullScreen()" />
+      <MiFullscreen v-else class="h-5 w-5" @click="() => toggleFullScreen()" />
+    </div>
+  </Panel>
+</template>
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 6d5be40fdb..f6dc6cd06e 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -21,6 +21,7 @@ const config = reactive<ERDConfig>({
   singleTableMode: !!props.table,
   showMMTables: false,
   showJunctionTableNames: false,
+  isFullScreen: false,
 })
 
 const loadMetaOfTablesNotInMetas = async (localTables: TableType[]) => {
@@ -86,7 +87,15 @@ watch(
 </script>
 
 <template>
-  <div class="w-full" style="height: inherit" :class="[`nc-erd-vue-flow${config.singleTableMode ? '-single-table' : ''}`]">
+  <div
+    class="w-full bg-white"
+    :class="{
+      'z-100 h-screen w-screen fixed top-0 left-0 right-0 bottom-0': config.isFullScreen,
+      'nc-erd-vue-flow-single-table': config.singleTableMode,
+      'nc-erd-vue-flow': !config.singleTableMode,
+    }"
+    :style="!config.isFullScreen ? 'height: inherit' : ''"
+  >
     <div class="relative h-full">
       <LazyErdFlow :tables="filteredTables" :config="config">
         <GeneralOverlay v-model="isLoading" inline class="bg-gray-300/50">
@@ -95,7 +104,8 @@ watch(
           </div>
         </GeneralOverlay>
 
-        <ErdConfigPanel :config="config" />
+        <ErdFullScreenToggle :config="config" />
+        <ErdConfigPanel />
         <ErdHistogramPanel v-if="!config.singleTableMode" />
       </LazyErdFlow>
     </div>
diff --git a/packages/nc-gui/components/erd/utils.ts b/packages/nc-gui/components/erd/utils.ts
index 0b5ad04703..a7cdb2ab2b 100644
--- a/packages/nc-gui/components/erd/utils.ts
+++ b/packages/nc-gui/components/erd/utils.ts
@@ -15,6 +15,7 @@ export interface ERDConfig {
   singleTableMode: boolean
   showJunctionTableNames: boolean
   showMMTables: boolean
+  isFullScreen: boolean
 }
 
 export interface NodeData {

From e3c4354977a7ab8e278e047ba9f621f7b1f0e618 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 23 Jan 2023 14:37:14 +0530
Subject: [PATCH 2/5] feat(nc-gui): Typo

---
 packages/nc-gui/components/erd/View.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index f6dc6cd06e..d8fb8527a0 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -105,7 +105,7 @@ watch(
         </GeneralOverlay>
 
         <ErdFullScreenToggle :config="config" />
-        <ErdConfigPanel />
+        <ErdConfigPanel :config="config" />
         <ErdHistogramPanel v-if="!config.singleTableMode" />
       </LazyErdFlow>
     </div>

From ce604c907380ee2ea6a2651046c49b51deae55ea Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 23 Jan 2023 14:40:50 +0530
Subject: [PATCH 3/5] feat(nc-gui): Fixed close button styling issue on
 settings modal

---
 packages/nc-gui/components/dashboard/settings/Modal.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index a67233cabd..36307dd64b 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -170,13 +170,11 @@ watch(
 
       <a-button
         type="text"
-        class="!rounded-md border-none -mt-1.5 -mr-1"
+        class="!rounded-md border-none !px-1.5"
         data-testid="settings-modal-close-button"
         @click="vModel = false"
       >
-        <template #icon>
-          <MdiClose class="cursor-pointer mt-1 nc-modal-close" />
-        </template>
+        <MdiClose class="cursor-pointer nc-modal-close w-4" />
       </a-button>
     </div>
 

From c51237970e615e8fd63ccfff95d79cc800878a73 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 23 Jan 2023 15:00:01 +0530
Subject: [PATCH 4/5] feat(nc-gui): Review

---
 packages/nc-gui/components/erd/FullScreenToggle.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/erd/FullScreenToggle.vue b/packages/nc-gui/components/erd/FullScreenToggle.vue
index 4162801e33..3303baf81b 100644
--- a/packages/nc-gui/components/erd/FullScreenToggle.vue
+++ b/packages/nc-gui/components/erd/FullScreenToggle.vue
@@ -21,8 +21,8 @@ const toggleFullScreen = () => {
     :position="PanelPosition.TopLeft"
   >
     <div class="flex">
-      <MiFullscreenExit v-if="config.isFullScreen" class="h-5 w-5" @click="() => toggleFullScreen()" />
-      <MiFullscreen v-else class="h-5 w-5" @click="() => toggleFullScreen()" />
+      <MiFullscreenExit v-if="config.isFullScreen" class="h-5 w-5" @click="toggleFullScreen" />
+      <MiFullscreen v-else class="h-5 w-5" @click="toggleFullScreen" />
     </div>
   </Panel>
 </template>

From 5556dcdf4b013fa69179f6b2ced9a273af7830a4 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Tue, 24 Jan 2023 16:49:22 +0530
Subject: [PATCH 5/5] fix(nc-gui): Reviews

---
 packages/nc-gui/components/erd/FullScreenToggle.vue | 6 ++++--
 packages/nc-gui/components/erd/View.vue             | 6 +++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/erd/FullScreenToggle.vue b/packages/nc-gui/components/erd/FullScreenToggle.vue
index 3303baf81b..6ef3545a8b 100644
--- a/packages/nc-gui/components/erd/FullScreenToggle.vue
+++ b/packages/nc-gui/components/erd/FullScreenToggle.vue
@@ -8,10 +8,12 @@ const props = defineProps<{
   config: ERDConfig
 }>()
 
-const config = useVModel(props, 'config')
+const emit = defineEmits(['toggleFullScreen'])
+
+const { config } = toRefs(props)
 
 const toggleFullScreen = () => {
-  config.value.isFullScreen = !config.value.isFullScreen
+  emit('toggleFullScreen')
 }
 </script>
 
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index d8fb8527a0..a476a73b17 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -66,6 +66,10 @@ const populateTables = async () => {
   isLoading = false
 }
 
+const toggleFullScreen = () => {
+  config.isFullScreen = !config.isFullScreen
+}
+
 watch([metas, projectTables], populateTables, {
   flush: 'post',
   immediate: true,
@@ -104,7 +108,7 @@ watch(
           </div>
         </GeneralOverlay>
 
-        <ErdFullScreenToggle :config="config" />
+        <ErdFullScreenToggle :config="config" @toggle-full-screen="toggleFullScreen" />
         <ErdConfigPanel :config="config" />
         <ErdHistogramPanel v-if="!config.singleTableMode" />
       </LazyErdFlow>