angular-material-simple-components/src/js/components/CameraComponent/camera.tpl.html

This include simplification of angular material components

<md-dialog aria-label="Camera Dialog" layout="column">
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>{{$ctrl.title}}</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="$ctrl.cancel()">
                <md-icon class="material-icons" aria-label="Close dialog">close</md-icon>
            </md-button>
        </div>
    </md-toolbar>

   <md-content id="camera-root" layout="row">
       <video
               ng-if="!$ctrl.error"
               ng-show="!$ctrl.captured && !$ctrl.loading"
               id="camera-video"
               autoplay="true"
               ng-style="{width:$ctrl.dimensions.width + 'px', height:$ctrl.dimensions.height + 'px'}"></video>

       <canvas
               ng-if="!$ctrl.error"
               ng-show="$ctrl.captured && !$ctrl.loading"
               id="camera-canvas"
               width="{{$ctrl.dimensions.width + 'px'}}"
               height="{{$ctrl.dimensions.height + 'px'}}"
               ng-style="{width:$ctrl.dimensions.width + 'px', height:$ctrl.dimensions.height + 'px'}"></canvas>

       <div ng-if="$ctrl.error && !$ctrl.loading" layout="column" ng-style="{width:$ctrl.dimensions.width + 'px', height:$ctrl.dimensions.height + 'px'}" layout-align="center center">
           <md-icon class="material-icons" style="font-size: 40px;">sentiment_very_dissatisfied</md-icon>
           <p class="md-title" style="text-align: center;">{{ $ctrl.message }}</p>
       </div>
       <div ng-if="$ctrl.loading" layout="row" layout-sm="column" ng-style="{width:$ctrl.dimensions.width + 'px', height:$ctrl.dimensions.height + 'px'}" layout-align="center center">
           <md-progress-circular md-indetermied class="md-accent" md-diameter="96"></md-progress-circular>
       </div>
   </md-content>

    <md-divider></md-divider>

    <md-dialog-actions ng-if="!$ctrl.captured" layout="row" layout-align="end center" >
            <md-button class="md-raised md-accent" ng-disabled="$ctrl.error" ng-click="$ctrl.takeSnapshot()" ><md-icon class="material-icons">photo_camera</md-icon><md-tooltip md-direction="top">Capturar</md-tooltip></md-button>
            <md-button class="md-warn" ng-click="$ctrl.cancel()">Cancelar</md-button>
    </md-dialog-actions>

    <md-dialog-actions ng-if="$ctrl.captured" layout="row" layout-align="end center" >
            <md-button class="md-raised md-accent" ng-click="$ctrl.salvar()">Salvar</md-button>
            <md-button class="md-warn" ng-click="$ctrl.voltar()">Voltar</md-button>
    </md-dialog-actions>

</md-dialog>;