Skip to content

Commit c6efb73

Browse files
BPingBPing
committed
Enhancement: update UI
1 parent d2de584 commit c6efb73

8 files changed

+208
-65
lines changed

‎README.md

+4
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,7 @@ var designer=CrysyanDesigner({
295295
ifrName:"",
296296
projectPath:"",
297297
isRecord:false,
298+
cssFile:"",
298299
canvas: {
299300
// px
300301
width: 900,
@@ -326,6 +327,9 @@ Normally, the default value is OK
326327
Path of crysyan project.
327328
### `isRecord`
328329
Whether to open the recording feature.Default:`false`.
330+
### `cssFile`
331+
Default:`empty string`,load inner css.
332+
If you not need load the css(include inner css).set the value of it to not string type
329333
### `canvas`
330334
* `width`
331335

‎css/crysyan.css

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
body {
2+
padding: 0;
3+
margin: 0;
4+
text-align: center;
5+
overflow-y: auto;
6+
background-color: transparent;
7+
}
8+
.crysan-canvas-main {
9+
position: absolute;
10+
top: 20px;
11+
width: 100%;
12+
}
13+
.crysan-canvas-main canvas {
14+
margin: 0 auto;
15+
background: #ffffff;
16+
cursor: pointer;
17+
border: 2px solid orange;
18+
border-radius: 10px;
19+
-webkit-box-shadow: 4px, 4px, 8px, 0, rgba(0, 0, 0, 0.5);
20+
-moz-box-shadow: 4px, 4px, 8px, 0, rgba(0, 0, 0, 0.5);
21+
box-shadow: 4px, 4px, 8px, 0, rgba(0, 0, 0, 0.5);
22+
}
23+
#crysyan-toolbar {
24+
position: fixed;
25+
bottom: 0;
26+
width: 100%;
27+
text-align: center;
28+
}
29+
#crysyan-toolbar ul {
30+
padding: 10px;
31+
display: inline-block;
32+
background: white;
33+
border: 2px solid orange;
34+
border-radius: 10px;
35+
}
36+
.ul-widget-list {
37+
padding-left: 5px;
38+
margin-top: 5px;
39+
margin-bottom: 5px;
40+
}
41+
.ul-widget-list li {
42+
margin: 0 10px;
43+
list-style-type: none;
44+
display: inline;
45+
padding: 0;
46+
}
47+
.ul-widget-list li img {
48+
vertical-align: middle;
49+
}
50+
.ul-widget-list li img:hover {
51+
background: #fff767 !important;
52+
}
53+
.widget-selected-shape {
54+
box-shadow: inset 0px 0px 4px 1px #c1a413 !important;
55+
background: #fff767 !important;
56+
}
57+
.crysan-canvas-cover {
58+
margin: 0 auto;
59+
width: 1200px;
60+
height: 650px;
61+
background-color: white;
62+
border: 1px solid white;
63+
border-radius: 10px;
64+
filter: alpha(opacity=60);
65+
-moz-opacity: 0.6;
66+
-khtml-opacity: 0.6;
67+
opacity: 0.6;
68+
}

‎css/crysyan.less

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
body {
2+
padding: 0;
3+
margin: 0;
4+
text-align: center;
5+
overflow-y: auto;
6+
background-color: transparent;
7+
}
8+
.shadowDiv(@top,@right,@bottom,@left,@color){
9+
-webkit-box-shadow: @top,@right,@bottom,@left,@color;
10+
-moz-box-shadow: @top,@right,@bottom,@left,@color;
11+
box-shadow: @top,@right,@bottom,@left,@color;
12+
}
13+
// Transparent class
14+
.opacity-class(@opacitydegree) {
15+
@filterdegree : @opacitydegree * 100;
16+
filter: alpha(opacity= @filterdegree);
17+
-moz-opacity: @opacitydegree;
18+
-khtml-opacity: @opacitydegree;
19+
opacity: @opacitydegree;
20+
}
21+
.crysan-canvas-main {
22+
position: absolute;
23+
top: 20px;
24+
width: 100%;
25+
canvas {
26+
margin: 0 auto;
27+
background: #ffffff;
28+
cursor: pointer;
29+
border: 2px solid orange;
30+
border-radius: 10px;
31+
.shadowDiv(4px, 4px, 8px, 0, rgba(0, 0, 0, 0.5));
32+
}
33+
}
34+
#crysyan-toolbar {
35+
position: fixed;
36+
bottom: 0;
37+
width: 100%;
38+
text-align: center;
39+
ul {
40+
padding: 10px;
41+
display: inline-block;
42+
background: white;//#0980d8;
43+
border: 2px solid orange;
44+
border-radius: 10px;
45+
}
46+
}
47+
.ul-widget-list {
48+
li {
49+
margin: 0 10px;
50+
list-style-type: none;
51+
display: inline;
52+
//border-right: 1px solid #000;
53+
padding: 0;
54+
img {
55+
vertical-align: middle;
56+
&:hover {
57+
background: rgb(255, 247, 103) !important;
58+
}
59+
}
60+
}
61+
padding-left: 5px;
62+
margin-top: 5px;
63+
margin-bottom: 5px;
64+
}
65+
.widget-selected-shape {
66+
box-shadow: inset 0px 0px 4px 1px rgb(193, 164, 19) !important;
67+
background: rgb(255, 247, 103) !important;
68+
}
69+
.crysan-canvas-cover{
70+
margin: 0 auto;
71+
width: 1200px;
72+
height: 650px;
73+
background-color: white;
74+
border: 1px solid white;
75+
border-radius: 10px;
76+
.opacity-class(.6);
77+
}

