merge #1759

TRUONG
1 parent f2c2d23dd7
Showing 3 changed files with 92 additions and 6 deletions Side-by-side Diff
app/scripts/controllers/tshirtdesign.js
app/styles/main.css
app/views/design_part/image.html
@@ -153,6 +153,10 @@
 				case 'path-group' :
 					$rootScope.isShowLeftPanel = 'illustration';
 					break;
+					
+				case 'image':
+					$rootScope.isShowLeftPanel = 'image';
+					break;
  
 				default :
 					$rootScope.isShowLeftPanel = 'default';
@@ -334,6 +338,29 @@
 				}
  
 			}
+		}
+		
+		
+		/**** process insert image */
+		$scope.chooseImage = function(e){console.log(e);
+			var reader = new FileReader();
+		    reader.onload = function (event) { console.log('fdsf');
+		        var imgObj = new Image();
+		        imgObj.src = event.target.result;
+		        imgObj.onload = function () {
+		            // start fabricJS stuff
+		            
+		            var image = new fabric.Image(imgObj);
+		            image.set({
+		                left: 50,
+		                top: 50
+		            });
+		            //image.scale(getRandomNum(0.1, 0.25)).setCoords();
+		            image.scaleToWidth(200);
+		            canvas.add(image);
+		        }
+		    }
+    		reader.readAsDataURL(e.target.files[0]);
 		}
 	});
 });
@@ -406,13 +406,12 @@
   padding-left: 0;
   margin-top: 10px;
 }
-.aside .box-design-option li{
  
-}
 .aside .box-design-option li{
   border: 1px solid #cdcdcd;
   position: relative;
   /*cursor: pointer;*/
+  margin-bottom: 10px;
 }
 .aside .box-design-option li .hover{
   background-color: #fddad4;
@@ -450,6 +449,7 @@
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 5px;
+  min-height: 65px;
 }
  
 .aside .box-design-option li .content .color-patterns .color-pattern-item{
@@ -553,6 +553,7 @@
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 5px;
+  min-height: 350px;
 }
  
 .aside #choice-illustration li .content .illustration-list .illstration-item{
  
@@ -595,7 +596,42 @@
   background: #999999;
 }
  
+#btn-choose-image {
+  background: #ff0f00;
+  cursor: pointer;
+  margin: 10px 0px;
+  padding: 0 10px;
+  color: #FFF;
+  font-size: 12px;
+}
  
+#btn-choose-image:hover {
+  background: #f8aeae;
+}
+
+.aside #choice-image li .content {
+  margin: 0 10px;
+  padding: 10px 0;
+}
+
+.aside #choice-image li .content .small-text {
+  font-size:10px;
+  margin-bottom: 10px;
+}
+
+.aside #choice-image {
+  font-size: 13px;
+}
+
+.aside #imgLoader{
+  display: none;
+}
+
+.aside #choice-image li .content .list-images {
+  height: 300px;
+  background: #FFF;
+  border: 1px solid #DDD;
+}
  
 /*Design content*/
 .tshirt-design-container{
 <li>
     <div class="title">
         <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
-        イラスト・イメージ選択
+        自分の画像・写真
     </div>
     <div class="content clearfix">
-        
+        <input type="file" id="imgLoader" onchange="angular.element(this).scope().chooseImage(event)">
+        <div id="btn-choose-image" onclick="$('#imgLoader').click()">＞　ファイルを選択してアップロード</div>
+        <div class="small-text">ファイルサイズ5MBまで（JPEG、PNG）</div>
+        <div>アップ済み画像・写真リスト</div>
+        <div class="list-images"></div>
     </div>
 </li>
+
 <li>
     <div class="title">
         <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
  
  
@@ -14,16 +19,34 @@
         <div class="pull-right">元の色に戻す</div>
     </div>
     <div class="content clearfix">
-        
+        <div class="color-patterns">
+            
+        </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>
...	...	@@ -153,6 +153,10 @@
153	153	case 'path-group' :
154	154	$rootScope.isShowLeftPanel = 'illustration';
155	155	break;
	156	+
	157	+ case 'image':
	158	+ $rootScope.isShowLeftPanel = 'image';
	159	+ break;
156	160
157	161	default :
158	162	$rootScope.isShowLeftPanel = 'default';
...	...	@@ -334,6 +338,29 @@
334	338	}
335	339
336	340	}
	341	+ }
	342	+
	343	+
	344	+ /**** process insert image */
	345	+ $scope.chooseImage = function(e){console.log(e);
	346	+ var reader = new FileReader();
	347	+ reader.onload = function (event) { console.log('fdsf');
	348	+ var imgObj = new Image();
	349	+ imgObj.src = event.target.result;
	350	+ imgObj.onload = function () {
	351	+ // start fabricJS stuff
	352	+
	353	+ var image = new fabric.Image(imgObj);
	354	+ image.set({
	355	+ left: 50,
	356	+ top: 50
	357	+ });
	358	+ //image.scale(getRandomNum(0.1, 0.25)).setCoords();
	359	+ image.scaleToWidth(200);
	360	+ canvas.add(image);
	361	+ }
	362	+ }
	363	+ reader.readAsDataURL(e.target.files[0]);
337	364	}
338	365	});
339	366	});
...	...	@@ -406,13 +406,12 @@
406	406	padding-left: 0;
407	407	margin-top: 10px;
408	408	}
409		-.aside .box-design-option li{
410	409
411		-}
412	410	.aside .box-design-option li{
413	411	border: 1px solid #cdcdcd;
414	412	position: relative;
415	413	/cursor: pointer;/
	414	+ margin-bottom: 10px;
416	415	}
417	416	.aside .box-design-option li .hover{
418	417	background-color: #fddad4;
...	...	@@ -450,6 +449,7 @@
450	449	border: #bbb solid 1px;
451	450	background: #FFF;
452	451	margin-top: 5px;
	452	+ min-height: 65px;
453	453	}
454	454
455	455	.aside .box-design-option li .content .color-patterns .color-pattern-item{
...	...	@@ -553,6 +553,7 @@
553	553	border: #bbb solid 1px;
554	554	background: #FFF;
555	555	margin-top: 5px;
	556	+ min-height: 350px;
556	557	}
557	558
558	559	.aside #choice-illustration li .content .illustration-list .illstration-item{
559	560
...	...	@@ -595,7 +596,42 @@
595	596	background: #999999;
596	597	}
597	598
	599	+#btn-choose-image {
	600	+ background: #ff0f00;
	601	+ cursor: pointer;
	602	+ margin: 10px 0px;
	603	+ padding: 0 10px;
	604	+ color: #FFF;
	605	+ font-size: 12px;
	606	+}
