mirror of
https://github.com/nasa/openmct.git
synced 2025-03-18 01:55:17 +00:00
Added bg icons. Change sizing of icons and thumbnails. Add scrolling to overflow embeds
This commit is contained in:
Rukmini Bose
parent
29a747405e
commit
ba26e38837
@ -104,8 +104,8 @@ export default {
|
||||
const y = event.y;
|
||||
|
||||
const menuOptions = {
|
||||
menuClass: 'c-ne__embed__actions-menu'
|
||||
// placement: this.openmct.menus.menuPlacement.TOP_RIGHT
|
||||
menuClass: 'c-ne__embed__actions-menu',
|
||||
placement: this.openmct.menus.menuPlacement.TOP_RIGHT
|
||||
};
|
||||
|
||||
this.openmct.menus.showSuperMenu(x, y, this.menuActions, menuOptions);
|
||||
@ -135,7 +135,7 @@ export default {
|
||||
id: 'navigateToItemInTime',
|
||||
cssClass: 'icon-telemetry',
|
||||
name: 'Navigate to Item in Time',
|
||||
description: 'Navigate to the item with the given time context',
|
||||
description: 'Navigate to the item with the given time context.',
|
||||
onItemClicked: () => this.navigateToItemInTime()
|
||||
};
|
||||
|
||||
|
||||
@ -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");
|
||||
|
||||
@ -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); }
|
||||
|
||||
@ -391,7 +391,7 @@
|
||||
/****************************** 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 +409,20 @@
|
||||
// LEGACY,
|
||||
@include snapThumb();
|
||||
}
|
||||
|
||||
.c-ne__embeds{
|
||||
background: $colorBodyBg;
|
||||
max-height: 10vh;
|
||||
}
|
||||
.c-ne__embed {
|
||||
@include discreteItemInnerElem();
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
padding: $interiorMargin;
|
||||
|
||||
[class*="__"] + [class*="__"] {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin-left: $interiorMargin;
|
||||
a {
|
||||
color: $colorKey;
|
||||
}
|
||||
@ -439,7 +438,7 @@
|
||||
&__link {
|
||||
&:before {
|
||||
display: block;
|
||||
font-size: 0.85em;
|
||||
font-size: 1em;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
@ -453,8 +452,8 @@
|
||||
@include snapThumb();
|
||||
}
|
||||
&__actions-menu {
|
||||
max-height: 80vh;
|
||||
max-width: 500px;
|
||||
width: 55vh;
|
||||
max-width: 500px;
|
||||
min-height: 100px;
|
||||
z-index: 70;
|
||||
[class*="__icon"] {
|
||||
@ -462,7 +461,7 @@
|
||||
margin: 0%;
|
||||
}
|
||||
[class*="__item-description"] {
|
||||
min-width: 200px;
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user