ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-24 21:10:05 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'github/open117' into open115b

Browse Source
This commit is contained in:
Victor Woeltjen 2015-09-25 15:31:27 -07:00
commit 00aa6821d1
27 changed files with 1799 additions and 1308 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/browse/res/templates/create/create-button.html
View File

@ -20,7 +20,7 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div class="menu-element wrapper" ng-controller="ClickAwayController as createController"> <div class="menu-element wrapper" ng-controller="ClickAwayController as createController">
<div class="s-menu major create-btn" ng-click="createController.toggle()"> <div class="s-menu-btn major create-btn" ng-click="createController.toggle()">
<span class="ui-symbol icon type-icon">&#x2b;</span> <span class="ui-symbol icon type-icon">&#x2b;</span>
<span class="title-label">Create</span> <span class="title-label">Create</span>
</div> </div>

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

@ -40,11 +40,11 @@
/************************** HTML ENTITIES */ /************************** HTML ENTITIES */
a { a {
color: #ccc; color: $colorA;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: #fff; color: $colorAHov;
} }
} }

8
platform/commonUI/general/res/sass/_icons.scss
View File

@ -29,6 +29,9 @@
} }
.ui-symbol { .ui-symbol {
&.type-icon {
color: $colorObjHdrIc;
}
&.icon { &.icon {
color: $colorKey; color: $colorKey;
&.alert { &.alert {
@ -41,6 +44,9 @@
font-size: 1.65em; font-size: 1.65em;
} }
} }
&.icon-calendar:after {
content: "\e605";
}
} }
.bar .ui-symbol { .bar .ui-symbol {
@ -52,7 +58,7 @@
display: inline-block; display: inline-block;
} }
.s-menu .invoke-menu, .s-menu-btn .invoke-menu,
.icon.major .invoke-menu { .icon.major .invoke-menu {
margin-left: $interiorMarginSm; margin-left: $interiorMarginSm;
} }

9
platform/commonUI/general/res/sass/_mixins.scss
View File

@ -347,9 +347,10 @@
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */ /* This doesn't work on an element inside an element with absolute positioning that has height: auto */
//position: relative; //position: relative;
top: 50%; top: 50%;
-webkit-transform: translateY(-50%); @include webkitProp(transform, translateY(-50%));
-ms-transform: translateY(-50%); //-webkit-transform: translateY(-50%);
transform: translateY(-50%); //-ms-transform: translateY(-50%);
//transform: translateY(-50%);
} }
@mixin verticalCenterBlock($holderH, $itemH) { @mixin verticalCenterBlock($holderH, $itemH) {
@ -389,7 +390,7 @@
} }
@mixin test($c: #ffcc00, $a: 0.2) { @mixin test($c: #ffcc00, $a: 0.2) {
background-color: rgba($c, $a); background-color: rgba($c, $a) !important;
} }
@mixin tmpBorder($c: #ffcc00, $a: 0.75) { @mixin tmpBorder($c: #ffcc00, $a: 0.75) {

142
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@ -205,7 +205,7 @@ label.checkbox.custom {
} }
} }
.s-menu label.checkbox.custom { .s-menu-btn label.checkbox.custom {
margin-left: 5px; margin-left: 5px;
} }
@ -299,18 +299,24 @@ label.checkbox.custom {
$slotH: 50%; $slotH: 50%;
.slot { .slot {
// @include border-radius($basicCr * .75); // @include border-radius($basicCr * .75);
@include sliderTrack(); //@include sliderTrack();
height: $slotH; //height: $slotH;
width: auto; width: auto;
position: absolute; position: absolute;
top: ($knobH - $slotH) / 2; //top: ($knobH - $slotH) / 2;
top: 0;
right: 0; right: 0;
bottom: auto; bottom: 0;
left: 0; left: 0;
} }
.knob { .knob {
@include btnSubtle(); //@include btnSubtle();
@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid); //@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
@include trans-prop-nice-fade(.25s);
background-color: $sliderColorKnob;
&:hover {
background-color: $sliderColorKnobHov;
}
cursor: ew-resize; cursor: ew-resize;
position: absolute; position: absolute;
height: $knobH; height: $knobH;
@ -319,25 +325,129 @@ label.checkbox.custom {
auto: 0; auto: 0;
bottom: auto; bottom: auto;
left: auto; left: auto;
&:before { //&:before {
top: 1px; // top: 1px;
bottom: 3px; // bottom: 3px;
left: ($knobW / 2) - 1; // left: ($knobW / 2) - 1;
} //}
} }
.range { .range {
background: rgba($colorKey, 0.6); $tbOffset: 2px;
@include trans-prop-nice-fade(.25s);
background-color: $sliderColorRange;
cursor: ew-resize; cursor: ew-resize;
position: absolute; position: absolute;
top: 0; top: 0; //$tbOffset;
right: auto; right: auto;
bottom: 0; bottom: $tbOffset;
left: auto; left: auto;
height: auto; height: auto;
width: auto; width: auto;
&:hover { &:hover {
background: rgba($colorKey, 0.7); background-color: $sliderColorRangeHov;
}
}
}
/******************************************************** DATETIME PICKER */
.l-datetime-picker {
$r1H: 15px;
@include user-select(none);
font-size: 0.8rem;
padding: $interiorMarginLg !important;
width: 230px;
.l-month-year-pager {
$pagerW: 20px;
//@include test();
font-size: 0.8rem;
height: $r1H;
margin-bottom: $interiorMargin;
position: relative;
.pager,
.val {
//@include test(red);
@extend .abs;
}
.pager {
width: $pagerW;
@extend .ui-symbol;
&.prev {
right: auto;
&:before {
content: "\3c";
}
}
&.next {
left: auto;
text-align: right;
&:before {
content: "\3e";
}
}
}
.val {
text-align: center;
left: $pagerW + $interiorMargin;
right: $pagerW + $interiorMargin;
}
}
.l-calendar,
.l-time-selects {
border-top: 1px solid $colorInteriorBorder
}
.l-time-selects {
line-height: $formInputH;
}
}
/******************************************************** CALENDAR */
.l-calendar {
$colorMuted: pushBack($colorMenuFg, 30%);
ul.l-cal-row {
@include display-flex;
@include flex-flow(row nowrap);
margin-top: 1px;
&:first-child {
margin-top: 0;
}
li {
@include flex(1 0);
//@include test();
margin-left: 1px;
padding: $interiorMargin;
text-align: center;
&:first-child {
margin-left: 0;
}
}
&.l-header li {
color: $colorMuted;
}
&.l-body li {
@include trans-prop-nice(background-color, .25s);
cursor: pointer;
&.in-month {
background-color: $colorCalCellInMonthBg;
}
.sub {
color: $colorMuted;
font-size: 0.8em;
}
&.selected {
background: $colorCalCellSelectedBg;
color: $colorCalCellSelectedFg;
.sub {
color: inherit;
}
}
&:hover {
background-color: $colorCalCellHovBg;
color: $colorCalCellHovFg;
.sub {
color: inherit;
}
}
} }
} }
} }

