Version 1.4.0

Fix Imagery for VERVE #266 (#3507 )
* Fairly extensive refactoring to fix layout in Safari for VERVE #266 - VERY WIP at this time! - Many instances of `height: 100%` converted or amended to include `flex: 1 1 auto`; - Some high-use containers like `c-so-view__object-view` converted to use flex layout; - Views fixed generally for sub-object view, and specifically for Conditionals, Folder grid view and Imagery; - Imagery background image holder converted to use absolute positioning; - TODO: Notebook has a problem where the side nav pane isn't overlaying in Safari - it's a JS thing, c-drawer--push isn't be replaced with c-drawer--overlays as it should; * CSS and markup refactoring to support addition of 'suspect' telemetry - Remove commented code;
2025-07-04 05:53:23 +00:00 · 2020-11-09 10:42:42 -08:00 · 2020-11-09 09:33:25 -08:00 · 2020-11-06 13:58:57 -08:00 · 2020-11-03 12:06:49 -08:00
11 changed files with 93 additions and 38 deletions
--- a/index.html
+++ b/index.html
@ -30,6 +30,38 @@
        <link rel="icon" type="image/png" href="dist/favicons/favicon-96x96.png" sizes="96x96" type="image/x-icon">
        <link rel="icon" type="image/png" href="dist/favicons/favicon-32x32.png" sizes="32x32" type="image/x-icon">
        <link rel="icon" type="image/png" href="dist/favicons/favicon-16x16.png" sizes="16x16" type="image/x-icon">
        <style type="text/css">
            @keyframes splash-spinner {
                0% {
                    transform: translate(-50%, -50%) rotate(0deg); }
                100% {
                    transform: translate(-50%, -50%) rotate(360deg); } }
            #splash-screen {
                background-color: black;
                position: absolute;
                top: 0; right: 0; bottom: 0; left: 0;
                z-index: 10000;
            }
            #splash-screen:before {
                animation-name: splash-spinner;
                animation-duration: 0.5s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                border-radius: 50%;
                border-color: rgba(255,255,255,0.25);
                border-top-color: white;
                border-style: solid;
                border-width: 10px;
                content: '';
                display: block;
                opacity: 0.25;
                position: absolute;
                left: 50%; top: 50%;
                height: 100px; width: 100px;
            }
        </style>
    </head>
    <body>
    </body>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "openmct",
