diff --git a/index.html b/index.html index b33764958a..e5145d5c5e 100644 --- a/index.html +++ b/index.html @@ -33,13 +33,18 @@ mct.run(); }); + + - - + +
+
+
+
diff --git a/platform/commonUI/about/res/templates/about-dialog.html b/platform/commonUI/about/res/templates/about-dialog.html index 5113954105..7b7dd436f5 100644 --- a/platform/commonUI/about/res/templates/about-dialog.html +++ b/platform/commonUI/about/res/templates/about-dialog.html @@ -20,11 +20,7 @@ at runtime from the About dialog for additional information. -->
-
- - -
- +

OpenMCT Web

diff --git a/platform/commonUI/general/bundle.js b/platform/commonUI/general/bundle.js index 6077785cf1..07978cef35 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/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-app-shdw.svg b/platform/commonUI/general/res/images/logo-app-shdw.svg new file mode 100644 index 0000000000..17eeaa8c6e --- /dev/null +++ b/platform/commonUI/general/res/images/logo-app-shdw.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/platform/commonUI/general/res/images/logo-app.svg b/platform/commonUI/general/res/images/logo-app.svg new file mode 100644 index 0000000000..b328671336 --- /dev/null +++ b/platform/commonUI/general/res/images/logo-app.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + diff --git a/platform/commonUI/general/res/images/logo-openmctweb-shdw.svg b/platform/commonUI/general/res/images/logo-openmctweb-shdw.svg deleted file mode 100644 index cd7b4cd19b..0000000000 --- a/platform/commonUI/general/res/images/logo-openmctweb-shdw.svg +++ /dev/null @@ -1,99 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/platform/commonUI/general/res/images/logo-openmctweb.svg b/platform/commonUI/general/res/images/logo-openmctweb.svg deleted file mode 100644 index 4db4e60396..0000000000 --- a/platform/commonUI/general/res/images/logo-openmctweb.svg +++ /dev/null @@ -1,70 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/platform/commonUI/general/res/sass/_about.scss b/platform/commonUI/general/res/sass/_about.scss index 978ea42078..5c94a63181 100644 --- a/platform/commonUI/general/res/sass/_about.scss +++ b/platform/commonUI/general/res/sass/_about.scss @@ -20,64 +20,29 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ // General About dialog styling - +// Depends on styles loaded via /platform/commonUI/general/res/sass/startup-base.scss .l-about { - // Layout &.abs { -// top: 20px; overflow: auto; } $contentH: 200px; - .l-logo-holder { + .l-splash { 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 +55,6 @@ } em { color: pushBack($colorBodyFg, 20%); -// margin-left: 2em; - &:first-child { -// margin-left: 0; - } } h3 { font-size: 1.25em; @@ -104,4 +65,3 @@ } } } - 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/_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 new file mode 100644 index 0000000000..b67060b8fb --- /dev/null +++ b/platform/commonUI/general/res/sass/_logo-and-bg.scss @@ -0,0 +1,64 @@ +/***************************************************************************** + * 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; + top: 0; + right: 0; + bottom: 0; + left: 0; + &:before, + &:after { + background-size: contain; + content: ''; + } + + &:before { + // NASA logo, dude + $w: 5%; + $m: 10px; + background-image: url('../images/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%; + } +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/openmct.scss b/platform/commonUI/general/res/sass/openmct.scss new file mode 100644 index 0000000000..1fc1ed28fe --- /dev/null +++ b/platform/commonUI/general/res/sass/openmct.scss @@ -0,0 +1,39 @@ +/***************************************************************************** + * 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. + *****************************************************************************/ +.app-logo { + background: url('../images/logo-app.svg') no-repeat center center; +} + +.l-splash-holder { + background: #333; + .s-splash { + border-radius: 10px; + box-shadow: 0 5px 50px 25px rgba(255, 255, 255, 0.1); + } +} + +.s-splash { + background-image: url('../images/bg-splash.jpg'); + &:after { + background-image: url('../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..99d8fb9d14 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -94,15 +94,13 @@ 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; - &.logo-openmctweb { - background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center; - } } } } diff --git a/platform/commonUI/general/src/SplashScreenManager.js b/platform/commonUI/general/src/SplashScreenManager.js new file mode 100644 index 0000000000..97b866ec45 --- /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('.l-splash-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(); + }); + }); +}); +