From d9baa949702dc2d729b934319348d7c3a27a90e5 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 22 Jul 2020 20:20:17 -0700
Subject: [PATCH] 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;
---
 .../displayLayout/components/LayoutFrame.vue     |  3 +--
 .../displayLayout/components/LineView.vue        |  2 +-
 .../displayLayout/components/layout-frame.scss   | 16 ++++++++--------
 src/ui/components/ObjectView.vue                 |  2 +-
 src/ui/components/object-frame.scss              | 10 ++++------
 src/ui/preview/Preview.vue                       |  2 +-
 6 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/plugins/displayLayout/components/LayoutFrame.vue b/src/plugins/displayLayout/components/LayoutFrame.vue
index 70bc9bf653..18dae06fb0 100644
--- a/src/plugins/displayLayout/components/LayoutFrame.vue
+++ b/src/plugins/displayLayout/components/LayoutFrame.vue
@@ -31,9 +31,8 @@
     :style="style"
 >
     <slot></slot>
-
     <div
-        class="c-frame-edit__move"
+        class="c-frame__move-bar"
         @mousedown="isEditing ? startMove([1,1], [0,0], $event) : null"
     ></div>
 </div>
diff --git a/src/plugins/displayLayout/components/LineView.vue b/src/plugins/displayLayout/components/LineView.vue
index 9a88e85b5d..0de8bb667e 100644
--- a/src/plugins/displayLayout/components/LineView.vue
+++ b/src/plugins/displayLayout/components/LineView.vue
@@ -44,7 +44,7 @@
     </svg>
 
     <div
-        class="c-frame-edit__move"
+        class="c-frame__move-bar"
         @mousedown="startDrag($event)"
     ></div>
     <div
diff --git a/src/plugins/displayLayout/components/layout-frame.scss b/src/plugins/displayLayout/components/layout-frame.scss
index c193eae1ea..0dbc10f877 100644
--- a/src/plugins/displayLayout/components/layout-frame.scss
+++ b/src/plugins/displayLayout/components/layout-frame.scss
@@ -13,7 +13,7 @@
     }
 }
 
-.c-frame-edit__move {
+.c-frame__move-bar {
     display: none;
 }
 
@@ -33,7 +33,7 @@
             border: $editFrameSelectedBorder;
             box-shadow: $editFrameSelectedShdw;
 
-            .c-frame-edit__move {
+            .c-frame__move-bar {
                 cursor: move;
             }
         }
@@ -41,7 +41,7 @@
 
     /******************* DEFAULT STYLES FOR -EDIT__MOVE */
     // All object types
-    .c-frame-edit__move {
+    .c-frame__move-bar {
         @include abs();
         display: block;
     }
@@ -56,7 +56,7 @@
             transition-delay: $moveBarOutDelay;
         }
 
-        + .c-frame-edit__move {
+        + .c-frame__move-bar {
             display: none;
         }
 
@@ -72,7 +72,7 @@
                         transition-delay: $moveBarOutDelay;
                     }
 
-                    + .c-frame-edit__move {
+                    + .c-frame__move-bar {
                         transition: $transOut;
                         transition-delay: $moveBarOutDelay;
                         @include userSelectNone();
@@ -115,7 +115,7 @@
                             transition-delay: 0s;
                         }
 
-                        + .c-frame-edit__move {
+                        + .c-frame__move-bar {
                             transition: $transIn;
                             transition-delay: 0s;
                             height: $editFrameMovebarH;
@@ -125,7 +125,7 @@
             }
             > .l-layout__frame[s-selected] {
                 > .c-so-view.has-complex-content {
-                    + .c-frame-edit__move:before {
+                    + .c-frame__move-bar:before {
                         display: block;
                     }
                 }
@@ -135,7 +135,7 @@
         /******************* > 1 ITEMS SELECTED */
         &.is-multi-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;
                 }
             }
diff --git a/src/ui/components/ObjectView.vue b/src/ui/components/ObjectView.vue
index 1685a8fdd3..577d04314c 100644
--- a/src/ui/components/ObjectView.vue
+++ b/src/ui/components/ObjectView.vue
@@ -142,7 +142,7 @@ export default {
             }
 
             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);
             let provider = this.getViewProvider();
             if (!provider) {
diff --git a/src/ui/components/object-frame.scss b/src/ui/components/object-frame.scss
index 5a65067ed3..46af29f8c6 100644
--- a/src/ui/components/object-frame.scss
+++ b/src/ui/components/object-frame.scss
@@ -36,10 +36,6 @@
             display: none;
         }
 
-        //> .c-so-view__local-controls {
-        //    top: $interiorMarginSm; right: $interiorMarginSm;
-        //}
-
         &.is-missing {
             @include isMissing($absPos: true);
 
@@ -86,6 +82,8 @@
     }
 }
 
-.u-angular-object-view-wrapper {
-    display: contents;
+.l-angular-ov-wrapper {
+    // This element is the recipient for object styling; cannot be display: contents
+    height: 100%;
+    overflow: hidden;
 }
diff --git a/src/ui/preview/Preview.vue b/src/ui/preview/Preview.vue
index 901c5675e7..92c8b38bb6 100644
--- a/src/ui/preview/Preview.vue
+++ b/src/ui/preview/Preview.vue
@@ -95,7 +95,7 @@ export default {
 
             this.viewKey = view.key;
             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.view = this.currentView.view(this.domainObject, this.objectPath);