graphdb-workbench
Version:
The web application for GraphDB APIs
52 lines (50 loc) • 2.58 kB
HTML
<link href="css/shuttle-multiselect.css?v=3.1.0-RC3" rel="stylesheet"/>
<div class="shuttle-multiselect">
<div class="shuttle-panel available-options">
<div class="shuttle-panel-header">
<h5>{{labels.availableOptionsTitle | translate}}</h5>
</div>
<div class="shuttle-panel-toolbar toolbar-left">
<input type="text" class="form-control filter-selected"
placeholder="{{labels.availableOptionsFilter | translate}}"
ng-model="searchLeft">
<a href="#" ng-click="selectAll()" class="btn-link secondary add-all-btn"
gdb-tooltip="{{labels.selectAllTooltip | translate}}"
tooltip-placement="top">{{labels.selectAllLabel | translate}}</a>
</div>
<div class="options-list">
<div class="option-item"
ng-repeat="item in availableOptions | searchFilter:searchLeft | orderBy:'label' track by $index">
<span>{{item.label}}</span>
<a href="#" ng-click="selectOption(item)" class="btn-link secondary item-action add-btn"
gdb-tooltip="{{labels.selectTooltip | translate}}"
tooltip-placement="top">
<span class="fa fa-plus-circle"></span>
</a>
</div>
</div>
</div>
<div class="shuttle-panel selected-options">
<div class="shuttle-panel-header">
<h5>{{labels.selectedOptionsTitle | translate}}</h5>
</div>
<div class="shuttle-panel-toolbar toolbar-right">
<div ng-if="selectedOptions.length" class="selected-items-message">
{{labels.selectedOptionsCount | translate:{count: selectedOptions.length} }}
</div>
<a href="#" ng-click="deselectAll()" class="btn-link secondary remove-all-btn"
gdb-tooltip="{{labels.deselectAllTooltip | translate}}"
tooltip-placement="top">{{labels.deselectAllLabel | translate}}</a>
</div>
<div class="options-list">
<div class="option-item" ng-repeat="item in selectedOptions | orderBy:'label' track by $index">
<span>{{item.label}}</span>
<a href="#" ng-click="deselectOption(item)" class="btn-link secondary item-action remove-btn"
gdb-tooltip="{{labels.deselectTooltip | translate}}"
tooltip-placement="top">
<span class="fa fa-minus-circle"></span>
</a>
</div>
</div>
</div>
</div>