mirror of
https://github.com/nasa/openmct.git
synced 2024-12-19 05:07:52 +00:00
Merge branch 'master' into ladtableset-name-clarity
This commit is contained in:
Nikhil
GitHub
commit
d8291ddc17
@ -22,19 +22,32 @@
|
||||
></a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="main-image s-image-main c-imagery__main-image"
|
||||
<div class="main-image s-image-main c-imagery__main-image has-local-controls"
|
||||
:class="{'paused unnsynced': paused(),'stale':false }"
|
||||
:style="{'background-image': getImageUrl() ? `url(${getImageUrl()})` : 'none',
|
||||
'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`}"
|
||||
>
|
||||
<div class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-buttons">
|
||||
<button class="c-nav c-nav--prev"
|
||||
title="Previous image"
|
||||
:disabled="isPrevDisabled()"
|
||||
@click="prevImage()"
|
||||
></button>
|
||||
<button class="c-nav c-nav--next"
|
||||
title="Next image"
|
||||
:disabled="isNextDisabled()"
|
||||
@click="nextImage()"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="c-imagery__control-bar">
|
||||
<div class="c-imagery__timestamp">{{ getTime() }}</div>
|
||||
<div class="h-local-controls flex-elem">
|
||||
<button
|
||||
class="c-button icon-pause pause-play"
|
||||
:class="{'is-paused': paused()}"
|
||||
@click="paused(!paused())"
|
||||
@click="paused(!paused(), true)"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
@ -60,7 +73,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
|
||||
export default {
|
||||
inject: ['openmct', 'domainObject'],
|
||||
@ -83,6 +95,11 @@ export default {
|
||||
timeFormat: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
bounds() {
|
||||
return this.openmct.time.bounds();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// set
|
||||
this.keystring = this.openmct.objects.makeKeyString(this.domainObject.identifier);
|
||||
@ -151,11 +168,11 @@ export default {
|
||||
|| (scrollHeight - scrollTop) > 2 * clientHeight;
|
||||
this.autoScroll = !disableScroll;
|
||||
},
|
||||
paused(state) {
|
||||
paused(state, button = false) {
|
||||
if (arguments.length > 0 && state !== this.isPaused) {
|
||||
this.unselectAllImages();
|
||||
this.isPaused = state;
|
||||
if (state === true) {
|
||||
if (state === true && button) {
|
||||
// If we are pausing, select the latest image in imageHistory
|
||||
this.setSelectedImage(this.imageHistory[this.imageHistory.length - 1]);
|
||||
}
|
||||
@ -208,16 +225,15 @@ export default {
|
||||
}
|
||||
},
|
||||
requestHistory() {
|
||||
let bounds = this.openmct.time.bounds();
|
||||
this.requestCount++;
|
||||
const requestId = this.requestCount;
|
||||
const requestId = ++this.requestCount;
|
||||
this.imageHistory = [];
|
||||
this.openmct.telemetry
|
||||
.request(this.domainObject, bounds)
|
||||
.request(this.domainObject, this.bounds)
|
||||
.then((values = []) => {
|
||||
if (this.requestCount === requestId) {
|
||||
values.forEach(this.updateHistory, false);
|
||||
this.updateValues(values[values.length - 1]);
|
||||
// add each image to the history
|
||||
// update values for the very last image (set current image time and url)
|
||||
values.forEach((datum, index) => this.updateHistory(datum, index === values.length - 1));
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -230,11 +246,9 @@ export default {
|
||||
this.unsubscribe = this.openmct.telemetry
|
||||
.subscribe(this.domainObject, (datum) => {
|
||||
let parsedTimestamp = this.timeFormat.parse(datum);
|
||||
let bounds = this.openmct.time.bounds();
|
||||
|
||||
if (parsedTimestamp >= bounds.start && parsedTimestamp <= bounds.end) {
|
||||
if (parsedTimestamp >= this.bounds.start && parsedTimestamp <= this.bounds.end) {
|
||||
this.updateHistory(datum);
|
||||
this.updateValues(datum);
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -246,8 +260,7 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
const index = _.sortedIndexBy(this.imageHistory, datum, this.timeFormat.format.bind(this.timeFormat));
|
||||
this.imageHistory.splice(index, 0, datum);
|
||||
this.imageHistory.push(datum);
|
||||
|
||||
if (updateValues) {
|
||||
this.updateValues(datum);
|
||||
@ -262,6 +275,47 @@ export default {
|
||||
|
||||
this.time = this.timeFormat.format(datum);
|
||||
this.imageUrl = this.imageFormat.format(datum);
|
||||
},
|
||||
selectedImageIndex() {
|
||||
return this.imageHistory.findIndex(image => image.selected);
|
||||
},
|
||||
setSelectedByIndex(index) {
|
||||
this.setSelectedImage(this.imageHistory[index]);
|
||||
},
|
||||
nextImage() {
|
||||
let index = this.selectedImageIndex();
|
||||
this.setSelectedByIndex(++index);
|
||||
if (index === this.imageHistory.length - 1) {
|
||||
this.paused(false);
|
||||
}
|
||||
},
|
||||
prevImage() {
|
||||
let index = this.selectedImageIndex();
|
||||
if (index === -1) {
|
||||
this.setSelectedByIndex(this.imageHistory.length - 2);
|
||||
} else {
|
||||
this.setSelectedByIndex(--index);
|
||||
}
|
||||
},
|
||||
isNextDisabled() {
|
||||
let disabled = false;
|
||||
let index = this.selectedImageIndex();
|
||||
|
||||
if (index === -1 || index === this.imageHistory.length - 1) {
|
||||
disabled = true;
|
||||
}
|
||||
|
||||
return disabled;
|
||||
},
|
||||
isPrevDisabled() {
|
||||
let disabled = false;
|
||||
let index = this.selectedImageIndex();
|
||||
|
||||
if (index === 0 || this.imageHistory.length < 2) {
|
||||
disabled = true;
|
||||
}
|
||||
|
||||
return disabled;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -160,3 +160,28 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-imagery__prev-next-buttons {
|
||||
//background: rgba(deeppink, 0.2);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.c-nav {
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
.c-nav {
|
||||
@include cArrowButtonBase($colorBg: rgba($colorLocalControlOvrBg, 0.1), $colorFg: $colorBtnBg);
|
||||
@include cArrowButtonSizing($dimOuter: 48px);
|
||||
border-radius: $controlCr;
|
||||
|
||||
.is-in-small-container & {
|
||||
@include cArrowButtonSizing($dimOuter: 32px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
}
|
||||
|
||||
[class*="icon-"] {
|
||||
&:before, &:after
|
||||
&:before
|
||||
{
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@ -540,6 +540,67 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cArrowButtonBase($colorBg: transparent, $colorFg: $colorBtnFg, $filterHov: $filterHov) {
|
||||
// Copied from branch new-tree-refactor
|
||||
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
background: $colorBg;
|
||||
|
||||
&:before {
|
||||
// Arrow shape
|
||||
border-style: solid;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%; top: 50%;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-color: $colorFg;
|
||||
}
|
||||
|
||||
@include hover {
|
||||
filter: $filterHov;
|
||||
}
|
||||
|
||||
&--up, &--prev {
|
||||
&:before {
|
||||
transform: translate(-30%, -50%) rotate(135deg);
|
||||
}
|
||||
}
|
||||
|
||||
&--down, &--next {
|
||||
&:before {
|
||||
transform: translate(-70%, -50%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cArrowButtonSizing($dimOuter: 48px) {
|
||||
height: $dimOuter;
|
||||
width: $dimOuter;
|
||||
$dimInner: floor($dimOuter * 0.6);
|
||||
$borderW: floor($dimInner * 0.3);
|
||||
$backOffsetW: floor($dimInner * 0.4);
|
||||
|
||||
&:before {
|
||||
height: $dimInner;
|
||||
width: $dimInner;
|
||||
}
|
||||
|
||||
&:before {
|
||||
// Arrow shape
|
||||
border-width: 0 $borderW $borderW 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cArrowButton() {
|
||||
@include cArrowButtonBase();
|
||||
@include cArrowButtonSizing();
|
||||
}
|
||||
|
||||
@mixin hasMenu() {
|
||||
&:after {
|
||||
content: $glyph-icon-arrow-down;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user