feat: new snippet ui

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

packages/nc-gui/components/project/spreadsheet/components/codeSnippet.vue

@@ -1,6 +1,15 @@
 <template>
-  <v-dialog v-model="modal">
+  <div class="nc-container" :class="{active:modal}" @click="modal=false">
-    <v-card style="overflow: hidden">
+    <div class="nc-snippet elevation-3 pa-4" @click.stop>
+      <h3 class="font-weight-medium mb-4">
+        Code Snippet
+      </h3>
+
+      <v-icon class="nc-snippet-close" @click="modal=false">
+        mdi-close
+      </v-icon>
+
+      <div style="overflow: hidden">
         <v-tabs v-model="tab" height="30" @change="client=null">
           <v-tab
             v-for="{lang} in langs"
@@ -10,12 +19,13 @@
             {{ lang }}
           </v-tab>
         </v-tabs>
-      <div class="nc-snippet-wrapper">
+        <div class="nc-snippet-wrapper mt-4">
           <div class="nc-snippet-actions d-flex">
             <v-btn color="primary" class="rounded caption " @click="copyToClipboard">
               <v-icon small>
                 mdi-clipboard-outline
-            </v-icon> Copy To Clipboard
+              </v-icon>
+              Copy To Clipboard
             </v-btn>
             <div
               v-if="langs[tab].clients"
@@ -24,7 +34,8 @@
               <v-menu bottom offset-y>
                 <template #activator="{on}">
                   <v-btn class="caption" color="primary" v-on="on">
-                  {{ client || langs[tab].clients[0] }} <v-icon small>
+                    {{ client || langs[tab].clients[0] }}
+                    <v-icon small>
                       mdi-chevron-down
                     </v-icon>
                   </v-btn>
@@ -37,16 +48,18 @@
               </v-menu>
             </div>
           </div>
-        <custom-monaco-editor style="min-height:500px;max-width: 100%" :value="code" read-only />
+          <custom-monaco-editor :theme="$store.state.windows.darkTheme ? 'vs-dark' : 'vs-light'" style="min-height:500px;max-width: 100%" :value="code" read-only />
+        </div>
+      </div>
+    </div>
   </div>
-    </v-card>
-  </v-dialog>
 </template>
 
 <script>
 import HTTPSnippet from 'httpsnippet'
 import CustomMonacoEditor from '~/components/monaco/CustomMonacoEditor'
 import { copyTextToClipboard } from '~/helpers/xutils'
+
 export default {
   name: 'CodeSnippet',
   components: { CustomMonacoEditor },
@@ -155,6 +168,13 @@ api.dbViewRow.list(
       return this.snippet.convert(this.langs[this.tab].lang, this.client || (this.langs[this.tab].clients && this.langs[this.tab].clients[0]), {})
     }
   },
+  mounted() {
+    (document.querySelector('[data-app]') || this.$root.$el).append(this.$el)
+  },
+
+  destroyed() {
+    this.$el.parentNode && this.$el.parentNode.removeChild(this.$el)
+  },
   methods: {
     copyToClipboard() {
       copyTextToClipboard(this.code)
@@ -164,14 +184,69 @@ api.dbViewRow.list(
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .nc-snippet-wrapper {
   position: relative;
 }
+
 .nc-snippet-actions {
   position: absolute;
   right: 10px;
   bottom: 10px;
   z-index: 99999;
 }
+
+.nc-container {
+  position: fixed;
+  pointer-events: none;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  right: 0;
+  top: 0;
+
+  .nc-snippet {
+    background-color: var(--v-backgroundColorDefault-base);
+    height: 100%;
+    width: max(50%, 700px);
+    position: absolute;
+    bottom: 0;
+    top: 0;
+    right: min(-50%, -700px);
+    transition: .3s right;
+
+  }
+
+  &.active {
+    pointer-events: all;
+
+    & > .nc-snippet {
+      right: 0
+    }
+  }
+
+  .nc-snippet-close {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+  }
+}
+
+::v-deep {
+  .v-tabs {
+    height: 100%;
+
+    .v-tabs-items {
+      height: calc(100% - 30px);
+
+      .v-window__container {
+        height: 100%;
+      }
+    }
+  }
+
+  .v-slide-group__prev--disabled {
+    display: none
+  }
+}
 </style>