From 2f4c317491d77c8ee85a615ec780b3609f8565fa Mon Sep 17 00:00:00 2001 From: BuiDang Date: Wed, 23 Nov 2016 23:35:14 +0700 Subject: [PATCH] Fix text design and reposive --- .../fabric-customise-controls/.bower.json | 3 +- app/images/control-icon/trash.png | Bin 0 -> 3532 bytes app/scripts/controllers/about.js | 1 - app/scripts/controllers/main.js | 42 +++------ app/scripts/controllers/tshirtdesign.js | 101 +++++++++++++++------ app/styles/main.css | 77 +++++++++++++--- app/views/design_part/text.html | 8 +- app/views/tshirt-design.html | 60 ++++++------ 8 files changed, 189 insertions(+), 103 deletions(-) create mode 100644 app/images/control-icon/trash.png diff --git a/app/bower_components/fabric-customise-controls/.bower.json b/app/bower_components/fabric-customise-controls/.bower.json index c1abf5d..d118a24 100644 --- a/app/bower_components/fabric-customise-controls/.bower.json +++ b/app/bower_components/fabric-customise-controls/.bower.json @@ -29,5 +29,6 @@ }, "_source": "https://github.com/pixolith/fabricjs-customise-controls-extension.git", "_target": "^0.1.8", - "_originalSource": "fabric-customise-controls" + "_originalSource": "fabric-customise-controls", + "_direct": true } \ No newline at end of file diff --git a/app/images/control-icon/trash.png b/app/images/control-icon/trash.png new file mode 100644 index 0000000000000000000000000000000000000000..06b08a6b9b5f18870398559960fec461bb5af18d GIT binary patch literal 3532 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 762) { + var _contentCanvasWidth = _modalWidth*8/12 - 100; + } else { + var _contentCanvasWidth = _windowWidth-70; + } + + + canvas.setWidth(_contentCanvasWidth); + canvas.setHeight(650); + + //Custom control fabric.Object.prototype.transparentCorners = false; fabric.Object.prototype.hasRotatingPoint = false; var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false}; @@ -18,7 +32,7 @@ define(['app'], function (app) { cornerPadding: 6 }, mt: { - icon: 'images/control-icon/ok.png' + icon: 'images/control-icon/trash.png' }, br: { icon: 'images/control-icon/resize.png' @@ -31,14 +45,13 @@ define(['app'], function (app) { fabric.Canvas.prototype.customiseControls({ mt: { cursor: 'pointer', - action: function (e, target) { - target.hasControls = false; - target.hasBorders = false; - canvas.deactivateAll().renderAll(); - setTimeout(function() { - target.hasControls = true; - target.hasBorders = true; - }, 1); + // action: 'remove' + action: function(e, target) { + currentObj = canvas.getActiveObject(); + if(confirm('削除してもよろしいですか?')) { + currentObj.remove(); + } + } }, br: { @@ -72,12 +85,35 @@ define(['app'], function (app) { var actionObj = false; var refreshObj = true; var spacingNum = 0; + $scope.itemFont = 0; - function mouseUp(e) { - currentObj = canvas.getActiveObject(); - console.log(currentObj); - currentObj.activate(); - } + + $scope.showDesignTab = function(tab){ + canvas.deactivateAll().renderAll(); + $rootScope.isShowLeftPanel = tab; + switch (tab) { + case 'illustration': { + $scope.IllustrationList = $illustration.getAll(); + $rootScope.outputImage = false; + $scope.illustrationSelectConfig = { + allowClear:true + }; + $timeout(function(){ + $('.illstration-item').tooltip({ + animated: 'fade', + placement: 'bottom', + html: true + }); + // console.log('here'); + },1000); + break; + } + case 'text': { + break; + } + } + }; + $scope.showDesignTab('default'); function onIllustrationAdded(options){ @@ -217,10 +253,7 @@ define(['app'], function (app) { function onObjectSelected(options) { var currentObj = options.target; - //Set default - console.log('selected object'); - // currentObj.hasControls = true; - // currentObj.hasBorders = true; + $scope.typeObject = currentObj.type; switch ($scope.typeObject) { case 'i-text' : @@ -428,7 +461,8 @@ define(['app'], function (app) { canvas.setActiveObject(iText); } }; - $scope.setFontFamily = function(font) { + $scope.setFontFamily = function(font,index) { + $scope.itemFont = index; if(canvas.getActiveObject()) { var currentObj = canvas.getActiveObject(); if(currentObj.type == 'i-text') { @@ -446,7 +480,7 @@ define(['app'], function (app) { if(currentObj.type == 'i-text') { if(e == 'plus') spacingNum = spacingNum + 30; - else if (spacingNum >= 30){ + else if (spacingNum >= -30){ spacingNum = spacingNum - 30; } currentObj.set('charSpacing', spacingNum); @@ -454,7 +488,19 @@ define(['app'], function (app) { canvas.setActiveObject(currentObj); } } - } + }; + + $scope.setLetterSpacingTextDefault = function() { + if(canvas.getActiveObject()) { + var currentObj = canvas.getActiveObject(); + if(currentObj.type == 'i-text') { + spacingNum = 0; + currentObj.set('charSpacing', spacingNum); + canvas.renderAll(); + canvas.setActiveObject(currentObj); + } + } + }; /**** process insert image */ @@ -463,14 +509,14 @@ define(['app'], function (app) { }else{ $scope.recentImages = {}; } - + var addToRecentImage = function(name, data){ if (typeof($window.localStorage.recentImages) != 'undefined'){ $scope.recentImages = JSON.parse($window.localStorage.recentImages); }else{ $scope.recentImages = {}; } - + if (typeof($scope.recentImages[name]) == 'undefined'){ var ii=0; var II = 0; @@ -505,19 +551,20 @@ define(['app'], function (app) { left: 50, top: 50 }); + //image.scale(getRandomNum(0.1, 0.25)).setCoords(); image.scaleToWidth(200); canvas.add(image); } } reader.readAsDataURL(e.target.files[0]); } - + $scope.insertRecentImage = function(data){ var imgObj = new Image(); imgObj.src = data; imgObj.onload = function () { // start fabricJS stuff - + var image = new fabric.Image(imgObj); image.set({ left: 50, @@ -527,7 +574,7 @@ define(['app'], function (app) { canvas.add(image); } } - + //Traslation text $scope.rotateText = function(style) { if(canvas.getActiveObject()) { diff --git a/app/styles/main.css b/app/styles/main.css index 35f0ce2..75b2e19 100644 --- a/app/styles/main.css +++ b/app/styles/main.css @@ -1,15 +1,24 @@ /* Space out content a bit */ @import "../fonts/font.css"; @import "../fonts/font_canvas/font-canvas.css"; +html{ + height:100%; + width:100%; +} body { font-family: 'Hiragino Kaku Gothic Pro', sans-serif; - /*font-family: 'gn_aki_iro_sesami_cookies';*/ + height:100%; + width:100%; } /*Scroll bar style*/ ::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); +} + ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); @@ -305,6 +314,9 @@ aside .step .finish-design button{ } #tshirt-content .tshirt-image{ padding: 20px 0 0 0; + position: relative; + height: 100%; + width: 100%; } #tshirt-content .tshirt-image img{ @@ -313,11 +325,12 @@ aside .step .finish-design button{ #preview-design { position: absolute; - width: 150px; - height: 182px; + width: 190px; + height: 200px; border: dashed 2px #DDD; - bottom: 180px; - left: 200px; + top: 180px; + /*left: 200px;*/ + cursor: pointer; } #preview-design img { @@ -357,7 +370,7 @@ aside .step .finish-design button{ background-color: #666666; } #tshirt-design .modal-dialog{ - width: 75%; + /*width: 800px!important;*/ margin: 0 auto; } #tshirt-design .modal-dialog .modal-content{ @@ -530,6 +543,10 @@ aside .step .finish-design button{ border-bottom: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; font-size: 16px; + margin-bottom: 0; +} +.aside #choice-text .content .font-family-box li.active{ + border: 1px solid #fe070f; } .aside #choice-text .content .spacing-letter{ @@ -546,6 +563,9 @@ aside .step .finish-design button{ .aside #choice-text .content .spacing-letter .item{ float: left; } +.aside #choice-text .content .spacing-letter .item:hover{ + background-color: #fddad4; +} .aside #choice-text .content .spacing-letter .item i.fa{ font-size: 22px; @@ -554,7 +574,7 @@ aside .step .finish-design button{ } .aside #choice-text .content .spacing-letter .item-text{ padding: 6px 20px; - font-size: 12px; + font-size: 13px; } .aside #choice-text .content .spacing-letter .item-plus{ border-right: 1px solid #8c8c8c; @@ -699,14 +719,16 @@ aside .step .finish-design button{ position: relative; } .tshirt-design-container .design-content{ - padding: 10px 30px 10px 15px; + padding: 10px 0; + /*width: 100%;*/ } .tshirt-design-container .design-content .content{ width: 100%; + height: 100%; min-height: 650px; background-color: #f0efea; padding: 40px 40px; - height: 100%; + /*display: table-cell;*/ } .tshirt-design-container .design-content .content .selection-design{ border: 1px solid #ff0000; @@ -767,6 +789,7 @@ footer ul.nav-footer li a{ @media (min-width: 1024px) { #tshirt-design .modal-dialog{ min-width: 1000px; + width: 1000px; } } @@ -778,9 +801,37 @@ footer ul.nav-footer li a{ @media (max-width: 990px) { #preview-design { - left: 115px; - width: 120px; - height: 162px; - bottom: 150px; + /*left: 115px;*/ + width: 110px; + height: 200px; + top: 100px; + } +} + +@media (max-width: 762px) { + .modal-dialog{ + /*width: 100%!important;*/ + margin: 0 0!important; + } + #tshirt-design header .menu-nav{ + overflow-x: scroll!important; + -webkit-overflow-scrolling: touch; + } + + #tshirt-design header ul.nav { + text-align: justify; + width: 680px; + + } + + #tshirt-design header ul.nav li { + display: inline-block; /* 6 */ + } + + .tshirt-design-container .design-content .content{ + padding: 14px 14px; + } + .tshirt-design-container .design-content{ + padding: 0 0; } } \ No newline at end of file diff --git a/app/views/design_part/text.html b/app/views/design_part/text.html index f228b7c..cd3c97f 100644 --- a/app/views/design_part/text.html +++ b/app/views/design_part/text.html @@ -9,12 +9,10 @@
    -
  • {{ item.name }}
    • +
  • {{ item.name }}
-
-
文字を変形する
-
+
文字間隔 : @@ -24,7 +22,7 @@
-
+
リセット
diff --git a/app/views/tshirt-design.html b/app/views/tshirt-design.html index af3e77b..24d27e6 100644 --- a/app/views/tshirt-design.html +++ b/app/views/tshirt-design.html @@ -9,20 +9,23 @@
-
    -
  • - 文字 -
    • -
  • - イラスト・イメージ -
    • -
  • - 自分の画像・写真 -
    • -
  • - 全消去 -
    • -
+
+
    +
  • + 文字 +
    • +
  • + イラスト・イメージ +
    • +
  • + 自分の画像・写真 +
    • +
  • + 全消去 +
    • +
+
+
-
-
- - - -
-
- agree design -
-
- - - trash design +
+
+ +
+ + +
+
+ agree design +
+
+ + + trash design +
trash-hover cache
+
-- 1.8.5.3