design text basic

DANG
1 parent f74595eadb
Showing 4 changed files with 301 additions and 74 deletions Side-by-side Diff
app/fonts/font_canvas/font-canvas.css
app/scripts/controllers/tshirtdesign.js
app/styles/main.css
app/views/design_part/text.html
@@ -6,17 +6,61 @@
     font-family: 'gn_fuyu_iro_script_bold';
     src: url(GN-Fuyu-iro_Script_Bold.ttf);
 }
+@font-face {
+    font-family: 'gn_killgothic_u_kanana';
+    src: url(GN-KillGothic-U-KanaNA.ttf);
+}
  
 @font-face {
-    font-family: 'gn_aki_iro_sesami_cookies';
-    src: url(GN-Aki-iro_Sesami_Cookies.ttf);
+    font-family: 'gn_kin_iro_alphabet_cookies';
+    src: url(GN-Kin-iro_Alphabet_Cookies.ttf);
 }
 @font-face {
-    font-family: 'gn_aki_iro_sesami_cookies';
-    src: url(GN-Aki-iro_Sesami_Cookies.ttf);
+    font-family: 'gn_kin_iro_sansserif';
+    src: url(GN-Kin-iro_SansSerif.ttf);
 }
 @font-face {
-    font-family: 'gn_killgothic_u_kanana';
-    src: url(GN-KillGothic-U-KanaNA.ttf);
+    font-family: 'gn_koharuiro_sunray';
+    src: url(GN-Koharuiro_Sunray.ttf);
+}
+@font-face {
+    font-family: 'gn_kyu_pin';
+    src: url(GN-Kyu-pin.ttf);
+}
+@font-face {
+    font-family: 'gn_natsu_iro_schedule';
+    src: url(GN-Natsu-iro-Schedule.ttf);
+}
+@font-face {
+    font-family: 'gn_natsuiro_schedule';
+    src: url(GN-Natsuiro_Schedule.ttf);
+}
+@font-face {
+    font-family: 'gnkana_kiniro_elegance';
+    src: url(GNKana-Kiniro_Elegance.ttf);
+}
+@font-face {
+    font-family: 'gnkana_kiniro_sansserif_l';
+    src: url(GNKana-Kiniro_SansSerif_L.ttf);
+}
+@font-face {
+    font-family: 'gnkana_kiniro_sansserif_st';
+    src: url(GNKana-Kiniro_SansSerif_ST.ttf);
+}
+@font-face {
+    font-family: 'gnkana_kon_iro_nightfall';
+    src: url(GNKana-Kon-iro_Nightfall.ttf);
+}
+@font-face {
+    font-family: 'ms_gothic';
+    src: url(MS-Gothic.ttf);
+}
+@font-face {
+    font-family: 'msmincho';
+    src: url(MSMINCHO.TTF);
+}
+@font-face {
+    font-family: 'ufonts_com_ms_pgothic';
+    src: url(ufonts.com_ms-pgothic.ttf);
 }
@@ -144,8 +144,10 @@
 			$scope.typeObject = object.type;
 			switch ($scope.typeObject) {
 				case 'i-text' :
-					$('#input-design-text').focus();
 					$rootScope.isShowLeftPanel = 'text';
+					$('#input-design-text').focus(function() {
+
+					});
 					break;
  
 				case 'path-group' :
@@ -183,6 +185,72 @@
 			'#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
 			'#333333'
 		];
