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

[Frontend] Refinements to Inspector elements, search inputs

Browse Source 
open #199
open #279
Treeview indent removed;
Significant refactoring of search classes to generalize
approach to search inputs;
This commit is contained in:
Charles Hacskaylo
2015-11-16 17:20:15 -08:00
parent 966e993c5d
commit a8d563975a
11 changed files with 476 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -122,6 +122,10 @@
.holder-elements {
.current-elements {
position: relative;
.tree-item .t-object-label {
// Elements pool is a flat list, so don't indent items.
left: 0;
}
}
}
}

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

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

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>

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

@@ -20,6 +20,7 @@
at runtime from the About dialog for additional information.
-->
<div ng-init="editMode = true;"></div>
<span class="l-inspect" ng-controller="ObjectInspectorController as controller">
<div ng-controller="PaneController as modelPaneEdit">
<mct-split-pane class='abs contents split-layout' anchor='bottom'>
@@ -69,7 +70,9 @@
<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>
<div class="filter flex-elem"><input type="text"></div>
<mct-include key="'input-filter'"
class="flex-elem">
</mct-include>
<mct-representation
key="'edit-elements'"
mct-object="domainObject"