mirror of
https://github.com/nasa/openmct.git
synced 2025-01-19 11:17:04 +00:00
Merge branch 'open95' of https://github.com/nasa/openmctweb into open95
This commit is contained in:
Charles Hacskaylo
commit
62898c921f
@ -45,12 +45,6 @@
|
||||
"templateUrl": "templates/create/locator.html"
|
||||
}
|
||||
],
|
||||
"templates": [
|
||||
{
|
||||
"key": "topbar-browse",
|
||||
"templateUrl": "templates/topbar-browse.html"
|
||||
}
|
||||
],
|
||||
"representations": [
|
||||
{
|
||||
"key": "browse-object",
|
||||
|
||||
@ -20,10 +20,11 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div class="menu-element wrapper" ng-controller="ClickAwayController as createController">
|
||||
<div class="btn btn-menu create-btn major" ng-click="createController.toggle()">
|
||||
Create
|
||||
<div class="s-menu major create-btn" ng-click="createController.toggle()">
|
||||
<span class="ui-symbol icon type-icon">+</span>
|
||||
<span class="title-label">Create</span>
|
||||
</div>
|
||||
<div class="menu dropdown super-menu" ng-show="createController.isActive()">
|
||||
<div class="menu super-menu" ng-show="createController.isActive()">
|
||||
<mct-representation mct-object="domainObject" key="'create-menu'">
|
||||
</mct-representation>
|
||||
</div>
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
<div class='top-bar browse abs'>
|
||||
<!-- TO-DO: replace JS placeholders for click actions -->
|
||||
<div class='browse-main bar abs left'>
|
||||
<a class="menu-element btn btn-menu browse-btn" onclick="alert('Not yet functional. This will allow filtering of browsed objects and search context.');">
|
||||
<span class='ui-symbol badge major' href=''>*</span>Browse All<span class='ui-symbol invoke-menu'>v</span>
|
||||
</a>
|
||||
<input type='text' class='control filter' name='filter-available'/>
|
||||
<a class='icon icon-filter ui-symbol' onclick="alert('Not yet functional. This will initiate a search.');">M</a>
|
||||
</div>
|
||||
<div class='icon-buttons-main bar abs right'>
|
||||
<a class='ui-symbol icon major alert' onclick="alert('Not yet functional. This will allow updating of domain objects that need to be refreshed.');">!<span id='alert-actions-menu' class='ui-symbol invoke-menu'>v</span></a>
|
||||
<!--a class='ui-symbol icon major profile' href=''>P<span id='profile-actions-menu' class='ui-symbol invoke-menu'>v</span></a-->
|
||||
<a class='ui-symbol icon major settings' onclick="alert('Not yet functional. This will allow access to application configuration settings.');">G<span id='settings-actions-menu' class='ui-symbol invoke-menu'>v</span></a>
|
||||
</div>
|
||||
</div>
|
||||
@ -34,13 +34,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="abs bottom-bar">
|
||||
<a class='btn lg major'
|
||||
href=''
|
||||
<a class='s-btn major'
|
||||
ng-class="{ disabled: !createForm.$valid }"
|
||||
ng-click="ngModel.confirm()">
|
||||
OK
|
||||
</a>
|
||||
<a class='btn lg subtle' href='' ng-click="ngModel.cancel()">
|
||||
<a class='s-btn'
|
||||
ng-click="ngModel.cancel()">
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
@ -35,7 +35,7 @@
|
||||
<div class="abs bottom-bar">
|
||||
<a ng-repeat="option in ngModel.dialog.options"
|
||||
href=''
|
||||
class="btn lg"
|
||||
class="s-btn lg"
|
||||
title="{{option.description}}"
|
||||
ng-click="ngModel.confirm(option.key)"
|
||||
ng-class="{ major: $first, subtle: !$first }">
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
-->
|
||||
<span ng-controller="EditActionController">
|
||||
<span ng-repeat="currentAction in editActions">
|
||||
<a class='btn'
|
||||
<a class='s-btn'
|
||||
ng-click="currentAction.perform()"
|
||||
ng-class="{ major: $index === 0, subtle: $index !== 0 }">
|
||||
{{currentAction.getMetadata().name}}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -29,7 +29,7 @@
|
||||
font-size: 0.75rem;
|
||||
|
||||
&:hover {
|
||||
.l-autoflow-header .l-btn.change-column-width {
|
||||
.l-autoflow-header .s-btn.change-column-width {
|
||||
@include trans-prop-nice-fade(50ms);
|
||||
opacity: 1;
|
||||
}
|
||||
@ -45,7 +45,7 @@
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.l-btn.change-column-width {
|
||||
.s-btn.change-column-width {
|
||||
@include trans-prop-nice-fade(500ms);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@ -49,6 +49,7 @@ $colorCreateBtn: $colorKey;
|
||||
$colorGridLines: rgba(#fff, 0.05);
|
||||
$colorFormLines: rgba(#fff, 0.1);
|
||||
$colorFormSectionHeader: rgba(#000, 0.2);
|
||||
$colorInvokeMenu: #fff;
|
||||
// Menu colors
|
||||
$colorMenuBg: lighten($colorBodyBg, 23%);
|
||||
$colorMenuFg: lighten($colorMenuBg, 70%);
|
||||
@ -105,7 +106,7 @@ $ueEditLeftPaneW: 75%;
|
||||
$treeSearchInputBarH: 25px;
|
||||
// Overlay
|
||||
$ovrTopBarH: 60px;
|
||||
$ovrFooterH: 40px;
|
||||
$ovrFooterH: 30px;
|
||||
$overlayMargin: 25px;
|
||||
// Items
|
||||
$ueBrowseGridItemLg: 200px;
|
||||
@ -125,7 +126,7 @@ $tabularHeaderH: 22px; //18px
|
||||
$tabularTdPadLR: $itemPadLR;
|
||||
$tabularTdPadTB: 3px;
|
||||
// Imagery
|
||||
$imageMainControlBarH: 22px;
|
||||
$imageMainControlBarH: 25px;
|
||||
$imageThumbsD: 120px;
|
||||
$imageThumbsWrapperH: $imageThumbsD * 1.4;
|
||||
$imageThumbPad: 1px;
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-menu .invoke-menu,
|
||||
.s-menu .invoke-menu,
|
||||
.icon.major .invoke-menu {
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
|
||||
@ -19,27 +19,19 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
@import "compass";
|
||||
@import "compass/reset";
|
||||
@import "compass/css3";
|
||||
@import "compass/utilities";
|
||||
|
||||
@import "mixins";
|
||||
@import "forms/mixins";
|
||||
@import "mobile/mixins";
|
||||
|
||||
@import "effects";
|
||||
@import "global";
|
||||
@import "fonts";
|
||||
@import "user-environ/layout";
|
||||
@import "mobile/layout";
|
||||
@import "fixed-position";
|
||||
@import "about";
|
||||
@import "text";
|
||||
@import "icons";
|
||||
@import "limits";
|
||||
@import "data-status";
|
||||
@import "lists/tabular";
|
||||
@import "helpers/bubbles";
|
||||
@import "helpers/splitter";
|
||||
@import "helpers/wait-spinner";
|
||||
@import "messages";
|
||||
@import "properties";
|
||||
|
||||
/********************************* CONTROLS */
|
||||
@import "controls/breadcrumb";
|
||||
@ -50,7 +42,6 @@
|
||||
@import "controls/menus";
|
||||
@import "controls/time-controller";
|
||||
@import "mobile/controls/menus";
|
||||
@import "edit/editor";
|
||||
|
||||
/********************************* FORMS */
|
||||
@import "forms/elems";
|
||||
@ -62,13 +53,14 @@
|
||||
@import "forms/validation";
|
||||
@import "forms/filter";
|
||||
|
||||
@import "plots/plots-main";
|
||||
/********************************* USER ENVIRON */
|
||||
@import "user-environ/layout";
|
||||
@import "mobile/layout";
|
||||
@import "edit/editor";
|
||||
@import "search/search";
|
||||
@import "mobile/search/search";
|
||||
@import "overlay/overlay";
|
||||
@import "mobile/overlay/overlay";
|
||||
|
||||
/********************************* USER ENVIRON */
|
||||
@import "tree/tree";
|
||||
@import "mobile/tree";
|
||||
@import "user-environ/frame";
|
||||
@ -76,14 +68,10 @@
|
||||
@import "user-environ/bottom-bar";
|
||||
@import "user-environ/tool-bar";
|
||||
|
||||
/********************************* HELPERS */
|
||||
@import "helpers/bubbles";
|
||||
@import "helpers/splitter";
|
||||
@import "helpers/wait-spinner";
|
||||
@import "messages";
|
||||
@import "properties";
|
||||
|
||||
/********************************* VIEWS */
|
||||
@import "fixed-position";
|
||||
@import "lists/tabular";
|
||||
@import "plots/plots-main";
|
||||
@import "iframe";
|
||||
@import "hide-non-functional";
|
||||
@import "views";
|
||||
|
||||
@ -153,28 +153,22 @@
|
||||
$fgBase: lighten($fg, $ltnRatio);
|
||||
$gradC1: lighten($bgBase, $gradRatio);
|
||||
$gradC2: $bgBase;
|
||||
$cInvokeBase: lighten($gradC1, $ltnRatio*2);
|
||||
$cInvokeBase: #fff;
|
||||
|
||||
@include background-image(linear-gradient($gradC1, $gradC2));
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
@include boxShdwSubtle();
|
||||
border: none;
|
||||
border-top: 1px solid lighten($gradC1, 2%);
|
||||
//border-top: 1px solid lighten($gradC1, 2%);
|
||||
color: $fg;
|
||||
display: inline-block;
|
||||
@if $hover == true {
|
||||
&:not(.disabled):hover {
|
||||
@include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
|
||||
color: lighten($fgBase, $hovRatio);
|
||||
&.btn-menu .invoke-menu {
|
||||
color: lighten($cInvokeBase, $hovRatio);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-menu .invoke-menu {
|
||||
color: $cInvokeBase;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
|
||||
@ -216,17 +210,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorKey) {
|
||||
// $ic: Icon color
|
||||
@include containerSubtle($bg, $fg, true);
|
||||
}
|
||||
|
||||
@mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
// No longer should be used; use btnSubtle instead
|
||||
//@include containerSubtle($bg, $fg, true);
|
||||
//@include background-image(linear-gradient(lighten($bg, 20%), $bg));
|
||||
/* &:not(.disabled):hover {
|
||||
@include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
|
||||
}*/
|
||||
.icon {
|
||||
color: $ic;
|
||||
}
|
||||
&:not(.disabled) {
|
||||
&:not(.paused) {
|
||||
&:hover {
|
||||
.icon {
|
||||
color: lighten($ic, $ltGamma);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin boxIncised($sVal: 0.6) {
|
||||
|
||||
@ -23,8 +23,7 @@ $baseRatio: 1.5;
|
||||
$pad: $interiorMargin * $baseRatio;
|
||||
|
||||
/******* LAYOUT AND SIZING */
|
||||
.btn,
|
||||
.l-btn {
|
||||
/*.l-btn {
|
||||
@include user-select(none);
|
||||
//line-height: 1.5em; // Was 1.25em
|
||||
line-height: 150%;
|
||||
@ -35,14 +34,13 @@ $pad: $interiorMargin * $baseRatio;
|
||||
$h: $ueTopBarH; // - $interiorMargin;
|
||||
height: $h;
|
||||
line-height: $h - 2;
|
||||
//padding: 0 $pad * 6 0 $pad;
|
||||
padding: 0 $pad * 3;
|
||||
}
|
||||
&.create-btn {
|
||||
font-size: 1em;
|
||||
&:before {
|
||||
content:"+";
|
||||
font-family: symbolsfont;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.menu {
|
||||
margin-left: $pad * -1;
|
||||
@ -57,105 +55,109 @@ $pad: $interiorMargin * $baseRatio;
|
||||
&.vsm {
|
||||
padding: 0 ($pad / $baseRatio) / 2;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
/*********************************** STYLE STYLES */
|
||||
.btn,
|
||||
.s-btn {
|
||||
$base: lighten($colorBodyBg, 20%); // Moved to s-btn
|
||||
$base: lighten($colorBodyBg, 20%);
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
@include text-shadow(rgba(black, 0.3) 0 1px 1px);
|
||||
@include user-select(none);
|
||||
//@include containerSubtle($colorBodyBg, $colorBodyFg, true);
|
||||
cursor: pointer;
|
||||
//line-height: 1.2em;
|
||||
text-decoration: none;
|
||||
&.major {
|
||||
$bg: $colorKey;
|
||||
@include btnSubtle($bg);
|
||||
$fg: lighten($bg, 50%);
|
||||
color: $fg;
|
||||
&:hover {
|
||||
@include btnSubtle(lighten($bg, 5%), $fg);
|
||||
//color: $fg;
|
||||
}
|
||||
.invoke-menu {
|
||||
color: $fg;
|
||||
}
|
||||
}
|
||||
&.subtle {
|
||||
@include btnSubtle($base, lighten($base, 40%));
|
||||
}
|
||||
&.very-subtle,
|
||||
&.s-very-subtle {
|
||||
@include containerSubtle($colorBodyBg, $colorBodyFg, true);
|
||||
&.paused {
|
||||
@include containerSubtle($colorPausedBg, $colorPausedFg, true);
|
||||
.icon:before {
|
||||
content:"\0000EF";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
height: $btnStdH;
|
||||
line-height: $btnStdH;
|
||||
padding: 0 $pad;
|
||||
|
||||
.icon-btn,
|
||||
.s-icon-btn {
|
||||
@extend .s-btn;
|
||||
font-size: 1em;
|
||||
font-size: 0.7rem;
|
||||
.icon {
|
||||
font-size: 0.8rem;
|
||||
color: $colorKey;
|
||||
}
|
||||
|
||||
.title-label {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.sm {
|
||||
padding: 0 $pad / $baseRatio;
|
||||
}
|
||||
&.vsm {
|
||||
padding: 0 ($pad / $baseRatio) / 2;
|
||||
}
|
||||
|
||||
&:not(.major) {
|
||||
@include btnSubtle($colorBodyBg, $colorBodyFg, $colorKey);
|
||||
}
|
||||
|
||||
&.major {
|
||||
$bg: $colorKey;
|
||||
$fg: lighten($bg, 70%);
|
||||
@include btnSubtle($bg, $fg, $fg);
|
||||
}
|
||||
|
||||
&.paused {
|
||||
.icon {
|
||||
color: $colorPausedFg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.disabled) {
|
||||
&:not(.paused) {
|
||||
&:hover {
|
||||
.icon {
|
||||
color: lighten($colorKey, $ltGamma);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.labeled {
|
||||
padding: 0 $pad/2;
|
||||
.icon {
|
||||
//font-size: 1.5em;
|
||||
}
|
||||
.title-label {
|
||||
margin-left: $interiorMargin;
|
||||
@include btnSubtle($colorPausedBg, $colorPausedFg, $colorPausedFg);
|
||||
.icon:before {
|
||||
content: "\0000EF";
|
||||
}
|
||||
}
|
||||
|
||||
&.pause-play {
|
||||
/* &.paused {
|
||||
.icon {
|
||||
@include pulse(500ms);
|
||||
/*
|
||||
&.paused {
|
||||
.icon {
|
||||
@include pulse(500ms);
|
||||
}
|
||||
}
|
||||
}*/
|
||||
*/
|
||||
.icon:before {
|
||||
content:"\0000F1";
|
||||
content: "\0000F1";
|
||||
}
|
||||
}
|
||||
|
||||
&.show-thumbs {
|
||||
.icon:before {
|
||||
content:"\000039";
|
||||
content: "\000039";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-btn-set {
|
||||
// Buttons that have a very tight conceptual grouping - no internal space between them.
|
||||
// Structure: .btn-set > mct-representation class=first|last > .s-btn
|
||||
//@include test(red);
|
||||
font-size: 0; // Remove space between s-btn elements due to white space in markup
|
||||
|
||||
.s-btn {
|
||||
@include border-radius(0);
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.first {
|
||||
.s-btn {
|
||||
@include border-left-radius($controlCr);
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.last {
|
||||
.s-btn {
|
||||
@include border-right-radius($controlCr);
|
||||
}
|
||||
}
|
||||
}
|
||||
/*********************************** LAYOUT STYLES */
|
||||
span.btn,
|
||||
span.btn span,
|
||||
span.l-btn,
|
||||
span.l-btn span,
|
||||
a.btn,
|
||||
a.btn span,
|
||||
a.l-btn,
|
||||
a.l-btn span {
|
||||
/*
|
||||
|
||||
span.s-btn,
|
||||
span.s-btn span,
|
||||
a.s-btn,
|
||||
a.s-btn span,
|
||||
a.s-btn,
|
||||
a.s-btn span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
@ -100,22 +100,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.btn-bar {
|
||||
// position: relative;
|
||||
/* .btn,
|
||||
.btn-set,
|
||||
.t-btn {
|
||||
display: inline-block;
|
||||
// margin-left: $interiorMargin;
|
||||
}
|
||||
.btn,
|
||||
.t-btn {
|
||||
&:first-child {
|
||||
// margin-left: 0;
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
.l-composite-control {
|
||||
vertical-align: middle;
|
||||
&.l-checkbox {
|
||||
@ -153,42 +137,6 @@
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/*
|
||||
.btn-set {
|
||||
// Buttons that have a very tight conceptual grouping - no internal space between them.
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
.btn,
|
||||
.t-btn {
|
||||
@include border-radius(0);
|
||||
border-left: 1px solid lighten($colorBodyBg, 20%);
|
||||
margin-left: 0;
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
@include border-left-radius($controlCr);
|
||||
}
|
||||
&:last-child {
|
||||
@include border-right-radius($controlCr);
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.object-browse-bar .btn,
|
||||
.object-browse-bar .t-btn,
|
||||
.object-browse-bar .view-switcher,
|
||||
.top-bar .buttons-main .btn,
|
||||
.top-bar .buttons-main .t-btn,
|
||||
.top-bar .view-switcher,
|
||||
.tool-bar .btn,
|
||||
.tool-bar .t-btn {
|
||||
$h: $btnToolbarH;
|
||||
display: inline-block;
|
||||
font-size: $h * $btnFontSizeToH;
|
||||
line-height: 200%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
label.checkbox.custom {
|
||||
$bg: lighten($colorBodyBg, $ltGamma);
|
||||
$d: $formRowCtrlsH;
|
||||
@ -256,7 +204,7 @@ label.checkbox.custom {
|
||||
}
|
||||
}
|
||||
|
||||
.btn-menu label.checkbox.custom {
|
||||
.s-menu label.checkbox.custom {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@ -267,84 +215,6 @@ label.checkbox.custom {
|
||||
}
|
||||
}
|
||||
|
||||
.btn-menu {
|
||||
$h: 20px;
|
||||
$p: $interiorMarginSm * 2;
|
||||
$c: $colorBodyFg;
|
||||
@include btnSubtle($colorBodyBg);
|
||||
/* height: $h;
|
||||
line-height: $h;
|
||||
&.dropdown {
|
||||
padding-left: $p;
|
||||
padding-right: $p;
|
||||
}*/
|
||||
|
||||
&:not(.disabled):hover {
|
||||
color: lighten($c, 20%);
|
||||
}
|
||||
|
||||
/* &.context-available {
|
||||
// An element like the invoke-menu triangle;
|
||||
// Indicates that this element has a dropdown menu available;
|
||||
// Currently unused
|
||||
$c: $colorKey;
|
||||
color: $c;
|
||||
padding: 0 5px;
|
||||
&:hover {
|
||||
color: lighten($c, 10%);
|
||||
}
|
||||
}*/
|
||||
|
||||
span.l-click-area {
|
||||
// In markup, this element should not enclose anything.
|
||||
@extend .abs;
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
//margin-right: $interiorMargin;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
.menu {
|
||||
// margin-left: (-1 * $p);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
text-align: left;
|
||||
.ui-symbol.icon {
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar .btn-menu {
|
||||
$h: $btnStdH; //$ueTopBarBtnH; // 35px
|
||||
$p: 10px;
|
||||
$badgeM: $interiorMargin;
|
||||
$badgeD: $h - ($badgeM * 2);
|
||||
//height: $h;
|
||||
//line-height: $h;
|
||||
//padding-right: 10px;
|
||||
&.browse-btn {
|
||||
margin-right: $interiorMargin;
|
||||
padding-left: $badgeD + $badgeM * 2;
|
||||
.badge {
|
||||
@include border-radius($controlCr * 1.5);
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
line-height: $badgeD;
|
||||
position: absolute;
|
||||
top: $badgeM;
|
||||
left: $badgeM;
|
||||
bottom: $badgeM;
|
||||
right: auto;
|
||||
width: $badgeD;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-available {
|
||||
$c: $colorKey;
|
||||
color: $c;
|
||||
@ -355,9 +225,6 @@ label.checkbox.custom {
|
||||
|
||||
.view-switcher {
|
||||
@include trans-prop-nice-fade($controlFadeMs);
|
||||
.type-icon {
|
||||
//vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** OBJECT-HEADER */
|
||||
|
||||
@ -19,7 +19,52 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/******************************************************** MENUS */
|
||||
/******************************************************** MENU BUTTONS */
|
||||
.s-menu {
|
||||
// Formerly .btn-menu
|
||||
@extend .s-btn;
|
||||
span.l-click-area {
|
||||
// In markup, this element should not enclose anything.
|
||||
@extend .abs;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.title-label {
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&:after {
|
||||
// Adds the downward facing arrow element
|
||||
color: rgba($colorInvokeMenu, 0.2);
|
||||
content: '\76';
|
||||
display: inline-block;
|
||||
font-family: 'symbolsfont';
|
||||
margin-left: $interiorMarginSm;
|
||||
@include text-shadow(none);
|
||||
vertical-align: top;
|
||||
}
|
||||
&.create-btn {
|
||||
.title-label {
|
||||
font-size: 1rem;
|
||||
}
|
||||
&:after {
|
||||
color: rgba($colorInvokeMenu, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
left: 0;
|
||||
text-align: left;
|
||||
.ui-symbol.icon {
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** MENUS THEMSELVES */
|
||||
.menu-element {
|
||||
$bg: lighten($colorBodyBg, 5%);
|
||||
$bgHover: lighten($bg, 20%);
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* 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 "compass";
|
||||
@import "compass/css3";
|
||||
@import "compass/css3/border-radius";
|
||||
@import "compass/css3/opacity";
|
||||
@import "compass/utilities";
|
||||
|
||||
@import "constants";
|
||||
@import "mobile/constants";
|
||||
@import "mixins";
|
||||
@import "forms/mixins";
|
||||
@import "mobile/mixins";
|
||||
@import "forms/elems";
|
||||
@import "forms/textarea";
|
||||
@import "forms/text-input";
|
||||
@import "forms/selects";
|
||||
@import "forms/channel-selector";
|
||||
@import "forms/datetime";
|
||||
@import "forms/validation";
|
||||
@import "forms/filter";
|
||||
@ -1,33 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* 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 "compass";
|
||||
@import "compass/css3";
|
||||
@import "compass/css3/border-radius";
|
||||
@import "compass/css3/opacity";
|
||||
@import "compass/utilities";
|
||||
|
||||
@import "constants";
|
||||
@import "mobile/constants";
|
||||
@import "mixins";
|
||||
@import "mobile/mixins";
|
||||
@import "items/item";
|
||||
@import "mobile/item";
|
||||
@ -119,7 +119,7 @@
|
||||
}
|
||||
.view-switcher {
|
||||
margin-right: 0 !important;
|
||||
.name {
|
||||
.title-label {
|
||||
// Hide the name in mobile
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -63,8 +63,20 @@
|
||||
//font-size: 1em;
|
||||
height: $ovrFooterH;
|
||||
text-align: right;
|
||||
.btn {
|
||||
margin-left: 10px;
|
||||
.s-btn {
|
||||
$l: 15%;
|
||||
@include containerSubtle(lighten($colorBodyBg, $l), lighten($colorBodyFg, $l), true);
|
||||
font-size: 95%;
|
||||
height: $ovrFooterH;
|
||||
line-height: $ovrFooterH;
|
||||
margin-left: $interiorMargin;
|
||||
padding: 0 $interiorMargin * 3;
|
||||
&.major {
|
||||
@extend .s-btn.major;
|
||||
&:hover {
|
||||
@extend .s-btn.major:hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.contents.l-dialog {
|
||||
|
||||
@ -19,7 +19,18 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
@import "compass";
|
||||
@import "compass/reset";
|
||||
@import "compass/css3";
|
||||
@import "compass/utilities";
|
||||
|
||||
@import "constants";
|
||||
@import "mobile/constants";
|
||||
|
||||
@import "mixins";
|
||||
@import "forms/mixins";
|
||||
@import "mobile/mixins";
|
||||
|
||||
@import "themes/theme-espresso";
|
||||
@import "main";
|
||||
@ -21,4 +21,10 @@
|
||||
*****************************************************************************/
|
||||
/* CONSTANTS */
|
||||
//$colorBodyBg: #fff;
|
||||
//$colorBodyFg: #666;
|
||||
//$colorBodyFg: #666;
|
||||
|
||||
/*
|
||||
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
background: red;
|
||||
display: inline-block;
|
||||
}*/
|
||||
|
||||
@ -47,6 +47,8 @@
|
||||
}
|
||||
&.frame-template {
|
||||
.view-switcher {
|
||||
font-size: 80%;
|
||||
height: $ohH;
|
||||
line-height: $ohH;
|
||||
z-index: 10;
|
||||
}
|
||||
@ -64,7 +66,7 @@
|
||||
}
|
||||
.view-switcher {
|
||||
// Hide the name when the view switcher is in a frame context
|
||||
.name {
|
||||
.title-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -299,19 +299,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.object-browse-bar .btn,
|
||||
.object-browse-bar .t-btn,
|
||||
.object-browse-bar .view-switcher,
|
||||
.top-bar .buttons-main .btn,
|
||||
.top-bar .buttons-main .t-btn,
|
||||
.top-bar .view-switcher,
|
||||
.tool-bar .btn,
|
||||
.tool-bar .t-btn {
|
||||
$h: $btnToolbarH;
|
||||
display: inline-block;
|
||||
font-size: $h * $btnFontSizeToH;
|
||||
line-height: 200%;
|
||||
vertical-align: top;
|
||||
.object-browse-bar .s-btn,
|
||||
.top-bar .buttons-main .s-btn,
|
||||
.top-bar .s-menu,
|
||||
.tool-bar .s-btn,
|
||||
.tool-bar .s-menu {
|
||||
$h: $btnToolbarH;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.object-browse-bar,
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<a class="btn s-btn s-icon-btn s-very-subtle key-{{parameters.action.getMetadata().key}}"
|
||||
<a class="s-btn key-{{parameters.action.getMetadata().key}}"
|
||||
ng-class="{ labeled: parameters.labeled }"
|
||||
title="{{parameters.action.getMetadata().description}}"
|
||||
ng-click="parameters.action.perform()">
|
||||
|
||||
@ -20,17 +20,16 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<span ng-controller="ActionGroupController">
|
||||
|
||||
<span ng-repeat="action in ungrouped">
|
||||
<mct-include key="'action-button'" parameters="{ action: action }">
|
||||
</mct-include>
|
||||
<mct-include key="'action-button'" parameters="{ action: action }"></mct-include>
|
||||
</span>
|
||||
|
||||
<span class="btn-set" ng-repeat="group in groups">
|
||||
<span class="l-btn-set" ng-repeat="group in groups">
|
||||
<span ng-repeat="action in group">
|
||||
<mct-include key="'action-button'" parameters="{ action: action }">
|
||||
<mct-include key="'action-button'"
|
||||
parameters="{ action: action }"
|
||||
ng-class="{ first:$index == 0, last:$index == group.length - 1 }"
|
||||
>
|
||||
</mct-include>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
</span>
|
||||
@ -21,7 +21,7 @@
|
||||
-->
|
||||
<span ng-controller="ViewSwitcherController">
|
||||
<div
|
||||
class="view-switcher menu-element s-btn l-btn btn-menu dropdown click-invoke"
|
||||
class="view-switcher menu-element s-menu"
|
||||
ng-if="view.length > 1"
|
||||
ng-controller="ClickAwayController as toggle"
|
||||
>
|
||||
@ -33,11 +33,9 @@
|
||||
></span>
|
||||
|
||||
<span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span>
|
||||
<span class="name">{{ngModel.selected.name}}</span>
|
||||
<span class='ui-symbol invoke-menu'>v</span>
|
||||
<span class="title-label">{{ngModel.selected.name}}</span>
|
||||
|
||||
|
||||
<div class="menu dropdown" ng-show="toggle.isActive()">
|
||||
<div class="menu" ng-show="toggle.isActive()">
|
||||
<ul>
|
||||
<li ng-repeat="option in view"
|
||||
ng-click="ngModel.selected = option; toggle.setState(false)">
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div class="menu-element context-menu-wrapper mobile-disable-select" ng-controller="ContextMenuController">
|
||||
<div class="menu context-menu dropdown">
|
||||
<div class="menu context-menu">
|
||||
<ul>
|
||||
|
||||
<li ng-repeat="menuAction in menuActions"
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
ng-show="false && showLocalControls"
|
||||
>
|
||||
<a
|
||||
class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
|
||||
class="s-btn"
|
||||
ng-click="plot.stepBackPanZoom()"
|
||||
ng-show="1"
|
||||
title="Restore previous pan/zoom">
|
||||
@ -18,7 +18,7 @@
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
|
||||
class="s-btn"
|
||||
ng-click="plot.unzoom()"
|
||||
ng-show="1"
|
||||
title="Reset pan/zoom">
|
||||
@ -36,7 +36,7 @@
|
||||
<div class="l-image-main-controlbar l-flex bar">
|
||||
<div class="left">
|
||||
<a
|
||||
class="t-btn l-btn s-btn s-icon-btn s-very-subtle show-thumbs sm"
|
||||
class="s-btn show-thumbs sm hidden"
|
||||
ng-click="showThumbsBubble = (showThumbsBubble)? false:true"
|
||||
><span class="ui-symbol icon"></span></a>
|
||||
<span class="l-timezone">{{imagery.getZone()}}</span>
|
||||
@ -45,7 +45,7 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
<a
|
||||
class="t-btn l-btn s-btn s-icon-btn s-very-subtle pause-play sm"
|
||||
class="s-btn pause-play"
|
||||
ng-click="imagery.paused(!imagery.paused())"
|
||||
ng-class="{ paused: imagery.paused() }"
|
||||
><span class="ui-symbol icon"></span></a>
|
||||
@ -53,10 +53,10 @@
|
||||
ng-if="imagery.getImageUrl()"
|
||||
target="_blank"
|
||||
title="Open image in new tab."
|
||||
class="t-btn l-btn s-btn s-icon-btn s-very-subtle sm">
|
||||
class="s-btn">
|
||||
<span class="ui-symbol icon">y</span></a>
|
||||
<a href=""
|
||||
class="l-btn s-btn s-icon-btn l-mag s-mag ui-symbol vsm"
|
||||
class="s-btn l-mag s-mag ui-symbol vsm"
|
||||
ng-click="clipped = false"
|
||||
ng-show="clipped === true"
|
||||
title="Not all of image is visible; click to reset."
|
||||
|
||||
@ -85,7 +85,7 @@
|
||||
},
|
||||
{
|
||||
"property": "fill",
|
||||
"glyph": "\u00E0",
|
||||
"glyph": "\ue606",
|
||||
"control": "color"
|
||||
},
|
||||
{
|
||||
|
||||
@ -105,23 +105,21 @@
|
||||
ng-show="representation.showControls"
|
||||
style="position: absolute; top: 8px; right: 8px;">
|
||||
|
||||
<a href=""
|
||||
class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
|
||||
<a class="s-btn"
|
||||
ng-click="plot.stepBackPanZoom()"
|
||||
ng-show="plot.isZoomed()"
|
||||
title="Restore previous pan/zoom">
|
||||
<span class="ui-symbol icon"><</span>
|
||||
</a>
|
||||
|
||||
<a href=""
|
||||
class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
|
||||
<a class="s-btn"
|
||||
ng-click="plot.unzoom()"
|
||||
ng-show="plot.isZoomed()"
|
||||
title="Reset pan/zoom">
|
||||
<span class="ui-symbol icon">I</span>
|
||||
</a>
|
||||
|
||||
<div class="menu-element btn s-very-subtle btn-menu dropdown menus-to-left"
|
||||
<div class="menu-element s-menu menus-to-left"
|
||||
ng-if="plot.getModeOptions().length > 1"
|
||||
ng-controller="ClickAwayController as toggle">
|
||||
|
||||
@ -129,9 +127,8 @@
|
||||
|
||||
<span class="ui-symbol icon type-icon">{{plot.getMode().glyph}}</span>
|
||||
<span>{{plot.getMode().name}}</span>
|
||||
<span class='ui-symbol invoke-menu'>v</span>
|
||||
|
||||
<div class="menu dropdown" ng-show="toggle.isActive()">
|
||||
<div class="menu" ng-show="toggle.isActive()">
|
||||
<ul>
|
||||
<li ng-repeat="option in plot.getModeOptions()">
|
||||
<a href="" ng-click="plot.setMode(option); toggle.setState(false)">
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<a class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
|
||||
<a class="s-btn"
|
||||
ng-class="{ labeled: structure.text }"
|
||||
ng-click="structure.click()">
|
||||
<span class="ui-symbol icon">
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div
|
||||
class="t-btn l-btn s-btn s-icon-btn s-very-subtle btn-menu menu-element dropdown click-invoke t-color-palette"
|
||||
class="t-btn l-btn s-btn s-icon-btn s-menu menu-element t-color-palette"
|
||||
ng-controller="ClickAwayController as toggle"
|
||||
>
|
||||
|
||||
@ -30,11 +30,9 @@
|
||||
<span class="title-label" ng-if="structure.text">
|
||||
{{structure.text}}
|
||||
</span>
|
||||
<span class='ui-symbol invoke-menu' ng-if="!structure.text">v</span>
|
||||
|
||||
|
||||
<div
|
||||
class="menu dropdown l-color-palette"
|
||||
class="menu l-color-palette"
|
||||
ng-controller="ColorController as colors"
|
||||
ng-show="toggle.isActive()"
|
||||
>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div class="t-btn l-btn s-btn s-icon-btn s-very-subtle btn-menu menu-element dropdown click-invoke"
|
||||
<div class="s-menu menu-element"
|
||||
ng-controller="ClickAwayController as toggle">
|
||||
|
||||
<span class="l-click-area" ng-click="toggle.toggle()"></span>
|
||||
@ -28,12 +28,8 @@
|
||||
<span class="title-label" ng-if="structure.text">
|
||||
{{structure.text}}
|
||||
</span>
|
||||
<span class='ui-symbol invoke-menu'
|
||||
ng-if="!structure.text">
|
||||
v
|
||||
</span>
|
||||
|
||||
<div class="menu dropdown" ng-show="toggle.isActive()">
|
||||
<div class="menu" ng-show="toggle.isActive()">
|
||||
<ul>
|
||||
<li ng-click="structure.click(option.key); toggle.setState(false)" ng-repeat="option in structure.options">
|
||||
<a href="">
|
||||
|
||||
@ -105,7 +105,7 @@
|
||||
|
||||
<!-- Load more button -->
|
||||
<div ng-if="controller.areMore()">
|
||||
<a class="load-more-button btn very-subtle vsm"
|
||||
<a class="load-more-button s-btn vsm"
|
||||
ng-click="controller.loadMore()">
|
||||
More Results
|
||||
</a>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user