+		//Font
+		$scope.listFontFamily = [
+			{
+				name : 'GN Aki iro Sesami Cookies',
+				slug : 'gn_aki_iro_sesami_cookies',
+			},
+			{
+				name : 'GN-Fuyu-iro_Script_Bold',
+				slug : 'gn_fuyu_iro_script_bold'
+			},
+			{
+				name : 'GN Killgothic U Kanana',
+				slug : 'gn_killgothic_u_kanana'
+			},
+			{
+				name : 'GN-Kin-iro_Alphabet_Cookies',
+				slug : 'gn_kin_iro_alphabet_cookies'
+
+			},
+			{
+				name : 'GN-Kin-iro_SansSerif',
+				slug : 'gn_kin_iro_sansserif'
+
+			},
+			{
+				name : 'GN-Koharuiro_Sunray',
+				slug : 'gn_koharuiro_sunray'
+
+			},
+			{
+				name : 'GN-Kyu-pin',
+				slug : 'gn_kyu_pin'
+			},
+			{
+				name : 'gn_natsu_iro_schedule',
+				slug : 'gn_natsu_iro_schedule'
+
+			},
+			{
+				name : 'gnkana_kiniro_sansserif_l',
+				slug : 'gnkana_kiniro_sansserif_l'
+
+			},
+			{
+				name : 'gnkana_kiniro_sansserif_st',
+				slug : 'gnkana_kiniro_sansserif_st'
+			},
+			{
+				name : 'gnkana_kon_iro_nightfall',
+				slug : 'gnkana_kon_iro_nightfall'
+
+			},
+			{
+				name : 'ms_gothic',
+				slug : 'ms_gothic'
+
+			},
+			{
+				name : 'msmincho',
+				slug : 'msmincho'
+			},
+			{
+				name : 'ufonts_com_ms_pgothic',
+				slug : 'ufonts_com_ms_pgothic'
+			}
+		];
  
 		$scope.changeColorPattern = function(color){
 			if (canvas.getActiveObject()){
  
  
@@ -211,27 +279,9 @@
 				}
     	        canvas.renderAll();
 			}
-		}
+		};
  
-		$scope.listFontFamily = [
-			{
-				name : 'GN-Aki-iro_Sesami_Cookies',
-				slug : 'gn_aki_iro_sesami_cookies',
-			},
-			{
-				name : 'Tahoma',
-				slug : 'tahoma',
-			},
-			{
-				name : 'GN-Fuyu-iro_Script_Bold',
-				slug : 'gn_fuyu_iro_script_bold'
-			},
-			{
-				name : 'GN Killgothic U Kanana',
-				slug : 'gn_killgothic_u_kanana'
  
-			}
-		];
  
 		$scope.focusInputText = function() {
 			if($scope.typeObject != 'i-text')
  
  
  
  
@@ -260,18 +310,30 @@
 			if(canvas.getActiveObject()) {
 				var currentObject = canvas.getActiveObject();
 				if(currentObject.type == 'i-text') {
-					console.log(font);
-
 					currentObject.set('fontFamily', font);
-					currentObject.selectWord();
-
 					canvas.renderAll();
-					// currentObject.getActiveObject();
 					canvas.setActiveObject(currentObject);
 				}
  
 			}
+		};
+		//Set letter spacing text
+		var spacingNum = 0;
+		$scope.setLetterSpacingText = function(e) {
+			if(canvas.getActiveObject()) {
+				var currentObject = canvas.getActiveObject();
+				if(currentObject.type == 'i-text') {
+					if(e == 'plus')
+						spacingNum = spacingNum + 30;
+					else if (spacingNum>=30){
+						spacingNum = spacingNum - 30;
+					}
+					currentObject.set('charSpacing', spacingNum);
+					canvas.renderAll();
+					canvas.setActiveObject(currentObject);
+				}
  
+			}
 		}
 	});
 });
@@ -5,7 +5,17 @@
   font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
   /*font-family: 'gn_aki_iro_sesami_cookies';*/
 }
-
+/*Scroll bar style*/
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 7px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0,0,0,.5);
+  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+}
+/*End scroll bar style*/
 .padding-right-0{
   padding-right: 0!important;
 }
  
@@ -435,7 +445,100 @@
 .aside .box-design-option li .content .des{
   padding: 3px 10px 3px 0;
 }
