openmct/platform/features/imagery/res/templates/imagery.html
Charles Hacskaylo 9b11684ae9 [Frontend] Styling for controls
Fixes #1324
CSS, markup, WIP adding reset button
2016-11-15 10:54:00 -08:00

58 lines
2.4 KiB
HTML

<div class="t-imagery" ng-controller="ImageryController as imagery">
<div class="l-image-main-wrapper l-flex-col"
ng-mouseenter="showLocalControls = true;"
ng-mouseleave="showLocalControls = false;">
<div class="l-local-controls s-local-controls s-wrapper-transluc"
ng-class="{ 'hide-nice': !showLocalControls }">
<input class="icon-brightness" type="range"
min="0"
max="1000"
ng-model="filters.brightness">
</input>
<input class="icon-contrast" type="range"
min="0"
max="1000"
ng-model="filters.contrast">
</input>
<a class="s-button icon-refresh" ng-click="
filters.brightness = 100;
filters.contrast = 100
"></a>
</div>
<div class="l-image-main s-image-main flex-elem grows"
ng-class="{ paused: imagery.paused(), stale:false }">
<div class="image-main"
mct-background-image="imagery.getImageUrl()"
filters="filters">
</div>
</div>
<div class="l-image-main-controlbar flex-elem l-flex-row">
<div class="left flex-elem grows">
<a class="s-button show-thumbs sm hidden icon-thumbs-strip"
ng-click="showThumbsBubble = (showThumbsBubble)? false:true"></a>
<span class="l-timezone">{{imagery.getZone()}}</span>
<span class="l-time">{{imagery.getTime()}}</span>
<span class="l-date">{{imagery.getDate()}}</span>
</div>
<div class="right flex-elem">
<a class="s-button pause-play"
ng-click="imagery.paused(!imagery.paused())"
ng-class="{ paused: imagery.paused() }"></a>
<a href="{{imagery.getImageUrl()}}"
ng-if="imagery.getImageUrl()"
target="_blank"
title="Open image in new tab."
class="s-button icon-new-window">
</a>
<a href=""
class="s-button l-mag s-mag ui-symbol vsm icon-arrows-out"
ng-click="clipped = false"
ng-show="clipped === true"
title="Not all of image is visible; click to reset."></a>
</div>
</div>
</div>
</div>