pip-webui/pip-webui-pictures/src/picture_list_edit/picture_list_edit.html

HTML5 UI for LOB applications

<div pip-focused>
	<div class="pip-picture-upload pointer pip-focusable"
		 ng-class="{'pip-picture-error': item.error}"
		 ng-keydown="onKeyDown($event, item)"
		 tabindex="{{ ngDisabled() ? -1 : 0 }}"
		 ng-repeat="item in control.items | filter: filterItem">

		<div class="pip-default-icon" ng-hide="item.loaded || item.error">
			<md-icon  pip-cancel-drag="true" class="pip-picture-icon" md-svg-icon="icons:{{icon}}"></md-icon>
		</div>
		<div class="pip-default-text" ng-show="item.error">
			<!--span style="color: red">{{ 'ERROR_IMAGE_PRELOADING' | translate}}</span-->
			<md-icon  pip-cancel-drag="true" md-svg-icon="icons:warn-circle"></md-icon>
		</div>
		<img ng-src="{{::item.url}}"
			 pip-cancel-drag="true"
			 ng-hide="item.error"
			 ng-class="{ 'pip-image-new': item.state == 'added' }"
			 ui-event="{ error: 'onImageError($event, item)', load: 'onImageLoad($event, item)' }">

		<md-button ng-click="onDeleteClick(item)"
				   ng-disabled="ngDisabled() || control.uploading" tabindex="-1"
				   aria-label="delete"
				   class="md-icon-button">

			<md-icon  pip-cancel-drag="true" md-svg-icon="icons:cross"></md-icon>
		</md-button>
		<md-progress-linear md-mode="indeterminate" ng-show="item.uploading" value="{{ item.progress }}">
		</md-progress-linear>
	</div>

	<button class="pip-picture-upload pip-picture-drop pip-focusable"
			pip-add-image
		    ng-focus="onFocus()"
	        ng-blur="onBlur()"
			pip-changed="readItemLocally(url, file)"
			ng-disabled="ngDisabled() || control.uploading">

		<div class="pip-default-icon">
			<md-icon  pip-cancel-drag="true" class="pip-picture-icon" md-svg-icon="icons:{{icon}}"></md-icon>
		</div>
		<div class="pip-default-text">
			<span>{{text | translate}}</span>
		</div>
	</button>
	<div class="clearfix"></div>
</div>