+.aside .box-design-option li .content .color-patterns {
+  width: 100%;
+  border: #bbb solid 1px;
+  background: #FFF;
+  margin-top: 5px;
+}
  
+.aside .box-design-option li .content .color-patterns .color-pattern-item{
+  height: 20px;
+  float: left;
+  margin-left: 4px;
+  margin-top: 2px;
+  width: 20px;
+  cursor: pointer;
+  border: 1px solid #ddd;
+}
+
+.aside .box-design-option li .content .color-patterns .color-pattern-item:hover {
+  outline: 1px solid #ed1d24;
+}
+.aside .box-design-option li .content .layer-item {
+  text-align: center;
+  border: 1px #ddd solid;
+  background: #FFF;
+  padding: 5px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.aside .box-design-option li .content .layer-item:hover {
+  background: #ffcccc;
+}
+
+
+/*Design Text*/
+.aside #choice-text{
+
+}
+.aside #choice-text .content{
+  padding: 10px 10px;
+}
+.aside #choice-text .content ul.font-family-box{
+  list-style: none;
+  margin: 10px 0;
+  padding-left: 0;
+  height: 180px;
+  width: 100%;
+  overflow-y: scroll;
+  border: 1px solid #c0c0c0;
+}
+
+.aside #choice-text .content .font-family-box li{
+  cursor: pointer;
+  padding: 4px 8px;
+  border: 0;
+  border-bottom: 1px solid #c0c0c0;
+  border-right: 1px solid #c0c0c0;
+  font-size: 16px;
+}
+.aside #choice-text .content .spacing-letter{
+
+}
+.aside #choice-text .content .spacing-letter .text-label{
+  font-size: 16px;
+  padding: 4px 0;
+}
+.aside #choice-text .content .spacing-letter .box{
+  border: 1px solid #8c8c8c;
+  box-shadow: 0 0 5px #888888;
+  background-color: #f0f0f0;
+}
+.aside #choice-text .content .spacing-letter .item{
+  float: left;
+}
+
+.aside #choice-text .content .spacing-letter .item i.fa{
+  font-size: 22px;
+  margin: 0 0;
+  color: #000000;
+}
+.aside #choice-text .content .spacing-letter .item-text{
+  padding: 6px 20px;
+  font-size: 12px;
+}
+.aside #choice-text .content .spacing-letter .item-plus{
+  border-right: 1px solid #8c8c8c;
+}
+.aside #choice-text .content .spacing-letter .item-minus{
+  border-left: 1px solid #8c8c8c;
+}
+.aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus {
+  padding: 5px 6px 1px 6px;
+  cursor: pointer;
+}
 /*Design Choice Illustration*/
 .aside #choice-illustration li .content {
   padding: 10px 10px;
  
@@ -492,39 +595,7 @@
   background: #999999;
 }
  
-.aside #choice-illustration li .content .color-patterns {
-  width: 100%;
-  border: #bbb solid 1px;
-  background: #FFF;
-  margin-top: 5px;
-}
  