‎gulpfile.js

+22-2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ var imagemin = require('gulp-imagemin');
99
var zip = require('gulp-zip');
1010
var tar = require('gulp-tar');
1111
var gzip = require('gulp-gzip');
12+
var less = require('gulp-less');
13+
var cleanCSS = require('gulp-clean-css');
1214
// var debug = require('gulp-debug');
1315
var runSequence = require('gulp-sequence');
1416
var replace = require('gulp-replace');
@@ -38,7 +40,7 @@ var widgetsLoad = [];
3840
})();
3941

4042
gulp.task('clean-all', function () {
41-
return gulp.src([distPath + "*", distPath, "release/", "release/*"])
43+
return gulp.src([distPath + "*", distPath, "release/"])
4244
.pipe(clean())
4345
.pipe(plumber());
4446
});
@@ -60,6 +62,20 @@ gulp.task('RecordRTC-minify', function () {
6062
.pipe(gulp.dest(distPath));
6163
});
6264

65+
gulp.task('less', function () {
66+
return gulp.src('css/*.less')
67+
.pipe(less())
68+
.pipe(plumber())
69+
.pipe(gulp.dest('css/'));
70+
});
71+
72+
gulp.task('minify-css',["less"], function () {
73+
return gulp.src('css/*.css')
74+
.pipe(cleanCSS({compatibility: 'ie8'}))
75+
.pipe(gulp.dest(distPath));
76+
});
77+
78+
6379
gulp.task('widgets-concat', function () {
6480
return gulp.src(widgetsLoad)
6581
.pipe(concat("widgets.js"))
@@ -79,6 +95,10 @@ gulp.task('core-header', function () {
7995
.pipe(header('var CrysyanFlag=false;'))
8096
.pipe(plumber())
8197
.pipe(replace('../js/ext/RecordRTC.js', 'RecordRTC.js'))
98+
.pipe(plumber())
99+
.pipe(replace('../js/ext/RecordRTC.js', 'RecordRTC.js'))
100+
.pipe(plumber())
101+
.pipe(replace('"../css/crysyan.css"', '"crysyan.css"'))
82102
.pipe(plumber())
83103
.pipe(replace(' var widgetIconPath = "../img/";', ' var widgetIconPath = "img/";'))
84104
.pipe(plumber())
@@ -128,6 +148,7 @@ gulp.task('building', ['clean-all'], function (cb) {
128148
runSequence(
129149
["designer-minify",
130150
"RecordRTC-minify",
151+
"minify-css",
131152
"core-widgets-concat-minify",
132153
"imagemin",
133154
"html-replace-move",
@@ -160,7 +181,6 @@ gulp.task('tar.gz', function () {
160181
});
161182

162183

163-
164184
gulp.task('publish', ['build'], function (cb) {
165185
runSequence(["zip","tar.gz"], cb);
166186
});

‎html/crysyan.html

+8-55
Original file line numberDiff line numberDiff line change
@@ -4,63 +4,16 @@
44
<head>
55
<meta charset="UTF-8">
66
<title>Title</title>
7-
<style type="text/css">
8-
body {
9-
text-align: center;
10-
background: #eeeeee;
11-
}
12-
13-
canvas {
14-
background: #ffffff;
15-
border: dashed;
16-
cursor: pointer;
17-
-webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
18-
-moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
19-
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
20-
}
21-
22-
#crysyan-toolbar {
23-
background: #0980d8;
24-
border: dashed;
25-
text-align: center;
26-
;
27-
/*height: 100px;*/
28-
}
29-
30-
.ul-widget-list {
31-
padding-left: 5px;
32-
margin-top: 5px;
33-
margin-bottom: 5px;
34-
}
35-
36-
.ul-widget-list li {
37-
list-style-type: none;
38-
display: inline;
39-
border-right: 1px solid #000;
40-
padding: 0px;
41-
}
42-
43-
.ul-widget-list li img {
44-
/*width: 50px;
45-
height: 50px;*/
46-
vertical-align: middle;
47-
}
48-
49-
.ul-widget-list li img:hover {
50-
background: rgb(255, 247, 103)!important;
51-
}
52-
53-
.widget-selected-shape {
54-
box-shadow: inset 0px 0px 4px 1px rgb(193, 164, 19)!important;
55-
background: rgb(255, 247, 103)!important;
56-
}
57-
</style>
587
</head>
59-
608
<body>
61-
<canvas id="crysyan-canvas" >Canvas not supported</canvas>
62-
<div id="crysyan-toolbar" >
63-
</div>
9+
<div class="crysan-canvas-cover"></div>
10+
<div class="crysan-canvas-main">
11+
<canvas id="crysyan-canvas">Canvas not supported</canvas>
12+
</div>
13+
<div id="crysyan-toolbar"></div>
14+
<!--<canvas id="crysyan-canvas" class="" >Canvas not supported</canvas>-->
15+
<!--<div id="crysyan-toolbar" >-->
16+
<!--</div>-->
6417
</body>
6518
<script src="../js/crysyan.js"></script>
6619
</html>

‎index.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@
2525
</style>
2626
</head>
2727
<body>
28-
<button type="button" id="start-record">start-record</button>
29-
<button id="stop-record">stop-record</button>
30-
<div style="width:1000px; height:600px;" class="crysyan-designer"></div>
31-
<div id="videoTag" style="width:1000px; height:500px;"></div>
28+
<button type="button" id="start-record">start-record</button>
29+
<button id="stop-record">stop-record</button>
30+
<div style="height:660px;" class="crysyan-designer"></div>
31+
<div id="videoTag" style="height:500px;"></div>
3232
</body>
3333

3434
</html>
@@ -39,7 +39,7 @@
3939
isRecord:true,
4040
canvas: {
4141
// px
42-
width: 900,
42+
width: 800,
4343
height: 500
4444
},
4545
toobar: {

‎js/config.js

+3
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,9 @@
6464
window.CrysyanDefaultConfig = {
6565
projectPath:"",
6666
isRecord:false,
67+
// default:empty string,load inner css.
68+
// if you not need load the css(include inner css).set the value of it to not string type
69+
cssFile:"",
6770
submit: {
6871
Id: "crysyan-submit",
6972
// function called after submit

‎js/crysyan.js

+21-3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@
33
*/
44
(function ($load) {
55
'use strict';
6+
7+
var baseLoadPath = "../js/";
8+
var widgetBasePath = "../js/widget/";
9+
var widgetIconPath = "../img/";
10+
var defaultCss = "../css/crysyan.css";
11+
612
if (typeof $load === "undefined") $load = true;
713
// jquery
814
if (!window.$) {
@@ -62,6 +68,20 @@
6268
recursiveLoad(0);
6369
}
6470

71+
/**
72+
*
73+
* @param filePath css file
74+
*/
75+
function requireCss(filePath) {
76+
if (typeof filePath!=="string") return;
77+
var headElement = document.getElementsByTagName("head").item(0) || document.documentElement;
78+
var cssLink=document.createElement("link");
79+
cssLink.setAttribute("rel", "stylesheet");
80+
cssLink.setAttribute("type", "text/css");
81+
cssLink.setAttribute("href", filePath);
82+
headElement.appendChild(cssLink);
83+
}
84+
6585
(function getRequest() {
6686
// get from URL string after '?'
6787
var url = decodeURI(location.search);
@@ -75,8 +95,6 @@
7595
})();
7696
//
7797
var widgetinit = function (callback) {
78-
var widgetBasePath = "../js/widget/";
79-
var widgetIconPath = "../img/";
8098
var widgetsLoad = [];
8199
var widgets = CrysyanWidgetConfig.widgets;
82100
for (var attr in widgets) {
@@ -101,6 +119,7 @@
101119
viewCacheMap["default"] = view;
102120
};
103121
var config = JSON.parse(hrefRequestArgs.config);
122+
requireCss(config.cssFile&&config.cssFile!==""? config.cssFile:defaultCss);
104123
if (config.isRecord&&config.isRecord===true) {
105124
requireSeries("../js/ext/RecordRTC.js", function () {
106125
createView();
@@ -113,7 +132,6 @@
113132
};
114133
if ($load) {
115134
// load file（Pseudo module）
116-
var baseLoadPath = "../js/";
117135
requireSeries([
118136
baseLoadPath + "util.js",
119137
baseLoadPath + "config.js",

0 commit comments

Comments
 (0)