Fixes for Flex Layout in TCR (#2221)

- Object view now displays objects;
- FL frame header fixed;
- Fixed grippy look and positioning for now;

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -216,12 +216,13 @@
     }
 
     .c-fl-frame {
+        /***************************************************** CONTAINER FRAMES */
         $sizeIndicatorM: 16px;
         $dropHintSize: 15px;
 
         display: flex;
-        justify-content: stretch;
+      //  justify-content: stretch;
-        align-items: stretch;
+      //  align-items: stretch;
         flex: 1 1;
         flex-direction: column;
         overflow: hidden; // Needed to allow frames to collapse when sized down
@@ -237,6 +238,16 @@
             }
         }
 
+        &__header {
+            flex: 0 0 auto;
+            margin-bottom: $interiorMargin;
+        }
+
+        &__object-view {
+            flex: 1 1 auto;
+            overflow: auto;
+        }
+
         &__size-indicator {
             $size: 35px;
 
@@ -286,20 +297,18 @@
                 min-height: $size; min-width: $size;
             }
 
-            &:after {
+            &__grippy {
                 // Grippy element
-                /*background: deeppink;*/
+                $d: 4px;
                 $c: black;
                 $a: 0.9;
                 $d: 5px;
                 background: $editColor;
                 color: $editColorBg;
                 border-radius: $smallCr;
-                content: $glyph-icon-grippy-ew;
-                font-family: symbolsfont;
                 font-size: 0.8em;
-                display: inline-block;
+                height: $d;
-                padding: 10px 0;
+                width: $d * 10;
                 position: absolute;
                 left: 50%; top: 50%;
                 text-align: center;
@@ -314,15 +323,6 @@
                   //  padding: $marginHov 0;
                     cursor: row-resize;
                 }
-
-                &:after {
-                    transform: rotate(90deg) translate(-50%, -50%);
-                    //top: $margin + $size - 2px;
-                    //left: 50%;
-                   // transform: translateX(-50%);
-                    /*width: $grippyLen;
-                    height: $grippyThickness;*/
-                }
             }
 
             &.horizontal {
@@ -332,12 +332,8 @@
                     cursor: col-resize;
                 }
 
-                &:after {
+                [class*='grippy'] {
-                    //left: $margin + $size - 2px;
+                    transform: translate(-50%) rotate(90deg);
-                    //top: 50%;
-                    //transform: translateY(-50%);
-                   /* height: $grippyLen;
-                    width: $grippyThickness;*/
                 }
             }
 
@@ -391,6 +387,10 @@
                 margin: 0;
             }
         }
+
+        .c-object-view {
+            display: contents;
+        }
     }
 </style>
 

src/plugins/flexibleLayout/components/frame.vue

@@ -38,11 +38,12 @@
              <frame-header 
                 v-if="index !== 0"
                 ref="dragObject"
+                class="c-fl-frame__header"
                 :domainObject="frame.domainObject">
             </frame-header>
 
             <object-view
-                class="c-object-view"
+                class="c-fl-frame__object-view"
                 :object="frame.domainObject">
             </object-view>
 

src/plugins/flexibleLayout/plugin.js

@@ -116,12 +116,12 @@ define([
                             property: `configuration.containers[${parent.context.index}].frames[${primary.context.index}].noFrame`,
                             options: [
                                 {
-                                    value: false,
+                                    value: true,
                                     icon: 'icon-frame-hide',
                                     title: "Hide frame"
                                 },
                                 {
-                                    value: true,
+                                    value: false,
                                     icon: 'icon-frame-show',
                                     title: "Show frame"
                                 }

src/ui/components/utils/frameHeader.vue

@@ -1,15 +1,46 @@
 <template>
-    <div class="c-frame__header">
+    <div class="c-frame-header">
-        <div class="c-frame__header__start">
+        <div class="c-frame-header__start">
-            <div class="c-frame__name" :class="cssClass">{{ domainObject.name }}</div>
+            <div class="c-frame-header__name" :class="cssClass">{{ domainObject.name }}</div>
-            <div class="c-frame__context-actions c-disclosure-button"></div>
+            <div class="c-frame-header__context-actions c-disclosure-button"></div>
         </div>
-        <div class="c-frame__header__end">
+        <div class="c-frame-header__end">
             <div class="c-button icon-expand local-controls--hidden"></div>
         </div>
     </div>
 </template>
 
+<style lang="scss">
+    @import '~styles/sass-base';
+
+    .c-frame-header {
+        display: flex;
+        align-items: center;
+
+        &__start,
+        &__end {
+            display: flex;
+            flex: 1 1 auto;
+        }
+
+        &__end {
+            justify-content: flex-end;
+        }
+
+        &__name {
+            display: flex;
+            &:before {
+                margin-right: $interiorMarginSm;
+            }
+        }
+
+        .no-frame & {
+            display: none;
+        }
+    }
+
+</style>
+
 <script>
 export default {
     inject: ['openmct'],