summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--app/assets/javascripts/blob/notebook_viewer.js35
-rw-r--r--app/assets/stylesheets/application.scss1
-rw-r--r--app/views/projects/blob/_notebook.html.haml2
-rw-r--r--vendor/assets/stylesheets/notebooklab.css27
4 files changed, 61 insertions, 4 deletions
diff --git a/app/assets/javascripts/blob/notebook_viewer.js b/app/assets/javascripts/blob/notebook_viewer.js
index dda137c6603..057afc9b2e5 100644
--- a/app/assets/javascripts/blob/notebook_viewer.js
+++ b/app/assets/javascripts/blob/notebook_viewer.js
@@ -1,20 +1,49 @@
import Vue from 'vue';
+import VueResource from 'vue-resource';
import NotebookLab from 'vendor/notebooklab';
+Vue.use(VueResource);
Vue.use(NotebookLab);
$(() => {
+ const el = document.getElementById('js-notebook-viewer');
+
new Vue({
- el: '#js-notebook-viewer',
+ el,
data() {
return {
+ loading: true,
json: {},
};
},
template: `
- <div>
- <notebook-lab :notebook="json" />
+ <div class="container-fluid">
+ <i
+ class="fa fa-spinner fa-spin"
+ v-if="loading">
+ </i>
+ <notebook-lab
+ v-if="!loading"
+ :notebook="json" />
</div>
`,
+ mounted() {
+ $.get(gon.katex_css_url, () => {
+ const css = $('<link>', {
+ rel: 'stylesheet',
+ type: 'text/css',
+ href: gon.katex_css_url,
+ });
+ css.appendTo('head');
+ });
+
+ $.getScript(gon.katex_js_url, () => {
+ this.$http.get(el.dataset.endpoint)
+ .then((res) => {
+ this.json = res.json();
+ this.loading = false;
+ });
+ });
+ },
});
});
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 83a8eeaafde..0a4c69bc5ac 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -7,6 +7,7 @@
*= require_self
*= require dropzone/basic
*= require cropper.css
+ *= require notebooklab.css
*/
/*
diff --git a/app/views/projects/blob/_notebook.html.haml b/app/views/projects/blob/_notebook.html.haml
index 19d3e401d27..ab1cf933944 100644
--- a/app/views/projects/blob/_notebook.html.haml
+++ b/app/views/projects/blob/_notebook.html.haml
@@ -2,4 +2,4 @@
= page_specific_javascript_bundle_tag('common_vue')
= page_specific_javascript_bundle_tag('notebook_viewer')
-.file-content#js-notebook-viewer
+.file-content#js-notebook-viewer{ data: { endpoint: namespace_project_raw_path(@project.namespace, @project, @id) } }
diff --git a/vendor/assets/stylesheets/notebooklab.css b/vendor/assets/stylesheets/notebooklab.css
new file mode 100644
index 00000000000..0caf729a17f
--- /dev/null
+++ b/vendor/assets/stylesheets/notebooklab.css
@@ -0,0 +1,27 @@
+.cell,
+.input,
+.output {
+ display: flex;
+ width: 100%;
+ margin-bottom: 10px;
+}
+
+.cell:not(.text-cell) {
+ flex-direction: column;
+}
+
+.prompt {
+ padding: 0 10px;
+ min-width: 7em;
+ font-family: monospace;
+}
+
+.cell pre {
+ margin: 0;
+ width: 100%;
+}
+
+.markdown .katex {
+ display: block;
+ text-align: center;
+}