feat: embeddable shared base

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/base/shareBase.vue

@@ -131,7 +131,7 @@ src="${this.url}?embed"
 frameborder="0"
 width="100%"
 height="700"
-style="background: transparent; "></iframe>`)
+style="background: transparent; border: 1px solid #ddd"></iframe>`)
       this.$toast.success('Copied embeddable html code!').goAway(3000)
     }
   }

packages/nc-gui/layouts/shared.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-app>
+    <snackbar />
+    <v-main>
+      <v-app-bar v-show="false" dark />
+      <div>
+        <nuxt />
+      </div>
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+
+export default {
+  components: {},
+  data: () => ({}),
+  computed: {},
+  watch: {},
+  mounted() {
+  },
+  async created() {
+    // this.$vuetify.theme.dark = false;
+  },
+
+  methods: {}
+}
+</script>
+<style scoped>
+
+</style>
+
+<!--
+/**
+ * @copyright Copyright (c) 2021, Xgene Cloud Ltd
+ *
+ * @author Naveen MR <oof1lab@gmail.com>
+ * @author Pranav C Balan <pranavxc@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+-->

packages/nc-gui/pages/nc/base/_shared_base_id.vue

@@ -1,7 +1,12 @@
 <template>
-  <v-container fluid class="pa-0 ma-0" style="overflow: auto">
+  <div style="height: 100vh">
-    <splitpanes style="height:calc(100vh - 40px); position: relative;" class="xc-theme">
+    <splitpanes style="height:calc(100% - 25px); position: relative;" class="xc-theme">
-      <pane :min-size="showProjectTree? 10 : 1.5" :size="showProjectTree ? paneSize : 1.5" :max-size="showProjectTree? 50 : 1.5" style="position: relative;overflow-x: hidden">
+      <pane
+        :min-size="showProjectTree? 10 : 1.5"
+        :size="showProjectTree ? paneSize : 1.5"
+        :max-size="showProjectTree? 50 : 1.5"
+        style="position: relative;overflow-x: hidden"
+      >
         <ProjectTreeView v-show="showProjectTree" ref="treeview" />
         <v-btn
           x-small
@@ -21,7 +26,14 @@
         <ProjectTabs :key="pid" @tableCreate="tableCreate" />
       </pane>
     </splitpanes>
-  </v-container>
+    <div class="nc-embedded-options d-flex align-center px-3">
+      <a href="https://github.com/nocodb/nocodb" target="_blank" class="text-decoration-none d-inline-flex align-center  textColor--text">
+        <img src="favicon-32.png" height="15" class="mr-2">
+        <span class="body-1 font-weight-bold">NocoDB</span></a>
+      <v-spacer />
+      <span v-if="embed" class="caption pointer" @click="showLargerVersion"><v-icon small>mdi-arrow-expand</v-icon> View larger version</span>
+    </div>
+  </div>
 </template>
 <script>
 
@@ -36,6 +48,7 @@ export default {
     Splitpanes,
     Pane
   },
+  layout: 'shared',
   data() {
     return {
       paneSize: 18,
@@ -46,12 +59,17 @@ export default {
   computed: {
     pid() {
       return this.$route.params.project_id
+    },
+    embed() {
+      return this.$store.state.embed
     }
   },
   async created() {
     this.$store.watch(
       state => state.panelSize.treeView && state.panelSize.treeView.size,
-      (newSize) => { this.paneSize = newSize }
+      (newSize) => {
+        this.paneSize = newSize
+      }
     )
   },
 
@@ -67,6 +85,9 @@ export default {
     }
   },
   methods: {
+    showLargerVersion() {
+      window.open(location.href.replace(/embed&?/, ''), '_blank')
+    },
     tableCreate(table) {
       if (this.$refs.treeview) {
         this.$refs.treeview.mtdTableCreate(table)
@@ -118,6 +139,7 @@ export default {
   background: #7f828b33 !important;
   border: #7f828b33 !important;
 }
+
 .pane-toggle {
   position: absolute;
   right: 0;
@@ -139,6 +161,13 @@ export default {
 .theme--dark .pane-toggle {
   background-color: #363636;
 }
+
+.nc-embedded-options{
+  height: 25px;
+  width: 100%;
+  border: 1px solid #bbb;
+}
+
 </style>
 <!--
 /**

packages/nc-gui/plugins/localStorage.js

@@ -33,6 +33,7 @@ export default async({ store, $vuetify: { theme }, route }) => {
   //   window.onNuxtReady(async (nuxt) => {
   if (route && route.query && 'embed' in route.query) {
     window.rehydrated = true
+    store.commit('mutEmbed', true)
   } else {
     const createPersistedState = (await import('vuex-persistedstate')).default
     const SecureLS = (await import('secure-ls')).default

packages/nc-gui/store/index.js

@@ -2,7 +2,8 @@ export const state = () => ({
   paidUser: false,
   template: null,
   templateC: 0,
-  templateE: 0
+  templateE: 0,
+  embed: false
 })
 
 export const mutations = {
@@ -14,6 +15,9 @@ export const mutations = {
   },
   mutTemplateE(state, e) {
     state.templateE = e
+  },
+  mutEmbed(state, e) {
+    state.embed = e
   }
 }