Deep Tailor 0e9319e97b Plot options 4.1 (#2303)
* working crosshairs -- todo -- add toggle option

* add ability to toggle crosshair

* add zoom in by onscreen button to plot

* add zoom out functionality

* switch positions of zoom in and out buttons

* working zoom with mousewheel

* add better logic to storing plot history on mouse wheel zoom

* Local controls styling in plots and imagery

- WIP

* Plot local controls, cursor guides

- Local control classes much refined;
- Cursor guides styled, theme constants added;

* Fix local controls in imagery

- LC styles refined;
- New theme constant;

* Better approach to loading

- New .c-loading--overlay that doesn't block the cursor;
- Applied to plot views (telem, overlay and stacked plots);

* Plot styles, local controls refined

- Moved plot classes into their own scss file;
- More refinement on local control styles;
- Plot local controls layout finalized;
- Buttons smallified in layout frame context;

* Convert export buttons from <a> tags

* Stubbed in cursor guide buttons in templates

- WIP!

* add toggle-cursor-guide-button to stacked plots

* move cursor guide button to top left in all plots for consistency

* Plot local controls layout refined

- Also: global styling for *[disabled]

* Change c-button 'is-enabled' to 'is-active'

* Added check for if crosshairs enabled before tracking
2019-03-21 13:57:41 -07:00

59 lines
2.8 KiB
HTML

<div class="t-imagery c-imagery" ng-controller="ImageryController as imagery">
<mct-split-pane class='abs' anchor="bottom" alias="imagery">
<div class="split-pane-component has-local-controls l-image-main-wrapper l-flex-col">
<div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover l-flex-row c-imagery__lc">
<span class="holder flex-elem grows c-imagery__lc__sliders">
<input class="icon-brightness" type="range"
min="0"
max="500"
ng-model="filters.brightness" />
<input class="icon-contrast" type="range"
min="0"
max="500"
ng-model="filters.contrast" />
</span>
<span class="holder flex-elem t-reset-btn-holder c-imagery__lc__reset-btn">
<a class="s-icon-button icon-reset t-btn-reset"
ng-click="filters = { brightness: 100, contrast: 100 }"></a>
</span>
</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="l-datetime-w flex-elem grows">
<a class="c-button show-thumbs sm hidden icon-thumbs-strip"
ng-click="showThumbsBubble = (showThumbsBubble) ? false:true"></a>
<span class="l-time">{{imagery.getTime()}}</span>
</div>
<div class="h-local-controls flex-elem">
<a class="c-button icon-pause pause-play"
ng-click="imagery.paused(!imagery.paused())"
ng-class="{ 'is-paused': imagery.paused() }"></a>
<a href=""
class="s-button l-mag s-mag vsm icon-reset"
ng-click="clipped = false"
ng-show="clipped === true"
title="Not all of image is visible; click to reset."></a>
</div>
</div>
</div>
<mct-splitter></mct-splitter>
<div class="split-pane-component l-image-thumbs-wrapper">
<div class="l-image-thumb-item" ng-class="{selected: image.selected}" ng-repeat="image in imageHistory track by $index"
ng-click="imagery.setSelectedImage(image)" ng-init="imagery.scrollToBottom()">
<img class="l-thumb"
ng-src={{imagery.getImageUrl(image)}}>
<div class="l-time">{{imagery.getTime(image)}}</div>
</div>
</div>
</mct-split-pane>
</div>