-  "version": "1.3.3-SNAPSHOT",
+  "version": "1.4.0",
  "description": "The Open MCT core platform",
  "dependencies": {},
  "devDependencies": {
--- a/src/plugins/condition/components/conditionals.scss
+++ b/src/plugins/condition/components/conditionals.scss
@ -50,6 +50,7 @@
 .c-cs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    overflow: hidden;
--- a/src/plugins/folderView/components/grid-view.scss
+++ b/src/plugins/folderView/components/grid-view.scss
@ -11,6 +11,8 @@
    body.desktop & {
        flex-flow: row wrap;
        align-content: flex-start;
        &__item {
            height: $gridItemDesk;
            width: $gridItemDesk;
--- a/src/plugins/imagery/components/imagery-view-layout.scss
+++ b/src/plugins/imagery/components/imagery-view-layout.scss
@ -1,8 +1,8 @@
 .c-imagery {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
    height: 100%;
    &:focus {
        outline: none;
@ -19,14 +19,10 @@
    }
    &__main-image {
        &__bg,
        &__image {
            height: 100%;
        }
        &__bg {
            background-color: $colorPlotBg;
            border: 1px solid transparent;
            flex: 1 1 auto;
            &.unnsynced{
                @include sUnsynced();
@ -34,6 +30,7 @@
        }
        &__image {
            @include abs(); // Safari fix
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
--- a/src/styles/notebook.scss
+++ b/src/styles/notebook.scss
@ -25,6 +25,7 @@
    $headerFontSize: 1.3em;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
    height: 100%;
--- a/src/styles/vue-styles.scss
+++ b/src/styles/vue-styles.scss
@ -47,3 +47,7 @@
@import "../ui/toolbar/components/toolbar-checkbox.scss";
@import "./notebook.scss";
@import "../plugins/notebook/components/sidebar.scss";
 #splash-screen {
     display: none;
 }
--- a/src/ui/components/object-frame.scss
+++ b/src/ui/components/object-frame.scss
@ -71,8 +71,8 @@
    }
    &__object-view {
        display: flex;
        flex: 1 1 auto;
        height: 0; // Chrome 73 overflow bug fix
        overflow: auto;
        .u-fills-container {
@ -84,6 +84,6 @@
 .l-angular-ov-wrapper {
    // This element is the recipient for object styling; cannot be display: contents
-    height: 100%;
+    flex: 1 1 auto;
    overflow: hidden;
 }
--- a/src/ui/layout/Layout.vue
+++ b/src/ui/layout/Layout.vue
@ -5,6 +5,11 @@
        'is-editing': isEditing
    }"
 >
    <div
        id="splash-screen"
    ></div>
    <div
        class="l-shell__head"
        :class="{
--- a/src/ui/layout/layout.scss
+++ b/src/ui/layout/layout.scss
@ -228,8 +228,9 @@
    /******************************* MAIN AREA */
    &__main-container {
        // Wrapper for main views
        display: flex;
        flex: 1 1 auto !important;
-        height: 0; // Chrome 73 overflow bug fix
+        height: 100%; // Chrome 73 overflow bug fix
        overflow: auto;
    }
@ -338,7 +339,6 @@
    &__start {
        flex: 1 1 auto;
        //margin-right: $interiorMargin;
        min-width: 0; // Forces interior to compress when pushed on
        [class*='button'] {
@ -357,11 +357,6 @@
    &__nav-to-parent-button {
        // This is an icon-button
        //$p: $interiorMargin;
        //margin-right: $interiorMargin;
        //padding-left: $p;
        //padding-right: $p;
        .is-editing & {
            display: none;
        }
--- a/src/ui/layout/mct-tree.vue
+++ b/src/ui/layout/mct-tree.vue
@ -226,7 +226,7 @@ export default {
            return this.mainTreeHeight - this.ancestorsHeight;
        },
        showNoItems() {
-            return this.visibleItems.length === 0 && !this.activeSearch;
+            return this.visibleItems.length === 0 && !this.activeSearch && !this.isLoading;
        },
        showNoSearchResults() {
            return this.searchValue && this.searchResultItems.length === 0 && !this.searchLoading;
@ -276,7 +276,9 @@ export default {
        }
    },
    async mounted() {
-        this.initialize();
+        this.isLoading = true;
        await this.initialize();
        let savedPath = this.getStoredTreePath();
        let rootComposition = await this.loadRoot();
@ -302,26 +304,15 @@ export default {
    destroyed() {
        window.removeEventListener('resize', this.handleWindowResize);
        this.stopObservingAncestors();
        document.removeEventListener('readystatechange', this.setTreeTopMargin);
    },
    methods: {
-        initialize() {
+        async initialize() {
            this.searchService = this.openmct.$injector.get('searchService');
            window.addEventListener('resize', this.handleWindowResize);
            this.readyStateCheck();
            this.backwardsCompatibilityCheck();
-        },
+            await this.calculateHeights();
-        readyStateCheck() {
+
-            if (document.readyState !== 'complete') {
+            return;
                document.addEventListener('readystatechange', this.onReadyState);
            } else {
                this.onReadyState();
            }
        },
        onReadyState() {
            if (document.readyState === 'complete') {
                this.calculateHeights();
            }
        },
        backwardsCompatibilityCheck() {
            let oldTreeExpanded = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED__OLD));
@ -781,17 +772,44 @@ export default {
            return { height };
        },
        getElementStyleValue(el, style) {
            if (!el) {
                return;
            }
            let styleString = window.getComputedStyle(el)[style];
            let index = styleString.indexOf('px');
            return Number(styleString.slice(0, index));
        },
        calculateHeights() {
-            this.mainTreeTopMargin = this.getElementStyleValue(this.$refs.mainTree, 'marginTop');
+            const RECHECK = 100;
-            this.mainTreeHeight = this.$el.offsetHeight
+
-                - this.$refs.search.offsetHeight
+            return new Promise((resolve, reject) => {
-                - this.mainTreeTopMargin;
+
-            this.itemHeight = this.getElementStyleValue(this.$refs.dummyItem, 'height');
+                let checkHeights = () => {
                    let treeTopMargin = this.getElementStyleValue(this.$refs.mainTree, 'marginTop');
                    if (
                        this.$el
                        && this.$refs.search
                        && this.$refs.mainTree
                        && this.$refs.dummyItem
                        && this.$el.offsetHeight !== 0
                        && treeTopMargin > 0
                    ) {
                        this.mainTreeTopMargin = treeTopMargin;
                        this.mainTreeHeight = this.$el.offsetHeight
                            - this.$refs.search.offsetHeight
                            - this.mainTreeTopMargin;
                        this.itemHeight = this.getElementStyleValue(this.$refs.dummyItem, 'height');
                        resolve();
                    } else {
                        setTimeout(checkHeights, RECHECK);
                    }
                };
                checkHeights();
            });
        }
    }
 };
Author	SHA1	Message	Date
Joshi	0a4ff80f96	Version 1.4.0	2020-11-09 10:42:42 -08:00
Charles Hacskaylo	77b720d00d	Fix Imagery for VERVE #266 (#3507 ) * Fairly extensive refactoring to fix layout in Safari for VERVE #266 - VERY WIP at this time! - Many instances of `height: 100%` converted or amended to include `flex: 1 1 auto`; - Some high-use containers like `c-so-view__object-view` converted to use flex layout; - Views fixed generally for sub-object view, and specifically for Conditionals, Folder grid view and Imagery; - Imagery background image holder converted to use absolute positioning; - TODO: Notebook has a problem where the side nav pane isn't overlaying in Safari - it's a JS thing, c-drawer--push isn't be replaced with c-drawer--overlays as it should; * CSS and markup refactoring to support addition of 'suspect' telemetry - Remove commented code;	2020-11-09 09:33:25 -08:00
Deep Tailor	ba982671b2	Quick idea on a splash screen that will not increase load time (#3376 ) * New splash screen Co-authored-by: charlesh88 <charlesh88@gmail.com> Co-authored-by: Andrew Henry <akhenry@gmail.com>	2020-11-06 13:58:57 -08:00
Jamie V	5df7d92d64	[Navigation Tree] Fix tree loading issue (#3500 ) * added resize observer for FIRST load of mainTree * new Promise driven height calculation test * cleaning up code, sticking with promise height caclcuations * more cleanup * returning from the initialize function	2020-11-03 12:06:49 -08:00