mirror of
https://github.com/nasa/openmct.git
synced 2025-06-16 14:18:16 +00:00
UI enhancement fixes 2 (#3225)
- Fixed incorrect CSS naming: `c-frame-edit__move` changed to `c-frame__move-bar`; - Fixed `display: contents` that was erroneously applied to `u-angular-object-view-wrapper` and preventing styling from being applied to plots, renamed class to `.l-angular-ov-wrapper`; - Removed commented CSS;
This commit is contained in:
committed by
GitHub
parent
afeb89a51a
commit
d9baa94970
@ -31,9 +31,8 @@
|
|||||||
:style="style"
|
:style="style"
|
||||||
>
|
>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="c-frame-edit__move"
|
class="c-frame__move-bar"
|
||||||
@mousedown="isEditing ? startMove([1,1], [0,0], $event) : null"
|
@mousedown="isEditing ? startMove([1,1], [0,0], $event) : null"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -44,7 +44,7 @@
|
|||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="c-frame-edit__move"
|
class="c-frame__move-bar"
|
||||||
@mousedown="startDrag($event)"
|
@mousedown="startDrag($event)"
|
||||||
></div>
|
></div>
|
||||||
<div
|
<div
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-frame-edit__move {
|
.c-frame__move-bar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -33,7 +33,7 @@
|
|||||||
border: $editFrameSelectedBorder;
|
border: $editFrameSelectedBorder;
|
||||||
box-shadow: $editFrameSelectedShdw;
|
box-shadow: $editFrameSelectedShdw;
|
||||||
|
|
||||||
.c-frame-edit__move {
|
.c-frame__move-bar {
|
||||||
cursor: move;
|
cursor: move;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -41,7 +41,7 @@
|
|||||||
|
|
||||||
/******************* DEFAULT STYLES FOR -EDIT__MOVE */
|
/******************* DEFAULT STYLES FOR -EDIT__MOVE */
|
||||||
// All object types
|
// All object types
|
||||||
.c-frame-edit__move {
|
.c-frame__move-bar {
|
||||||
@include abs();
|
@include abs();
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
@ -56,7 +56,7 @@
|
|||||||
transition-delay: $moveBarOutDelay;
|
transition-delay: $moveBarOutDelay;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ .c-frame-edit__move {
|
+ .c-frame__move-bar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -72,7 +72,7 @@
|
|||||||
transition-delay: $moveBarOutDelay;
|
transition-delay: $moveBarOutDelay;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ .c-frame-edit__move {
|
+ .c-frame__move-bar {
|
||||||
transition: $transOut;
|
transition: $transOut;
|
||||||
transition-delay: $moveBarOutDelay;
|
transition-delay: $moveBarOutDelay;
|
||||||
@include userSelectNone();
|
@include userSelectNone();
|
||||||
@ -115,7 +115,7 @@
|
|||||||
transition-delay: 0s;
|
transition-delay: 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ .c-frame-edit__move {
|
+ .c-frame__move-bar {
|
||||||
transition: $transIn;
|
transition: $transIn;
|
||||||
transition-delay: 0s;
|
transition-delay: 0s;
|
||||||
height: $editFrameMovebarH;
|
height: $editFrameMovebarH;
|
||||||
@ -125,7 +125,7 @@
|
|||||||
}
|
}
|
||||||
> .l-layout__frame[s-selected] {
|
> .l-layout__frame[s-selected] {
|
||||||
> .c-so-view.has-complex-content {
|
> .c-so-view.has-complex-content {
|
||||||
+ .c-frame-edit__move:before {
|
+ .c-frame__move-bar:before {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -135,7 +135,7 @@
|
|||||||
/******************* > 1 ITEMS SELECTED */
|
/******************* > 1 ITEMS SELECTED */
|
||||||
&.is-multi-selected {
|
&.is-multi-selected {
|
||||||
.l-layout__frame[s-selected] {
|
.l-layout__frame[s-selected] {
|
||||||
> .c-so-view.has-complex-content + .c-frame-edit__move {
|
> .c-so-view.has-complex-content + .c-frame__move-bar {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -142,7 +142,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.viewContainer = document.createElement('div');
|
this.viewContainer = document.createElement('div');
|
||||||
this.viewContainer.classList.add('u-angular-object-view-wrapper');
|
this.viewContainer.classList.add('l-angular-ov-wrapper');
|
||||||
this.$el.append(this.viewContainer);
|
this.$el.append(this.viewContainer);
|
||||||
let provider = this.getViewProvider();
|
let provider = this.getViewProvider();
|
||||||
if (!provider) {
|
if (!provider) {
|
||||||
|
@ -36,10 +36,6 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
//> .c-so-view__local-controls {
|
|
||||||
// top: $interiorMarginSm; right: $interiorMarginSm;
|
|
||||||
//}
|
|
||||||
|
|
||||||
&.is-missing {
|
&.is-missing {
|
||||||
@include isMissing($absPos: true);
|
@include isMissing($absPos: true);
|
||||||
|
|
||||||
@ -86,6 +82,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.u-angular-object-view-wrapper {
|
.l-angular-ov-wrapper {
|
||||||
display: contents;
|
// This element is the recipient for object styling; cannot be display: contents
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
@ -95,7 +95,7 @@ export default {
|
|||||||
|
|
||||||
this.viewKey = view.key;
|
this.viewKey = view.key;
|
||||||
this.viewContainer = document.createElement('div');
|
this.viewContainer = document.createElement('div');
|
||||||
this.viewContainer.classList.add('u-angular-object-view-wrapper');
|
this.viewContainer.classList.add('l-angular-ov-wrapper');
|
||||||
this.$refs.objectView.append(this.viewContainer);
|
this.$refs.objectView.append(this.viewContainer);
|
||||||
|
|
||||||
this.view = this.currentView.view(this.domainObject, this.objectPath);
|
this.view = this.currentView.view(this.domainObject, this.objectPath);
|
||||||
|
Reference in New Issue
Block a user