Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/nasa/openmct.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/plugins/notebook/components/NotebookEmbed.vue109
-rw-r--r--src/plugins/notebook/components/NotebookEntry.vue101
-rw-r--r--src/styles/_constants-espresso.scss2
-rw-r--r--src/styles/_constants-maelstrom.scss1
-rw-r--r--src/styles/_constants-snow.scss1
-rwxr-xr-xsrc/styles/_constants.scss3
-rw-r--r--src/styles/_controls.scss9
-rwxr-xr-xsrc/styles/_glyphs.scss3
-rw-r--r--src/styles/notebook.scss65
-rw-r--r--src/ui/components/tags/TagEditor.vue2
-rw-r--r--src/ui/components/tags/tags.scss4
11 files changed, 232 insertions, 68 deletions
diff --git a/src/plugins/notebook/components/NotebookEmbed.vue b/src/plugins/notebook/components/NotebookEmbed.vue
index 49cace8f2..12c17b4ab 100644
--- a/src/plugins/notebook/components/NotebookEmbed.vue
+++ b/src/plugins/notebook/components/NotebookEmbed.vue
@@ -12,14 +12,15 @@
<a
class="c-ne__embed__link"
:class="embed.cssClass"
- @click="changeLocation"
+ @click="navigateToItemInTime"
>{{ embed.name }}</a>
- <PopupMenu :popup-menu-items="popupMenuItems" />
+ <button
+ class="c-ne__embed__actions c-icon-button icon-3-dots"
+ title="More options"
+ @click.prevent.stop="showMenuItems($event)"
+ ></button>
</div>
- <div
- v-if="embed.snapshot"
- class="c-ne__embed__time"
- >
+ <div class="c-ne__embed__time">
{{ createdOn }}
</div>
</div>
@@ -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,8 @@ export default {
},
data() {
return {
- popupMenuItems: []
+ menuActions: [],
+ objectPath: []
};
},
computed: {
@@ -88,38 +87,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() {
+ 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)
+ 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.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()
+ };
+
+ 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 preview = {
- id: 'preview',
+
+ 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: 'Preview',
- callback: this.previewEmbed.bind(this)
+ name: 'Quick View',
+ description: 'Full screen overlay view of the item.',
+ onItemClicked: () => this.previewEmbed()
};
- this.popupMenuItems = [preview];
+ this.menuActions = this.menuActions.concat([quickView, navigateToItem, navigateToItemInTime]);
if (!this.isLocked) {
- this.popupMenuItems.unshift(removeEmbed);
+ 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[this.objectPath.length - 1].type === 'root') {
+ this.objectPath.pop();
+ }
+ },
annotateSnapshot() {
const annotateVue = new Vue({
template: '<div id="snap-annotation"></div>'
@@ -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 58677621d..c5d3d4667 100644
--- a/src/plugins/notebook/components/NotebookEntry.vue
+++ b/src/plugins/notebook/components/NotebookEntry.vue
@@ -30,15 +30,28 @@
@drop.prevent="dropOnEntry"
>
<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">
@@ -89,32 +102,27 @@
:target-specific-details="{entryId: entry.id}"
@tags-updated="timestampAndUpdate"
/>
-
- <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"
>
@@ -144,6 +152,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';
@@ -205,6 +215,11 @@ export default {
}
}
},
+ data() {
+ return {
+ enableEmbedsWrapperScroll: false
+ };
+ },
computed: {
createdOnDate() {
return this.formatTime(this.entry.createdOn, 'YYYY-MM-DD');
@@ -232,8 +247,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();
@@ -245,6 +273,8 @@ export default {
};
const newEmbed = await createNewEmbed(snapshotMeta);
this.entry.embeds.push(newEmbed);
+
+ this.manageEmbedLayout();
},
cancelEditMode(event) {
const isEditing = this.openmct.editor.isEditing();
@@ -265,6 +295,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();
@@ -322,6 +363,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 684a3a7fe..3ac9188af 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 9077592ea..555e5f5e6 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 1e88d4928..7198f199f 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 c6db00163..660baa684 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 318e58b58..53fdbc080 100644
--- a/src/styles/_controls.scss
+++ b/src/styles/_controls.scss
@@ -461,6 +461,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 d04205f71..7dc67c369 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 ca683142d..4a711e113 100644
--- a/src/styles/notebook.scss
+++ b/src/styles/notebook.scss
@@ -295,11 +295,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;
}
@@ -307,6 +321,7 @@
&__time-and-content {
display: block;
flex: 1 1 auto;
+ overflow: visible;
> * + * {
margin-top: $interiorMarginSm;
@@ -324,9 +339,10 @@
}
&__content {
- display: flex;
flex-direction: column;
flex: 1 1 auto;
+ margin-right: $interiorMarginSm;
+ margin-top: $interiorMargin;
> [class*="__"] + [class*="__"] {
margin-top: $interiorMarginSm;
@@ -350,7 +366,8 @@
@include inlineInput;
padding-left: $p;
padding-right: $p;
-
+ overflow: unset;
+ margin-bottom: $interiorMargin;
@include hover {
&:not(:focus, .locked) {
background: rgba($colorBodyFg, 0.1);
@@ -386,12 +403,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;
@@ -409,21 +431,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;
}
@@ -437,9 +462,10 @@
}
&__link {
+ flex: 1 1 auto;
&:before {
display: block;
- font-size: 0.85em;
+ font-size: 1em;
margin-right: $interiorMarginSm;
}
}
@@ -452,6 +478,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 */
@@ -692,6 +736,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 3c4f137be..426af20ec 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"
>
- <div class="c-icon-button__label">Add Tag</div>
+ <div class="c-icon-button__label c-tag-btn__label">Add Tag</div>
</button>
</div>
</template>
diff --git a/src/ui/components/tags/tags.scss b/src/ui/components/tags/tags.scss
index ebd3e7a18..964b2361a 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
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-11 15:44:21 +0300