mirror of
https://github.com/nasa/openmct.git
synced 2025-03-28 14:48:42 +00:00
f40c9fa6f9
* working overlayService * wire to snapshot, and add onDestroy Callback * increment overlayId * New branch from topic-core-refactor to use as central point for common CSS work - Manually migrated changes from vue-toolbar, expect conflicts there and in vue-layout; * Manually update constants-snow from vue-toolbar branch * Update markup to use latest button classnames - c-menu-button > c-button--menu; - c-icon-button > c-click-icon; * Various from vue-conductor-style - Mods to input styling; - Input[] styles moved to _controls; - New/revised constants vals; * Resolve bizarre merge conflict when applying stash * Code cleanup * remove duplicate div * Alias and type-icon fixes - More robust approach to alias indicators; - Added alias indication to tree-item.vue; - TODO: wire up alias indication tree-item.vue; * Accessibility mods, convert elements to <button> - Better reset styles for htmlInputReset mixin to allow use of <button> without browser default styling; - Create button; - BrowseBar action buttons; - c-click-icons; - Removed Preview button from BrowseBar.vue; * Overlay styling WIP - Base markup pretty solid; - Stubbed in temp values for overlayTypeCssClass in overlayService.js; - TODO: styling for contents area; * add options object, scope variables to show function, add destroy callback to active Overlay Object (for easier retrieval
92 lines
2.3 KiB
Vue
92 lines
2.3 KiB
Vue
<template>
|
|
<div class="c-overlay">
|
|
<div class="c-overlay__blocker"
|
|
v-on:click="destroy">
|
|
</div>
|
|
<div class="c-overlay__outer">
|
|
<button class="c-click-icon c-overlay__close-button icon-x-in-circle"
|
|
v-on:click="destroy">
|
|
</button>
|
|
<div class="c-overlay__contents" ref="element"></div>
|
|
<div class="c-overlay__button-bar">
|
|
<button class="c-button c-button--major"
|
|
v-on:click="destroy">Done</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import "~styles/sass-base";
|
|
|
|
.l-overlay-wrapper {
|
|
// Created by overlayService.js, contains this template.
|
|
// Acts as an anchor for one or more overlays.
|
|
display: contents;
|
|
}
|
|
|
|
.c-overlay {
|
|
@include abs();
|
|
z-index: 100;
|
|
|
|
&__blocker {
|
|
display: none; // Mobile-first
|
|
}
|
|
|
|
&__outer {
|
|
@include abs();
|
|
background: $colorOvrBg;
|
|
color: $colorOvrFg;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: $overlayInnerMargin;
|
|
}
|
|
|
|
&__close-button {
|
|
$p: $interiorMarginSm;
|
|
border-radius: 100%;
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: $p; right: $p;
|
|
}
|
|
|
|
&__contents {
|
|
flex: 1 1 auto;
|
|
overflow: auto;
|
|
}
|
|
|
|
&__button-bar {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: $interiorMargin;
|
|
}
|
|
|
|
body.desktop & {
|
|
&__blocker {
|
|
@include abs();
|
|
background: $colorOvrBlocker;
|
|
cursor: pointer;
|
|
display: block;
|
|
}
|
|
|
|
&__outer {
|
|
$m: $overlayOuterMargin;
|
|
top: $m; right: $m; bottom: $m; left: $m;
|
|
border-radius: $overlayCr;
|
|
box-shadow: rgba(black, 0.5) 0 2px 25px;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
inject: ['destroy', 'element'],
|
|
mounted() {
|
|
this.$refs.element.appendChild(this.element);
|
|
}
|
|
}
|
|
</script>
|