-.aside #choice-illustration li .content .color-patterns .color-pattern-item{
-  height: 20px;
-  float: left;
-  margin-left: 4px;
-  margin-top: 2px;
-  width: 20px;
-  cursor: pointer;
-  border: 1px solid #ddd;
-}
-
-.aside #choice-illustration li .content .color-patterns .color-pattern-item:hover {
-  outline: 1px solid #ed1d24;
-}
-
-.aside #choice-illustration li .content .layer-item {
-  text-align: center;
-  border: 1px #ddd solid;
-  background: #FFF;
-  padding: 5px;
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.aside #choice-illustration li .content .layer-item:hover {
-  background: #ffcccc;
-}
  
 /*Design content*/
 .tshirt-design-container{
 <li>
     <div class="title">
-        <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
-        Text
+        <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
+        文字入力
     </div>
     <div class="content clearfix">
         <div>
-            <input type="text" class="form-control" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text">
+            <input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text">
         </div>
         <div>
-            <ul>
+            <ul class="font-family-box">
                 <li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li>
             </ul>
         </div>
         <div>
-            <div></div>
+            <div>文字を変形する</div>
         </div>
-        <div>
-            <label>Letter Spacing</label>
-            <div class="group">
-                <i class="fa fa-minus-square" aria-hidden="true"></i> Letter Spacing <i class="fa fa-plus-square" aria-hidden="true"></i>
+        <div class="clearfix spacing-letter ">
+            <div class="pull-left text-label">
+                文字間隔 :
             </div>
+            <div class="pull-right">
+                <div class="box clearfix">
+                    <div class="item item-plus" ng-click="setLetterSpacingText('plus')">
+                        <i class="fa fa-plus-square-o" aria-hidden="true"></i>
+                    </div>
+                    <div class="item item-text">
+                        リセット
+                    </div>
+                    <div class="item item-minus" ng-click="setLetterSpacingText('minus')">
+                        <i class="fa fa-minus-square-o" aria-hidden="true"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</li>
+<li>
+    <div class="title">
+        <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
+        カラー変更
+        <!--<div class="pull-right">元の色に戻す</div>-->
+    </div>
+    <div class="content clearfix">
+        <div class="color-patterns">
+            <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">
+            </div>
+            <div class="clearfix"></div>
+        </div>
+    </div>
+</li>
+
+<li>
+    <div class="title">
+        <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
+        重ね順変更
+    </div>
+    <div class="content clearfix">
+        <div class="col-xs-3 layer-item" ng-click="layerProcess(1)">
+            <img src="images/layer-icon-1.png"/>
+            <div>前面へ</div>
+        </div>
+        <div class="col-xs-3 layer-item" ng-click="layerProcess(2)">
+            <img src="images/layer-icon-2.png"/>
+            <div>背面へ</div>
+        </div>
+        <div class="col-xs-3 layer-item" ng-click="layerProcess(3)">
+            <img src="images/layer-icon-3.png"/>
+            <div>最前面へ</div>
+        </div>
+        <div class="col-xs-3 layer-item" ng-click="layerProcess(4)">
+            <img src="images/layer-icon-4.png"/>
+            <div>最前面へ</div>
         </div>
     </div>
 </li>
...	...	@@ -6,17 +6,61 @@
6	6	font-family: 'gn_fuyu_iro_script_bold';
7	7	src: url(GN-Fuyu-iro_Script_Bold.ttf);
8	8	}
	9	+@font-face {
	10	+ font-family: 'gn_killgothic_u_kanana';
	11	+ src: url(GN-KillGothic-U-KanaNA.ttf);
	12	+}
