pip-webui/pip-webui-composite/src/composite_view/composite_view.html

HTML5 UI for LOB applications

<div ng-repeat="item in compositeContent track by $index">

    <!-- for text -->
    <div class="pip-composite-text lp24-flex rp24-flex" ng-if="item.type == 'text' && item.text" ng-class="{'bm16': $last}">
        <pip-markdown pip-text="item.text"
                      pip-rebind="true"
                      ng-disabled="true">
        </pip-markdown>
    </div>
    <!-- for pictures -->
    <div ng-if="item.type == 'pictures' && item.pic_ids.length > 0"
         ng-class=" compositeContent[$index - 1].type != 'pictures' ?
                    compositeContent[$index + 1].type != 'pictures' ? 'tm16 bm16' : 'tm16 bm0' :
                    compositeContent[$index + 1].type != 'pictures' ? 'tm8 bm16' : 'tm8 bm0' "
         class="pip-composite-pictures lp24-flex rp24-flex">
        <pip-collage ng-if="rebind"
                pip-picture-ids="item.pic_ids"
                pip-unique-code="item.id"
                pip-multiple="true"
                pip-open="true"
                pip-rebind="true"
                ng-disabled="ngDisabled()">
        </pip-collage>
    </div>

    <!-- for documents -->
    <div ng-if="item.type == 'documents' && item.docs.length > 0"
         class="pip-composite-documents layout-row layout-align-start-start flex">
        <pip-document-list pip-documents="item.docs"
                           pip-document-icon="true"
                           pip-rebind="true"
                           ng-disabled="ngDisabled()">
        </pip-document-list>
    </div>

    <!--for checklist -->
    <div ng-if="item.type == 'checklist' && item.checklist.length > 0"
         class="pip-composite-checklist lp24-flex rp24-flex">
        <pip-checklist-view pip-options="item.checklist"
                            pip-changed="onContentChange()"
                            pip-rebind="true"
                            ng-disabled="isDisabled()">
        </pip-checklist-view>
    </div>

    <!--for location -->
    <div class="pip-composite-location layout-row layout-align-start-start flex"
         ng-if="item.type == 'location' && (item.loc_pos || item.loc_name)">

        <pip-location class="flex"
                      pip-location-name="item.loc_name"
                      pip-location-pos="item.loc_pos"
                      pip-show-location-icon="true"
                      pip-collapse="false"
                      ng-disabled="ngDisabled()"
                      pip-rebind="true">
        </pip-location>
    </div>

    <!-- for time -->
    <div class="pip-composite-time lp24-flex rp24-flex layout-row layout-align-start-center  flex"
         ng-if="item.type == 'time'">

        <md-icon md-svg-icon="icons:time" class="lm0"></md-icon>
        <pip-time-range
                pip-start-date="item.start"
                pip-end-date="item.end"
                pip-rebind="true"
                ng-disabled="ngDisabled()">
        </pip-time-range>
    </div>
</div>