318
platform/commonUI/general/res/sass/controls/_menus.scss
View File

@ -20,7 +20,7 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/******************************************************** MENU BUTTONS */ /******************************************************** MENU BUTTONS */
.s-menu { .s-menu-btn {
// Formerly .btn-menu // Formerly .btn-menu
@extend .s-btn; @extend .s-btn;
span.l-click-area { span.l-click-area {
@ -62,186 +62,192 @@
/******************************************************** MENUS THEMSELVES */ /******************************************************** MENUS THEMSELVES */
.menu-element { .menu-element {
$bg: $colorMenuBg;
$fg: $colorMenuFg;
$ic: $colorMenuIc;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
.menu { }
@include border-radius($basicCr);
@include containerSubtle($bg, $fg);
@include boxShdw($shdwMenu);
@include txtShdw($shdwMenuText);
display: block; // set to block via jQuery
padding: $interiorMarginSm 0;
position: absolute;
z-index: 10;
ul {
@include menuUlReset();
li {
@include box-sizing(border-box);
border-top: 1px solid lighten($bg, 20%);
color: pullForward($bg, 60%);
line-height: $menuLineH;
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
position: relative;
white-space: nowrap;
&:first-child {
border: none;
}
&:hover {
background: $colorMenuHovBg;
color: $colorMenuHovFg;
.icon {
color: $colorMenuHovIc;
}
}
.type-icon {
left: $interiorMargin * 2;
}
}
}
}
.menu, .s-menu {
.context-menu, @include border-radius($basicCr);
.super-menu { @include containerSubtle($colorMenuBg, $colorMenuFg);
pointer-events: auto; @include boxShdw($shdwMenu);
ul li { @include txtShdw($shdwMenuText);
//padding-left: 25px; padding: $interiorMarginSm 0;
a { }
color: $fg;
}
.icon {
color: $ic;
}
.type-icon {
left: $interiorMargin;
}
&:hover .icon {
//color: lighten($ic, 5%);
}
}
}
.checkbox-menu { .menu {
// Used in search dropdown in tree @extend .s-menu;
@extend .context-menu; display: block;
ul li { position: absolute;
padding-left: 50px; z-index: 10;
.checkbox { ul {
$d: 0.7rem; @include menuUlReset();
position: absolute; li {
left: $interiorMargin;
top: ($menuLineH - $d) / 1.5;
em {
height: $d;
width: $d;
&:before {
font-size: 7px !important;// $d/2;
height: $d;
width: $d;
line-height: $d;
}
}
}
.type-icon {
left: 25px;
}
}
}
.super-menu {
$w: 500px;
$h: $w - 20;
$plw: 50%;
$prw: 50%;
display: block;
width: $w;
height: $h;
.contents {
@include absPosDefault($interiorMargin);
}
.pane {
@include box-sizing(border-box); @include box-sizing(border-box);
&.left { border-top: 1px solid lighten($colorMenuBg, 20%);
//@include test(); color: pullForward($colorMenuBg, 60%);
border-right: 1px solid pullForward($colorMenuBg, 10%); line-height: $menuLineH;
left: 0; padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
padding-right: $interiorMargin; position: relative;
right: auto; white-space: nowrap;
width: $plw; &:first-child {
overflow-x: hidden; border: none;
overflow-y: auto; }
ul { &:hover {
li { background: $colorMenuHovBg;
@include border-radius($controlCr); color: $colorMenuHovFg;
padding-left: 30px; .icon {
border-top: none; color: $colorMenuHovIc;
}
} }
} }
&.right { .type-icon {
//@include test(red); left: $interiorMargin * 2;
left: auto;
right: 0;
padding: $interiorMargin * 5;
width: $prw;
} }
} }
.menu-item-description {
.desc-area {
&.icon {
$h: 150px;
color: $colorCreateMenuLgIcon;
position: relative;
font-size: 8em;
left: 0;
height: $h;
line-height: $h;
margin-bottom: $interiorMargin * 5;
text-align: center;
}
&.title {
color: $colorCreateMenuText;
font-size: 1.2em;
margin-bottom: 0.5em;
}
&.description {
//color: lighten($bg, 30%);
color: $colorCreateMenuText;
font-size: 0.8em;
line-height: 1.5em;
}
}
}
}
.context-menu {
font-size: 0.80rem;
} }
} }
.context-menu-holder { .menu,
pointer-events: none; .context-menu,
.super-menu {
pointer-events: auto;
ul li {
//padding-left: 25px;
a {
color: $colorMenuFg;
}
.icon {
color: $colorMenuIc;
}
.type-icon {
left: $interiorMargin;
}
&:hover .icon {
//color: lighten($colorMenuIc, 5%);
}
}
}
.checkbox-menu {
// Used in search dropdown in tree
@extend .context-menu;
ul li {
padding-left: 50px;
.checkbox {
$d: 0.7rem;
position: absolute;
left: $interiorMargin;
top: ($menuLineH - $d) / 1.5;
em {
height: $d;
width: $d;
&:before {
font-size: 7px !important;// $d/2;
height: $d;
width: $d;
line-height: $d;
}
}
}
.type-icon {
left: 25px;
}
}
}
.super-menu {
$w: 500px;
$h: $w - 20;
$plw: 50%;
$prw: 50%;
display: block;
width: $w;
height: $h;
.contents {
@include absPosDefault($interiorMargin);
}
.pane {
@include box-sizing(border-box);
&.left {
//@include test();
border-right: 1px solid pullForward($colorMenuBg, 10%);
left: 0;
padding-right: $interiorMargin;
right: auto;
width: $plw;
overflow-x: hidden;
overflow-y: auto;
ul {
li {
@include border-radius($controlCr);
padding-left: 30px;
border-top: none;
}
}
}
&.right {
//@include test(red);
left: auto;
right: 0;
padding: $interiorMargin * 5;
width: $prw;
}
}
.menu-item-description {
.desc-area {
&.icon {
$h: 150px;
color: $colorCreateMenuLgIcon;
position: relative;
font-size: 8em;
left: 0;
height: $h;
line-height: $h;
margin-bottom: $interiorMargin * 5;
text-align: center;
}
&.title {
color: $colorCreateMenuText;
font-size: 1.2em;
margin-bottom: 0.5em;
}
&.description {
//color: lighten($colorMenuBg, 30%);
color: $colorCreateMenuText;
font-size: 0.8em;
line-height: 1.5em;
}
}
}
}
.context-menu {
font-size: 0.80rem;
}
.context-menu-holder,
.menu-holder {
position: absolute; position: absolute;
height: 200px;
width: 170px;
z-index: 70; z-index: 70;
.context-menu-wrapper { .context-menu-wrapper {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
.context-menu {
}
} }
&.go-left .context-menu { &.go-left .context-menu,
&.go-left .menu {
right: 0; right: 0;
} }
&.go-up .context-menu { &.go-up .context-menu,
&.go-up .menu {
bottom: 0; bottom: 0;
} }
} }
.context-menu-holder {
pointer-events: none;
height: 200px;
width: 170px;
}
.btn-bar.right .menu, .btn-bar.right .menu,
.menus-to-left .menu { .menus-to-left .menu {
left: auto; left: auto;

103
platform/commonUI/general/res/sass/controls/_time-controller.scss
View File

@ -1,13 +1,15 @@
.l-time-controller { .l-time-controller {
$inputTxtW: 90px; $minW: 400px;
$knobW: 9px; $knobM: ($sliderKnobW + 1) * -1;
$r1H: 20px; $rangeValOffset: $interiorMargin + $sliderKnobW;
$r2H: 30px; $knobCr: $sliderKnobW;
$r3H: 10px; //@if $sliderKnobW > 3 {
// $knobCr: $sliderKnobW / 2;
position: relative; //}
margin: $interiorMarginLg 0; $timeRangeSliderLROffset: 130px + $sliderKnobW;
min-width: 400px; $r1H: 33px;
$r2H: 20px;
$r3H: 20px;
.l-time-range-inputs-holder, .l-time-range-inputs-holder,
.l-time-range-slider { .l-time-range-slider {
@ -18,8 +20,11 @@
.l-time-range-slider-holder, .l-time-range-slider-holder,
.l-time-range-ticks-holder .l-time-range-ticks-holder
{ {
margin-bottom: $interiorMargin; //@include test();
position: relative; @include absPosDefault(0, visible);
@include box-sizing(border-box);
min-width: $minW;
top: auto;
} }
.l-time-range-slider, .l-time-range-slider,
.l-time-range-ticks { .l-time-range-ticks {
@ -28,45 +33,65 @@
} }
.l-time-range-inputs-holder { .l-time-range-inputs-holder {
height: $r1H; //@include test(red);
height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2);
padding-top: $interiorMargin;
border-top: 1px solid $colorInteriorBorder;
.type-icon {
font-size: 120%;
vertical-align: middle;
}
.l-time-range-input,
.l-time-range-inputs-elem {
margin-right: $interiorMargin;
.lbl {
color: $colorPlotLabelFg;
}
.ui-symbol.icon {
font-size: 11px;
width: 11px;
}
}
} }
.l-time-range-slider, .l-time-range-slider,
.l-time-range-ticks { .l-time-range-ticks {
left: $inputTxtW; right: $inputTxtW; left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset;
} }
.l-time-range-slider-holder { .l-time-range-slider-holder {
height: $r2H; //@include test(green);
height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
.range-holder { .range-holder {
@include box-shadow(none); @include box-shadow(none);
background: none; background: none;
border: none; border: none;
height: 75%;
} }
} }
.l-time-range-ticks-holder { .l-time-range-ticks-holder {
height: $r3H; height: $r3H;
.l-time-range-ticks { .l-time-range-ticks {
border-top: 1px solid $colorInteriorBorder; border-top: 1px solid $colorTick;
.tick { .tick {
background-color: $colorInteriorBorder; background-color: $colorTick;
border:none; border:none;
height: 5px;
width: 1px; width: 1px;
margin-left: -1px; margin-left: -1px;
position: absolute;
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;
} }
.l-time-range-tick-label { .l-time-range-tick-label {
color: lighten($colorInteriorBorder, 20%); @include webkitProp(transform, translateX(-50%));
color: $colorPlotLabelFg;
display: inline-block;
font-size: 0.7em; font-size: 0.7em;
position: absolute; position: absolute;
margin-left: -0.5 * $tickLblW; top: 8px;
text-align: center; white-space: nowrap;
top: $r3H;
width: $tickLblW;
z-index: 2; z-index: 2;
} }
} }
@ -74,31 +99,43 @@
} }
.knob { .knob {
width: $knobW; width: $sliderKnobW;
.range-value { .range-value {
$w: 75px; //@include test($sliderColorRange);
//@include test(); @include trans-prop-nice-fade(.25s);
position: absolute; position: absolute;
top: 50%; height: $r2H;
margin-top: -7px; // Label is 13px high line-height: $r2H;
white-space: nowrap; white-space: nowrap;
width: $w;
} }
&:hover .range-value { &:hover .range-value {
color: $colorKey; color: $sliderColorKnobHov;
} }
&.knob-l { &.knob-l {
margin-left: $knobW / -2; @include border-bottom-left-radius($knobCr);
margin-left: $knobM;
.range-value { .range-value {
text-align: right; text-align: right;
right: $knobW + $interiorMargin; right: $rangeValOffset;
} }
} }
&.knob-r { &.knob-r {
margin-right: $knobW / -2; @include border-bottom-right-radius($knobCr);
margin-right: $knobM;
.range-value { .range-value {
left: $knobW + $interiorMargin; left: $rangeValOffset;
} }
} }
} }
}
//.slot.range-holder {
// background-color: $sliderColorRangeHolder;
//}
.s-time-range-val {
//@include test();
@include border-radius($controlCr);
background-color: $colorInputBg;
padding: 1px 1px 0 $interiorMargin;
} }

33
platform/commonUI/general/res/sass/forms/_datetime.scss
View File

@ -19,39 +19,44 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
@mixin complexFieldHolder($myW) {
width: $myW + $interiorMargin;
input[type="text"] {
width: $myW;
}
}
.complex.datetime { .complex.datetime {
span { span {
display: inline-block; display: inline-block;
margin-right: $interiorMargin; margin-right: $interiorMargin;
} }
/*
.field-hints, .field-hints,
.fields { .fields {
} }
.field-hints { .field-hints {
} }
*/
.fields { .fields {
margin-top: $interiorMarginSm 0; margin-top: $interiorMarginSm 0;
padding: $interiorMarginSm 0; padding: $interiorMarginSm 0;
} }
.date { .date {
$myW: 80px; @include complexFieldHolder(80px);
width: $myW + $interiorMargin; }
input {
width: $myW; .time.md {
} @include complexFieldHolder(60px);
} }
.time.sm { .time.sm {
$myW: 40px; @include complexFieldHolder(40px);
width: $myW + $interiorMargin;
input {
width: $myW;
}
} }
} }

10
platform/commonUI/general/res/sass/forms/_selects.scss
View File

@ -21,10 +21,13 @@
*****************************************************************************/ *****************************************************************************/
.select { .select {
@include btnSubtle($colorSelectBg); @include btnSubtle($colorSelectBg);
margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers @if $shdwBtns != none {
margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
}
padding: 0 $interiorMargin; padding: 0 $interiorMargin;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
line-height: $formInputH;
select { select {
@include appearance(none); @include appearance(none);
@include box-sizing(border-box); @include box-sizing(border-box);
@ -40,11 +43,8 @@
} }
&:after { &:after {
@include contextArrow(); @include contextArrow();
pointer-events: none;
color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent)); color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
//content:"v";
//display: block;
//font-family: 'symbolsfont';
//pointer-events: none;
position: absolute; position: absolute;
right: $interiorMargin; top: 0; right: $interiorMargin; top: 0;
} }

8
platform/commonUI/general/res/sass/lists/_tabular.scss
View File

@ -40,6 +40,11 @@ table {
thead, .thead { thead, .thead {
border-bottom: 1px solid $colorTabHeaderBorder; border-bottom: 1px solid $colorTabHeaderBorder;
} }
&:not(.fixed-header) tr th {
background-color: $colorTabHeaderBg;
}
tbody, .tbody { tbody, .tbody {
display: table-row-group; display: table-row-group;
tr, .tr { tr, .tr {
@ -64,7 +69,6 @@ table {
display: table-cell; display: table-cell;
} }
th, .th { th, .th {
background-color: $colorTabHeaderBg;
border-left: 1px solid $colorTabHeaderBorder; border-left: 1px solid $colorTabHeaderBorder;
color: $colorTabHeaderFg; color: $colorTabHeaderFg;
padding: $tabularTdPadLR $tabularTdPadLR; padding: $tabularTdPadLR $tabularTdPadLR;
@ -143,7 +147,7 @@ table {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: $tabularHeaderH; height: $tabularHeaderH;
background: rgba(#fff, 0.15); background-color: $colorTabHeaderBg;
} }
} }
tbody, .tbody { tbody, .tbody {

2
platform/commonUI/general/res/sass/plots/_plots-main.scss
View File

@ -89,7 +89,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
.gl-plot-label, .gl-plot-label,
.l-plot-label { .l-plot-label {
// @include test(yellow); // @include test(yellow);
color: lighten($colorBodyFg, 20%); color: $colorPlotLabelFg;
position: absolute; position: absolute;
text-align: center; text-align: center;
// text-transform: uppercase; // text-transform: uppercase;

4
platform/commonUI/general/res/sass/user-environ/_frame.scss
View File

@ -47,7 +47,7 @@
} }
&.frame-template { &.frame-template {
.s-btn, .s-btn,
.s-menu { .s-menu-btn {
height: $ohH; height: $ohH;
line-height: $ohH; line-height: $ohH;
padding: 0 $interiorMargin; padding: 0 $interiorMargin;
@ -56,7 +56,7 @@
} }
} }
.s-menu:after { .s-menu-btn:after {
font-size: 8px; font-size: 8px;
} }

4
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@ -301,9 +301,9 @@
.object-browse-bar .s-btn, .object-browse-bar .s-btn,
.top-bar .buttons-main .s-btn, .top-bar .buttons-main .s-btn,
.top-bar .s-menu, .top-bar .s-menu-btn,
.tool-bar .s-btn, .tool-bar .s-btn,
.tool-bar .s-menu { .tool-bar .s-menu-btn {
$h: $btnToolbarH; $h: $btnToolbarH;
height: $h; height: $h;
line-height: $h; line-height: $h;

81
platform/commonUI/general/res/templates/controls/datetime-picker.html
View File

@ -20,42 +20,47 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div ng-controller="DateTimePickerController"> <div ng-controller="DateTimePickerController" class="l-datetime-picker s-datetime-picker s-menu">
<div style="vertical-align: top; display: inline-block"> <div class="holder">
<div style="text-align: center;"> <div class="l-month-year-pager">
<a ng-click="changeMonth(-1)">&lt;</a> <a class="pager prev" ng-click="changeMonth(-1)"></a>
{{month}} {{year}} <span class="val">{{month}} {{year}}</span>
<a ng-click="changeMonth(1)">&gt;</a> <a class="pager next" ng-click="changeMonth(1)"></a>
</div> </div>
<div> <div class="l-calendar">
<table> <ul class="l-cal-row l-header">
<tr> <li ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']">{{day}}</li>
<th ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']"> </ul>
{{day}} <ul class="l-cal-row l-body" ng-repeat="row in table">
</th> <li ng-repeat="cell in row"
</tr> ng-click="select(cell)"
<tr ng-repeat="row in table"> ng-class='{ "in-month": isInCurrentMonth(cell), selected: isSelected(cell) }'>
<td style="text-align: center;" <div class="prime">{{cell.day}}</div>
ng-repeat="cell in row" <div class="sub">{{cell.dayOfYear}}</div>
ng-click="select(cell)" </li>
ng-class='{ </ul>
disabled: !isSelectable(cell), </div>
test: isSelected(cell) </div>
}'> <div class="l-time-selects complex datetime"
<div>{{cell.day}}</div> ng-show="options">
<div style="font-size: 80%">{{cell.dayOfYear}}</div> <div class="field-hints">
</td> <span class="hint time md"
</tr> ng-repeat="key in ['hours', 'minutes', 'seconds']"
</table> ng-if="options[key]">
</div> {{nameFor(key)}}
</div> </span>
<div style="vertical-align: top; display: inline-block" </div>
ng-repeat="key in ['hours', 'minutes', 'seconds']" <div>
ng-if="options[key]"> <span class="field control time md"
<div>{{nameFor(key)}}</div> ng-repeat="key in ['hours', 'minutes', 'seconds']"
<select size="10" ng-if="options[key]">
ng-model="time[key]" <div class='form-control select'>
ng-options="i for i in optionsFor(key)"> <select size="1"
</select> ng-model="time[key]"
</div> ng-options="i for i in optionsFor(key)">
</select>
</div>
</span>
</div>
</div>
</div> </div>

2
platform/commonUI/general/res/templates/controls/switcher.html
View File

@ -21,7 +21,7 @@
--> -->
<span ng-controller="ViewSwitcherController"> <span ng-controller="ViewSwitcherController">
<div <div
class="view-switcher menu-element s-menu" class="view-switcher menu-element s-menu-btn"
ng-if="view.length > 1" ng-if="view.length > 1"
ng-controller="ClickAwayController as toggle" ng-controller="ClickAwayController as toggle"
> >

145
platform/commonUI/general/res/templates/controls/time-controller.html
View File

@ -19,78 +19,83 @@
this source code distribution or the Licensing information page available this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<!-- MINE -->
<div class="l-time-controller" ng-controller="TimeRangeController"> <div class="l-time-controller" ng-controller="TimeRangeController">
<div class="l-time-range-inputs-holder"> <div class="l-time-range-inputs-holder">
Start: {{startOuterText}} <span class="l-time-range-inputs-elem ui-symbol type-icon">&#x43;</span>
<span ng-controller="ToggleController as t"> <span class="l-time-range-input" ng-controller="ToggleController as t1">
<a class="ui-symbol" ng-click="t.toggle()">p</a> <!--<span class="lbl">Start</span>-->
<mct-popup ng-if="t.isActive()"> <span class="s-btn time-range-start" ng-click="t1.toggle()">
<div style="background: #222;" <span class="val">{{startOuterText}}</span>
mct-click-elsewhere="t.setState(false)"> <a class="ui-symbol icon icon-calendar"></a>
<mct-control key="'datetime-picker'" <mct-popup ng-if="t1.isActive()">
ng-model="ngModel.outer" <div mct-click-elsewhere="t1.setState(false)">
field="'start'" <mct-control key="'datetime-picker'"
options="{ hours: true }"> ng-model="ngModel.outer"
</mct-control> field="'start'"
</div> options="{ hours: true }">
</mct-popup> </mct-control>
</span> </div>
</mct-popup>
</span>
</span>
End: {{endOuterText}} <span class="l-time-range-inputs-elem lbl">to</span>
<span ng-controller="ToggleController as t2">
<a class="ui-symbol" ng-click="t2.toggle()">p</a>
<mct-popup ng-if="t2.isActive()">
<div style="background: #222;"
mct-click-elsewhere="t2.setState(false)">
<mct-control key="'datetime-picker'"
ng-model="ngModel.outer"
field="'end'"
options="{ hours: true }">
</mct-control>
</div>
</mct-popup>
</span>
<span class="l-time-range-input" ng-controller="ToggleController as t2">
<!--<span class="lbl">End</span>-->
<span class="s-btn l-time-range-input" ng-click="t2.toggle()">
<span class="val">{{endOuterText}}</span>
<a class="ui-symbol icon icon-calendar"></a>
<mct-popup ng-if="t2.isActive()">
<div mct-click-elsewhere="t2.setState(false)" class="xmenu-holder go-up">
<mct-control key="'datetime-picker'"
ng-model="ngModel.outer"
field="'end'"
options="{ hours: true }">
</mct-control>
</div>
</mct-popup>
</span>&nbsp;
</span>
</div>
</div> <div class="l-time-range-slider-holder">
<div class="l-time-range-slider">
<div class="slider"
mct-resize="spanWidth = bounds.width">
<div class="slot range-holder">
<div class="range"
mct-drag-down="startMiddleDrag()"
mct-drag="middleDrag(delta[0])"
ng-style="{ left: startInnerPct, right: endInnerPct}">
</div>
</div>
<div class="knob knob-l"
mct-drag-down="startLeftDrag()"
mct-drag="leftDrag(delta[0])"
ng-style="{ left: startInnerPct }">
<div class="range-value">{{startInnerText}}</div>
</div>
<div class="knob knob-r"
mct-drag-down="startRightDrag()"
mct-drag="rightDrag(delta[0])"
ng-style="{ right: endInnerPct }">
<div class="range-value">{{endInnerText}}</div>
</div>
</div>
</div>
</div>
<div class="l-time-range-slider-holder"> <div class="l-time-range-ticks-holder">
<div class="l-time-range-slider"> <div class="l-time-range-ticks">
<div class="slider" <div
mct-resize="spanWidth = bounds.width"> ng-repeat="tick in ticks"
<div class="slot range-holder"> ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
<div class="range" class="tick tick-x"
mct-drag-down="startMiddleDrag()" >
mct-drag="middleDrag(delta[0])" <span class="l-time-range-tick-label">{{tick}}</span>
ng-style="{ left: startInnerPct, right: endInnerPct}"> </div>
</div> </div>
</div> </div>
<div class="knob knob-l" </div>
mct-drag-down="startLeftDrag()"
mct-drag="leftDrag(delta[0])"
ng-style="{ left: startInnerPct }">
<div class="range-value">{{startInnerText}}</div>
</div>
<div class="knob knob-r"
mct-drag-down="startRightDrag()"
mct-drag="rightDrag(delta[0])"
ng-style="{ right: endInnerPct }">
<div class="range-value">{{endInnerText}}</div>
</div>
</div>
</div>
</div>
<div class="l-time-range-ticks-holder">
<div class="l-time-range-ticks">
<div
ng-repeat="tick in ticks"
ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
class="tick tick-x"
>
<span class="l-time-range-tick-label">{{tick}}</span>
</div>
</div>
</div>
</div>

6
platform/commonUI/general/src/controllers/DateTimePickerController.js
View File

@ -138,9 +138,9 @@ define(
$scope.ngModel[$scope.field] = m.valueOf(); $scope.ngModel[$scope.field] = m.valueOf();
} }
$scope.isSelectable = function (cell) { $scope.isInCurrentMonth = function (cell) {
return cell.month === month; return cell.month === month;
}; }
$scope.isSelected = function (cell) { $scope.isSelected = function (cell) {
var date = $scope.date || {}; var date = $scope.date || {};

7
platform/commonUI/general/src/controllers/TimeRangeController.js
View File

@ -26,7 +26,9 @@ define(
function (moment) { function (moment) {
"use strict"; "use strict";
var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss"; var
DATE_FORMAT = "YYYY-MM-DD HH:mm:ss",
TICK_SPACING_PX = 150;
/** /**
* @memberof platform/commonUI/general * @memberof platform/commonUI/general
@ -59,8 +61,7 @@ define(
} }
function updateSpanWidth(w) { function updateSpanWidth(w) {
// Space about 100px apart tickCount = Math.max(Math.floor(w / TICK_SPACING_PX), 2);
tickCount = Math.max(Math.floor(w / 100), 2);
updateTicks(); updateTicks();
} }

1090
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

File diff suppressed because it is too large Load Diff

29
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -7,12 +7,14 @@ $colorKey: #0099cc;
$colorKeySelectedBg: #005177; $colorKeySelectedBg: #005177;
$colorKeyFg: #fff; $colorKeyFg: #fff;
$colorInteriorBorder: rgba($colorBodyFg, 0.1); $colorInteriorBorder: rgba($colorBodyFg, 0.1);
$colorA: #ccc;
$colorAHov: #fff;
$contrastRatioPercent: 7%; $contrastRatioPercent: 7%;
$basicCr: 2px; $basicCr: 2px;
$controlCr: 3px; $controlCr: 3px;
$smallCr: 2px; $smallCr: 2px;
// Buttons // Buttons and Controls
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); // $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); //
$colorBtnFg: $colorBodyFg; $colorBtnFg: $colorBodyFg;
$colorBtnMajorBg: $colorKey; $colorBtnMajorBg: $colorKey;
@ -20,6 +22,16 @@ $colorBtnMajorFg: $colorKeyFg;
$colorBtnIcon: $colorKey; $colorBtnIcon: $colorKey;
$colorInvokeMenu: #fff; $colorInvokeMenu: #fff;
$contrastInvokeMenuPercent: 20%; $contrastInvokeMenuPercent: 20%;
$shdwBtns: rgba(black, 0.2) 0 1px 2px;
$sliderColorBase: $colorKey;
$sliderColorRangeHolder: rgba(black, 0.1);
$sliderColorRange: rgba($sliderColorBase, 0.3);
$sliderColorRangeHov: rgba($sliderColorBase, 0.5);
$sliderColorKnob: rgba($sliderColorBase, 0.6);
$sliderColorKnobHov: $sliderColorBase;
$sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
$sliderColorRangeValHovFg: $colorKeyFg;
$sliderKnobW: 4px;
// General Colors // General Colors
$colorAlt1: #ffc700; $colorAlt1: #ffc700;
@ -34,6 +46,7 @@ $colorFormSectionHeader: rgba(#000, 0.2);
$colorInvokeMenu: #fff; $colorInvokeMenu: #fff;
$colorObjHdrTxt: $colorBodyFg; $colorObjHdrTxt: $colorBodyFg;
$colorObjHdrIc: pullForward($colorObjHdrTxt, 20%); $colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
$colorTick: rgba(white, 0.2);
// Menu colors // Menu colors
$colorMenuBg: pullForward($colorBodyBg, 23%); $colorMenuBg: pullForward($colorBodyBg, 23%);
@ -99,16 +112,17 @@ $colorItemBgSelected: $colorKey;
$colorTabBorder: pullForward($colorBodyBg, 10%); $colorTabBorder: pullForward($colorBodyBg, 10%);
$colorTabBodyBg: darken($colorBodyBg, 10%); $colorTabBodyBg: darken($colorBodyBg, 10%);
$colorTabBodyFg: lighten($colorTabBodyBg, 40%); $colorTabBodyFg: lighten($colorTabBodyBg, 40%);
$colorTabHeaderBg: lighten($colorBodyBg, 10%); $colorTabHeaderBg: rgba(white, 0.1); // lighten($colorBodyBg, 10%);
$colorTabHeaderFg: lighten($colorTabHeaderBg, 40%); $colorTabHeaderFg: $colorBodyFg; //lighten($colorTabHeaderBg, 40%);
$colorTabHeaderBorder: $colorBodyBg; $colorTabHeaderBorder: $colorBodyBg;
// Plot // Plot
$colorPlotBg: rgba(black, 0.1); $colorPlotBg: rgba(black, 0.1);
$colorPlotFg: $colorBodyFg; $colorPlotFg: $colorBodyFg;
$colorPlotHash: rgba(white, 0.2); $colorPlotHash: $colorTick;
$stylePlotHash: dashed; $stylePlotHash: dashed;
$colorPlotAreaBorder: $colorInteriorBorder; $colorPlotAreaBorder: $colorInteriorBorder;
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
// Tree // Tree
$colorItemTreeIcon: $colorKey; $colorItemTreeIcon: $colorKey;
@ -139,5 +153,12 @@ $colorGrippyInteriorHover: $colorKey;
// Mobile // Mobile
$colorMobilePaneLeft: darken($colorBodyBg, 5%); $colorMobilePaneLeft: darken($colorBodyBg, 5%);
// Datetime Picker
$colorCalCellHovBg: $colorKey;
$colorCalCellHovFg: $colorKeyFg;
$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
$colorCalCellInMonthBg: pushBack($colorMenuBg, 5%);
// About Screen // About Screen
$colorAboutLink: #84b3ff; $colorAboutLink: #84b3ff;

6
platform/commonUI/themes/espresso/res/sass/_mixins.scss
View File

@ -1,13 +1,13 @@
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) { @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
@include containerBase($bg, $fg); @include containerBase($bg, $fg);
@include background-image(linear-gradient(lighten($bg, 5%), $bg)); @include background-image(linear-gradient(lighten($bg, 5%), $bg));
@include boxShdwSubtle(); @include boxShdw($shdwBtns);
} }
@mixin btnSubtle($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) { @mixin btnSubtle($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
@include containerSubtle($bg, $fg); @include containerSubtle($bg, $fg);
@include btnBase($bg, linear-gradient(lighten($bg, 15%), lighten($bg, 10%)), $fg, $ic); @include btnBase($bg, linear-gradient(lighten($bg, 15%), lighten($bg, 10%)), $fg, $ic);
@include text-shadow(rgba(black, 0.3) 0 1px 1px); @include text-shadow($shdwItemText);
} }
@function pullForward($c: $colorBodyBg, $p: 20%) { @function pullForward($c: $colorBodyBg, $p: 20%) {

1062
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

File diff suppressed because it is too large Load Diff

25
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -7,12 +7,14 @@ $colorKey: #0099cc;
$colorKeySelectedBg: $colorKey; $colorKeySelectedBg: $colorKey;
$colorKeyFg: #fff; $colorKeyFg: #fff;
$colorInteriorBorder: rgba($colorBodyFg, 0.2); $colorInteriorBorder: rgba($colorBodyFg, 0.2);
$colorA: #999;
$colorAHov: $colorKey;
$contrastRatioPercent: 40%; $contrastRatioPercent: 40%;
$basicCr: 4px; $basicCr: 4px;
$controlCr: $basicCr; $controlCr: $basicCr;
$smallCr: 3px; $smallCr: 3px;
// Buttons // Buttons and Controls
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
$colorBtnFg: #fff; $colorBtnFg: #fff;
$colorBtnMajorBg: $colorKey; $colorBtnMajorBg: $colorKey;
@ -20,6 +22,16 @@ $colorBtnMajorFg: $colorKeyFg;
$colorBtnIcon: #eee; $colorBtnIcon: #eee;
$colorInvokeMenu: #000; $colorInvokeMenu: #000;
$contrastInvokeMenuPercent: 40%; $contrastInvokeMenuPercent: 40%;
$shdwBtns: none;
$sliderColorBase: $colorKey;
$sliderColorRangeHolder: rgba(black, 0.07);
$sliderColorRange: rgba($sliderColorBase, 0.3);
$sliderColorRangeHov: rgba($sliderColorBase, 0.5);
$sliderColorKnob: rgba($sliderColorBase, 0.6);
$sliderColorKnobHov: $sliderColorBase;
$sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1);
$sliderColorRangeValHovFg: $colorBodyFg;
$sliderKnobW: 4px;
// General Colors // General Colors
$colorAlt1: #ff6600; $colorAlt1: #ff6600;
@ -32,6 +44,7 @@ $colorGridLines: rgba(#000, 0.05);
$colorInvokeMenu: #fff; $colorInvokeMenu: #fff;
$colorObjHdrTxt: $colorBodyFg; $colorObjHdrTxt: $colorBodyFg;
$colorObjHdrIc: pushBack($colorObjHdrTxt, 30%); $colorObjHdrIc: pushBack($colorObjHdrTxt, 30%);
$colorTick: rgba(black, 0.2);
// Menu colors // Menu colors
$colorMenuBg: pushBack($colorBodyBg, 10%); $colorMenuBg: pushBack($colorBodyBg, 10%);
@ -104,9 +117,10 @@ $colorTabHeaderBorder: $colorBodyBg;
// Plot // Plot
$colorPlotBg: rgba(black, 0.05); $colorPlotBg: rgba(black, 0.05);
$colorPlotFg: $colorBodyFg; $colorPlotFg: $colorBodyFg;
$colorPlotHash: rgba(black, 0.2); $colorPlotHash: $colorTick;
$stylePlotHash: dashed; $stylePlotHash: dashed;
$colorPlotAreaBorder: $colorInteriorBorder; $colorPlotAreaBorder: $colorInteriorBorder;
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
// Tree // Tree
$colorItemTreeIcon: $colorKey; $colorItemTreeIcon: $colorKey;
@ -137,5 +151,12 @@ $colorGrippyInteriorHover: $colorBodyBg;
// Mobile // Mobile
$colorMobilePaneLeft: darken($colorBodyBg, 2%); $colorMobilePaneLeft: darken($colorBodyBg, 2%);
// Datetime Picker, Calendar
$colorCalCellHovBg: $colorKey;
$colorCalCellHovFg: $colorKeyFg;
$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
$colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
// About Screen // About Screen
$colorAboutLink: #84b3ff; $colorAboutLink: #84b3ff;

1
platform/commonUI/themes/snow/res/sass/_mixins.scss
View File

@ -1,5 +1,6 @@
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) { @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include containerBase($bg, $fg); @include containerBase($bg, $fg);
@include boxShdw($shdwBtns);
} }
@mixin btnSubtle($bg: $colorBtnBg, $bgHov: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) { @mixin btnSubtle($bg: $colorBtnBg, $bgHov: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {

2
platform/features/plot/res/templates/plot.html
View File

@ -119,7 +119,7 @@
<span class="ui-symbol icon">I</span> <span class="ui-symbol icon">I</span>
</a> </a>
<div class="menu-element s-menu menus-to-left" <div class="menu-element s-menu-btn menus-to-left"
ng-if="plot.getModeOptions().length > 1" ng-if="plot.getModeOptions().length > 1"
ng-controller="ClickAwayController as toggle"> ng-controller="ClickAwayController as toggle">

2
platform/forms/res/templates/controls/color.html
View File

@ -20,7 +20,7 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div <div
class="t-btn l-btn s-btn s-icon-btn s-menu menu-element t-color-palette" class="t-btn l-btn s-btn s-icon-btn s-menu-btn menu-element t-color-palette"
ng-controller="ClickAwayController as toggle" ng-controller="ClickAwayController as toggle"
> >

2
platform/forms/res/templates/controls/menu-button.html
View File

@ -19,7 +19,7 @@
this source code distribution or the Licensing information page available this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div class="s-menu menu-element" <div class="s-menu-btn menu-element"
ng-controller="ClickAwayController as toggle"> ng-controller="ClickAwayController as toggle">
<span class="l-click-area" ng-click="toggle.toggle()"></span> <span class="l-click-area" ng-click="toggle.toggle()"></span>