Merge branch 'master' into splash-screen-prototype

[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-05 10:04:14 -08:00 · 2020-11-03 12:06:49 -08:00 · 2020-10-28 17:31:48 -07:00 · 2020-10-23 09:22:18 -07:00 · 2020-09-28 10:10:00 -07:00 · 2020-09-25 16:19:42 -07:00
4 changed files with 81 additions and 22 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/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/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/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();
-        },
-        readyStateCheck() {
-            if (document.readyState !== 'complete') {
-                document.addEventListener('readystatechange', this.onReadyState);
-            } else {
-                this.onReadyState();
-            }
-        },
-        onReadyState() {
-            if (document.readyState === 'complete') {
-                this.calculateHeights();
-            }
+            await this.calculateHeights();
+
+            return;
        },
        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');
-            this.mainTreeHeight = this.$el.offsetHeight
-                - this.$refs.search.offsetHeight
-                - this.mainTreeTopMargin;
-            this.itemHeight = this.getElementStyleValue(this.$refs.dummyItem, 'height');
+            const RECHECK = 100;
+
+            return new Promise((resolve, reject) => {
+
+                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
Deep Tailor	ff58e31fe0	Merge branch 'master' into splash-screen-prototype	2020-11-05 10:04:14 -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
Andrew Henry	75bcb6aa04	Merge branch 'master' into splash-screen-prototype	2020-10-28 17:31:48 -07:00
Deep Tailor	838e2548b5	Merge branch 'master' into splash-screen-prototype	2020-10-23 09:22:18 -07:00
Deep Tailor	6eaa2ea24d	Merge branch 'master' into splash-screen-prototype	2020-09-28 10:10:00 -07:00
charlesh88	9530487acc	Refinements to splash screen approach - CSS added to index.html, removed from inline; - Added spinner element; - Hides splash-screen as last-to-load CSS statement;	2020-09-25 16:19:42 -07:00
Deep Tailor	0bb404adaa	quick proto for possible slow loading css issue	2020-09-15 15:16:32 -07:00