diff --git a/playground/playground.css b/playground/playground.css
index 178ecf86..e54ecb41 100644
--- a/playground/playground.css
+++ b/playground/playground.css
@@ -13,6 +13,8 @@ body {
.btn {
cursor: pointer;
+ padding: 5px;
+ margin: 5px;
}
/* APPLICATION ROOT ****************************************/
@@ -54,18 +56,20 @@ body {
.run-code {
margin-right: 12px;
height: 25px;
- padding: 5px 10px;
border: 2px solid transparent;
opacity: 0.9;
- background-position: center;
- transition: background 0.5s;
}
.run-code:hover {
opacity: 1;
}
-.run-code:active {
+.flash {
+ background-position: center;
+ transition: background 0.5s;
+}
+
+.flash:active {
background-color: #41454a;
background-size: 100%;
transition: background 0s;
@@ -73,12 +77,10 @@ body {
.layout-selector {
font-size: 33px;
- padding: 0px 3px;
- margin-right: 17px;
cursor: pointer;
- margin: 8px;
color: #cccccc;
transform: rotate(90deg);
+ padding: 0 5px;
}
.layout-selector.active {
@@ -99,6 +101,7 @@ body {
.tabBar {
color: white;
height: 22px;
+ width: 170px;
margin-top: -22px;
padding-left: 5px;
user-select: none;
diff --git a/playground/src/app.js b/playground/src/app.js
index 7a68e3da..c367b221 100644
--- a/playground/src/app.js
+++ b/playground/src/app.js
@@ -1,5 +1,16 @@
import { SAMPLES } from "./samples.js";
+let owlJS;
+
+async function owlSourceCode() {
+ if (owlJS) {
+ return owlJS;
+ }
+ const result = await fetch("/playground/libs/owl.js");
+ owlJS = await result.text();
+ return owlJS;
+}
+
const MODES = {
js: "ace/mode/javascript",
css: "ace/mode/css",
@@ -9,6 +20,22 @@ const MODES = {
const DEFAULT_XML = `
`;
+const DEFAULT_HTML = `
+
+
+
+ OWL App
+
+
+
+
+
+
+
+
+
+`;
+
//------------------------------------------------------------------------------
// Tabbed editor
//------------------------------------------------------------------------------
@@ -227,6 +254,29 @@ class App extends owl.Component {
}
this.state.topPanelHeight = height + ev.delta;
}
+
+ async downloadCode() {
+ await owl.utils.loadJS("/playground/libs/FileSaver.min.js");
+ await owl.utils.loadJS("/playground/libs/jszip.min.js");
+
+ const zip = new JSZip();
+
+ const JS = `async function startApp() {
+ const TEMPLATES = await owl.utils.loadTemplates('app.xml');
+ ${this.state.js};
+}
+
+owl.utils.whenReady(startApp);`;
+
+ zip.file("app.js", JS);
+ zip.file("app.css", this.state.css);
+ zip.file("app.xml", this.state.xml);
+ zip.file("index.html", DEFAULT_HTML);
+ zip.file("owl.js", owlSourceCode());
+ zip.generateAsync({ type: "blob" }).then(function(content) {
+ saveAs(content, "app.zip");
+ });
+ }
}
//------------------------------------------------------------------------------
diff --git a/playground/src/templates.xml b/playground/src/templates.xml
index 9aee5ca8..352329af 100644
--- a/playground/src/templates.xml
+++ b/playground/src/templates.xml
@@ -1,9 +1,9 @@
@@ -11,13 +11,14 @@