Commit 2f4c317491d77c8ee85a615ec780b3609f8565fa
1 parent
e6d8ee863d
Exists in
master
and in
1 other branch
Fix text design and reposive
Showing 8 changed files with 189 additions and 103 deletions Side-by-side Diff
app/bower_components/fabric-customise-controls/.bower.json
app/images/control-icon/trash.png
3.45 KB
app/scripts/controllers/about.js
app/scripts/controllers/main.js
| 1 | 1 | define(['app'], function (app) { |
| 2 | 2 | 'use strict'; |
| 3 | 3 | app.controller('MainCtrl', function ($rootScope, $scope, $timeout, $illustration, $t_shirt) { |
| 4 | + // console.log($('nav').width()); | |
| 4 | 5 | $rootScope.API_URL = 'http://domain.com'; |
| 5 | 6 | $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION; |
| 6 | 7 | $scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION; |
| ... | ... | @@ -20,6 +21,16 @@ |
| 20 | 21 | $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back; |
| 21 | 22 | $scope.tShirtImg = $scope.tShirtImgFront; |
| 22 | 23 | |
| 24 | + //review design set position | |
| 25 | + var _widthPreviewDesign = $('#preview-design').width(); | |
| 26 | + var _widthTShirtImage = $('.tshirt-image').width(); | |
| 27 | + console.log(_widthTShirtImage); | |
| 28 | + console.log(_widthPreviewDesign); | |
| 29 | + // $('#preview-design').css({width: _widthTShirtImage/2 - 60}); | |
| 30 | + var leftReviewDesign = _widthTShirtImage/2 - (_widthPreviewDesign/2 - 10); | |
| 31 | + $('#preview-design').css({left: leftReviewDesign}); | |
| 32 | + | |
| 33 | + | |
| 23 | 34 | $scope.choiceTShirtColor = function(key) { |
| 24 | 35 | $scope.tShirtColorKey = key; |
| 25 | 36 | $rootScope.tShirtColorCode = $scope.tShirtColor[key].code; |
| 26 | 37 | |
| ... | ... | @@ -42,31 +53,8 @@ |
| 42 | 53 | }; |
| 43 | 54 | |
| 44 | 55 | |
| 45 | - $scope.showDesignTab = function(tab){ | |
| 46 | - $rootScope.isShowLeftPanel = tab; | |
| 47 | - switch (tab) { | |
| 48 | - case 'illustration': { | |
| 49 | - $scope.IllustrationList = $illustration.getAll(); | |
| 50 | - $rootScope.outputImage = false; | |
| 51 | - $scope.illustrationSelectConfig = { | |
| 52 | - allowClear:true | |
| 53 | - }; | |
| 54 | - $timeout(function(){ | |
| 55 | - $('.illstration-item').tooltip({ | |
| 56 | - animated: 'fade', | |
| 57 | - placement: 'bottom', | |
| 58 | - html: true | |
| 59 | - }); | |
| 60 | - // console.log('here'); | |
| 61 | - },1000); | |
| 62 | - break; | |
| 63 | - } | |
| 64 | - case 'text': { | |
| 65 | - break; | |
| 66 | - } | |
| 67 | - } | |
| 68 | - }; | |
| 69 | 56 | |
| 57 | + | |
| 70 | 58 | //safeApply |
| 71 | 59 | $rootScope.safeApply = function(fn) { |
| 72 | 60 | var phase = this.$root.$$phase; |
| 73 | 61 | |
| ... | ... | @@ -86,15 +74,11 @@ |
| 86 | 74 | keyboard: false |
| 87 | 75 | } |
| 88 | 76 | ); |
| 89 | - $scope.showDesignTab('default'); | |
| 77 | + | |
| 90 | 78 | }; |
| 91 | 79 | $scope.modalClose = function(){ |
| 92 | 80 | $('#tshirt-design').modal('hide'); |
| 93 | 81 | }; |
| 94 | - | |
| 95 | - | |
| 96 | - | |
| 97 | - | |
| 98 | 82 | }); |
| 99 | 83 | }); |
app/scripts/controllers/tshirtdesign.js
| 1 | 1 | define(['app'], function (app) { |
| 2 | 2 | //'use strict'; |
| 3 | + app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) { | |
| 3 | 4 | |
| 4 | - app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $illustration) { | |
| 5 | 5 | var canvas = new fabric.Canvas('main-design-container'); |
| 6 | + //Set width and height canvas | |
| 7 | + var _modalWidth = $('.modal-dialog').width(); | |
| 8 | + var _windowWidth = window.innerWidth; | |
| 9 | + if(_windowWidth > 762) { | |
| 10 | + var _contentCanvasWidth = _modalWidth*8/12 - 100; | |
| 11 | + } else { | |
| 12 | + var _contentCanvasWidth = _windowWidth-70; | |
| 13 | + } | |
| 14 | + | |
| 15 | + | |
| 16 | + canvas.setWidth(_contentCanvasWidth); | |
| 17 | + canvas.setHeight(650); | |
| 18 | + | |
| 19 | + //Custom control | |
| 6 | 20 | fabric.Object.prototype.transparentCorners = false; |
| 7 | 21 | fabric.Object.prototype.hasRotatingPoint = false; |
| 8 | 22 | var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false}; |
| ... | ... | @@ -18,7 +32,7 @@ |
| 18 | 32 | cornerPadding: 6 |
| 19 | 33 | }, |
| 20 | 34 | mt: { |
| 21 | - icon: 'images/control-icon/ok.png' | |
| 35 | + icon: 'images/control-icon/trash.png' | |
| 22 | 36 | }, |
| 23 | 37 | br: { |
| 24 | 38 | icon: 'images/control-icon/resize.png' |
| ... | ... | @@ -31,14 +45,13 @@ |
| 31 | 45 | fabric.Canvas.prototype.customiseControls({ |
| 32 | 46 | mt: { |
| 33 | 47 | cursor: 'pointer', |
| 34 | - action: function (e, target) { | |
| 35 | - target.hasControls = false; | |
| 36 | - target.hasBorders = false; | |
| 37 | - canvas.deactivateAll().renderAll(); | |
| 38 | - setTimeout(function() { | |
| 39 | - target.hasControls = true; | |
| 40 | - target.hasBorders = true; | |
| 41 | - }, 1); | |
| 48 | + // action: 'remove' | |
| 49 | + action: function(e, target) { | |
| 50 | + currentObj = canvas.getActiveObject(); | |
| 51 | + if(confirm('削除してもよろしいですか?')) { | |
| 52 | + currentObj.remove(); | |
| 53 | + } | |
| 54 | + | |
| 42 | 55 | } |
| 43 | 56 | }, |
| 44 | 57 | br: { |
| 45 | 58 | |
| 46 | 59 | |
| ... | ... | @@ -72,13 +85,36 @@ |
| 72 | 85 | var actionObj = false; |
| 73 | 86 | var refreshObj = true; |
| 74 | 87 | var spacingNum = 0; |
| 88 | + $scope.itemFont = 0; | |
| 75 | 89 | |
| 76 | - function mouseUp(e) { | |
| 77 | - currentObj = canvas.getActiveObject(); | |
| 78 | - console.log(currentObj); | |
| 79 | - currentObj.activate(); | |
| 80 | - } | |
| 81 | 90 | |
| 91 | + $scope.showDesignTab = function(tab){ | |
| 92 | + canvas.deactivateAll().renderAll(); | |
| 93 | + $rootScope.isShowLeftPanel = tab; | |
| 94 | + switch (tab) { | |
| 95 | + case 'illustration': { | |
| 96 | + $scope.IllustrationList = $illustration.getAll(); | |
| 97 | + $rootScope.outputImage = false; | |
| 98 | + $scope.illustrationSelectConfig = { | |
| 99 | + allowClear:true | |
| 100 | + }; | |
| 101 | + $timeout(function(){ | |
| 102 | + $('.illstration-item').tooltip({ | |
| 103 | + animated: 'fade', | |
| 104 | + placement: 'bottom', | |
| 105 | + html: true | |
| 106 | + }); | |
| 107 | + // console.log('here'); | |
| 108 | + },1000); | |
| 109 | + break; | |
| 110 | + } | |
| 111 | + case 'text': { | |
| 112 | + break; | |
| 113 | + } | |
| 114 | + } | |
| 115 | + }; | |
| 116 | + $scope.showDesignTab('default'); | |
| 117 | + | |
| 82 | 118 | |
| 83 | 119 | function onIllustrationAdded(options){ |
| 84 | 120 | var object = options.target; |
| ... | ... | @@ -217,10 +253,7 @@ |
| 217 | 253 | |
| 218 | 254 | function onObjectSelected(options) { |
| 219 | 255 | var currentObj = options.target; |
| 220 | - //Set default | |
| 221 | - console.log('selected object'); | |
| 222 | - // currentObj.hasControls = true; | |
| 223 | - // currentObj.hasBorders = true; | |
| 256 | + | |
| 224 | 257 | $scope.typeObject = currentObj.type; |
| 225 | 258 | switch ($scope.typeObject) { |
| 226 | 259 | case 'i-text' : |
| ... | ... | @@ -428,7 +461,8 @@ |
| 428 | 461 | canvas.setActiveObject(iText); |
| 429 | 462 | } |
| 430 | 463 | }; |
| 431 | - $scope.setFontFamily = function(font) { | |
| 464 | + $scope.setFontFamily = function(font,index) { | |
| 465 | + $scope.itemFont = index; | |
| 432 | 466 | if(canvas.getActiveObject()) { |
| 433 | 467 | var currentObj = canvas.getActiveObject(); |
| 434 | 468 | if(currentObj.type == 'i-text') { |
| ... | ... | @@ -446,7 +480,7 @@ |
| 446 | 480 | if(currentObj.type == 'i-text') { |
| 447 | 481 | if(e == 'plus') |
| 448 | 482 | spacingNum = spacingNum + 30; |
| 449 | - else if (spacingNum >= 30){ | |
| 483 | + else if (spacingNum >= -30){ | |
| 450 | 484 | spacingNum = spacingNum - 30; |
| 451 | 485 | } |
| 452 | 486 | currentObj.set('charSpacing', spacingNum); |
| ... | ... | @@ -454,7 +488,19 @@ |
| 454 | 488 | canvas.setActiveObject(currentObj); |
| 455 | 489 | } |
| 456 | 490 | } |
| 457 | - } | |
| 491 | + }; | |
| 492 | + | |
| 493 | + $scope.setLetterSpacingTextDefault = function() { | |
| 494 | + if(canvas.getActiveObject()) { | |
| 495 | + var currentObj = canvas.getActiveObject(); | |
| 496 | + if(currentObj.type == 'i-text') { | |
| 497 | + spacingNum = 0; | |
| 498 | + currentObj.set('charSpacing', spacingNum); | |
| 499 | + canvas.renderAll(); | |
| 500 | + canvas.setActiveObject(currentObj); | |
| 501 | + } | |
| 502 | + } | |
| 503 | + }; | |
| 458 | 504 | |
| 459 | 505 | |
| 460 | 506 | /**** process insert image */ |
| 461 | 507 | |
| ... | ... | @@ -463,14 +509,14 @@ |
| 463 | 509 | }else{ |
| 464 | 510 | $scope.recentImages = {}; |
| 465 | 511 | } |
| 466 | - | |
| 512 | + | |
| 467 | 513 | var addToRecentImage = function(name, data){ |
| 468 | 514 | if (typeof($window.localStorage.recentImages) != 'undefined'){ |
| 469 | 515 | $scope.recentImages = JSON.parse($window.localStorage.recentImages); |
| 470 | 516 | }else{ |
| 471 | 517 | $scope.recentImages = {}; |
| 472 | 518 | } |
| 473 | - | |
| 519 | + | |
| 474 | 520 | if (typeof($scope.recentImages[name]) == 'undefined'){ |
| 475 | 521 | var ii=0; |
| 476 | 522 | var II = 0; |
| 477 | 523 | |
| 478 | 524 | |
| ... | ... | @@ -505,19 +551,20 @@ |
| 505 | 551 | left: 50, |
| 506 | 552 | top: 50 |
| 507 | 553 | }); |
| 554 | + //image.scale(getRandomNum(0.1, 0.25)).setCoords(); | |
| 508 | 555 | image.scaleToWidth(200); |
| 509 | 556 | canvas.add(image); |
| 510 | 557 | } |
| 511 | 558 | } |
| 512 | 559 | reader.readAsDataURL(e.target.files[0]); |
| 513 | 560 | } |
| 514 | - | |
| 561 | + | |
| 515 | 562 | $scope.insertRecentImage = function(data){ |
| 516 | 563 | var imgObj = new Image(); |
| 517 | 564 | imgObj.src = data; |
| 518 | 565 | imgObj.onload = function () { |
| 519 | 566 | // start fabricJS stuff |
| 520 | - | |
| 567 | + | |
| 521 | 568 | var image = new fabric.Image(imgObj); |
| 522 | 569 | image.set({ |
| 523 | 570 | left: 50, |
| ... | ... | @@ -527,7 +574,7 @@ |
| 527 | 574 | canvas.add(image); |
| 528 | 575 | } |
| 529 | 576 | } |
| 530 | - | |
| 577 | + | |
| 531 | 578 | //Traslation text |
| 532 | 579 | $scope.rotateText = function(style) { |
| 533 | 580 | if(canvas.getActiveObject()) { |
app/styles/main.css
| 1 | 1 | /* Space out content a bit */ |
| 2 | 2 | @import "../fonts/font.css"; |
| 3 | 3 | @import "../fonts/font_canvas/font-canvas.css"; |
| 4 | +html{ | |
| 5 | + height:100%; | |
| 6 | + width:100%; | |
| 7 | +} | |
| 4 | 8 | body { |
| 5 | 9 | font-family: 'Hiragino Kaku Gothic Pro', sans-serif; |
| 6 | - /*font-family: 'gn_aki_iro_sesami_cookies';*/ | |
| 10 | + height:100%; | |
| 11 | + width:100%; | |
| 7 | 12 | } |
| 8 | 13 | /*Scroll bar style*/ |
| 9 | 14 | ::-webkit-scrollbar { |
| 10 | 15 | -webkit-appearance: none; |
| 11 | 16 | width: 7px; |
| 12 | 17 | } |
| 18 | +::-webkit-scrollbar-track { | |
| 19 | + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); | |
| 20 | +} | |
| 21 | + | |
| 13 | 22 | ::-webkit-scrollbar-thumb { |
| 14 | 23 | border-radius: 4px; |
| 15 | 24 | background-color: rgba(0,0,0,.5); |
| ... | ... | @@ -305,6 +314,9 @@ |
| 305 | 314 | } |
| 306 | 315 | #tshirt-content .tshirt-image{ |
| 307 | 316 | padding: 20px 0 0 0; |
| 317 | + position: relative; | |
| 318 | + height: 100%; | |
| 319 | + width: 100%; | |
| 308 | 320 | } |
| 309 | 321 | |
| 310 | 322 | #tshirt-content .tshirt-image img{ |
| 311 | 323 | |
| ... | ... | @@ -313,11 +325,12 @@ |
| 313 | 325 | |
| 314 | 326 | #preview-design { |
| 315 | 327 | position: absolute; |
| 316 | - width: 150px; | |
| 317 | - height: 182px; | |
| 328 | + width: 190px; | |
| 329 | + height: 200px; | |
| 318 | 330 | border: dashed 2px #DDD; |
| 319 | - bottom: 180px; | |
| 320 | - left: 200px; | |
| 331 | + top: 180px; | |
| 332 | + /*left: 200px;*/ | |
| 333 | + cursor: pointer; | |
| 321 | 334 | } |
| 322 | 335 | |
| 323 | 336 | #preview-design img { |
| ... | ... | @@ -357,7 +370,7 @@ |
| 357 | 370 | background-color: #666666; |
| 358 | 371 | } |
| 359 | 372 | #tshirt-design .modal-dialog{ |
| 360 | - width: 75%; | |
| 373 | + /*width: 800px!important;*/ | |
| 361 | 374 | margin: 0 auto; |
| 362 | 375 | } |
| 363 | 376 | #tshirt-design .modal-dialog .modal-content{ |
| 364 | 377 | |
| ... | ... | @@ -530,7 +543,11 @@ |
| 530 | 543 | border-bottom: 1px solid #c0c0c0; |
| 531 | 544 | border-right: 1px solid #c0c0c0; |
| 532 | 545 | font-size: 16px; |
| 546 | + margin-bottom: 0; | |
| 533 | 547 | } |
| 548 | +.aside #choice-text .content .font-family-box li.active{ | |
| 549 | + border: 1px solid #fe070f; | |
| 550 | +} | |
| 534 | 551 | .aside #choice-text .content .spacing-letter{ |
| 535 | 552 | |
| 536 | 553 | } |
| ... | ... | @@ -546,6 +563,9 @@ |
| 546 | 563 | .aside #choice-text .content .spacing-letter .item{ |
| 547 | 564 | float: left; |
| 548 | 565 | } |
| 566 | +.aside #choice-text .content .spacing-letter .item:hover{ | |
| 567 | + background-color: #fddad4; | |
| 568 | +} | |
| 549 | 569 | |
| 550 | 570 | .aside #choice-text .content .spacing-letter .item i.fa{ |
| 551 | 571 | font-size: 22px; |
| ... | ... | @@ -554,7 +574,7 @@ |
| 554 | 574 | } |
| 555 | 575 | .aside #choice-text .content .spacing-letter .item-text{ |
| 556 | 576 | padding: 6px 20px; |
| 557 | - font-size: 12px; | |
| 577 | + font-size: 13px; | |
| 558 | 578 | } |
| 559 | 579 | .aside #choice-text .content .spacing-letter .item-plus{ |
| 560 | 580 | border-right: 1px solid #8c8c8c; |
| 561 | 581 | |
| 562 | 582 | |
| ... | ... | @@ -699,14 +719,16 @@ |
| 699 | 719 | position: relative; |
| 700 | 720 | } |
| 701 | 721 | .tshirt-design-container .design-content{ |
| 702 | - padding: 10px 30px 10px 15px; | |
| 722 | + padding: 10px 0; | |
| 723 | + /*width: 100%;*/ | |
| 703 | 724 | } |
| 704 | 725 | .tshirt-design-container .design-content .content{ |
| 705 | 726 | width: 100%; |
| 727 | + height: 100%; | |
| 706 | 728 | min-height: 650px; |
| 707 | 729 | background-color: #f0efea; |
| 708 | 730 | padding: 40px 40px; |
| 709 | - height: 100%; | |
| 731 | + /*display: table-cell;*/ | |
| 710 | 732 | } |
| 711 | 733 | .tshirt-design-container .design-content .content .selection-design{ |
| 712 | 734 | border: 1px solid #ff0000; |
| ... | ... | @@ -767,6 +789,7 @@ |
| 767 | 789 | @media (min-width: 1024px) { |
| 768 | 790 | #tshirt-design .modal-dialog{ |
| 769 | 791 | min-width: 1000px; |
| 792 | + width: 1000px; | |
| 770 | 793 | } |
| 771 | 794 | } |
| 772 | 795 | |
| ... | ... | @@ -778,10 +801,38 @@ |
| 778 | 801 | |
| 779 | 802 | @media (max-width: 990px) { |
| 780 | 803 | #preview-design { |
| 781 | - left: 115px; | |
| 782 | - width: 120px; | |
| 783 | - height: 162px; | |
| 784 | - bottom: 150px; | |
| 804 | + /*left: 115px;*/ | |
| 805 | + width: 110px; | |
| 806 | + height: 200px; | |
| 807 | + top: 100px; | |
| 808 | + } | |
| 809 | +} | |
| 810 | + | |
| 811 | +@media (max-width: 762px) { | |
| 812 | + .modal-dialog{ | |
| 813 | + /*width: 100%!important;*/ | |
| 814 | + margin: 0 0!important; | |
| 815 | + } | |
| 816 | + #tshirt-design header .menu-nav{ | |
| 817 | + overflow-x: scroll!important; | |
| 818 | + -webkit-overflow-scrolling: touch; | |
| 819 | + } | |
| 820 | + | |
| 821 | + #tshirt-design header ul.nav { | |
| 822 | + text-align: justify; | |
| 823 | + width: 680px; | |
| 824 | + | |
| 825 | + } | |
| 826 | + | |
| 827 | + #tshirt-design header ul.nav li { | |
| 828 | + display: inline-block; /* 6 */ | |
| 829 | + } | |
| 830 | + | |
| 831 | + .tshirt-design-container .design-content .content{ | |
| 832 | + padding: 14px 14px; | |
| 833 | + } | |
| 834 | + .tshirt-design-container .design-content{ | |
| 835 | + padding: 0 0; | |
| 785 | 836 | } |
| 786 | 837 | } |
app/views/design_part/text.html
| ... | ... | @@ -9,12 +9,10 @@ |
| 9 | 9 | </div> |
| 10 | 10 | <div> |
| 11 | 11 | <ul class="font-family-box"> |
| 12 | - <li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li> | |
| 12 | + <li ng-repeat="(index,item) in listFontFamily" ng-click="setFontFamily(item.slug, index)" ng-style="{'font-family' : item.slug}" ng-class="{active: itemFont == index}">{{ item.name }}</li> | |
| 13 | 13 | </ul> |
| 14 | 14 | </div> |
| 15 | - <div> | |
| 16 | - <div ng-click="rotateText('1')">文字を変形する</div> | |
| 17 | - </div> | |
| 15 | + | |
| 18 | 16 | <div class="clearfix spacing-letter "> |
| 19 | 17 | <div class="pull-left text-label"> |
| 20 | 18 | 文字間隔 : |
| ... | ... | @@ -24,7 +22,7 @@ |
| 24 | 22 | <div class="item item-plus" ng-click="setLetterSpacingText('plus')"> |
| 25 | 23 | <i class="fa fa-plus-square-o" aria-hidden="true"></i> |
| 26 | 24 | </div> |
| 27 | - <div class="item item-text"> | |
| 25 | + <div class="item item-text" style="cursor: pointer" ng-click="setLetterSpacingTextDefault()"> | |
| 28 | 26 | リセット |
| 29 | 27 | </div> |
| 30 | 28 | <div class="item item-minus" ng-click="setLetterSpacingText('minus')"> |
app/views/tshirt-design.html
| ... | ... | @@ -9,20 +9,23 @@ |
| 9 | 9 | </div> |
| 10 | 10 | <div class="modal-body"> |
| 11 | 11 | <header class="clearfix"> |
| 12 | - <ul class="nav pull-left"> | |
| 13 | - <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')"> | |
| 14 | - <i class="fa fa-jpy" aria-hidden="true"></i> 文字 | |
| 15 | - </li> | |
| 16 | - <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')"> | |
| 17 | - <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ | |
| 18 | - </li> | |
| 19 | - <li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')"> | |
| 20 | - <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真 | |
| 21 | - </li> | |
| 22 | - <li ng-click="canvasClearAll()"> | |
| 23 | - <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去 | |
| 24 | - </li> | |
| 25 | - </ul> | |
| 12 | + <div class="menu-nav"> | |
| 13 | + <ul class="nav pull-left"> | |
| 14 | + <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')"> | |
| 15 | + <i class="fa fa-jpy" aria-hidden="true"></i> 文字 | |
| 16 | + </li> | |
| 17 | + <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')"> | |
| 18 | + <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ | |
| 19 | + </li> | |
| 20 | + <li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')"> | |
| 21 | + <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真 | |
| 22 | + </li> | |
| 23 | + <li ng-click="canvasClearAll()"> | |
| 24 | + <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去 | |
| 25 | + </li> | |
| 26 | + </ul> | |
| 27 | + </div> | |
| 28 | + | |
| 26 | 29 | <div class="action pull-right"> |
| 27 | 30 | <button class="white"> |
| 28 | 31 | アルバムを開く |
| 29 | 32 | |
| 30 | 33 | |
| ... | ... | @@ -47,22 +50,25 @@ |
| 47 | 50 | <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText"> |
| 48 | 51 | </ul> |
| 49 | 52 | </div> |
| 50 | - <div class="design-content col-sm-8"> | |
| 51 | - <div class="content" ng-style="{'background-color' : tShirtColorCode}"> | |
| 52 | - <canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas"> | |
| 53 | - | |
| 54 | - </canvas> | |
| 53 | + <div class="col-sm-8"> | |
| 54 | + <div class="design-content " id="main-design-content"> | |
| 55 | + <!--<button ng-click="objectDone()" >OK</button>--> | |
| 56 | + <div class="content" id="main-design" ng-style="{'background-color' : tShirtColorCode}"> | |
| 57 | + <canvas id="main-design-container" class="selection-design lower-canvas" style="width: 100%"> | |
| 58 | + </canvas> | |
| 59 | + </div> | |
| 60 | + <div class="agree-design" ng-click="outputDesign()"> | |
| 61 | + <img src="images/agree-design.png" alt="agree design" /> | |
| 62 | + </div> | |
| 63 | + <div class="trash-design"> | |
| 64 | + <!--<span ng-click="undoCanvas()" class="fa fa-undo"> Undo</span><br>--> | |
| 65 | + <!--<span ng-click="redoCanvas()" class="fa fa-repeat"> Redo</span><br>--> | |
| 66 | + <img src="images/trash.png" alt="trash design" /> | |
| 67 | + </div> | |
| 55 | 68 | </div> |
| 56 | - <div class="agree-design" ng-click="outputDesign()"> | |
| 57 | - <img src="images/agree-design.png" alt="agree design" /> | |
| 58 | - </div> | |
| 59 | - <div class="trash-design"> | |
| 60 | - <!--<span ng-click="undoCanvas()" class="fa fa-undo"> Undo</span><br>--> | |
| 61 | - <!--<span ng-click="redoCanvas()" class="fa fa-repeat"> Redo</span><br>--> | |
| 62 | - <img src="images/trash.png" alt="trash design" /> | |
| 63 | - </div> | |
| 64 | 69 | <img style="display:none" src="images/trash-hover.png" alt="trash-hover cache" /> |
| 65 | 70 | </div> |
| 71 | + | |
| 66 | 72 | </section> |
| 67 | 73 | </div> |
| 68 | 74 | </div> |