9	13
10	14	@font-face {
11		- font-family: 'gn_aki_iro_sesami_cookies';
12		- src: url(GN-Aki-iro_Sesami_Cookies.ttf);
	15	+ font-family: 'gn_kin_iro_alphabet_cookies';
	16	+ src: url(GN-Kin-iro_Alphabet_Cookies.ttf);
13	17	}
14	18	@font-face {
15		- font-family: 'gn_aki_iro_sesami_cookies';
16		- src: url(GN-Aki-iro_Sesami_Cookies.ttf);
	19	+ font-family: 'gn_kin_iro_sansserif';
	20	+ src: url(GN-Kin-iro_SansSerif.ttf);
17	21	}
18	22	@font-face {
19		- font-family: 'gn_killgothic_u_kanana';
20		- src: url(GN-KillGothic-U-KanaNA.ttf);
	23	+ font-family: 'gn_koharuiro_sunray';
	24	+ src: url(GN-Koharuiro_Sunray.ttf);
	25	+}
	26	+@font-face {
	27	+ font-family: 'gn_kyu_pin';
	28	+ src: url(GN-Kyu-pin.ttf);
	29	+}
	30	+@font-face {
	31	+ font-family: 'gn_natsu_iro_schedule';
	32	+ src: url(GN-Natsu-iro-Schedule.ttf);
	33	+}
	34	+@font-face {
	35	+ font-family: 'gn_natsuiro_schedule';
	36	+ src: url(GN-Natsuiro_Schedule.ttf);
	37	+}
	38	+@font-face {
	39	+ font-family: 'gnkana_kiniro_elegance';
	40	+ src: url(GNKana-Kiniro_Elegance.ttf);
	41	+}
	42	+@font-face {
	43	+ font-family: 'gnkana_kiniro_sansserif_l';
	44	+ src: url(GNKana-Kiniro_SansSerif_L.ttf);
	45	+}
	46	+@font-face {
	47	+ font-family: 'gnkana_kiniro_sansserif_st';
	48	+ src: url(GNKana-Kiniro_SansSerif_ST.ttf);
	49	+}
	50	+@font-face {
	51	+ font-family: 'gnkana_kon_iro_nightfall';
	52	+ src: url(GNKana-Kon-iro_Nightfall.ttf);
	53	+}
	54	+@font-face {
	55	+ font-family: 'ms_gothic';
	56	+ src: url(MS-Gothic.ttf);
	57	+}
	58	+@font-face {
	59	+ font-family: 'msmincho';
	60	+ src: url(MSMINCHO.TTF);
	61	+}
	62	+@font-face {
	63	+ font-family: 'ufonts_com_ms_pgothic';
	64	+ src: url(ufonts.com_ms-pgothic.ttf);
21	65	}
...	...	@@ -144,8 +144,10 @@
144	144	$scope.typeObject = object.type;
145	145	switch ($scope.typeObject) {
146	146	case 'i-text' :
147		- $('#input-design-text').focus();
148	147	$rootScope.isShowLeftPanel = 'text';
	148	+ $('#input-design-text').focus(function() {
	149	+
	150	+ });
149	151	break;
150	152
151	153	case 'path-group' :
...	...	@@ -183,6 +185,72 @@
183	185	'#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
184	186	'#333333'
185	187	];
	188	+ //Font
	189	+ $scope.listFontFamily = [
	190	+ {
	191	+ name : 'GN Aki iro Sesami Cookies',
	192	+ slug : 'gn_aki_iro_sesami_cookies',
	193	+ },
	194	+ {
	195	+ name : 'GN-Fuyu-iro_Script_Bold',
	196	+ slug : 'gn_fuyu_iro_script_bold'
	197	+ },
	198	+ {
	199	+ name : 'GN Killgothic U Kanana',
	200	+ slug : 'gn_killgothic_u_kanana'
	201	+ },
	202	+ {
	203	+ name : 'GN-Kin-iro_Alphabet_Cookies',
	204	+ slug : 'gn_kin_iro_alphabet_cookies'
	205	+
	206	+ },
	207	+ {
	208	+ name : 'GN-Kin-iro_SansSerif',
	209	+ slug : 'gn_kin_iro_sansserif'
	210	+
	211	+ },
	212	+ {
	213	+ name : 'GN-Koharuiro_Sunray',
	214	+ slug : 'gn_koharuiro_sunray'
	215	+
	216	+ },
	217	+ {
	218	+ name : 'GN-Kyu-pin',
	219	+ slug : 'gn_kyu_pin'
	220	+ },
	221	+ {
	222	+ name : 'gn_natsu_iro_schedule',
	223	+ slug : 'gn_natsu_iro_schedule'
	224	+
	225	+ },
	226	+ {
	227	+ name : 'gnkana_kiniro_sansserif_l',
	228	+ slug : 'gnkana_kiniro_sansserif_l'
	229	+
	230	+ },
	231	+ {
	232	+ name : 'gnkana_kiniro_sansserif_st',
	233	+ slug : 'gnkana_kiniro_sansserif_st'
	234	+ },
	235	+ {
	236	+ name : 'gnkana_kon_iro_nightfall',
	237	+ slug : 'gnkana_kon_iro_nightfall'
	238	+
	239	+ },
	240	+ {
	241	+ name : 'ms_gothic',
	242	+ slug : 'ms_gothic'
	243	+
	244	+ },
	245	+ {
	246	+ name : 'msmincho',
	247	+ slug : 'msmincho'
	248	+ },
	249	+ {
	250	+ name : 'ufonts_com_ms_pgothic',
	251	+ slug : 'ufonts_com_ms_pgothic'
	252	+ }
	253	+ ];
