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>
|