diff --git a/index.html b/index.html index 6b460aefc5..03591d6616 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,10 @@ src="platform/framework/lib/require.js" data-main="platform/framework/src/Main.js"> + + + + diff --git a/platform/commonUI/about/res/templates/about-dialog.html b/platform/commonUI/about/res/templates/about-dialog.html index 7840b8860b..d54ef2e9a9 100644 --- a/platform/commonUI/about/res/templates/about-dialog.html +++ b/platform/commonUI/about/res/templates/about-dialog.html @@ -1,12 +1,21 @@ -
- This is a placeholder for the about dialog. +
+
+ + +
- Show licenses. - -

- - {{version.name}} - {{version.value}} - -

+
+

OpenMCT Web

+
+

OpenMCT Web is a project of NASA's Ames Research Center. Copyright ©2015 NASA Ames Research Center, all rights reserved. Licensing information

+
+

Version Information

+
    +
  • + {{version.name}} + {{version.value}} +
    • +
+
+ diff --git a/platform/commonUI/about/res/templates/app-logo.html b/platform/commonUI/about/res/templates/app-logo.html index 8b3cefb5c0..75e495bd22 100644 --- a/platform/commonUI/about/res/templates/app-logo.html +++ b/platform/commonUI/about/res/templates/app-logo.html @@ -1 +1,3 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index ee3053cc68..c8826aee39 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -123,16 +123,22 @@ h1, h2, h3 { /* line 48, ../sass/_global.scss */ h1 { font-size: 1.7em; - font-weight: normal; - margin-bottom: 20px; } + font-weight: normal !important; + line-height: 120%; + margin-bottom: 20px; + margin-top: 0; } -/* line 54, ../sass/_global.scss */ +/* line 56, ../sass/_global.scss */ +p { + margin-bottom: 10px; } + +/* line 60, ../sass/_global.scss */ span { /* 618 DEBUG box-sizing: border-box; */ } -/* line 60, ../sass/_global.scss */ +/* line 66, ../sass/_global.scss */ .abs { position: absolute; top: 0; @@ -142,32 +148,36 @@ span { height: auto; width: auto; } -/* line 70, ../sass/_global.scss */ +/* line 76, ../sass/_global.scss */ .code { font-family: "Lucida Console", monospace; font-size: 0.7em; line-height: 150%; white-space: pre; } -/* line 77, ../sass/_global.scss */ +/* line 83, ../sass/_global.scss */ .centered { text-align: center; } -/* line 81, ../sass/_global.scss */ +/* line 87, ../sass/_global.scss */ .colorKey { color: #0099cc; } -/* line 85, ../sass/_global.scss */ +/* line 91, ../sass/_global.scss */ .ds { -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; } -/* line 90, ../sass/_global.scss */ +/* line 96, ../sass/_global.scss */ .hide, .hidden { display: none !important; } +/* line 100, ../sass/_global.scss */ +.sep { + color: rgba(255, 255, 255, 0.2); } + /* line 1, ../sass/_fonts.scss */ .ui-symbol { font-family: 'symbolsfont'; } @@ -208,11 +218,11 @@ span { height: 20px; } /* line 49, ../sass/user-environ/_layout.scss */ .user-environ .bottom-bar .status-holder { - right: 100px; } + right: 110px; } /* line 52, ../sass/user-environ/_layout.scss */ .user-environ .bottom-bar .app-logo { left: auto; - width: 95px; } + width: 105px; } /* line 60, ../sass/user-environ/_layout.scss */ .contents { @@ -341,6 +351,61 @@ span { .vscroll { overflow-y: auto; } +/* line 3, ../sass/_about.scss */ +.t-about { + line-height: 120%; } + /* line 7, ../sass/_about.scss */ + .t-about .s-description, + .t-about .s-info { + font-size: 0.8em; } + /* line 10, ../sass/_about.scss */ + .t-about .s-logo-holder { + background: url("../images/bg-about-openmctweb.jpg") no-repeat center; + background-size: cover; } + /* line 14, ../sass/_about.scss */ + .t-about .s-logo { + background-position: center; + background-repeat: no-repeat; + background-size: contain; } + /* line 20, ../sass/_about.scss */ + .t-about .s-logo-openmctweb { + background-image: url("../images/logo-openmctweb-shdw.svg"); } + /* line 23, ../sass/_about.scss */ + .t-about h1, .t-about h2 { + color: #fff; + font-weight: normal !important; } + /* line 29, ../sass/_about.scss */ + .t-about.l-about.abs { + overflow: auto; } + /* line 34, ../sass/_about.scss */ + .t-about .l-logo-holder { + position: relative; + height: 45%; } + /* line 37, ../sass/_about.scss */ + .t-about .l-logo-holder .l-logo { + position: absolute; } + /* line 40, ../sass/_about.scss */ + .t-about .l-logo-holder .l-logo.l-logo-app { + top: 0; + right: 15%; + bottom: 0; + left: 15%; } + /* line 44, ../sass/_about.scss */ + .t-about .l-logo-holder .l-logo.s-logo-nasa { + background-image: url("../images/logo-nasa.svg"); + top: 10px; + right: auto; + bottom: auto; + left: 10px; + width: 10%; + height: auto; + padding-bottom: 5%; + padding-top: 5%; } + /* line 53, ../sass/_about.scss */ + .t-about .l-content { + position: relative; + margin-top: 10px; } + /* line 1, ../sass/_badges.scss */ .badge { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffd233), color-stop(100%, #ffc700)); @@ -422,7 +487,7 @@ span { display: inline-block; font-size: 1rem; vertical-align: middle; } - /* line 123, ../sass/_mixins.scss */ + /* line 126, ../sass/_mixins.scss */ .invoke-menu:hover { color: #33ccff; } @@ -434,7 +499,7 @@ span { /* line 49, ../sass/_icons.scss */ .icon-buttons-main .invoke-menu { color: #666666; } - /* line 123, ../sass/_mixins.scss */ + /* line 126, ../sass/_mixins.scss */ .icon-buttons-main .invoke-menu:hover { color: #999999; } @@ -1342,7 +1407,7 @@ label.checkbox.custom { .menu-element .menu ul { margin: 0; padding: 0; } - /* line 131, ../sass/_mixins.scss */ + /* line 134, ../sass/_mixins.scss */ .menu-element .menu ul li { list-style-type: none; margin: 0; @@ -2108,12 +2173,20 @@ input[type="text"] { z-index: 100; } /* line 6, ../sass/overlay/_overlay.scss */ .overlay .btn.close { + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + -ms-border-radius: 6px; + -o-border-radius: 6px; + border-radius: 6px; + padding: 3px 6px; position: absolute; - top: 5px; - right: 5px; + border: none; + top: 3px; + right: 3px; bottom: auto; - left: auto; } -/* line 13, ../sass/overlay/_overlay.scss */ + left: auto; + z-index: 100; } +/* line 17, ../sass/overlay/_overlay.scss */ .overlay > .holder { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040)); background-image: -webkit-linear-gradient(#4d4d4d, #404040); @@ -2145,25 +2218,25 @@ input[type="text"] { bottom: 15%; left: 15%; z-index: 101; } - /* line 20, ../sass/overlay/_overlay.scss */ + /* line 24, ../sass/overlay/_overlay.scss */ .overlay > .holder > .contents { - top: 20px; - right: 20px; - bottom: 20px; - left: 20px; } -/* line 25, ../sass/overlay/_overlay.scss */ + top: 25px; + right: 25px; + bottom: 25px; + left: 25px; } +/* line 29, ../sass/overlay/_overlay.scss */ .overlay .title { font-size: 1.3em; } -/* line 29, ../sass/overlay/_overlay.scss */ +/* line 33, ../sass/overlay/_overlay.scss */ .overlay .top-bar { height: 60px; } -/* line 33, ../sass/overlay/_overlay.scss */ +/* line 37, ../sass/overlay/_overlay.scss */ .overlay .editor { top: 70px; bottom: 50px; left: 0; right: 0; } -/* line 39, ../sass/overlay/_overlay.scss */ +/* line 43, ../sass/overlay/_overlay.scss */ .overlay .bottom-bar { top: auto; right: 0; @@ -2172,7 +2245,7 @@ input[type="text"] { font-size: 1em; height: 40px; text-align: right; } - /* line 44, ../sass/overlay/_overlay.scss */ + /* line 48, ../sass/overlay/_overlay.scss */ .overlay .bottom-bar .btn { margin-left: 10px; } @@ -2252,23 +2325,20 @@ input[type="text"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + cursor: pointer; font-size: 0.8em; line-height: 10px; padding-top: 1px; text-transform: uppercase; } - /* line 19, ../sass/user-environ/_bottom-bar.scss */ - .ue-bottom-bar .app-logo.logo-warp { - background: url("../images/logo-warp.png") no-repeat left top; - color: #999999; - font-size: 0.7rem; - padding-top: 3px; - text-align: right; } + /* line 20, ../sass/user-environ/_bottom-bar.scss */ + .ue-bottom-bar .app-logo.logo-openmctweb { + background: url("../images/logo-openmctweb.svg") no-repeat center center; } -/* line 29, ../sass/user-environ/_bottom-bar.scss */ +/* line 26, ../sass/user-environ/_bottom-bar.scss */ .status.block { display: inline-block; margin-right: 20px; } - /* line 32, ../sass/user-environ/_bottom-bar.scss */ + /* line 29, ../sass/user-environ/_bottom-bar.scss */ .status.block .status-indicator { -webkit-border-radius: 2.7px; -moz-border-radius: 2.7px; @@ -2283,10 +2353,10 @@ input[type="text"] { font-size: 1.25em; vertical-align: middle; margin-right: 5px; } - /* line 40, ../sass/user-environ/_bottom-bar.scss */ + /* line 37, ../sass/user-environ/_bottom-bar.scss */ .status.block .status-indicator.ok { color: #009900; } - /* line 43, ../sass/user-environ/_bottom-bar.scss */ + /* line 40, ../sass/user-environ/_bottom-bar.scss */ .status.block .status-indicator.caution { color: #ffaa00; } diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index d02b479302..854a0d93d0 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -2,7 +2,7 @@ ul.tree { margin: 0; padding: 0; } - /* line 131, ../sass/_mixins.scss */ + /* line 134, ../sass/_mixins.scss */ ul.tree li { list-style-type: none; margin: 0; diff --git a/platform/commonUI/general/res/images/bg-about-openmctweb.jpg b/platform/commonUI/general/res/images/bg-about-openmctweb.jpg new file mode 100644 index 0000000000..98abe542b0 Binary files /dev/null and b/platform/commonUI/general/res/images/bg-about-openmctweb.jpg differ diff --git a/platform/commonUI/general/res/images/favicons/favicon-16x16.png b/platform/commonUI/general/res/images/favicons/favicon-16x16.png new file mode 100644 index 0000000000..c330b6a7cf Binary files /dev/null and b/platform/commonUI/general/res/images/favicons/favicon-16x16.png differ diff --git a/platform/commonUI/general/res/images/favicons/favicon-32x32.png b/platform/commonUI/general/res/images/favicons/favicon-32x32.png new file mode 100644 index 0000000000..a06df04278 Binary files /dev/null and b/platform/commonUI/general/res/images/favicons/favicon-32x32.png differ diff --git a/platform/commonUI/general/res/images/favicons/favicon-96x96.png b/platform/commonUI/general/res/images/favicons/favicon-96x96.png new file mode 100644 index 0000000000..debefb889c Binary files /dev/null and b/platform/commonUI/general/res/images/favicons/favicon-96x96.png differ diff --git a/platform/commonUI/general/res/images/favicons/favicon.ico b/platform/commonUI/general/res/images/favicons/favicon.ico new file mode 100644 index 0000000000..d057abb885 Binary files /dev/null and b/platform/commonUI/general/res/images/favicons/favicon.ico differ diff --git a/platform/commonUI/general/res/images/logo-nasa.svg b/platform/commonUI/general/res/images/logo-nasa.svg new file mode 100644 index 0000000000..4b145e390e --- /dev/null +++ b/platform/commonUI/general/res/images/logo-nasa.svg @@ -0,0 +1,159 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/platform/commonUI/general/res/images/logo-openmctweb-shdw.svg b/platform/commonUI/general/res/images/logo-openmctweb-shdw.svg new file mode 100644 index 0000000000..cd7b4cd19b --- /dev/null +++ b/platform/commonUI/general/res/images/logo-openmctweb-shdw.svg @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/platform/commonUI/general/res/images/logo-openmctweb.svg b/platform/commonUI/general/res/images/logo-openmctweb.svg new file mode 100644 index 0000000000..4db4e60396 --- /dev/null +++ b/platform/commonUI/general/res/images/logo-openmctweb.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/platform/commonUI/general/res/sass/_about.scss b/platform/commonUI/general/res/sass/_about.scss new file mode 100644 index 0000000000..7a5a7bfa57 --- /dev/null +++ b/platform/commonUI/general/res/sass/_about.scss @@ -0,0 +1,59 @@ +// General About dialog styling + +.t-about { + // Styling + line-height: 120%; + .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'); + } + h1, h2 { + color: #fff; + font-weight: normal !important; + } + + // Layout + &.l-about.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; + } +} + diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 39e002a459..9b24880cd5 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -33,7 +33,7 @@ $btnFontSizeToH: 0.45; $ueTopBarH: 35px; $ueFooterH: 20px; $ueColMargin: 1.5%; -$ueAppLogoW: 95px; +$ueAppLogoW: 105px; $ueBrowseViewBarH: $ueTopBarH; // was 30px $ueEditToolBarH: $ueBrowseViewBarH; $ueEditToolBarButtonH: $ueEditToolBarH * 0.8; @@ -84,7 +84,7 @@ $scrollbarTrackSize: 10px; $scrollbarTrackColorBg: rgba(#000, 0.4); // Paths -$dirImgs: '../images/'; +$dirImgs: '../images/'; // Relative to platform/css/ directory // Ticks $ticksH: 25px; diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss index b0096a3d71..6d6a949c8a 100644 --- a/platform/commonUI/general/res/sass/_global.scss +++ b/platform/commonUI/general/res/sass/_global.scss @@ -47,8 +47,14 @@ h1, h2, h3 { h1 { font-size: 1.7em; - font-weight: normal; + font-weight: normal !important; + line-height: 120%; margin-bottom: 20px; + margin-top: 0; +} + +p { + margin-bottom: $interiorMarginLg; } span { @@ -89,4 +95,8 @@ span { .hide, .hidden { display: none !important; +} + +.sep { + color: rgba(#fff, 0.2); } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index 5d9de639fc..85f80abc9b 100755 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -9,6 +9,7 @@ @import "global"; @import "fonts"; @import "user-environ/layout"; +@import "about"; @import "badges"; @import "icons"; @import "lists/tabular"; diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index 85ba457e49..cb9522286a 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -115,6 +115,9 @@ @mixin txtShdwSubtle($sVal: 0.1) { @include text-shadow(rgba(black, $sVal) 0 1px 2px); } +@mixin txtShdwLarge($sVal: 0.7) { + @include text-shadow(rgba(black, $sVal) 0 3px 7px); +} @mixin invokeMenu($baseColor) { diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss index cf7e69bd07..d40767ba25 100644 --- a/platform/commonUI/general/res/sass/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss @@ -4,8 +4,12 @@ z-index: 100; } .btn.close { + @include border-radius($basicCr * 2); + padding: 3px 6px; position: absolute; - top: $interiorMargin; right: $interiorMargin; bottom: auto; left: auto; + border: none; + top: $interiorMarginSm; right: $interiorMarginSm; bottom: auto; left: auto; + z-index: 100; } .editor { // background: $colorBodyBg; @@ -18,7 +22,7 @@ top: $i; right: $i; bottom: $i; left: $i; z-index: 101; >.contents { - $m: 20px; + $m: 25px; top: $m; right: $m; bottom: $m; left: $m; } } diff --git a/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss b/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss index 9fa129b380..451f2838e0 100644 --- a/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss +++ b/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss @@ -12,16 +12,13 @@ } .app-logo { @include box-sizing(border-box); + cursor: pointer; font-size: 0.8em; line-height: $ueFooterH - 10px; padding-top: 1px; text-transform: uppercase; - &.logo-warp { - background: url($dirImgs + 'logo-warp.png') no-repeat left top; - color: lighten($colorBodyBg, 40%); - font-size: 0.7rem; - padding-top: 3px; - text-align: right; + &.logo-openmctweb { + background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center; } } }