Initial commit

lib/assets/javascripts/new-dashboard/components/Code/CodeBlock.vue

@@ -0,0 +1,69 @@
+<template>
+  <textarea ref="code" v-model="code"></textarea>
+</template>
+
+<script>
+import CodeMirror from 'codemirror';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/python/python';
+import 'codemirror/mode/shell/shell';
+import 'codemirror/mode/htmlmixed/htmlmixed';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/material.css';
+
+export default {
+  name: 'CodeBlock',
+  data () {
+    return {
+      codemirror: null
+    };
+  },
+  mounted () {
+    this.initialize();
+  },
+  beforeDestroy () {
+    this.destroy();
+  },
+  props: {
+    code: String,
+    language: {
+      type: String,
+      default: 'javascript'
+    },
+    lineNumbers: {
+      type: Boolean,
+      default: true
+    },
+    theme: {
+      type: String,
+      default: 'material'
+    }
+  },
+  methods: {
+    initialize () {
+      const allOptions = {
+        mode: this.language,
+        lineNumbers: this.lineNumbers,
+        theme: this.theme,
+        ...defaultOptions
+      };
+      this.codemirror = CodeMirror.fromTextArea(this.$refs.code, allOptions);
+    },
+    destroy () {
+      const codemirrorElement = this.codemirror.doc.cm.getWrapperElement();
+      codemirrorElement.remove && codemirrorElement.remove();
+    }
+  },
+  watch: {
+    code () {
+      this.codemirror && this.codemirror.setValue(this.code);
+    }
+  }
+};
+
+const defaultOptions = {
+  readOnly: true,
+  addModeClass: true
+};
+
+</script>

lib/assets/javascripts/new-dashboard/components/Code/Jupyter.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="jupyter">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'JupyterBlock'
+};
+</script>
+
+<style scoped lang="scss">
+@import 'new-dashboard/styles/variables';
+
+.jupyter {
+  margin: 16px 0;
+  padding: 20px 20px 20px 8px;
+  background-color: $white;
+}
+
+.jupyter > * {
+  margin-bottom: 16px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+</style>

lib/assets/javascripts/new-dashboard/components/Code/JupyterBlock.vue

@@ -0,0 +1,67 @@
+<template>
+    <div :class="inputClass" class="u-flex u-flex__align--start">
+      <span class="jupyter-title u-mr--8">{{ $t(`Wizards.cartoframes.jupyter.${inputType}`) }}</span>
+      <div class="jupyter-content">
+        <slot></slot>
+      </div>
+    </div>
+</template>
+<script>
+export default {
+  name: 'JupyterBlock',
+  props: {
+    isInput: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    inputType () {
+      return this.isInput ? 'in' : 'out';
+    },
+    inputClass () {
+      return `jupyter-${this.inputType}`;
+    }
+  }
+};
+</script>
+<style lang="scss">
+@import 'new-dashboard/styles/variables';
+
+.jupyter-title {
+  width: 35px;
+  margin-top: 11px;
+  font-family: 'Source Code Pro', monospace;
+  font-size: 14px;
+  text-align: right;
+}
+
+.jupyter-content {
+  width: 100%;
+  overflow: auto;
+
+  .CodeMirror {
+    width: 100%;
+    margin: 0;
+    padding: 0 4px;
+  }
+}
+
+.jupyter-in {
+  .jupyter-title {
+    color: $jupyter__text--in;
+  }
+
+  .CodeMirror {
+    border: 1px solid $jupyter__border-color;
+    background-color: $jupyter__fill-color;
+  }
+}
+
+.jupyter-out {
+  .jupyter-title {
+    color: $jupyter__text--out;
+  }
+}
+
+</style>