ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-25 07:41:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix Safari display issues #3192

Browse Source 
- Tweaks to fix `c-tab` elements, fix clip-path for webkit;
- Fix Notebook Snapshots header;
This commit is contained in:
charlesh88 2020-07-14 23:40:42 -07:00
parent baa7c0bc58
commit b1467548da
3 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/plugins/notebook/components/notebook-snapshot-container.vue
View File

@ -2,14 +2,17 @@
<div class="c-snapshots-h"> <div class="c-snapshots-h">
<div class="l-browse-bar"> <div class="l-browse-bar">
<div class="l-browse-bar__start"> <div class="l-browse-bar__start">
<div class="l-browse-bar__object-name--w icon-notebook"> <div class="l-browse-bar__object-name--w">
<div class="l-browse-bar__object-name"> <div class="l-browse-bar__object-name c-object-label">
<div class="c-object-label__type-icon icon-notebook"></div>
<div class="c-object-label__name">
Notebook Snapshots Notebook Snapshots
<span v-if="snapshots.length" <span v-if="snapshots.length"
class="l-browse-bar__object-details" class="l-browse-bar__object-details"
>&nbsp;{{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }} >&nbsp;{{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }}
</span> </span>
</div> </div>
</div>
<PopupMenu v-if="snapshots.length > 0" <PopupMenu v-if="snapshots.length > 0"
:popup-menu-items="popupMenuItems" :popup-menu-items="popupMenuItems"
/> />

24
src/styles/_controls.scss
View File

@ -411,7 +411,17 @@ select {
.c-tab { .c-tab {
// Used in Tab View, generic tabs // Used in Tab View, generic tabs
background: $colorBtnBg; $notchSize: 7px;
$clipPath:
polygon(
0% 0%,
calc(100% - #{$notchSize}) 0%,
100% #{$notchSize},
100% calc(100% - #{$notchSize}),
100% 100%,
0% 100%
);
background: rgba($colorBtnBg, 0.7);
color: $colorBtnFg; color: $colorBtnFg;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -420,16 +430,8 @@ select {
margin: 1px 1px 0 0; margin: 1px 1px 0 0;
padding: $interiorMargin $interiorMarginLg; padding: $interiorMargin $interiorMarginLg;
white-space: nowrap; white-space: nowrap;
--notchSize: 7px; clip-path: $clipPath;
clip-path: -webkit-clip-path: $clipPath; // Safari
polygon(
0% 0%,
calc(100% - var(--notchSize)) 0%,
100% var(--notchSize),
100% calc(100% - var(--notchSize)),
100% 100%,
0% 100%
);
> * + * { > * + * {
margin-left: $interiorMargin; margin-left: $interiorMargin;

3
src/ui/components/object-label.scss
View File

@ -3,7 +3,7 @@
// Used mostly in trees and lists // Used mostly in trees and lists
display: flex; display: flex;
align-items: center; align-items: center;
flex: 1 1 auto; flex: 0 1 auto;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -19,7 +19,6 @@
display: block; display: block;
flex: 0 0 auto; flex: 0 0 auto;
font-size: 1.1em; font-size: 1.1em;
//margin-right: $interiorMargin;
} }
&.is-missing { &.is-missing {