ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-19 07:38:15 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

UI enhancement fixes (#3222)

Browse Source 
- Added min-width and min-height to Display Layout lines to allow
 easier selection and move when line is purely vertical or horizontal;
 - Fixed spacing, size and icon of overlay close button;
This commit is contained in:
Charles Hacskaylo
2020-07-22 11:35:06 -07:00
committed by GitHub
parent 97d80f57cc
commit a4fab3ce8a
5 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/dialog/res/templates/overlay.html
View File

@ -24,7 +24,7 @@
<div class="c-overlay__outer"> <div class="c-overlay__outer">
<button ng-click="ngModel.cancel()" <button ng-click="ngModel.cancel()"
ng-if="ngModel.cancel" ng-if="ngModel.cancel"
class="c-click-icon c-overlay__close-button icon-x-in-circle"></button> class="c-click-icon c-overlay__close-button icon-x"></button>
<div class="c-overlay__contents" ng-transclude></div> <div class="c-overlay__contents" ng-transclude></div>
</div> </div>
</div> </div>

2
src/api/overlays/components/OverlayComponent.vue
View File

@ -7,7 +7,7 @@
<div class="c-overlay__outer"> <div class="c-overlay__outer">
<button <button
v-if="dismissable" v-if="dismissable"
class="c-click-icon c-overlay__close-button icon-x-in-circle" class="c-click-icon c-overlay__close-button icon-x"
@click="destroy" @click="destroy"
></button> ></button>
<div <div

12
src/api/overlays/components/overlay-component.scss
View File

@ -29,11 +29,9 @@
} }
&__close-button { &__close-button {
$p: $interiorMargin; $p: $interiorMargin + 2px;
border-radius: 100% !important;
color: $overlayColorFg; color: $overlayColorFg;
display: inline-block; font-size: 1.5em;
font-size: 1.25em;
position: absolute; position: absolute;
top: $p; right: $p; top: $p; right: $p;
z-index: 99; z-index: 99;
@ -136,13 +134,13 @@ body.desktop {
} }
&__close-button { &__close-button {
top: $pad; //top: $interiorMargin;
right: $interiorMarginSm; //right: $interiorMargin;
} }
} }
.l-browse-bar { .l-browse-bar {
margin-right: $lrPad + $pad; // Don't cover close button margin-right: 50px; // Don't cover close button
margin-bottom: $interiorMargin; margin-bottom: $interiorMargin;
} }
} }

4
src/plugins/displayLayout/components/LineView.vue
View File

@ -76,8 +76,8 @@ const START_HANDLE_QUADRANTS = {
2: 'c-frame-edit__handle--se', 2: 'c-frame-edit__handle--se',
3: 'c-frame-edit__handle--ne', 3: 'c-frame-edit__handle--ne',
4: 'c-frame-edit__handle--nw', 4: 'c-frame-edit__handle--nw',
5: 'c-frame-edit__handle--ne', 5: 'c-frame-edit__handle--nw',
6: 'c-frame-edit__handle--se' 6: 'c-frame-edit__handle--ne'
}; };
const END_HANDLE_QUADRANTS = { const END_HANDLE_QUADRANTS = {

5
src/plugins/displayLayout/components/box-and-line-views.scss
View File

@ -46,6 +46,11 @@
} }
.is-editing & { .is-editing & {
// Needed to allow line to be moved
$w: 4px;
min-width: $w;
min-height: $w;
&:hover { &:hover {
[class*='__hover-indicator'] { [class*='__hover-indicator'] {
display: inline; display: inline;