TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit 1d6ddfa62a5df9074474072382595d1e2d607269

Authored by TRUONG
2 parents aff3eb043c c8bfdfd96a
Exists in master and in 1 other branch develop

merge 

Merge branch 'master' of timesfun.net:TRUONG/t-shats

Showing 21 changed files Inline Diff

app/bower_components/bootstrap/.bower.json
Diff comments   View file @ 1d6ddfa
1 { 1 {
2 "name": "bootstrap", 2 "name": "bootstrap",
3 "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.", 3 "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
4 "keywords": [ 4 "keywords": [
5 "css", 5 "css",
6 "js", 6 "js",
7 "less", 7 "less",
8 "mobile-first", 8 "mobile-first",
9 "responsive", 9 "responsive",
10 "front-end", 10 "front-end",
11 "framework", 11 "framework",
12 "web" 12 "web"
13 ], 13 ],
14 "homepage": "http://getbootstrap.com", 14 "homepage": "http://getbootstrap.com",
15 "license": "MIT", 15 "license": "MIT",
16 "moduleType": "globals", 16 "moduleType": "globals",
17 "main": [ 17 "main": [
18 "less/bootstrap.less", 18 "less/bootstrap.less",
19 "dist/js/bootstrap.js" 19 "dist/js/bootstrap.js"
20 ], 20 ],
21 "ignore": [ 21 "ignore": [
22 "/.*", 22 "/.*",
23 "_config.yml", 23 "_config.yml",
24 "CNAME", 24 "CNAME",
25 "composer.json", 25 "composer.json",
26 "CONTRIBUTING.md", 26 "CONTRIBUTING.md",
27 "docs", 27 "docs",
28 "js/tests", 28 "js/tests",
29 "test-infra" 29 "test-infra"
30 ], 30 ],
31 "dependencies": { 31 "dependencies": {
32 "jquery": "1.9.1 - 3" 32 "jquery": "1.9.1 - 3"
33 }, 33 },
34 "version": "3.3.7", 34 "version": "3.3.7",
35 "_release": "3.3.7", 35 "_release": "3.3.7",
36 "_resolution": { 36 "_resolution": {
37 "type": "version", 37 "type": "version",
38 "tag": "v3.3.7", 38 "tag": "v3.3.7",
39 "commit": "0b9c4a4007c44201dce9a6cc1a38407005c26c86" 39 "commit": "0b9c4a4007c44201dce9a6cc1a38407005c26c86"
40 }, 40 },
41 "_source": "https://github.com/twbs/bootstrap.git", 41 "_source": "https://github.com/twbs/bootstrap.git",
42 "_target": "~3.3.7", 42 "_target": "^3.3.7",
43 "_originalSource": "bootstrap" 43 "_originalSource": "bootstrap"
44 } 44 }
app/bower_components/jquery/.bower.json
Diff comments   View file @ 1d6ddfa
1 { 1 {
2 "name": "jquery", 2 "name": "jquery",
3 "main": "dist/jquery.js", 3 "main": "dist/jquery.js",
4 "license": "MIT", 4 "license": "MIT",
5 "ignore": [ 5 "ignore": [
6 "package.json" 6 "package.json"
7 ], 7 ],
8 "keywords": [ 8 "keywords": [
9 "jquery", 9 "jquery",
10 "javascript", 10 "javascript",
11 "browser", 11 "browser",
12 "library" 12 "library"
13 ], 13 ],
14 "homepage": "https://github.com/jquery/jquery-dist", 14 "homepage": "https://github.com/jquery/jquery-dist",
15 "version": "3.1.1", 15 "version": "3.1.1",
16 "_release": "3.1.1", 16 "_release": "3.1.1",
17 "_resolution": { 17 "_resolution": {
18 "type": "version", 18 "type": "version",
19 "tag": "3.1.1", 19 "tag": "3.1.1",
20 "commit": "1b30f3ad466ebf2714d47eda34dbd7fdf6849fe3" 20 "commit": "1b30f3ad466ebf2714d47eda34dbd7fdf6849fe3"
21 }, 21 },
22 "_source": "https://github.com/jquery/jquery-dist.git", 22 "_source": "https://github.com/jquery/jquery-dist.git",
23 "_target": "~3.1.1", 23 "_target": "^3.1.1",
24 "_originalSource": "jquery" 24 "_originalSource": "jquery"
25 } 25 }
1 <!doctype html> 1 <!doctype html>
2 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--> 2 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]-->
3 <!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--> 3 <!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]-->
4 <!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]--> 4 <!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]-->
5 <head> 5 <head>
6 <meta charset="utf-8"> 6 <meta charset="utf-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 <title></title> 8 <title></title>
9 <meta name="description" content=""> 9 <meta name="description" content="">
10 <meta name="viewport" content="width=device-width"> 10 <meta name="viewport" content="width=device-width">
11 <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 11 <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
12 <!-- build:css styles/vendor.css --> 12 <!-- build:css styles/vendor.css -->
13 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 13 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
14 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" /> 14 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" />
15 <link rel="stylesheet" href="bower_components/select2/select2.css"> 15 <link rel="stylesheet" href="bower_components/select2/select2.css">
16 <!-- bower:css --> 16 <!-- bower:css -->
17 <!-- endbower --> 17 <!-- endbower -->
18 <!-- endbuild --> 18 <!-- endbuild -->
19 <!-- build:css({.tmp,app}) styles/main.css --> 19 <!-- build:css({.tmp,app}) styles/main.css -->
20 <link rel="stylesheet" href="styles/main.css"> 20 <link rel="stylesheet" href="styles/main.css">
21 <!-- endbuild --> 21 <!-- endbuild -->
22 </head> 22 </head>
23 <body ng-app="tshatsApp"> 23 <body ng-app="tshatsApp">
24 <!--[if lt IE 7]> 24 <!--[if lt IE 7]>
25 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 25 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
26 <![endif]--> 26 <![endif]-->
27 27
28 <!-- Add your site or application content here --> 28 <!-- Add your site or application content here -->
29 <div class="container" ng-view></div> 29 <div class="container" ng-view></div>
30 30
31 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> 31 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
32 <script> 32 <script>
33 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 33 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
34 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 34 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
35 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 35 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
36 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 36 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
37 37
38 ga('create', 'UA-XXXXX-X'); 38 ga('create', 'UA-XXXXX-X');
39 ga('send', 'pageview'); 39 ga('send', 'pageview');
40 </script> 40 </script>
41 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> 41 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
42 <script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script> 42 <script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script>
43 <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 43 <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
44 <!--[if lt IE 9]> 44 <!--[if lt IE 9]>
45 <script src="bower_components/es5-shim/es5-shim.js"></script> 45 <script src="bower_components/es5-shim/es5-shim.js"></script>
46 <script src="bower_components/json3/lib/json3.min.js"></script> 46 <script src="bower_components/json3/lib/json3.min.js"></script>
47 <![endif]--> 47 <![endif]-->
48 <script type="text/javascript"> 48 <script type="text/javascript">
49 var VERSION = new Date().getTime(); 49 var VERSION = '15-11_01';
50 var require = { 50 var require = {
51 urlArgs: "ver="+VERSION, 51 urlArgs: "ver="+VERSION,
52 }; 52 };
53 </script> 53 </script>
54 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script> 54 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
55 </body> 55 </body>
56 </html> 56 </html>
57 57
app/scripts/controllers/main.js
Diff comments   View file @ 1d6ddfa
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 'use strict'; 2 'use strict';
3 app.controller('MainCtrl', function ($rootScope, $scope, $illustration, $t_shirt) { 3 app.controller('MainCtrl', function ($rootScope, $scope, $illustration, $t_shirt) {
4 $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION; 4 $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION;
5 $scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION;
6
5 //Action T-Shirt choice color and Back or Front 7 //Action T-Shirt choice color and Back or Front
6 $scope.tShirtColor = $t_shirt.getTShirtColor(0); 8 $scope.tShirtColor = $t_shirt.getTShirtColor(0);
7 //Set color name default 9 //Set color name default
8 var tShirtColorFirstKey = 0; 10 var tShirtColorFirstKey = 0;
9 $scope.tShirtChoiceBackFrontKey = 'front'; 11 $scope.tShirtChoiceBackFrontKey = 'front';
10 $scope.tShirtColorKey = tShirtColorFirstKey; 12 $scope.tShirtColorKey = tShirtColorFirstKey;
11 $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code; 13 $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code;
12 $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name; 14 $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name;
13 $scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front; 15 $scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front;
14 $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back; 16 $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back;
15 $scope.tShirtImg = $scope.tShirtImgFront; 17 $scope.tShirtImg = $scope.tShirtImgFront;
16 18
17 $scope.choiceTShirtColor = function(key) { 19 $scope.choiceTShirtColor = function(key) {
18 $scope.tShirtColorKey = key; 20 $scope.tShirtColorKey = key;
19 $rootScope.tShirtColorCode = $scope.tShirtColor[key].code; 21 $rootScope.tShirtColorCode = $scope.tShirtColor[key].code;
20 $scope.tShirtColorName = $scope.tShirtColor[key].name; 22 $scope.tShirtColorName = $scope.tShirtColor[key].name;
21 $scope.tShirtImgFront = $scope.tShirtColor[key].img.front; 23 $scope.tShirtImgFront = $scope.tShirtColor[key].img.front;
22 $scope.tShirtImgBack = $scope.tShirtColor[key].img.back; 24 $scope.tShirtImgBack = $scope.tShirtColor[key].img.back;
23 if($scope.tShirtChoiceBackFrontKey == 'front') { 25 if($scope.tShirtChoiceBackFrontKey == 'front') {
24 $scope.tShirtImg = $scope.tShirtImgFront; 26 $scope.tShirtImg = $scope.tShirtImgFront;
25 } else { 27 } else {
26 $scope.tShirtImg = $scope.tShirtImgBack; 28 $scope.tShirtImg = $scope.tShirtImgBack;
27 } 29 }
28 }; 30 };
29 $scope.choiceTShirtBackFront = function(choice) { 31 $scope.choiceTShirtBackFront = function(choice) {
30 if(choice == 'front') { 32 if(choice == 'front') {
31 $scope.tShirtImg = $scope.tShirtImgFront; 33 $scope.tShirtImg = $scope.tShirtImgFront;
32 } else { 34 } else {
33 $scope.tShirtImg = $scope.tShirtImgBack; 35 $scope.tShirtImg = $scope.tShirtImgBack;
34 } 36 }
35 $scope.tShirtChoiceBackFrontKey = choice; 37 $scope.tShirtChoiceBackFrontKey = choice;
36 }; 38 };
37 39
38 40
39 $scope.showIllustration = function(tab){ 41 $scope.showIllustration = function(tab){
40 $scope.isShowLeftPanel = tab; 42 $rootScope.isShowLeftPanel = tab;
41 switch (tab){ 43 switch (tab) {
42 case 'illustration': { 44 case 'illustration': {
43 $scope.IllustrationList = $illustration.getAll(); 45 $scope.IllustrationList = $illustration.getAll();
44 $scope.illustrationSelectConfig = { 46 $scope.illustrationSelectConfig = {
45 allowClear:true 47 allowClear:true
46 }; 48 };
47 break; 49 break;
48 } 50 }
49 // case: '' 51 case 'text': {
52 break;
53 }
50 } 54 }
51 }; 55 };
52 56
57 //safeApply
58 $rootScope.safeApply = function(fn) {
59 var phase = this.$root.$$phase;
60 if(phase == '$apply' || phase == '$digest') {
61 if(fn && (typeof(fn) === 'function')) {
62 fn();
63 }
64 } else {
65 this.$apply(fn);
66 }
67 };
68
53 $scope.modalTShirtDesign = function() { 69 $scope.modalTShirtDesign = function() {
54 $('#tshirt-design').modal( 70 $('#tshirt-design').modal(
55 { 71 {
56 backdrop: 'static', 72 backdrop: 'static',
57 keyboard: false 73 keyboard: false
58 } 74 }
59 ); 75 );
60 $scope.showIllustration('default'); 76 $scope.showIllustration('default');
61 }; 77 };
62 $scope.modalClose = function(){ 78 $scope.modalClose = function(){
63 $('#tshirt-design').modal('hide'); 79 $('#tshirt-design').modal('hide');
64 }; 80 };
81
82
65 83
66 84
67 }); 85 });
68 }); 86 });
69 87
app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 1d6ddfa
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 'use strict'; 2 //'use strict';
3 3
4 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) { 4 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) {
5
6 var canvas = new fabric.Canvas('main-design-container'); 5 var canvas = new fabric.Canvas('main-design-container');
7 fabric.Object.prototype.transparentCorners = false; 6 fabric.Object.prototype.transparentCorners = false;
8 7
9 canvas.on('after:render', function() { 8 canvas.on('after:render', function() {
10 }); 9 });
11 canvas.on({ 10 canvas.on({
12 'object:added': onIllustrationAdded, 11 'object:added': onIllustrationAdded,
13 'object:moving': onIllustrationChange, 12 'object:moving': onIllustrationChange,
14 'object:scaling': onIllustrationChange, 13 'object:scaling': onIllustrationChange,
15 'object:rotating': onIllustrationChange, 14 'object:rotating': onIllustrationChange,
16 'object:selected': onllustrationSelected, 15 'object:selected': onIllustrationSelected,
17 'object:modified': onllustrationModifield 16 'object:modified': onIllustrationModifield,
17 'selected:deselected' : onIllustrationOut,
18 //'selected:out' : onIllustrationOut,
19 //'mouse:up' : onIllustrationOut,
18 }); 20 });
19 21
20 var currentObj; 22 var currentObj;
21 var listObj = []; 23 var listObj = [];
22 var stateObj = []; 24 var stateObj = [];
23 var indexCurr = 0; 25 var indexCurr = 0;
24 var indexCurr2 = 0; 26 var indexCurr2 = 0;
25 var actionObj = false; 27 var actionObj = false;
26 var refreshObj = true; 28 var refreshObj = true;
27 29
28 function onIllustrationAdded(options){ 30 function onIllustrationAdded(options){
29 var object = options.target; 31 var object = options.target;
30 console.log('object:added'); 32 console.log('object:added');
31 33
32 if (actionObj === true) { 34 if (actionObj === true) {
33 stateObj = [stateObj[indexCurr2]]; 35 stateObj = [stateObj[indexCurr2]];
34 listObj = [listObj[indexCurr2]]; 36 listObj = [listObj[indexCurr2]];
35 37
36 actionObj = false; 38 actionObj = false;
37 console.log(stateObj); 39 console.log(stateObj);
38 indexCurr = 1; 40 indexCurr = 1;
39 } 41 }
40 object.saveState(); 42 object.saveState();
41 43
42 console.log(object.originalState); 44 console.log(object.originalState);
43 stateObj[indexCurr] = JSON.stringify(object.originalState); 45 stateObj[indexCurr] = JSON.stringify(object.originalState);
44 listObj[indexCurr] = object; 46 listObj[indexCurr] = object;
45 indexCurr++; 47 indexCurr++;
46 indexCurr2 = indexCurr - 1; 48 indexCurr2 = indexCurr - 1;
47 refreshObj = true; 49 refreshObj = true;
48 } 50 }
49 51
50 function onllustrationModifield(options){ 52 function onIllustrationModifield(options){
51 var objOffset = canvas.getActiveObject().getBoundingRect(); 53 var objOffset = canvas.getActiveObject().getBoundingRect();
52 var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50; 54 var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50;
53 console.log(objOffset,canvas.height,canvas.width); 55 //console.log(objOffset,canvas.height,canvas.width);
54 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 56 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
55 if (confirm('削除してもよろしいですか')){ 57 if (confirm('削除してもよろしいですか')){
56 canvas.getActiveObject().remove(); 58 canvas.getActiveObject().remove();
57 }else{ 59 }else{
58 undoCanvas(); 60 undoCanvas();
59 return; 61 return;
60 } 62 }
61 } 63 }
62 64
63 var object = options.target; 65 var object = options.target;
64 console.log('object:modified'); 66 console.log('object:modified');
65 if (actionObj === true) { 67 if (actionObj === true) {
66 stateObj = [stateObj[indexCurr2]]; 68 stateObj = [stateObj[indexCurr2]];
67 listObj = [listObj[indexCurr2]]; 69 listObj = [listObj[indexCurr2]];
68 70
69 actionObj = false; 71 actionObj = false;
70 console.log(stateObj); 72 console.log(stateObj);
71 indexCurr = 1; 73 indexCurr = 1;
72 } 74 }
73 75
74 object.saveState(); 76 object.saveState();
75 77
76 stateObj[indexCurr] = JSON.stringify(object.originalState); 78 stateObj[indexCurr] = JSON.stringify(object.originalState);
77 listObj[indexCurr] = object; 79 listObj[indexCurr] = object;
78 indexCurr++; 80 indexCurr++;
79 indexCurr2 = indexCurr - 1; 81 indexCurr2 = indexCurr - 1;
80 console.log(stateObj); 82 console.log(stateObj);
81 refreshObj = true; 83 refreshObj = true;
82 } 84 }
83 85
84 function onIllustrationChange(options) { 86 function onIllustrationChange(options) {
85 // options.target.setCoords(); 87 // options.target.setCoords();
86 // canvas.forEachObject(function(obj) { 88 // canvas.forEachObject(function(obj) {
87 // if (obj === options.target) return; 89 // if (obj === options.target) return;
88 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); 90 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
89 // }); 91 // });
92
90 } 93 }
91 94
92 function onllustrationSelected(options){ 95 function onIllustrationOut() {
93 //console.log(canvas.getActiveObject()); 96 console.log('out object');
94 } 97 }
95 98
96 function undoCanvas() { 99 function undoCanvas() {
97 if (indexCurr <= 0) { 100 if (indexCurr <= 0) {
98 indexCurr = 0; 101 indexCurr = 0;
99 return; 102 return;
100 } 103 }
101 104
102 if (refreshObj === true) { 105 if (refreshObj === true) {
103 indexCurr--; 106 indexCurr--;
104 refreshObj = false; 107 refreshObj = false;
105 } 108 }
106 109
107 console.log('undo'); 110 console.log('undo');
108 111
109 indexCurr2 = indexCurr - 1; 112 indexCurr2 = indexCurr - 1;
110 currentObj = listObj[indexCurr2]; 113 currentObj = listObj[indexCurr2];
111 if (currentObj){ 114 if (currentObj){
112 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 115 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
113 } 116 }
114 117
115 indexCurr--; 118 indexCurr--;
116 currentObj.setCoords(); 119 currentObj.setCoords();
117 canvas.renderAll(); 120 canvas.renderAll();
118 actionObj = true; 121 actionObj = true;
119 } 122 }
120 123
121 function redoCanvas() { 124 function redoCanvas() {
122 actionObj = true; 125 actionObj = true;
123 if (indexCurr >= stateObj.length - 1) { 126 if (indexCurr >= stateObj.length - 1) {
124 return; 127 return;
125 } 128 }
126 129
127 console.log('redo'); 130 console.log('redo');
128 131
129 indexCurr2 = indexCurr + 1; 132 indexCurr2 = indexCurr + 1;
130 currentObj = listObj[indexCurr2]; 133 currentObj = listObj[indexCurr2];
131 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 134 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
132 135
133 indexCurr++; 136 indexCurr++;
134 currentObj.setCoords(); 137 currentObj.setCoords();
135 canvas.renderAll(); 138 canvas.renderAll();
136 } 139 }
140
141 $scope.currentObject = null;
142 function onIllustrationSelected(options) {
143 var object = options.target;
144 $scope.typeObject = object.type;
145 switch ($scope.typeObject) {
146 case 'i-text' :
147 $('#input-design-text').focus();
148 $rootScope.isShowLeftPanel = 'text';
149 break;
137 150
151 case 'path-group' :
152 $rootScope.isShowLeftPanel = 'illustration';
153 break;
154
155 default :
156 $rootScope.isShowLeftPanel = 'default';
157 break;
158 }
159 $rootScope.safeApply();
160 }
161
138 // Illustration process 162 // Illustration process
139 $scope.changeIllustrationCategory = function(currentIllustration){ 163 $scope.changeIllustrationCategory = function(currentIllustration){
140 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 164 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
141 console.log($scope.currentIllustrationCate); 165 //console.log($scope.currentIllustrationCate);
142 }; 166 };
143 167
144 $scope.insertSvg = function(item){ 168 $scope.insertSvg = function(item){
145 fabric.loadSVGFromURL(item.path, function(objects, options) { 169 fabric.loadSVGFromURL(item.path, function(objects, options) {
146 var shape = fabric.util.groupSVGElements(objects, options); 170 var shape = fabric.util.groupSVGElements(objects, options);
147 // shape.setFill('green'); 171 // shape.setFill('green');
148 canvas.add(shape.scale(0.6)); 172 canvas.add(shape.scale(0.6));
149 shape.set({ left: 150, top: 200 }).setCoords(); 173 shape.set({ left: 150, top: 200 }).setCoords();
150 canvas.renderAll(); 174 canvas.renderAll();
151 canvas.setActiveObject(shape); 175 canvas.setActiveObject(shape);
152 }); 176 });
153 }; 177 };
154 178
155 // color pattern 179 // color pattern
156 $scope.changeColorPattern = function(color){ 180 $scope.changeColorPattern = function(color){
157 if (canvas.getActiveObject()){ 181 if (canvas.getActiveObject()){
158 canvas.getActiveObject().set("fill", color); 182 canvas.getActiveObject().set("fill", color);
159 canvas.renderAll(); 183 canvas.renderAll();
160 } 184 }
161 }; 185 };
162 $scope.listColorPatterns = [ 186 $scope.listColorPatterns = [
163 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 187 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
164 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 188 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
165 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 189 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
166 '#333333' 190 '#333333'
167 ]; 191 ];
168 192
193 $scope.focusInputText = function() {
194 if($scope.typeObject != 'i-text')
195 $scope.iText = new fabric.IText('');
196 };
169 197
170 //Design text 198 //Design text
171 $scope.inputText = function(e) { 199 $scope.inputText = function(e) {
172 var text = e; 200 var iText = $scope.iText;
173 var iText = new fabric.IText(text); 201 iText.text = e;
174 canvas.add(iText); 202 canvas.add(iText);
175 canvas.renderAll(); 203 canvas.renderAll();
176 canvas.setActiveObject(iText); 204 canvas.setActiveObject(iText);
177 } 205 };
178 206
179 207 //init
208 //$scope.showIllustration('default');
180 }); 209 });
181 }); 210 });
1 /* Space out content a bit */ 1 /* Space out content a bit */
2 @import "../fonts/font.css"; 2 @import "../fonts/font.css";
3 body { 3 body {
4 font-family: 'Hiragino Kaku Gothic Pro', sans-serif; 4 font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
5 } 5 }
6 .padding-right-0{ 6 .padding-right-0{
7 padding-right: 0!important; 7 padding-right: 0!important;
8 } 8 }
9 .padding-left-0{ 9 .padding-left-0{
10 padding-left: 0!important; 10 padding-left: 0!important;
11 } 11 }
12 button.red{ 12 button.red{
13 color: #ffffff; 13 color: #ffffff;
14 background-color: #ff0000; 14 background-color: #ff0000;
15 border: 1px solid #ff0000; 15 border: 1px solid #ff0000;
16 16
17 } 17 }
18 button.white{ 18 button.white{
19 border: 1px solid #ff8080; 19 border: 1px solid #ff8080;
20 color: #ff8080; 20 color: #ff8080;
21 background-color: #ffffff; 21 background-color: #ffffff;
22 } 22 }
23 button.brown{ 23 button.brown{
24 background-color: #666666; 24 background-color: #666666;
25 border: 1px solid #666666; 25 border: 1px solid #666666;
26 color: #ffffff; 26 color: #ffffff;
27 border-radius: 5px; 27 border-radius: 5px;
28 } 28 }
29 button.black{ 29 button.black{
30 border: 1px solid #c9c9c9; 30 border: 1px solid #c9c9c9;
31 background-color: #343434; 31 background-color: #343434;
32 color: #ffffff; 32 color: #ffffff;
33 padding: 1px 6px; 33 padding: 1px 6px;
34 } 34 }
35 #tshirt-container{ 35 #tshirt-container{
36 border-left: 1px solid #dcdcdc; 36 border-left: 1px solid #dcdcdc;
37 border-right: 1px solid #dcdcdc; 37 border-right: 1px solid #dcdcdc;
38 } 38 }
39 /*HEADER*/ 39 /*HEADER*/
40 header{ 40 header{
41 border-bottom: 1px solid #dcdcdc; 41 border-bottom: 1px solid #dcdcdc;
42 } 42 }
43 header .logo{ 43 header .logo{
44 color: #ed1d24; 44 color: #ed1d24;
45 font-size: 30px; 45 font-size: 30px;
46 text-transform: uppercase; 46 text-transform: uppercase;
47 font-weight: bold; 47 font-weight: bold;
48 } 48 }
49 header .logo img{ 49 header .logo img{
50 width: 60px; 50 width: 60px;
51 } 51 }
52 /*NAVIGATION*/ 52 /*NAVIGATION*/
53 nav{ 53 nav{
54 border-bottom: 1px solid #dcdcdc; 54 border-bottom: 1px solid #dcdcdc;
55 padding: 10px 0; 55 padding: 10px 0;
56 } 56 }
57 nav h2{ 57 nav h2{
58 font-size: 27px; 58 font-size: 27px;
59 margin: 0 0; 59 margin: 0 0;
60 } 60 }
61 nav ul{ 61 nav ul{
62 list-style: none; 62 list-style: none;
63 padding-left: 0; 63 padding-left: 0;
64 margin-bottom: 0; 64 margin-bottom: 0;
65 65
66 } 66 }
67 nav ul li{ 67 nav ul li{
68 margin-left: 2px; 68 margin-left: 2px;
69 float: left; 69 float: left;
70 padding: 6px 12px; 70 padding: 6px 12px;
71 background-color: #999999; 71 background-color: #999999;
72 position: relative; 72 position: relative;
73 } 73 }
74 nav ul li i.fa{ 74 nav ul li i.fa{
75 position: absolute; 75 position: absolute;
76 color: #ffffff; 76 color: #ffffff;
77 font-size: 18px; 77 font-size: 18px;
78 right: -4px; 78 right: -4px;
79 top: 50%; 79 top: 50%;
80 transform: translateX(-50%) translateY(-50%); 80 transform: translateX(-50%) translateY(-50%);
81 -webkit-transform: translateX(-50%) translateY(-50%); 81 -webkit-transform: translateX(-50%) translateY(-50%);
82 } 82 }
83 nav ul li a{ 83 nav ul li a{
84 color: #ffffff; 84 color: #ffffff;
85 } 85 }
86 nav ul li:hover a{ 86 nav ul li:hover a{
87 text-decoration: none; 87 text-decoration: none;
88 color: #ffffff; 88 color: #ffffff;
89 } 89 }
90 nav ul li.action{ 90 nav ul li.action{
91 color: #ffffff; 91 color: #ffffff;
92 background-color: #ed1d24; 92 background-color: #ed1d24;
93 } 93 }
94 /*ASIDE*/ 94 /*ASIDE*/
95 aside{ 95 aside{
96 margin: 10px 0; 96 margin: 10px 0;
97 } 97 }
98 98
99 aside .break-down{ 99 aside .break-down{
100 padding: 0 0; 100 padding: 0 0;
101 } 101 }
102 aside .break-down i.fa{ 102 aside .break-down i.fa{
103 font-size: 35px; 103 font-size: 35px;
104 color: #ff0000; 104 color: #ff0000;
105 } 105 }
106 aside .break-line{ 106 aside .break-line{
107 height: 10px; 107 height: 10px;
108 } 108 }
109 aside .break-line hr{ 109 aside .break-line hr{
110 border-top: 1px dotted #cccccc; 110 border-top: 1px dotted #cccccc;
111 } 111 }
112 aside .step{ 112 aside .step{
113 margin: 0 0; 113 margin: 0 0;
114 } 114 }
115 aside .step .title{ 115 aside .step .title{
116 font-size: 15px; 116 font-size: 15px;
117 line-height: 16px; 117 line-height: 16px;
118 font-weight: bold; 118 font-weight: bold;
119 margin-bottom: 3px; 119 margin-bottom: 3px;
120 } 120 }
121 aside .step .title-notice{ 121 aside .step .title-notice{
122 font-size: 13px; 122 font-size: 13px;
123 line-height: 16px; 123 line-height: 16px;
124 margin-bottom: 3px; 124 margin-bottom: 3px;
125 } 125 }
126 aside .step .title-notice .require{ 126 aside .step .title-notice .require{
127 font-size: 10px; 127 font-size: 10px;
128 } 128 }
129 aside .step .step-box{ 129 aside .step .step-box{
130 border: 2px solid #dcdcdc; 130 border: 2px solid #dcdcdc;
131 font-size: 12px; 131 font-size: 12px;
132 132
133 } 133 }
134 /*Step 1*/ 134 /*Step 1*/
135 aside .step .step-box .tshirt-design{ 135 aside .step .step-box .tshirt-design{
136 border: 1px solid #cccccc; 136 border: 1px solid #cccccc;
137 background-color: #f5f5f5; 137 background-color: #f5f5f5;
138 margin: 10px 10px; 138 margin: 10px 10px;
139 } 139 }
140 aside .step .step-box .tshirt-design:hover{ 140 aside .step .step-box .tshirt-design:hover{
141 border: 1px solid #ff0000; 141 border: 1px solid #ff0000;
142 } 142 }
143 aside .step .step-box .tshirt-design button:hover{ 143 aside .step .step-box .tshirt-design button:hover{
144 background-color: #fa7b7b; 144 background-color: #fa7b7b;
145 border: 1px solid #fa7b7b; 145 border: 1px solid #fa7b7b;
146 } 146 }
147 aside .step .step-box .tshirt-design div{ 147 aside .step .step-box .tshirt-design div{
148 float: left; 148 float: left;
149 } 149 }
150 aside .step .step-box .tshirt-design .icon{ 150 aside .step .step-box .tshirt-design .icon{
151 padding: 4px 4px; 151 padding: 4px 4px;
152 border-right: 1px solid #cccccc; 152 border-right: 1px solid #cccccc;
153 153
154 } 154 }
155 aside .step .step-box .tshirt-design .icon img{ 155 aside .step .step-box .tshirt-design .icon img{
156 height: 50px; 156 height: 50px;
157 } 157 }
158 aside .step .step-box .tshirt-design .name{ 158 aside .step .step-box .tshirt-design .name{
159 padding: 10px 10px; 159 padding: 10px 10px;
160 160
161 } 161 }
162 aside .step .step-box .tshirt-design .action{ 162 aside .step .step-box .tshirt-design .action{
163 padding: 10px 10px; 163 padding: 10px 10px;
164 float: right; 164 float: right;
165 165
166 } 166 }
167 aside .step .step-box .tshirt-design .action button{ 167 aside .step .step-box .tshirt-design .action button{
168 padding: 8px 10px; 168 padding: 8px 10px;
169 } 169 }
170 /*Step 2*/ 170 /*Step 2*/
171 aside .step .step-box .tshirt-color{ 171 aside .step .step-box .tshirt-color{
172 padding: 6px 10px; 172 padding: 6px 10px;
173 position: relative; 173 position: relative;
174 } 174 }
175 aside .step .step-box .tshirt-color ul.choice-color{ 175 aside .step .step-box .tshirt-color ul.choice-color{
176 float: left; 176 float: left;
177 list-style: none; 177 list-style: none;
178 padding-left: 0; 178 padding-left: 0;
179 width: 100%; 179 width: 100%;
180 margin-bottom: 3px; 180 margin-bottom: 3px;
181 } 181 }
182 aside .step .step-box .tshirt-color ul.choice-color li{ 182 aside .step .step-box .tshirt-color ul.choice-color li{
183 margin: 0 10px 0 0; 183 margin: 0 10px 0 0;
184 border: 1px solid #cccccc; 184 border: 1px solid #cccccc;
185 padding: 2px 2px; 185 padding: 2px 2px;
186 float: left; 186 float: left;
187 cursor: pointer; 187 cursor: pointer;
188 } 188 }
189 aside .step .step-box .tshirt-color ul.choice-color li.action{ 189 aside .step .step-box .tshirt-color ul.choice-color li.action{
190 border: 1px solid #ff0000; 190 border: 1px solid #ff0000;
191 } 191 }
192 aside .step .step-box .tshirt-color ul.choice-color li:hover{ 192 aside .step .step-box .tshirt-color ul.choice-color li:hover{
193 border: 1px solid #ff0000; 193 border: 1px solid #ff0000;
194 } 194 }
195 aside .step .step-box .tshirt-color ul.choice-color li div{ 195 aside .step .step-box .tshirt-color ul.choice-color li div{
196 height: 30px; 196 height: 30px;
197 width: 30px; 197 width: 30px;
198 } 198 }
199 199
200 aside .step .step-box .tshirt-color ul.choice-color li.white div{ 200 aside .step .step-box .tshirt-color ul.choice-color li.white div{
201 background-color: #ece7e4; 201 background-color: #ece7e4;
202 } 202 }
203 aside .step .step-box .tshirt-color ul.choice-color li.blue div{ 203 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
204 background-color: #e7dfd0; 204 background-color: #e7dfd0;
205 } 205 }
206 aside .step .step-box .tshirt-color .color-name{ 206 aside .step .step-box .tshirt-color .color-name{
207 width: 100%; 207 width: 100%;
208 font-size: 10px; 208 font-size: 10px;
209 } 209 }
210 aside .step .step-box .tshirt-color .view-more{ 210 aside .step .step-box .tshirt-color .view-more{
211 position: absolute; 211 position: absolute;
212 bottom: 6px; 212 bottom: 6px;
213 right: 10px; 213 right: 10px;
214 } 214 }
215 /*Step 3*/ 215 /*Step 3*/
216 aside .step .step-box .tshirt-saveorder{ 216 aside .step .step-box .tshirt-saveorder{
217 padding: 10px 10px 6px 10px; 217 padding: 10px 10px 6px 10px;
218 } 218 }
219 aside .step .step-box .tshirt-saveorder .action{ 219 aside .step .step-box .tshirt-saveorder .action{
220 width: 50%; 220 width: 50%;
221 float: left; 221 float: left;
222 } 222 }
223 aside .step .step-box .tshirt-saveorder .action:first-child{ 223 aside .step .step-box .tshirt-saveorder .action:first-child{
224 padding-right: 5px; 224 padding-right: 5px;
225 } 225 }
226 aside .step .step-box .tshirt-saveorder .action:last-child{ 226 aside .step .step-box .tshirt-saveorder .action:last-child{
227 padding-left: 5px; 227 padding-left: 5px;
228 } 228 }
229 aside .step .step-box .tshirt-saveorder .action button{ 229 aside .step .step-box .tshirt-saveorder .action button{
230 padding: 8px 10px; 230 padding: 8px 10px;
231 231
232 } 232 }
233 aside .step .step-box .tshirt-saveorder .action button .text{ 233 aside .step .step-box .tshirt-saveorder .action button .text{
234 float: left; 234 float: left;
235 width: 80%; 235 width: 80%;
236 text-align: center; 236 text-align: center;
237 padding-left: 10px; 237 padding-left: 10px;
238 vertical-align: bottom; 238 vertical-align: bottom;
239 } 239 }
240 aside .step .step-box .tshirt-saveorder .action button .arrow{ 240 aside .step .step-box .tshirt-saveorder .action button .arrow{
241 float: left; 241 float: left;
242 width: 20%; 242 width: 20%;
243 height: 40px; 243 height: 40px;
244 position: relative; 244 position: relative;
245 } 245 }
246 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ 246 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{
247 position: absolute; 247 position: absolute;
248 top: 50%; 248 top: 50%;
249 right: -6px; 249 right: -6px;
250 transform: translateX(-50%) translateY(-50%); 250 transform: translateX(-50%) translateY(-50%);
251 -webkit-transform: translateX(-50%) translateY(-50%); 251 -webkit-transform: translateX(-50%) translateY(-50%);
252 } 252 }
253 aside .step .step-box .tshirt-saveorder .notice{ 253 aside .step .step-box .tshirt-saveorder .notice{
254 padding: 5px 0 0 0; 254 padding: 5px 0 0 0;
255 } 255 }
256 /*Step 4*/ 256 /*Step 4*/
257 aside .step .title-notice{ 257 aside .step .title-notice{
258 258
259 } 259 }
260 aside .step .step-box .change-design{ 260 aside .step .step-box .change-design{
261 padding: 4px 4px; 261 padding: 4px 4px;
262 } 262 }
263 aside .step .step-box .change-design table{ 263 aside .step .step-box .change-design table{
264 264
265 } 265 }
266 aside .step .step-box .change-design table tr{ 266 aside .step .step-box .change-design table tr{
267 border-bottom: 1px dotted #cccccc; 267 border-bottom: 1px dotted #cccccc;
268 } 268 }
269 aside .step .step-box .change-design table tr:last-child{ 269 aside .step .step-box .change-design table tr:last-child{
270 border-bottom: 0; 270 border-bottom: 0;
271 } 271 }
272 272
273 /*Step 5- finish*/ 273 /*Step 5- finish*/
274 aside .step .finish-design{ 274 aside .step .finish-design{
275 padding: 20px 0; 275 padding: 20px 0;
276 } 276 }
277 aside .step .finish-design button{ 277 aside .step .finish-design button{
278 width: 100%; 278 width: 100%;
279 padding: 8px 10px; 279 padding: 8px 10px;
280 } 280 }
281 281
282 /*DESIGN CONTENT*/ 282 /*DESIGN CONTENT*/
283 #tshirt-content{ 283 #tshirt-content{
284 position: relative; 284 position: relative;
285 } 285 }
286 #tshirt-content .switch-border-design{ 286 #tshirt-content .switch-border-design{
287 position: absolute; 287 position: absolute;
288 top: 5px; 288 top: 5px;
289 right: 10px; 289 right: 10px;
290 color: red; 290 color: red;
291 font-size: 11px; 291 font-size: 11px;
292 } 292 }
293 #tshirt-content .tshirt-image{ 293 #tshirt-content .tshirt-image{
294 padding: 20px 0 0 0; 294 padding: 20px 0 0 0;
295 } 295 }
296 #tshirt-content .tshirt-choice{ 296 #tshirt-content .tshirt-choice{
297 297
298 } 298 }
299 #tshirt-content .tshirt-choice ul{ 299 #tshirt-content .tshirt-choice ul{
300 list-style: none; 300 list-style: none;
301 padding-left: 0; 301 padding-left: 0;
302 display: table; 302 display: table;
303 margin: auto; 303 margin: auto;
304 } 304 }
305 #tshirt-content .tshirt-choice ul li{ 305 #tshirt-content .tshirt-choice ul li{
306 float: left; 306 float: left;
307 margin: 10px 10px; 307 margin: 10px 10px;
308 cursor: pointer; 308 cursor: pointer;
309 } 309 }
310 #tshirt-content .tshirt-choice ul li .image{ 310 #tshirt-content .tshirt-choice ul li .image{
311 border: 1px solid #cccccc; 311 border: 1px solid #cccccc;
312 padding: 3px 3px; 312 padding: 3px 3px;
313 } 313 }
314 #tshirt-content .tshirt-choice ul li.focus{ 314 #tshirt-content .tshirt-choice ul li.focus{
315 315
316 } 316 }
317 #tshirt-content .tshirt-choice ul li.focus .image{ 317 #tshirt-content .tshirt-choice ul li.focus .image{
318 border: 1px solid #ff0000; 318 border: 1px solid #ff0000;
319 } 319 }
320 #tshirt-content .tshirt-choice ul li .image img{ 320 #tshirt-content .tshirt-choice ul li .image img{
321 width: 50px; 321 width: 50px;
322 height: auto; 322 height: auto;
323 } 323 }
324 /*MODAL Design*/ 324 /*MODAL Design*/
325 #tshirt-design{ 325 #tshirt-design{
326 background-color: #666666; 326 background-color: #666666;
327 } 327 }
328 #tshirt-design .modal-dialog{ 328 #tshirt-design .modal-dialog{
329 width: 75%; 329 width: 75%;
330 margin: 0 auto; 330 margin: 0 auto;
331 } 331 }
332 #tshirt-design .modal-dialog .modal-content{ 332 #tshirt-design .modal-dialog .modal-content{
333 background-color: transparent; 333 background-color: transparent;
334 border-radius: 0; 334 border-radius: 0;
335 border: 0; 335 border: 0;
336 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 336 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
337 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 337 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
338 } 338 }
339 #tshirt-design .modal-dialog .modal-content .modal-header{ 339 #tshirt-design .modal-dialog .modal-content .modal-header{
340 padding: 0 0 10px 0; 340 padding: 0 0 10px 0;
341 border-bottom: 0; 341 border-bottom: 0;
342 border-shadow: none!important; 342 border-shadow: none!important;
343 } 343 }
344 #tshirt-design .modal-dialog .modal-content .modal-body{ 344 #tshirt-design .modal-dialog .modal-content .modal-body{
345 background-color: #f5f5f5; 345 background-color: #f5f5f5;
346 padding: 0 0; 346 padding: 0 0;
347 } 347 }
348 #tshirt-design header{ 348 #tshirt-design header{
349 border-bottom: 1px solid #cccccc; 349 border-bottom: 1px solid #cccccc;
350 background-color: #dddddd; 350 background-color: #dddddd;
351 } 351 }
352 #tshirt-design header ul.nav{ 352 #tshirt-design header ul.nav{
353 padding-left: 0; 353 padding-left: 0;
354 list-style: none; 354 list-style: none;
355 } 355 }
356 #tshirt-design header ul.nav li{ 356 #tshirt-design header ul.nav li{
357 float: left; 357 float: left;
358 padding: 8px 26px; 358 padding: 8px 26px;
359 border-right: 1px solid #cccccc; 359 border-right: 1px solid #cccccc;
360 font-size: 14px; 360 font-size: 14px;
361 cursor: pointer; 361 cursor: pointer;
362 } 362 }
363 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ 363 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
364 background-color: red; 364 background-color: red;
365 color: #ffffff; 365 color: #ffffff;
366 } 366 }
367 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ 367 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
368 color: #ffffff; 368 color: #ffffff;
369 } 369 }
370 #tshirt-design header ul.nav li i.fa{ 370 #tshirt-design header ul.nav li i.fa{
371 color: #fe070f; 371 color: #fe070f;
372 font-size: 20px; 372 font-size: 20px;
373 margin-right: 10px; 373 margin-right: 10px;
374 } 374 }
375 #tshirt-design header .action{ 375 #tshirt-design header .action{
376 376
377 } 377 }
378 #tshirt-design header .action button{ 378 #tshirt-design header .action button{
379 padding: 2px 10px; 379 padding: 2px 10px;
380 margin: 6px 10px; 380 margin: 6px 10px;
381 } 381 }
382 #tshirt-design header .action button:hover{ 382 #tshirt-design header .action button:hover{
383 background-color: red; 383 background-color: red;
384 color: #ffffff; 384 color: #ffffff;
385 } 385 }
386 386
387 /*Aside modal*/ 387 /*Aside modal*/
388 .aside{ 388 .aside{
389 padding-left: 0;
390 } 389 }
391 .aside #choice-design-option{ 390
391 .aside .box-design-option{
392 list-style: none; 392 list-style: none;
393 padding-left: 0; 393 padding-left: 0;
394 margin-top: 10px; 394 margin-top: 10px;
395 }
396 .aside .box-design-option li{
395 397
396 } 398 }
397 .aside #choice-design-option li{ 399 .aside .box-design-option li{
398 border: 1px solid #cdcdcd; 400 border: 1px solid #cdcdcd;
399 position: relative; 401 position: relative;
400 cursor: pointer; 402 cursor: pointer;
401 } 403 }
402 .aside #choice-design-option li .hover{ 404 .aside .box-design-option li .hover{
403 background-color: #fddad4; 405 background-color: #fddad4;
404 opacity: 0.6; 406 opacity: 0.6;
405 position: absolute; 407 position: absolute;
406 width: 100%; 408 width: 100%;
407 height: 100%; 409 height: 100%;
408 display: none; 410 display: none;
409 } 411 }
410 .aside #choice-design-option li:hover .hover{ 412 .aside .box-design-option li:hover .hover{
411 display: block; 413 display: block;
412 } 414 }
413 415
414 .aside #choice-design-option li .title{ 416 .aside .box-design-option li .title{
415 background: url("../images/bg1.png") repeat #cdcdcd; 417 background: url("../images/bg1.png") repeat #cdcdcd;
416 padding: 3px 10px; 418 padding: 3px 10px;
417 } 419 }
418 .aside #choice-design-option li .title i.fa{ 420 .aside .box-design-option li .title i.fa{
419 color: #000000; 421 color: #000000;
420 } 422 }
421 423
422 .aside #choice-design-option li .content{ 424 .aside .box-design-option li .content{
423 425
424 } 426 }
425 .aside #choice-design-option li .content i.fa{ 427 .aside .box-design-option li .content i.fa{
426 font-size: 30px; 428 font-size: 30px;
427 color: #fe070f; 429 color: #fe070f;
428 margin: 8px 0; 430 margin: 8px 0;
429 } 431 }
430 .aside #choice-design-option li .content .des{ 432 .aside .box-design-option li .content .des{
431 padding: 3px 10px 3px 0; 433 padding: 3px 10px 3px 0;
432 } 434 }
433 435
434 436 /*Design Choice Illustration*/
435 .aside #choice-illustration{
436 list-style: none;
437 padding-left: 0;
438 margin-top: 10px;
439
440 }
441 .aside #choice-illustration li{
442 border: 1px #cdcdcd double;
443 border-radius: 5px;
444 position: relative;
445 padding: 5px 10px;
446 margin-bottom: 20px;
447 }
448
449 .aside #choice-illustration li .title{
450 /*background: url("../images/bg1.png") repeat #cdcdcd;*/
451 padding: 3px 10px;
452 font-size: 13px;
453 color: #ff0f00;
454 font-weight: 600;
455 }
456
457 .aside #choice-illustration li .content { 437 .aside #choice-illustration li .content {
458 /*padding: 10px 10px;*/ 438 padding: 10px 10px;
459 } 439 }
460 440
461 .aside #choice-illustration li .content select{ 441 .aside #choice-illustration li .content select{
462 width: 100%; 442 width: 100%;
463 } 443 }
464 444
465 .aside #choice-illustration li .content .illustration-list { 445 .aside #choice-illustration li .content .illustration-list {
466 width: 100%; 446 width: 100%;
467 border: #bbb solid 1px; 447 border: #bbb solid 1px;
468 background: #FFF; 448 background: #FFF;
469 margin-top: 5px; 449 margin-top: 5px;
470 } 450 }
471 451
472 .aside #choice-illustration li .content .illustration-list .illstration-item{ 452 .aside #choice-illustration li .content .illustration-list .illstration-item{
473 height: 61px; 453 height: 65px;
474 overflow: hidden; 454 overflow: hidden;
475 float: left; 455 float: left;
476 margin-left: 10px; 456 margin-left: 5px;
477 margin-top: 10px;
478 background: #e2e2e2;
479 border: #d7d7d7 solid 1px;
480 padding: 2px;
481 } 457 }
482 458
483 .aside #choice-illustration li .content .illustration-list .illstration-item:hover { 459 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
484 outline: 2px solid #ed1d24; 460 outline: 2px solid #ed1d24;
485 } 461 }
486 462
487 .aside #choice-illustration li .content .illustration-list .illstration-item img { 463 .aside #choice-illustration li .content .illustration-list .illstration-item img {
488 width: 53px; 464 width: 62px;
489 cursor: pointer; 465 cursor: pointer;
490 } 466 }
491 467
492 .aside #choice-illustration li .content .color-patterns { 468 .aside #choice-illustration li .content .color-patterns {
493 width: 100%; 469 width: 100%;
494 border: #bbb solid 1px; 470 border: #bbb solid 1px;
495 background: #FFF; 471 background: #FFF;
496 margin-top: 5px; 472 margin-top: 5px;
497 } 473 }
498 474
499 .aside #choice-illustration li .content .color-patterns .color-pattern-item{ 475 .aside #choice-illustration li .content .color-patterns .color-pattern-item{
500 height: 20px; 476 height: 20px;
501 float: left; 477 float: left;
502 margin-left: 4px; 478 margin-left: 4px;
503 margin-top: 2px; 479 margin-top: 2px;
504 width: 20px; 480 width: 20px;
505 cursor: pointer; 481 cursor: pointer;
506 border: 1px solid #ddd; 482 border: 1px solid #ddd;
507 } 483 }
508 484
509 .aside #choice-illustration li .content .color-patterns .color-pattern-item:hover { 485 .aside #choice-illustration li .content .color-patterns .color-pattern-item:hover {
510 outline: 1px solid #ed1d24; 486 outline: 1px solid #ed1d24;
511 } 487 }
512 488
513 489
514 /*Design content*/ 490 /*Design content*/
515 .tshirt-design-container{ 491 .tshirt-design-container{
516 position: relative; 492 position: relative;
517 } 493 }
518 .tshirt-design-container .design-content{ 494 .tshirt-design-container .design-content{
519 padding: 10px 30px 10px 15px; 495 padding: 10px 30px 10px 15px;
520 } 496 }
521 .tshirt-design-container .design-content .content{ 497 .tshirt-design-container .design-content .content{
522 width: 100%; 498 width: 100%;
523 min-height: 650px; 499 min-height: 650px;
524 background-color: #f0efea; 500 background-color: #f0efea;
525 padding: 40px 40px; 501 padding: 40px 40px;
526 height: 100%; 502 height: 100%;
527 } 503 }
528 .tshirt-design-container .design-content .content .selection-design{ 504 .tshirt-design-container .design-content .content .selection-design{
529 border: 1px solid #ff0000; 505 border: 1px solid #ff0000;
530 width: 100%; 506 width: 100%;
531 height: 620px; 507 height: 620px;
532 } 508 }
533 .tshirt-design-container .agree-design{ 509 .tshirt-design-container .agree-design{
534 position: absolute; 510 position: absolute;
535 right: -16px; 511 right: -16px;
536 top: 40%; 512 top: 40%;
537 } 513 }
538 .tshirt-design-container .trash-design{ 514 .tshirt-design-container .trash-design{
539 position: absolute; 515 position: absolute;
540 right: 5px; 516 right: 5px;
541 bottom: 0; 517 bottom: 0;
542 } 518 }
543 519
544 520
545 /*FOOTER*/ 521 /*FOOTER*/
546 footer{ 522 footer{
547 background-color: #333333; 523 background-color: #333333;
548 } 524 }
549 footer ul.nav-footer{ 525 footer ul.nav-footer{
550 padding-left: 0; 526 padding-left: 0;
551 list-style: none; 527 list-style: none;
552 } 528 }
553 footer ul.nav-footer li{ 529 footer ul.nav-footer li{
554 float: left; 530 float: left;
555 padding: 3px 10px; 531 padding: 3px 10px;
556 border-right: 1px dotted #ffffff; 532 border-right: 1px dotted #ffffff;
557 533
558 } 534 }
559 footer ul.nav-footer li a{ 535 footer ul.nav-footer li a{
560 color: #ffffff; 536 color: #ffffff;
561 font-size: 11px; 537 font-size: 11px;
562 } 538 }
563 /* Customize container */ 539 /* Customize container */
564 @media (min-width: 768px) { 540 @media (min-width: 768px) {
565 .container { 541 .container {
566 /*max-width: 730px;*/ 542 /*max-width: 730px;*/
567 } 543 }
568 } 544 }
569 545
570 /* Responsive: Portrait tablets and up */ 546 /* Responsive: Portrait tablets and up */
571 @media screen and (min-width: 768px) { 547 @media screen and (min-width: 768px) {
572 /* Remove the padding we set earlier */ 548 /* Remove the padding we set earlier */
app/views/design_part/default.html
Diff comments   View file @ 1d6ddfa
File was created 1 <li>
2 <div class="hover"></div>
3 <div class="title">
4 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
5 文字を追加
6 </div>
7 <div class="content clearfix">
8 <div class="col-xs-2 text-center">
9 <i class="fa fa-jpy" aria-hidden="true"></i>
10 </div>
11 <div class="col-xs-10 des padding-left-0">
12 書体を選んでお好きな文字を入力できます
13 </div>
14 </div>
15 </li>
16 <li>
17 <div class="hover"></div>
18 <div class="title">
19 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
20 イラストやイメージを追加
21 </div>
22 <div class="content clearfix">
23 <div class="col-xs-2 text-center">
24 <i class="fa fa-btc" aria-hidden="true"></i>
25 </div>
26 <div class="col-xs-10 des padding-left-0">
27 自由にお使いいただけるデザイン画像をご用意しました
28 </div>
29 </div>
30 </li>
31 <li>
32 <div class="hover"></div>
33 <div class="title">
34 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
35 自分の画像・写真を追加
36 </div>
37 <div class="content clearfix">
38 <div class="col-xs-2 text-center">
39 <i class="fa fa-jpy" aria-hidden="true"></i>
40 </div>
41 <div class="col-xs-10 des padding-left-0">
42 ご自分で用意した画像をアップロードして使えます
43 </div>
44 </div>
45 </li>
46 <li>
47 <div class="hover"></div>
48 <div class="title">
49 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
50 おすすめデザインを使う
51 </div>
52 <div class="content clearfix">
53 <div class="col-xs-2 text-center">
54 <i class="fa fa-jpy" aria-hidden="true"></i>
55 </div>
56 <div class="col-xs-10 des padding-left-0">
57 おすすめデザインデータをご自由にカスタマイズしてお使いください
58 </div>
59 </div>
60 </li>
app/views/design_part/illustration.html
Diff comments   View file @ 1d6ddfa
File was created 1 <li>
2 <div class="title">
3 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
4 イラスト・イメージ選択
5 </div>
6 <div class="content clearfix">
7 <select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration)" data-placeholder="Choose category" style="width: 100%">
8 <option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option>
9 </select>
10 <div class="illustration-list">
11 <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list" ng-click="insertSvg(item)">
12 <img ng-src="{{item.path}}"/>
13 </div>
14 <div class="clearfix"></div>
15 </div>
16 </div>
17 </li>
18 <li>
19 <div class="title">
20 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
21 カラー変更
22 <div class="pull-right">元の色に戻す</div>
23 </div>
24 <div class="content clearfix">
25 <div class="color-patterns">
26 <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">
27 </div>
28 <div class="clearfix"></div>
29 </div>
30 </div>
31 </li>
32 <li>
33 <div class="title">
34 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
35 重ね順変更
36 </div>
37 <div class="content clearfix">
38
39 </div>
40 </li>
app/views/design_part/text.html
Diff comments   View file @ 1d6ddfa
1 <li> 1 <li>
2 <div class="title"> 2 <div class="title">
3 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 3 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
4 Text 4 Text
5 </div> 5 </div>
6 <div class="content clearfix"> 6 <div class="content clearfix">
7 <input type="text" class="form-control" ng-keyup="inputText(design_text)" ng-model="design_text"> 7 <input type="text" class="form-control" id="input-design-text" ng-focus="focusInputText()" ng-keyup="inputText(design_text)" ng-model="design_text">
8 </div> 8 </div>
9 </li> 9 </li>
10
app/views/tshirt-design.html
Diff comments   View file @ 1d6ddfa
1 <!-- Modal --> 1 <!-- Modal -->
2 <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl"> 2 <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl">
3 3
4 <div class="modal-dialog" role="document"> 4 <div class="modal-dialog" role="document">
5 <div class="modal-content"> 5 <div class="modal-content">
6 <div class="modal-header"> 6 <div class="modal-header">
7 <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button> 7 <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button>
8 <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button> 8 <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button>
9 </div> 9 </div>
10 <div class="modal-body"> 10 <div class="modal-body">
11 <header class="clearfix"> 11 <header class="clearfix">
12 <ul class="nav pull-left"> 12 <ul class="nav pull-left">
13 <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showIllustration('text')"> 13 <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showIllustration('text')">
14 <i class="fa fa-jpy" aria-hidden="true"></i> 文字 14 <i class="fa fa-jpy" aria-hidden="true"></i> 文字
15 </li> 15 </li>
16 <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showIllustration('illustration')"> 16 <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showIllustration('illustration')">
17 <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ 17 <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ
18 </li> 18 </li>
19 <li> 19 <li>
20 <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真 20 <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真
21 </li> 21 </li>
22 <li> 22 <li>
23 <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去 23 <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去
24 </li> 24 </li>
25 </ul> 25 </ul>
26 <div class="action pull-right"> 26 <div class="action pull-right">
27 <button class="white"> 27 <button class="white">
28 アルバムを開く 28 アルバムを開く
29 </button> 29 </button>
30 <button class="white"> 30 <button class="white">
31 アルバムに入れる 31 アルバムに入れる
32 </button> 32 </button>
33 </div> 33 </div>
34 </header> 34 </header>
35 <section class="tshirt-design-container clearfix"> 35 <section class="tshirt-design-container clearfix">
36 <div class="aside col-xs-4"> 36 <div class="aside col-xs-4">
37 <ul id="choice-design-option" ng-show="isShowLeftPanel=='default'"> 37 <!-- Default-->
38 <li> 38 <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="'views/design_part/default.html'">
39 <div class="hover"></div>
40 <div class="title">
41 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
42 文字を追加
43 </div>
44 <div class="content clearfix">
45 <div class="col-xs-2 text-center">
46 <i class="fa fa-jpy" aria-hidden="true"></i>
47 </div>
48 <div class="col-xs-10 des padding-left-0">
49 書体を選んでお好きな文字を入力できます
50 </div>
51 </div>
52 </li>
53 <li>
54 <div class="hover"></div>
55 <div class="title">
56 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
57 イラストやイメージを追加
58 </div>
59 <div class="content clearfix">
60 <div class="col-xs-2 text-center">
61 <i class="fa fa-btc" aria-hidden="true"></i>
62 </div>
63 <div class="col-xs-10 des padding-left-0">
64 自由にお使いいただけるデザイン画像をご用意しました
65 </div>
66 </div>
67 </li>
68 <li>
69 <div class="hover"></div>
70 <div class="title">
71 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
72 自分の画像・写真を追加
73 </div>
74 <div class="content clearfix">
75 <div class="col-xs-2 text-center">
76 <i class="fa fa-jpy" aria-hidden="true"></i>
77 </div>
78 <div class="col-xs-10 des padding-left-0">
79 ご自分で用意した画像をアップロードして使えます
80 </div>
81 </div>
82 </li>
83 <li>
84 <div class="hover"></div>
85 <div class="title">