ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-20 17:33:23 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Frontend] Significant markup/CSS mods for splash screen

Browse Source 
#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;
This commit is contained in:
Charles Hacskaylo 2016-02-23 18:30:21 -08:00
parent 99cf690ad4
commit 164d959f60
10 changed files with 146 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -33,16 +33,15 @@
mct.run();
});
</script>
<link rel="stylesheet" href="platform/commonUI/general/res/css/startup.css">
<link rel="stylesheet" href="platform/commonUI/general/res/css/startup-open.css">
<link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="shortcut icon" href="platform/commonUI/general/res/images/favicons/favicon.ico">
</head>
<body class="user-environ">
<div class="l-logo-holder s-logo-holder">
<div class="l-logo s-logo s-logo-nasa"></div>
<div class="l-logo l-logo-app s-logo s-logo-openmctweb"></div>
<div class="l-splash-holder s-splash-holder">
<div class="l-splash s-splash"></div>
</div>
<div ng-view></div>

5
platform/commonUI/about/res/templates/about-dialog.html
View File

@ -20,10 +20,7 @@
at runtime from the About dialog for additional information.
-->
<div class="abs t-about l-about t-about-openmctweb s-about" ng-controller = "AboutController as about">
<div class="l-logo-holder s-logo-holder">
<div class="l-logo s-logo s-logo-nasa"></div>
<div class="l-logo l-logo-app s-logo s-logo-openmctweb"></div>
</div>
<div class="l-splash s-splash"></div>
<div class="s-text l-content">
<h1 class="l-title s-title">OpenMCT Web</h1>

2
platform/commonUI/general/res/sass/_about.scss
View File

@ -28,7 +28,7 @@
overflow: auto;
}
$contentH: 200px;
.l-logo-holder {
.l-splash {
position: relative;
height: 45%;
}

20
platform/commonUI/general/res/sass/_effects.scss
View File

@ -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; }

17
platform/commonUI/general/res/sass/_global.scss
View File

@ -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);
}
}
.test-stripes {
@include bgDiagonalStripes();
}
.test {
@include test();
}

64
platform/commonUI/general/res/sass/_logo-and-bg.scss
View File

@ -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');
}
}

47
platform/commonUI/general/res/sass/_startup.scss Normal file
View File

@ -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;
}
}
}

36
platform/commonUI/general/res/sass/startup-open.scss Normal file
View File

@ -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');
}
}
}

26
platform/commonUI/general/res/sass/startup.scss
View File

@ -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');
}

3
platform/commonUI/general/src/SplashScreenManager.js
View File

@ -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;
}