alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bringing in latest NEM work from open199-meet-open279

Browse Source
This commit is contained in:
Charles Hacskaylo
2015-11-17 15:26:11 -08:00
parent 2251a0c1e9 90c06cfc97
commit 5882278f98
15 changed files with 728 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
platform/commonUI/general/res/sass/_inspector.scss
View File

@@ -23,7 +23,7 @@
.l-inspect,
.l-inspect table tr td {
font-size: 0.7rem;
font-size: 0.75rem;
}
.l-inspect {
@@ -31,6 +31,9 @@
background: $colorInspectorBg;
color: $colorInspectorFg;
line-height: 140%;
.flex-elem.holder:not(:last-child) { margin-bottom: $interiorMargin; }
.pane-header {
color: pushBack($colorInspectorFg, 20%);
font-size: 0.8rem;
@@ -43,6 +46,16 @@
vertical-align: bottom;
}
}
.split-layout {
.split-pane-component.pane {
&.bottom {
height: 30%;
min-height: 20%;
max-height: 80%;
}
}
}
ul {
@include box-sizing(border-box);
@@ -109,4 +122,23 @@
width: 4px;
}
}
}
.holder-elements {
.current-elements {
position: relative;
.tree-item {
.t-object-label {
// Elements pool is a flat list, so don't indent items.
left: 0;
.t-item-icon {
font-size: 1em;
width: 1em;
}
.t-title-label {
left: 20px + $interiorMargin;
}
}
}
}
}
}

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

@@ -315,11 +315,11 @@
}
}
@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
@mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
@include appearance(none);
@include border-radius($controlCr);
@include box-sizing(border-box);
@include box-shadow(inset rgba(black, 0.4) 0 1px 3px);
@include box-shadow(inset $shdw);
background: $bg;
border: none;
color: $fg;
@@ -329,7 +329,7 @@
}
}
@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg) {
@include input-base($bg, $fg);
padding: 0 $interiorMarginSm;
}

7
platform/commonUI/general/res/sass/forms/_elems.scss
View File