186	254
187	255	$scope.changeColorPattern = function(color){
188	256	if (canvas.getActiveObject()){
189	257
190	258
...	...	@@ -211,27 +279,9 @@
211	279	}
212	280	canvas.renderAll();
213	281	}
214		- }
	282	+ };
215	283
216		- $scope.listFontFamily = [
217		- {
218		- name : 'GN-Aki-iro_Sesami_Cookies',
219		- slug : 'gn_aki_iro_sesami_cookies',
220		- },
221		- {
222		- name : 'Tahoma',
223		- slug : 'tahoma',
224		- },
225		- {
226		- name : 'GN-Fuyu-iro_Script_Bold',
227		- slug : 'gn_fuyu_iro_script_bold'
228		- },
229		- {
230		- name : 'GN Killgothic U Kanana',
231		- slug : 'gn_killgothic_u_kanana'
232	284
233		- }
234		- ];
235	285
236	286	$scope.focusInputText = function() {
237	287	if($scope.typeObject != 'i-text')
238	288
239	289
240	290
241	291
...	...	@@ -260,18 +310,30 @@
260	310	if(canvas.getActiveObject()) {
261	311	var currentObject = canvas.getActiveObject();
262	312	if(currentObject.type == 'i-text') {
263		- console.log(font);
264		-
265	313	currentObject.set('fontFamily', font);
266		- currentObject.selectWord();
267		-
268	314	canvas.renderAll();
269		- // currentObject.getActiveObject();
270	315	canvas.setActiveObject(currentObject);
271	316	}
272	317
273	318	}
	319	+ };
	320	+ //Set letter spacing text
	321	+ var spacingNum = 0;
	322	+ $scope.setLetterSpacingText = function(e) {
	323	+ if(canvas.getActiveObject()) {
	324	+ var currentObject = canvas.getActiveObject();
	325	+ if(currentObject.type == 'i-text') {
	326	+ if(e == 'plus')
	327	+ spacingNum = spacingNum + 30;
	328	+ else if (spacingNum>=30){
	329	+ spacingNum = spacingNum - 30;
	330	+ }
	331	+ currentObject.set('charSpacing', spacingNum);
	332	+ canvas.renderAll();
	333	+ canvas.setActiveObject(currentObject);
	334	+ }
274	335
	336	+ }
275	337	}
276	338	});
277	339	});
...	...	@@ -5,7 +5,17 @@
5	5	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
6	6	/font-family: 'gn_aki_iro_sesami_cookies';/
7	7	}
8		-
	8	+/Scroll bar style/
	9	+::-webkit-scrollbar {
	10	+ -webkit-appearance: none;
	11	+ width: 7px;
	12	+}
	13	+::-webkit-scrollbar-thumb {
	14	+ border-radius: 4px;
	15	+ background-color: rgba(0,0,0,.5);
	16	+ -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
	17	+}
	18	+/End scroll bar style/
9	19	.padding-right-0{
10	20	padding-right: 0!important;
11	21	}
12	22
...	...	@@ -435,7 +445,100 @@
435	445	.aside .box-design-option li .content .des{
436	446	padding: 3px 10px 3px 0;
437	447	}
	448	+.aside .box-design-option li .content .color-patterns {
	449	+ width: 100%;
	450	+ border: #bbb solid 1px;
	451	+ background: #FFF;
	452	+ margin-top: 5px;
	453	+}
