Fixes Notebook and Inspector layout issues (#2568)

* Fix linting-related issues
* Fix Notebook overlay display issues

src/plugins/notebook/res/templates/snapshotTemplate.html

@@ -1,29 +1,29 @@
-<div class="u-contents">
+<div class="c-notebook-snapshot">
-
+    <!-- parent container sets up this for flex column layout -->
-    <div class="t-snapshot abs l-view-header">
+    <div class="c-notebook-snapshot__header l-browse-bar">
-        <div class="abs object-browse-bar l-flex-row">
+        <div class="l-browse-bar__start">
-            <div class="left flex-elem l-flex-row grows">
+            <div class="l-browse-bar__object-name--w">
-                <div class="object-header flex-elem l-flex-row grows">
+                <span class="l-browse-bar__object-name"
-                    <div class="type-icon flex-elem embed-icon holder" v-bind:class="embed.cssClass"></div>
+                    v-bind:class="embed.cssClass"
-                    <div class="title-label flex-elem holder flex-can-shrink">{{embed.name}}</div>
+                >
-                </div>
+                    {{embed.name}}
+                </span>
             </div>
         </div>
-    </div>
 
-    <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
+        <div class="l-browse-bar__end">
-        <div class="flex-elem holder flex-can-shrink s-snapshot-datetime">
+            <div class="l-browse-bar__snapshot-datetime">
-            SNAPSHOT {{formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss')}}
+                SNAPSHOT {{formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss')}}
-        </div>
+            </div>
-        <a class="s-button icon-pencil" title="Annotate" @click="annotateSnapshot">
+            <a class="l-browse-bar__annotate-button c-button icon-pencil" title="Annotate" @click="annotateSnapshot">
-            <span class="title-label">Annotate</span>
+                <span class="title-label">Annotate</span>
-        </a>
+            </a>
-    </div>
-
-    <div class="abs object-holder t-image-holder s-image-holder">
-        <div 
-            class="image-main s-image-main"
-            :style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }">
         </div>
     </div>
-</div>
+
+    <div class="c-notebook-snapshot__image">
+        <div class="image-main s-image-main"
+            :style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }"
+        ></div>
+    </div>
+</div>

src/styles/_layout.scss

@@ -0,0 +1,86 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/************************** BROWSE BAR */
+.l-browse-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    [class*="__"] {
+        // Removes extraneous horizontal white space
+        display: inline-flex;
+    }
+
+    &__start {
+        display: flex;
+        align-items: center;
+        flex: 1 1 auto;
+        margin-right: $interiorMargin;
+        min-width: 0; // Forces interior to compress when pushed on
+    }
+
+    &__end {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+
+        [class*="__"] + [class*="__"] {
+            margin-left: $interiorMarginSm;
+        }
+    }
+
+    &__nav-to-parent-button,
+    &__disclosure-button {
+        flex: 0 0 auto;
+    }
+
+    &__nav-to-parent-button {
+        // This is an icon-button
+        $p: $interiorMargin;
+        margin-right: $interiorMargin;
+        padding-left: $p;
+        padding-right: $p;
+
+        .is-editing & {
+            display: none;
+        }
+    }
+
+    &__object-name--w {
+        align-items: center;
+        display: flex;
+        flex: 0 1 auto;
+        @include headerFont(1.4em);
+        min-width: 0;
+
+        &:before {
+            // Icon
+            opacity: 0.5;
+            margin-right: $interiorMargin;
+        }
+    }
+
+    &__object-name {
+        flex: 0 1 auto;
+    }
+}

src/styles/core.scss

@@ -29,6 +29,7 @@
 @import "global";
 @import "status";
 @import "controls";
+@import "layout";
 @import "forms";
 @import "table";
 @import "legacy";

src/styles/notebook.scss

@@ -25,7 +25,6 @@
 
 
 .c-notebook {
-    //@include test(orange);
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -35,6 +34,24 @@
     bottom: 0px;
     left: 0px;
 
+    &-snapshot {
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
+
+        > * + * {
+            margin-top: $interiorMargin;
+        }
+
+        &__header {
+            flex: 0 0 auto;
+        }
+
+        &__image {
+            flex: 1 1 auto;
+        }
+    }
+
     > [class*="__"] + [class*="__"] {
         margin-top: $interiorMargin;
     }

src/ui/inspector/Properties.vue

@@ -30,7 +30,7 @@
             <div class="c-properties__label">
                 Created
             </div>
-            <div class="c-properties__value c-ne__text">
+            <div class="c-properties__value">
                 {{ formatTime(item.created) }}
             </div>
         </li>
@@ -41,7 +41,7 @@
             <div class="c-properties__label">
                 Modified
             </div>
-            <div class="c-properties__value c-ne__text">
+            <div class="c-properties__value">
                 {{ formatTime(item.modified) }}
             </div>
         </li>

src/ui/layout/BrowseBar.vue

@@ -276,71 +276,3 @@ export default {
     }
 }
 </script>
-
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .l-browse-bar {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        [class*="__"] {
-            // Removes extraneous horizontal white space
-            display: inline-flex;
-        }
-
-        &__start {
-            display: flex;
-            align-items: center;
-            flex: 1 1 auto;
-            margin-right: $interiorMargin;
-            min-width: 0; // Forces interior to compress when pushed on
-        }
-
-        &__end {
-            display: flex;
-            align-items: center;
-            flex: 0 0 auto;
-
-            [class*="__"] + [class*="__"] {
-                margin-left: $interiorMarginSm;
-            }
-        }
-
-        &__nav-to-parent-button,
-        &__disclosure-button {
-            flex: 0 0 auto;
-        }
-
-        &__nav-to-parent-button {
-            // This is an icon-button
-            $p: $interiorMargin;
-            margin-right: $interiorMargin;
-            padding-left: $p;
-            padding-right: $p;
-
-            .is-editing & {
-                display: none;
-            }
-        }
-
-        &__object-name--w {
-            align-items: center;
-            display: flex;
-            flex: 0 1 auto;
-            @include headerFont(1.4em);
-            min-width: 0;
-
-            &:before {
-                // Icon
-                opacity: 0.5;
-                margin-right: $interiorMargin;
-            }
-        }
-
-        &__object-name {
-            flex: 0 1 auto;
-        }
-    }
-</style>