ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-03-18 10:05:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding dynamce class for scrolling the embeds wrapper based on need

Browse Source
This commit is contained in:
Jamie V 2022-09-29 20:13:33 -07:00
parent 9a3806b117
commit a4d2290274
1 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/plugins/notebook/components/NotebookEntry.vue
View File

@ -91,9 +91,14 @@
@tags-updated="timestampAndUpdate"
/>
<div class="c-snapshots c-ne__embeds-wrapper">
<div
ref="embedsWrapper"
class="c-snapshots c-ne__embeds-wrapper"
:class="{ scrollClass: enableEmbedsWrapperScroll }"
>
<NotebookEmbed
v-for="embed in entry.embeds"
ref="embeds"
:key="embed.id"
:embed="embed"
:is-locked="isLocked"
@ -145,6 +150,8 @@ import TextHighlight from '../../../utils/textHighlight/TextHighlight.vue';
import { createNewEmbed } from '../utils/notebook-entries';
import { saveNotebookImageDomainObject, updateNamespaceOfDomainObject } from '../utils/notebook-image';
import _ from 'lodash';
import Moment from 'moment';
const UNKNOWN_USER = 'Unknown';
@ -200,6 +207,11 @@ export default {
}
}
},
data() {
return {
enableEmbedsWrapperScroll: false
};
},
computed: {
createdOnDate() {
return this.formatTime(this.entry.createdOn, 'YYYY-MM-DD');
@ -236,8 +248,21 @@ export default {
}
},
mounted() {
this.manageEmbedLayout = _.debounce(this.manageEmbedLayout, 400);
if (this.$refs.embedsWrapper) {
this.embedsWrapperResizeObserver = new ResizeObserver(this.manageEmbedLayout);
this.embedsWrapperResizeObserver.observe(this.$refs.embedsWrapper);
}
this.manageEmbedLayout();
this.dropOnEntry = this.dropOnEntry.bind(this);
},
beforeDestroy() {
if (this.embedsWrapperResizeObserver) {
this.embedsWrapperResizeObserver.unobserve(this.$refs.embedsWrapper);
}
},
methods: {
async addNewEmbed(objectPath) {
const bounds = this.openmct.time.bounds();
@ -249,6 +274,8 @@ export default {
};
const newEmbed = await createNewEmbed(snapshotMeta);
this.entry.embeds.push(newEmbed);
this.manageEmbedLayout();
},
cancelEditMode(event) {
const isEditing = this.openmct.editor.isEditing();
@ -269,6 +296,17 @@ export default {
deleteEntry() {
this.$emit('deleteEntry', this.entry.id);
},
manageEmbedLayout() {
if (this.$refs.embeds) {
const embedsWrapperLength = this.$refs.embedsWrapper.clientWidth;
const embedsTotalWidth = this.$refs.embeds.reduce((total, embed) => {
return embed.$el.clientWidth + total;
}, 0);
this.enableEmbedsWrapperScroll = embedsTotalWidth > embedsWrapperLength;
}
},
async dropOnEntry($event) {
$event.stopImmediatePropagation();
@ -326,6 +364,8 @@ export default {
this.entry.embeds.splice(embedPosition, 1);
this.timestampAndUpdate();
this.manageEmbedLayout();
},
updateEmbed(newEmbed) {
this.entry.embeds.some(e => {