pip-webui
Version:
HTML5 UI for LOB applications
212 lines (194 loc) • 10.9 kB
HTML
<div ng-if="$party">
<div class="pip-body" layout="column" flex>
<h2 class="m16">Collage with local picture</h2>
<div layout="row">
<md-input-container style="margin-right: 10px;">
<label>Size</label>
<md-select ng-model="collage.size"
ng-change="onCollageSizeChange()">
<md-option ng-repeat="obj in collageSet" value="{{obj.id}}">
{{obj.name}}
</md-option>
</md-select>
</md-input-container>
<md-input-container style="margin-right: 10px;"
ng-disabled="collage.disabled">
<label>Variant</label>
<md-select ng-model="collage.variant">
<md-option ng-repeat="variant in collageVariant" value="{{variant.id}}">
{{variant.name}}
</md-option>
</md-select>
</md-input-container>
<md-input-container style="margin-right: 10px;">
<label>Block Size</label>
<md-select ng-model="collage.blockSize">
<md-option ng-repeat="size in blockSizes" value="{{size.id}}">
{{size.name}}
</md-option>
</md-select>
</md-input-container>
</div>
<div class="app-collage">
<!--<div class="bm16"-->
<!--ng-show="collage.size == 1"-->
<!--ng-style="blockStyles[collage.blockSize]">-->
<!--<h2>1 Picture</h2>-->
<!--<pip-collage class="collage bg-red" pip-srcs="srcs_1" pip-multiple="false"></pip-collage>-->
<!--</div>-->
<div class="bm16"
ng-style="blockStyles[collage.blockSize]"
ng-show="collage.size == 2">
<h2>2 Pictures</h2>
<pip-collage class="collage bg-red" pip-srcs="srcs_2" pip-multiple="false"></pip-collage>
</div>
<div class="bm16"
ng-style="blockStyles[collage.blockSize]"
ng-show="collage.size == 3">
<h2>3 Pictures</h2>
<pip-collage class="collage pull-left bg-red bm16"
ng-show="collage.variant == 1"
pip-srcs="srcs_3" pip-multiple="false"
pip-unique-code="1"
pip-open="true">
</pip-collage>
<pip-collage class="collage pull-left bg-red bm16"
ng-show="collage.variant == 2"
pip-srcs="srcs_3"
pip-multiple="false"
pip-unique-code="2">
</pip-collage>
<pip-collage class="collage pull-left bg-red bm16"
ng-show="collage.variant == 3"
pip-srcs="srcs_3"
pip-multiple="false"
pip-unique-code="3">
</pip-collage>
<pip-collage class="collage pull-left bg-red bm16"
ng-show="collage.variant == 4"
pip-srcs="srcs_3"
pip-multiple="false"
pip-unique-code="4">
</pip-collage>
<div class="clearfix"></div>
</div>
<div class="bm16"
ng-style="blockStyles[collage.blockSize]"
ng-show="collage.size == 4">
<h2>4 Pictures</h2>
<pip-collage class="collage pull-left bg-red bm16"
ng-show="collage.variant == 1"
pip-srcs="srcs_4"
pip-multiple="false"
pip-unique-code="1"
pip-open="true">
</pip-collage>
<pip-collage class="collage pull-left bg-red bm16"
ng-show="collage.variant == 2"
pip-srcs="srcs_4"
pip-multiple="false"
pip-unique-code="2">
</pip-collage>
<pip-collage class="collage pull-left bg-red bm16"
ng-show="collage.variant == 3"
pip-srcs="srcs_4"
pip-multiple="false"
pip-unique-code="3">
</pip-collage>
<pip-collage class="collage pull-left bg-red bm16"
ng-show="collage.variant == 4"
pip-srcs="srcs_4"
pip-multiple="false"
pip-unique-code="4">
</pip-collage>
<div class="clearfix"></div>
</div>
<div class="bm16"
ng-style="blockStyles[collage.blockSize]"
ng-show="collage.size == 5">
<h2>5 Pictures</h2>
<pip-collage class="collage pull-left bm16"
ng-show="collage.variant == 1"
pip-srcs="srcs_5"
pip-multiple="false"
pip-unique-code="1"
pip-open="true">
</pip-collage>
<pip-collage class="collage pull-left bm16" ng-show="collage.variant == 2" pip-srcs="srcs_5" pip-multiple="false" pip-unique-code="2"></pip-collage>
<pip-collage class="collage pull-left bm16" ng-show="collage.variant == 3" pip-srcs="srcs_5" pip-multiple="false" pip-unique-code="3"></pip-collage>
<pip-collage class="collage pull-left bm16" ng-show="collage.variant == 4" pip-srcs="srcs_5" pip-multiple="false" pip-unique-code="4"></pip-collage>
<div class="clearfix"></div>
</div>
<div class="bm16"
ng-style="blockStyles[collage.blockSize]"
ng-show="collage.size == 6">
<h2>6 Pictures</h2>
<pip-collage class="collage pull-left bm16" ng-show="collage.variant == 1" pip-srcs="srcs_6" pip-multiple="false" pip-unique-code="1" pip-open="true"></pip-collage>
<pip-collage class="collage pull-left bm16" ng-show="collage.variant == 2" pip-srcs="srcs_6" pip-multiple="false" pip-unique-code="2"></pip-collage>
<pip-collage class="collage pull-left bm16" ng-show="collage.variant == 3" pip-srcs="srcs_6" pip-multiple="false" pip-unique-code="3"></pip-collage>
<pip-collage class="collage pull-left bm16" ng-show="collage.variant == 4" pip-srcs="srcs_6" pip-multiple="false" pip-unique-code="4"></pip-collage>
<div class="clearfix"></div>
</div>
<div class="bm16"
ng-style="blockStyles[collage.blockSize]"
ng-show="collage.size == 7">
<h2>7 Pictures</h2>
<pip-collage class="collage pull-left bm16" ng-show="collage.variant == 1" pip-srcs="srcs_7" pip-multiple="false" pip-unique-code="1" pip-open="true"></pip-collage>
<pip-collage class="collage pull-left bm16" ng-show="collage.variant == 2" pip-srcs="srcs_7" pip-multiple="false" pip-unique-code="2"></pip-collage>
<pip-collage class="collage pull-left bm16" ng-show="collage.variant == 3" pip-srcs="srcs_7" pip-multiple="false" pip-unique-code="3"></pip-collage>
<pip-collage class="collage pull-left bm16" ng-show="collage.variant == 4" pip-srcs="srcs_7" pip-multiple="false" pip-unique-code="4"></pip-collage>
<div class="clearfix"></div>
</div>
<div class="bm16"
ng-style="blockStyles[collage.blockSize]"
ng-show="collage.size == 8">
<h2>8 Pictures</h2>
<pip-collage class="collage pull-left bm16" pip-srcs="srcs_8" pip-multiple="false" pip-unique-code="1" pip-open="true"></pip-collage>
<div class="clearfix"></div>
</div>
<div class="bm16"
ng-style="blockStyles[collage.blockSize]"
ng-show="collage.size == 9">
<h2>9 Pictures - Single Segment</h2>
<pip-collage class="collage pull-left bm16" pip-srcs="srcs_9" pip-multiple="false"></pip-collage>
<div class="clearfix"></div>
</div>
<div class="bm16"
ng-style="blockStyles[collage.blockSize]"
ng-show="collage.size == 10">
<h2>10 Pictures - Multiple Segments</h2>
<pip-collage class="collage pull-left bm16" pip-srcs="srcs_10" pip-multiple="true"></pip-collage>
<div class="clearfix"></div>
</div>
</div>
</div>
<!--<div layout="column" flex>-->
<!--<h2 class="m16">Collage with pictures from server</h2>-->
<!--<div class="app-collage">-->
<!--<div class="bm16">-->
<!--<h2>1 Picture</h2>-->
<!--<pip-collage class="collage bg-red" pip-picture-ids="pids_1" pip-multiple="false"></pip-collage>-->
<!--</div>-->
<!--<div class="bm16">-->
<!--<h2>2 Picture</h2>-->
<!--<pip-collage class="collage bg-red" pip-picture-ids="pids_2" pip-multiple="false"></pip-collage>-->
<!--</div>-->
<!--<div class="bm16">-->
<!--<h2>3 Picture</h2>-->
<!--<pip-collage class="collage bg-red" pip-picture-ids="pids_3" pip-multiple="false"></pip-collage>-->
<!--</div>-->
<!--<div class="bm16">-->
<!--<h2>4 Picture</h2>-->
<!--<pip-collage class="collage bg-red" pip-picture-ids="pids_4" pip-multiple="false"></pip-collage>-->
<!--</div>-->
<!--<div class="bm16">-->
<!--<h2>7 Picture</h2>-->
<!--<pip-collage class="collage bg-red" pip-picture-ids="pids_7" pip-multiple="false"></pip-collage>-->
<!--</div>-->
<!--<div class="bm16">-->
<!--<h2>18 Picture</h2>-->
<!--<pip-collage class="collage bg-red" pip-picture-ids="pids_18" pip-multiple="true"></pip-collage>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</div>