TRUONG / T-Shats Frontend

Browse Code »

Commit e5669639a3616e867f5fa153024c37d13b6d3cea

Authored by TRUONG 2016-11-18 00:07:49 +0900

1 parent f2c2d23dd7

Exists in master and in 1 other branch

merge #1759

Showing 3 changed files with 92 additions and 6 deletions Inline Diff

app/scripts/controllers/tshirtdesign.js
app/styles/main.css
app/views/design_part/image.html

app/scripts/controllers/tshirtdesign.js

Diff comments View file @ e566963

 define(['app'], function (app) {
 	//'use strict';
 	app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) {
 		var canvas = new fabric.Canvas('main-design-container');
 		fabric.Object.prototype.transparentCorners = false;
 		canvas.on('after:render', function() {
 		});
 		canvas.on({
 			'object:added': onIllustrationAdded,
 			'object:moving': onIllustrationChange,
 			'object:scaling': onIllustrationChange,
 			'object:rotating': onIllustrationChange,
 			'object:selected': onIllustrationSelected,
 			'object:modified': onIllustrationModifield,
 			'selected:deselected' : onIllustrationOut,
 			//'selected:out'     : onIllustrationOut,
 			//'mouse:up' : onIllustrationOut,
 		});
 		var currentObj;
 		var listObj = [];
 		var stateObj = [];
 		var indexCurr = 0;
 		var indexCurr2 = 0;
 		var actionObj = false;
 		var refreshObj = true;
 		function onIllustrationAdded(options){
 			var object = options.target;
 		    console.log('object:added');
 		    if (actionObj === true) {
 		        stateObj = [stateObj[indexCurr2]];
 		        listObj = [listObj[indexCurr2]];
 		        actionObj = false;
 		        console.log(stateObj);
 		        indexCurr = 1;
 		    }
 		    object.saveState();
 		    console.log(object.originalState);
 		    stateObj[indexCurr] = JSON.stringify(object.originalState);
 		    listObj[indexCurr] = object;
 		    indexCurr++;
 		    indexCurr2 = indexCurr - 1;
 		    refreshObj = true;
 		}
 		function onIllustrationModifield(options){
 			var objOffset = canvas.getActiveObject().getBoundingRect();
 			var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50;
 			//console.log(objOffset,canvas.height,canvas.width);
 			if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
 				if (confirm('削除してもよろしいですか')){
 					canvas.getActiveObject().remove();
 				}else{
 					undoCanvas();
 					return;
 				}
 			}
 			var object = options.target;
 		    console.log('object:modified');
 		    if (actionObj === true) {
 		        stateObj = [stateObj[indexCurr2]];
 		        listObj = [listObj[indexCurr2]];
 		        actionObj = false;
 		        console.log(stateObj);
 		        indexCurr = 1;
 		    }
 		    object.saveState();
 		    stateObj[indexCurr] = JSON.stringify(object.originalState);
 		    listObj[indexCurr] = object;
 		    indexCurr++;
 		    indexCurr2 = indexCurr - 1;
 		    console.log(stateObj);
 		    refreshObj = true;
 		}
 		function onIllustrationChange(options) {
 			// options.target.setCoords();
 			// canvas.forEachObject(function(obj) {
 			// if (obj === options.target) return;
 			// 	obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
 			// });
 		}
 		function onIllustrationOut() {
 			console.log('out object');
 		}
 		function undoCanvas() {
 		    if (indexCurr <= 0) {
 		        indexCurr = 0;
 		        return;
 		    }
 		    if (refreshObj === true) {
 		        indexCurr--;
 		        refreshObj = false;
 		    }
 		    console.log('undo');
 		    indexCurr2 = indexCurr - 1;
 		    currentObj = listObj[indexCurr2];
 		    if (currentObj){
 		    	currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
 		    }
 		    indexCurr--;
 		    currentObj.setCoords();
 		    canvas.renderAll();
 		    actionObj = true;
 		}
 		function redoCanvas() {
 		    actionObj = true;
 		    if (indexCurr >= stateObj.length - 1) {
 		        return;
 		    }
 		    console.log('redo');
 		    indexCurr2 = indexCurr + 1;
 		    currentObj = listObj[indexCurr2];
 		    currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
 		    indexCurr++;
 		    currentObj.setCoords();
 		    canvas.renderAll();
 		}
 		$scope.currentObject = null;
 		function onIllustrationSelected(options) {
 			var object = options.target;
 			$scope.typeObject = object.type;
 			switch ($scope.typeObject) {
 				case 'i-text' :
 					$rootScope.isShowLeftPanel = 'text';
 					$('#input-design-text').focus(function() {
 					});
 					break;
 				case 'path-group' :
 					$rootScope.isShowLeftPanel = 'illustration';
 					break;
+				case 'image':
+					$rootScope.isShowLeftPanel = 'image';
+					break;
 				default :
 					$rootScope.isShowLeftPanel = 'default';
 					break;
 			}
 			$rootScope.safeApply();
 		}
 		// Illustration process
 		$scope.changeIllustrationCategory = function(currentIllustration){
 			$scope.currentIllustrationCate = $illustration.getList(currentIllustration);
 			//console.log($scope.currentIllustrationCate);
 		};
 		$scope.insertSvg = function(item){
 			fabric.loadSVGFromURL(item.path, function(objects, options) {
 				var shape = fabric.util.groupSVGElements(objects, options);
 				// shape.setFill('green');
 				canvas.add(shape.scale(0.6));
 				shape.set({ left: 150, top: 200 }).setCoords();
 				canvas.renderAll();
 				canvas.setActiveObject(shape);
 			});
 		};
 		// color pattern
 		$scope.listColorPatterns = [
 			'#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
 			'#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
 			'#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
 			'#333333'
 		];
 		//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()){
 				canvas.getActiveObject().set("fill", color);
     	        canvas.renderAll();
 			}
 		};
 		// layer process
 		$scope.layerProcess = function(mode){
 			var activeObject = canvas.getActiveObject()
 			if (activeObject){
 				switch (mode) {
 					case 1:
 						activeObject.bringForward();
 						break;
 					case 2:
 						activeObject.sendBackwards();
 						break;
 					case 3:
 						activeObject.bringToFront();
 						break;
 					case 4:
 						activeObject.sendToBack();
 						break;
 				}
     	        canvas.renderAll();
 			}
 		};
 		$scope.focusInputText = function() {
 			if($scope.typeObject != 'i-text')
 				$scope.iText = new fabric.IText('', {
 					left: 150,
 					top: 200,
 					fontFamily: 'Arial',
 					fontWeight: 'normal',
 					fontSize: 28,
 					fill: 'black'
 				});
 		};
 		//Design text
 		$scope.inputText = function(e) {
 			var iText = $scope.iText;
 			if(e != '') {
 				iText.text = e;
 				iText.set().setCoords();
 				canvas.add(iText);
 				canvas.renderAll();
 				canvas.setActiveObject(iText);
 			}
 		};
 		$scope.setFontFamily = function(font) {
 			if(canvas.getActiveObject()) {
 				var currentObject = canvas.getActiveObject();
 				if(currentObject.type == 'i-text') {
 					currentObject.set('fontFamily', font);
 					canvas.renderAll();
 					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);
 				}
 			}