@@ -112,7 +112,7 @@
.selector-list {
// Used in create overlay to display tree view
@include nice-input($colorInputBg, $colorInputFg);
@include nice-input();
$h: 150px;
//@include border-radius($basicCr);
//@include box-sizing(border-box);
@@ -162,8 +162,9 @@ label.form-control.checkbox {
}
}
input[type="text"] {
@include nice-input($colorInputBg, $colorInputFg);
input[type="text"],
input[type="search"] {
@include nice-input();
&.filter {
&.ng-dirty {
// background: red;

85
platform/commonUI/general/res/sass/forms/_filter.scss
View File

@@ -21,13 +21,9 @@
*****************************************************************************/
.filter,
.t-filter {
input.filter,
input.t-filter-input {
@include subdued-input();
}
input.t-filter-input {
height: $formInputH;
width: 200px;
//height: $formInputH;
//width: 200px;
&:not(.ng-dirty) {
// TO-DO: Update compass install to support this
// @include input-placeholder {
@@ -79,12 +75,6 @@
// &:not(ng-dirty)
}
.l-filter {
// Holds an input and a clear button
display:inline-block;
position: relative;
}
.top-bar {
input.filter {
$h: $ueTopBarH;
@@ -100,4 +90,75 @@
.icon-filter {
font-size: 1.4em;
}
}
.l-filter {
$iconEdgeM: 4px;
$iconD: $formInputH - ($iconEdgeM * 2);
// Adds a magnifying glass before, holds an input and a clear button
display: inline-block;
position: relative;
input[type="search"] {
padding: 2px ($iconD + $interiorMargin);
}
.clear-icon,
.menu-icon,
&:before {
@include box-sizing(border-box);
display: inline-block;
line-height: inherit;
position: absolute;
top: 50%;
@include transform(translateY(-50%));
}
&:before {
// Magnify glass icon
content:'\4d';
left: $interiorMargin;
@include trans-prop-nice(color, 250ms);
pointer-events: none;
}
.clear-icon {
right: $iconEdgeM;
// Icon is visible only when there is text input
visibility: hidden;
opacity: 0;
&.show {
visibility: visible;
opacity: 1;
}
&:hover {
color: pullForward($colorInputIcon, 10%);
}
}
}
.s-filter {
input[type="search"] {
@include input-base();
}
.clear-icon,
.menu-icon,
&:before {
color: $colorInputIcon;
cursor: pointer;
font-family: symbolsfont;
@include trans-prop-nice((opacity, color), 150ms);
}
// Make icon lighten when hovering over search bar
&:hover:before {
color: pullForward($colorInputIcon, 10%);
}
.clear-icon {
// 'x' in circle icon
&:before {
content: '\e607';
}
}
}

2
platform/commonUI/general/res/sass/mobile/_layout.scss
View File

@@ -102,7 +102,7 @@
}
.object-browse-bar {
left: 45px !important;
margin-left: 45px;
.context-available {
opacity: 1 !important;
}

84
platform/commonUI/general/res/sass/search/_search.scss
View File

@@ -20,91 +20,33 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
.clear-icon,
.menu-icon {
cursor: pointer;
font-family: symbolsfont;
@include trans-prop-nice((opacity, color), 150ms);
}
.clear-icon {
// 'x' in circle icon
&:before {
content: '\e607';
}
}
.holder-search {
// Moved a lot of stuff in here to _filter.scss
// to generalize approach to search input controls.
$iconWidth: 20px;
$textInputHeight: 19px;
$iconEdgeM: 4px;
$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
.search-bar {
$textInputHeight: 19px; // This is equal to the default value, 19px
$iconEdgeM: 4px;
$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
font-size: 0.8em;
max-width: 250px;
position: relative;
.search-input {
input[type="search"] {
height: $treeSearchInputBarH;
line-height: $treeSearchInputBarH;
position: relative;
width: 100%;
padding-left: $iconD + $interiorMargin !important;
padding-right: ($iconD * 2) + ($interiorMargin * 2) !important;
}
&:before,
.clear-icon,
.menu-icon {
@include box-sizing(border-box);
color: $colorInputIcon;
height: $iconD;
width: $iconD;
line-height: $iconD;
position: absolute;
text-align: center;
top: $iconEdgeM;
}
.search-input {
position: relative;
width: 100%;
padding-left: $iconD + $interiorMargin !important;
padding-right: ($iconD * 2) + ($interiorMargin * 2) !important;
// Make work for mct-control textfield
input {
width: inherit; // was 100%
}
}
&:before {
// Magnify glass icon
content:'\4d';
font-family: symbolsfont;
left: $interiorMarginSm;
@include trans-prop-nice(color, 250ms);
pointer-events: none;
.clear-icon {
right: $iconD + $interiorMargin;
}
// Make icon lighten when hovering over search bar
&:hover:before {
color: pullForward($colorInputIcon, 10%);
}
.clear-icon {
right: $iconD + $interiorMargin;
// Icon is visible only when there is text input
visibility: hidden;
opacity: 0;
&.show {
visibility: visible;
opacity: 1;
}
&:hover {
color: pullForward($colorInputIcon, 10%);
}
}
.menu-icon {
// 'v' invoke menu icon
&:before { content: '\76'; }

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

@@ -67,7 +67,6 @@
right: $bodyMargin;
bottom: $bodyMargin + $ueFooterH;
.tool-bar {
border-bottom: 1px solid $colorInteriorBorder;
bottom: auto;
height: $tbH;
line-height: $btnToolbarH;
@@ -78,7 +77,6 @@
}
}
// from _bottom-bar.scss
.ue-bottom-bar {
@include absPosDefault(0);// New status bar design
top: auto;
@@ -209,12 +207,18 @@
top: $bodyMargin;
bottom: $bodyMargin;
}
.holder-inspector-elements {
.holder-inspector {
top: $bodyMargin;
bottom: $bodyMargin;
left: $bodyMargin;
right: $bodyMargin;
}
.holder-elements {
top: 0;
bottom: $bodyMargin;
left: $bodyMargin;
right: $bodyMargin;
}
}
}
@@ -225,7 +229,6 @@
.l-object-wrapper {
@extend .abs;
//top: $ueTopBarH + $interiorMarginLg;
.object-holder-main {
@extend .abs;
@@ -234,6 +237,7 @@
&.active {
@include pulseBorder($colorKey, 150ms, 8, 0.5s);
@include border-radius($controlCr);
background-color: $colorEditAreaBg;
border-color: $colorKey;
border-width: 2px;
border-style: dotted;
@@ -281,7 +285,6 @@
/***************************************************** OBJECT BROWSE BAR */
.object-browse-bar {
// Converting to use flexbox layout
//@include absPosDefault(0, visible); // Must use visible to avoid hiding view switcher menu
@include box-sizing(border-box);
height: $ueTopBarH;
line-height: $ueTopBarH;
@@ -295,9 +298,7 @@
}
}
// When the tree is hidden, these are the
// classes used for the left menu and the
// right representation.
// When the tree is hidden, these are the classes used for the left menu and the right representation.
.pane-tree-hidden {
// Sets the left tree menu when the tree is hidden.
.tree-holder,
@@ -332,9 +333,6 @@
.pane-inspect-hidden {
.l-object-and-inspector {
.t-inspect {
z-index: 1 !important; // Move down so that primary pane elements are clickable
}
.l-inspect,
.splitter-inspect {
opacity: 0;

10
platform/commonUI/general/res/templates/controls/input-filter.html
View File

@@ -20,15 +20,13 @@
at runtime from the About dialog for additional information.
-->
<!-- look at action-button for example -->
<span class="t-filter l-filter"
<span class="t-filter l-filter s-filter"
ng-controller="GetterSetterController">
<input type="search"
class="t-filter-input"
ng-model="getterSetter.value"
placeholder="Filter..."/>
<a class="ui-symbol t-a-clear s-a-clear"
ng-show="getterSetter.value !== ''"
ng-model="getterSetter.value"/>
<a class="clear-icon"
ng-class="{show: !(getterSetter.value === '' || getterSetter.value === undefined)}"
ng-click="getterSetter.value = ''">
x
</a>
</span>

101
platform/commonUI/general/res/templates/object-inspector.html
View File

@@ -19,45 +19,68 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<!-- TO-DO: get rid of this ng-init and replace with a live state value -->
<div ng-init="editMode = true;"></div>
<span class="l-inspect" ng-controller="ObjectInspectorController as controller">
<div class="abs holder holder-inspector-elements l-flex-col">
<div class="pane-header flex-elem">Inspection</div>
<ul class="flex-elem grows vscroll">
<li>
<em>Properties</em>
<div class="inspector-properties"
ng-repeat="data in metadata"
ng-class="{ first:$index === 0 }">
<div class="label">{{ data.name }}</div>
<div class="value">{{ data.value }}</div>
<div ng-controller="PaneController as modelPaneEdit">
<mct-split-pane class='abs contents split-layout' anchor='bottom'>
<div class="split-pane-component pane top">
<div class="abs holder holder-inspector l-flex-col">
<div class="pane-header flex-elem">Inspection</div>
<ul class="flex-elem grows vscroll">
<li>
<em>Properties</em>
<div class="inspector-properties"
ng-repeat="data in metadata"
ng-class="{ first:$index === 0 }">
<div class="label">{{ data.name }}</div>
<div class="value">{{ data.value }}</div>
</div>
</li>
<li ng-if="contextutalParents.length > 0">
<em title="The location of this linked object.">Location</em>
<span class="inspector-location"
ng-repeat="parent in contextutalParents"
ng-class="{ last:($index + 1) === contextualParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation>
</span>
</li>
<li ng-if="primaryParents.length > 0">
<em title="The location of the original object that this was linked from.">Original Location</em>
<span class="inspector-location"
ng-repeat="parent in primaryParents"
ng-class="{ last:($index + 1) === primaryParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation>
</span>
</li>
</ul>
</div><!--/ holder-inspector -->
</div><!--/ split-pane-component -->
<mct-splitter class="splitter-inspect mobile-hide" ng-show="editMode"></mct-splitter>
<div class="split-pane-component pane bottom" ng-show="editMode">
<div class="abs holder holder-elements l-flex-col">
<em class="flex-elem">Elements</em>
<mct-include key="'input-filter'"
class="flex-elem holder">
</mct-include>
<mct-representation
key="'edit-elements'"
mct-object="domainObject"
class="flex-elem holder grows vscroll current-elements">
</mct-representation>
</div>
</div>
</li>
<li ng-if="contextutalParents.length > 0">
<em title="The location of this linked object.">Location</em>
<span class="inspector-location"
ng-repeat="parent in contextutalParents"
ng-class="{ last:($index + 1) === contextualParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation>
</span>
</li>
<li ng-if="primaryParents.length > 0">
<em title="The location of the original object that this was linked from.">Original Location</em>
<span class="inspector-location"
ng-repeat="parent in primaryParents"
ng-class="{ last:($index + 1) === primaryParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation>
</span>
</li>
</ul>
</div>
</mct-split-pane>
</div><!--/ PaneController -->
</span>