Enhancement: update UI

README.md

@@ -295,6 +295,7 @@ var designer=CrysyanDesigner({
     ifrName:"",
     projectPath:"",
     isRecord:false,
+    cssFile:"",
     canvas: {
         // px
         width: 900,
@@ -326,6 +327,9 @@ Normally, the default value is OK
 Path of  crysyan project.
 ### `isRecord`
 Whether to open the recording feature.Default:`false`.
+### `cssFile`
+Default:`empty string`,load inner css.
+If you not need load the css(include inner css).set the value of it to not string type
 ### `canvas`
 * `width`  
 

css/crysyan.css

@@ -0,0 +1,68 @@
+body {
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  overflow-y: auto;
+  background-color: transparent;
+}
+.crysan-canvas-main {
+  position: absolute;
+  top: 20px;
+  width: 100%;
+}
+.crysan-canvas-main canvas {
+  margin: 0 auto;
+  background: #ffffff;
+  cursor: pointer;
+  border: 2px solid orange;
+  border-radius: 10px;
+  -webkit-box-shadow: 4px, 4px, 8px, 0, rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 4px, 4px, 8px, 0, rgba(0, 0, 0, 0.5);
+  box-shadow: 4px, 4px, 8px, 0, rgba(0, 0, 0, 0.5);
+}
+#crysyan-toolbar {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+}
+#crysyan-toolbar ul {
+  padding: 10px;
+  display: inline-block;
+  background: white;
+  border: 2px solid orange;
+  border-radius: 10px;
+}
+.ul-widget-list {
+  padding-left: 5px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.ul-widget-list li {
+  margin: 0 10px;
+  list-style-type: none;
+  display: inline;
+  padding: 0;
+}
+.ul-widget-list li img {
+  vertical-align: middle;
+}
+.ul-widget-list li img:hover {
+  background: #fff767 !important;
+}
+.widget-selected-shape {
+  box-shadow: inset 0px 0px 4px 1px #c1a413 !important;
+  background: #fff767 !important;
+}
+.crysan-canvas-cover {
+  margin: 0 auto;
+  width: 1200px;
+  height: 650px;
+  background-color: white;
+  border: 1px solid white;
+  border-radius: 10px;
+  filter: alpha(opacity=60);
+  -moz-opacity: 0.6;
+  -khtml-opacity: 0.6;
+  opacity: 0.6;
+}

css/crysyan.less

@@ -0,0 +1,77 @@
+body {
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  overflow-y: auto;
+  background-color: transparent;
+}
+.shadowDiv(@top,@right,@bottom,@left,@color){
+  -webkit-box-shadow: @top,@right,@bottom,@left,@color;
+  -moz-box-shadow: @top,@right,@bottom,@left,@color;
+  box-shadow: @top,@right,@bottom,@left,@color;
+}
+// Transparent class
+.opacity-class(@opacitydegree) {
+  @filterdegree : @opacitydegree * 100;
+  filter: alpha(opacity= @filterdegree);
+  -moz-opacity: @opacitydegree;
+  -khtml-opacity: @opacitydegree;
+  opacity: @opacitydegree;
+}
+.crysan-canvas-main {
+  position: absolute;
+  top: 20px;
+  width: 100%;
+  canvas {
+    margin: 0 auto;
+    background: #ffffff;
+    cursor: pointer;
+    border: 2px solid orange;
+    border-radius: 10px;
+    .shadowDiv(4px, 4px, 8px, 0, rgba(0, 0, 0, 0.5));
+  }
+}
+#crysyan-toolbar {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  ul {
+    padding: 10px;
+    display: inline-block;
+    background: white;//#0980d8;
+    border: 2px solid orange;
+    border-radius: 10px;
+  }
+}
+.ul-widget-list {
+  li {
+    margin: 0 10px;
+    list-style-type: none;
+    display: inline;
+    //border-right: 1px solid #000;
+    padding: 0;
+    img {
+      vertical-align: middle;
+      &:hover {
+        background: rgb(255, 247, 103) !important;
+      }
+    }
+  }
+  padding-left: 5px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.widget-selected-shape {
+  box-shadow: inset 0px 0px 4px 1px rgb(193, 164, 19) !important;
+  background: rgb(255, 247, 103) !important;
+}
+.crysan-canvas-cover{
+  margin: 0 auto;
+  width: 1200px;
+  height: 650px;
+  background-color: white;
+  border: 1px solid white;
+  border-radius: 10px;
+  .opacity-class(.6);
+}

gulpfile.js

@@ -9,6 +9,8 @@ var imagemin = require('gulp-imagemin');
 var zip = require('gulp-zip');
 var tar = require('gulp-tar');
 var gzip = require('gulp-gzip');
+var less = require('gulp-less');
+var cleanCSS = require('gulp-clean-css');
 // var debug = require('gulp-debug');
 var runSequence = require('gulp-sequence');
 var replace = require('gulp-replace');
@@ -38,7 +40,7 @@ var widgetsLoad = [];
 })();
 
 gulp.task('clean-all', function () {
-    return gulp.src([distPath + "*", distPath, "release/", "release/*"])
+    return gulp.src([distPath + "*", distPath, "release/"])
         .pipe(clean())
         .pipe(plumber());
 });
