Blame view
app/views/tshirt-design.html
9.56 KB
87c93a029
|
1 |
<!-- Modal --> |
6f105dbd5
|
2 |
<div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl"> |
5fe93ca88
|
3 |
|
87c93a029
|
4 5 6 |
<div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> |
a56541cf9
|
7 8 |
<button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button> <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button> |
87c93a029
|
9 10 |
</div> <div class="modal-body"> |
862daa8a4
|
11 12 |
<header class="clearfix"> <ul class="nav pull-left"> |
98acd3acd
|
13 |
<li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showIllustration('text')"> |
5fe93ca88
|
14 15 |
<i class="fa fa-jpy" aria-hidden="true"></i> 文字 </li> |
6f105dbd5
|
16 |
<li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showIllustration('illustration')"> |
5fe93ca88
|
17 18 19 20 21 22 23 24 25 |
<i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ </li> <li> <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真 </li> <li> <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去 </li> </ul> |
862daa8a4
|
26 27 28 29 30 31 32 33 |
<div class="action pull-right"> <button class="white"> アルバムを開く </button> <button class="white"> アルバムに入れる </button> </div> |
5fe93ca88
|
34 35 36 |
</header> <section class="tshirt-design-container clearfix"> <div class="aside col-xs-4"> |
6f105dbd5
|
37 |
<ul id="choice-design-option" ng-show="isShowLeftPanel=='default'"> |
5fe93ca88
|
38 |
<li> |
a56541cf9
|
39 |
<div class="hover"></div> |
5fe93ca88
|
40 41 42 43 |
<div class="title"> <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 文字を追加 </div> |
862daa8a4
|
44 |
<div class="content clearfix"> |
5fe93ca88
|
45 46 47 |
<div class="col-xs-2 text-center"> <i class="fa fa-jpy" aria-hidden="true"></i> </div> |
862daa8a4
|
48 |
<div class="col-xs-10 des padding-left-0"> |
5fe93ca88
|
49 50 51 52 53 |
書体を選んでお好きな文字を入力できます </div> </div> </li> <li> |
a56541cf9
|
54 |
<div class="hover"></div> |
5fe93ca88
|
55 56 57 58 |
<div class="title"> <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> イラストやイメージを追加 </div> |
862daa8a4
|
59 |
<div class="content clearfix"> |
5fe93ca88
|
60 61 62 |
<div class="col-xs-2 text-center"> <i class="fa fa-btc" aria-hidden="true"></i> </div> |
862daa8a4
|
63 |
<div class="col-xs-10 des padding-left-0"> |
5fe93ca88
|
64 65 66 67 68 |
自由にお使いいただけるデザイン画像をご用意しました </div> </div> </li> <li> |
a56541cf9
|
69 |
<div class="hover"></div> |
5fe93ca88
|
70 71 72 73 |
<div class="title"> <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 自分の画像・写真を追加 </div> |
862daa8a4
|
74 |
<div class="content clearfix"> |
5fe93ca88
|
75 76 77 |
<div class="col-xs-2 text-center"> <i class="fa fa-jpy" aria-hidden="true"></i> </div> |
862daa8a4
|
78 |
<div class="col-xs-10 des padding-left-0"> |
5fe93ca88
|
79 80 81 82 83 |
ご自分で用意した画像をアップロードして使えます </div> </div> </li> <li> |
a56541cf9
|
84 |
<div class="hover"></div> |
5fe93ca88
|
85 86 87 88 |
<div class="title"> <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> おすすめデザインを使う </div> |
862daa8a4
|
89 |
<div class="content clearfix"> |
5fe93ca88
|
90 91 92 |
<div class="col-xs-2 text-center"> <i class="fa fa-jpy" aria-hidden="true"></i> </div> |
862daa8a4
|
93 |
<div class="col-xs-10 des padding-left-0"> |
5fe93ca88
|
94 95 96 97 |
おすすめデザインデータをご自由にカスタマイズしてお使いください </div> </div> </li> |
6f105dbd5
|
98 99 100 101 102 |
</ul> <ul id="choice-illustration" ng-show="isShowLeftPanel=='illustration'"> <li> <div class="hover"></div> <div class="title"> |
aff3eb043
|
103 104 |
<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> イラスト・イメージ選択 |
6f105dbd5
|
105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
</div> <div class="content clearfix"> <select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration)" data-placeholder="Choose category" style="width: 100%"> <option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option> </select> <div class="illustration-list"> <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list" ng-click="insertSvg(item)"> <img ng-src="{{item.path}}"/> </div> <div class="clearfix"></div> </div> </div> </li> <li> <div class="hover"></div> <div class="title"> |
aff3eb043
|
121 122 123 |
<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> カラー変更 <div class="pull-right">元の色に戻す</div> |
6f105dbd5
|
124 125 126 127 128 129 130 131 132 133 134 135 |
</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="hover"></div> <div class="title"> |
aff3eb043
|
136 137 |
<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> 重ね順変更 |
6f105dbd5
|
138 139 140 141 142 |
</div> <div class="content clearfix"> </div> </li> |
5fe93ca88
|
143 |
</ul> |
98acd3acd
|
144 145 146 147 |
<!-- Text design--> <ul id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="'views/design_part/text.html'"> </ul> |
5fe93ca88
|
148 |
</div> |
862daa8a4
|
149 |
<div class="design-content col-xs-8"> |
422e7837d
|
150 151 |
<div class="content" ng-style="{'background-color' : tShirtColorCode}"> <canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas"> |
5fe93ca88
|
152 |
|
6f105dbd5
|
153 |
</canvas> |
862daa8a4
|
154 155 156 157 158 159 160 |
</div> <div class="agree-design"> <img src="images/agree-design.png" alt="agree design" /> </div> <div class="trash-design"> <img src="images/trash.png" alt="trash design" /> </div> |
5fe93ca88
|
161 162 |
</div> </section> |
87c93a029
|
163 164 165 166 |
</div> </div> </div> </div> |