diff --git a/.gitignore b/.gitignore
index 9629b8692..30163563b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,4 +18,5 @@ node_modules
/resources/public/css
/resources/public/js
/resources/public/index.html
+/resources/public/preview/index.html
/*-init.clj
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index 9cf5f5dc1..5a4f80bb8 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,21 +1,25 @@
-var gulp = require("gulp");
-var runseq = require('run-sequence');
-var scss = require("gulp-sass");
-var plumber = require("gulp-plumber");
-var autoprefixer = require('gulp-autoprefixer');
-var watch = require("gulp-watch");
-var cssmin = require("gulp-cssmin");
-var rimraf = require("rimraf");
-var mustache = require("gulp-mustache");
-var rename = require("gulp-rename");
+const gulp = require("gulp");
+const runseq = require('run-sequence');
+const scss = require("gulp-sass");
+const plumber = require("gulp-plumber");
+const autoprefixer = require('gulp-autoprefixer');
+const watch = require("gulp-watch");
+const cssmin = require("gulp-cssmin");
+const rimraf = require("rimraf");
+const mustache = require("gulp-mustache");
+const rename = require("gulp-rename");
-var paths = {};
+const paths = {};
paths.app = "./resources/";
paths.output = "./resources/public/";
paths.dist = "./dist/";
paths.target = "./target/";
paths.scss = paths.app + "styles/**/*.scss";
+/***********************************************
+ * Styles
+ ***********************************************/
+
function makeAutoprefixer() {
return autoprefixer('last 2 version',
'safari 5',
@@ -24,60 +28,96 @@ function makeAutoprefixer() {
}
function scssPipeline(options) {
- var input = options.input;
- var output = options.output;
+ const input = options.input;
+ const output = options.output;
return gulp.src(input)
- .pipe(plumber())
- .pipe(scss({style: "expanded"}))
- .pipe(makeAutoprefixer())
- .pipe(gulp.dest(output));
+ .pipe(plumber())
+ .pipe(scss({style: "expanded"}))
+ .pipe(makeAutoprefixer())
+ .pipe(gulp.dest(output));
}
-gulp.task("scss:theme-light", function() {
+gulp.task("scss:main", function() {
return scssPipeline({
input: paths.app + "styles/main.scss",
output: paths.output + "css/"
});
});
-// gulp.task("scss:theme-dark", function() {
-// return scssPipeline({
-// input: paths.app + "styles/main-theme-dark.scss",
-// output: paths.output + "css/"
-// });
-// });
-
-gulp.task("scss:all", [ // "scss:theme-dark",
- "scss:theme-light"]);
-
-gulp.task("dist:cssmin", function() {
- return gulp.src(paths.output + "css/main.css")
- .pipe(cssmin())
- .pipe(gulp.dest(paths.output + "css/"));
+gulp.task("scss:preview", function() {
+ return scssPipeline({
+ input: paths.app + "styles/preview.scss",
+ output: paths.output + "css/"
+ });
});
-gulp.task("template", function() {
- var ts = Math.floor(new Date());
- var tmpl = mustache({
+gulp.task("scss", ["scss:main", "scss:preview"]);
+
+/***********************************************
+ * Templates
+ ***********************************************/
+
+gulp.task("template:main", function() {
+ const ts = Math.floor(new Date());
+ const tmpl = mustache({
jsfile: "/js/main.js?v=" + ts,
cssfile: "/css/main.css?v=" + ts
});
return gulp.src(paths.app + "index.mustache")
- .pipe(tmpl)
- .pipe(rename("index.html"))
- .pipe(gulp.dest(paths.output));
+ .pipe(tmpl)
+ .pipe(rename("index.html"))
+ .pipe(gulp.dest(paths.output));
});
+gulp.task("template:preview", function() {
+ const ts = Math.floor(new Date());
+ const tmpl = mustache({
+ jsfile: "/js/preview.js?v=" + ts,
+ cssfile: "/css/preview.css?v=" + ts
+ });
+
+ return gulp.src(paths.app + "preview.mustache")
+ .pipe(tmpl)
+ .pipe(rename("index.html"))
+ .pipe(gulp.dest(paths.output + "preview/"));
+});
+
+gulp.task("template", ["template:preview",
+ "template:main"]);
+
+/***********************************************
+ * Production Build
+ ***********************************************/
+
+gulp.task("dist:cssmin:main", function() {
+ return gulp.src(paths.output + "css/main.css")
+ .pipe(cssmin())
+ .pipe(gulp.dest(paths.output + "css/"));
+});
+
+gulp.task("dist:cssmin:preview", function() {
+ return gulp.src(paths.output + "css/preview.css")
+ .pipe(cssmin())
+ .pipe(gulp.dest(paths.output + "css/"));
+});
+
+gulp.task("dist:cssmin", ["dist:cssmin:main",
+ "dist:cssmin:preview"]);
+
gulp.task("dist:scss", function(next) {
- runseq("scss:all", "dist:cssmin", next);
+ runseq("scss", "dist:cssmin", next);
});
gulp.task("dist:clean", function(next) {
rimraf(paths.dist, next);
});
+/***********************************************
+ * Helper Tasks
+ ***********************************************/
+
gulp.task("clean", function(next) {
rimraf(paths.output + "css/", function() {
rimraf(paths.output + "js/", function() {
@@ -88,15 +128,19 @@ gulp.task("clean", function(next) {
gulp.task("dist:copy", function() {
return gulp.src(paths.output + "/**/*.*")
- .pipe(gulp.dest(paths.dist));
+ .pipe(gulp.dest(paths.dist));
});
+/***********************************************
+ * Entry Points
+ ***********************************************/
+
// Default
gulp.task("dist", function(next) {
- runseq("template", "dist:scss", "dist:clean", "dist:copy", next);
+ runseq(["template", "dist:scss"], "dist:clean", "dist:copy", next);
});
// Watch
-gulp.task("default", ["scss:all", "template"], function () {
- gulp.watch(paths.scss, ["scss:all"]);
+gulp.task("default", ["scss", "template"], function () {
+ gulp.watch(paths.scss, ["scss"]);
});
diff --git a/resources/preview.mustache b/resources/preview.mustache
new file mode 100644
index 000000000..effabc011
--- /dev/null
+++ b/resources/preview.mustache
@@ -0,0 +1,16 @@
+
+
+
+
+
+ UXBOX/preview - The Open-Source prototyping tool
+
+
+
+
+
+
+
+
+
+
diff --git a/resources/styles/preview.scss b/resources/styles/preview.scss
new file mode 100644
index 000000000..efe9c01f5
--- /dev/null
+++ b/resources/styles/preview.scss
@@ -0,0 +1,61 @@
+// UXBOX STYLES
+//#################################################
+//
+//#################################################
+
+@import 'dependencies/colors';
+@import 'dependencies/uxbox-light';
+/* @import 'dependencies/uxbox-dark'; */
+@import 'dependencies/helpers';
+@import 'dependencies/mixin';
+@import 'dependencies/fonts';
+@import 'dependencies/reset';
+@import 'dependencies/animations';
+@import 'dependencies/z-index';
+
+//#################################################
+// Layouts
+//#################################################
+
+@import 'base';
+@import 'layouts/main-layout';
+@import 'layouts/login';
+
+//#################################################
+// Commons
+//#################################################
+
+@import 'framework';
+
+//#################################################
+// Partials
+//#################################################
+
+@import 'partials/main-bar';
+@import 'partials/workspace-bar';
+@import 'partials/workspace-canvas';
+@import 'partials/tool-bar';
+@import 'partials/project-bar';
+@import 'partials/sidebar';
+@import 'partials/sidebar-tools';
+@import 'partials/sidebar-element-options';
+@import 'partials/sidebar-icons';
+@import 'partials/sidebar-layers';
+@import 'partials/sidebar-sitemap';
+@import 'partials/sidebar-document-history';
+@import 'partials/dashboard-bar';
+@import 'partials/dashboard-grid';
+@import 'partials/user-settings';
+@import 'partials/activity-bar';
+@import 'partials/library-bar';
+@import 'partials/lightbox';
+@import 'partials/color-palette';
+@import 'partials/colorpicker';
+@import 'partials/forms';
+@import 'partials/loader';
+
+//#################################################
+// Resources
+//#################################################
+
+@import 'collection/font-collection';