From 31a983966bb6c553701d83be7c7ac91a2f5e6525 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 22 Feb 2016 15:44:57 -0800 Subject: [PATCH 1/8] [Frontend] In-progress on adding branded per-app screens open #164 CSS, markup; --- index.html | 9 +++- .../commonUI/general/res/sass/_about.scss | 41 +------------------ .../general/res/sass/_logo-and-bg.scss | 30 ++++++++++++++ .../commonUI/general/res/sass/startup.scss | 26 ++++++++++++ 4 files changed, 65 insertions(+), 41 deletions(-) create mode 100644 platform/commonUI/general/res/sass/_logo-and-bg.scss create mode 100644 platform/commonUI/general/res/sass/startup.scss diff --git a/index.html b/index.html index b33764958a..ffd86b972f 100644 --- a/index.html +++ b/index.html @@ -33,13 +33,18 @@ mct.run(); }); + - - + +
+ + +
+
diff --git a/platform/commonUI/general/res/sass/_about.scss b/platform/commonUI/general/res/sass/_about.scss index 978ea42078..38c4c59b61 100644 --- a/platform/commonUI/general/res/sass/_about.scss +++ b/platform/commonUI/general/res/sass/_about.scss @@ -21,63 +21,30 @@ *****************************************************************************/ // General About dialog styling +@import "logo-and-bg"; + .l-about { - // Layout &.abs { -// top: 20px; overflow: auto; } $contentH: 200px; .l-logo-holder { position: relative; height: 45%; - .l-logo { - $w: 5%; - position: absolute; - &.l-logo-app { -// @include test(blue); - top: 0; right: 15%; bottom: 0; left: 15%; - } - &.s-logo-nasa { -// @include test(red); - $m: 10px; - background-image: url($dirImgs + 'logo-nasa.svg'); - top: $m; right: auto; bottom: auto; left: $m; - width: $w * 2; height: auto; padding-bottom: $w; padding-top: $w; - } - } } .l-content { -// @include test(); position: relative; margin-top: $interiorMarginLg; } } .s-about { - // Styling line-height: 120%; a { color: $colorAboutLink; } .s-description, - .s-info { -// font-size: 0.8em; - } - .s-logo-holder { - background: url($dirImgs + "bg-about-openmctweb.jpg") no-repeat center; // For OpenMCT Web. - background-size: cover; - } - .s-logo { - // @include txtShdwLarge(); // text-shadow doesn't work for svg - background-position: center; - background-repeat: no-repeat; - background-size: contain; - } - .s-logo-openmctweb { - background-image: url($dirImgs + 'logo-openmctweb-shdw.svg'); - } .s-btn { line-height: 2em; } @@ -90,10 +57,6 @@ } em { color: pushBack($colorBodyFg, 20%); -// margin-left: 2em; - &:first-child { -// margin-left: 0; - } } h3 { font-size: 1.25em; diff --git a/platform/commonUI/general/res/sass/_logo-and-bg.scss b/platform/commonUI/general/res/sass/_logo-and-bg.scss new file mode 100644 index 0000000000..cb1e033919 --- /dev/null +++ b/platform/commonUI/general/res/sass/_logo-and-bg.scss @@ -0,0 +1,30 @@ +.l-logo-holder { + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + .l-logo { + $w: 5%; + position: absolute; + &.l-logo-app { + top: 0; right: 15%; bottom: 0; left: 15%; + } + &.s-logo-nasa { + $m: 10px; + background-image: url($dirImgs + 'logo-nasa.svg'); + top: $m; right: auto; bottom: auto; left: $m; + width: $w * 2; height: auto; padding-bottom: $w; padding-top: $w; + } + } +} + +.s-logo-holder { + background: url($dirImgs + "bg-about-openmctweb.jpg") no-repeat center; // For OpenMCT Web. + background-size: cover; +} +.s-logo { + background-position: center; + background-repeat: no-repeat; + background-size: contain; +} +.s-logo-openmctweb { + background-image: url($dirImgs + 'logo-openmctweb-shdw.svg'); +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/startup.scss b/platform/commonUI/general/res/sass/startup.scss new file mode 100644 index 0000000000..4784926b20 --- /dev/null +++ b/platform/commonUI/general/res/sass/startup.scss @@ -0,0 +1,26 @@ +@import "compass"; +@import "compass/css3"; +@import "constants"; +$dirImgs: '../../../general/res/images/'; +@import "logo-and-bg"; + +body { + background: black; +} + +.s-logo-holder { + @include transition-property(opacity); + @include transition-duration(500ms); + @include transition-timing-function(ease-in-out); + background-image: url($dirImgs + "bg-about-openmctweb.jpg") no-repeat center; // For OpenMCT Web. + z-index: 1000; + opacity: 1; + &.fadeout { + opacity: 0; + pointer-events: none; + } +} + +.s-logo-openmctweb { + background-image: url($dirImgs + 'logo-openmctweb-shdw.svg'); +} From 25f3b1e110f13038e3837e911625a651a26edaef Mon Sep 17 00:00:00 2001 From: Pete Richards Date: Mon, 22 Feb 2016 16:39:20 -0800 Subject: [PATCH 2/8] [Frontend] Add splash screen manager Add a runtime extension that detects the splash screen and triggers a fade out after the application has loaded. Once the fade out has ended, it removes the element from the page. Related to https://github.com/nasa/openmctweb/issues/164 --- platform/commonUI/general/bundle.js | 8 ++ .../general/src/SplashScreenManager.js | 46 ++++++++++ .../general/test/SplashScreenManagerSpec.js | 91 +++++++++++++++++++ 3 files changed, 145 insertions(+) create mode 100644 platform/commonUI/general/src/SplashScreenManager.js create mode 100644 platform/commonUI/general/test/SplashScreenManagerSpec.js diff --git a/platform/commonUI/general/bundle.js b/platform/commonUI/general/bundle.js index aeb05762b1..3d98a22143 100644 --- a/platform/commonUI/general/bundle.js +++ b/platform/commonUI/general/bundle.js @@ -24,6 +24,7 @@ define([ "./src/services/UrlService", "./src/services/PopupService", + "./src/SplashScreenManager", "./src/StyleSheetLoader", "./src/UnsupportedBrowserWarning", "./src/controllers/TimeRangeController", @@ -52,6 +53,7 @@ define([ ], function ( UrlService, PopupService, + SplashScreenManager, StyleSheetLoader, UnsupportedBrowserWarning, TimeRangeController, @@ -117,6 +119,12 @@ define([ "notificationService", "agentService" ] + }, + { + "implementation": SplashScreenManager, + "depends": [ + "$document" + ] } ], "filters": [ diff --git a/platform/commonUI/general/src/SplashScreenManager.js b/platform/commonUI/general/src/SplashScreenManager.js new file mode 100644 index 0000000000..e9666f4f6d --- /dev/null +++ b/platform/commonUI/general/src/SplashScreenManager.js @@ -0,0 +1,46 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web 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 Web 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. + *****************************************************************************/ + +/*global define*/ + +define([ + +], function ( + +) { + 'use strict'; + + function SplashScreenManager($document) { + var splash; + $document = $document[0]; + splash = $document.querySelectorAll('.s-logo-holder')[0]; + if (!splash) { + return; + } + splash.className += ' fadeout'; + splash.addEventListener('transitionend', function () { + splash.parentNode.removeChild(splash); + }); + } + + return SplashScreenManager; +}); diff --git a/platform/commonUI/general/test/SplashScreenManagerSpec.js b/platform/commonUI/general/test/SplashScreenManagerSpec.js new file mode 100644 index 0000000000..b1d340fe58 --- /dev/null +++ b/platform/commonUI/general/test/SplashScreenManagerSpec.js @@ -0,0 +1,91 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web 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 Web 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. + *****************************************************************************/ +/*global define,describe,beforeEach,jasmine,it,expect*/ + +define([ + '../src/SplashScreenManager' +], function (SplashScreenManager) { + 'use strict'; + + describe('SplashScreenManager', function () { + var $document, + splashElement; + + beforeEach(function () { + $document = jasmine.createSpyObj( + '$document', + ['querySelectorAll'] + ); + + splashElement = jasmine.createSpyObj( + 'splashElement', + ['addEventListener'] + ); + + splashElement.parentNode = jasmine.createSpyObj( + 'splashParent', + ['removeChild'] + ); + + splashElement.className = 'some-class-name'; + + $document.querySelectorAll.andReturn([splashElement]); + }); + + describe('when element exists', function () { + beforeEach(function () { + $document.querySelectorAll.andReturn([splashElement]); + new SplashScreenManager([$document]); + }); + + it('adds fade out class', function () { + expect(splashElement.className).toBe('some-class-name fadeout'); + }); + + it('removes the element when the transition ends', function () { + expect(splashElement.addEventListener) + .toHaveBeenCalledWith( + 'transitionend', + jasmine.any(Function) + ); + expect(splashElement.parentNode.removeChild) + .not + .toHaveBeenCalled(); + + splashElement.addEventListener.mostRecentCall.args[1](); + expect(splashElement.parentNode.removeChild) + .toHaveBeenCalledWith(splashElement); + }); + }); + + it('does not error when element doesn\'t exist', function () { + $document.querySelectorAll.andReturn([]); + + function run() { + new SplashScreenManager([$document]); + } + + expect(run).not.toThrow(); + }); + }); +}); + From 164d959f60c2bcaa0f453a8af1ec02be915c004d Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 23 Feb 2016 18:30:21 -0800 Subject: [PATCH 3/8] [Frontend] Significant markup/CSS mods for splash screen #164 Markup in index.html and about-dialog.html changed to simplify and use :before/:after psuedos; CSS in _logo-and-bg.scss modded for same; Added _startup.scss to hold general CSS for the startup screen; Renamed startup.scss to startup-open.scss; Modified SplashScreenManager.js to target renamed outer container .l-splash-holder; Added media query for startup screen on phone; Cleanup: moved classes out of _effects into _global; Still to-do: apply to WARP and VISTA, including needed mods to their About dialog screens; --- index.html | 7 +- .../about/res/templates/about-dialog.html | 5 +- .../commonUI/general/res/sass/_about.scss | 2 +- .../commonUI/general/res/sass/_effects.scss | 20 ------ .../commonUI/general/res/sass/_global.scss | 17 ++++- .../general/res/sass/_logo-and-bg.scss | 64 ++++++++++++------- .../commonUI/general/res/sass/_startup.scss | 47 ++++++++++++++ .../general/res/sass/startup-open.scss | 36 +++++++++++ .../commonUI/general/res/sass/startup.scss | 26 -------- .../general/src/SplashScreenManager.js | 3 +- 10 files changed, 146 insertions(+), 81 deletions(-) create mode 100644 platform/commonUI/general/res/sass/_startup.scss create mode 100644 platform/commonUI/general/res/sass/startup-open.scss delete mode 100644 platform/commonUI/general/res/sass/startup.scss diff --git a/index.html b/index.html index ffd86b972f..2535414aa7 100644 --- a/index.html +++ b/index.html @@ -33,16 +33,15 @@ mct.run(); }); - + -
- - +
+
diff --git a/platform/commonUI/about/res/templates/about-dialog.html b/platform/commonUI/about/res/templates/about-dialog.html index 5113954105..fe19442f16 100644 --- a/platform/commonUI/about/res/templates/about-dialog.html +++ b/platform/commonUI/about/res/templates/about-dialog.html @@ -20,10 +20,7 @@ at runtime from the About dialog for additional information. -->
-
- - -
+

