ngohungcuong.windy@gmail.com / T-Shats Frontend

Download as
Browse Code »

Commit 682a3b12dbaf4ba5078d2f6466456061b11177ab

Authored by TRUONG
1 parent 0dc7327604
Exists in master and in 1 other branch develop

fix illustration style

Showing 17 changed files with 526 additions and 24 deletions Inline Diff

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 = '16-11_01'; 49 var VERSION = new Date().getTime();
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 @ 682a3b1
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 $rootScope.API_URL = 'http://domain.com';
4 $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION; 5 $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION;
5 $scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION; 6 $scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION;
6 $scope.designPartImage = 'views/design_part/image.html?ver='+VERSION; 7 $scope.designPartImage = 'views/design_part/image.html?ver='+VERSION;
7 $scope.designPartText = 'views/design_part/text.html?ver='+VERSION; 8 $scope.designPartText = 'views/design_part/text.html?ver='+VERSION;
8 $scope.designPartDefault = 'views/design_part/default.html?ver='+VERSION; 9 $scope.designPartDefault = 'views/design_part/default.html?ver='+VERSION;
9 10
10 //Action T-Shirt choice color and Back or Front 11 //Action T-Shirt choice color and Back or Front
11 $scope.tShirtColor = $t_shirt.getTShirtColor(0); 12 $scope.tShirtColor = $t_shirt.getTShirtColor(0);
12 //Set color name default 13 //Set color name default
13 var tShirtColorFirstKey = 0; 14 var tShirtColorFirstKey = 0;
14 $scope.tShirtChoiceBackFrontKey = 'front'; 15 $scope.tShirtChoiceBackFrontKey = 'front';
15 $scope.tShirtColorKey = tShirtColorFirstKey; 16 $scope.tShirtColorKey = tShirtColorFirstKey;
16 $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code; 17 $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code;
17 $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name; 18 $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name;
18 $scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front; 19 $scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front;
19 $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back; 20 $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back;
20 $scope.tShirtImg = $scope.tShirtImgFront; 21 $scope.tShirtImg = $scope.tShirtImgFront;
21 22
22 $scope.choiceTShirtColor = function(key) { 23 $scope.choiceTShirtColor = function(key) {
23 $scope.tShirtColorKey = key; 24 $scope.tShirtColorKey = key;
24 $rootScope.tShirtColorCode = $scope.tShirtColor[key].code; 25 $rootScope.tShirtColorCode = $scope.tShirtColor[key].code;
25 $scope.tShirtColorName = $scope.tShirtColor[key].name; 26 $scope.tShirtColorName = $scope.tShirtColor[key].name;
26 $scope.tShirtImgFront = $scope.tShirtColor[key].img.front; 27 $scope.tShirtImgFront = $scope.tShirtColor[key].img.front;
27 $scope.tShirtImgBack = $scope.tShirtColor[key].img.back; 28 $scope.tShirtImgBack = $scope.tShirtColor[key].img.back;
28 if($scope.tShirtChoiceBackFrontKey == 'front') { 29 if($scope.tShirtChoiceBackFrontKey == 'front') {
29 $scope.tShirtImg = $scope.tShirtImgFront; 30 $scope.tShirtImg = $scope.tShirtImgFront;
30 } else { 31 } else {
31 $scope.tShirtImg = $scope.tShirtImgBack; 32 $scope.tShirtImg = $scope.tShirtImgBack;
32 } 33 }
33 }; 34 };
34 $scope.choiceTShirtBackFront = function(choice) { 35 $scope.choiceTShirtBackFront = function(choice) {
35 if(choice == 'front') { 36 if(choice == 'front') {
36 $scope.tShirtImg = $scope.tShirtImgFront; 37 $scope.tShirtImg = $scope.tShirtImgFront;
37 } else { 38 } else {
38 $scope.tShirtImg = $scope.tShirtImgBack; 39 $scope.tShirtImg = $scope.tShirtImgBack;
39 } 40 }
40 $scope.tShirtChoiceBackFrontKey = choice; 41 $scope.tShirtChoiceBackFrontKey = choice;
41 }; 42 };
42 43
43 44
44 $scope.showDesignTab = function(tab){ 45 $scope.showDesignTab = function(tab){
45 $rootScope.isShowLeftPanel = tab; 46 $rootScope.isShowLeftPanel = tab;
46 switch (tab) { 47 switch (tab) {
47 case 'illustration': { 48 case 'illustration': {
48 $scope.IllustrationList = $illustration.getAll(); 49 $scope.IllustrationList = $illustration.getAll();
49 $scope.illustrationSelectConfig = { 50 $scope.illustrationSelectConfig = {
50 allowClear:true 51 allowClear:true
51 }; 52 };
52 break; 53 break;
53 } 54 }
54 case 'text': { 55 case 'text': {
55 break; 56 break;
56 } 57 }
57 } 58 }
58 }; 59 };
59 60
60 //safeApply 61 //safeApply
61 $rootScope.safeApply = function(fn) { 62 $rootScope.safeApply = function(fn) {
62 var phase = this.$root.$$phase; 63 var phase = this.$root.$$phase;
63 if(phase == '$apply' || phase == '$digest') { 64 if(phase == '$apply' || phase == '$digest') {
64 if(fn && (typeof(fn) === 'function')) { 65 if(fn && (typeof(fn) === 'function')) {
65 fn(); 66 fn();
66 } 67 }
67 } else { 68 } else {
68 this.$apply(fn); 69 this.$apply(fn);
69 } 70 }
70 }; 71 };
71 72
72 $scope.modalTShirtDesign = function() { 73 $scope.modalTShirtDesign = function() {
73 $('#tshirt-design').modal( 74 $('#tshirt-design').modal(
74 { 75 {
75 backdrop: 'static', 76 backdrop: 'static',
76 keyboard: false 77 keyboard: false
77 } 78 }
78 ); 79 );
79 $scope.showDesignTab('default'); 80 $scope.showDesignTab('default');
80 }; 81 };
81 $scope.modalClose = function(){ 82 $scope.modalClose = function(){
82 $('#tshirt-design').modal('hide'); 83 $('#tshirt-design').modal('hide');
83 }; 84 };
84 85
85 86
86 87
87 88
88 }); 89 });
89 }); 90 });
90 91
app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 682a3b1
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 var canvas = new fabric.Canvas('main-design-container'); 5 var canvas = new fabric.Canvas('main-design-container');
6 fabric.Object.prototype.transparentCorners = false; 6 fabric.Object.prototype.transparentCorners = false;
7 7
8 canvas.on('after:render', function() { 8 canvas.on('after:render', function() {
9 }); 9 });
10 canvas.on({ 10 canvas.on({
11 'object:added': onIllustrationAdded, 11 'object:added': onIllustrationAdded,
12 'object:moving': onIllustrationChange, 12 'object:moving': onIllustrationChange,
13 'object:scaling': onIllustrationChange, 13 'object:scaling': onIllustrationChange,
14 'object:rotating': onIllustrationChange, 14 'object:rotating': onIllustrationChange,
15 'object:selected': onIllustrationSelected, 15 'object:selected': onIllustrationSelected,
16 'object:modified': onIllustrationModifield, 16 'object:modified': onIllustrationModifield,
17 'selected:deselected' : onIllustrationOut, 17 'selected:deselected' : onIllustrationOut,
18 //'selected:out' : onIllustrationOut, 18 //'selected:out' : onIllustrationOut,
19 //'mouse:up' : onIllustrationOut, 19 //'mouse:up' : onIllustrationOut,
20 }); 20 });
21 21
22 var currentObj; 22 var currentObj;
23 var listObj = []; 23 var listObj = [];
24 var stateObj = []; 24 var stateObj = [];
25 var indexCurr = 0; 25 var indexCurr = 0;
26 var indexCurr2 = 0; 26 var indexCurr2 = 0;
27 var actionObj = false; 27 var actionObj = false;
28 var refreshObj = true; 28 var refreshObj = true;
29 29
30 function onIllustrationAdded(options){ 30 function onIllustrationAdded(options){
31 var object = options.target; 31 var object = options.target;
32 console.log('object:added'); 32 console.log('object:added');
33 33
34 if (actionObj === true) { 34 if (actionObj === true) {
35 stateObj = [stateObj[indexCurr2]]; 35 stateObj = [stateObj[indexCurr2]];
36 listObj = [listObj[indexCurr2]]; 36 listObj = [listObj[indexCurr2]];
37 37
38 actionObj = false; 38 actionObj = false;
39 console.log(stateObj); 39 console.log(stateObj);
40 indexCurr = 1; 40 indexCurr = 1;
41 } 41 }
42 object.saveState(); 42 object.saveState();
43 43
44 console.log(object.originalState); 44 console.log(object.originalState);
45 stateObj[indexCurr] = JSON.stringify(object.originalState); 45 stateObj[indexCurr] = JSON.stringify(object.originalState);
46 listObj[indexCurr] = object; 46 listObj[indexCurr] = object;
47 indexCurr++; 47 indexCurr++;
48 indexCurr2 = indexCurr - 1; 48 indexCurr2 = indexCurr - 1;
49 refreshObj = true; 49 refreshObj = true;
50 } 50 }
51 51
52 function onIllustrationModifield(options){ 52 function onIllustrationModifield(options){
53 var objOffset = canvas.getActiveObject().getBoundingRect(); 53 var objOffset = canvas.getActiveObject().getBoundingRect();
54 var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50; 54 var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50;
55 //console.log(objOffset,canvas.height,canvas.width); 55 //console.log(objOffset,canvas.height,canvas.width);
56 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){
57 if (confirm('削除してもよろしいですか')){ 57 if (confirm('削除してもよろしいですか')){
58 canvas.getActiveObject().remove(); 58 canvas.getActiveObject().remove();
59 }else{ 59 }else{
60 undoCanvas(); 60 undoCanvas();
61 return; 61 return;
62 } 62 }
63 } 63 }
64 64
65 var object = options.target; 65 var object = options.target;
66 console.log('object:modified'); 66 console.log('object:modified');
67 if (actionObj === true) { 67 if (actionObj === true) {
68 stateObj = [stateObj[indexCurr2]]; 68 stateObj = [stateObj[indexCurr2]];
69 listObj = [listObj[indexCurr2]]; 69 listObj = [listObj[indexCurr2]];
70 70
71 actionObj = false; 71 actionObj = false;
72 console.log(stateObj); 72 console.log(stateObj);
73 indexCurr = 1; 73 indexCurr = 1;
74 } 74 }
75 75
76 object.saveState(); 76 object.saveState();
77 77
78 stateObj[indexCurr] = JSON.stringify(object.originalState); 78 stateObj[indexCurr] = JSON.stringify(object.originalState);
79 listObj[indexCurr] = object; 79 listObj[indexCurr] = object;
80 indexCurr++; 80 indexCurr++;
81 indexCurr2 = indexCurr - 1; 81 indexCurr2 = indexCurr - 1;
82 console.log(stateObj); 82 console.log(stateObj);
83 refreshObj = true; 83 refreshObj = true;
84 } 84 }
85 85
86 function onIllustrationChange(options) { 86 function onIllustrationChange(options) {
87 // options.target.setCoords(); 87 // options.target.setCoords();
88 // canvas.forEachObject(function(obj) { 88 // canvas.forEachObject(function(obj) {
89 // if (obj === options.target) return; 89 // if (obj === options.target) return;
90 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); 90 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
91 // }); 91 // });
92 92
93 } 93 }
94 94
95 function onIllustrationOut() { 95 function onIllustrationOut() {
96 console.log('out object'); 96 console.log('out object');
97 } 97 }
98 98
99 function undoCanvas() { 99 function undoCanvas() {
100 if (indexCurr <= 0) { 100 if (indexCurr <= 0) {
101 indexCurr = 0; 101 indexCurr = 0;
102 return; 102 return;
103 } 103 }
104 104
105 if (refreshObj === true) { 105 if (refreshObj === true) {
106 indexCurr--; 106 indexCurr--;
107 refreshObj = false; 107 refreshObj = false;
108 } 108 }
109 109
110 console.log('undo'); 110 console.log('undo');
111 111
112 indexCurr2 = indexCurr - 1; 112 indexCurr2 = indexCurr - 1;
113 currentObj = listObj[indexCurr2]; 113 currentObj = listObj[indexCurr2];
114 if (currentObj){ 114 if (currentObj){
115 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 115 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
116 } 116 }
117 117
118 indexCurr--; 118 indexCurr--;
119 currentObj.setCoords(); 119 currentObj.setCoords();
120 canvas.renderAll(); 120 canvas.renderAll();
121 actionObj = true; 121 actionObj = true;
122 } 122 }
123 123
124 function redoCanvas() { 124 function redoCanvas() {
125 actionObj = true; 125 actionObj = true;
126 if (indexCurr >= stateObj.length - 1) { 126 if (indexCurr >= stateObj.length - 1) {
127 return; 127 return;
128 } 128 }
129 129
130 console.log('redo'); 130 console.log('redo');
131 131
132 indexCurr2 = indexCurr + 1; 132 indexCurr2 = indexCurr + 1;
133 currentObj = listObj[indexCurr2]; 133 currentObj = listObj[indexCurr2];
134 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 134 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
135 135
136 indexCurr++; 136 indexCurr++;
137 currentObj.setCoords(); 137 currentObj.setCoords();
138 canvas.renderAll(); 138 canvas.renderAll();
139 } 139 }
140 140
141 $scope.currentObject = null; 141 $scope.currentObject = null;
142 function onIllustrationSelected(options) { 142 function onIllustrationSelected(options) {
143 var object = options.target; 143 var object = options.target;
144 $scope.typeObject = object.type; 144 $scope.typeObject = object.type;
145 switch ($scope.typeObject) { 145 switch ($scope.typeObject) {
146 case 'i-text' : 146 case 'i-text' :
147 $('#input-design-text').focus(); 147 $('#input-design-text').focus();
148 $rootScope.isShowLeftPanel = 'text'; 148 $rootScope.isShowLeftPanel = 'text';
149 break; 149 break;
150 150
151 case 'path-group' : 151 case 'path-group' :
152 $rootScope.isShowLeftPanel = 'illustration'; 152 $rootScope.isShowLeftPanel = 'illustration';
153 break; 153 break;
154 154
155 default : 155 default :
156 $rootScope.isShowLeftPanel = 'default'; 156 $rootScope.isShowLeftPanel = 'default';
157 break; 157 break;
158 } 158 }
159 $rootScope.safeApply(); 159 $rootScope.safeApply();
160 } 160 }
161 161
162 // Illustration process 162 // Illustration process
163 $scope.changeIllustrationCategory = function(currentIllustration){ 163 $scope.changeIllustrationCategory = function(currentIllustration){
164 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 164 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
165 //console.log($scope.currentIllustrationCate); 165 //console.log($scope.currentIllustrationCate);
166 }; 166 };
167 167
168 $scope.insertSvg = function(item){ 168 $scope.insertSvg = function(item){
169 fabric.loadSVGFromURL(item.path, function(objects, options) { 169 fabric.loadSVGFromURL(item.path, function(objects, options) {
170 var shape = fabric.util.groupSVGElements(objects, options); 170 var shape = fabric.util.groupSVGElements(objects, options);
171 // shape.setFill('green'); 171 // shape.setFill('green');
172 canvas.add(shape.scale(0.6)); 172 canvas.add(shape.scale(0.6));
173 shape.set({ left: 150, top: 200 }).setCoords(); 173 shape.set({ left: 150, top: 200 }).setCoords();
174 canvas.renderAll(); 174 canvas.renderAll();
175 canvas.setActiveObject(shape); 175 canvas.setActiveObject(shape);
176 }); 176 });
177 }; 177 };
178 178
179 // color pattern 179 // color pattern
180 $scope.changeColorPattern = function(color){
181 if (canvas.getActiveObject()){
182 canvas.getActiveObject().set("fill", color);
183 canvas.renderAll();
184 }
185 };
186 $scope.listColorPatterns = [ 180 $scope.listColorPatterns = [
187 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 181 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
188 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 182 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
189 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 183 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
190 '#333333' 184 '#333333'
191 ]; 185 ];
186
187 $scope.changeColorPattern = function(color){
188 if (canvas.getActiveObject()){
189 canvas.getActiveObject().set("fill", color);
190 canvas.renderAll();
191 }
192 };
193
194 // layer process
195 $scope.layerProcess = function(mode){
196 var activeObject = canvas.getActiveObject()
197 if (activeObject){
198 switch (mode) {
199 case 1:
200 activeObject.bringForward();
201 break;
202 case 2:
203 activeObject.sendBackwards();
204 break;
205 case 3:
206 activeObject.bringToFront();
207 break;
208 case 4:
209 activeObject.sendToBack();
210 break;
211 }
212 canvas.renderAll();
213 }
214 }
215
192 $scope.listFontFamily = [ 216 $scope.listFontFamily = [
193 { 217 {
194 name : 'GN-Aki-iro_Sesami_Cookies', 218 name : 'GN-Aki-iro_Sesami_Cookies',
195 slug : 'gn_aki_iro_sesami_cookies', 219 slug : 'gn_aki_iro_sesami_cookies',
196 }, 220 },
197 { 221 {
198 name : 'Tahoma', 222 name : 'Tahoma',
199 slug : 'tahoma', 223 slug : 'tahoma',
200 }, 224 },
201 { 225 {
202 name : 'GN-Fuyu-iro_Script_Bold', 226 name : 'GN-Fuyu-iro_Script_Bold',
203 slug : 'gn_fuyu_iro_script_bold' 227 slug : 'gn_fuyu_iro_script_bold'
204 }, 228 },
205 { 229 {
206 name : 'GN Killgothic U Kanana', 230 name : 'GN Killgothic U Kanana',
207 slug : 'gn_killgothic_u_kanana' 231 slug : 'gn_killgothic_u_kanana'
208 232
209 } 233 }
210 ]; 234 ];
211 235
212 $scope.focusInputText = function() { 236 $scope.focusInputText = function() {
213 if($scope.typeObject != 'i-text') 237 if($scope.typeObject != 'i-text')
214 $scope.iText = new fabric.IText('', { 238 $scope.iText = new fabric.IText('', {
215 left: 150, 239 left: 150,
216 top: 200, 240 top: 200,
217 fontFamily: 'Arial', 241 fontFamily: 'Arial',
218 fontWeight: 'normal', 242 fontWeight: 'normal',
219 fontSize: 28, 243 fontSize: 28,
220 fill: 'black' 244 fill: 'black'
221 }); 245 });
222 }; 246 };
223 247
224 //Design text 248 //Design text
225 $scope.inputText = function(e) { 249 $scope.inputText = function(e) {
226 var iText = $scope.iText; 250 var iText = $scope.iText;
227 if(e != '') { 251 if(e != '') {
228 iText.text = e; 252 iText.text = e;
229 iText.set().setCoords(); 253 iText.set().setCoords();
230 canvas.add(iText); 254 canvas.add(iText);
231 canvas.renderAll(); 255 canvas.renderAll();
232 canvas.setActiveObject(iText); 256 canvas.setActiveObject(iText);
233 } 257 }
234 }; 258 };
235 $scope.setFontFamily = function(font) { 259 $scope.setFontFamily = function(font) {
236 if(canvas.getActiveObject()) { 260 if(canvas.getActiveObject()) {
237 var currentObject = canvas.getActiveObject(); 261 var currentObject = canvas.getActiveObject();
238 if(currentObject.type == 'i-text') { 262 if(currentObject.type == 'i-text') {
239 console.log(font); 263 console.log(font);
240 264
241 currentObject.set('fontFamily', font); 265 currentObject.set('fontFamily', font);
242 currentObject.selectWord(); 266 currentObject.selectWord();
243 267
244 canvas.renderAll(); 268 canvas.renderAll();
245 // currentObject.getActiveObject(); 269 // currentObject.getActiveObject();
246 canvas.setActiveObject(currentObject); 270 canvas.setActiveObject(currentObject);
247 } 271 }
248 272
app/scripts/services/illustration.js
Diff comments   View file @ 682a3b1
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 'use strict'; 2 'use strict';
3 3
4 app.factory('$illustration', function ($http, $rootScope) { 4 app.factory('$illustration', function ($http, $rootScope) {
5 // data format: {'id_cate1': {name: '', list: [item1,item2]}, ...} 5 // data format: {'id_cate1': {name: '', list: [item1,item2]}, ...}
6 // item format: {name: '', path: ''} 6 // item format: {name: '', path: ''}
7 var DATA = { 7 var DATA = {
8 'cate1': { 8 'cate1': {
9 name: 'category #1', 9 name: 'category #1',
10 list: [ 10 list: [
11 { 11 {
12 name: 'item 1', 12 name: 'item 1',
13 path: 'images/illustrations/item1.svg' 13 path: 'images/illustrations/item1.svg'
14 }, 14 },
15 { 15 {
16 name: 'item 2', 16 name: 'item 2',
17 path: 'images/illustrations/item2.svg' 17 path: 'images/illustrations/item2.svg'
18 }, 18 },
19 { 19 {
20 name: 'item 3', 20 name: 'item 3',
21 path: 'images/illustrations/item3.svg' 21 path: 'images/illustrations/item3.svg'
22 }, 22 },
23 { 23 {
24 name: 'item 4', 24 name: 'item 4',
25 path: 'images/illustrations/item4.svg' 25 path: 'images/illustrations/item4.svg'
26 }, 26 },
27 { 27 {
28 name: 'item 1', 28 name: 'item 1',
29 path: 'images/illustrations/item3.svg' 29 path: 'images/illustrations/item3.svg'
30 }, 30 },
31 { 31 {
32 name: 'item 2', 32 name: 'item 2',
33 path: 'images/illustrations/item1.svg' 33 path: 'images/illustrations/item1.svg'
34 }, 34 },
35 { 35 {
36 name: 'item 3', 36 name: 'item 3',
37 path: 'images/illustrations/item4.svg' 37 path: 'images/illustrations/item4.svg'
38 }, 38 },
39 { 39 {
40 name: 'item 4', 40 name: 'item 4',
41 path: 'images/illustrations/item2.svg' 41 path: 'images/illustrations/item2.svg'
42 },
43 {
44 name: 'item 1',
45 path: 'images/illustrations/item1.svg'
46 },
47 {
48 name: 'item 2',
49 path: 'images/illustrations/item2.svg'
50 },
51 {
52 name: 'item 3',
53 path: 'images/illustrations/item3.svg'
54 },
55 {
56 name: 'item 4',
57 path: 'images/illustrations/item4.svg'
58 },
59 {
60 name: 'item 1',
61 path: 'images/illustrations/item3.svg'
62 },
63 {
64 name: 'item 2',
65 path: 'images/illustrations/item1.svg'
66 },
67 {
68 name: 'item 3',
69 path: 'images/illustrations/item4.svg'
70 },
71 {
72 name: 'item 4',
73 path: 'images/illustrations/item2.svg'
74 },
75 {
76 name: 'item 1',
77 path: 'images/illustrations/item1.svg'
78 },
79 {
80 name: 'item 2',
81 path: 'images/illustrations/item2.svg'
82 },
83 {
84 name: 'item 3',
85 path: 'images/illustrations/item3.svg'
86 },
87 {
88 name: 'item 4',
89 path: 'images/illustrations/item4.svg'
90 },
91 {
92 name: 'item 1',
93 path: 'images/illustrations/item3.svg'
94 },
95 {
96 name: 'item 2',
97 path: 'images/illustrations/item1.svg'
98 },
99 {
100 name: 'item 3',
101 path: 'images/illustrations/item4.svg'
102 },
103 {
104 name: 'item 4',
105 path: 'images/illustrations/item2.svg'
42 } 106 }
43 ] 107 ]
44 }, 108 },
45 'cate2': { 109 'cate2': {
46 name: 'category #2', 110 name: 'category #2',
47 list: [ 111 list: [
48 { 112 {
49 name: 'item 1', 113 name: 'item 1',
50 path: 'images/illustrations/item3.svg' 114 path: 'images/illustrations/item3.svg'
51 }, 115 },
52 { 116 {
53 name: 'item 2', 117 name: 'item 2',
54 path: 'images/illustrations/item1.svg' 118 path: 'images/illustrations/item1.svg'
55 }, 119 },
56 { 120 {
57 name: 'item 3', 121 name: 'item 3',
58 path: 'images/illustrations/item4.svg' 122 path: 'images/illustrations/item4.svg'
59 }, 123 },
60 { 124 {
61 name: 'item 4', 125 name: 'item 4',
62 path: 'images/illustrations/item2.svg' 126 path: 'images/illustrations/item2.svg'
63 }, 127 },
64 { 128 {
65 name: 'item 1', 129 name: 'item 1',
66 path: 'images/illustrations/item1.svg' 130 path: 'images/illustrations/item1.svg'
67 }, 131 },
68 { 132 {
69 name: 'item 2', 133 name: 'item 2',
70 path: 'images/illustrations/item2.svg' 134 path: 'images/illustrations/item2.svg'
71 }, 135 },
72 { 136 {
73 name: 'item 3', 137 name: 'item 3',
74 path: 'images/illustrations/item3.svg' 138 path: 'images/illustrations/item3.svg'
75 }, 139 },
76 { 140 {
77 name: 'item 4', 141 name: 'item 4',
78 path: 'images/illustrations/item4.svg' 142 path: 'images/illustrations/item4.svg'
79 } 143 }
80 ] 144 ]
81 } 145 }
82 }; 146 };
83 147
84 return { 148 return {
85 loadFromRemote: function (params,successHandle,errorHandle) { 149 loadFromRemote: function (params,successHandle,errorHandle) {
86 // return format: { status:0|1 , data:{} } 150 // return format: { status:0|1 , data:{} }
87 var httpObj = $http({ 151 var httpObj = $http({
88 url: $rootScope+'/apiv1/illustration', 152 url: $rootScope.API_URL+'/apiv1/illustration',
89 method: 'GET', 153 method: 'GET',
90 params: params || [] 154 params: params || []
91 }); 155 });
92 if (typeof successHandle == 'undefined'){ 156 if (typeof successHandle == 'undefined'){
93 successHandle = function(response){ 157 successHandle = function(response){
94 if (response.status==1){ 158 if (response.status==1){
95 DATA = response.data; 159 DATA = response.data;
96 } 160 }
97 } 161 }
98 } 162 }
99 httpObj.success(successHandle); 163 httpObj.success(successHandle);
100 164
101 if (typeof errorHandle != 'undefined'){ 165 if (typeof errorHandle != 'undefined'){
102 httpObj.error(errorHandle); 166 httpObj.error(errorHandle);
103 } 167 }
104 }, 168 },
105 getAll: function(){ 169 getAll: function(){
106 return DATA; 170 return DATA;
107 }, 171 },
108 getList: function(category){ 172 getList: function(category){
109 if (typeof DATA[category] == 'undefined'){ 173 if (typeof DATA[category] == 'undefined'){
110 return []; 174 return [];
111 } 175 }
112 return DATA[category]; 176 return DATA[category];
113 } 177 }
114 }; 178 };
115 }); 179 });
116 }); 180 });
117 181
1 /* Space out content a bit */ 1 /* Space out content a bit */
2 @import "../fonts/font.css"; 2 @import "../fonts/font.css";
3 @import "../fonts/font_canvas/font-canvas.css"; 3 @import "../fonts/font_canvas/font-canvas.css";
4 body { 4 body {
5 font-family: 'Hiragino Kaku Gothic Pro', sans-serif; 5 font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
6 /*font-family: 'gn_aki_iro_sesami_cookies';*/ 6 /*font-family: 'gn_aki_iro_sesami_cookies';*/
7 } 7 }
8 8
9 .padding-right-0{ 9 .padding-right-0{
10 padding-right: 0!important; 10 padding-right: 0!important;
11 } 11 }
12 .padding-left-0{ 12 .padding-left-0{
13 padding-left: 0!important; 13 padding-left: 0!important;
14 } 14 }
15 button.red{ 15 button.red{
16 color: #ffffff; 16 color: #ffffff;
17 background-color: #ff0000; 17 background-color: #ff0000;
18 border: 1px solid #ff0000; 18 border: 1px solid #ff0000;
19 19
20 } 20 }
21 button.white{ 21 button.white{
22 border: 1px solid #ff8080; 22 border: 1px solid #ff8080;
23 color: #ff8080; 23 color: #ff8080;
24 background-color: #ffffff; 24 background-color: #ffffff;
25 } 25 }
26 button.brown{ 26 button.brown{
27 background-color: #666666; 27 background-color: #666666;
28 border: 1px solid #666666; 28 border: 1px solid #666666;
29 color: #ffffff; 29 color: #ffffff;
30 border-radius: 5px; 30 border-radius: 5px;
31 } 31 }
32 button.black{ 32 button.black{
33 border: 1px solid #c9c9c9; 33 border: 1px solid #c9c9c9;
34 background-color: #343434; 34 background-color: #343434;
35 color: #ffffff; 35 color: #ffffff;
36 padding: 1px 6px; 36 padding: 1px 6px;
37 } 37 }
38 #tshirt-container{ 38 #tshirt-container{
39 border-left: 1px solid #dcdcdc; 39 border-left: 1px solid #dcdcdc;
40 border-right: 1px solid #dcdcdc; 40 border-right: 1px solid #dcdcdc;
41 } 41 }
42 /*HEADER*/ 42 /*HEADER*/
43 header{ 43 header{
44 border-bottom: 1px solid #dcdcdc; 44 border-bottom: 1px solid #dcdcdc;
45 } 45 }
46 header .logo{ 46 header .logo{
47 color: #ed1d24; 47 color: #ed1d24;
48 font-size: 30px; 48 font-size: 30px;
49 text-transform: uppercase; 49 text-transform: uppercase;
50 font-weight: bold; 50 font-weight: bold;
51 } 51 }
52 header .logo img{ 52 header .logo img{
53 width: 60px; 53 width: 60px;
54 } 54 }
55 /*NAVIGATION*/ 55 /*NAVIGATION*/
56 nav{ 56 nav{
57 border-bottom: 1px solid #dcdcdc; 57 border-bottom: 1px solid #dcdcdc;
58 padding: 10px 0; 58 padding: 10px 0;
59 } 59 }
60 nav h2{ 60 nav h2{
61 font-size: 27px; 61 font-size: 27px;
62 margin: 0 0; 62 margin: 0 0;
63 } 63 }
64 nav ul{ 64 nav ul{
65 list-style: none; 65 list-style: none;
66 padding-left: 0; 66 padding-left: 0;
67 margin-bottom: 0; 67 margin-bottom: 0;
68 68
69 } 69 }
70 nav ul li{ 70 nav ul li{
71 margin-left: 2px; 71 margin-left: 2px;
72 float: left; 72 float: left;
73 padding: 6px 12px; 73 padding: 6px 12px;
74 background-color: #999999; 74 background-color: #999999;
75 position: relative; 75 position: relative;
76 } 76 }
77 nav ul li i.fa{ 77 nav ul li i.fa{
78 position: absolute; 78 position: absolute;
79 color: #ffffff; 79 color: #ffffff;
80 font-size: 18px; 80 font-size: 18px;
81 right: -4px; 81 right: -4px;
82 top: 50%; 82 top: 50%;
83 transform: translateX(-50%) translateY(-50%); 83 transform: translateX(-50%) translateY(-50%);
84 -webkit-transform: translateX(-50%) translateY(-50%); 84 -webkit-transform: translateX(-50%) translateY(-50%);
85 } 85 }
86 nav ul li a{ 86 nav ul li a{
87 color: #ffffff; 87 color: #ffffff;
88 } 88 }
89 nav ul li:hover a{ 89 nav ul li:hover a{
90 text-decoration: none; 90 text-decoration: none;
91 color: #ffffff; 91 color: #ffffff;
92 } 92 }
93 nav ul li.action{ 93 nav ul li.action{
94 color: #ffffff; 94 color: #ffffff;
95 background-color: #ed1d24; 95 background-color: #ed1d24;
96 } 96 }
97 /*ASIDE*/ 97 /*ASIDE*/
98 aside{ 98 aside{
99 margin: 10px 0; 99 margin: 10px 0;
100 } 100 }
101 101
102 aside .break-down{ 102 aside .break-down{
103 padding: 0 0; 103 padding: 0 0;
104 } 104 }
105 aside .break-down i.fa{ 105 aside .break-down i.fa{
106 font-size: 35px; 106 font-size: 35px;
107 color: #ff0000; 107 color: #ff0000;
108 } 108 }
109 aside .break-line{ 109 aside .break-line{
110 height: 10px; 110 height: 10px;
111 } 111 }
112 aside .break-line hr{ 112 aside .break-line hr{
113 border-top: 1px dotted #cccccc; 113 border-top: 1px dotted #cccccc;
114 } 114 }
115 aside .step{ 115 aside .step{
116 margin: 0 0; 116 margin: 0 0;
117 } 117 }
118 aside .step .title{ 118 aside .step .title{
119 font-size: 15px; 119 font-size: 15px;
120 line-height: 16px; 120 line-height: 16px;
121 font-weight: bold; 121 font-weight: bold;
122 margin-bottom: 3px; 122 margin-bottom: 3px;
123 } 123 }
124 aside .step .title-notice{ 124 aside .step .title-notice{
125 font-size: 13px; 125 font-size: 13px;
126 line-height: 16px; 126 line-height: 16px;
127 margin-bottom: 3px; 127 margin-bottom: 3px;
128 } 128 }
129 aside .step .title-notice .require{ 129 aside .step .title-notice .require{
130 font-size: 10px; 130 font-size: 10px;
131 } 131 }
132 aside .step .step-box{ 132 aside .step .step-box{
133 border: 2px solid #dcdcdc; 133 border: 2px solid #dcdcdc;
134 font-size: 12px; 134 font-size: 12px;
135 135
136 } 136 }
137 /*Step 1*/ 137 /*Step 1*/
138 aside .step .step-box .tshirt-design{ 138 aside .step .step-box .tshirt-design{
139 border: 1px solid #cccccc; 139 border: 1px solid #cccccc;
140 background-color: #f5f5f5; 140 background-color: #f5f5f5;
141 margin: 10px 10px; 141 margin: 10px 10px;
142 } 142 }
143 aside .step .step-box .tshirt-design:hover{ 143 aside .step .step-box .tshirt-design:hover{
144 border: 1px solid #ff0000; 144 border: 1px solid #ff0000;
145 } 145 }
146 aside .step .step-box .tshirt-design button:hover{ 146 aside .step .step-box .tshirt-design button:hover{
147 background-color: #fa7b7b; 147 background-color: #fa7b7b;
148 border: 1px solid #fa7b7b; 148 border: 1px solid #fa7b7b;
149 } 149 }
150 aside .step .step-box .tshirt-design div{ 150 aside .step .step-box .tshirt-design div{
151 float: left; 151 float: left;
152 } 152 }
153 aside .step .step-box .tshirt-design .icon{ 153 aside .step .step-box .tshirt-design .icon{
154 padding: 4px 4px; 154 padding: 4px 4px;
155 border-right: 1px solid #cccccc; 155 border-right: 1px solid #cccccc;
156 156
157 } 157 }
158 aside .step .step-box .tshirt-design .icon img{ 158 aside .step .step-box .tshirt-design .icon img{
159 height: 50px; 159 height: 50px;
160 } 160 }
161 aside .step .step-box .tshirt-design .name{ 161 aside .step .step-box .tshirt-design .name{
162 padding: 10px 10px; 162 padding: 10px 10px;
163 163
164 } 164 }
165 aside .step .step-box .tshirt-design .action{ 165 aside .step .step-box .tshirt-design .action{
166 padding: 10px 10px; 166 padding: 10px 10px;
167 float: right; 167 float: right;
168 168
169 } 169 }
170 aside .step .step-box .tshirt-design .action button{ 170 aside .step .step-box .tshirt-design .action button{
171 padding: 8px 10px; 171 padding: 8px 10px;
172 } 172 }
173 /*Step 2*/ 173 /*Step 2*/
174 aside .step .step-box .tshirt-color{ 174 aside .step .step-box .tshirt-color{
175 padding: 6px 10px; 175 padding: 6px 10px;
176 position: relative; 176 position: relative;
177 } 177 }
178 aside .step .step-box .tshirt-color ul.choice-color{ 178 aside .step .step-box .tshirt-color ul.choice-color{
179 float: left; 179 float: left;
180 list-style: none; 180 list-style: none;
181 padding-left: 0; 181 padding-left: 0;
182 width: 100%; 182 width: 100%;
183 margin-bottom: 3px; 183 margin-bottom: 3px;
184 } 184 }
185 aside .step .step-box .tshirt-color ul.choice-color li{ 185 aside .step .step-box .tshirt-color ul.choice-color li{
186 margin: 0 10px 0 0; 186 margin: 0 10px 0 0;
187 border: 1px solid #cccccc; 187 border: 1px solid #cccccc;
188 padding: 2px 2px; 188 padding: 2px 2px;
189 float: left; 189 float: left;
190 cursor: pointer; 190 cursor: pointer;
191 } 191 }
192 aside .step .step-box .tshirt-color ul.choice-color li.action{ 192 aside .step .step-box .tshirt-color ul.choice-color li.action{
193 border: 1px solid #ff0000; 193 border: 1px solid #ff0000;
194 } 194 }
195 aside .step .step-box .tshirt-color ul.choice-color li:hover{ 195 aside .step .step-box .tshirt-color ul.choice-color li:hover{
196 border: 1px solid #ff0000; 196 border: 1px solid #ff0000;
197 } 197 }
198 aside .step .step-box .tshirt-color ul.choice-color li div{ 198 aside .step .step-box .tshirt-color ul.choice-color li div{
199 height: 30px; 199 height: 30px;
200 width: 30px; 200 width: 30px;
201 } 201 }
202 202
203 aside .step .step-box .tshirt-color ul.choice-color li.white div{ 203 aside .step .step-box .tshirt-color ul.choice-color li.white div{
204 background-color: #ece7e4; 204 background-color: #ece7e4;
205 } 205 }
206 aside .step .step-box .tshirt-color ul.choice-color li.blue div{ 206 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
207 background-color: #e7dfd0; 207 background-color: #e7dfd0;
208 } 208 }
209 aside .step .step-box .tshirt-color .color-name{ 209 aside .step .step-box .tshirt-color .color-name{
210 width: 100%; 210 width: 100%;
211 font-size: 10px; 211 font-size: 10px;
212 } 212 }
213 aside .step .step-box .tshirt-color .view-more{ 213 aside .step .step-box .tshirt-color .view-more{
214 position: absolute; 214 position: absolute;
215 bottom: 6px; 215 bottom: 6px;
216 right: 10px; 216 right: 10px;
217 } 217 }
218 /*Step 3*/ 218 /*Step 3*/
219 aside .step .step-box .tshirt-saveorder{ 219 aside .step .step-box .tshirt-saveorder{
220 padding: 10px 10px 6px 10px; 220 padding: 10px 10px 6px 10px;
221 } 221 }
222 aside .step .step-box .tshirt-saveorder .action{ 222 aside .step .step-box .tshirt-saveorder .action{
223 width: 50%; 223 width: 50%;
224 float: left; 224 float: left;
225 } 225 }
226 aside .step .step-box .tshirt-saveorder .action:first-child{ 226 aside .step .step-box .tshirt-saveorder .action:first-child{
227 padding-right: 5px; 227 padding-right: 5px;
228 } 228 }
229 aside .step .step-box .tshirt-saveorder .action:last-child{ 229 aside .step .step-box .tshirt-saveorder .action:last-child{
230 padding-left: 5px; 230 padding-left: 5px;
231 } 231 }
232 aside .step .step-box .tshirt-saveorder .action button{ 232 aside .step .step-box .tshirt-saveorder .action button{
233 padding: 8px 10px; 233 padding: 8px 10px;
234 234
235 } 235 }
236 aside .step .step-box .tshirt-saveorder .action button .text{ 236 aside .step .step-box .tshirt-saveorder .action button .text{
237 float: left; 237 float: left;
238 width: 80%; 238 width: 80%;
239 text-align: center; 239 text-align: center;
240 padding-left: 10px; 240 padding-left: 10px;
241 vertical-align: bottom; 241 vertical-align: bottom;
242 } 242 }
243 aside .step .step-box .tshirt-saveorder .action button .arrow{ 243 aside .step .step-box .tshirt-saveorder .action button .arrow{
244 float: left; 244 float: left;
245 width: 20%; 245 width: 20%;
246 height: 40px; 246 height: 40px;
247 position: relative; 247 position: relative;
248 } 248 }
249 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ 249 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{
250 position: absolute; 250 position: absolute;
251 top: 50%; 251 top: 50%;
252 right: -6px; 252 right: -6px;
253 transform: translateX(-50%) translateY(-50%); 253 transform: translateX(-50%) translateY(-50%);
254 -webkit-transform: translateX(-50%) translateY(-50%); 254 -webkit-transform: translateX(-50%) translateY(-50%);
255 } 255 }
256 aside .step .step-box .tshirt-saveorder .notice{ 256 aside .step .step-box .tshirt-saveorder .notice{
257 padding: 5px 0 0 0; 257 padding: 5px 0 0 0;
258 } 258 }
259 /*Step 4*/ 259 /*Step 4*/
260 aside .step .title-notice{ 260 aside .step .title-notice{
261 261
262 } 262 }
263 aside .step .step-box .change-design{ 263 aside .step .step-box .change-design{
264 padding: 4px 4px; 264 padding: 4px 4px;
265 } 265 }
266 aside .step .step-box .change-design table{ 266 aside .step .step-box .change-design table{
267 267
268 } 268 }
269 aside .step .step-box .change-design table tr{ 269 aside .step .step-box .change-design table tr{
270 border-bottom: 1px dotted #cccccc; 270 border-bottom: 1px dotted #cccccc;
271 } 271 }
272 aside .step .step-box .change-design table tr:last-child{ 272 aside .step .step-box .change-design table tr:last-child{
273 border-bottom: 0; 273 border-bottom: 0;
274 } 274 }
275 275
276 /*Step 5- finish*/ 276 /*Step 5- finish*/
277 aside .step .finish-design{ 277 aside .step .finish-design{
278 padding: 20px 0; 278 padding: 20px 0;
279 } 279 }
280 aside .step .finish-design button{ 280 aside .step .finish-design button{
281 width: 100%; 281 width: 100%;
282 padding: 8px 10px; 282 padding: 8px 10px;
283 } 283 }
284 284
285 /*DESIGN CONTENT*/ 285 /*DESIGN CONTENT*/
286 #tshirt-content{ 286 #tshirt-content{
287 position: relative; 287 position: relative;
288 } 288 }
289 #tshirt-content .switch-border-design{ 289 #tshirt-content .switch-border-design{
290 position: absolute; 290 position: absolute;
291 top: 5px; 291 top: 5px;
292 right: 10px; 292 right: 10px;
293 color: red; 293 color: red;
294 font-size: 11px; 294 font-size: 11px;
295 } 295 }
296 #tshirt-content .tshirt-image{ 296 #tshirt-content .tshirt-image{
297 padding: 20px 0 0 0; 297 padding: 20px 0 0 0;
298 } 298 }
299 #tshirt-content .tshirt-choice{ 299 #tshirt-content .tshirt-choice{
300 300
301 } 301 }
302 #tshirt-content .tshirt-choice ul{ 302 #tshirt-content .tshirt-choice ul{
303 list-style: none; 303 list-style: none;
304 padding-left: 0; 304 padding-left: 0;
305 display: table; 305 display: table;
306 margin: auto; 306 margin: auto;
307 } 307 }
308 #tshirt-content .tshirt-choice ul li{ 308 #tshirt-content .tshirt-choice ul li{
309 float: left; 309 float: left;
310 margin: 10px 10px; 310 margin: 10px 10px;
311 cursor: pointer; 311 cursor: pointer;
312 } 312 }
313 #tshirt-content .tshirt-choice ul li .image{ 313 #tshirt-content .tshirt-choice ul li .image{
314 border: 1px solid #cccccc; 314 border: 1px solid #cccccc;
315 padding: 3px 3px; 315 padding: 3px 3px;
316 } 316 }
317 #tshirt-content .tshirt-choice ul li.focus{ 317 #tshirt-content .tshirt-choice ul li.focus{
318 318
319 } 319 }
320 #tshirt-content .tshirt-choice ul li.focus .image{ 320 #tshirt-content .tshirt-choice ul li.focus .image{
321 border: 1px solid #ff0000; 321 border: 1px solid #ff0000;
322 } 322 }
323 #tshirt-content .tshirt-choice ul li .image img{ 323 #tshirt-content .tshirt-choice ul li .image img{
324 width: 50px; 324 width: 50px;
325 height: auto; 325 height: auto;
326 } 326 }
327 /*MODAL Design*/ 327 /*MODAL Design*/
328 #tshirt-design{ 328 #tshirt-design{
329 background-color: #666666; 329 background-color: #666666;
330 } 330 }
331 #tshirt-design .modal-dialog{ 331 #tshirt-design .modal-dialog{
332 width: 75%; 332 width: 75%;
333 margin: 0 auto; 333 margin: 0 auto;
334 } 334 }
335 #tshirt-design .modal-dialog .modal-content{ 335 #tshirt-design .modal-dialog .modal-content{
336 background-color: transparent; 336 background-color: transparent;
337 border-radius: 0; 337 border-radius: 0;
338 border: 0; 338 border: 0;
339 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 339 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
340 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 340 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
341 } 341 }
342 #tshirt-design .modal-dialog .modal-content .modal-header{ 342 #tshirt-design .modal-dialog .modal-content .modal-header{
343 padding: 0 0 10px 0; 343 padding: 0 0 10px 0;
344 border-bottom: 0; 344 border-bottom: 0;
345 border-shadow: none!important; 345 border-shadow: none!important;
346 } 346 }
347 #tshirt-design .modal-dialog .modal-content .modal-body{ 347 #tshirt-design .modal-dialog .modal-content .modal-body{
348 background-color: #f5f5f5; 348 background-color: #f5f5f5;
349 padding: 0 0; 349 padding: 0 0;
350 } 350 }
351 #tshirt-design header{ 351 #tshirt-design header{
352 border-bottom: 1px solid #cccccc; 352 border-bottom: 1px solid #cccccc;
353 background-color: #dddddd; 353 background-color: #dddddd;
354 } 354 }
355 #tshirt-design header ul.nav{ 355 #tshirt-design header ul.nav{
356 padding-left: 0; 356 padding-left: 0;
357 list-style: none; 357 list-style: none;
358 } 358 }
359 #tshirt-design header ul.nav li{ 359 #tshirt-design header ul.nav li{
360 float: left; 360 float: left;
361 padding: 8px 26px; 361 padding: 8px 26px;
362 border-right: 1px solid #cccccc; 362 border-right: 1px solid #cccccc;
363 font-size: 14px; 363 font-size: 14px;
364 cursor: pointer; 364 cursor: pointer;
365 } 365 }
366 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ 366 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
367 background-color: red; 367 background-color: red;
368 color: #ffffff; 368 color: #ffffff;
369 } 369 }
370 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ 370 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
371 color: #ffffff; 371 color: #ffffff;
372 } 372 }
373 #tshirt-design header ul.nav li i.fa{ 373 #tshirt-design header ul.nav li i.fa{
374 color: #fe070f; 374 color: #fe070f;
375 font-size: 20px; 375 font-size: 20px;
376 margin-right: 10px; 376 margin-right: 10px;
377 } 377 }
378 #tshirt-design header .action{ 378 #tshirt-design header .action{
379 379
380 } 380 }
381 #tshirt-design header .action button{ 381 #tshirt-design header .action button{
382 padding: 2px 10px; 382 padding: 2px 10px;
383 margin: 6px 10px; 383 margin: 6px 10px;
384 } 384 }
385 #tshirt-design header .action button:hover{ 385 #tshirt-design header .action button:hover{
386 background-color: red; 386 background-color: red;
387 color: #ffffff; 387 color: #ffffff;
388 } 388 }
389 389
390 /*Aside modal*/ 390 /*Aside modal*/
391 .aside{ 391 .aside{
392 } 392 }
393 393
394 .aside .box-design-option{ 394 .aside .box-design-option{
395 list-style: none; 395 list-style: none;
396 padding-left: 0; 396 padding-left: 0;
397 margin-top: 10px; 397 margin-top: 10px;
398 } 398 }
399 .aside .box-design-option li{ 399 .aside .box-design-option li{
400 400
401 } 401 }
402 .aside .box-design-option li{ 402 .aside .box-design-option li{
403 border: 1px solid #cdcdcd; 403 border: 1px solid #cdcdcd;
404 position: relative; 404 position: relative;
405 cursor: pointer; 405 /*cursor: pointer;*/
406 } 406 }
407 .aside .box-design-option li .hover{ 407 .aside .box-design-option li .hover{
408 background-color: #fddad4; 408 background-color: #fddad4;
409 opacity: 0.6; 409 opacity: 0.6;
410 position: absolute; 410 position: absolute;
411 width: 100%; 411 width: 100%;
412 height: 100%; 412 height: 100%;
413 display: none; 413 display: none;
414 } 414 }
415 .aside .box-design-option li:hover .hover{ 415 .aside .box-design-option li:hover .hover{
416 display: block; 416 display: block;
417 } 417 }
418 418
419 .aside .box-design-option li .title{ 419 .aside .box-design-option li .title{
420 background: url("../images/bg1.png") repeat #cdcdcd; 420 background: url("../images/bg1.png") repeat #cdcdcd;
421 padding: 3px 10px; 421 padding: 3px 10px;
422 } 422 }
423 .aside .box-design-option li .title i.fa{ 423 .aside .box-design-option li .title i.fa{
424 color: #000000; 424 color: #000000;
425 } 425 }
426 426
427 .aside .box-design-option li .content{ 427 .aside .box-design-option li .content{
428 428
429 } 429 }
430 .aside .box-design-option li .content i.fa{ 430 .aside .box-design-option li .content i.fa{
431 font-size: 30px; 431 font-size: 30px;
432 color: #fe070f; 432 color: #fe070f;
433 margin: 8px 0; 433 margin: 8px 0;
434 } 434 }
435 .aside .box-design-option li .content .des{ 435 .aside .box-design-option li .content .des{
436 padding: 3px 10px 3px 0; 436 padding: 3px 10px 3px 0;
437 } 437 }
438 438
439 /*Design Choice Illustration*/ 439 /*Design Choice Illustration*/
440 .aside #choice-illustration li .content { 440 .aside #choice-illustration li .content {
441 padding: 10px 10px; 441 padding: 10px 10px;
442 } 442 }
443 443
444 .aside #choice-illustration li .content select{ 444 .aside #choice-illustration li .content select{
445 width: 100%; 445 width: 100%;
446 } 446 }
447 447
448 .aside #choice-illustration li .content .illustration-list { 448 .aside #choice-illustration li .content .illustration-list {
449 width: 100%; 449 width: 100%;
450 border: #bbb solid 1px; 450 border: #bbb solid 1px;
451 background: #FFF; 451 background: #FFF;
452 margin-top: 5px; 452 margin-top: 5px;
453 } 453 }
454 454
455 .aside #choice-illustration li .content .illustration-list .illstration-item{ 455 .aside #choice-illustration li .content .illustration-list .illstration-item{
456 height: 60px; 456 height: 60px;
457 overflow: hidden; 457 overflow: hidden;
458 float: left; 458 float: left;
459 margin-left: 6px; 459 margin-left: 6px;
460 margin-top: 5px; 460 margin-top: 5px;
461 margin-bottom: 5px; 461 margin-bottom: 5px;
462 padding: 2px; 462 padding: 2px;
463 background: #e2e2e2; 463 background: #e2e2e2;
464 border: solid 2px #d7d7d7; 464 border: solid 2px #d7d7d7;
465 cursor: pointer; 465 cursor: pointer;
466 } 466 }
467 467
468 .aside #choice-illustration li .content .illustration-list .illstration-item:hover { 468 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
469 outline: 2px solid #ed1d24; 469 outline: 2px solid #ed1d24;
470 } 470 }
471 471
472 .aside #choice-illustration li .content .illustration-list .illstration-item img { 472 .aside #choice-illustration li .content .illustration-list .illstration-item img {
473 width: 50px; 473 width: 50px;
474 cursor: pointer; 474 cursor: pointer;
475 } 475 }
476 476
477 .aside #choice-illustration li .content .illustration-list .footer-bar {
478 text-align: center;
479 margin-top: 5px;
480 }
481 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination {
482 margin-right: 5px;
483 cursor: pointer;
484 font-size: 9px;
485 color: #FFF;
486 background: #666666;
487 text-transform: uppercase;
488 padding: 2px 5px;
489 }
490
491 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover {
492 background: #999999;
493 }
494
477 .aside #choice-illustration li .content .color-patterns { 495 .aside #choice-illustration li .content .color-patterns {
478 width: 100%; 496 width: 100%;
479 border: #bbb solid 1px; 497 border: #bbb solid 1px;
480 background: #FFF; 498 background: #FFF;
481 margin-top: 5px; 499 margin-top: 5px;
482 } 500 }
483 501
484 .aside #choice-illustration li .content .color-patterns .color-pattern-item{ 502 .aside #choice-illustration li .content .color-patterns .color-pattern-item{
485 height: 20px; 503 height: 20px;
486 float: left; 504 float: left;
487 margin-left: 4px; 505 margin-left: 4px;
488 margin-top: 2px; 506 margin-top: 2px;
489 width: 20px; 507 width: 20px;
490 cursor: pointer; 508 cursor: pointer;
491 border: 1px solid #ddd; 509 border: 1px solid #ddd;
492 } 510 }
493 511
494 .aside #choice-illustration li .content .color-patterns .color-pattern-item:hover { 512 .aside #choice-illustration li .content .color-patterns .color-pattern-item:hover {
495 outline: 1px solid #ed1d24; 513 outline: 1px solid #ed1d24;
496 } 514 }
497 515
516 .aside #choice-illustration li .content .layer-item {
517 text-align: center;
518 border: 1px #ddd solid;
519 background: #FFF;
520 padding: 5px;
521 font-size: 12px;
522 cursor: pointer;
523 }
524
525 .aside #choice-illustration li .content .layer-item:hover {
526 background: #ffcccc;
527 }
498 528
499 /*Design content*/ 529 /*Design content*/
500 .tshirt-design-container{ 530 .tshirt-design-container{
501 position: relative; 531 position: relative;
502 } 532 }
503 .tshirt-design-container .design-content{ 533 .tshirt-design-container .design-content{
504 padding: 10px 30px 10px 15px; 534 padding: 10px 30px 10px 15px;
505 } 535 }
506 .tshirt-design-container .design-content .content{ 536 .tshirt-design-container .design-content .content{
507 width: 100%; 537 width: 100%;
508 min-height: 650px; 538 min-height: 650px;
509 background-color: #f0efea; 539 background-color: #f0efea;
510 padding: 40px 40px; 540 padding: 40px 40px;
511 height: 100%; 541 height: 100%;
512 } 542 }
513 .tshirt-design-container .design-content .content .selection-design{ 543 .tshirt-design-container .design-content .content .selection-design{
514 border: 1px solid #ff0000; 544 border: 1px solid #ff0000;
515 width: 100%; 545 width: 100%;
516 height: 620px; 546 height: 620px;
517 } 547 }
518 .tshirt-design-container .agree-design{ 548 .tshirt-design-container .agree-design{
519 position: absolute; 549 position: absolute;
520 right: -16px; 550 right: -16px;
521 top: 40%; 551 top: 40%;
522 } 552 }
523 .tshirt-design-container .trash-design{ 553 .tshirt-design-container .trash-design{
524 position: absolute; 554 position: absolute;
525 right: 5px; 555 right: 5px;
526 bottom: 0; 556 bottom: 0;
527 } 557 }
528 558
529 559
530 /*FOOTER*/ 560 /*FOOTER*/
531 footer{ 561 footer{
532 background-color: #333333; 562 background-color: #333333;
533 } 563 }
534 footer ul.nav-footer{ 564 footer ul.nav-footer{
535 padding-left: 0; 565 padding-left: 0;
536 list-style: none; 566 list-style: none;
537 } 567 }
538 footer ul.nav-footer li{ 568 footer ul.nav-footer li{
539 float: left; 569 float: left;
540 padding: 3px 10px; 570 padding: 3px 10px;
541 border-right: 1px dotted #ffffff; 571 border-right: 1px dotted #ffffff;
542 572
543 } 573 }
544 footer ul.nav-footer li a{ 574 footer ul.nav-footer li a{
545 color: #ffffff; 575 color: #ffffff;
546 font-size: 11px; 576 font-size: 11px;
547 } 577 }
548 /* Customize container */ 578 /* Customize container */
549 @media (min-width: 768px) { 579 @media (min-width: 768px) {
550 .container { 580 .container {
551 /*max-width: 730px;*/ 581 /*max-width: 730px;*/
552 } 582 }
553 } 583 }
554 584
555 /* Responsive: Portrait tablets and up */ 585 /* Responsive: Portrait tablets and up */
556 @media screen and (min-width: 768px) { 586 @media screen and (min-width: 768px) {
557 /* Remove the padding we set earlier */ 587 /* Remove the padding we set earlier */
558 588
559 } 589 }
560 590
app/views/design_part/illustration.html
Diff comments   View file @ 682a3b1
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 イラスト・イメージ選択 4 イラスト・イメージ選択
5 </div> 5 </div>
6 <div class="content clearfix"> 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%"> 7 <select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration);currentIllustrationPage=1;" data-placeholder="Choose category" style="width: 100%">
8 <option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option> 8 <option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option>
9 </select> 9 </select>
10 <div class="illustration-list"> 10 <div class="illustration-list" ng-init="currentIllustrationPage=1;perIllustrationPage=16">
11 <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list" ng-click="insertSvg(item)"> 11 <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list | limitTo:perIllustrationPage:((currentIllustrationPage-1)*perIllustrationPage)" ng-click="insertSvg(item)">
12 <img ng-src="{{item.path}}"/> 12 <img ng-src="{{item.path}}"/>
13 </div> 13 </div>
14 <div class="clearfix"></div> 14 <div class="clearfix"></div>
15 <div class="footer-bar">
16 <div class="pull-left footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage-1" ng-show="currentIllustrationPage > 1">< Back</div>
17 {{currentIllustrationPage}}/{{currentIllustrationCate.list.length/perIllustrationPage | number:0}}
18 <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < (currentIllustrationCate.list.length/perIllustrationPage|number:0)">Next ></div>
19 </div>
15 </div> 20 </div>
16 </div> 21 </div>
17 </li> 22 </li>
18 <li> 23 <li>
19 <div class="title"> 24 <div class="title">
20 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> 25 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
21 カラー変更 26 カラー変更
22 <div class="pull-right">元の色に戻す</div> 27 <div class="pull-right">元の色に戻す</div>
23 </div> 28 </div>
24 <div class="content clearfix"> 29 <div class="content clearfix">
25 <div class="color-patterns"> 30 <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}"> 31 <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">
27 </div> 32 </div>
28 <div class="clearfix"></div> 33 <div class="clearfix"></div>
29 </div> 34 </div>
30 </div> 35 </div>
31 </li> 36 </li>
32 <li> 37 <li>
33 <div class="title"> 38 <div class="title">
34 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> 39 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
35 重ね順変更 40 重ね順変更
36 </div> 41 </div>
37 <div class="content clearfix"> 42 <div class="content clearfix">
38 43 <div class="col-xs-3 layer-item" ng-click="layerProcess(1)">
44 <img src="images/layer-icon-1.png"/>
45 <div>前面へ</div>
46 </div>
47 <div class="col-xs-3 layer-item" ng-click="layerProcess(2)">
48 <img src="images/layer-icon-2.png"/>
49 <div>背面へ</div>
50 </div>
51 <div class="col-xs-3 layer-item" ng-click="layerProcess(3)">
52 <img src="images/layer-icon-3.png"/>
53 <div>最前面へ</div>
54 </div>
55 <div class="col-xs-3 layer-item" ng-click="layerProcess(4)">
56 <img src="images/layer-icon-4.png"/>
57 <div>最前面へ</div>
58 </div>
39 </div> 59 </div>
40 </li> 60 </li>
1 <!doctype html><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--><!--[if gt IE 8]><!--><html class="no-js" ng-app=""><!--<![endif]--><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width"><!-- Place favicon.ico and apple-touch-icon.png in the root directory --><link rel="stylesheet" href="styles/271347a9.vendor.css"><link rel="stylesheet" href="styles/ba55f2e6.main.css"><body ng-app="tshatsApp"><!--[if lt IE 7]> 1 <!doctype html><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--><!--[if gt IE 8]><!--><html class="no-js" ng-app=""><!--<![endif]--><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width"><!-- Place favicon.ico and apple-touch-icon.png in the root directory --><link rel="stylesheet" href="styles/271347a9.vendor.css"><link rel="stylesheet" href="styles/36c320d8.main.css"><body ng-app="tshatsApp"><!--[if lt IE 7]>
2 <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> 2 <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>
3 <![endif]--><!-- Add your site or application content here --><div class="container" ng-view=""></div><!-- Google Analytics: change UA-XXXXX-X to be your site's ID --><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 3 <![endif]--><!-- Add your site or application content here --><div class="container" ng-view=""></div><!-- Google Analytics: change UA-XXXXX-X to be your site's ID --><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
4 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 4 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
5 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 5 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
6 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 6 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
7 7
8 ga('create', 'UA-XXXXX-X'); 8 ga('create', 'UA-XXXXX-X');
9 ga('send', 'pageview');</script><script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script><script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script><script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script><!--[if lt IE 9]> 9 ga('send', 'pageview');</script><script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script><script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script><script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script><!--[if lt IE 9]>
10 <script src="bower_components/es5-shim/es5-shim.js"></script> 10 <script src="bower_components/es5-shim/es5-shim.js"></script>
11 <script src="bower_components/json3/lib/json3.min.js"></script> 11 <script src="bower_components/json3/lib/json3.min.js"></script>
12 <![endif]--><script type="text/javascript">var VERSION = '16-11_01'; 12 <![endif]--><script type="text/javascript">var VERSION = new Date().getTime();
13 var require = { 13 var require = {
14 urlArgs: "ver="+VERSION, 14 urlArgs: "ver="+VERSION,
15 };</script><script src="bower_components/requirejs/require.js" data-main="scripts/main"></script> 15 };</script><script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
dist/scripts/controllers/main.js
Diff comments   View file @ 682a3b1
1 define(["app"],function(app){"use strict";app.controller("MainCtrl",function($rootScope,$scope,$illustration,$t_shirt){$scope.designFrameView="views/tshirt-design.html?ver="+VERSION,$scope.designPartIllustration="views/design_part/illustration.html?ver="+VERSION,$scope.designPartImage="views/design_part/image.html?ver="+VERSION,$scope.designPartText="views/design_part/text.html?ver="+VERSION,$scope.designPartDefault="views/design_part/default.html?ver="+VERSION,$scope.tShirtColor=$t_shirt.getTShirtColor(0);var tShirtColorFirstKey=0;$scope.tShirtChoiceBackFrontKey="front",$scope.tShirtColorKey=tShirtColorFirstKey,$rootScope.tShirtColorCode=$scope.tShirtColor[tShirtColorFirstKey].code,$scope.tShirtColorName=$scope.tShirtColor[tShirtColorFirstKey].name,$scope.tShirtImgFront=$scope.tShirtColor[tShirtColorFirstKey].img.front,$scope.tShirtImgBack=$scope.tShirtColor[tShirtColorFirstKey].img.back,$scope.tShirtImg=$scope.tShirtImgFront,$scope.choiceTShirtColor=function(key){$scope.tShirtColorKey=key,$rootScope.tShirtColorCode=$scope.tShirtColor[key].code,$scope.tShirtColorName=$scope.tShirtColor[key].name,$scope.tShirtImgFront=$scope.tShirtColor[key].img.front,$scope.tShirtImgBack=$scope.tShirtColor[key].img.back,"front"==$scope.tShirtChoiceBackFrontKey?$scope.tShirtImg=$scope.tShirtImgFront:$scope.tShirtImg=$scope.tShirtImgBack},$scope.choiceTShirtBackFront=function(choice){"front"==choice?$scope.tShirtImg=$scope.tShirtImgFront:$scope.tShirtImg=$scope.tShirtImgBack,$scope.tShirtChoiceBackFrontKey=choice},$scope.showDesignTab=function(tab){switch($rootScope.isShowLeftPanel=tab,tab){case"illustration":$scope.IllustrationList=$illustration.getAll(),$scope.illustrationSelectConfig={allowClear:!0};break;case"text":}},$rootScope.safeApply=function(fn){var phase=this.$root.$$phase;"$apply"==phase||"$digest"==phase?fn&&"function"==typeof fn&&fn():this.$apply(fn)},$scope.modalTShirtDesign=function(){$("#tshirt-design").modal({backdrop:"static",keyboard:!1}),$scope.showDesignTab("default")},$scope.modalClose=function(){$("#tshirt-design").modal("hide")}})}); 1 define(["app"],function(app){"use strict";app.controller("MainCtrl",function($rootScope,$scope,$illustration,$t_shirt){$rootScope.API_URL="http://domain.com",$scope.designFrameView="views/tshirt-design.html?ver="+VERSION,$scope.designPartIllustration="views/design_part/illustration.html?ver="+VERSION,$scope.designPartImage="views/design_part/image.html?ver="+VERSION,$scope.designPartText="views/design_part/text.html?ver="+VERSION,$scope.designPartDefault="views/design_part/default.html?ver="+VERSION,$scope.tShirtColor=$t_shirt.getTShirtColor(0);var tShirtColorFirstKey=0;$scope.tShirtChoiceBackFrontKey="front",$scope.tShirtColorKey=tShirtColorFirstKey,$rootScope.tShirtColorCode=$scope.tShirtColor[tShirtColorFirstKey].code,$scope.tShirtColorName=$scope.tShirtColor[tShirtColorFirstKey].name,$scope.tShirtImgFront=$scope.tShirtColor[tShirtColorFirstKey].img.front,$scope.tShirtImgBack=$scope.tShirtColor[tShirtColorFirstKey].img.back,$scope.tShirtImg=$scope.tShirtImgFront,$scope.choiceTShirtColor=function(key){$scope.tShirtColorKey=key,$rootScope.tShirtColorCode=$scope.tShirtColor[key].code,$scope.tShirtColorName=$scope.tShirtColor[key].name,$scope.tShirtImgFront=$scope.tShirtColor[key].img.front,$scope.tShirtImgBack=$scope.tShirtColor[key].img.back,"front"==$scope.tShirtChoiceBackFrontKey?$scope.tShirtImg=$scope.tShirtImgFront:$scope.tShirtImg=$scope.tShirtImgBack},$scope.choiceTShirtBackFront=function(choice){"front"==choice?$scope.tShirtImg=$scope.tShirtImgFront:$scope.tShirtImg=$scope.tShirtImgBack,$scope.tShirtChoiceBackFrontKey=choice},$scope.showDesignTab=function(tab){switch($rootScope.isShowLeftPanel=tab,tab){case"illustration":$scope.IllustrationList=$illustration.getAll(),$scope.illustrationSelectConfig={allowClear:!0};break;case"text":}},$rootScope.safeApply=function(fn){var phase=this.$root.$$phase;"$apply"==phase||"$digest"==phase?fn&&"function"==typeof fn&&fn():this.$apply(fn)},$scope.modalTShirtDesign=function(){$("#tshirt-design").modal({backdrop:"static",keyboard:!1}),$scope.showDesignTab("default")},$scope.modalClose=function(){$("#tshirt-design").modal("hide")}})});
dist/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 682a3b1
1 define(["app"],function(app){app.controller("TshirtdesignCtrl",function($scope,$rootScope,$illustration){function onIllustrationAdded(options){var object=options.target;console.log("object:added"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),console.log(object.originalState),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,refreshObj=!0}function onIllustrationModifield(options){var objOffset=canvas.getActiveObject().getBoundingRect(),cH=canvas.height,cW=canvas.width,H0=50,W0=50;if(objOffset.left<W0-objOffset.width||objOffset.left>cW-W0||objOffset.top<H0-objOffset.height||objOffset.top>cH-H0){if(!confirm("削除してもよろしいですか"))return void undoCanvas();canvas.getActiveObject().remove()}var object=options.target;console.log("object:modified"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,console.log(stateObj),refreshObj=!0}function onIllustrationChange(options){}function onIllustrationOut(){console.log("out object")}function undoCanvas(){return 0>=indexCurr?void(indexCurr=0):(refreshObj===!0&&(indexCurr--,refreshObj=!1),console.log("undo"),indexCurr2=indexCurr-1,currentObj=listObj[indexCurr2],currentObj&&currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])),indexCurr--,currentObj.setCoords(),canvas.renderAll(),void(actionObj=!0))}function onIllustrationSelected(options){var object=options.target;switch($scope.typeObject=object.type,$scope.typeObject){case"i-text":$("#input-design-text").focus(),$rootScope.isShowLeftPanel="text";break;case"path-group":$rootScope.isShowLeftPanel="illustration";break;default:$rootScope.isShowLeftPanel="default"}$rootScope.safeApply()}var canvas=new fabric.Canvas("main-design-container");fabric.Object.prototype.transparentCorners=!1,canvas.on("after:render",function(){}),canvas.on({"object:added":onIllustrationAdded,"object:moving":onIllustrationChange,"object:scaling":onIllustrationChange,"object:rotating":onIllustrationChange,"object:selected":onIllustrationSelected,"object:modified":onIllustrationModifield,"selected:deselected":onIllustrationOut});var currentObj,listObj=[],stateObj=[],indexCurr=0,indexCurr2=0,actionObj=!1,refreshObj=!0;$scope.currentObject=null,$scope.changeIllustrationCategory=function(currentIllustration){$scope.currentIllustrationCate=$illustration.getList(currentIllustration)},$scope.insertSvg=function(item){fabric.loadSVGFromURL(item.path,function(objects,options){var shape=fabric.util.groupSVGElements(objects,options);canvas.add(shape.scale(.6)),shape.set({left:150,top:200}).setCoords(),canvas.renderAll(),canvas.setActiveObject(shape)})},$scope.changeColorPattern=function(color){canvas.getActiveObject()&&(canvas.getActiveObject().set("fill",color),canvas.renderAll())},$scope.listColorPatterns=["#000000","#ffff00","#ff6600","#ff0000","#ff6262","#ffa19c","#ff9933","#c45d01","#5d2b03","#ffffcc","#ffff99","#ffd500","#c0db50","#21a52a","#00663f","#abfcab","#36ffaa","#89eaea","#00938c","#005450","#0badff","#006cff","#839aff","#0410a0","#ffb2ff","#f93fff","#6600ca","#ff6699","#999999","#666666","#333333"],$scope.listFontFamily=[{name:"GN-Aki-iro_Sesami_Cookies",slug:"gn_aki_iro_sesami_cookies"},{name:"Tahoma",slug:"tahoma"},{name:"GN-Fuyu-iro_Script_Bold",slug:"gn_fuyu_iro_script_bold"},{name:"GN Killgothic U Kanana",slug:"gn_killgothic_u_kanana"}],$scope.focusInputText=function(){"i-text"!=$scope.typeObject&&($scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",fontSize:28,fill:"black"}))},$scope.inputText=function(e){var iText=$scope.iText;""!=e&&(iText.text=e,iText.set().setCoords(),canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText))},$scope.setFontFamily=function(font){if(canvas.getActiveObject()){var currentObject=canvas.getActiveObject();"i-text"==currentObject.type&&(console.log(font),currentObject.set("fontFamily",font),currentObject.selectWord(),canvas.renderAll(),canvas.setActiveObject(currentObject))}}})}); 1 define(["app"],function(app){app.controller("TshirtdesignCtrl",function($scope,$rootScope,$illustration){function onIllustrationAdded(options){var object=options.target;console.log("object:added"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),console.log(object.originalState),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,refreshObj=!0}function onIllustrationModifield(options){var objOffset=canvas.getActiveObject().getBoundingRect(),cH=canvas.height,cW=canvas.width,H0=50,W0=50;if(objOffset.left<W0-objOffset.width||objOffset.left>cW-W0||objOffset.top<H0-objOffset.height||objOffset.top>cH-H0){if(!confirm("削除してもよろしいですか"))return void undoCanvas();canvas.getActiveObject().remove()}var object=options.target;console.log("object:modified"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,console.log(stateObj),refreshObj=!0}function onIllustrationChange(options){}function onIllustrationOut(){console.log("out object")}function undoCanvas(){return 0>=indexCurr?void(indexCurr=0):(refreshObj===!0&&(indexCurr--,refreshObj=!1),console.log("undo"),indexCurr2=indexCurr-1,currentObj=listObj[indexCurr2],currentObj&&currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])),indexCurr--,currentObj.setCoords(),canvas.renderAll(),void(actionObj=!0))}function onIllustrationSelected(options){var object=options.target;switch($scope.typeObject=object.type,$scope.typeObject){case"i-text":$("#input-design-text").focus(),$rootScope.isShowLeftPanel="text";break;case"path-group":$rootScope.isShowLeftPanel="illustration";break;default:$rootScope.isShowLeftPanel="default"}$rootScope.safeApply()}var canvas=new fabric.Canvas("main-design-container");fabric.Object.prototype.transparentCorners=!1,canvas.on("after:render",function(){}),canvas.on({"object:added":onIllustrationAdded,"object:moving":onIllustrationChange,"object:scaling":onIllustrationChange,"object:rotating":onIllustrationChange,"object:selected":onIllustrationSelected,"object:modified":onIllustrationModifield,"selected:deselected":onIllustrationOut});var currentObj,listObj=[],stateObj=[],indexCurr=0,indexCurr2=0,actionObj=!1,refreshObj=!0;$scope.currentObject=null,$scope.changeIllustrationCategory=function(currentIllustration){$scope.currentIllustrationCate=$illustration.getList(currentIllustration)},$scope.insertSvg=function(item){fabric.loadSVGFromURL(item.path,function(objects,options){var shape=fabric.util.groupSVGElements(objects,options);canvas.add(shape.scale(.6)),shape.set({left:150,top:200}).setCoords(),canvas.renderAll(),canvas.setActiveObject(shape)})},$scope.listColorPatterns=["#000000","#ffff00","#ff6600","#ff0000","#ff6262","#ffa19c","#ff9933","#c45d01","#5d2b03","#ffffcc","#ffff99","#ffd500","#c0db50","#21a52a","#00663f","#abfcab","#36ffaa","#89eaea","#00938c","#005450","#0badff","#006cff","#839aff","#0410a0","#ffb2ff","#f93fff","#6600ca","#ff6699","#999999","#666666","#333333"],$scope.changeColorPattern=function(color){canvas.getActiveObject()&&(canvas.getActiveObject().set("fill",color),canvas.renderAll())},$scope.layerProcess=function(mode){var activeObject=canvas.getActiveObject();if(activeObject){switch(mode){case 1:activeObject.bringForward();break;case 2:activeObject.sendBackwards();break;case 3:activeObject.bringToFront();break;case 4:activeObject.sendToBack()}canvas.renderAll()}},$scope.listFontFamily=[{name:"GN-Aki-iro_Sesami_Cookies",slug:"gn_aki_iro_sesami_cookies"},{name:"Tahoma",slug:"tahoma"},{name:"GN-Fuyu-iro_Script_Bold",slug:"gn_fuyu_iro_script_bold"},{name:"GN Killgothic U Kanana",slug:"gn_killgothic_u_kanana"}],$scope.focusInputText=function(){"i-text"!=$scope.typeObject&&($scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",fontSize:28,fill:"black"}))},$scope.inputText=function(e){var iText=$scope.iText;""!=e&&(iText.text=e,iText.set().setCoords(),canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText))},$scope.setFontFamily=function(font){if(canvas.getActiveObject()){var currentObject=canvas.getActiveObject();"i-text"==currentObject.type&&(console.log(font),currentObject.set("fontFamily",font),currentObject.selectWord(),canvas.renderAll(),canvas.setActiveObject(currentObject))}}})});
dist/scripts/services/illustration.js
Diff comments   View file @ 682a3b1
1 define(["app"],function(app){"use strict";app.factory("$illustration",function($http,$rootScope){var DATA={cate1:{name:"category #1",list:[{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"},{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"}]},cate2:{name:"category #2",list:[{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"},{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"}]}};return{loadFromRemote:function(params,successHandle,errorHandle){var httpObj=$http({url:$rootScope+"/apiv1/illustration",method:"GET",params:params||[]});"undefined"==typeof successHandle&&(successHandle=function(response){1==response.status&&(DATA=response.data)}),httpObj.success(successHandle),"undefined"!=typeof errorHandle&&httpObj.error(errorHandle)},getAll:function(){return DATA},getList:function(category){return"undefined"==typeof DATA[category]?[]:DATA[category]}}})}); 1 define(["app"],function(app){"use strict";app.factory("$illustration",function($http,$rootScope){var DATA={cate1:{name:"category #1",list:[{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"},{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"},{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"},{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"},{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"},{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"}]},cate2:{name:"category #2",list:[{name:"item 1",path:"images/illustrations/item3.svg"},{name:"item 2",path:"images/illustrations/item1.svg"},{name:"item 3",path:"images/illustrations/item4.svg"},{name:"item 4",path:"images/illustrations/item2.svg"},{name:"item 1",path:"images/illustrations/item1.svg"},{name:"item 2",path:"images/illustrations/item2.svg"},{name:"item 3",path:"images/illustrations/item3.svg"},{name:"item 4",path:"images/illustrations/item4.svg"}]}};return{loadFromRemote:function(params,successHandle,errorHandle){var httpObj=$http({url:$rootScope.API_URL+"/apiv1/illustration",method:"GET",params:params||[]});"undefined"==typeof successHandle&&(successHandle=function(response){1==response.status&&(DATA=response.data)}),httpObj.success(successHandle),"undefined"!=typeof errorHandle&&httpObj.error(errorHandle)},getAll:function(){return DATA},getList:function(category){return"undefined"==typeof DATA[category]?[]:DATA[category]}}})});
dist/styles/36c320d8.main.css
Diff comments   View file @ 682a3b1
File was created 1 body{font-family:'Hiragino Kaku Gothic Pro',sans-serif}import "../fonts/font_canvas/font-canvas.css";body{font-family:'Hiragino Kaku Gothic Pro',sans-serif}.padding-right-0{padding-right:0!important}.padding-left-0{padding-left:0!important}button.red{color:#fff;background-color:red;border:1px solid red}button.white{border:1px solid #ff8080;color:#ff8080;background-color:#fff}button.brown{background-color:#666;border:1px solid #666;color:#fff;border-radius:5px}button.black{border:1px solid #c9c9c9;background-color:#343434;color:#fff;padding:1px 6px}#tshirt-container{border-left:1px solid #dcdcdc;border-right:1px solid #dcdcdc}header{border-bottom:1px solid #dcdcdc}header .logo{color:#ed1d24;font-size:30px;text-transform:uppercase;font-weight:700}header .logo img{width:60px}nav{border-bottom:1px solid #dcdcdc;padding:10px 0}nav h2{font-size:27px;margin:0}nav ul{list-style:none;padding-left:0;margin-bottom:0}nav ul li{margin-left:2px;float:left;padding:6px 12px;background-color:#999;position:relative}nav ul li i.fa{position:absolute;color:#fff;font-size:18px;right:-4px;top:50%;transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%)}nav ul li a{color:#fff}nav ul li:hover a{text-decoration:none;color:#fff}nav ul li.action{color:#fff;background-color:#ed1d24}aside{margin:10px 0}aside .break-down{padding:0}aside .break-down i.fa{font-size:35px;color:red}aside .break-line{height:10px}aside .break-line hr{border-top:1px dotted #ccc}aside .step{margin:0}aside .step .title{font-size:15px;line-height:16px;font-weight:700;margin-bottom:3px}aside .step .title-notice{font-size:13px;line-height:16px;margin-bottom:3px}aside .step .title-notice .require{font-size:10px}aside .step .step-box{border:2px solid #dcdcdc;font-size:12px}aside .step .step-box .tshirt-design{border:1px solid #ccc;background-color:#f5f5f5;margin:10px}aside .step .step-box .tshirt-design:hover{border:1px solid red}aside .step .step-box .tshirt-design button:hover{background-color:#fa7b7b;border:1px solid #fa7b7b}aside .step .step-box .tshirt-design div{float:left}aside .step .step-box .tshirt-design .icon{padding:4px;border-right:1px solid #ccc}aside .step .step-box .tshirt-design .icon img{height:50px}aside .step .step-box .tshirt-design .name{padding:10px}aside .step .step-box .tshirt-design .action{padding:10px;float:right}aside .step .step-box .tshirt-design .action button{padding:8px 10px}aside .step .step-box .tshirt-color{padding:6px 10px;position:relative}aside .step .step-box .tshirt-color ul.choice-color{float:left;list-style:none;padding-left:0;width:100%;margin-bottom:3px}aside .step .step-box .tshirt-color ul.choice-color li{margin:0 10px 0 0;border:1px solid #ccc;padding:2px;float:left;cursor:pointer}aside .step .step-box .tshirt-color ul.choice-color li.action,aside .step .step-box .tshirt-color ul.choice-color li:hover{border:1px solid red}aside .step .step-box .tshirt-color ul.choice-color li div{height:30px;width:30px}aside .step .step-box .tshirt-color ul.choice-color li.white div{background-color:#ece7e4}aside .step .step-box .tshirt-color ul.choice-color li.blue div{background-color:#e7dfd0}aside .step .step-box .tshirt-color .color-name{width:100%;font-size:10px}aside .step .step-box .tshirt-color .view-more{position:absolute;bottom:6px;right:10px}aside .step .step-box .tshirt-saveorder{padding:10px 10px 6px}aside .step .step-box .tshirt-saveorder .action{width:50%;float:left}aside .step .step-box .tshirt-saveorder .action:first-child{padding-right:5px}aside .step .step-box .tshirt-saveorder .action:last-child{padding-left:5px}aside .step .step-box .tshirt-saveorder .action button{padding:8px 10px}aside .step .step-box .tshirt-saveorder .action button .text{float:left;width:80%;text-align:center;padding-left:10px;vertical-align:bottom}aside .step .step-box .tshirt-saveorder .action button .arrow{float:left;width:20%;height:40px;position:relative}aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{position:absolute;top:50%;right:-6px;transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%)}aside .step .step-box .tshirt-saveorder .notice{padding:5px 0 0}aside .step .step-box .change-design{padding:4px}aside .step .step-box .change-design table tr{border-bottom:1px dotted #ccc}aside .step .step-box .change-design table tr:last-child{border-bottom:0}aside .step .finish-design{padding:20px 0}aside .step .finish-design button{width:100%;padding:8px 10px}#tshirt-content{position:relative}#tshirt-content .switch-border-design{position:absolute;top:5px;right:10px;color:red;font-size:11px}#tshirt-content .tshirt-image{padding:20px 0 0}#tshirt-content .tshirt-choice ul{list-style:none;padding-left:0;display:table;margin:auto}#tshirt-content .tshirt-choice ul li{float:left;margin:10px;cursor:pointer}#tshirt-content .tshirt-choice ul li .image{border:1px solid #ccc;padding:3px}#tshirt-content .tshirt-choice ul li.focus .image{border:1px solid red}#tshirt-content .tshirt-choice ul li .image img{width:50px;height:auto}#tshirt-design{background-color:#666}#tshirt-design .modal-dialog{width:75%;margin:0 auto}#tshirt-design .modal-dialog .modal-content{background-color:transparent;border-radius:0;border:0;-webkit-box-shadow:0 0 0 rgba(0,0,0,.5)!important;box-shadow:0 0 0 rgba(0,0,0,.5)!important}#tshirt-design .modal-dialog .modal-content .modal-header{padding:0 0 10px;border-bottom:0;border-shadow:none!important}#tshirt-design .modal-dialog .modal-content .modal-body{background-color:#f5f5f5;padding:0}#tshirt-design header{border-bottom:1px solid #ccc;background-color:#ddd}#tshirt-design header ul.nav{padding-left:0;list-style:none}#tshirt-design header ul.nav li{float:left;padding:8px 26px;border-right:1px solid #ccc;font-size:14px;cursor:pointer}#tshirt-design header ul.nav li.active,#tshirt-design header ul.nav li:hover{background-color:red;color:#fff}#tshirt-design header ul.nav li.active i.fa,#tshirt-design header ul.nav li:hover i.fa{color:#fff}#tshirt-design header ul.nav li i.fa{color:#fe070f;font-size:20px;margin-right:10px}#tshirt-design header .action button{padding:2px 10px;margin:6px 10px}#tshirt-design header .action button:hover{background-color:red;color:#fff}.aside .box-design-option{list-style:none;padding-left:0;margin-top:10px}.aside .box-design-option li{border:1px solid #cdcdcd;position:relative}.aside .box-design-option li .hover{background-color:#fddad4;opacity:.6;position:absolute;width:100%;height:100%;display:none}.aside .box-design-option li:hover .hover{display:block}.aside .box-design-option li .title{background:url(../images/bg1.png) repeat #cdcdcd;padding:3px 10px}.aside .box-design-option li .title i.fa{color:#000}.aside .box-design-option li .content i.fa{font-size:30px;color:#fe070f;margin:8px 0}.aside .box-design-option li .content .des{padding:3px 10px 3px 0}.aside #choice-illustration li .content{padding:10px}.aside #choice-illustration li .content select{width:100%}.aside #choice-illustration li .content .illustration-list{width:100%;border:#bbb solid 1px;background:#FFF;margin-top:5px}.aside #choice-illustration li .content .illustration-list .illstration-item{height:60px;overflow:hidden;float:left;margin-left:6px;margin-top:5px;margin-bottom:5px;padding:2px;background:#e2e2e2;border:solid 2px #d7d7d7;cursor:pointer}.aside #choice-illustration li .content .illustration-list .illstration-item:hover{outline:2px solid #ed1d24}.aside #choice-illustration li .content .illustration-list .illstration-item img{width:50px;cursor:pointer}.aside #choice-illustration li .content .illustration-list .footer-bar{text-align:center;margin-top:5px}.aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination{margin-right:5px;cursor:pointer;font-size:9px;color:#FFF;background:#666;text-transform:uppercase;padding:2px 5px}.aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover{background:#999}.aside #choice-illustration li .content .color-patterns{width:100%;border:#bbb solid 1px;background:#FFF;margin-top:5px}.aside #choice-illustration li .content .color-patterns .color-pattern-item{height:20px;float:left;margin-left:4px;margin-top:2px;width:20px;cursor:pointer;border:1px solid #ddd}.aside #choice-illustration li .content .color-patterns .color-pattern-item:hover{outline:1px solid #ed1d24}.aside #choice-illustration li .content .layer-item{text-align:center;border:1px #ddd solid;background:#FFF;padding:5px;font-size:12px;cursor:pointer}.aside #choice-illustration li .content .layer-item:hover{background:#fcc}.tshirt-design-container{position:relative}.tshirt-design-container .design-content{padding:10px 30px 10px 15px}.tshirt-design-container .design-content .content{width:100%;min-height:650px;background-color:#f0efea;padding:40px;height:100%}.tshirt-design-container .design-content .content .selection-design{border:1px solid red;width:100%;height:620px}.tshirt-design-container .agree-design{position:absolute;right:-16px;top:40%}.tshirt-design-container .trash-design{position:absolute;right:5px;bottom:0}footer{background-color:#333}footer ul.nav-footer{padding-left:0;list-style:none}footer ul.nav-footer li{float:left;padding:3px 10px;border-right:1px dotted #fff}footer ul.nav-footer li a{color:#fff;font-size:11px}
dist/styles/ba55f2e6.main.css
View file @ 682a3b1
1 body{font-family:'Hiragino Kaku Gothic Pro',sans-serif}import "../fonts/font_canvas/font-canvas.css";body{font-family:'Hiragino Kaku Gothic Pro',sans-serif}.padding-right-0{padding-right:0!important}.padding-left-0{padding-left:0!important}button.red{color:#fff;background-color:red;border:1px solid red}button.white{border:1px solid #ff8080;color:#ff8080;background-color:#fff}button.brown{background-color:#666;border:1px solid #666;color:#fff;border-radius:5px}button.black{border:1px solid #c9c9c9;background-color:#343434;color:#fff;padding:1px 6px}#tshirt-container{border-left:1px solid #dcdcdc;border-right:1px solid #dcdcdc}header{border-bottom:1px solid #dcdcdc}header .logo{color:#ed1d24;font-size:30px;text-transform:uppercase;font-weight:700}header .logo img{width:60px}nav{border-bottom:1px solid #dcdcdc;padding:10px 0}nav h2{font-size:27px;margin:0}nav ul{list-style:none;padding-left:0;margin-bottom:0}nav ul li{margin-left:2px;float:left;padding:6px 12px;background-color:#999;position:relative}nav ul li i.fa{position:absolute;color:#fff;font-size:18px;right:-4px;top:50%;transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%)}nav ul li a{color:#fff}nav ul li:hover a{text-decoration:none;color:#fff}nav ul li.action{color:#fff;background-color:#ed1d24}aside{margin:10px 0}aside .break-down{padding:0}aside .break-down i.fa{font-size:35px;color:red}aside .break-line{height:10px}aside .break-line hr{border-top:1px dotted #ccc}aside .step{margin:0}aside .step .title{font-size:15px;line-height:16px;font-weight:700;margin-bottom:3px}aside .step .title-notice{font-size:13px;line-height:16px;margin-bottom:3px}aside .step .title-notice .require{font-size:10px}aside .step .step-box{border:2px solid #dcdcdc;font-size:12px}aside .step .step-box .tshirt-design{border:1px solid #ccc;background-color:#f5f5f5;margin:10px}aside .step .step-box .tshirt-design:hover{border:1px solid red}aside .step .step-box .tshirt-design button:hover{background-color:#fa7b7b;border:1px solid #fa7b7b}aside .step .step-box .tshirt-design div{float:left}aside .step .step-box .tshirt-design .icon{padding:4px;border-right:1px solid #ccc}aside .step .step-box .tshirt-design .icon img{height:50px}aside .step .step-box .tshirt-design .name{padding:10px}aside .step .step-box .tshirt-design .action{padding:10px;float:right}aside .step .step-box .tshirt-design .action button{padding:8px 10px}aside .step .step-box .tshirt-color{padding:6px 10px;position:relative}aside .step .step-box .tshirt-color ul.choice-color{float:left;list-style:none;padding-left:0;width:100%;margin-bottom:3px}aside .step .step-box .tshirt-color ul.choice-color li{margin:0 10px 0 0;border:1px solid #ccc;padding:2px;float:left;cursor:pointer}aside .step .step-box .tshirt-color ul.choice-color li.action,aside .step .step-box .tshirt-color ul.choice-color li:hover{border:1px solid red}aside .step .step-box .tshirt-color ul.choice-color li div{height:30px;width:30px}aside .step .step-box .tshirt-color ul.choice-color li.white div{background-color:#ece7e4}aside .step .step-box .tshirt-color ul.choice-color li.blue div{background-color:#e7dfd0}aside .step .step-box .tshirt-color .color-name{width:100%;font-size:10px}aside .step .step-box .tshirt-color .view-more{position:absolute;bottom:6px;right:10px}aside .step .step-box .tshirt-saveorder{padding:10px 10px 6px}aside .step .step-box .tshirt-saveorder .action{width:50%;float:left}aside .step .step-box .tshirt-saveorder .action:first-child{padding-right:5px}aside .step .step-box .tshirt-saveorder .action:last-child{padding-left:5px}aside .step .step-box .tshirt-saveorder .action button{padding:8px 10px}aside .step .step-box .tshirt-saveorder .action button .text{float:left;width:80%;text-align:center;padding-left:10px;vertical-align:bottom}aside .step .step-box .tshirt-saveorder .action button .arrow{float:left;width:20%;height:40px;position:relative}aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{position:absolute;top:50%;right:-6px;transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%)}aside .step .step-box .tshirt-saveorder .notice{padding:5px 0 0}aside .step .step-box .change-design{padding:4px}aside .step .step-box .change-design table tr{border-bottom:1px dotted #ccc}aside .step .step-box .change-design table tr:last-child{border-bottom:0}aside .step .finish-design{padding:20px 0}aside .step .finish-design button{width:100%;padding:8px 10px}#tshirt-content{position:relative}#tshirt-content .switch-border-design{position:absolute;top:5px;right:10px;color:red;font-size:11px}#tshirt-content .tshirt-image{padding:20px 0 0}#tshirt-content .tshirt-choice ul{list-style:none;padding-left:0;display:table;margin:auto}#tshirt-content .tshirt-choice ul li{float:left;margin:10px;cursor:pointer}#tshirt-content .tshirt-choice ul li .image{border:1px solid #ccc;padding:3px}#tshirt-content .tshirt-choice ul li.focus .image{border:1px solid red}#tshirt-content .tshirt-choice ul li .image img{width:50px;height:auto}#tshirt-design{background-color:#666}#tshirt-design .modal-dialog{width:75%;margin:0 auto}#tshirt-design .modal-dialog .modal-content{background-color:transparent;border-radius:0;border:0;-webkit-box-shadow:0 0 0 rgba(0,0,0,.5)!important;box-shadow:0 0 0 rgba(0,0,0,.5)!important}#tshirt-design .modal-dialog .modal-content .modal-header{padding:0 0 10px;border-bottom:0;border-shadow:none!important}#tshirt-design .modal-dialog .modal-content .modal-body{background-color:#f5f5f5;padding:0}#tshirt-design header{border-bottom:1px solid #ccc;background-color:#ddd}#tshirt-design header ul.nav{padding-left:0;list-style:none}#tshirt-design header ul.nav li{float:left;padding:8px 26px;border-right:1px solid #ccc;font-size:14px;cursor:pointer}#tshirt-design header ul.nav li.active,#tshirt-design header ul.nav li:hover{background-color:red;color:#fff}#tshirt-design header ul.nav li.active i.fa,#tshirt-design header ul.nav li:hover i.fa{color:#fff}#tshirt-design header ul.nav li i.fa{color:#fe070f;font-size:20px;margin-right:10px}#tshirt-design header .action button{padding:2px 10px;margin:6px 10px}#tshirt-design header .action button:hover{background-color:red;color:#fff}.aside .box-design-option{list-style:none;padding-left:0;margin-top:10px}.aside .box-design-option li{border:1px solid #cdcdcd;position:relative;cursor:pointer}.aside .box-design-option li .hover{background-color:#fddad4;opacity:.6;position:absolute;width:100%;height:100%;display:none}.aside .box-design-option li:hover .hover{display:block}.aside .box-design-option li .title{background:url(../images/bg1.png) repeat #cdcdcd;padding:3px 10px}.aside .box-design-option li .title i.fa{color:#000}.aside .box-design-option li .content i.fa{font-size:30px;color:#fe070f;margin:8px 0}.aside .box-design-option li .content .des{padding:3px 10px 3px 0}.aside #choice-illustration li .content{padding:10px}.aside #choice-illustration li .content select{width:100%}.aside #choice-illustration li .content .illustration-list{width:100%;border:#bbb solid 1px;background:#FFF;margin-top:5px}.aside #choice-illustration li .content .illustration-list .illstration-item{height:60px;overflow:hidden;float:left;margin-left:6px;margin-top:5px;margin-bottom:5px;padding:2px;background:#e2e2e2;border:solid 2px #d7d7d7;cursor:pointer}.aside #choice-illustration li .content .illustration-list .illstration-item:hover{outline:2px solid #ed1d24}.aside #choice-illustration li .content .illustration-list .illstration-item img{width:50px;cursor:pointer}.aside #choice-illustration li .content .color-patterns{width:100%;border:#bbb solid 1px;background:#FFF;margin-top:5px}.aside #choice-illustration li .content .color-patterns .color-pattern-item{height:20px;float:left;margin-left:4px;margin-top:2px;width:20px;cursor:pointer;border:1px solid #ddd}.aside #choice-illustration li .content .color-patterns .color-pattern-item:hover{outline:1px solid #ed1d24}.tshirt-design-container{position:relative}.tshirt-design-container .design-content{padding:10px 30px 10px 15px}.tshirt-design-container .design-content .content{width:100%;min-height:650px;background-color:#f0efea;padding:40px;height:100%}.tshirt-design-container .design-content .content .selection-design{border:1px solid red;width:100%;height:620px}.tshirt-design-container .agree-design{position:absolute;right:-16px;top:40%}.tshirt-design-container .trash-design{position:absolute;right:5px;bottom:0}footer{background-color:#333}footer ul.nav-footer{padding-left:0;list-style:none}footer ul.nav-footer li{float:left;padding:3px 10px;border-right:1px dotted #fff}footer ul.nav-footer li a{color:#fff;font-size:11px} File was deleted
dist/views/design_part/illustration.html
Diff comments   View file @ 682a3b1
1 <li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->イラスト・イメージ選択</div><div class="content clearfix"><select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration)" data-placeholder="Choose category" style="width: 100%"><option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</select><div class="illustration-list"><div class="illstration-item" ng-repeat="item in currentIllustrationCate.list" ng-click="insertSvg(item)"><img ng-src="{{item.path}}"></div><div class="clearfix"></div></div></div></li><li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->カラー変更<div class="pull-right">元の色に戻す</div></div><div class="content clearfix"><div class="color-patterns"><div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}"></div><div class="clearfix"></div></div></div></li><li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->重ね順変更</div><div class="content clearfix"></div></li> 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);currentIllustrationPage=1;" 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" ng-init="currentIllustrationPage=1;perIllustrationPage=16">
11 <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list | limitTo:perIllustrationPage:((currentIllustrationPage-1)*perIllustrationPage)" ng-click="insertSvg(item)">
12 <img ng-src="{{item.path}}"/>
13 </div>
14 <div class="clearfix"></div>
15 <div class="footer-bar">
16 <div class="pull-left footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage-1" ng-show="currentIllustrationPage > 1">< Back</div>
17 {{currentIllustrationPage}}/{{currentIllustrationCate.list.length/perIllustrationPage | number:0}}
18 <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < (currentIllustrationCate.list.length/perIllustrationPage|number:0)">Next ></div>
19 </div>
20 </div>
21 </div>
22 </li>
23 <li>
24 <div class="title">
25 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
26 カラー変更
27 <div class="pull-right">元の色に戻す</div>
28 </div>
29 <div class="content clearfix">
30 <div class="color-patterns">
31 <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">
32 </div>
33 <div class="clearfix"></div>
34 </div>
35 </div>
36 </li>
37 <li>
38 <div class="title">
39 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
40 重ね順変更
41 </div>
42 <div class="content clearfix">
43 <div class="col-xs-3 layer-item" ng-click="layerProcess(1)">
44 <img src="images/layer-icon-1.png"/>
45 <div>前面へ</div>
46 </div>
47 <div class="col-xs-3 layer-item" ng-click="layerProcess(2)">
48 <img src="images/layer-icon-2.png"/>
49 <div>背面へ</div>
50 </div>
51 <div class="col-xs-3 layer-item" ng-click="layerProcess(3)">
52 <img src="images/layer-icon-3.png"/>
53 <div>最前面へ</div>
54 </div>
55 <div class="col-xs-3 layer-item" ng-click="layerProcess(4)">
56 <img src="images/layer-icon-4.png"/>
57 <div>最前面へ</div>
58 </div>
59 </div>
60 </li>
dist/views/design_part/image.html
Diff comments   View file @ 682a3b1
1 <li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->イラスト・イメージ選択</div><div class="content clearfix"></div></li><li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->カラー変更<div class="pull-right">元の色に戻す</div></div><div class="content clearfix"></div></li><li><div class="title"><!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->重ね順変更</div><div class="content clearfix"></div></li> 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
8 </div>
9 </li>
10 <li>
11 <div class="title">
12 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
13 カラー変更
14 <div class="pull-right">元の色に戻す</div>
15 </div>
16 <div class="content clearfix">
17
18 </div>
19 </li>
20 <li>
21 <div class="title">
22 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
23 重ね順変更
24 </div>
25 <div class="content clearfix">
26
27 </div>
28 </li>
dist/views/design_part/text.html
Diff comments   View file @ 682a3b1
1 <li><div class="title"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Text</div><div class="content clearfix"><div><input type="text" class="form-control" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text"></div><div><ul><li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li></ul></div><div><div></div></div><div><label>Letter Spacing</label><div class="group"><i class="fa fa-minus-square" aria-hidden="true"></i> Letter Spacing <i class="fa fa-plus-square" aria-hidden="true"></i></div></div></div></li> 1 <li>
2 <div class="title">
3 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
4 Text
5 </div>
6 <div class="content clearfix">
7 <div>
8 <input type="text" class="form-control" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text">
9 </div>
10 <div>
11 <ul>
12 <li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li>
13 </ul>
14 </div>
15 <div>
16 <div></div>
17 </div>
18 <div>
19 <label>Letter Spacing</label>
20 <div class="group">
21 <i class="fa fa-minus-square" aria-hidden="true"></i> Letter Spacing <i class="fa fa-plus-square" aria-hidden="true"></i>
22 </div>
23 </div>
24 </div>
25 </li>
26
dist/views/main.html
Diff comments   View file @ 682a3b1
1 <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container"><div class="row"><header><div class="logo"><img src="images/logo_mobile_world.png" alt="Logo Mobile World"> MOBILE WORLD</div></header><nav class="clearfix"><div class="col-sm-12"><h2 class="pull-left">加工箇所を選択してデザインしてください。</h2><ul class="pull-right"><li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li><li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li><li class="action">デザインする</li></ul></div></nav><article class="clearfix"><aside class="col-sm-5"><div class="step"><div class="title">1. デザインを作る</div><div class="step-box"><div class="tshirt-design clearfix"><div class="icon"><img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt"></div><div class="name">背中背中 (28x22)</div><div class="action"><button class="red" ng-click="modalTShirtDesign()"><i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る</button></div></div></div></div><!-- BREAK DOWN--><div class="text-center break-down"><img src="images/bg_step_arrow.gif" alt="arrow"></div><!-- STEP 2--><div class="step"><div class="title">2.アイテムカラーを変更する</div><div class="step-box clearfix"><div class="tshirt-color"><ul class="choice-color clearfix"><li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''"><div ng-style="{'background-color' : color.code}"></div></li></ul><div class="color-name" ng-bind="tShirtColorName"></div><div class="view-more">在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></div></div></div></div><!-- BREAK DOWN--><div class="text-center break-down"><img src="images/bg_step_arrow.gif" alt="arrow"></div><!-- STEP 3--><div class="step"><div class="step-box clearfix"><div class="tshirt-saveorder"><div class="clearfix"><div class="action"><button class="white"><div class="text">このデザインを保存する</div><div class="arrow"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></div></button></div><div class="action"><button class="red"><div class="text">このデザインで注文する</div><div class="arrow clearfix"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></div></button></div></div><div class="notice">デザインを保存するには、ログインしてください</div></div></div><!-- BREAL LINE--><div class="text-center break-line"><hr></div><!-- STEP 4--><div class="step"><div class="title-notice">商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span></div><div class="step-box"><div class="change-design"><table><tr><td class="text-center">商品<td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）<td class="text-right"><button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button><tr><td width="10%" class="text-center">加工方法<td width="70%">シルク：胸中央 (27×27)<td width="20%" class="text-right"><button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button></table></div></div></div><!-- STEP 5- finish--><div class="step"><div class="finish-design"><button class="white">自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button></div></div></div></aside><section id="tshirt-content" class="col-sm-7 text-center"><div class="switch-border-design"><i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す</div><div class="tshirt-image"><img ng-src="{{ tShirtImg }}" alt=""></div><div class="tshirt-choice"><ul><li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''"><div>前</div><div class="image" ng-click="choiceTShirtBackFront('front')"><img ng-src="{{ tShirtImgFront }}" alt=""></div></li><li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''"><div>後</div><div class="image" ng-click="choiceTShirtBackFront('back')"><img ng-src="{{ tShirtImgBack }}" alt=""></div></li></ul></div></section></article><footer class="clearfix"><ul class="nav-footer"><li><a href="#">店舗検索</a></li><li><a href="#">お客様窓口</a></li><li><a href="#">企業情報</a></li><li><a href="#">採用情報</a></li><li><a href="#">プライバシーポリシー</a></li></ul></footer><!--MODAL CONTENT--><div ng-include="designFrameView"></div></div></div> 1 <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container">
2 <div class="row">
3 <header>
4 <div class="logo">
5 <img src="images/logo_mobile_world.png" alt="Logo Mobile World" />
6 MOBILE WORLD
7 </div>
8 </header>
9 <nav class="clearfix">
10 <div class="col-sm-12">
11 <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
12 <ul class="pull-right">
13 <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
14 <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
15 <li class="action">デザインする</li>
16 </ul>
17 </div>
18 </nav>
19 <article class="clearfix">
20 <aside class="col-sm-5">
21 <div class="step">
22 <div class="title">
23 1. デザインを作る
24 </div>
25 <div class="step-box">
26 <div class="tshirt-design clearfix">
27 <div class="icon">
28 <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" />
29 </div>
30 <div class="name">
31 背中背中 (28x22)
32 </div>
33 <div class="action">
34 <button class="red" ng-click="modalTShirtDesign()">
35 <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る
36 </button>
37 </div>
38 </div>
39 </div>
40 </div>
41
42 <!-- BREAK DOWN-->
43 <div class="text-center break-down">
44 <img src="images/bg_step_arrow.gif" alt="arrow" />
45 </div>
46
47 <!-- STEP 2-->
48 <div class="step">
49 <div class="title">
50 2.アイテムカラーを変更する
51 </div>
52 <div class="step-box clearfix">
53 <div class="tshirt-color">
54 <ul class="choice-color clearfix">
55 <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''">
56 <div ng-style="{'background-color' : color.code}"></div>
57 </li>
58 </ul>
59 <div class="color-name" ng-bind="tShirtColorName"></div>
60 <div class="view-more">
61 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
62 </div>
63 </div>
64 </div>
65 </div>
66
67 <!-- BREAK DOWN-->
68 <div class="text-center break-down">
69 <img src="images/bg_step_arrow.gif" alt="arrow" />
70 </div>
71
72 <!-- STEP 3-->
73 <div class="step">
74 <div class="step-box clearfix">
75 <div class="tshirt-saveorder">
76 <div class="clearfix">
77 <div class="action">
78 <button class="white">
79 <div class="text">
80 このデザインを保存する
81 </div>
82 <div class="arrow">
83 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
84 </div>
85 </button>
86 </div>
87 <div class="action">
88 <button class="red">
89 <div class="text">
90 このデザインで注文する
91 </div>
92 <div class="arrow clearfix">
93 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
94 </div>
95 </button>
96 </div>
97 </div>
98 <div class="notice">
99 デザインを保存するには、ログインしてください
100 </div>
101 </div>
102 </div>
103
104 <!-- BREAL LINE-->
105 <div class="text-center break-line">
106 <hr />
107 </div>
108
109 <!-- STEP 4-->
110 <div class="step">
111 <div class="title-notice">
112 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span>
113 </div>
114 <div class="step-box">
115 <div class="change-design">
116 <table>
117 <tr>
118 <td class="text-center">商品</td>
119 <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td>
120 <td class="text-right">
121 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
122 </td>
123 </tr>
124 <tr>
125 <td width="10%" class="text-center">加工方法</td>
126 <td width="70%">シルク：胸中央 (27×27)</td>
127 <td width="20%" class="text-right">
128 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
129 </td>
130 </tr>
131 </table>
132 </div>
133 </div>
134 </div>
135 <!-- STEP 5- finish-->
136 <div class="step">
137 <div class="finish-design">
138 <button class="white">
139 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
140 </button>
141 </div>
142
143 </div>
144 </div>
145 </aside>
146 <section id="tshirt-content" class="col-sm-7 text-center">
147 <div class="switch-border-design">
148 <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す
149 </div>
150 <div class="tshirt-image">
151 <img ng-src="{{ tShirtImg }}" alt="" />
152 </div>
153 <div class="tshirt-choice">
154 <ul>
155 <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''">
156 <div>前</div>
157 <div class="image" ng-click="choiceTShirtBackFront('front')">
158 <img ng-src="{{ tShirtImgFront }}" alt="" />
159 </div>
160
161 </li>
162 <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''">
163 <div>後</div>
164 <div class="image" ng-click="choiceTShirtBackFront('back')">
165 <img ng-src="{{ tShirtImgBack }}" alt="" />
166 </div>
167
168 </li>
169 </ul>
170 </div>
171 </section>
172 </article>
173 <footer class="clearfix">
174 <ul class="nav-footer">
175 <li><a href="#">店舗検索</a></li>
176 <li><a href="#">お客様窓口</a></li>
177 <li><a href="#">企業情報</a></li>
178 <li><a href="#">採用情報</a></li>
179 <li><a href="#">プライバシーポリシー</a></li>
180 </ul>
181 </footer>
182
183 <!--MODAL CONTENT-->
184 <div ng-include="designFrameView"></div>
185 </div>
186
187
188 </div>
189
dist/views/tshirt-design.html
Diff comments   View file @ 682a3b1
1 <!-- Modal --><div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button> <button class="black"><i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button></div><div class="modal-body"><header class="clearfix"><ul class="nav pull-left"><li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')"><i class="fa fa-jpy" aria-hidden="true"></i> 文字</li><li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')"><i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ</li><li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')"><i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真</li><li><i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去</li></ul><div class="action pull-right"><button class="white">アルバムを開く</button> <button class="white">アルバムに入れる</button></div></header><section class="tshirt-design-container clearfix"><div class="aside col-xs-4"><!-- Default--><ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault"></ul><!-- Illustration design--><ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration"></ul><!-- Custom image design--><ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage"></ul><!-- Text design--><ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText"></ul></div><div class="design-content col-xs-8"><div class="content" ng-style="{'background-color' : tShirtColorCode}"><canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas"></canvas></div><div class="agree-design"><img src="images/agree-design.png" alt="agree design"></div><div class="trash-design"><img src="images/trash.png" alt="trash design"></div></div></section></div></div></div></div> 1 <!-- Modal -->
2 <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl">
3
4 <div class="modal-dialog" role="document">
5 <div class="modal-content">
6 <div class="modal-header">
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>
9 </div>
10 <div class="modal-body">
11 <header class="clearfix">
12 <ul class="nav pull-left">
13 <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')">
14 <i class="fa fa-jpy" aria-hidden="true"></i> 文字
15 </li>
16 <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')">
17 <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ
18 </li>
19 <li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')">
20 <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真
21 </li>
22 <li>
23 <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去
24 </li>
25 </ul>
26 <div class="action pull-right">
27 <button class="white">
28 アルバムを開く
29 </button>
30 <button class="white">
31 アルバムに入れる
32 </button>
33 </div>
34 </header>
35 <section class="tshirt-design-container clearfix">
36 <div class="aside col-xs-4">
37 <!-- Default-->
38 <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault">
39 </ul>
40 <!-- Illustration design-->
41 <ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration">
42 </ul>
43 <!-- Custom image design-->
44 <ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage">
45 </ul>
46 <!-- Text design-->
47 <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText">
48 </ul>
49 </div>
50 <div class="design-content col-xs-8">
51 <div class="content" ng-style="{'background-color' : tShirtColorCode}">
52 <canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas">
53
54 </canvas>
55 </div>
56 <div class="agree-design">
57 <img src="images/agree-design.png" alt="agree design" />
58 </div>
59 <div class="trash-design">
60 <img src="images/trash.png" alt="trash design" />
61 </div>
62 </div>
63 </section>
64 </div>
65 </div>
66 </div>
67 </div>