+		}
+		/**** 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]);
 		}
 	});
 });

app/styles/main.css

Diff comments View file @ e566963

 /* Space out content a bit */
 @import "../fonts/font.css";
 @import "../fonts/font_canvas/font-canvas.css";
 body {
   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;
 }
 .padding-left-0{
   padding-left: 0!important;
 }
 button.red{
   color: #ffffff;
   background-color: #ff0000;
   border: 1px solid #ff0000;
 }
 button.white{
   border: 1px solid #ff8080;
   color: #ff8080;
   background-color: #ffffff;
 }
 button.brown{
   background-color: #666666;
   border: 1px solid #666666;
   color: #ffffff;
   border-radius: 5px;
 }
 button.black{
   border: 1px solid #c9c9c9;
   background-color: #343434;
   color: #ffffff;
   padding: 1px 6px;
 }
 #tshirt-container{
   border-left: 1px solid #dcdcdc;
   border-right: 1px solid #dcdcdc;
 }
 /*HEADER*/
 header{
   border-bottom: 1px solid #dcdcdc;
 }
 header .logo{
   color: #ed1d24;
   font-size: 30px;
   text-transform: uppercase;
   font-weight: bold;
 }
 header .logo img{
   width: 60px;
 }
 /*NAVIGATION*/
 nav{
   border-bottom: 1px solid #dcdcdc;
   padding: 10px 0;
 }
 nav h2{
   font-size: 27px;
   margin: 0 0;
 }
 nav ul{
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
 }
 nav ul li{
   margin-left: 2px;
   float: left;
   padding: 6px 12px;
   background-color: #999999;
   position: relative;
 }
 nav ul li i.fa{
   position: absolute;
   color: #ffffff;
   font-size: 18px;
   right: -4px;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
 }
 nav ul li a{
   color: #ffffff;
 }
 nav ul li:hover a{
   text-decoration: none;
   color: #ffffff;
 }
 nav ul li.action{
   color: #ffffff;
   background-color: #ed1d24;
 }
 /*ASIDE*/
 aside{
   margin: 10px 0;
 }
 aside .break-down{
   padding: 0 0;
 }
 aside .break-down i.fa{
   font-size: 35px;
   color: #ff0000;
 }
 aside .break-line{
   height: 10px;
 }
 aside .break-line hr{
   border-top: 1px dotted #cccccc;
 }
 aside .step{
   margin: 0 0;
 }
 aside .step .title{
   font-size: 15px;
   line-height: 16px;
   font-weight: bold;
   margin-bottom: 3px;
 }
 aside .step .title-notice{
   font-size: 13px;
   line-height: 16px;
   margin-bottom: 3px;
 }
 aside .step .title-notice .require{
   font-size: 10px;
 }
 aside .step .step-box{
   border: 2px solid #dcdcdc;
   font-size: 12px;
 }
 /*Step 1*/
 aside .step .step-box .tshirt-design{
   border: 1px solid #cccccc;
   background-color: #f5f5f5;
   margin: 10px 10px;
 }
 aside .step .step-box .tshirt-design:hover{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-design button:hover{
   background-color: #fa7b7b;
   border: 1px solid #fa7b7b;
 }
 aside .step .step-box .tshirt-design div{
   float: left;
 }
 aside .step .step-box .tshirt-design .icon{
   padding: 4px 4px;
   border-right: 1px solid #cccccc;
 }
 aside .step .step-box .tshirt-design .icon img{
   height: 50px;
 }
 aside .step .step-box .tshirt-design .name{
   padding: 10px 10px;
 }
 aside .step .step-box .tshirt-design .action{
   padding: 10px 10px;
   float: right;
 }
 aside .step .step-box .tshirt-design .action button{
   padding: 8px 10px;
 }
 /*Step 2*/
 aside .step .step-box .tshirt-color{
   padding: 6px 10px;
   position: relative;
 }
 aside .step .step-box .tshirt-color ul.choice-color{
   float: left;
   list-style: none;
   padding-left: 0;
   width: 100%;
   margin-bottom: 3px;
 }
 aside .step .step-box .tshirt-color ul.choice-color li{
   margin: 0 10px 0 0;
   border: 1px solid #cccccc;
   padding: 2px 2px;
   float: left;
   cursor: pointer;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.action{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-color ul.choice-color li:hover{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-color ul.choice-color li div{
   height: 30px;
   width: 30px;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.white div{
   background-color: #ece7e4;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
   background-color: #e7dfd0;
 }
 aside .step .step-box .tshirt-color .color-name{
   width: 100%;
   font-size: 10px;
 }
 aside .step .step-box .tshirt-color .view-more{
   position: absolute;
   bottom: 6px;
   right: 10px;
 }
 /*Step 3*/
 aside .step .step-box .tshirt-saveorder{
   padding: 10px 10px 6px 10px;
 }
 aside .step .step-box .tshirt-saveorder .action{
   width: 50%;
   float: left;
 }
 aside .step .step-box .tshirt-saveorder .action:first-child{
   padding-right: 5px;
 }
 aside .step .step-box .tshirt-saveorder .action:last-child{
   padding-left: 5px;
 }
 aside .step .step-box .tshirt-saveorder .action button{
   padding: 8px 10px;
 }
 aside .step .step-box .tshirt-saveorder .action button .text{
   float: left;
   width: 80%;
   text-align: center;
   padding-left: 10px;
   vertical-align: bottom;
 }
 aside .step .step-box .tshirt-saveorder .action button .arrow{
   float: left;
   width: 20%;
   height: 40px;
   position: relative;
 }
 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{
   position: absolute;
   top: 50%;
   right: -6px;
   transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
 }
 aside .step .step-box .tshirt-saveorder .notice{
   padding: 5px 0 0 0;
 }
 /*Step 4*/
 aside .step .title-notice{
 }
 aside .step .step-box .change-design{
   padding: 4px 4px;
 }
 aside .step .step-box .change-design table{
 }
 aside .step .step-box .change-design table tr{
   border-bottom: 1px dotted #cccccc;
 }
 aside .step .step-box .change-design table tr:last-child{
   border-bottom: 0;
 }
 /*Step 5- finish*/
 aside .step .finish-design{
   padding: 20px 0;
 }
 aside .step .finish-design button{
   width: 100%;
   padding: 8px 10px;
 }
 /*DESIGN CONTENT*/
 #tshirt-content{
   position: relative;
 }
 #tshirt-content .switch-border-design{
   position: absolute;
   top: 5px;
   right: 10px;
   color: red;
   font-size: 11px;
 }
 #tshirt-content .tshirt-image{
   padding: 20px 0 0 0;
 }
 #tshirt-content .tshirt-choice{
 }
 #tshirt-content .tshirt-choice ul{
   list-style: none;
   padding-left: 0;
   display: table;
   margin: auto;
 }
 #tshirt-content .tshirt-choice ul li{
   float: left;
   margin: 10px 10px;
   cursor: pointer;
 }
 #tshirt-content .tshirt-choice ul li .image{
   border: 1px solid #cccccc;
   padding: 3px 3px;
 }
 #tshirt-content .tshirt-choice ul li.focus{
 }
 #tshirt-content .tshirt-choice ul li.focus .image{
   border: 1px solid #ff0000;
 }
 #tshirt-content .tshirt-choice ul li .image img{
   width: 50px;
   height: auto;
 }
 /*MODAL Design*/
 #tshirt-design{
   background-color: #666666;
 }
 #tshirt-design .modal-dialog{
   width: 75%;
   margin: 0 auto;
 }
 #tshirt-design .modal-dialog .modal-content{
   background-color: transparent;
   border-radius: 0;
   border: 0;
   -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
   box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
 }
 #tshirt-design .modal-dialog .modal-content .modal-header{
   padding: 0 0 10px 0;
   border-bottom: 0;
   border-shadow: none!important;
 }
 #tshirt-design .modal-dialog .modal-content .modal-body{
   background-color: #f5f5f5;
   padding: 0 0;
 }
 #tshirt-design header{
   border-bottom: 1px solid #cccccc;
   background-color: #dddddd;
 }
 #tshirt-design header ul.nav{
   padding-left: 0;
   list-style: none;
 }
 #tshirt-design header ul.nav li{
   float: left;
   padding: 8px 26px;
   border-right: 1px solid #cccccc;
   font-size: 14px;
   cursor: pointer;
 }
 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
   background-color: red;
   color: #ffffff;
 }
 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
   color: #ffffff;
 }
 #tshirt-design header ul.nav li i.fa{
   color: #fe070f;
   font-size: 20px;
   margin-right: 10px;
 }
 #tshirt-design header .action{
 }
 #tshirt-design header .action button{
   padding: 2px 10px;
   margin: 6px 10px;
 }
 #tshirt-design header .action button:hover{
   background-color: red;
   color: #ffffff;
 }
 /*Aside modal*/
 .aside{
 }
 .aside .box-design-option{
   list-style: none;
   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;
   opacity: 0.6;
   position: absolute;
   width: 100%;
   height: 100%;
   display: none;
 }
 .aside .box-design-option li:hover .hover{
   display: block;
 }
 .aside .box-design-option li .title{
   background: url("../images/bg1.png") repeat #cdcdcd;
   padding: 3px 10px;
 }
 .aside .box-design-option li .title i.fa{
   color: #000000;
 }
 .aside .box-design-option li .content{
 }
 .aside .box-design-option li .content i.fa{
   font-size: 30px;
   color: #fe070f;
   margin: 8px 0;
 }
 .aside .box-design-option li .content .des{
   padding: 3px 10px 3px 0;
 }
 .aside .box-design-option li .content .color-patterns {
   width: 100%;
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 5px;
+  min-height: 65px;
 }
 .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;
 }
 .aside #choice-illustration li .content select{
   width: 100%;
 }
 .aside #choice-illustration li .content .illustration-list {
   width: 100%;
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 5px;
+  min-height: 350px;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item{
   height: 60px;
   overflow: hidden;
   float: left;
   margin-left: 6px;
   margin-top: 5px;
   margin-bottom: 5px;
   padding: 2px;
   background: #e2e2e2;
   border: solid 2px #d7d7d7;
   cursor: pointer;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
   outline: 2px solid #ed1d24;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item img {
   width: 50px;
   cursor: pointer;
 }
 .aside #choice-illustration li .content .illustration-list .footer-bar {
   text-align: center;
   margin-top: 5px;
 }
 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination {
   margin-right: 5px;
   cursor: pointer;
   font-size: 9px;
   color: #FFF;
   background: #666666;
   text-transform: uppercase;
   padding: 2px 5px;
 }
 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover {
   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{
   position: relative;
 }
 .tshirt-design-container .design-content{
   padding: 10px 30px 10px 15px;
 }
 .tshirt-design-container .design-content .content{
   width: 100%;
   min-height: 650px;
   background-color: #f0efea;
   padding: 40px 40px;
   height: 100%;
 }
 .tshirt-design-container .design-content .content .selection-design{
   border: 1px solid #ff0000;
   width: 100%;
   height: 620px;
 }
 .tshirt-design-container .agree-design{
   position: absolute;
   right: -16px;
   top: 40%;
 }
 .tshirt-design-container .trash-design{
   position: absolute;
   right: 5px;
   bottom: 0;
 }
 /*FOOTER*/
 footer{
   background-color: #333333;
 }
 footer ul.nav-footer{
   padding-left: 0;
   list-style: none;
 }
 footer ul.nav-footer li{
   float: left;
   padding: 3px 10px;
   border-right: 1px dotted #ffffff;
 }
 footer ul.nav-footer li a{
   color: #ffffff;
   font-size: 11px;
 }
 /* Customize container */
 @media (min-width: 768px) {
   .container {
     /*max-width: 730px;*/
   }
 }
 /* Responsive: Portrait tablets and up */
 @media screen and (min-width: 768px) {
   /* Remove the padding we set earlier */

app/views/design_part/image.html

Diff comments View file @ e566963

1	<li>	1	<li>
2	<div class="title">	2	<div class="title">
3	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->	3	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
4	イラスト・イメージ選択	4	自分の画像・写真
5	</div>	5	</div>
6	<div class="content clearfix">	6	<div class="content clearfix">
7		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	</div>	12	</div>
9	</li>	13	</li>
		14
10	<li>	15	<li>
11	<div class="title">	16	<div class="title">
12	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->	17	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
13	カラー変更	18	カラー変更
14	<div class="pull-right">元の色に戻す</div>	19	<div class="pull-right">元の色に戻す</div>
15	</div>	20	</div>
16	<div class="content clearfix">	21	<div class="content clearfix">
17		22	<div class="color-patterns">
		23
		24	</div>
18	</div>	25	</div>
19	</li>	26	</li>
		27
20	<li>	28	<li>
21	<div class="title">	29	<div class="title">
22	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->	30	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
23	重ね順変更	31	重ね順変更
24	</div>	32	</div>
25	<div class="content clearfix">	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	</div>	50	</div>
28	</li>	51	</li>