438	454
	455	+.aside .box-design-option li .content .color-patterns .color-pattern-item{
	456	+ height: 20px;
	457	+ float: left;
	458	+ margin-left: 4px;
	459	+ margin-top: 2px;
	460	+ width: 20px;
	461	+ cursor: pointer;
	462	+ border: 1px solid #ddd;
	463	+}
	464	+
	465	+.aside .box-design-option li .content .color-patterns .color-pattern-item:hover {
	466	+ outline: 1px solid #ed1d24;
	467	+}
	468	+.aside .box-design-option li .content .layer-item {
	469	+ text-align: center;
	470	+ border: 1px #ddd solid;
	471	+ background: #FFF;
	472	+ padding: 5px;
	473	+ font-size: 12px;
	474	+ cursor: pointer;
	475	+}
	476	+
	477	+.aside .box-design-option li .content .layer-item:hover {
	478	+ background: #ffcccc;
	479	+}
	480	+
	481	+
	482	+/Design Text/
	483	+.aside #choice-text{
	484	+
	485	+}
	486	+.aside #choice-text .content{
	487	+ padding: 10px 10px;
	488	+}
	489	+.aside #choice-text .content ul.font-family-box{
	490	+ list-style: none;
	491	+ margin: 10px 0;
	492	+ padding-left: 0;
	493	+ height: 180px;
	494	+ width: 100%;
	495	+ overflow-y: scroll;
	496	+ border: 1px solid #c0c0c0;
	497	+}
	498	+
	499	+.aside #choice-text .content .font-family-box li{
	500	+ cursor: pointer;
	501	+ padding: 4px 8px;
	502	+ border: 0;
	503	+ border-bottom: 1px solid #c0c0c0;
	504	+ border-right: 1px solid #c0c0c0;
	505	+ font-size: 16px;
	506	+}
	507	+.aside #choice-text .content .spacing-letter{
	508	+
	509	+}
	510	+.aside #choice-text .content .spacing-letter .text-label{
	511	+ font-size: 16px;
	512	+ padding: 4px 0;
	513	+}
	514	+.aside #choice-text .content .spacing-letter .box{
	515	+ border: 1px solid #8c8c8c;
	516	+ box-shadow: 0 0 5px #888888;
	517	+ background-color: #f0f0f0;
	518	+}
	519	+.aside #choice-text .content .spacing-letter .item{
	520	+ float: left;
	521	+}
	522	+
	523	+.aside #choice-text .content .spacing-letter .item i.fa{
	524	+ font-size: 22px;
	525	+ margin: 0 0;
	526	+ color: #000000;
	527	+}
	528	+.aside #choice-text .content .spacing-letter .item-text{
	529	+ padding: 6px 20px;
	530	+ font-size: 12px;
	531	+}
	532	+.aside #choice-text .content .spacing-letter .item-plus{
	533	+ border-right: 1px solid #8c8c8c;
	534	+}
	535	+.aside #choice-text .content .spacing-letter .item-minus{
	536	+ border-left: 1px solid #8c8c8c;
	537	+}
	538	+.aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus {
	539	+ padding: 5px 6px 1px 6px;
	540	+ cursor: pointer;
	541	+}