OpenMCT Web

diff --git a/platform/commonUI/general/res/sass/_about.scss b/platform/commonUI/general/res/sass/_about.scss index 38c4c59b61..1e9abe70cf 100644 --- a/platform/commonUI/general/res/sass/_about.scss +++ b/platform/commonUI/general/res/sass/_about.scss @@ -28,7 +28,7 @@ overflow: auto; } $contentH: 200px; - .l-logo-holder { + .l-splash { position: relative; height: 45%; } diff --git a/platform/commonUI/general/res/sass/_effects.scss b/platform/commonUI/general/res/sass/_effects.scss index c1701f7387..a048eb75d0 100644 --- a/platform/commonUI/general/res/sass/_effects.scss +++ b/platform/commonUI/general/res/sass/_effects.scss @@ -19,26 +19,6 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -.disabled, -a.disabled { - opacity: $controlDisabledOpacity; - pointer-events: none !important; - cursor: default !important; -} - -.incised { - @include boxIncised(0.8); - border-bottom: 1px solid rgba(#fff, 0.3); -} - -.test-stripes { - @include bgDiagonalStripes(); -} - -.test { - @include test(); -} - @mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) { @include keyframes($animName) { 0% { opacity: $opacity0; } diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss index cb0894c9fe..cc318eddce 100644 --- a/platform/commonUI/general/res/sass/_global.scss +++ b/platform/commonUI/general/res/sass/_global.scss @@ -112,6 +112,13 @@ mct-container { padding: 1em; } +.disabled, +a.disabled { + opacity: $controlDisabledOpacity; + pointer-events: none !important; + cursor: default !important; +} + .align-right { text-align: right; } @@ -158,4 +165,12 @@ mct-container { .sep { color: rgba(#fff, 0.2); -} \ No newline at end of file +} + +.test-stripes { + @include bgDiagonalStripes(); +} + +.test { + @include test(); +} diff --git a/platform/commonUI/general/res/sass/_logo-and-bg.scss b/platform/commonUI/general/res/sass/_logo-and-bg.scss index cb1e033919..136060cc9c 100644 --- a/platform/commonUI/general/res/sass/_logo-and-bg.scss +++ b/platform/commonUI/general/res/sass/_logo-and-bg.scss @@ -1,30 +1,46 @@ -.l-logo-holder { +.l-splash { + background-size: cover; position: absolute; - top: 0; right: 0; bottom: 0; left: 0; - .l-logo { - $w: 5%; + top: 0; + right: 0; + bottom: 0; + left: 0; + &:before, + &:after { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + content: ''; position: absolute; - &.l-logo-app { - top: 0; right: 15%; bottom: 0; left: 15%; - } - &.s-logo-nasa { - $m: 10px; - background-image: url($dirImgs + 'logo-nasa.svg'); - top: $m; right: auto; bottom: auto; left: $m; - width: $w * 2; height: auto; padding-bottom: $w; padding-top: $w; - } + } + + &:before { + // NASA logo + $w: 5%; + $m: 10px; + background-image: url($dirImgs + 'logo-nasa.svg'); + top: $m; + right: auto; + bottom: auto; + left: $m; + height: auto; + width: $w * 2; + padding-bottom: $w; + padding-top: $w; + } + + &:after { + // App logo + top: 0; + right: 15%; + bottom: 0; + left: 15%; } } -.s-logo-holder { - background: url($dirImgs + "bg-about-openmctweb.jpg") no-repeat center; // For OpenMCT Web. - background-size: cover; -} -.s-logo { - background-position: center; - background-repeat: no-repeat; - background-size: contain; -} -.s-logo-openmctweb { - background-image: url($dirImgs + 'logo-openmctweb-shdw.svg'); +.s-splash { + background-image: url($dirImgs + "bg-about-openmctweb.jpg"); // For OpenMCT Web. + &:after { + background-image: url($dirImgs + 'logo-openmctweb-shdw.svg'); + } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/_startup.scss b/platform/commonUI/general/res/sass/_startup.scss new file mode 100644 index 0000000000..3124cd1c45 --- /dev/null +++ b/platform/commonUI/general/res/sass/_startup.scss @@ -0,0 +1,47 @@ +@import "bourbon"; +$dirImgs: '../../../general/res/images/'; +@import "logo-and-bg"; + +@mixin splashElem($m: 20%) { + top: $m; right: $m * 1.25; bottom: $m; left: $m * 1.25; + +} + +.l-splash-holder { + // Main outer holder. + @include transition-property(opacity); + @include transition-duration(500ms); + @include transition-timing-function(ease-in-out); + @include transition-delay(1s); + z-index: 10000; + opacity: 1; + &.fadeout { + opacity: 0; + pointer-events: none; + } + .l-splash { + // The splash element. + @include splashElem(); + border-radius: 10px; + box-shadow: 0 5px 50px 25px rgba(#fff, 0.1); + } +} + +@media only screen and (max-device-width: 767px) { + .l-splash-holder .l-splash { + @include splashElem(0); + border-radius: 0; + box-shadow: none; + } +} + +@media only screen and (max-device-width: 767px) and (orientation: portrait) { + .l-splash-holder .l-splash { + &:before { + $w: 12%; + width: $w * 2; + padding-bottom: $w; + padding-top: $w; + } + } +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/startup-open.scss b/platform/commonUI/general/res/sass/startup-open.scss new file mode 100644 index 0000000000..0f13bf853d --- /dev/null +++ b/platform/commonUI/general/res/sass/startup-open.scss @@ -0,0 +1,36 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web 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 Web 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. + *****************************************************************************/ +@import "startup"; + +.l-splash-holder { + background: #333; + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + .s-splash { + background-image: url($dirImgs + "bg-about-openmctweb.jpg"); // For OpenMCT Web. + // &:before { // Use this to override the NASA logo. Could add a AMMOS logo along with NASA if desired. } + &:after { + // App logo + background-image: url($dirImgs + 'logo-openmctweb-shdw.svg'); + } + } +} diff --git a/platform/commonUI/general/res/sass/startup.scss b/platform/commonUI/general/res/sass/startup.scss deleted file mode 100644 index 4784926b20..0000000000 --- a/platform/commonUI/general/res/sass/startup.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import "compass"; -@import "compass/css3"; -@import "constants"; -$dirImgs: '../../../general/res/images/'; -@import "logo-and-bg"; - -body { - background: black; -} - -.s-logo-holder { - @include transition-property(opacity); - @include transition-duration(500ms); - @include transition-timing-function(ease-in-out); - background-image: url($dirImgs + "bg-about-openmctweb.jpg") no-repeat center; // For OpenMCT Web. - z-index: 1000; - opacity: 1; - &.fadeout { - opacity: 0; - pointer-events: none; - } -} - -.s-logo-openmctweb { - background-image: url($dirImgs + 'logo-openmctweb-shdw.svg'); -} diff --git a/platform/commonUI/general/src/SplashScreenManager.js b/platform/commonUI/general/src/SplashScreenManager.js index e9666f4f6d..8c38339531 100644 --- a/platform/commonUI/general/src/SplashScreenManager.js +++ b/platform/commonUI/general/src/SplashScreenManager.js @@ -32,7 +32,8 @@ define([ function SplashScreenManager($document) { var splash; $document = $document[0]; - splash = $document.querySelectorAll('.s-logo-holder')[0]; + splash = $document.querySelectorAll('.l-splash-holder')[0]; + console.log(splash); if (!splash) { return; } From 129b554f9d1d02d83ceec1fe42ee743bcc06969f Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 24 Feb 2016 17:47:24 -0800 Subject: [PATCH 4/8] [Frontend] Significant markup/CSS mods for splash screen #164 https://github.jpl.nasa.gov/MissionControl/vista/issues/299 App logo and bg files renamed; Added openmct.scss to hold openmct-specific styles; Renamed _startup.scss to startup-base.scss which now renders its own .css file; Still to-do: apply to WARP including needed mods to its About dialog screen; --- index.html | 3 +- .../about/res/templates/about-dialog.html | 1 - ...{bg-about-openmctweb.jpg => bg-splash.jpg} | Bin ...-openmctweb-shdw.svg => logo-app-shdw.svg} | 198 +++++++++--------- .../{logo-openmctweb.svg => logo-app.svg} | 140 ++++++------- .../general/res/sass/_logo-and-bg.scss | 42 +++- .../commonUI/general/res/sass/_startup.scss | 47 ----- .../sass/{startup-open.scss => openmct.scss} | 21 +- .../general/res/sass/startup-base.scss | 70 +++++++ .../res/sass/user-environ/_layout.scss | 3 - 10 files changed, 287 insertions(+), 238 deletions(-) rename platform/commonUI/general/res/images/{bg-about-openmctweb.jpg => bg-splash.jpg} (100%) rename platform/commonUI/general/res/images/{logo-openmctweb-shdw.svg => logo-app-shdw.svg} (99%) rename platform/commonUI/general/res/images/{logo-openmctweb.svg => logo-app.svg} (98%) delete mode 100644 platform/commonUI/general/res/sass/_startup.scss rename platform/commonUI/general/res/sass/{startup-open.scss => openmct.scss} (75%) create mode 100644 platform/commonUI/general/res/sass/startup-base.scss diff --git a/index.html b/index.html index 2535414aa7..6307a5f0dd 100644 --- a/index.html +++ b/index.html @@ -33,7 +33,8 @@ mct.run(); }); - + + diff --git a/platform/commonUI/about/res/templates/about-dialog.html b/platform/commonUI/about/res/templates/about-dialog.html index fe19442f16..7b7dd436f5 100644 --- a/platform/commonUI/about/res/templates/about-dialog.html +++ b/platform/commonUI/about/res/templates/about-dialog.html @@ -21,7 +21,6 @@ -->
-

OpenMCT Web

diff --git a/platform/commonUI/general/res/images/bg-about-openmctweb.jpg b/platform/commonUI/general/res/images/bg-splash.jpg similarity index 100% rename from platform/commonUI/general/res/images/bg-about-openmctweb.jpg rename to platform/commonUI/general/res/images/bg-splash.jpg diff --git a/platform/commonUI/general/res/images/logo-openmctweb-shdw.svg b/platform/commonUI/general/res/images/logo-app-shdw.svg similarity index 99% rename from platform/commonUI/general/res/images/logo-openmctweb-shdw.svg rename to platform/commonUI/general/res/images/logo-app-shdw.svg index cd7b4cd19b..cf42b0621c 100644 --- a/platform/commonUI/general/res/images/logo-openmctweb-shdw.svg +++ b/platform/commonUI/general/res/images/logo-app-shdw.svg @@ -1,99 +1,99 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/platform/commonUI/general/res/images/logo-openmctweb.svg b/platform/commonUI/general/res/images/logo-app.svg similarity index 98% rename from platform/commonUI/general/res/images/logo-openmctweb.svg rename to platform/commonUI/general/res/images/logo-app.svg index 4db4e60396..9a2acf1f81 100644 --- a/platform/commonUI/general/res/images/logo-openmctweb.svg +++ b/platform/commonUI/general/res/images/logo-app.svg @@ -1,70 +1,70 @@ - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/platform/commonUI/general/res/sass/_logo-and-bg.scss b/platform/commonUI/general/res/sass/_logo-and-bg.scss index 136060cc9c..a78ac85e88 100644 --- a/platform/commonUI/general/res/sass/_logo-and-bg.scss +++ b/platform/commonUI/general/res/sass/_logo-and-bg.scss @@ -1,24 +1,49 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web 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 Web 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. + *****************************************************************************/ +.l-splash, +.l-splash:before, +.l-splash:after { + background-position: center; + background-repeat: no-repeat; + position: absolute; +} + .l-splash { background-size: cover; - position: absolute; top: 0; right: 0; bottom: 0; left: 0; &:before, &:after { - background-position: center; - background-repeat: no-repeat; background-size: contain; content: ''; - position: absolute; } &:before { // NASA logo $w: 5%; $m: 10px; - background-image: url($dirImgs + 'logo-nasa.svg'); + background-image: url('/platform/commonUI/general/res/images/logo-nasa.svg'); top: $m; right: auto; bottom: auto; @@ -38,9 +63,10 @@ } } +/* .s-splash { - background-image: url($dirImgs + "bg-about-openmctweb.jpg"); // For OpenMCT Web. + background-image: url('/branding/res/images/bg-splash.jpg'); &:after { - background-image: url($dirImgs + 'logo-openmctweb-shdw.svg'); + background-image: url('/branding/res/images/logo-app-shdw.svg'); } -} \ No newline at end of file +}*/ diff --git a/platform/commonUI/general/res/sass/_startup.scss b/platform/commonUI/general/res/sass/_startup.scss deleted file mode 100644 index 3124cd1c45..0000000000 --- a/platform/commonUI/general/res/sass/_startup.scss +++ /dev/null @@ -1,47 +0,0 @@ -@import "bourbon"; -$dirImgs: '../../../general/res/images/'; -@import "logo-and-bg"; - -@mixin splashElem($m: 20%) { - top: $m; right: $m * 1.25; bottom: $m; left: $m * 1.25; - -} - -.l-splash-holder { - // Main outer holder. - @include transition-property(opacity); - @include transition-duration(500ms); - @include transition-timing-function(ease-in-out); - @include transition-delay(1s); - z-index: 10000; - opacity: 1; - &.fadeout { - opacity: 0; - pointer-events: none; - } - .l-splash { - // The splash element. - @include splashElem(); - border-radius: 10px; - box-shadow: 0 5px 50px 25px rgba(#fff, 0.1); - } -} - -@media only screen and (max-device-width: 767px) { - .l-splash-holder .l-splash { - @include splashElem(0); - border-radius: 0; - box-shadow: none; - } -} - -@media only screen and (max-device-width: 767px) and (orientation: portrait) { - .l-splash-holder .l-splash { - &:before { - $w: 12%; - width: $w * 2; - padding-bottom: $w; - padding-top: $w; - } - } -} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/startup-open.scss b/platform/commonUI/general/res/sass/openmct.scss similarity index 75% rename from platform/commonUI/general/res/sass/startup-open.scss rename to platform/commonUI/general/res/sass/openmct.scss index 0f13bf853d..43dc1736b0 100644 --- a/platform/commonUI/general/res/sass/startup-open.scss +++ b/platform/commonUI/general/res/sass/openmct.scss @@ -19,18 +19,21 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -@import "startup"; +.app-logo { + background: url('/platform/commonUI/general/res/images/logo-app.svg') no-repeat center center; +} .l-splash-holder { background: #333; - position: absolute; - top: 0; right: 0; bottom: 0; left: 0; .s-splash { - background-image: url($dirImgs + "bg-about-openmctweb.jpg"); // For OpenMCT Web. - // &:before { // Use this to override the NASA logo. Could add a AMMOS logo along with NASA if desired. } - &:after { - // App logo - background-image: url($dirImgs + 'logo-openmctweb-shdw.svg'); - } + border-radius: 10px; + box-shadow: 0 5px 50px 25px rgba(255, 255, 255, 0.1); } } + +.s-splash { + background-image: url('/platform/commonUI/general/res/images/bg-splash.jpg'); + &:after { + background-image: url('/platform/commonUI/general/res/images/logo-app-shdw.svg'); + } +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/startup-base.scss b/platform/commonUI/general/res/sass/startup-base.scss new file mode 100644 index 0000000000..c99870f880 --- /dev/null +++ b/platform/commonUI/general/res/sass/startup-base.scss @@ -0,0 +1,70 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web 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 Web 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. + *****************************************************************************/ +@import "bourbon"; +@import "logo-and-bg"; + +@mixin splashElem($m: 20%) { + top: $m; right: $m * 1.25; bottom: $m; left: $m * 1.25; +} + +.l-splash-holder { + // Main outer holder. + @include transition-property(opacity); + @include transition-duration(500ms); + @include transition-timing-function(ease-in-out); + @include transition-delay(1s); + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 10000; + opacity: 1; + &.fadeout { + opacity: 0; + pointer-events: none; + } + .l-splash { + // The splash element. + @include splashElem(); + } +} + +@media only screen and (max-device-width: 767px) { + .l-splash-holder .l-splash { + @include splashElem(0); + border-radius: 0; + box-shadow: none; + } +} + +@media only screen and (max-device-width: 767px) and (orientation: portrait) { + .l-splash-holder .l-splash { + &:before { + // Make the NASA logo a bit bigger when we're in portrait mode. + $w: 12%; + width: $w * 2; + padding-bottom: $w; + padding-top: $w; + } + } +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 23a47447b2..f2f73ead8a 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -100,9 +100,6 @@ left: auto; width: $ueAppLogoW; z-index: 2; - &.logo-openmctweb { - background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center; - } } } } From 1a2a2e66ca6fb646999e51c2cab2422d70a69913 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 25 Feb 2016 12:41:54 -0800 Subject: [PATCH 5/8] [Frontend] Removed commented styling open #164 --- platform/commonUI/general/res/sass/_logo-and-bg.scss | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/platform/commonUI/general/res/sass/_logo-and-bg.scss b/platform/commonUI/general/res/sass/_logo-and-bg.scss index a78ac85e88..fbe13f7cb4 100644 --- a/platform/commonUI/general/res/sass/_logo-and-bg.scss +++ b/platform/commonUI/general/res/sass/_logo-and-bg.scss @@ -61,12 +61,4 @@ bottom: 0; left: 15%; } -} - -/* -.s-splash { - background-image: url('/branding/res/images/bg-splash.jpg'); - &:after { - background-image: url('/branding/res/images/logo-app-shdw.svg'); - } -}*/ +} \ No newline at end of file From d203f3adc08f73cad949d19807d33373e5b7a0fe Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 26 Feb 2016 10:15:15 -0800 Subject: [PATCH 6/8] [Frontend] New logo art; paths changed #164 Per comments in #702, abs paths changed to relative; New logo art for Open MCT added; CSS tweaked as needed; --- platform/commonUI/general/res/sass/_constants.scss | 2 +- platform/commonUI/general/res/sass/openmct.scss | 6 +++--- .../commonUI/general/res/sass/user-environ/_layout.scss | 5 +++-- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index ab6b729533..d5f725862f 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -40,7 +40,7 @@ $ueTopBarEditH: 30px; $ueTopBarBtnH: 35px; $ueFooterH: 25px; $ueColMargin: 1.5%; -$ueAppLogoW: 105px; +$ueAppLogoW: 80px; $ueEditToolBarH: 25px; $ueCollapsedPaneEdgeM: 22px; $uePaneMiniTabH: $ueTopBarH; diff --git a/platform/commonUI/general/res/sass/openmct.scss b/platform/commonUI/general/res/sass/openmct.scss index 43dc1736b0..1fc1ed28fe 100644 --- a/platform/commonUI/general/res/sass/openmct.scss +++ b/platform/commonUI/general/res/sass/openmct.scss @@ -20,7 +20,7 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ .app-logo { - background: url('/platform/commonUI/general/res/images/logo-app.svg') no-repeat center center; + background: url('../images/logo-app.svg') no-repeat center center; } .l-splash-holder { @@ -32,8 +32,8 @@ } .s-splash { - background-image: url('/platform/commonUI/general/res/images/bg-splash.jpg'); + background-image: url('../images/bg-splash.jpg'); &:after { - background-image: url('/platform/commonUI/general/res/images/logo-app-shdw.svg'); + background-image: url('../images/logo-app-shdw.svg'); } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index f2f73ead8a..99d8fb9d14 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -94,10 +94,11 @@ z-index: 1; } .app-logo { + background-position: right center; box-sizing: border-box; - @include absPosDefault($interiorMargin); + @include absPosDefault($interiorMargin - 1); cursor: pointer; - left: auto; + left: auto; right: $interiorMargin; width: $ueAppLogoW; z-index: 2; } From bc3eb4ab8d863d670131414e6b8a97da370197cd Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 26 Feb 2016 10:59:54 -0800 Subject: [PATCH 7/8] [Frontend] New logo art #164 New logo art for Open MCT added; Removed console.log; --- .../general/res/images/logo-app-shdw.svg | 111 ++++-------------- .../commonUI/general/res/images/logo-app.svg | 86 ++++---------- .../general/src/SplashScreenManager.js | 1 - 3 files changed, 42 insertions(+), 156 deletions(-) diff --git a/platform/commonUI/general/res/images/logo-app-shdw.svg b/platform/commonUI/general/res/images/logo-app-shdw.svg index cf42b0621c..17eeaa8c6e 100644 --- a/platform/commonUI/general/res/images/logo-app-shdw.svg +++ b/platform/commonUI/general/res/images/logo-app-shdw.svg @@ -1,99 +1,32 @@ - - + - - - + viewBox="20 0 640 150" enable-background="new 20 0 640 150" xml:space="preserve"> + + + - - - - - - - - - - - + + + + + + + diff --git a/platform/commonUI/general/res/images/logo-app.svg b/platform/commonUI/general/res/images/logo-app.svg index 9a2acf1f81..b328671336 100644 --- a/platform/commonUI/general/res/images/logo-app.svg +++ b/platform/commonUI/general/res/images/logo-app.svg @@ -1,70 +1,24 @@ - - + - - - - - - - - - - - - - - - - - - + viewBox="20 0 640 150" enable-background="new 20 0 640 150" xml:space="preserve"> + + + + + + + + diff --git a/platform/commonUI/general/src/SplashScreenManager.js b/platform/commonUI/general/src/SplashScreenManager.js index 8c38339531..97b866ec45 100644 --- a/platform/commonUI/general/src/SplashScreenManager.js +++ b/platform/commonUI/general/src/SplashScreenManager.js @@ -33,7 +33,6 @@ define([ var splash; $document = $document[0]; splash = $document.querySelectorAll('.l-splash-holder')[0]; - console.log(splash); if (!splash) { return; } From 192bbae6e5f49983fcce8795418f7baabfb2f1df Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 26 Feb 2016 14:49:34 -0800 Subject: [PATCH 8/8] [Frontend] Fix paths, includes #702 Per https://github.com/nasa/openmctweb/pull/702; Removed include of _logo-and-bg.scss into _about.scss; --- index.html | 4 ++-- platform/commonUI/general/res/sass/_about.scss | 5 +---- platform/commonUI/general/res/sass/_logo-and-bg.scss | 4 ++-- 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 6307a5f0dd..e5145d5c5e 100644 --- a/index.html +++ b/index.html @@ -33,8 +33,8 @@ mct.run(); }); - - + + diff --git a/platform/commonUI/general/res/sass/_about.scss b/platform/commonUI/general/res/sass/_about.scss index 1e9abe70cf..5c94a63181 100644 --- a/platform/commonUI/general/res/sass/_about.scss +++ b/platform/commonUI/general/res/sass/_about.scss @@ -20,9 +20,7 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ // General About dialog styling - -@import "logo-and-bg"; - +// Depends on styles loaded via /platform/commonUI/general/res/sass/startup-base.scss .l-about { &.abs { overflow: auto; @@ -67,4 +65,3 @@ } } } - diff --git a/platform/commonUI/general/res/sass/_logo-and-bg.scss b/platform/commonUI/general/res/sass/_logo-and-bg.scss index fbe13f7cb4..b67060b8fb 100644 --- a/platform/commonUI/general/res/sass/_logo-and-bg.scss +++ b/platform/commonUI/general/res/sass/_logo-and-bg.scss @@ -40,10 +40,10 @@ } &:before { - // NASA logo + // NASA logo, dude $w: 5%; $m: 10px; - background-image: url('/platform/commonUI/general/res/images/logo-nasa.svg'); + background-image: url('../images/logo-nasa.svg'); top: $m; right: auto; bottom: auto;