alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Notebook] Embed enhancements (#5809)

Browse Source 
* added new menu and actions to notebook embed as well as new information on embed

* fix method name case

* Add action messages. Fix margins

* Added bg icons. Change sizing of icons and thumbnails. Add scrolling to overflow embeds

* Rename embed wrapper

* adding dynamce class for scrolling the embeds wrapper based on need

* Add styling to embed scrolling container

* Change tag margin for better spacing between rows. Class rename. Minor styling changes to embed container. Change supermenu icon size

* Change action menu size

* Fix inner shadows. Revert tag code change. Create new theme constants. Make embed container constant

* Fix scroll and snow theme colors

* Fix overflow bug in entries and embed container. Refactor code so that containers optimize space of each entry

* Fix lint error

* Fix so embed container goes full width

* Fix input container to extend full width. Fix margin between notebook elements

* Addressed PR review comments.

* Address PR changes. Fix text overflow for long words.

* address pr review comments

* fixing tests

* first pass

* i've wasted too much time on this

Co-authored-by: Rukmini Bose <rukmini.bose15@gmail.com>
Co-authored-by: rukmini-bose <48999852+rukmini-bose@users.noreply.github.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>
This commit is contained in:
Jamie V
2023-01-20 16:53:37 -08:00
committed by GitHub
parent d1c7d133fc
commit 20c7b23a4f
14 changed files with 371 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,15 +31,28 @@
@click="selectEntry($event, entry)"
>
<div class="c-ne__time-and-content">
<div class="c-ne__time-and-creator">
<span class="c-ne__created-date">{{ createdOnDate }}</span>
<span class="c-ne__created-time">{{ createdOnTime }}</span>
<div class="c-ne__time-and-creator-and-delete">
<div class="c-ne__time-and-creator">
<span class="c-ne__created-date">{{ createdOnDate }}</span>
<span class="c-ne__created-time">{{ createdOnTime }}</span>
<span
v-if="entry.createdBy"
class="c-ne__creator"
>
<span class="icon-person"></span> {{ entry.createdBy }}
</span>
</div>
<span
v-if="entry.createdBy"
class="c-ne__creator"
v-if="!readOnly && !isLocked"
class="c-ne__local-controls--hidden"
>
<span class="icon-person"></span> {{ entry.createdBy }}
<button
class="c-ne__remove c-icon-button c-icon-button--major icon-trash"
title="Delete this entry"
tabindex="-1"
@click="deleteEntry"
>
</button>
</span>
</div>
<div class="c-ne__content">
@@ -94,30 +107,26 @@
</div>
</div>
<div class="c-snapshots c-ne__embeds">
<NotebookEmbed
v-for="embed in entry.embeds"
:key="embed.id"
:embed="embed"
:is-locked="isLocked"
@removeEmbed="removeEmbed"
@updateEmbed="updateEmbed"
/>
<div
:class="{'c-scrollcontainer': enableEmbedsWrapperScroll }"
>
<div
ref="embedsWrapper"
class="c-snapshots c-ne__embeds-wrapper"
>
<NotebookEmbed
v-for="embed in entry.embeds"
ref="embeds"
:key="embed.id"
:embed="embed"
:is-locked="isLocked"
@removeEmbed="removeEmbed"
@updateEmbed="updateEmbed"
/>
</div>
</div>
</div>
</div>
<div
v-if="!readOnly && !isLocked"
class="c-ne__local-controls--hidden"
>
<button
class="c-icon-button c-icon-button--major icon-trash"
title="Delete this entry"
tabindex="-1"
@click="deleteEntry"
>
</button>
</div>
<div
v-if="readOnly"
class="c-ne__section-and-page"
@@ -147,6 +156,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';
@@ -211,6 +222,11 @@ export default {
required: true
}
},
data() {
return {
enableEmbedsWrapperScroll: false
};
},
computed: {
createdOnDate() {
return this.formatTime(this.entry.createdOn, 'YYYY-MM-DD');
@@ -246,8 +262,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();
@@ -259,6 +288,8 @@ export default {
};
const newEmbed = await createNewEmbed(snapshotMeta);
this.entry.embeds.push(newEmbed);
this.manageEmbedLayout();
},
cancelEditMode(event) {
const isEditing = this.openmct.editor.isEditing();
@@ -279,6 +310,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();
@@ -336,6 +378,8 @@ export default {
this.entry.embeds.splice(embedPosition, 1);
this.timestampAndUpdate();
this.manageEmbedLayout();
},
updateEmbed(newEmbed) {
this.entry.embeds.some(e => {