598	607
	608	+#btn-choose-image:hover {
	609	+ background: #f8aeae;
	610	+}
	611	+
	612	+.aside #choice-image li .content {
	613	+ margin: 0 10px;
	614	+ padding: 10px 0;
	615	+}
	616	+
	617	+.aside #choice-image li .content .small-text {
	618	+ font-size:10px;
	619	+ margin-bottom: 10px;
	620	+}
	621	+
	622	+.aside #choice-image {
	623	+ font-size: 13px;
	624	+}
	625	+
	626	+.aside #imgLoader{
	627	+ display: none;
	628	+}
	629	+
	630	+.aside #choice-image li .content .list-images {
	631	+ height: 300px;
	632	+ background: #FFF;
	633	+ border: 1px solid #DDD;
	634	+}
599	635
600	636	/Design content/
601	637	.tshirt-design-container{
1	1	<li>
2	2	<div class="title">
3	3	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
4		- イラスト・イメージ選択
	4	+ 自分の画像・写真
5	5	</div>
6	6	<div class="content clearfix">
7		-
	7	+ <input type="file" id="imgLoader" onchange="angular.element(this).scope().chooseImage(event)">
	8	+ <div id="btn-choose-image" onclick="$('#imgLoader').click()">＞　ファイルを選択してアップロード</div>
	9	+ <div class="small-text">ファイルサイズ5MBまで（JPEG、PNG）</div>
	10	+ <div>アップ済み画像・写真リスト</div>
	11	+ <div class="list-images"></div>
8	12	</div>
9	13	</li>
	14	+
10	15	<li>
11	16	<div class="title">
12	17	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
13	18
14	19
...	...	@@ -14,16 +19,34 @@
14	19	<div class="pull-right">元の色に戻す</div>
15	20	</div>
16	21	<div class="content clearfix">
17		-
	22	+ <div class="color-patterns">
	23	+
	24	+ </div>
18	25	</div>
19	26	</li>
	27	+
20	28	<li>
21	29	<div class="title">
22	30	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
23	31	重ね順変更
24	32	</div>
25	33	<div class="content clearfix">
26		-
	34	+ <div class="col-xs-3 layer-item" ng-click="layerProcess(1)">
	35	+ <img src="images/layer-icon-1.png"/>
	36	+ <div>前面へ</div>
	37	+ </div>
	38	+ <div class="col-xs-3 layer-item" ng-click="layerProcess(2)">
	39	+ <img src="images/layer-icon-2.png"/>
	40	+ <div>背面へ</div>
	41	+ </div>
	42	+ <div class="col-xs-3 layer-item" ng-click="layerProcess(3)">
	43	+ <img src="images/layer-icon-3.png"/>
	44	+ <div>最前面へ</div>
	45	+ </div>
	46	+ <div class="col-xs-3 layer-item" ng-click="layerProcess(4)">
	47	+ <img src="images/layer-icon-4.png"/>
	48	+ <div>最前面へ</div>
	49	+ </div>
27	50	</div>
28	51	</li>