diff --git a/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js index f44140fe4e..66c1b038c0 100644 --- a/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js +++ b/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js @@ -24,8 +24,6 @@ This test suite is dedicated to tests which verify the basic operations surrounding Notebooks. */ -// FIXME: Remove this eslint exception once tests are implemented -// eslint-disable-next-line no-unused-vars const { test, expect } = require('../../../../pluginFixtures'); const { expandTreePaneItemByName, createDomainObjectWithDefaults } = require('../../../../appActions'); const nbUtils = require('../../../../helper/notebookUtils'); @@ -266,70 +264,3 @@ test.describe('Notebook entry tests', () => { test.fixme('new entries persist through navigation events without save', async ({ page }) => {}); test.fixme('previous and new entries can be deleted', async ({ page }) => {}); }); - -test.describe('Snapshot Menu tests', () => { - test.fixme('When no default notebook is selected, Snapshot Menu dropdown should only have a single option', async ({ page }) => { - // There should be no default notebook - // Clear default notebook if exists using `localStorage.setItem('notebook-storage', null);` - // refresh page - // Click on 'Notebook Snaphot Menu' - // 'save to Notebook Snapshots' should be only option there - }); - test.fixme('When default notebook is updated selected, Snapshot Menu dropdown should list it as the newest option', async ({ page }) => { - // Create 2a notebooks - // Set Notebook A as Default - // Open Snapshot Menu and note that Notebook A is listed - // Close Snapshot Menu - // Set Default Notebook to Notebook B - // Open Snapshot Notebook and note that Notebook B is listed - // Select Default Notebook Option and verify that Snapshot is added to Notebook B - }); - test.fixme('Can add Snapshots via Snapshot Menu and details are correct', async ({ page }) => { - //Note this should be a visual test, too - // Create Telemetry object - // Create A notebook with many pages and sections. - // Set page and section defaults to be between first and last of many. i.e. 3 of 5 - // Navigate to Telemetry object - // Select Default Notebook Option and verify that Snapshot is added to Notebook A - // Verify Snapshot Details appear correctly - }); - test.fixme('Snapshots adjust time conductor', async ({ page }) => { - // Create Telemetry object - // Set Telemetry object's timeconductor to Fixed time with Start and Endtimes are recorded - // Embed Telemetry object into notebook - // Set Time Conductor to Local clock - // Click into embedded telemetry object and verify object appears with same fixed time from record - }); -}); - -test.describe('Snapshot Container tests', () => { - test.fixme('5 Snapshots can be added to a container', async ({ page }) => {}); - test.fixme('5 Snapshots can be added to a container and Deleted with Delete All action', async ({ page }) => {}); - test.fixme('A snapshot can be Deleted from Container', async ({ page }) => {}); - test.fixme('A snapshot can be Previewed from Container', async ({ page }) => {}); - test.fixme('A snapshot Container can be open and closed', async ({ page }) => {}); - test.fixme('Can add object to Snapshot container and pull into notebook and create a new entry', async ({ page }) => { - //Create Notebook - //Create Telemetry Object - //From Telemetry Object, use 'save to Notebook Snapshots' - //Snapshots indicator should blink, click on it to view snapshots - //Navigate to Notebook - //Drag and Drop onto droppable area for new entry - //New Entry created with given snapshot added - //Snapshot removed from container? - }); - test.fixme('Can add object to Snapshot container and pull into notebook and existing entry', async ({ page }) => { - //Create Notebook - //Create Telemetry Object - //From Telemetry Object, use 'save to Notebook Snapshots' - //Snapshots indicator should blink, click on it to view snapshots - //Navigate to Notebook - //Drag and Drop into exiting entry - //Existing Entry updated with given snapshot - //Snapshot removed from container? - }); - test.fixme('Verify Embedded options for PNG, JPG, and Annotate work correctly', async ({ page }) => { - //Add snapshot to container - //Verify PNG, JPG, and Annotate buttons work correctly - }); -}); diff --git a/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js new file mode 100644 index 0000000000..83a062b376 --- /dev/null +++ b/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js @@ -0,0 +1,134 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2022, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ + +/* +This test suite is dedicated to tests which verify the basic operations surrounding Notebooks. +*/ + +const { test, expect } = require('../../../../pluginFixtures'); +// const { expandTreePaneItemByName, createDomainObjectWithDefaults } = require('../../../../appActions'); +// const nbUtils = require('../../../../helper/notebookUtils'); + +test.describe('Snapshot Menu tests', () => { + test.fixme('When no default notebook is selected, Snapshot Menu dropdown should only have a single option', async ({ page }) => { + // There should be no default notebook + // Clear default notebook if exists using `localStorage.setItem('notebook-storage', null);` + // refresh page + // Click on 'Notebook Snaphot Menu' + // 'save to Notebook Snapshots' should be only option there + }); + test.fixme('When default notebook is updated selected, Snapshot Menu dropdown should list it as the newest option', async ({ page }) => { + // Create 2a notebooks + // Set Notebook A as Default + // Open Snapshot Menu and note that Notebook A is listed + // Close Snapshot Menu + // Set Default Notebook to Notebook B + // Open Snapshot Notebook and note that Notebook B is listed + // Select Default Notebook Option and verify that Snapshot is added to Notebook B + }); + test.fixme('Can add Snapshots via Snapshot Menu and details are correct', async ({ page }) => { + //Note this should be a visual test, too + // Create Telemetry object + // Create A notebook with many pages and sections. + // Set page and section defaults to be between first and last of many. i.e. 3 of 5 + // Navigate to Telemetry object + // Select Default Notebook Option and verify that Snapshot is added to Notebook A + // Verify Snapshot Details appear correctly + }); + test.fixme('Snapshots adjust time conductor', async ({ page }) => { + // Create Telemetry object + // Set Telemetry object's timeconductor to Fixed time with Start and Endtimes are recorded + // Embed Telemetry object into notebook + // Set Time Conductor to Local clock + // Click into embedded telemetry object and verify object appears with same fixed time from record + }); +}); + +test.describe('Snapshot Container tests', () => { + test.beforeEach(async ({ page }) => { + //Navigate to baseURL + await page.goto('./', { waitUntil: 'networkidle' }); + + // Create Notebook + // const notebook = await createDomainObjectWithDefaults(page, { + // type: 'Notebook', + // name: "Test Notebook" + // }); + // // Create Overlay Plot + // const snapShotObject = await createDomainObjectWithDefaults(page, { + // type: 'Overlay Plot', + // name: "Dropped Overlay Plot" + // }); + + await page.getByRole('button', { name: ' Snapshot ' }).click(); + await page.getByRole('menuitem', { name: ' Save to Notebook Snapshots' }).click(); + await page.getByRole('button', { name: 'Show' }).click(); + + }); + test.fixme('5 Snapshots can be added to a container', async ({ page }) => {}); + test.fixme('5 Snapshots can be added to a container and Deleted with Delete All action', async ({ page }) => {}); + test.fixme('A snapshot can be Deleted from Container with 3 dot action menu', async ({ page }) => {}); + test.fixme('A snapshot can be Viewed, Annotated, display deleted, and saved from Container with 3 dot action menu', async ({ page }) => { + await page.locator('.c-snapshot.c-ne__embed').first().getByTitle('More options').click(); + await page.getByRole('menuitem', { name: ' View Snapshot' }).click(); + await expect(page.locator('.c-overlay__outer')).toBeVisible(); + await page.getByTitle('Annotate').click(); + await expect(page.locator('#snap-annotation-canvas')).toBeVisible(); + await page.getByRole('button', { name: '' }).click(); + // await expect(page.locator('#snap-annotation-canvas')).not.toBeVisible(); + await page.getByRole('button', { name: 'Save' }).click(); + await page.getByRole('button', { name: 'Done' }).click(); + //await expect(await page.locator) + }); + test('A snapshot can be Quick Viewed from Container with 3 dot action menu', async ({ page }) => { + await page.locator('.c-snapshot.c-ne__embed').first().getByTitle('More options').click(); + await page.getByRole('menuitem', { name: 'Quick View' }).click(); + await expect(page.locator('.c-overlay__outer')).toBeVisible(); + }); + test.fixme('A snapshot can be Navigated To from Container with 3 dot action menu', async ({ page }) => {}); + test.fixme('A snapshot can be Navigated To Item in Time from Container with 3 dot action menu', async ({ page }) => {}); + test.fixme('A snapshot Container can be open and closed', async ({ page }) => {}); + test.fixme('Can add object to Snapshot container and pull into notebook and create a new entry', async ({ page }) => { + //Create Notebook + //Create Telemetry Object + //From Telemetry Object, use 'save to Notebook Snapshots' + //Snapshots indicator should blink, click on it to view snapshots + //Navigate to Notebook + //Drag and Drop onto droppable area for new entry + //New Entry created with given snapshot added + //Snapshot removed from container? + }); + test.fixme('Can add object to Snapshot container and pull into notebook and existing entry', async ({ page }) => { + //Create Notebook + //Create Telemetry Object + //From Telemetry Object, use 'save to Notebook Snapshots' + //Snapshots indicator should blink, click on it to view snapshots + //Navigate to Notebook + //Drag and Drop into exiting entry + //Existing Entry updated with given snapshot + //Snapshot removed from container? + }); + test.fixme('Verify Embedded options for PNG, JPG, and Annotate work correctly', async ({ page }) => { + //Add snapshot to container + //Verify PNG, JPG, and Annotate buttons work correctly + }); +}); diff --git a/e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js b/e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js index 6a51238fd2..08ab8ef92e 100644 --- a/e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js +++ b/e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js @@ -152,7 +152,7 @@ test.describe('Restricted Notebook with a page locked and with an embed @addInit test('Allows embeds to be deleted if page unlocked @addInit', async ({ page }) => { // Click .c-ne__embed__name .c-popup-menu-button - await page.locator('.c-ne__embed__name .c-popup-menu-button').click(); // embed popup menu + await page.locator('.c-ne__embed__name .c-icon-button').click(); // embed popup menu const embedMenu = page.locator('body >> .c-menu'); await expect(embedMenu).toContainText('Remove This Embed'); @@ -161,7 +161,7 @@ test.describe('Restricted Notebook with a page locked and with an embed @addInit test('Disallows embeds to be deleted if page locked @addInit', async ({ page }) => { await lockPage(page); // Click .c-ne__embed__name .c-popup-menu-button - await page.locator('.c-ne__embed__name .c-popup-menu-button').click(); // embed popup menu + await page.locator('.c-ne__embed__name .c-icon-button').click(); // embed popup menu const embedMenu = page.locator('body >> .c-menu'); await expect(embedMenu).not.toContainText('Remove This Embed'); diff --git a/src/plugins/notebook/components/NotebookEmbed.vue b/src/plugins/notebook/components/NotebookEmbed.vue index 49cace8f2e..9ad420fc3c 100644 --- a/src/plugins/notebook/components/NotebookEmbed.vue +++ b/src/plugins/notebook/components/NotebookEmbed.vue @@ -12,14 +12,15 @@ {{ embed.name }} - + -
+
{{ createdOn }}
@@ -32,17 +33,14 @@ import PreviewAction from '../../../ui/preview/PreviewAction'; import RemoveDialog from '../utils/removeDialog'; import PainterroInstance from '../utils/painterroInstance'; import SnapshotTemplate from './snapshot-template.html'; +import objectPathToUrl from '@/tools/url'; import { updateNotebookImageDomainObject } from '../utils/notebook-image'; import ImageExporter from '../../../exporters/ImageExporter'; -import PopupMenu from './PopupMenu.vue'; import Vue from 'vue'; export default { - components: { - PopupMenu - }, inject: ['openmct', 'snapshotContainer'], props: { embed: { @@ -72,7 +70,7 @@ export default { }, data() { return { - popupMenuItems: [] + menuActions: [] }; }, computed: { @@ -88,37 +86,88 @@ export default { watch: { isLocked(value) { if (value === true) { - let index = this.popupMenuItems.findIndex((item) => item.id === 'removeEmbed'); + let index = this.menuActions.findIndex((item) => item.id === 'removeEmbed'); - this.$delete(this.popupMenuItems, index); + this.$delete(this.menuActions, index); } } }, - mounted() { - this.addPopupMenuItems(); + async mounted() { + this.objectPath = []; + await this.setEmbedObjectPath(); + this.addMenuActions(); this.imageExporter = new ImageExporter(this.openmct); }, methods: { - addPopupMenuItems() { - const removeEmbed = { - id: 'removeEmbed', - cssClass: 'icon-trash', - name: this.removeActionString, - callback: this.getRemoveDialog.bind(this) - }; - const preview = { - id: 'preview', - cssClass: 'icon-eye-open', - name: 'Preview', - callback: this.previewEmbed.bind(this) + showMenuItems(event) { + const x = event.x; + const y = event.y; + + const menuOptions = { + menuClass: 'c-ne__embed__actions-menu', + placement: this.openmct.menus.menuPlacement.TOP_RIGHT }; - this.popupMenuItems = [preview]; + this.openmct.menus.showSuperMenu(x, y, this.menuActions, menuOptions); + }, + addMenuActions() { + if (this.embed.snapshot) { + const viewSnapshot = { + id: 'viewSnapshot', + cssClass: 'icon-camera', + name: 'View Snapshot', + description: 'View the snapshot image taken in the form of a jpeg.', + onItemClicked: () => this.openSnapshot() + }; - if (!this.isLocked) { - this.popupMenuItems.unshift(removeEmbed); + this.menuActions = [viewSnapshot]; } + const navigateToItem = { + id: 'navigateToItem', + cssClass: this.embed.cssClass, + name: 'Navigate to Item', + description: 'Navigate to the item with the current time settings.', + onItemClicked: () => this.navigateToItem() + }; + + const navigateToItemInTime = { + id: 'navigateToItemInTime', + cssClass: this.embed.cssClass, + name: 'Navigate to Item in Time', + description: 'Navigate to the item in its time frame when captured.', + onItemClicked: () => this.navigateToItemInTime() + }; + + const quickView = { + id: 'quickView', + cssClass: 'icon-eye-open', + name: 'Quick View', + description: 'Full screen overlay view of the item.', + onItemClicked: () => this.previewEmbed() + }; + + this.menuActions = this.menuActions.concat([quickView, navigateToItem, navigateToItemInTime]); + + if (!this.isLocked) { + const removeEmbed = { + id: 'removeEmbed', + cssClass: 'icon-trash', + name: this.removeActionString, + description: 'Permanently delete this embed from this Notebook entry.', + onItemClicked: this.getRemoveDialog.bind(this) + }; + + this.menuActions.push(removeEmbed); + } + + }, + async setEmbedObjectPath() { + this.objectPath = await this.openmct.objects.getOriginalPath(this.embed.domainObject.identifier); + + if (this.objectPath.length > 0 && this.objectPath[this.objectPath.length - 1].type === 'root') { + this.objectPath.pop(); + } }, annotateSnapshot() { const annotateVue = new Vue({ @@ -179,7 +228,11 @@ export default { painterroInstance.show(object.configuration.fullSizeImageURL); }); }, - changeLocation() { + navigateToItem() { + const url = objectPathToUrl(this.openmct, this.objectPath); + this.openmct.router.navigate(url); + }, + navigateToItemInTime() { const hash = this.embed.historicLink; const bounds = this.openmct.time.bounds(); diff --git a/src/plugins/notebook/components/NotebookEntry.vue b/src/plugins/notebook/components/NotebookEntry.vue index d5fa8957e5..932b45a3c4 100644 --- a/src/plugins/notebook/components/NotebookEntry.vue +++ b/src/plugins/notebook/components/NotebookEntry.vue @@ -31,15 +31,28 @@ @click="selectEntry($event, entry)" >
-
- {{ createdOnDate }} - {{ createdOnTime }} - +
+
+ {{ createdOnDate }} + {{ createdOnTime }} + + {{ entry.createdBy }} + +
- {{ entry.createdBy }} +
@@ -94,30 +107,26 @@
-
- +
+
+ +
-
- -
{ + 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 => { diff --git a/src/styles/_constants-espresso.scss b/src/styles/_constants-espresso.scss index 684a3a7fec..3ac9188aff 100644 --- a/src/styles/_constants-espresso.scss +++ b/src/styles/_constants-espresso.scss @@ -463,6 +463,8 @@ $transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3); $createBtnTextTransform: uppercase; $colorDiscreteItemBg: rgba($colorBodyFg,0.1); $colorDiscreteItemCurrentBg: rgba($colorOk,0.3); +$scrollContainer: $colorBodyBg; +; @mixin discreteItem() { background: $colorDiscreteItemBg; diff --git a/src/styles/_constants-maelstrom.scss b/src/styles/_constants-maelstrom.scss index 9077592ea2..555e5f5e66 100644 --- a/src/styles/_constants-maelstrom.scss +++ b/src/styles/_constants-maelstrom.scss @@ -467,6 +467,7 @@ $transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3); $createBtnTextTransform: uppercase; $colorDiscreteItemBg: rgba($colorBodyFg,0.1); $colorDiscreteItemCurrentBg: rgba($colorOk,0.3); +$scrollContainer: $colorBodyBg; @mixin discreteItem() { background: rgba($colorBodyFg,0.1); diff --git a/src/styles/_constants-snow.scss b/src/styles/_constants-snow.scss index 1e88d4928a..7198f199fe 100644 --- a/src/styles/_constants-snow.scss +++ b/src/styles/_constants-snow.scss @@ -463,6 +463,7 @@ $transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3); $createBtnTextTransform: uppercase; $colorDiscreteItemBg: rgba($colorBodyFg,0.1); $colorDiscreteItemCurrentBg: rgba($colorOk,0.3); +$scrollContainer: rgba(102, 102, 102, 0.1); @mixin discreteItem() { background: $colorDiscreteItemBg; diff --git a/src/styles/_constants.scss b/src/styles/_constants.scss index c6db00163a..660baa684e 100755 --- a/src/styles/_constants.scss +++ b/src/styles/_constants.scss @@ -327,3 +327,6 @@ $bg-icon-timelist: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://ww $bg-icon-plot-scatter: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cg data-name='Layer 2'%3e%3cpath d='M96 0C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96ZM64 176a48 48 0 1 1 48 48 48 48 0 0 1-48-48Zm80 240a48 48 0 1 1 48-48 48 48 0 0 1-48 48Zm128-96a48 48 0 1 1 48-48 48 48 0 0 1-48 48Zm0-160a48 48 0 1 1 48-48 48 48 0 0 1-48 48Zm128 256a48 48 0 1 1 48-48 48 48 0 0 1-48 48Z' data-name='Layer 1'/%3e%3c/g%3e%3c/svg%3e"); $bg-icon-notebook-shift-log: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M448 55.36c0-39.95-27.69-63.66-61.54-52.68L0 128h448V55.36ZM448 160H0v288c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V224c0-35.2-28.8-64-64-64ZM128 416H64v-64h64v64Zm0-96H64v-64h64v64Zm320 96H192v-64h256v64Zm0-96H192v-64h256v64Z'/%3e%3c/svg%3e"); $bg-icon-telemetry-aggregate: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cg data-name='Layer 2'%3e%3cg data-name='Layer 3'%3e%3cpath d='M39 197.72c7-20.72 18.74-50.4 34.6-74.18C92.91 94.65 114.79 80 138.67 80s45.75 14.65 65 43.54c15.86 23.78 27.57 53.46 34.6 74.18 15.44 45.48 31.56 67.49 39 73.27 7.47-5.78 23.6-27.79 39-73.27 7-20.72 18.74-50.4 34.61-74.18q13.9-20.85 29.56-31.75A207.78 207.78 0 0 0 208 0C93.12 0 0 93.12 0 208a208.14 208.14 0 0 0 7.39 55.09c8.39-10.87 20.2-31.67 31.61-65.37Z'/%3e%3cpath d='M377 218.28c-7 20.72-18.74 50.4-34.6 74.18-19.28 28.89-41.16 43.54-65 43.54s-45.75-14.65-65-43.54c-15.86-23.78-27.57-53.46-34.6-74.18-15.44-45.48-31.57-67.49-39-73.27-7.47 5.78-23.6 27.79-39 73.27-7.19 20.72-18.9 50.4-34.8 74.18q-13.9 20.85-29.56 31.75A207.78 207.78 0 0 0 208 416c114.88 0 208-93.12 208-208a208.14 208.14 0 0 0-7.39-55.09c-8.39 10.87-20.2 31.67-31.61 65.37Z'/%3e%3cpath d='M460.78 167.31A258.4 258.4 0 0 1 464 208a255.84 255.84 0 0 1-256 256 258.4 258.4 0 0 1-40.69-3.22A207.23 207.23 0 0 0 304 512c114.88 0 208-93.12 208-208a207.23 207.23 0 0 0-51.22-136.69Z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e"); +$bg-icon-trash: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3e%3cpath d='M416,64h-96.18V32c0-17.6-14.4-32-32-32h-64c-17.6,0-32,14.4-32,32v32H96c-52.8,0-96,36-96,80s0,80,0,80h32v192 c0,52.8,43.2,96,96,96h256c52.8,0,96-43.2,96-96V224h32c0,0,0-36,0-80S468.8,64,416,64z M160,416H96V224h64V416z M288,416h-64V224 h64V416z M416,416h-64V224h64V416z'/%3e%3c/svg%3e"); +$bg-icon-eye-open: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:%2300A14B;%7d %3c/style%3e%3ctitle%3eicon-eye-open-v2%3c/title%3e%3cg%3e%3cpath class='st0' d='M256,58.2c-122.9,0-226.1,84-255.4,197.8C29.9,369.7,133.1,453.8,256,453.8s226.1-84,255.4-197.8 C482.1,142.3,378.9,58.2,256,58.2z M414.6,294.2c-11.3,17.2-25.3,32.4-41.5,45.2c-16.4,12.9-34.5,22.8-54,29.7 c-20.2,7.1-41.4,10.7-63,10.7s-42.9-3.6-63-10.7c-19.5-6.9-37.7-16.9-54-29.7c-16.2-12.8-30.2-27.9-41.5-45.2 c-7.9-12-14.4-24.8-19.3-38.2c5-13.4,11.5-26.2,19.3-38.2c11.3-17.2,25.3-32.4,41.5-45.2c16.4-12.9,34.5-22.8,54-29.7 c20.2-7.1,41.4-10.7,63-10.7s42.9,3.6,63,10.7c19.5,6.9,37.7,16.9,54,29.7c16.2,12.8,30.2,27.9,41.5,45.2 c7.9,12,14.4,24.8,19.3,38.2C429,269.4,422.5,282.2,414.6,294.2z'/%3e%3ccircle class='st0' cx='256' cy='256' r='96'/%3e%3c/g%3e%3c/svg%3e"); +$bg-icon-camera: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3ctitle%3eicon-camera-v2%3c/title%3e%3cpath d='M448,128H384L320,0H192L128,128H64A64.2,64.2,0,0,0,0,192V448a64.2,64.2,0,0,0,64,64H448a64.2,64.2,0,0,0,64-64V192A64.2,64.2,0,0,0,448,128ZM256,432A128,128,0,1,1,384,304,128,128,0,0,1,256,432Z'/%3e%3c/svg%3e"); diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss index aed94c884a..9a94c4c980 100644 --- a/src/styles/_controls.scss +++ b/src/styles/_controls.scss @@ -462,6 +462,15 @@ input[type=number].c-input-number--no-spinners { } } +.c-scrollcontainer{ + @include nice-input(); + margin-top: $interiorMargin; + background: $scrollContainer; + border-radius: $controlCr; + overflow: auto; + padding: $interiorMarginSm; +} + // SELECTS select { @include appearanceNone(); diff --git a/src/styles/_glyphs.scss b/src/styles/_glyphs.scss index d04205f71a..7dc67c3697 100755 --- a/src/styles/_glyphs.scss +++ b/src/styles/_glyphs.scss @@ -265,3 +265,6 @@ .bg-icon-plot-scatter { @include glyphBg($bg-icon-plot-scatter); } .bg-icon-notebook-shift-log { @include glyphBg($bg-icon-notebook-shift-log); } .bg-icon-telemetry-aggregate { @include glyphBg($bg-icon-telemetry-aggregate); } +.bg-icon-trash { @include glyphBg($bg-icon-trash); } +.bg-icon-eye-open { @include glyphBg($bg-icon-eye-open); } +.bg-icon-camera { @include glyphBg($bg-icon-camera); } diff --git a/src/styles/notebook.scss b/src/styles/notebook.scss index 6870d0f39f..ac799bc98f 100644 --- a/src/styles/notebook.scss +++ b/src/styles/notebook.scss @@ -303,11 +303,25 @@ opacity: 0.7; } - &__time-and-creator, + &__time-and-creator-and-delete, &__input { padding: $p; } + &__input{ + word-break: break-word; + } + &__time-and-creator-and-delete{ + display: flex; + align-items: center; + + > * + *{ + float: right; + margin-left: auto; + } + + } + &__creator [class*='icon'] { font-size: 0.95em; } @@ -315,6 +329,7 @@ &__time-and-content { display: block; flex: 1 1 auto; + overflow: visible; > * + * { margin-top: $interiorMarginSm; @@ -332,9 +347,10 @@ } &__content { - display: flex; flex-direction: column; flex: 1 1 auto; + margin-right: $interiorMarginSm; + margin-top: $interiorMargin; > [class*="__"] + [class*="__"] { margin-top: $interiorMarginSm; @@ -358,7 +374,8 @@ @include inlineInput; padding-left: $p; padding-right: $p; - + overflow: unset; + margin-bottom: $interiorMargin; @include hover { &:not(:focus, .locked) { background: rgba($colorBodyFg, 0.1); @@ -394,12 +411,17 @@ opacity: 0.7; } } + + &__remove{ + float: right; + } } + /****************************** EMBEDS */ @mixin snapThumb() { // LEGACY: TODO: refactor when .snap-thumb in New Entry dialog is refactored - $d: 30px; + $d: 40px; border: 1px solid $colorInteriorBorder; cursor: pointer; width: $d; @@ -417,21 +439,24 @@ // LEGACY, @include snapThumb(); } +.c-ne__embeds-wrapper{ + max-height: 75px; + padding-left: $interiorMargin; + padding-top: $interiorMargin; + display: flex; +} .c-ne__embed { @include discreteItemInnerElem(); display: inline-flex; flex: 0 0 auto; padding: $interiorMargin; - - [class*="__"] + [class*="__"] { - margin-left: $interiorMargin; - } + border: 1px solid $colorInteriorBorder; &__info { display: flex; flex-direction: column; - + margin-left: $interiorMargin; a { color: $colorKey; } @@ -445,9 +470,10 @@ } &__link { + flex: 1 1 auto; &:before { display: block; - font-size: 0.85em; + font-size: 1em; margin-right: $interiorMarginSm; } } @@ -460,6 +486,24 @@ &__snap-thumb { @include snapThumb(); } + &__actions{ + margin: $interiorMarginSm; + } + &__actions-menu { + width: 55vh; + max-width: 500px; + height: 130px; + z-index: 70; + [class*="__icon"] { + filter: $colorKeyFilter; + margin: 0%; + height: 4vh; + } + [class*="__item-description"] { + min-width: 200px; + } + } + } /****************************** SNAPSHOTTING */ @@ -700,6 +744,7 @@ body.mobile { .c-notebook__entry { [class*="local-controls"] { display: none; + height: fit-content; } } diff --git a/src/ui/components/tags/TagEditor.vue b/src/ui/components/tags/TagEditor.vue index 5078517273..2fe4f795cc 100644 --- a/src/ui/components/tags/TagEditor.vue +++ b/src/ui/components/tags/TagEditor.vue @@ -37,7 +37,7 @@ title="Add new tag" @click="addTag" > -
Add Tag
+
Add Tag
diff --git a/src/ui/components/tags/tags.scss b/src/ui/components/tags/tags.scss index ebd3e7a184..964b2361ab 100644 --- a/src/ui/components/tags/tags.scss +++ b/src/ui/components/tags/tags.scss @@ -54,6 +54,10 @@ } } +.c-tag-btn__label { + overflow: visible!important; +} + /******************************* HOVERS */ .has-tag-applier { // Apply this class to all components that should trigger tag removal btn on hover