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

Download as
Browse Code »

Commit 4ae9cc6345dbc166316b94bdae232f56b339a968

Authored by DANG
1 parent 7e14f17860
Exists in master and in 1 other branch develop

fix reponsive

Showing 5 changed files with 47 additions and 17 deletions Inline Diff

app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 4ae9cc6
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 //'use strict';
3 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) { 2 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) {
4
5 var canvas = new fabric.Canvas('main-design-container'); 3 var canvas = new fabric.Canvas('main-design-container');
6 //Set width and height canvas 4 //Set width and height canvas
7 function setSizeCanvas() { 5 function setSizeCanvas() {
8 console.log($rootScope.placeTshirt); 6 if(typeof $rootScope.placeTshirt.place == 'undefined')
7 return;
8
9 var _modalWidth = $('.modal-dialog').width(); 9 var _modalWidth = $('.modal-dialog').width();
10 var _windowWidth = window.innerWidth; 10 var _windowWidth = window.innerWidth;
11 if(_windowWidth > 762) { 11 var place = $rootScope.placeTshirt.place;
12 var _contentCanvasWidth = _modalWidth*8/12 - 100; 12
13 } else { 13 switch (place) {
14 var _contentCanvasWidth = _windowWidth-70; 14 case 't_shirt_p_1' :
15 $scope.designCanvasClass = 'design-content-t_shirt_p_1';
16 if(_windowWidth > 762) {
17 var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
18 var _contentCanvasHeight = _contentCanvasWidth;
19 } else {
20 var _contentCanvasWidth = _windowWidth-70;
21 var _contentCanvasHeight = _contentCanvasWidth;
22 }
23 break;
24 case 't_shirt_p_2' :
25 $scope.designCanvasClass = 'design-content-t_shirt_p_2';
26 if(_windowWidth > 762) {
27 var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
28 var _contentCanvasHeight = (_modalWidth*8/12)/2.2;
29
30 } else {
31 var _contentCanvasWidth = _windowWidth-70;
32 var _contentCanvasHeight = (_windowWidth)/2.5;
33 }
34 break;
35 default:
36 break;
15 } 37 }
16 38
17 canvas.setWidth(_contentCanvasWidth); 39 canvas.setWidth(_contentCanvasWidth);
18 canvas.setHeight(650); 40 canvas.setHeight(_contentCanvasHeight);
19 } 41 }
20 setSizeCanvas(); 42 setSizeCanvas();
21 //Window resize event 43 //Window resize event
22 $(window).resize(function () { 44 $(window).resize(function () {
23 setSizeCanvas(); 45 setSizeCanvas();
24 }); 46 });
25 47
26 //Custom control 48 //Custom control
27 fabric.Object.prototype.transparentCorners = true; 49 fabric.Object.prototype.transparentCorners = true;
28 fabric.Object.prototype.hasRotatingPoint = false; 50 fabric.Object.prototype.hasRotatingPoint = false;
29 51
30 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false}; 52 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
31 for(key in ctrVisible) { 53 for(key in ctrVisible) {
32 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]); 54 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
33 } 55 }
34 56
35 fabric.Object.prototype.customiseCornerIcons({ 57 fabric.Object.prototype.customiseCornerIcons({
36 settings: { 58 settings: {
37 borderColor: '#0000ff', 59 borderColor: '#0000ff',
38 cornerSize: 25, 60 cornerSize: 25,
39 cornerShape: 'circle', 61 cornerShape: 'circle',
40 cornerBackgroundColor: '#0171b4', 62 cornerBackgroundColor: '#0171b4',
41 cornerPadding: 6 63 cornerPadding: 6
42 }, 64 },
43 mt: { 65 mt: {
44 icon: 'images/control-icon/ok.png' 66 icon: 'images/control-icon/ok.png'
45 }, 67 },
46 br: { 68 br: {
47 icon: 'images/control-icon/resize.png' 69 icon: 'images/control-icon/resize.png'
48 }, 70 },
49 tr: { 71 tr: {
50 icon: 'images/control-icon/rotate.png' 72 icon: 'images/control-icon/rotate.png'
51 } 73 }
52 }); 74 });
53 75
54 fabric.Canvas.prototype.customiseControls({ 76 fabric.Canvas.prototype.customiseControls({
55 mt: { 77 mt: {
56 cursor: 'pointer', 78 cursor: 'pointer',
57 action: function(e, target) { 79 action: function(e, target) {
58 fabric.Object.prototype.selectable = false; 80 fabric.Object.prototype.selectable = false;
59 canvas.deactivateAll(); 81 canvas.deactivateAll();
60 delete currentObj; 82 delete currentObj;
61 $scope.designTextValue = ''; 83 $scope.designTextValue = '';
62 $timeout(function(){ 84 $timeout(function(){
63 fabric.Object.prototype.selectable = true; 85 fabric.Object.prototype.selectable = true;
64 },20); 86 },20);
65 } 87 }
66 }, 88 },
67 br: { 89 br: {
68 90
69 }, 91 },
70 tr: { 92 tr: {
71 action: 'rotate', 93 action: 'rotate',
72 cursor: 'crosshair' 94 cursor: 'crosshair'
73 } 95 }
74 }); 96 });
75 97
76 canvas.on({ 98 canvas.on({
77 'object:added' : onIllustrationAdded, 99 'object:added' : onIllustrationAdded,
78 'object:moving' : onIllustrationMoving, 100 'object:moving' : onIllustrationMoving,
79 'object:scaling' : onIllustrationChange, 101 'object:scaling' : onIllustrationChange,
80 'object:rotating' : onIllustrationChange, 102 'object:rotating' : onIllustrationChange,
81 'object:selected' : onObjectSelected, 103 'object:selected' : onObjectSelected,
82 'object:modified' : onIllustrationModifield, 104 'object:modified' : onIllustrationModifield,
83 'selection:cleared' : onObjectOut, 105 'selection:cleared' : onObjectOut,
84 }); 106 });
85 107
86 var currentObj; 108 var currentObj;
87 var listObj = []; 109 var listObj = [];
88 var stateObj = []; 110 var stateObj = [];
89 var indexCurr = 0; 111 var indexCurr = 0;
90 var indexCurr2 = 0; 112 var indexCurr2 = 0;
91 var actionObj = false; 113 var actionObj = false;
92 var refreshObj = true; 114 var refreshObj = true;
93 var spacingNum = 0; 115 var spacingNum = 0;
94 $scope.itemFont = 0; 116 $scope.itemFont = 0;
95 117
96 $scope.showDesignTab = function(tab){ 118 $scope.showDesignTab = function(tab){
97 canvas.deactivateAll().renderAll(); 119 canvas.deactivateAll().renderAll();
98 $rootScope.isShowLeftPanel = tab; 120 $rootScope.isShowLeftPanel = tab;
99 switch (tab) { 121 switch (tab) {
100 case 'illustration': { 122 case 'illustration': {
101 $scope.IllustrationList = $illustration.getAll(); 123 $scope.IllustrationList = $illustration.getAll();
102 $rootScope.outputImage = false; 124 $rootScope.outputImage = false;
103 $scope.illustrationSelectConfig = { 125 $scope.illustrationSelectConfig = {
104 allowClear:true 126 allowClear:true
105 }; 127 };
106 $timeout(function(){ 128 $timeout(function(){
107 $('.illstration-item').tooltip({ 129 $('.illstration-item').tooltip({
108 animated: 'fade', 130 animated: 'fade',
109 placement: 'bottom', 131 placement: 'bottom',
110 html: true 132 html: true
111 }); 133 });
112 },1000); 134 },1000);
113 break; 135 break;
114 } 136 }
115 case 'text': { 137 case 'text': {
116 break; 138 break;
117 } 139 }
118 } 140 }
119 }; 141 };
120 $scope.showDesignTab('default'); 142 $scope.showDesignTab('default');
121 143
122 144
123 function onIllustrationAdded(options){ 145 function onIllustrationAdded(options){
124 var object = options.target; 146 var object = options.target;
125 147
126 if (actionObj === true) { 148 if (actionObj === true) {
127 stateObj = [stateObj[indexCurr2]]; 149 stateObj = [stateObj[indexCurr2]];
128 listObj = [listObj[indexCurr2]]; 150 listObj = [listObj[indexCurr2]];
129 151
130 actionObj = false; 152 actionObj = false;
131 console.log(stateObj); 153 console.log(stateObj);
132 indexCurr = 1; 154 indexCurr = 1;
133 } 155 }
134 object.saveState(); 156 object.saveState();
135 157
136 console.log(object.originalState); 158 console.log(object.originalState);
137 stateObj[indexCurr] = JSON.stringify(object.originalState); 159 stateObj[indexCurr] = JSON.stringify(object.originalState);
138 listObj[indexCurr] = object; 160 listObj[indexCurr] = object;
139 indexCurr++; 161 indexCurr++;
140 indexCurr2 = indexCurr - 1; 162 indexCurr2 = indexCurr - 1;
141 refreshObj = true; 163 refreshObj = true;
142 } 164 }
143 165
144 function onIllustrationModifield(options){ 166 function onIllustrationModifield(options){
145 $('.object-border').hide(); 167 $('.object-border').hide();
146 // 168 //
147 var pointer = canvas.getPointer(options.e); 169 var pointer = canvas.getPointer(options.e);
148 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 170 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
149 canvas.getActiveObject().remove(); 171 canvas.getActiveObject().remove();
150 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 172 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
151 return; 173 return;
152 } 174 }
153 175
154 // 176 //
155 var objOffset = canvas.getActiveObject().getBoundingRect(); 177 var objOffset = canvas.getActiveObject().getBoundingRect();
156 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20; 178 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
157 //console.log(objOffset,canvas.height,canvas.width); 179 //console.log(objOffset,canvas.height,canvas.width);
158 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 180 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
159 if (confirm('削除してもよろしいですか')){ 181 if (confirm('削除してもよろしいですか')){
160 canvas.getActiveObject().remove(); 182 canvas.getActiveObject().remove();
161 }else{ 183 }else{
162 undoCanvas(); 184 undoCanvas();
163 return; 185 return;
164 } 186 }
165 } 187 }
166 188
167 var object = options.target; 189 var object = options.target;
168 if (actionObj === true) { 190 if (actionObj === true) {
169 stateObj = [stateObj[indexCurr2]]; 191 stateObj = [stateObj[indexCurr2]];
170 listObj = [listObj[indexCurr2]]; 192 listObj = [listObj[indexCurr2]];
171 193
172 actionObj = false; 194 actionObj = false;
173 console.log(stateObj); 195 console.log(stateObj);
174 indexCurr = 1; 196 indexCurr = 1;
175 } 197 }
176 198
177 object.saveState(); 199 object.saveState();
178 200
179 stateObj[indexCurr] = JSON.stringify(object.originalState); 201 stateObj[indexCurr] = JSON.stringify(object.originalState);
180 listObj[indexCurr] = object; 202 listObj[indexCurr] = object;
181 indexCurr++; 203 indexCurr++;
182 indexCurr2 = indexCurr - 1; 204 indexCurr2 = indexCurr - 1;
183 refreshObj = true; 205 refreshObj = true;
184 } 206 }
185 207
186 function onIllustrationChange(options) { 208 function onIllustrationChange(options) {
187 209
188 } 210 }
189 211
190 function onIllustrationMoving(options) { 212 function onIllustrationMoving(options) {
191 var object = options.target; 213 var object = options.target;
192 var pointer = canvas.getPointer(options.e); 214 var pointer = canvas.getPointer(options.e);
193 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 215 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
194 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'}); 216 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
195 }else{ 217 }else{
196 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 218 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
197 } 219 }
198 220
199 console.log(object.oCoords,object.originalState); 221 console.log(object.oCoords,object.originalState);
200 object.setCoords(); 222 object.setCoords();
201 var Coords = object.oCoords; 223 var Coords = object.oCoords;
202 var diffX = 55, diffY=50; 224 var diffX = 55, diffY=50;
203 var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2; 225 var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2;
204 var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2; 226 var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2;
205 $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 227 $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
206 $('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX}); 228 $('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX});
207 $('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 229 $('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
208 $('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX}); 230 $('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX});
209 $('.object-border').css({ 231 $('.object-border').css({
210 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */ 232 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */
211 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */ 233 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */
212 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */ 234 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */
213 }); 235 });
214 $('.object-border').show(); 236 $('.object-border').show();
215 } 237 }
216 238
217 function onObjectOut() { 239 function onObjectOut() {
218 delete currentObj; 240 delete currentObj;
219 $scope.designTextValue = ''; 241 $scope.designTextValue = '';
220 } 242 }
221 243
222 function undoCanvas() { 244 function undoCanvas() {
223 if (indexCurr <= 0) { 245 if (indexCurr <= 0) {
224 indexCurr = 0; 246 indexCurr = 0;
225 return; 247 return;
226 } 248 }
227 249
228 if (refreshObj === true) { 250 if (refreshObj === true) {
229 indexCurr--; 251 indexCurr--;
230 refreshObj = false; 252 refreshObj = false;
231 } 253 }
232 254
233 console.log('undo'); 255 console.log('undo');
234 256
235 indexCurr2 = indexCurr - 1; 257 indexCurr2 = indexCurr - 1;
236 currentObj = listObj[indexCurr2]; 258 currentObj = listObj[indexCurr2];
237 if (currentObj){ 259 if (currentObj){
238 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 260 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
239 } 261 }
240 262
241 indexCurr--; 263 indexCurr--;
242 currentObj.setCoords(); 264 currentObj.setCoords();
243 canvas.renderAll(); 265 canvas.renderAll();
244 actionObj = true; 266 actionObj = true;
245 } 267 }
246 268
247 function redoCanvas() { 269 function redoCanvas() {
248 actionObj = true; 270 actionObj = true;
249 if (indexCurr >= stateObj.length - 1) { 271 if (indexCurr >= stateObj.length - 1) {
250 return; 272 return;
251 } 273 }
252 274
253 console.log('redo'); 275 console.log('redo');
254 276
255 indexCurr2 = indexCurr + 1; 277 indexCurr2 = indexCurr + 1;
256 currentObj = listObj[indexCurr2]; 278 currentObj = listObj[indexCurr2];
257 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 279 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
258 280
259 indexCurr++; 281 indexCurr++;
260 currentObj.setCoords(); 282 currentObj.setCoords();
261 canvas.renderAll(); 283 canvas.renderAll();
262 } 284 }
263 285
264 $scope.canvasClearAll = function(){ 286 $scope.canvasClearAll = function(){
265 if (confirm('配置されたすべての文字や画像を消去します')){ 287 if (confirm('配置されたすべての文字や画像を消去します')){
266 canvas.clear(); 288 canvas.clear();
267 } 289 }
268 } 290 }
269 291
270 function onObjectSelected(options) { 292 function onObjectSelected(options) {
271 var currentObj = options.target; 293 var currentObj = options.target;
272 294
273 $scope.typeObject = currentObj.type; 295 $scope.typeObject = currentObj.type;
274 switch ($scope.typeObject) { 296 switch ($scope.typeObject) {
275 case 'i-text' : 297 case 'i-text' :
276 $rootScope.isShowLeftPanel = 'text'; 298 $rootScope.isShowLeftPanel = 'text';
277 var text = currentObj.text; 299 var text = currentObj.text;
278 if(text != '') { 300 if(text != '') {
279 $scope.designText = text; 301 $scope.designText = text;
280 $scope.designTextValue = text; 302 $scope.designTextValue = text;
281 } 303 }
282 break; 304 break;
283 305
284 case 'path-group' : 306 case 'path-group' :
285 $rootScope.isShowLeftPanel = 'illustration'; 307 $rootScope.isShowLeftPanel = 'illustration';
286 break; 308 break;
287 309
288 case 'image': 310 case 'image':
289 $rootScope.isShowLeftPanel = 'image'; 311 $rootScope.isShowLeftPanel = 'image';
290 break; 312 break;
291 313
292 default : 314 default :
293 $rootScope.isShowLeftPanel = 'default'; 315 $rootScope.isShowLeftPanel = 'default';
294 break; 316 break;
295 } 317 }
296 $rootScope.safeApply(); 318 $rootScope.safeApply();
297 } 319 }
298 320
299 // Illustration process 321 // Illustration process
300 $scope.changeIllustrationCategory = function(currentIllustration){ 322 $scope.changeIllustrationCategory = function(currentIllustration){
301 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 323 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
302 }; 324 };
303 325
304 $scope.insertSvg = function(item){ 326 $scope.insertSvg = function(item){
305 fabric.loadSVGFromURL(item.path, function(objects, options) { 327 fabric.loadSVGFromURL(item.path, function(objects, options) {
306 var shape = fabric.util.groupSVGElements(objects, options); 328 var shape = fabric.util.groupSVGElements(objects, options);
307 canvas.add(shape.scale(0.6)); 329 canvas.add(shape.scale(0.6));
308 shape.set({ left: 150, top: 200 }).setCoords(); 330 shape.set({ left: 150, top: 200 }).setCoords();
309 canvas.renderAll(); 331 canvas.renderAll();
310 canvas.setActiveObject(shape); 332 canvas.setActiveObject(shape);
311 }); 333 });
312 }; 334 };
313 335
314 // color pattern 336 // color pattern
315 $scope.listColorPatterns = [ 337 $scope.listColorPatterns = [
316 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 338 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
317 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 339 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
318 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 340 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
319 '#333333' 341 '#333333'
320 ]; 342 ];
321 343
322 $scope.changeColorPattern = function(color){ 344 $scope.changeColorPattern = function(color){
323 var obj = canvas.getActiveObject(); 345 var obj = canvas.getActiveObject();
324 if (!color){ 346 if (!color){
325 color = 'none'; 347 color = 'none';
326 } 348 }
327 if (obj instanceof fabric.PathGroup) { 349 if (obj instanceof fabric.PathGroup) {
328 obj.getObjects().forEach(function(o) { 350 obj.getObjects().forEach(function(o) {
329 o.fill = color; 351 o.fill = color;
330 }); 352 });
331 } 353 }
332 else { 354 else {
333 obj.fill = color; 355 obj.fill = color;
334 } 356 }
335 canvas.renderAll(); 357 canvas.renderAll();
336 }; 358 };
337 359
338 //Font 360 //Font
339 $scope.listFontFamily = [ 361 $scope.listFontFamily = [
340 { 362 {
341 name : 'GN Aki iro Sesami Cookies', 363 name : 'GN Aki iro Sesami Cookies',
342 slug : 'gn_aki_iro_sesami_cookies', 364 slug : 'gn_aki_iro_sesami_cookies',
343 }, 365 },
344 { 366 {
345 name : 'GN-Fuyu-iro_Script_Bold', 367 name : 'GN-Fuyu-iro_Script_Bold',
346 slug : 'gn_fuyu_iro_script_bold' 368 slug : 'gn_fuyu_iro_script_bold'
347 }, 369 },
348 { 370 {
349 name : 'GN Killgothic U Kanana', 371 name : 'GN Killgothic U Kanana',
350 slug : 'gn_killgothic_u_kanana' 372 slug : 'gn_killgothic_u_kanana'
351 }, 373 },
352 { 374 {
353 name : 'GN-Kin-iro_Alphabet_Cookies', 375 name : 'GN-Kin-iro_Alphabet_Cookies',
354 slug : 'gn_kin_iro_alphabet_cookies' 376 slug : 'gn_kin_iro_alphabet_cookies'
355 377
356 }, 378 },
357 { 379 {
358 name : 'GN-Kin-iro_SansSerif', 380 name : 'GN-Kin-iro_SansSerif',
359 slug : 'gn_kin_iro_sansserif' 381 slug : 'gn_kin_iro_sansserif'
360 382
361 }, 383 },
362 { 384 {
363 name : 'GN-Koharuiro_Sunray', 385 name : 'GN-Koharuiro_Sunray',
364 slug : 'gn_koharuiro_sunray' 386 slug : 'gn_koharuiro_sunray'
365 387
366 }, 388 },
367 { 389 {
368 name : 'GN-Kyu-pin', 390 name : 'GN-Kyu-pin',
369 slug : 'gn_kyu_pin' 391 slug : 'gn_kyu_pin'
370 }, 392 },
371 { 393 {
372 name : 'gn_natsu_iro_schedule', 394 name : 'gn_natsu_iro_schedule',
373 slug : 'gn_natsu_iro_schedule' 395 slug : 'gn_natsu_iro_schedule'
374 396
375 }, 397 },
376 { 398 {
377 name : 'gnkana_kiniro_sansserif_l', 399 name : 'gnkana_kiniro_sansserif_l',
378 slug : 'gnkana_kiniro_sansserif_l' 400 slug : 'gnkana_kiniro_sansserif_l'
379 401
380 }, 402 },
381 { 403 {
382 name : 'gnkana_kiniro_sansserif_st', 404 name : 'gnkana_kiniro_sansserif_st',
383 slug : 'gnkana_kiniro_sansserif_st' 405 slug : 'gnkana_kiniro_sansserif_st'
384 }, 406 },
385 { 407 {
386 name : 'gnkana_kon_iro_nightfall', 408 name : 'gnkana_kon_iro_nightfall',
387 slug : 'gnkana_kon_iro_nightfall' 409 slug : 'gnkana_kon_iro_nightfall'
388 410
389 }, 411 },
390 { 412 {
391 name : 'ms_gothic', 413 name : 'ms_gothic',
392 slug : 'ms_gothic' 414 slug : 'ms_gothic'
393 415
394 }, 416 },
395 { 417 {
396 name : 'msmincho', 418 name : 'msmincho',
397 slug : 'msmincho' 419 slug : 'msmincho'
398 }, 420 },
399 { 421 {
400 name : 'ufonts_com_ms_pgothic', 422 name : 'ufonts_com_ms_pgothic',
401 slug : 'ufonts_com_ms_pgothic' 423 slug : 'ufonts_com_ms_pgothic'
402 } 424 }
403 ]; 425 ];
404 426
405 // layer process 427 // layer process
406 $scope.layerProcess = function(mode) { 428 $scope.layerProcess = function(mode) {
407 // console.log('layerProcess'); 429 // console.log('layerProcess');
408 var activeObject = canvas.getActiveObject(); 430 var activeObject = canvas.getActiveObject();
409 431
410 if (activeObject){ 432 if (activeObject){
411 switch (mode) { 433 switch (mode) {
412 case 1: 434 case 1:
413 activeObject.bringForward(); 435 activeObject.bringForward();
414 break; 436 break;
415 case 2: 437 case 2:
416 activeObject.sendBackwards(); 438 activeObject.sendBackwards();
417 break; 439 break;
418 case 3: 440 case 3:
419 activeObject.bringToFront(); 441 activeObject.bringToFront();
420 break; 442 break;
421 case 4: 443 case 4:
422 activeObject.sendToBack(); 444 activeObject.sendToBack();
423 break; 445 break;
424 } 446 }
425 canvas.deactivateAll().renderAll(); 447 canvas.deactivateAll().renderAll();
426 } 448 }
427 }; 449 };
428 450
429 $scope.focusInputText = function(text) { 451 $scope.focusInputText = function(text) {
430 currentObj = canvas.getActiveObject(); 452 currentObj = canvas.getActiveObject();
431 if(typeof currentObj == 'undefined' || currentObj == null) { 453 if(typeof currentObj == 'undefined' || currentObj == null) {
432 $scope.iText = new fabric.IText('', { 454 $scope.iText = new fabric.IText('', {
433 left: 150, 455 left: 150,
434 top: 200, 456 top: 200,
435 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 457 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
436 fontWeight: 'normal', 458 fontWeight: 'normal',
437 textAlign: 'center', 459 textAlign: 'center',
438 fontSize: 28, 460 fontSize: 28,
439 fill: 'black', 461 fill: 'black',
440 editable: false 462 editable: false
441 }); 463 });
442 } else { 464 } else {
443 if(currentObj.type != 'i-text') { 465 if(currentObj.type != 'i-text') {
444 $scope.iText = new fabric.IText('', { 466 $scope.iText = new fabric.IText('', {
445 left: 150, 467 left: 150,
446 top: 200, 468 top: 200,
447 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 469 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
448 fontWeight: 'normal', 470 fontWeight: 'normal',
449 textAlign: 'center', 471 textAlign: 'center',
450 fontSize: 28, 472 fontSize: 28,
451 fill: 'black', 473 fill: 'black',
452 editable: false 474 editable: false
453 }); 475 });
454 } else{ 476 } else{
455 $scope.iText = currentObj; 477 $scope.iText = currentObj;
456 } 478 }
457 } 479 }
458 }; 480 };
459 481
460 //Design text 482 //Design text
461 $scope.inputText = function(e) { 483 $scope.inputText = function(e) {
462 if(typeof $scope.iText != "undefined") { 484 if(typeof $scope.iText != "undefined") {
463 var iText = $scope.iText; 485 var iText = $scope.iText;
464 iText.text = e; 486 iText.text = e;
465 canvas.add(iText); 487 canvas.add(iText);
466 canvas.renderAll(); 488 canvas.renderAll();
467 canvas.setActiveObject(iText); 489 canvas.setActiveObject(iText);
468 } 490 }
469 }; 491 };
470 $scope.setFontFamily = function(font,index) { 492 $scope.setFontFamily = function(font,index) {
471 $scope.itemFont = index; 493 $scope.itemFont = index;
472 if(canvas.getActiveObject()) { 494 if(canvas.getActiveObject()) {
473 var currentObj = canvas.getActiveObject(); 495 var currentObj = canvas.getActiveObject();
474 if(currentObj.type == 'i-text') { 496 if(currentObj.type == 'i-text') {
475 currentObj.set('fontFamily', font); 497 currentObj.set('fontFamily', font);
476 canvas.renderAll(); 498 canvas.renderAll();
477 canvas.setActiveObject(currentObj); 499 canvas.setActiveObject(currentObj);
478 } 500 }
479 501
480 } 502 }
481 }; 503 };
482 //Set letter spacing text 504 //Set letter spacing text
483 $scope.setLetterSpacingText = function(e) { 505 $scope.setLetterSpacingText = function(e) {
484 if(canvas.getActiveObject()) { 506 if(canvas.getActiveObject()) {
485 var currentObj = canvas.getActiveObject(); 507 var currentObj = canvas.getActiveObject();
486 if(currentObj.type == 'i-text') { 508 if(currentObj.type == 'i-text') {
487 if(e == 'plus') 509 if(e == 'plus')
488 spacingNum = spacingNum + 30; 510 spacingNum = spacingNum + 30;
489 else if (spacingNum >= -30){ 511 else if (spacingNum >= -30){
490 spacingNum = spacingNum - 30; 512 spacingNum = spacingNum - 30;
491 } 513 }
492 if(e == 'default') 514 if(e == 'default')
493 spacingNum = 0; 515 spacingNum = 0;
494 516
495 currentObj.set('charSpacing', spacingNum); 517 currentObj.set('charSpacing', spacingNum);
496 canvas.renderAll(); 518 canvas.renderAll();
497 canvas.setActiveObject(currentObj); 519 canvas.setActiveObject(currentObj);
498 } 520 }
499 } 521 }
500 }; 522 };
501 523
502 524
503 /**** process insert image */ 525 /**** process insert image */
504 if (typeof($window.localStorage.recentImages) != 'undefined'){ 526 if (typeof($window.localStorage.recentImages) != 'undefined'){
505 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 527 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
506 }else{ 528 }else{
507 $scope.recentImages = {}; 529 $scope.recentImages = {};
508 } 530 }
509 531
510 var addToRecentImage = function(name, data){ 532 var addToRecentImage = function(name, data){
511 if (typeof($window.localStorage.recentImages) != 'undefined'){ 533 if (typeof($window.localStorage.recentImages) != 'undefined'){
512 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 534 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
513 }else{ 535 }else{
514 $scope.recentImages = {}; 536 $scope.recentImages = {};
515 } 537 }
516 538
517 if (typeof($scope.recentImages[name]) == 'undefined'){ 539 if (typeof($scope.recentImages[name]) == 'undefined'){
518 var ii=0; 540 var ii=0;
519 var II = 0; 541 var II = 0;
520 for(var item in $scope.recentImages){ 542 for(var item in $scope.recentImages){
521 if (II==0){ 543 if (II==0){
522 II = item; 544 II = item;
523 } 545 }
524 ii++; 546 ii++;
525 } 547 }
526 if (ii>16 && II!=0){ 548 if (ii>16 && II!=0){
527 delete $scope.recentImages[II]; 549 delete $scope.recentImages[II];
528 } 550 }
529 $scope.recentImages[name] = data; 551 $scope.recentImages[name] = data;
530 $window.localStorage.recentImages = JSON.stringify($scope.recentImages); 552 $window.localStorage.recentImages = JSON.stringify($scope.recentImages);
531 } 553 }
532 } 554 }
533 $scope.chooseImage = function(e){//console.log(e); 555 $scope.chooseImage = function(e){//console.log(e);
534 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){ 556 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
535 alert('アップロードできませんでした'); 557 alert('アップロードできませんでした');
536 return; 558 return;
537 } 559 }
538 var reader = new FileReader(); 560 var reader = new FileReader();
539 reader.onload = function (event) { 561 reader.onload = function (event) {
540 addToRecentImage ($('#imgLoader').val(), event.target.result); 562 addToRecentImage ($('#imgLoader').val(), event.target.result);
541 var imgObj = new Image();//console.log($('#imgLoader').val()); 563 var imgObj = new Image();//console.log($('#imgLoader').val());
542 imgObj.src = event.target.result; 564 imgObj.src = event.target.result;
543 imgObj.onload = function () { 565 imgObj.onload = function () {
544 // start fabricJS stuff 566 // start fabricJS stuff
545 567
546 var image = new fabric.Image(imgObj); 568 var image = new fabric.Image(imgObj);
547 image.set({ 569 image.set({
548 left: 50, 570 left: 50,
549 top: 50 571 top: 50
550 }); 572 });
551 //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 573 //image.scale(getRandomNum(0.1, 0.25)).setCoords();
552 image.scaleToWidth(200); 574 image.scaleToWidth(200);
553 canvas.add(image); 575 canvas.add(image);
554 } 576 }
555 } 577 }
556 reader.readAsDataURL(e.target.files[0]); 578 reader.readAsDataURL(e.target.files[0]);
557 } 579 }
558 580
559 $scope.insertRecentImage = function(data){ 581 $scope.insertRecentImage = function(data){
560 var imgObj = new Image(); 582 var imgObj = new Image();
561 imgObj.src = data; 583 imgObj.src = data;
562 imgObj.onload = function () { 584 imgObj.onload = function () {
563 // start fabricJS stuff 585 // start fabricJS stuff
564 586
565 var image = new fabric.Image(imgObj); 587 var image = new fabric.Image(imgObj);
566 image.set({ 588 image.set({
567 left: 50, 589 left: 50,
568 top: 50 590 top: 50
569 }); 591 });
570 image.scaleToWidth(200); 592 image.scaleToWidth(200);
571 canvas.add(image); 593 canvas.add(image);
572 } 594 }
573 } 595 }
574 596
575 //Traslation text 597 //Traslation text
576 $scope.rotateText = function(style) { 598 $scope.rotateText = function(style) {
577 if(canvas.getActiveObject()) { 599 if(canvas.getActiveObject()) {
578 var currentObj = canvas.getActiveObject(); 600 var currentObj = canvas.getActiveObject();
579 if(currentObj.type == 'i-text') { 601 if(currentObj.type == 'i-text') {
580 currentObj.set('rotate', Math.PI / 4); 602 currentObj.set('rotate', Math.PI / 4);
581 canvas.renderAll(); 603 canvas.renderAll();
582 canvas.setActiveObject(currentObj); 604 canvas.setActiveObject(currentObj);
583 } 605 }
584 } 606 }
585 }; 607 };
586 608
587 609
588 /* Process output */ 610 /* Process output */
589 $scope.outputDesign = function(){ 611 $scope.outputDesign = function(){
590 $rootScope.outputImage = canvas.toDataURL('png'); 612 $rootScope.outputImage = canvas.toDataURL('png');
591 // console.log(); 613 // console.log();
592 $('#tshirt-design').modal('hide'); 614 $('#tshirt-design').modal('hide');
593 } 615 }
594 }); 616 });
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 @import "placedesign.css"; 4 @import "placedesign.css";
5 html{ 5 html{
6 height:100%; 6 height:100%;
7 width:100%; 7 width:100%;
8 } 8 }
9 body { 9 body {
10 font-family: 'Hiragino Kaku Gothic Pro', sans-serif; 10 font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
11 height:100%; 11 height:100%;
12 width:100%; 12 width:100%;
13 } 13 }
14 /*Scroll bar style*/ 14 /*Scroll bar style*/
15 ::-webkit-scrollbar { 15 ::-webkit-scrollbar {
16 -webkit-appearance: none; 16 -webkit-appearance: none;
17 width: 7px; 17 width: 7px;
18 } 18 }
19 ::-webkit-scrollbar-track { 19 ::-webkit-scrollbar-track {
20 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 20 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
21 } 21 }
22 22
23 ::-webkit-scrollbar-thumb { 23 ::-webkit-scrollbar-thumb {
24 border-radius: 4px; 24 border-radius: 4px;
25 background-color: rgba(0,0,0,.5); 25 background-color: rgba(0,0,0,.5);
26 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); 26 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
27 } 27 }
28 /*End scroll bar style*/ 28 /*End scroll bar style*/
29 .padding-right-0{ 29 .padding-right-0{
30 padding-right: 0!important; 30 padding-right: 0!important;
31 } 31 }
32 .padding-left-0{ 32 .padding-left-0{
33 padding-left: 0!important; 33 padding-left: 0!important;
34 } 34 }
35 button.red{ 35 button.red{
36 color: #ffffff; 36 color: #ffffff;
37 background-color: #ff0000; 37 background-color: #ff0000;
38 border: 1px solid #ff0000; 38 border: 1px solid #ff0000;
39 39
40 } 40 }
41 button.white{ 41 button.white{
42 border: 1px solid #ff8080; 42 border: 1px solid #ff8080;
43 color: #ff8080; 43 color: #ff8080;
44 background-color: #ffffff; 44 background-color: #ffffff;
45 } 45 }
46 button.brown{ 46 button.brown{
47 background-color: #666666; 47 background-color: #666666;
48 border: 1px solid #666666; 48 border: 1px solid #666666;
49 color: #ffffff; 49 color: #ffffff;
50 border-radius: 5px; 50 border-radius: 5px;
51 } 51 }
52 button.black{ 52 button.black{
53 border: 1px solid #c9c9c9; 53 border: 1px solid #c9c9c9;
54 background-color: #343434; 54 background-color: #343434;
55 color: #ffffff; 55 color: #ffffff;
56 padding: 1px 6px; 56 padding: 1px 6px;
57 } 57 }
58 #tshirt-container{ 58 #tshirt-container{
59 border-left: 1px solid #dcdcdc; 59 border-left: 1px solid #dcdcdc;
60 border-right: 1px solid #dcdcdc; 60 border-right: 1px solid #dcdcdc;
61 } 61 }
62 /*HEADER*/ 62 /*HEADER*/
63 header{ 63 header{
64 border-bottom: 1px solid #dcdcdc; 64 border-bottom: 1px solid #dcdcdc;
65 } 65 }
66 header .logo{ 66 header .logo{
67 color: #ed1d24; 67 color: #ed1d24;
68 font-size: 30px; 68 font-size: 30px;
69 text-transform: uppercase; 69 text-transform: uppercase;
70 font-weight: bold; 70 font-weight: bold;
71 } 71 }
72 header .logo img{ 72 header .logo img{
73 width: 60px; 73 width: 60px;
74 } 74 }
75 /*NAVIGATION*/ 75 /*NAVIGATION*/
76 nav{ 76 nav{
77 border-bottom: 1px solid #dcdcdc; 77 border-bottom: 1px solid #dcdcdc;
78 padding: 10px 0; 78 padding: 10px 0;
79 } 79 }
80 nav h2{ 80 nav h2{
81 font-size: 27px; 81 font-size: 27px;
82 margin: 0 0; 82 margin: 0 0;
83 } 83 }
84 nav ul{ 84 nav ul{
85 list-style: none; 85 list-style: none;
86 padding-left: 0; 86 padding-left: 0;
87 margin-bottom: 0; 87 margin-bottom: 0;
88 88
89 } 89 }
90 nav ul li{ 90 nav ul li{
91 margin-left: 2px; 91 margin-left: 2px;
92 float: left; 92 float: left;
93 padding: 6px 12px; 93 padding: 6px 12px;
94 background-color: #999999; 94 background-color: #999999;
95 position: relative; 95 position: relative;
96 } 96 }
97 nav ul li i.fa{ 97 nav ul li i.fa{
98 position: absolute; 98 position: absolute;
99 color: #ffffff; 99 color: #ffffff;
100 font-size: 18px; 100 font-size: 18px;
101 right: -4px; 101 right: -4px;
102 top: 50%; 102 top: 50%;
103 transform: translateX(-50%) translateY(-50%); 103 transform: translateX(-50%) translateY(-50%);
104 -webkit-transform: translateX(-50%) translateY(-50%); 104 -webkit-transform: translateX(-50%) translateY(-50%);
105 } 105 }
106 nav ul li a{ 106 nav ul li a{
107 color: #ffffff; 107 color: #ffffff;
108 } 108 }
109 nav ul li:hover a{ 109 nav ul li:hover a{
110 text-decoration: none; 110 text-decoration: none;
111 color: #ffffff; 111 color: #ffffff;
112 } 112 }
113 nav ul li.action{ 113 nav ul li.action{
114 color: #ffffff; 114 color: #ffffff;
115 background-color: #ed1d24; 115 background-color: #ed1d24;
116 } 116 }
117 /*ASIDE*/ 117 /*ASIDE*/
118 aside{ 118 aside{
119 margin: 10px 0; 119 margin: 10px 0;
120 } 120 }
121 121
122 aside .break-down{ 122 aside .break-down{
123 padding: 0 0; 123 padding: 0 0;
124 } 124 }
125 aside .break-down i.fa{ 125 aside .break-down i.fa{
126 font-size: 35px; 126 font-size: 35px;
127 color: #ff0000; 127 color: #ff0000;
128 } 128 }
129 aside .break-line{ 129 aside .break-line{
130 height: 10px; 130 height: 10px;
131 } 131 }
132 aside .break-line hr{ 132 aside .break-line hr{
133 border-top: 1px dotted #cccccc; 133 border-top: 1px dotted #cccccc;
134 } 134 }
135 aside .step{ 135 aside .step{
136 margin: 0 0; 136 margin: 0 0;
137 } 137 }
138 aside .step .title{ 138 aside .step .title{
139 font-size: 15px; 139 font-size: 15px;
140 line-height: 16px; 140 line-height: 16px;
141 font-weight: bold; 141 font-weight: bold;
142 margin-bottom: 3px; 142 margin-bottom: 3px;
143 } 143 }
144 aside .step .title-notice{ 144 aside .step .title-notice{
145 font-size: 13px; 145 font-size: 13px;
146 line-height: 16px; 146 line-height: 16px;
147 margin-bottom: 3px; 147 margin-bottom: 3px;
148 } 148 }
149 aside .step .title-notice .require{ 149 aside .step .title-notice .require{
150 font-size: 10px; 150 font-size: 10px;
151 } 151 }
152 aside .step .step-box{ 152 aside .step .step-box{
153 border: 2px solid #dcdcdc; 153 border: 2px solid #dcdcdc;
154 font-size: 12px; 154 font-size: 12px;
155 155
156 } 156 }
157 /*Step 1*/ 157 /*Step 1*/
158 aside .step .step-box .tshirt-design{ 158 aside .step .step-box .tshirt-design{
159 border: 1px solid #cccccc; 159 border: 1px solid #cccccc;
160 background-color: #f5f5f5; 160 background-color: #f5f5f5;
161 margin: 10px 10px; 161 margin: 10px 10px;
162 } 162 }
163 aside .step .step-box .tshirt-design:hover{ 163 aside .step .step-box .tshirt-design:hover{
164 border: 1px solid #ff0000; 164 border: 1px solid #ff0000;
165 } 165 }
166 aside .step .step-box .tshirt-design button:hover{ 166 aside .step .step-box .tshirt-design button:hover{
167 background-color: #fa7b7b; 167 background-color: #fa7b7b;
168 border: 1px solid #fa7b7b; 168 border: 1px solid #fa7b7b;
169 } 169 }
170 aside .step .step-box .tshirt-design div{ 170 aside .step .step-box .tshirt-design div{
171 float: left; 171 float: left;
172 } 172 }
173 aside .step .step-box .tshirt-design .icon{ 173 aside .step .step-box .tshirt-design .icon{
174 padding: 4px 4px; 174 padding: 4px 4px;
175 border-right: 1px solid #cccccc; 175 border-right: 1px solid #cccccc;
176 176
177 } 177 }
178 aside .step .step-box .tshirt-design .icon img{ 178 aside .step .step-box .tshirt-design .icon img{
179 height: 50px; 179 height: 50px;
180 } 180 }
181 aside .step .step-box .tshirt-design .name{ 181 aside .step .step-box .tshirt-design .name{
182 padding: 10px 10px; 182 padding: 10px 10px;
183 183
184 } 184 }
185 aside .step .step-box .tshirt-design .action{ 185 aside .step .step-box .tshirt-design .action{
186 padding: 10px 10px; 186 padding: 10px 10px;
187 float: right; 187 float: right;
188 188
189 } 189 }
190 aside .step .step-box .tshirt-design .action button{ 190 aside .step .step-box .tshirt-design .action button{
191 padding: 8px 10px; 191 padding: 8px 10px;
192 } 192 }
193 /*Step 2*/ 193 /*Step 2*/
194 aside .step .step-box .tshirt-color{ 194 aside .step .step-box .tshirt-color{
195 padding: 6px 10px; 195 padding: 6px 10px;
196 position: relative; 196 position: relative;
197 } 197 }
198 aside .step .step-box .tshirt-color ul.choice-color{ 198 aside .step .step-box .tshirt-color ul.choice-color{
199 float: left; 199 float: left;
200 list-style: none; 200 list-style: none;
201 padding-left: 0; 201 padding-left: 0;
202 width: 100%; 202 width: 100%;
203 margin-bottom: 3px; 203 margin-bottom: 3px;
204 } 204 }
205 aside .step .step-box .tshirt-color ul.choice-color li{ 205 aside .step .step-box .tshirt-color ul.choice-color li{
206 margin: 0 8px 4px 0; 206 margin: 0 8px 4px 0;
207 border: 1px solid #cccccc; 207 border: 1px solid #cccccc;
208 padding: 2px 2px; 208 padding: 2px 2px;
209 float: left; 209 float: left;
210 cursor: pointer; 210 cursor: pointer;
211 } 211 }
212 aside .step .step-box .tshirt-color ul.choice-color li.action{ 212 aside .step .step-box .tshirt-color ul.choice-color li.action{
213 border: 1px solid #ff0000; 213 border: 1px solid #ff0000;
214 } 214 }
215 aside .step .step-box .tshirt-color ul.choice-color li:hover{ 215 aside .step .step-box .tshirt-color ul.choice-color li:hover{
216 border: 1px solid #ff0000; 216 border: 1px solid #ff0000;
217 } 217 }
218 aside .step .step-box .tshirt-color ul.choice-color li div{ 218 aside .step .step-box .tshirt-color ul.choice-color li div{
219 height: 30px; 219 height: 30px;
220 width: 30px; 220 width: 30px;
221 } 221 }
222 222
223 aside .step .step-box .tshirt-color ul.choice-color li.white div{ 223 aside .step .step-box .tshirt-color ul.choice-color li.white div{
224 background-color: #ece7e4; 224 background-color: #ece7e4;
225 } 225 }
226 aside .step .step-box .tshirt-color ul.choice-color li.blue div{ 226 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
227 background-color: #e7dfd0; 227 background-color: #e7dfd0;
228 } 228 }
229 aside .step .step-box .tshirt-color .color-name{ 229 aside .step .step-box .tshirt-color .color-name{
230 width: 100%; 230 width: 100%;
231 font-size: 10px; 231 font-size: 10px;
232 } 232 }
233 aside .step .step-box .tshirt-color .view-more{ 233 aside .step .step-box .tshirt-color .view-more{
234 position: absolute; 234 position: absolute;
235 bottom: 6px; 235 bottom: 6px;
236 right: 10px; 236 right: 10px;
237 } 237 }
238 /*Step 3*/ 238 /*Step 3*/
239 aside .step .step-box .tshirt-saveorder{ 239 aside .step .step-box .tshirt-saveorder{
240 padding: 10px 10px 6px 10px; 240 padding: 10px 10px 6px 10px;
241 } 241 }
242 aside .step .step-box .tshirt-saveorder .action{ 242 aside .step .step-box .tshirt-saveorder .action{
243 width: 50%; 243 width: 50%;
244 float: left; 244 float: left;
245 } 245 }
246 aside .step .step-box .tshirt-saveorder .action:first-child{ 246 aside .step .step-box .tshirt-saveorder .action:first-child{
247 padding-right: 5px; 247 padding-right: 5px;
248 } 248 }
249 aside .step .step-box .tshirt-saveorder .action:last-child{ 249 aside .step .step-box .tshirt-saveorder .action:last-child{
250 padding-left: 5px; 250 padding-left: 5px;
251 } 251 }
252 aside .step .step-box .tshirt-saveorder .action button{ 252 aside .step .step-box .tshirt-saveorder .action button{
253 padding: 8px 10px; 253 padding: 8px 10px;
254 254
255 } 255 }
256 aside .step .step-box .tshirt-saveorder .action button .text{ 256 aside .step .step-box .tshirt-saveorder .action button .text{
257 float: left; 257 float: left;
258 width: 80%; 258 width: 80%;
259 text-align: center; 259 text-align: center;
260 padding-left: 10px; 260 padding-left: 10px;
261 vertical-align: bottom; 261 vertical-align: bottom;
262 } 262 }
263 aside .step .step-box .tshirt-saveorder .action button .arrow{ 263 aside .step .step-box .tshirt-saveorder .action button .arrow{
264 float: left; 264 float: left;
265 width: 20%; 265 width: 20%;
266 height: 40px; 266 height: 40px;
267 position: relative; 267 position: relative;
268 } 268 }
269 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ 269 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{
270 position: absolute; 270 position: absolute;
271 top: 50%; 271 top: 50%;
272 right: -6px; 272 right: -6px;
273 transform: translateX(-50%) translateY(-50%); 273 transform: translateX(-50%) translateY(-50%);
274 -webkit-transform: translateX(-50%) translateY(-50%); 274 -webkit-transform: translateX(-50%) translateY(-50%);
275 } 275 }
276 aside .step .step-box .tshirt-saveorder .notice{ 276 aside .step .step-box .tshirt-saveorder .notice{
277 padding: 5px 0 0 0; 277 padding: 5px 0 0 0;
278 } 278 }
279 /*Step 4*/ 279 /*Step 4*/
280 aside .step .title-notice{ 280 aside .step .title-notice{
281 281
282 } 282 }
283 aside .step .step-box .change-design{ 283 aside .step .step-box .change-design{
284 padding: 4px 4px; 284 padding: 4px 4px;
285 } 285 }
286 aside .step .step-box .change-design table{ 286 aside .step .step-box .change-design table{
287 287
288 } 288 }
289 aside .step .step-box .change-design table tr{ 289 aside .step .step-box .change-design table tr{
290 border-bottom: 1px dotted #cccccc; 290 border-bottom: 1px dotted #cccccc;
291 } 291 }
292 aside .step .step-box .change-design table tr:last-child{ 292 aside .step .step-box .change-design table tr:last-child{
293 border-bottom: 0; 293 border-bottom: 0;
294 } 294 }
295 295
296 /*Step 5- finish*/ 296 /*Step 5- finish*/
297 aside .step .finish-design{ 297 aside .step .finish-design{
298 padding: 20px 0; 298 padding: 20px 0;
299 } 299 }
300 aside .step .finish-design button{ 300 aside .step .finish-design button{
301 width: 100%; 301 width: 100%;
302 padding: 8px 10px; 302 padding: 8px 10px;
303 } 303 }
304 304
305 /*DESIGN CONTENT*/ 305 /*DESIGN CONTENT*/
306 #tshirt-content{ 306 #tshirt-content{
307 position: relative; 307 position: relative;
308 } 308 }
309 #tshirt-content .switch-border-design{ 309 #tshirt-content .switch-border-design{
310 position: absolute; 310 position: absolute;
311 top: 5px; 311 top: 5px;
312 right: 10px; 312 right: 10px;
313 color: red; 313 color: red;
314 font-size: 11px; 314 font-size: 11px;
315 } 315 }
316 #tshirt-content .tshirt-image{ 316 #tshirt-content .tshirt-image{
317 padding: 20px 0 0 0; 317 padding: 20px 0 0 0;
318 position: relative; 318 position: relative;
319 height: 100%; 319 height: 100%;
320 width: 100%; 320 width: 100%;
321 } 321 }
322 322
323 #tshirt-content .tshirt-image img{ 323 #tshirt-content .tshirt-image img{
324 width: 100%; 324 width: 100%;
325 } 325 }
326 326
327 #tshirt-content .tshirt-choice{ 327 #tshirt-content .tshirt-choice{
328 328
329 } 329 }
330 #tshirt-content .tshirt-choice ul{ 330 #tshirt-content .tshirt-choice ul{
331 list-style: none; 331 list-style: none;
332 padding-left: 0; 332 padding-left: 0;
333 display: table; 333 display: table;
334 margin: auto; 334 margin: auto;
335 } 335 }
336 #tshirt-content .tshirt-choice ul li{ 336 #tshirt-content .tshirt-choice ul li{
337 float: left; 337 float: left;
338 margin: 10px 10px; 338 margin: 10px 10px;
339 cursor: pointer; 339 cursor: pointer;
340 } 340 }
341 #tshirt-content .tshirt-choice ul li .image{ 341 #tshirt-content .tshirt-choice ul li .image{
342 border: 1px solid #cccccc; 342 border: 1px solid #cccccc;
343 padding: 3px 3px; 343 padding: 3px 3px;
344 } 344 }
345 #tshirt-content .tshirt-choice ul li.focus{ 345 #tshirt-content .tshirt-choice ul li.focus{
346 346
347 } 347 }
348 #tshirt-content .tshirt-choice ul li.focus .image{ 348 #tshirt-content .tshirt-choice ul li.focus .image{
349 border: 1px solid #ff0000; 349 border: 1px solid #ff0000;
350 } 350 }
351 #tshirt-content .tshirt-choice ul li .image img{ 351 #tshirt-content .tshirt-choice ul li .image img{
352 width: 50px; 352 width: 50px;
353 height: auto; 353 height: auto;
354 } 354 }
355 /*MODAL Design*/ 355 /*MODAL Design*/
356 #tshirt-design{ 356 #tshirt-design{
357 background-color: #666666; 357 background-color: #666666;
358 } 358 }
359 #tshirt-design .modal-dialog{ 359 #tshirt-design .modal-dialog{
360 /*width: 800px!important;*/ 360 /*width: 800px!important;*/
361 margin: 0 auto; 361 margin: 0 auto;
362 } 362 }
363 #tshirt-design .modal-dialog .modal-content{ 363 #tshirt-design .modal-dialog .modal-content{
364 background-color: transparent; 364 background-color: transparent;
365 border-radius: 0; 365 border-radius: 0;
366 border: 0; 366 border: 0;
367 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 367 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
368 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 368 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
369 } 369 }
370 #tshirt-design .modal-dialog .modal-content .modal-header{ 370 #tshirt-design .modal-dialog .modal-content .modal-header{
371 padding: 0 0 10px 0; 371 padding: 0 0 10px 0;
372 border-bottom: 0; 372 border-bottom: 0;
373 border-shadow: none!important; 373 border-shadow: none!important;
374 } 374 }
375 #tshirt-design .modal-dialog .modal-content .modal-body{ 375 #tshirt-design .modal-dialog .modal-content .modal-body{
376 background-color: #f5f5f5; 376 background-color: #f5f5f5;
377 padding: 0 0; 377 padding: 0 0;
378 } 378 }
379 #tshirt-design header{ 379 #tshirt-design header{
380 border-bottom: 1px solid #cccccc; 380 border-bottom: 1px solid #cccccc;
381 background-color: #dddddd; 381 background-color: #dddddd;
382 } 382 }
383 #tshirt-design header ul.nav{ 383 #tshirt-design header ul.nav{
384 padding-left: 0; 384 padding-left: 0;
385 list-style: none; 385 list-style: none;
386 } 386 }
387 #tshirt-design header ul.nav li{ 387 #tshirt-design header ul.nav li{
388 float: left; 388 float: left;
389 padding: 8px 26px; 389 padding: 8px 26px;
390 border-right: 1px solid #cccccc; 390 border-right: 1px solid #cccccc;
391 font-size: 14px; 391 font-size: 14px;
392 cursor: pointer; 392 cursor: pointer;
393 } 393 }
394 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ 394 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
395 background-color: red; 395 background-color: red;
396 color: #ffffff; 396 color: #ffffff;
397 } 397 }
398 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ 398 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
399 color: #ffffff; 399 color: #ffffff;
400 } 400 }
401 #tshirt-design header ul.nav li i.fa{ 401 #tshirt-design header ul.nav li i.fa{
402 color: #fe070f; 402 color: #fe070f;
403 font-size: 20px; 403 font-size: 20px;
404 margin-right: 10px; 404 margin-right: 10px;
405 } 405 }
406 #tshirt-design header .action{ 406 #tshirt-design header .action{
407 407
408 } 408 }
409 #tshirt-design header .action button{ 409 #tshirt-design header .action button{
410 padding: 2px 10px; 410 padding: 2px 10px;
411 margin: 6px 10px; 411 margin: 6px 10px;
412 } 412 }
413 #tshirt-design header .action button:hover{ 413 #tshirt-design header .action button:hover{
414 background-color: red; 414 background-color: red;
415 color: #ffffff; 415 color: #ffffff;
416 } 416 }
417 417
418 /*Aside modal*/ 418 /*Aside modal*/
419 .aside{ 419 .aside{
420 } 420 }
421 421
422 .aside .box-design-option{ 422 .aside .box-design-option{
423 list-style: none; 423 list-style: none;
424 padding-left: 0; 424 padding-left: 0;
425 margin-top: 10px; 425 margin-top: 10px;
426 } 426 }
427 427
428 .aside .box-design-option li{ 428 .aside .box-design-option li{
429 border: 1px solid #cdcdcd; 429 border: 1px solid #cdcdcd;
430 position: relative; 430 position: relative;
431 /*cursor: pointer;*/ 431 /*cursor: pointer;*/
432 margin-bottom: 10px; 432 margin-bottom: 10px;
433 } 433 }
434 .aside .box-design-option li .hover{ 434 .aside .box-design-option li .hover{
435 background-color: #fddad4; 435 background-color: #fddad4;
436 opacity: 0.6; 436 opacity: 0.6;
437 position: absolute; 437 position: absolute;
438 width: 100%; 438 width: 100%;
439 height: 100%; 439 height: 100%;
440 display: none; 440 display: none;
441 } 441 }
442 .aside .box-design-option li:hover .hover{ 442 .aside .box-design-option li:hover .hover{
443 display: block; 443 display: block;
444 } 444 }
445 445
446 .aside .box-design-option li .title{ 446 .aside .box-design-option li .title{
447 background: url("../images/bg1.png") repeat #cdcdcd; 447 background: url("../images/bg1.png") repeat #cdcdcd;
448 padding: 3px 10px; 448 padding: 3px 10px;
449 } 449 }
450 .aside .box-design-option li .title i.fa{ 450 .aside .box-design-option li .title i.fa{
451 color: #000000; 451 color: #000000;
452 } 452 }
453 453
454 .aside .box-design-option li .content{ 454 .aside .box-design-option li .content{
455 455
456 } 456 }
457 .aside .box-design-option li .content i.fa{ 457 .aside .box-design-option li .content i.fa{
458 font-size: 30px; 458 font-size: 30px;
459 color: #fe070f; 459 color: #fe070f;
460 margin: 8px 0; 460 margin: 8px 0;
461 } 461 }
462 .aside .box-design-option li .content .des{ 462 .aside .box-design-option li .content .des{
463 padding: 3px 10px 3px 0; 463 padding: 3px 10px 3px 0;
464 } 464 }
465 .aside .box-design-option li .content .color-patterns { 465 .aside .box-design-option li .content .color-patterns {
466 width: 100%; 466 width: 100%;
467 border: #bbb solid 1px; 467 border: #bbb solid 1px;
468 background: #FFF; 468 background: #FFF;
469 margin-top: 5px; 469 margin-top: 5px;
470 min-height: 65px; 470 min-height: 65px;
471 } 471 }
472 472
473 .aside .box-design-option li .content .color-patterns .color-pattern-item{ 473 .aside .box-design-option li .content .color-patterns .color-pattern-item{
474 height: 20px; 474 height: 20px;
475 float: left; 475 float: left;
476 margin-left: 4px; 476 margin-left: 4px;
477 margin-top: 2px; 477 margin-top: 2px;
478 width: 20px; 478 width: 20px;
479 cursor: pointer; 479 cursor: pointer;
480 border: 1px solid #ddd; 480 border: 1px solid #ddd;
481 } 481 }
482 482
483 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover { 483 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover {
484 outline: 1px solid #ed1d24; 484 outline: 1px solid #ed1d24;
485 } 485 }
486 486
487 .aside .box-design-option li .title .reset-color-patterns { 487 .aside .box-design-option li .title .reset-color-patterns {
488 cursor: pointer; 488 cursor: pointer;
489 } 489 }
490 490
491 .aside .box-design-option li .title .reset-color-patterns:hover { 491 .aside .box-design-option li .title .reset-color-patterns:hover {
492 opacity: 0.6; 492 opacity: 0.6;
493 } 493 }
494 494
495 .aside .box-design-option li .content .layer-item { 495 .aside .box-design-option li .content .layer-item {
496 text-align: center; 496 text-align: center;
497 border: 1px #ddd solid; 497 border: 1px #ddd solid;
498 background: #FFF; 498 background: #FFF;
499 padding: 5px; 499 padding: 5px;
500 font-size: 12px; 500 font-size: 12px;
501 cursor: pointer; 501 cursor: pointer;
502 } 502 }
503 503
504 .aside .box-design-option li .content .layer-item:hover { 504 .aside .box-design-option li .content .layer-item:hover {
505 background: #ffcccc; 505 background: #ffcccc;
506 } 506 }
507 507
508 508
509 /*Design Text*/ 509 /*Design Text*/
510 .aside #choice-text{ 510 .aside #choice-text{
511 511
512 } 512 }
513 .aside #choice-text .content{ 513 .aside #choice-text .content{
514 padding: 10px 10px; 514 padding: 10px 10px;
515 } 515 }
516 .aside #choice-text .content ul.font-family-box{ 516 .aside #choice-text .content ul.font-family-box{
517 list-style: none; 517 list-style: none;
518 margin: 10px 0; 518 margin: 10px 0;
519 padding-left: 0; 519 padding-left: 0;
520 height: 180px; 520 height: 180px;
521 width: 100%; 521 width: 100%;
522 overflow-y: scroll; 522 overflow-y: scroll;
523 border: 1px solid #c0c0c0; 523 border: 1px solid #c0c0c0;
524 } 524 }
525 525
526 .aside #choice-text .content .font-family-box li{ 526 .aside #choice-text .content .font-family-box li{
527 cursor: pointer; 527 cursor: pointer;
528 padding: 4px 8px; 528 padding: 4px 8px;
529 border: 0; 529 border: 0;
530 border-bottom: 1px solid #c0c0c0; 530 border-bottom: 1px solid #c0c0c0;
531 border-right: 1px solid #c0c0c0; 531 border-right: 1px solid #c0c0c0;
532 font-size: 16px; 532 font-size: 16px;
533 margin-bottom: 0; 533 margin-bottom: 0;
534 } 534 }
535 .aside #choice-text .content .font-family-box li.active{ 535 .aside #choice-text .content .font-family-box li.active{
536 border: 1px solid #fe070f; 536 border: 1px solid #fe070f;
537 } 537 }
538 .aside #choice-text .content .spacing-letter{ 538 .aside #choice-text .content .spacing-letter{
539 539
540 } 540 }
541 .aside #choice-text .content .spacing-letter .text-label{ 541 .aside #choice-text .content .spacing-letter .text-label{
542 font-size: 16px; 542 font-size: 16px;
543 padding: 4px 0; 543 padding: 4px 0;
544 } 544 }
545 .aside #choice-text .content .spacing-letter .box{ 545 .aside #choice-text .content .spacing-letter .box{
546 border: 1px solid #8c8c8c; 546 border: 1px solid #8c8c8c;
547 box-shadow: 0 0 5px #888888; 547 box-shadow: 0 0 5px #888888;
548 background-color: #f0f0f0; 548 background-color: #f0f0f0;
549 } 549 }
550 .aside #choice-text .content .spacing-letter .item{ 550 .aside #choice-text .content .spacing-letter .item{
551 float: left; 551 float: left;
552 } 552 }
553 .aside #choice-text .content .spacing-letter .item:hover{ 553 .aside #choice-text .content .spacing-letter .item:hover{
554 background-color: #fddad4; 554 background-color: #fddad4;
555 } 555 }
556 556
557 .aside #choice-text .content .spacing-letter .item i.fa{ 557 .aside #choice-text .content .spacing-letter .item i.fa{
558 font-size: 22px; 558 font-size: 22px;
559 margin: 0 0; 559 margin: 0 0;
560 color: #000000; 560 color: #000000;
561 } 561 }
562 .aside #choice-text .content .spacing-letter .item-text{ 562 .aside #choice-text .content .spacing-letter .item-text{
563 padding: 6px 20px; 563 padding: 6px 20px;
564 font-size: 13px; 564 font-size: 13px;
565 } 565 }
566 .aside #choice-text .content .spacing-letter .item-plus{ 566 .aside #choice-text .content .spacing-letter .item-plus{
567 border-right: 1px solid #8c8c8c; 567 border-right: 1px solid #8c8c8c;
568 } 568 }
569 .aside #choice-text .content .spacing-letter .item-minus{ 569 .aside #choice-text .content .spacing-letter .item-minus{
570 border-left: 1px solid #8c8c8c; 570 border-left: 1px solid #8c8c8c;
571 } 571 }
572 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus { 572 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus {
573 padding: 5px 6px 1px 6px; 573 padding: 5px 6px 1px 6px;
574 cursor: pointer; 574 cursor: pointer;
575 } 575 }
576 /*Design Choice Illustration*/ 576 /*Design Choice Illustration*/
577 .aside #choice-illustration li .content { 577 .aside #choice-illustration li .content {
578 padding: 10px 10px; 578 padding: 10px 10px;
579 } 579 }
580 580
581 .aside #choice-illustration li .content select{ 581 .aside #choice-illustration li .content select{
582 width: 100%; 582 width: 100%;
583 } 583 }
584 584
585 .aside #choice-illustration li .content .illustration-list { 585 .aside #choice-illustration li .content .illustration-list {
586 width: 100%; 586 width: 100%;
587 border: #bbb solid 1px; 587 border: #bbb solid 1px;
588 background: #FFF; 588 background: #FFF;
589 margin-top: 5px; 589 margin-top: 5px;
590 min-height: 310px; 590 min-height: 310px;
591 padding-bottom: 20px; 591 padding-bottom: 20px;
592 } 592 }
593 593
594 .aside #choice-illustration li .content .illustration-list .illstration-item{ 594 .aside #choice-illustration li .content .illustration-list .illstration-item{
595 height: 60px; 595 height: 60px;
596 overflow: hidden; 596 overflow: hidden;
597 float: left; 597 float: left;
598 margin-left: 6px; 598 margin-left: 6px;
599 margin-top: 5px; 599 margin-top: 5px;
600 margin-bottom: 5px; 600 margin-bottom: 5px;
601 padding: 2px; 601 padding: 2px;
602 background: #e2e2e2; 602 background: #e2e2e2;
603 border: solid 2px #d7d7d7; 603 border: solid 2px #d7d7d7;
604 cursor: pointer; 604 cursor: pointer;
605 } 605 }
606 606
607 .aside #choice-illustration li .content .illustration-list .illstration-item:hover { 607 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
608 outline: 2px solid #ed1d24; 608 outline: 2px solid #ed1d24;
609 } 609 }
610 610
611 .aside #choice-illustration li .content .illustration-list .illstration-item img { 611 .aside #choice-illustration li .content .illustration-list .illstration-item img {
612 width: 50px; 612 width: 50px;
613 cursor: pointer; 613 cursor: pointer;
614 } 614 }
615 615
616 .aside #choice-illustration li .content .illustration-list .footer-bar { 616 .aside #choice-illustration li .content .illustration-list .footer-bar {
617 text-align: center; 617 text-align: center;
618 margin-top: 5px; 618 margin-top: 5px;
619 bottom: 10px; 619 bottom: 10px;
620 position: absolute; 620 position: absolute;
621 width: 100%; 621 width: 100%;
622 padding-right: 20px; 622 padding-right: 20px;
623 } 623 }
624 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination { 624 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination {
625 margin-right: 5px; 625 margin-right: 5px;
626 cursor: pointer; 626 cursor: pointer;
627 font-size: 9px; 627 font-size: 9px;
628 color: #FFF; 628 color: #FFF;
629 background: #666666; 629 background: #666666;
630 text-transform: uppercase; 630 text-transform: uppercase;
631 padding: 2px 5px; 631 padding: 2px 5px;
632 } 632 }
633 633
634 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover { 634 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover {
635 background: #999999; 635 background: #999999;
636 } 636 }
637 .tooltip-arrow, 637 .tooltip-arrow,
638 .red-tooltip + .tooltip > .tooltip-inner { 638 .red-tooltip + .tooltip > .tooltip-inner {
639 background-color: #FFF; 639 background-color: #FFF;
640 margin:0; 640 margin:0;
641 padding:0; 641 padding:0;
642 } 642 }
643 643
644 /* Insert image*/ 644 /* Insert image*/
645 #btn-choose-image { 645 #btn-choose-image {
646 background: #ff0f00; 646 background: #ff0f00;
647 cursor: pointer; 647 cursor: pointer;
648 margin: 10px 0px; 648 margin: 10px 0px;
649 padding: 0 10px; 649 padding: 0 10px;
650 color: #FFF; 650 color: #FFF;
651 font-size: 12px; 651 font-size: 12px;
652 } 652 }
653 653
654 #btn-choose-image:hover { 654 #btn-choose-image:hover {
655 background: #f8aeae; 655 background: #f8aeae;
656 } 656 }
657 657
658 .aside #choice-image li .content { 658 .aside #choice-image li .content {
659 margin: 0 10px; 659 margin: 0 10px;
660 padding: 10px 0; 660 padding: 10px 0;
661 } 661 }
662 662
663 .aside #choice-image li .content .small-text { 663 .aside #choice-image li .content .small-text {
664 font-size:10px; 664 font-size:10px;
665 margin-bottom: 10px; 665 margin-bottom: 10px;
666 } 666 }
667 667
668 .aside #choice-image { 668 .aside #choice-image {
669 font-size: 13px; 669 font-size: 13px;
670 } 670 }
671 671
672 .aside #imgLoader{ 672 .aside #imgLoader{
673 display: none; 673 display: none;
674 } 674 }
675 675
676 .aside #choice-image li .content .list-images { 676 .aside #choice-image li .content .list-images {
677 height: 300px; 677 height: 300px;
678 background: #FFF; 678 background: #FFF;
679 border: 1px solid #DDD; 679 border: 1px solid #DDD;
680 } 680 }
681 681
682 .aside #choice-image li .content .list-images .recent-img{ 682 .aside #choice-image li .content .list-images .recent-img{
683 height: 60px; 683 height: 60px;
684 overflow: hidden; 684 overflow: hidden;
685 float: left; 685 float: left;
686 margin-left: 6px; 686 margin-left: 6px;
687 margin-top: 5px; 687 margin-top: 5px;
688 margin-bottom: 5px; 688 margin-bottom: 5px;
689 padding: 2px; 689 padding: 2px;
690 background: #e2e2e2; 690 background: #e2e2e2;
691 border: solid 2px #d7d7d7; 691 border: solid 2px #d7d7d7;
692 cursor: pointer; 692 cursor: pointer;
693 } 693 }
694 694
695 .aside #choice-image li .content .list-images .recent-img:hover { 695 .aside #choice-image li .content .list-images .recent-img:hover {
696 outline: 2px solid #ed1d24; 696 outline: 2px solid #ed1d24;
697 } 697 }
698 698
699 .aside #choice-image li .content .list-images .recent-img img { 699 .aside #choice-image li .content .list-images .recent-img img {
700 width: 50px; 700 width: 50px;
701 cursor: pointer; 701 cursor: pointer;
702 } 702 }
703 703
704 /*Design content*/ 704 /*Design content*/
705 .tshirt-design-container{ 705 .tshirt-design-container{
706 position: relative; 706
707 } 707 }
708 .tshirt-design-container .design-content{ 708 .tshirt-design-container .design-content{
709 padding: 10px 0; 709 padding: 10px 0;
710 /*width: 100%;*/ 710 /*min-height: 580px;*/
711 } 711 }
712 .tshirt-design-container .design-content .content{ 712 .tshirt-design-container .design-content .content{
713 width: 100%; 713 width: 100%;
714 height: 100%; 714 height: 100%;
715 min-height: 650px; 715 min-height: 600px;
716 background-color: #f0efea; 716 position: relative;
717 padding: 40px 40px; 717 padding: 40px 40px;
718 /*display: table-cell;*/
719 } 718 }
720 .tshirt-design-container .design-content .content .selection-design{ 719 .tshirt-design-container .design-content .content .selection-design{
721 border: 1px solid #ff0000; 720 border: 1px solid #ff0000;
722 } 721 }
723 .tshirt-design-container .agree-design{ 722 .tshirt-design-container .agree-design{
724 position: absolute; 723 position: absolute;
725 right: -16px; 724 right: -16px;
726 top: 40%; 725 top: 40%;
727 cursor: pointer; 726 cursor: pointer;
728 } 727 }
729 .tshirt-design-container .agree-design:hover{ 728 .tshirt-design-container .agree-design:hover{
730 opacity: 0.8; 729 opacity: 0.8;
731 } 730 }
732 .tshirt-design-container .trash-design{ 731 .tshirt-design-container .trash-design{
733 position: absolute; 732 position: absolute;
734 right: 5px; 733 right: 5px;
735 bottom: 0; 734 bottom: 0;
736 } 735 }
737 .tshirt-design-container .trash-design:hover{ 736 .tshirt-design-container .trash-design:hover{
738 opacity: 0.5; 737 opacity: 0.5;
739 } 738 }
740 739
741 .object-border{ 740 .object-border{
742 position: absolute; 741 position: absolute;
743 background-color: rgb(0, 108, 255); 742 background-color: rgb(0, 108, 255);
744 border: 0; 743 border: 0;
745 display:none; 744 display:none;
746 transform-origin: 0% 0%; 745 transform-origin: 0% 0%;
747 } 746 }
748 #object-border-top, #object-border-bottom{ 747 #object-border-top, #object-border-bottom{
749 height: 2px; 748 height: 2px;
750 } 749 }
751 #object-border-right, #object-border-left{ 750 #object-border-right, #object-border-left{
752 width: 2px; 751 width: 2px;
753 } 752 }
754 753
755 754
756 /*FOOTER*/ 755 /*FOOTER*/
757 footer{ 756 footer{
758 background-color: #333333; 757 background-color: #333333;
759 } 758 }
760 footer ul.nav-footer{ 759 footer ul.nav-footer{
761 padding-left: 0; 760 padding-left: 0;
762 list-style: none; 761 list-style: none;
763 } 762 }
764 footer ul.nav-footer li{ 763 footer ul.nav-footer li{
765 float: left; 764 float: left;
766 padding: 3px 10px; 765 padding: 3px 10px;
767 border-right: 1px dotted #ffffff; 766 border-right: 1px dotted #ffffff;
768 767
769 } 768 }
770 footer ul.nav-footer li a{ 769 footer ul.nav-footer li a{
771 color: #ffffff; 770 color: #ffffff;
772 font-size: 11px; 771 font-size: 11px;
773 } 772 }
774 /* Customize container */ 773 /* Customize container */
775 @media (min-width: 768px) { 774 @media (min-width: 768px) {
776 .container { 775 .container {
777 /*max-width: 730px;*/ 776 /*max-width: 730px;*/
778 } 777 }
779 } 778 }
780 779
781 /* Responsive: Portrait tablets and up */ 780 /* Responsive: Portrait tablets and up */
782 @media screen and (min-width: 768px) { 781 @media screen and (min-width: 768px) {
783 /* Remove the padding we set earlier */ 782 /* Remove the padding we set earlier */
784 783
785 } 784 }
786 785
787 @media (min-width: 1024px) { 786 @media (min-width: 1024px) {
788 #tshirt-design .modal-dialog{ 787 #tshirt-design .modal-dialog{
789 min-width: 1000px; 788 min-width: 1000px;
790 width: 1000px; 789 width: 1000px;
791 } 790 }
792 } 791 }
793 792
794 @media (max-width: 762px) { 793 @media (max-width: 762px) {
795 .modal-dialog{ 794 .modal-dialog{
796 margin: 0 0!important; 795 margin: 0 0!important;
797 } 796 }
798 #tshirt-design header .menu-nav{ 797 #tshirt-design header .menu-nav{
799 overflow-x: scroll!important; 798 overflow-x: scroll!important;
800 -webkit-overflow-scrolling: touch; 799 -webkit-overflow-scrolling: touch;
801 } 800 }
802 801
803 #tshirt-design header ul.nav { 802 #tshirt-design header ul.nav {
804 text-align: justify; 803 text-align: justify;
805 width: 680px; 804 width: 680px;
806 } 805 }
807 806
808 #tshirt-design header ul.nav li { 807 #tshirt-design header ul.nav li {
809 display: inline-block; /* 6 */ 808 display: inline-block; /* 6 */
810 } 809 }
811 810
812 .tshirt-design-container .design-content .content{ 811 .tshirt-design-container .design-content .content{
813 padding: 14px 14px; 812 padding: 14px 14px;
814 } 813 }
815 .tshirt-design-container .design-content{ 814 .tshirt-design-container .design-content{
816 padding: 0 0; 815 padding: 0 0;
817 } 816 }
818 } 817 }
app/styles/placedesign.css
Diff comments   View file @ 4ae9cc6
1 #preview-design { 1 #preview-design {
2 position: absolute; 2 position: absolute;
3 border: dashed 2px #DDD; 3 border: dashed 2px #DDD;
4 cursor: pointer; 4 cursor: pointer;
5 } 5 }
6 6
7 #preview-design img { 7 #preview-design img {
8 width: 150px; 8 width: 150px;
9 } 9 }
10 10
11 .t_shirt_p_1{ 11 .t_shirt_p_1{
12 left: 50%; 12 left: 50%;
13 top: 50%; 13 top: 50%;
14 transform: translateX(-50%) translateY(-50%); 14 transform: translateX(-50%) translateY(-50%);
15 -webkit-transform: translateX(-50%) translateY(-50%); 15 -webkit-transform: translateX(-50%) translateY(-50%);
16 } 16 }
17 .t_shirt_p_2{ 17 .t_shirt_p_2{
18 left: 50%; 18 left: 50%;
19 top: 80%; 19 top: 80%;
20 transform: translateX(-50%) translateY(-80%); 20 transform: translateX(-50%) translateY(-80%);
21 -webkit-transform: translateX(-50%) translateY(-80%); 21 -webkit-transform: translateX(-50%) translateY(-80%);
22 } 22 }
23
24 /**/
25 .design-content-t_shirt_p_1{
26
27 }
28 .design-content-t_shirt_p_2{
29 padding: 200px 40px!important;
30 }
1 <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container"> 1 <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container">
2 <div class="row"> 2 <div class="row">
3 <header> 3 <header>
4 <div class="logo"> 4 <div class="logo">
5 <img src="images/logo_mobile_world.png" alt="Logo Mobile World" /> 5 <img src="images/logo_mobile_world.png" alt="Logo Mobile World" />
6 MOBILE WORLD 6 MOBILE WORLD
7 </div> 7 </div>
8 </header> 8 </header>
9 <nav class="clearfix"> 9 <nav class="clearfix">
10 <div class="col-sm-12"> 10 <div class="col-sm-12">
11 <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2> 11 <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
12 <ul class="pull-right"> 12 <ul class="pull-right">
13 <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li> 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> 14 <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
15 <li class="action">デザインする</li> 15 <li class="action">デザインする</li>
16 </ul> 16 </ul>
17 </div> 17 </div>
18 </nav> 18 </nav>
19 <article class="clearfix"> 19 <article class="clearfix">
20 <aside class="col-sm-5"> 20 <aside class="col-sm-5">
21 <div class="step"> 21 <div class="step">
22 <div class="title"> 22 <div class="title">
23 1. デザインを作る 23 1. デザインを作る
24 </div> 24 </div>
25 <div class="step-box"> 25 <div class="step-box">
26 <div class="tshirt-design clearfix"> 26 <div class="tshirt-design clearfix">
27 <div class="icon"> 27 <div class="icon">
28 <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" /> 28 <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" />
29 </div> 29 </div>
30 <div class="name"> 30 <div class="name">
31 背中背中 (28x22) 31 背中背中 (28x22)
32 </div> 32 </div>
33 <div class="action"> 33 <div class="action">
34 <button class="red" ng-click="modalTShirtDesign()"> 34 <button class="red" ng-click="modalTShirtDesign()">
35 <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る 35 <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る
36 </button> 36 </button>
37 </div> 37 </div>
38 </div> 38 </div>
39 </div> 39 </div>
40 </div> 40 </div>
41 41
42 <!-- BREAK DOWN--> 42 <!-- BREAK DOWN-->
43 <div class="text-center break-down"> 43 <div class="text-center break-down">
44 <img src="images/bg_step_arrow.gif" alt="arrow" /> 44 <img src="images/bg_step_arrow.gif" alt="arrow" />
45 </div> 45 </div>
46 46
47 <!-- STEP 2--> 47 <!-- STEP 2-->
48 <div class="step"> 48 <div class="step">
49 <div class="title"> 49 <div class="title">
50 2.アイテムカラーを変更する 50 2.アイテムカラーを変更する
51 </div> 51 </div>
52 <div class="step-box clearfix"> 52 <div class="step-box clearfix">
53 <div class="tshirt-color"> 53 <div class="tshirt-color">
54 <ul class="choice-color clearfix"> 54 <ul class="choice-color clearfix">
55 <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''"> 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> 56 <div ng-style="{'background-color' : color.code}"></div>
57 </li> 57 </li>
58 </ul> 58 </ul>
59 <div class="color-name" ng-bind="tShirtColorName"></div> 59 <div class="color-name" ng-bind="tShirtColorName"></div>
60 <div class="view-more"> 60 <div class="view-more">
61 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 61 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
62 </div> 62 </div>
63 </div> 63 </div>
64 </div> 64 </div>
65 </div> 65 </div>
66 66
67 <!-- BREAK DOWN--> 67 <!-- BREAK DOWN-->
68 <div class="text-center break-down"> 68 <div class="text-center break-down">
69 <img src="images/bg_step_arrow.gif" alt="arrow" /> 69 <img src="images/bg_step_arrow.gif" alt="arrow" />
70 </div> 70 </div>
71 71
72 <!-- STEP 3--> 72 <!-- STEP 3-->
73 <div class="step"> 73 <div class="step">
74 <div class="step-box clearfix"> 74 <div class="step-box clearfix">
75 <div class="tshirt-saveorder"> 75 <div class="tshirt-saveorder">
76 <div class="clearfix"> 76 <div class="clearfix">
77 <div class="action"> 77 <div class="action">
78 <button class="white"> 78 <button class="white">
79 <div class="text"> 79 <div class="text">
80 このデザインを保存する 80 このデザインを保存する
81 </div> 81 </div>
82 <div class="arrow"> 82 <div class="arrow">
83 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 83 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
84 </div> 84 </div>
85 </button> 85 </button>
86 </div> 86 </div>
87 <div class="action"> 87 <div class="action">
88 <button class="red"> 88 <button class="red">
89 <div class="text"> 89 <div class="text">
90 このデザインで注文する 90 このデザインで注文する
91 </div> 91 </div>
92 <div class="arrow clearfix"> 92 <div class="arrow clearfix">
93 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 93 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
94 </div> 94 </div>
95 </button> 95 </button>
96 </div> 96 </div>
97 </div> 97 </div>
98 <div class="notice"> 98 <div class="notice">
99 デザインを保存するには、ログインしてください 99 デザインを保存するには、ログインしてください
100 </div> 100 </div>
101 </div> 101 </div>
102 </div> 102 </div>
103 103
104 <!-- BREAL LINE--> 104 <!-- BREAL LINE-->
105 <div class="text-center break-line"> 105 <div class="text-center break-line">
106 <hr /> 106 <hr />
107 </div> 107 </div>
108 108
109 <!-- STEP 4--> 109 <!-- STEP 4-->
110 <div class="step"> 110 <div class="step">
111 <div class="title-notice"> 111 <div class="title-notice">
112 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span> 112 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span>
113 </div> 113 </div>
114 <div class="step-box"> 114 <div class="step-box">
115 <div class="change-design"> 115 <div class="change-design">
116 <table> 116 <table>
117 <tr> 117 <tr>
118 <td class="text-center">商品</td> 118 <td class="text-center">商品</td>
119 <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td> 119 <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td>
120 <td class="text-right"> 120 <td class="text-right">
121 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> 121 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
122 </td> 122 </td>
123 </tr> 123 </tr>
124 <tr> 124 <tr>
125 <td width="10%" class="text-center">加工方法</td> 125 <td width="10%" class="text-center">加工方法</td>
126 <td width="70%">シルク：胸中央 (27×27)</td> 126 <td width="70%">シルク：胸中央 (27×27)</td>
127 <td width="20%" class="text-right"> 127 <td width="20%" class="text-right">
128 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> 128 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
129 </td> 129 </td>
130 </tr> 130 </tr>
131 </table> 131 </table>
132 </div> 132 </div>
133 </div> 133 </div>
134 </div> 134 </div>
135 <!-- STEP 5- finish--> 135 <!-- STEP 5- finish-->
136 <div class="step"> 136 <div class="step">
137 <div class="finish-design"> 137 <div class="finish-design">
138 <button class="white"> 138 <button class="white">
139 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 139 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
140 </button> 140 </button>
141 </div> 141 </div>
142 142
143 </div> 143 </div>
144 </div> 144 </div>
145 </aside> 145 </aside>
146 <section id="tshirt-content" class="col-sm-7 text-center"> 146 <section id="tshirt-content" class="col-sm-7 text-center">
147 <div class="switch-border-design"> 147 <div class="switch-border-design">
148 <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す 148 <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す
149 </div> 149 </div>
150 <div class="tshirt-image"> 150 <div class="tshirt-image">
151 <img ng-src="{{ tShirtImg }}" alt="" /> 151 <img ng-src="{{ tShirtImg }}" alt="" />
152 <div class="{{ placeTshirt.place }}" id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" ng-click="modalTShirtDesign()"> 152 <div ng-class="placeTshirt.place" id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" ng-click="modalTShirtDesign()">
153 <img ng-src="{{outputImage}}" ng-show="outputImage"/> 153 <img ng-src="{{outputImage}}" ng-show="outputImage"/>
154 </div> 154 </div>
155 </div> 155 </div>
156 <div class="tshirt-choice"> 156 <div class="tshirt-choice">
157 <ul> 157 <ul>
158 <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''"> 158 <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''">
159 <div>前</div> 159 <div>前</div>
160 <div class="image" ng-click="choiceTShirtBackFront('front')"> 160 <div class="image" ng-click="choiceTShirtBackFront('front')">
161 <img ng-src="{{ tShirtImgFront }}" alt="" /> 161 <img ng-src="{{ tShirtImgFront }}" alt="" />
162 </div> 162 </div>
163 163
164 </li> 164 </li>
165 <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''"> 165 <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''">
166 <div>後</div> 166 <div>後</div>
167 <div class="image" ng-click="choiceTShirtBackFront('back')"> 167 <div class="image" ng-click="choiceTShirtBackFront('back')">
168 <img ng-src="{{ tShirtImgBack }}" alt="" /> 168 <img ng-src="{{ tShirtImgBack }}" alt="" />
169 </div> 169 </div>
170 170
171 </li> 171 </li>
172 </ul> 172 </ul>
173 </div> 173 </div>
174 </section> 174 </section>
175 </article> 175 </article>
176 <footer class="clearfix"> 176 <footer class="clearfix">
177 <ul class="nav-footer"> 177 <ul class="nav-footer">
178 <li><a href="#">店舗検索</a></li> 178 <li><a href="#">店舗検索</a></li>
179 <li><a href="#">お客様窓口</a></li> 179 <li><a href="#">お客様窓口</a></li>
180 <li><a href="#">企業情報</a></li> 180 <li><a href="#">企業情報</a></li>
181 <li><a href="#">採用情報</a></li> 181 <li><a href="#">採用情報</a></li>
182 <li><a href="#">プライバシーポリシー</a></li> 182 <li><a href="#">プライバシーポリシー</a></li>
183 </ul> 183 </ul>
184 </footer> 184 </footer>
185 185
186 <!--MODAL CONTENT--> 186 <!--MODAL CONTENT-->
187 <div ng-include="designFrameView"></div> 187 <div ng-include="designFrameView"></div>
188 </div> 188 </div>
189 189
190 190
191 </div> 191 </div>
192 192
app/views/tshirt-design.html
Diff comments   View file @ 4ae9cc6
1 <!-- Modal --> 1 <!-- Modal -->
2 <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl"> 2 <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl">
3 <div class="modal-dialog" role="document"> 3 <div class="modal-dialog" role="document">
4 <div class="modal-content"> 4 <div class="modal-content">
5 <div class="modal-header"> 5 <div class="modal-header">
6 <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button> 6 <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button>
7 <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button> 7 <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button>
8 </div> 8 </div>
9 <div class="modal-body"> 9 <div class="modal-body">
10 <header class="clearfix"> 10 <header class="clearfix">
11 <div class="menu-nav"> 11 <div class="menu-nav">
12 <ul class="nav pull-left"> 12 <ul class="nav pull-left">
13 <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')"> 13 <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')">
14 <i class="fa fa-jpy" aria-hidden="true"></i> 文字 14 <i class="fa fa-jpy" aria-hidden="true"></i> 文字
15 </li> 15 </li>
16 <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')"> 16 <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')">
17 <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ 17 <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ
18 </li> 18 </li>
19 <li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')"> 19 <li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')">
20 <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真 20 <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真
21 </li> 21 </li>
22 <li ng-click="canvasClearAll()"> 22 <li ng-click="canvasClearAll()">
23 <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去 23 <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去
24 </li> 24 </li>
25 </ul> 25 </ul>
26 </div> 26 </div>
27 27
28 <div class="action pull-right"> 28 <div class="action pull-right">
29 <button class="white"> 29 <button class="white">
30 アルバムを開く 30 アルバムを開く
31 </button> 31 </button>
32 <button class="white"> 32 <button class="white">
33 アルバムに入れる 33 アルバムに入れる
34 </button> 34 </button>
35 </div> 35 </div>
36 </header> 36 </header>
37 <section class="tshirt-design-container clearfix"> 37 <section class="tshirt-design-container clearfix">
38 <div class="aside col-sm-4"> 38 <div class="aside col-sm-4">
39 <!-- Default--> 39 <!-- Default-->
40 <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault"> 40 <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault">
41 </ul> 41 </ul>
42 <!-- Illustration design--> 42 <!-- Illustration design-->
43 <ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration"> 43 <ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration">
44 </ul> 44 </ul>
45 <!-- Custom image design--> 45 <!-- Custom image design-->
46 <ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage"> 46 <ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage">
47 </ul> 47 </ul>
48 <!-- Text design--> 48 <!-- Text design-->
49 <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText"> 49 <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText">
50 </ul> 50 </ul>
51 </div> 51 </div>
52 <div class="col-sm-8"> 52 <div class="col-sm-8">
53 <div class="design-content " id="main-design-content"> 53 <div class="design-content" id="main-design-content">
54 <div class="content" id="main-design" ng-style="{'background-color' : tShirtColorCode}"> 54 <div class="content" id="main-design" ng-style="{'background-color' : tShirtColorCode}" ng-class="designCanvasClass">
55 <div class="object-border" id="object-border-top"></div> 55 <div class="object-border" id="object-border-top"></div>
56 <div class="object-border" id="object-border-right"></div> 56 <div class="object-border" id="object-border-right"></div>
57 <div class="object-border" id="object-border-bottom"></div> 57 <div class="object-border" id="object-border-bottom"></div>
58 <div class="object-border" id="object-border-left"></div> 58 <div class="object-border" id="object-border-left"></div>
59 <canvas id="main-design-container" class="selection-design lower-canvas" style="width: 100%"> 59 <canvas id="main-design-container" class="selection-design lower-canvas">
60
60 </canvas> 61 </canvas>
61 </div> 62 </div>
62 <div class="agree-design" ng-click="outputDesign()"> 63 <div class="agree-design" ng-click="outputDesign()">
63 <img src="images/agree-design.png" alt="agree design" /> 64 <img src="images/agree-design.png" alt="agree design" />
64 </div> 65 </div>
65 <div class="trash-design"> 66 <div class="trash-design">
66 <img src="images/trash.png" alt="trash design" /> 67 <img src="images/trash.png" alt="trash design" />
67 </div> 68 </div>
68 </div> 69 </div>
69 <img style="display:none" src="images/trash-hover.png" alt="trash-hover cache" /> 70 <img style="display:none" src="images/trash-hover.png" alt="trash-hover cache" />
70 </div> 71 </div>
71 72
72 </section> 73 </section>
73 </div> 74 </div>
74 </div> 75 </div>
75 </div> 76 </div>
76 </div> 77 </div>