@@ -60,6 +62,20 @@ gulp.task('RecordRTC-minify', function () {
         .pipe(gulp.dest(distPath));
 });
 
+gulp.task('less', function () {
+    return gulp.src('css/*.less')
+        .pipe(less())
+        .pipe(plumber())
+        .pipe(gulp.dest('css/'));
+});
+
+gulp.task('minify-css',["less"], function () {
+    return gulp.src('css/*.css')
+        .pipe(cleanCSS({compatibility: 'ie8'}))
+        .pipe(gulp.dest(distPath));
+});
+
+
 gulp.task('widgets-concat', function () {
     return gulp.src(widgetsLoad)
         .pipe(concat("widgets.js"))
@@ -79,6 +95,10 @@ gulp.task('core-header', function () {
         .pipe(header('var CrysyanFlag=false;'))
         .pipe(plumber())
         .pipe(replace('../js/ext/RecordRTC.js', 'RecordRTC.js'))
+        .pipe(plumber())    
+        .pipe(replace('../js/ext/RecordRTC.js', 'RecordRTC.js'))
+        .pipe(plumber())
+        .pipe(replace('"../css/crysyan.css"', '"crysyan.css"'))
         .pipe(plumber())
         .pipe(replace(' var widgetIconPath = "../img/";', ' var widgetIconPath = "img/";'))
         .pipe(plumber())
@@ -128,6 +148,7 @@ gulp.task('building', ['clean-all'], function (cb) {
     runSequence(
            ["designer-minify",
             "RecordRTC-minify",
+            "minify-css",
             "core-widgets-concat-minify",
             "imagemin",
             "html-replace-move",
@@ -160,7 +181,6 @@ gulp.task('tar.gz', function () {
 });
 
 
-
 gulp.task('publish', ['build'], function (cb) {
     runSequence(["zip","tar.gz"], cb);
 });

html/crysyan.html

@@ -4,63 +4,16 @@
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
-    <style type="text/css">
-        body {
-            text-align: center;
-            background: #eeeeee;
-        }
-
-        canvas {
-            background: #ffffff;
-            border: dashed;
-            cursor: pointer;
-            -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
-            -moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
-            box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
-        }
-
-        #crysyan-toolbar {
-            background: #0980d8;
-            border: dashed;
-            text-align: center;
-            ;
-            /*height: 100px;*/
-        }
-
-        .ul-widget-list {
-            padding-left: 5px;
-            margin-top: 5px;
-            margin-bottom: 5px;
-        }
-
-        .ul-widget-list li {
-            list-style-type: none;
-            display: inline;
-            border-right: 1px solid #000;
-            padding: 0px;
-        }
-
-        .ul-widget-list li img {
-            /*width: 50px;
-            height: 50px;*/
-            vertical-align: middle;
-        }
-
-        .ul-widget-list li img:hover {
-            background: rgb(255, 247, 103)!important;
-        }
-
-        .widget-selected-shape {
-            box-shadow: inset 0px 0px 4px 1px rgb(193, 164, 19)!important;
-            background: rgb(255, 247, 103)!important;
-        }
-    </style>
 </head>
-
 <body>
-    <canvas id="crysyan-canvas" >Canvas not supported</canvas>
-    <div id="crysyan-toolbar" >
-    </div>
+<div class="crysan-canvas-cover"></div>
+<div class="crysan-canvas-main">
+    <canvas id="crysyan-canvas">Canvas not supported</canvas>
+</div>
+<div id="crysyan-toolbar"></div>
+    <!--<canvas id="crysyan-canvas" class="" >Canvas not supported</canvas>-->
+    <!--<div id="crysyan-toolbar" >-->
+    <!--</div>-->
 </body>
 <script src="../js/crysyan.js"></script>
 </html>

index.html

@@ -25,10 +25,10 @@
     </style>
 </head>
 <body>
-   <button type="button" id="start-record">start-record</button>
-   <button  id="stop-record">stop-record</button>
-    <div style="width:1000px; height:600px;" class="crysyan-designer"></div>
-    <div id="videoTag" style="width:1000px; height:500px;"></div>
+    <button type="button" id="start-record">start-record</button>
+    <button  id="stop-record">stop-record</button>
+    <div style="height:660px;" class="crysyan-designer"></div>
+    <div id="videoTag" style="height:500px;"></div>
 </body>
 
 </html>
@@ -39,7 +39,7 @@
         isRecord:true,
         canvas: {
             // px
-            width: 900,
+            width: 800,
             height: 500
         },
         toobar: {

js/config.js

@@ -64,6 +64,9 @@
     window.CrysyanDefaultConfig = {
         projectPath:"",
         isRecord:false,
+        // default:empty string,load inner css.
+        // if you not need load the css(include inner css).set the value of it to not string type
+        cssFile:"",
         submit: {
             Id: "crysyan-submit",
             // function called after submit

js/crysyan.js

@@ -3,6 +3,12 @@
  */
 (function ($load) {
     'use strict';
+
+    var baseLoadPath = "../js/";
+    var widgetBasePath = "../js/widget/";
+    var widgetIconPath = "../img/";
+    var defaultCss = "../css/crysyan.css";
+
     if (typeof $load === "undefined") $load = true;
     // jquery
     if (!window.$) {
@@ -62,6 +68,20 @@
         recursiveLoad(0);
     }
 
+    /**
+     *
+     * @param filePath css file
+     */
+    function requireCss(filePath) {
+        if (typeof filePath!=="string") return;
+        var headElement = document.getElementsByTagName("head").item(0) || document.documentElement;
+        var cssLink=document.createElement("link");
+        cssLink.setAttribute("rel", "stylesheet");
+        cssLink.setAttribute("type", "text/css");
+        cssLink.setAttribute("href", filePath);
+        headElement.appendChild(cssLink);
+    }
+
     (function getRequest() {
         // get from URL string after '?'
         var url = decodeURI(location.search);
@@ -75,8 +95,6 @@
     })();
     //
     var widgetinit = function (callback) {
-        var widgetBasePath = "../js/widget/";
-        var widgetIconPath = "../img/";
         var widgetsLoad = [];
         var widgets = CrysyanWidgetConfig.widgets;
         for (var attr in widgets) {
@@ -101,6 +119,7 @@
                 viewCacheMap["default"] = view;
             };
             var config = JSON.parse(hrefRequestArgs.config);
+            requireCss(config.cssFile&&config.cssFile!==""? config.cssFile:defaultCss);
             if (config.isRecord&&config.isRecord===true) {
                 requireSeries("../js/ext/RecordRTC.js", function () {
                     createView();
@@ -113,7 +132,6 @@
     };
     if ($load) {
         // load file（Pseudo module）
-        var baseLoadPath = "../js/";
         requireSeries([
             baseLoadPath + "util.js",
             baseLoadPath + "config.js",