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

Download as
Browse Code »

Commit c8bfdfd96a3d5a3acbb5b3f93a84c78f4174aa95

Authored by DANG
1 parent 81dbbd759f
Exists in master and in 1 other branch develop

event click object

Showing 5 changed files with 79 additions and 147 deletions Inline Diff

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