pip-webui/pip-webui-controls/src/options_dialog/options_dialog_big.html

HTML5 UI for LOB applications

<!--
@file Options dialog content
@copyright Digital Living Software Corp. 2014-2016
-->

<md-dialog class="pip-dialog pip-options-dialog-big layout-column"
           min-width="400" md-theme="{{theme}}">
    <md-dialog-content class="pip-body p0 pip-scroll" ng-class="{'bp24': !noActions}">
        <div class="pip-header" ng-class="{'header-hint': noTitle && hint}">
            <h3 class="m0 text-title" ng-if="!noTitle">
                {{::title | translate}}
            </h3>
            <div ng-show="noTitle && hint" class="dialog-hint layout-row layout-align-start-center">
                <div class="w40" flex-fixed>
                    <md-icon md-svg-icon="icons:info-circle-outline"></md-icon>
                </div>
                <div>{{::hint | translate}}</div>
            </div>
        </div>
        <div class="pip-divider" ng-if="!noTitle"></div>
        <div class="pip-content">
            <div class="h8" ng-if="noTitle && hint"></div>
            <md-list class="pip-menu  pip-ref-list w-stretch"
                     pip-selected="optionIndex" index="{{optionIndex }}"
                     pip-select="onSelected($event)">

                <md-list-item class="pip-ref-list-item pip-selectable layout-row layout-align-start-center"
                              ng-class="{'selected' : option.name == selectedOptionName,
                              'divider-bottom': $index != options.length - 1}"
                              md-ink-ripple xxxxng-keypress="onKeyPress($event)"
                              ng-keyup="onKeyUp($event, $index)"
                              ng-repeat="option in options" ng-click="onOptionSelect($event, option)">

                    <div class="pip-content  line-height-string  max-w100-stretch">
                        <p class="pip-title  rp24-flex" ng-if="option.title" style="margin-bottom: 4px !important;">
                            {{::option.title | translate}}
                        </p>
                        <div class="pip-subtitle  rp24-flex"
                             style="height: inherit"
                             ng-if="option.subtitle">
                            {{::option.subtitle | translate}}
                        </div>
                        <div class="pip-subtitle  rp24-flex"
                             style="height: inherit" ng-if="option.text"
                             pip-translate-html="{{::option.text | translate}}">
                        </div>
                    </div>

                </md-list-item>

            </md-list>
            <!--
            <md-radio-group ng-model="selectedOptionName" class="pip-list md-primary" md-no-ink="true"
                            ng-keypress="onKeyPress($event)" tabindex="0">
                <div ng-repeat="option in options" class="pip-list-item p0" md-ink-ripple
                     ui-event="{ click: 'onOptionSelect($event, option)' }"
                     ng-class="{ selected: option.name == selectedOptionName }">
                    <div class="pip-list-item">

                        <div class="pip-content lp24-flex rp24-flex" flex>
                            <div class="pip-title" ng-if="option.title">
                                {{::option.title | translate}}
                            </div>
                            <div class="pip-subtitle" ng-if="option.subtitle">
                                {{::option.subtitle | translate}}
                            </div>
                            <div class="pip-text" ng-if="option.text">

                                <span pip-translate-html="{{::option.text | translate}}"/>
                            </div>
                        </div>

                        <md-radio-button ng-value="option.name" tabindex="-1" class="rm24-flex"
                                         aria-label="{{::option.title | translate}}">
                        </md-radio-button>
                    </div>

                </div>
            </md-radio-group> -->
        </div>
        <div class="h8" ng-if="noActions"></div>
    </md-dialog-content>

    <div class="pip-footer" ng-if="!noActions">
        <div>
            <md-button class="pip-cancel" ng-click="onCancel()">{{::'CANCEL' | translate}}</md-button>
            <md-button class="pip-submit md-accent" ng-click="onSelect()" style="margin-right: -6px">
                {{::applyButtonTitle | translate}}
            </md-button>
        </div>
    </div>
</md-dialog>