platform/io.sc.platform.lcdp.frontend/public/flowable/modeler/views/app-definitions.html

<div class="subheader" id="list-header">
	<div class="fixed-container">
	    <div class="btn-group pull-right">
	        <button type="button" class="btn btn-default" ng-click="createApp()" translate>APPS-LIST.ACTION.CREATE</button>
	        <button type="button" class="btn btn-default" ng-click="importAppDefinition()" translate>APPS-LIST.ACTION.IMPORT</button>
	    </div>
	    <h2>{{'APPS-LIST.TITLE' | translate}}</h2>
	</div>
</div>
<div class="container-fluid content" auto-height offset="40">
        <div class="col-xs-2 filter-wrapper">
            <div class="input-group">
                <span class="input-group-addon"> <i
                    class="glyphicon glyphicon-search"></i>
                </span> <input type="text" ng-model="model.pendingFilterText" class="form-control" ng-change="filterDelayed()"
                    placeholder="{{'APPS-LIST.SEARCH-PLACEHOLDER' | translate}}">
            </div>
            <ul class="filter-list">
                <li ng-repeat="filter in model.filters" ng-class="{'current' : filter.id == model.activeFilter.id}">
                    <a ng-click="activateFilter(filter)">{{'APPS-LIST.FILTER.' + filter.labelKey | translate}}</a>
                </li>
            </ul>
        </div>
        
        <div class="col-xs-10 item-wrapper" id="list-items">
            <div class="dropdown-subtle pull-right" ng-show="model.apps.size != 0">
                <div class="btn-group btn-group-sm" activiti-fix-dropdown-bug>
                    <button type="button" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown">{{'FORMS-LIST.SORT.' + model.activeSort.labelKey | translate}} <i class="caret"></i></button>
                    <ul class="dropdown-menu pull-right">
                        <li ng-repeat="sort in model.sorts">
                            <a ng-click="activateSort(sort)">{{'APPS-LIST.SORT.' + sort.labelKey | translate}}</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="message clearfix">
                <div class="loading pull-left" ng-show="model.loading">
                    <div class="l1"></div><div class="l2"></div><div class="l2"></div>
                </div>
                <div ng-if="!model.loading">
                    <span ng-if="model.apps.size > 1">{{'APPS-LIST.FILTER.' + model.activeFilter.labelKey + '-COUNT' | translate:model.apps}}</span>
                    <span ng-if="model.apps.size == 1">{{'APPS-LIST.FILTER.' + model.activeFilter.labelKey + '-ONE' | translate}}</span>
                    <span ng-if="model.apps.size == 0 && (!model.filterText || model.filterText == '') &&  model.activeFilter.id != 'myApps'">{{'APPS-LIST.FILTER.' + model.activeFilter.labelKey + '-EMPTY' | translate}}</span>
                    <span ng-if="model.apps.size > 0 && model.filterText !='' && model.filterText !== undefined">{{'APPS-LIST.FILTER.FILTER-TEXT' | translate:model}}</span>
                    <span ng-if="model.apps.size == 0 && model.filterText !='' && model.filterText !== undefined">{{'APPS-LIST.FILTER.FILTER-TEXT-EMPTY' | translate:model}}</span>

                </div>
            </div>

            <div class="help-container fixed" ng-if="model.apps.size == 0 && !model.loading && model.activeFilter.id == 'myApps' &&  (!model.filterText || model.filterText == '')">
                <div>
                    <div class="help-text wide">
                        <div class="description">
                            {{'APPS-LIST.FILTER.NO-APPS' | translate}}
                        </div>
                        <div class="help-entry" ng-click="createApp()">
                            <span class="glyphicon glyphicon-plus-sign"></span>
                            <span translate="APPS-LIST.FILTER.NO-APPS-CALL-TO-ACTION"></span>
                            <br>
                            <span class="note" translate="APPS-LIST.FILTER.NO-APPS-NOTE"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="item fadein" ng-repeat="app in model.apps.data">
                <div class="app {{app.appDefinition.theme ? app.appDefinition.theme : 'theme-1'}}">
                    <div class="app-actions">
                        <span class="badge">v{{app.version}}</span>
                        <div class="btn-group pull-right">
                            <button type="button" ng-click="showAppDetails(app); $event.stopPropagation();" class="btn btn-default" title="{{'APP.ACTION.DETAILS' | translate}}">
                                <i class="glyphicon glyphicon-search"></i>
                            </button>
                            <button type="button" ng-click="editAppDetails(app); $event.stopPropagation();" class="btn btn-default" title="{{'APP.ACTION.OPEN-IN-EDITOR' | translate}}">
                                <i class="glyphicon glyphicon-edit"></i>
                            </button>
                        </div>
                    </div>
                    <a ng-click="showAppDetails(app)">
                        <div class="app-content">
                            <h3>{{app.name}}</h3>
                
                            <p>{{app.description}}</p>
                        </div>
                        <div class="backdrop">
                            <i ng-show="!app.appDefinition.icon" class="icon icon-choice"></i>
                            <i ng-show="app.appDefinition.icon" class="glyphicon {{app.appDefinition.icon}}"></i>
                        </div>
                        <div class="logo">
                            <i ng-show="!app.appDefinition.icon" class="icon icon-choice"></i>
                            <i ng-show="app.appDefinition.icon" class="glyphicon {{app.appDefinition.icon}}"></i>
                        </div>
                    </a>
                </div>
            </div>
            
            <div class="show-more" ng-if="model.apps.data.length < model.apps.total">
                <a>{{'APPS-LIST.ACTION.SHOW-MORE' | translate}}</a>
            </div>
        </div>
</div>