439	542	/Design Choice Illustration/
440	543	.aside #choice-illustration li .content {
441	544	padding: 10px 10px;
442	545
...	...	@@ -492,39 +595,7 @@
492	595	background: #999999;
493	596	}
494	597
495		-.aside #choice-illustration li .content .color-patterns {
496		- width: 100%;
497		- border: #bbb solid 1px;
498		- background: #FFF;
499		- margin-top: 5px;
500		-}
501	598
502		-.aside #choice-illustration li .content .color-patterns .color-pattern-item{
503		- height: 20px;
504		- float: left;
505		- margin-left: 4px;
506		- margin-top: 2px;
507		- width: 20px;
508		- cursor: pointer;
509		- border: 1px solid #ddd;
510		-}
511		-
512		-.aside #choice-illustration li .content .color-patterns .color-pattern-item:hover {
513		- outline: 1px solid #ed1d24;
514		-}
515		-
516		-.aside #choice-illustration li .content .layer-item {
517		- text-align: center;
518		- border: 1px #ddd solid;
519		- background: #FFF;
520		- padding: 5px;
521		- font-size: 12px;
522		- cursor: pointer;
523		-}
524		-
525		-.aside #choice-illustration li .content .layer-item:hover {
526		- background: #ffcccc;
527		-}
528	599
529	600	/Design content/
530	601	.tshirt-design-container{
1	1	<li>
2	2	<div class="title">
3		- <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
4		- Text
	3	+ <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
	4	+ 文字入力
5	5	</div>
6	6	<div class="content clearfix">
7	7	<div>
8		- <input type="text" class="form-control" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text">
	8	+ <input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text">
9	9	</div>
10	10	<div>
11		- <ul>
	11	+ <ul class="font-family-box">
12	12	<li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li>
13	13	</ul>
14	14	</div>
15	15	<div>
16		- <div></div>
	16	+ <div>文字を変形する</div>
17	17	</div>
18		- <div>
19		- <label>Letter Spacing</label>
20		- <div class="group">
21		- <i class="fa fa-minus-square" aria-hidden="true"></i> Letter Spacing <i class="fa fa-plus-square" aria-hidden="true"></i>
	18	+ <div class="clearfix spacing-letter ">
	19	+ <div class="pull-left text-label">
	20	+ 文字間隔 :
22	21	</div>
	22	+ <div class="pull-right">
	23	+ <div class="box clearfix">
	24	+ <div class="item item-plus" ng-click="setLetterSpacingText('plus')">
	25	+ <i class="fa fa-plus-square-o" aria-hidden="true"></i>
	26	+ </div>
	27	+ <div class="item item-text">
	28	+ リセット
	29	+ </div>
	30	+ <div class="item item-minus" ng-click="setLetterSpacingText('minus')">
	31	+ <i class="fa fa-minus-square-o" aria-hidden="true"></i>
	32	+ </div>
	33	+ </div>
	34	+ </div>
	35	+ </div>
	36	+ </div>
	37	+</li>
	38	+<li>
	39	+ <div class="title">
	40	+ <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
	41	+ カラー変更
	42	+ <!--<div class="pull-right">元の色に戻す</div>-->
	43	+ </div>
	44	+ <div class="content clearfix">
	45	+ <div class="color-patterns">
	46	+ <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">
	47	+ </div>
	48	+ <div class="clearfix"></div>
	49	+ </div>
	50	+ </div>
	51	+</li>
	52	+
	53	+<li>
	54	+ <div class="title">
	55	+ <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
	56	+ 重ね順変更
	57	+ </div>
	58	+ <div class="content clearfix">
	59	+ <div class="col-xs-3 layer-item" ng-click="layerProcess(1)">
	60	+ <img src="images/layer-icon-1.png"/>
	61	+ <div>前面へ</div>
	62	+ </div>
	63	+ <div class="col-xs-3 layer-item" ng-click="layerProcess(2)">
	64	+ <img src="images/layer-icon-2.png"/>
	65	+ <div>背面へ</div>
	66	+ </div>
	67	+ <div class="col-xs-3 layer-item" ng-click="layerProcess(3)">
	68	+ <img src="images/layer-icon-3.png"/>
	69	+ <div>最前面へ</div>
	70	+ </div>
	71	+ <div class="col-xs-3 layer-item" ng-click="layerProcess(4)">
	72	+ <img src="images/layer-icon-4.png"/>
	73	+ <div>最前面へ</div>
23	74	</div>
24	75	</div>
25	76	</li>