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

[Search] Update CSS

Browse Source 
Slight tweak to the padding of the search view,
which affects where the top of the scroll bar
appears. Also removed the search scroll div
because it was unused.
This commit is contained in:
slhale
2015-08-03 13:26:29 -07:00
parent e928e02b1c
commit e05f16d780
3 changed files with 203 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
platform/commonUI/general/res/css/tree.css
View File

@@ -275,90 +275,87 @@ ul.tree {
.search-holder { .search-holder {
overflow-y: auto; overflow-y: auto;
padding-right: 5px; padding-right: 5px;
top: 23px; } top: 23px;
/* line 37, ../sass/search/_search.scss */ margin-top: 10px; }
/* line 38, ../sass/search/_search.scss */
.search-holder .search .search-input { .search-holder .search .search-input {
margin-top: 10px;
width: 100%; } width: 100%; }
/* line 43, ../sass/search/_search.scss */ /* line 42, ../sass/search/_search.scss */
.search-holder .search .search-scroll { .search-holder .search .results {
height: 100%; margin-top: 10px; }
overflow: auto; } /* line 46, ../sass/search/_search.scss */
/* line 47, ../sass/search/_search.scss */ .search-holder .search .results .search-result-item {
.search-holder .search .search-scroll .results { -moz-transition: background-color 0.25s;
margin-top: 10px; } -o-transition: background-color 0.25s;
/* line 51, ../sass/search/_search.scss */ -webkit-transition: background-color 0.25s;
.search-holder .search .search-scroll .results .search-result-item { transition: background-color 0.25s;
-moz-transition: background-color 0.25s; margin-bottom: 2px;
-o-transition: background-color 0.25s; border-radius: 2px;
-webkit-transition: background-color 0.25s; padding-top: 4px;
transition: background-color 0.25s; padding-bottom: 2px; }
margin-bottom: 2px; /* line 60, ../sass/search/_search.scss */
border-radius: 2px; .search-holder .search .results .search-result-item .label {
padding-top: 4px;
padding-bottom: 2px; }
/* line 65, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item .label {
margin-left: 6px; }
/* line 69, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item .label .title-label {
display: inline-block;
position: absolute;
left: 29px;
right: 5px;
font-size: .8em;
line-height: 17px;
width: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
/* line 91, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item.selected {
background: #005177;
color: #fff; }
/* line 95, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item.selected .view-control {
color: #0099cc; }
/* line 98, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon {
color: #fff; }
/* line 105, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover {
background: #404040;
color: #cccccc; }
/* line 108, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
display: block; }
/* line 111, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
color: #33ccff; }
/* line 119, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon {
position: relative; }
/* line 121, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading {
pointer-events: none;
margin-left: 6px; } margin-left: 6px; }
/* line 125, ../sass/search/_search.scss */ /* line 64, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading .title-label { .search-holder .search .results .search-result-item .label .title-label {
font-style: italic; display: inline-block;
font-size: .9em; position: absolute;
opacity: 0.5; left: 29px;
margin-left: 26px; right: 5px;
line-height: 24px; } font-size: .8em;
/* line 135, ../sass/search/_search.scss */ line-height: 17px;
.search-holder .search .search-scroll .load-icon.loading .wait-spinner { width: auto;
margin-left: 6px; } overflow: hidden;
/* line 140, ../sass/search/_search.scss */ text-overflow: ellipsis;
.search-holder .search .search-scroll .load-icon:not(.loading) { white-space: nowrap; }
cursor: pointer; } /* line 86, ../sass/search/_search.scss */
/* line 145, ../sass/search/_search.scss */ .search-holder .search .results .search-result-item.selected {
.search-holder .search .search-scroll .load-more-button { background: #005177;
margin-top: 5px; color: #fff; }
margin-bottom: 5px; /* line 90, ../sass/search/_search.scss */
position: relative; .search-holder .search .results .search-result-item.selected .view-control {
left: 25%; color: #0099cc; }
width: 50%; /* line 93, ../sass/search/_search.scss */
height: 20px; .search-holder .search .results .search-result-item.selected .label .type-icon {
line-height: 11px; color: #fff; }
font-size: 0.7em; } /* line 100, ../sass/search/_search.scss */
.search-holder .search .results .search-result-item:not(.selected):hover {
background: #404040;
color: #cccccc; }
/* line 103, ../sass/search/_search.scss */
.search-holder .search .results .search-result-item:not(.selected):hover .context-trigger {
display: block; }
/* line 106, ../sass/search/_search.scss */
.search-holder .search .results .search-result-item:not(.selected):hover .icon {
color: #33ccff; }
/* line 114, ../sass/search/_search.scss */
.search-holder .search .load-icon {
position: relative; }
/* line 116, ../sass/search/_search.scss */
.search-holder .search .load-icon.loading {
pointer-events: none;
margin-left: 6px; }
/* line 120, ../sass/search/_search.scss */
.search-holder .search .load-icon.loading .title-label {
font-style: italic;
font-size: .9em;
opacity: 0.5;
margin-left: 26px;
line-height: 24px; }
/* line 130, ../sass/search/_search.scss */
.search-holder .search .load-icon.loading .wait-spinner {
margin-left: 6px; }
/* line 135, ../sass/search/_search.scss */
.search-holder .search .load-icon:not(.loading) {
cursor: pointer; }
/* line 140, ../sass/search/_search.scss */
.search-holder .search .load-more-button {
margin-top: 5px;
margin-bottom: 5px;
position: relative;
left: 25%;
width: 50%;
white-space: nowrap;
height: 20px;
line-height: 11px;
font-size: 0.7em; }

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

@@ -30,136 +30,128 @@
padding-right: $rightPadding; padding-right: $rightPadding;
top: 23px; top: 23px;
// Align with the top of the divider bar, below create button
margin-top: 10px;
.search { .search {
//height: auto;
//overflow: auto;
.search-input { .search-input {
// Align with the top of the divider bar, below create button
margin-top: 10px;
width: 100%; width: 100%;
} }
.search-scroll { .results {
height: 100%; // Spacing away from the search input
overflow: auto; margin-top: 10px;
.results { .search-result-item {
// Spacing away from the search input // Include transitions (for the highlights)
margin-top: 10px; @include single-transition(background-color, 0.25s);
.search-result-item { // Space the results from each other
// Include transitions (for the highlights) margin-bottom: 2px;
@include single-transition(background-color, 0.25s);
// Space the results from each other // Make the highlights the right color and shape.
margin-bottom: 2px; // Attempting to match the style in the tree, but
// while having these be compact.
border-radius: 2px;
padding-top: 4px;
padding-bottom: 2px;
// Make the highlights the right color and shape. .label {
// Attempting to match the style in the tree, but // Give some padding away from the left side
// while having these be compact.
border-radius: 2px;
padding-top: 4px;
padding-bottom: 2px;
.label {
// Give some padding away from the left side
margin-left: $leftMargin;
.title-label {
display: inline-block;
position: absolute;
// Give some padding away from the left side
left: $leftMargin + 3px + $iconWidth;
// and the right side
right: $rightPadding;
// Size and position the text
font-size: .8em;
line-height: 17px;
// Hide overflow text
width: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
// Change styling when it's selected
&.selected {
$c: #fff;
background: $colorKeySelectedBg;
color: $c;
.view-control {
color: $colorItemTreeIcon;
}
.label .type-icon {
color: #fff;
}
}
// Change styling when it's being hovered over
&:not(.selected) {
&:hover {
background: lighten($colorBodyBg, 5%);
color: lighten($colorBodyFg, 20%);
.context-trigger {
display: block;
}
.icon {
color: $colorItemTreeIconHover;
}
}
}
}
}
.load-icon {
position: relative;
&.loading {
pointer-events: none;
margin-left: $leftMargin; margin-left: $leftMargin;
.title-label { .title-label {
// Text styling display: inline-block;
font-style: italic; position: absolute;
font-size: .9em;
opacity: 0.5;
// Text positioning // Give some padding away from the left side
margin-left: $iconWidth + $leftMargin; left: $leftMargin + 3px + $iconWidth;
line-height: 24px; // and the right side
} right: $rightPadding;
.wait-spinner {
margin-left: $leftMargin; // Size and position the text
font-size: .8em;
line-height: 17px;
// Hide overflow text
width: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
&:not(.loading) { // Change styling when it's selected
cursor: pointer; &.selected {
$c: #fff;
background: $colorKeySelectedBg;
color: $c;
.view-control {
color: $colorItemTreeIcon;
}
.label .type-icon {
color: #fff;
}
}
// Change styling when it's being hovered over
&:not(.selected) {
&:hover {
background: lighten($colorBodyBg, 5%);
color: lighten($colorBodyFg, 20%);
.context-trigger {
display: block;
}
.icon {
color: $colorItemTreeIconHover;
}
}
}
}
}
.load-icon {
position: relative;
&.loading {
pointer-events: none;
margin-left: $leftMargin;
.title-label {
// Text styling
font-style: italic;
font-size: .9em;
opacity: 0.5;
// Text positioning
margin-left: $iconWidth + $leftMargin;
line-height: 24px;
}
.wait-spinner {
margin-left: $leftMargin;
} }
} }
.load-more-button { &:not(.loading) {
// Space away form the results list cursor: pointer;
margin-top: 5px;
margin-bottom: 5px;
// Center it
position: relative;
left: 25%;
width: 50%;
// Make smallish button
height: 20px;
line-height: 11px;
font-size: 0.7em;
} }
}
// temp .load-more-button {
//margin-bottom: 30px; // Space away form the results list
margin-top: 5px;
margin-bottom: 5px;
// Center it
position: relative;
left: 25%;
width: 50%;
white-space: nowrap;
// Make smallish button
height: 20px;
line-height: 11px;
font-size: 0.7em;
} }
} }
} }

47
platform/search/res/templates/search.html
View File

@@ -35,33 +35,28 @@
</mct-control--> </mct-control-->
</div> </div>
<!-- This div exists to determine scroll bar location --> <!-- Results list -->
<div class="search-scroll"> <div class="results">
<mct-representation key="'search-item'"
ng-repeat="result in results"
mct-object="result.object"
ng-model="ngModel">
</mct-representation>
</div>
<!-- Results list --> <!-- Loading icon -->
<div class="results"> <div class="load-icon"
<mct-representation key="'search-item'" ng-class="{loading: controller.isLoading()}"
ng-repeat="result in results" ng-if="controller.isLoading()">
mct-object="result.object" <span class="icon wait-spinner"></span>
ng-model="ngModel"> <span class="title-label">Loading...</span>
</mct-representation> </div>
</div>
<!-- Loading icon -->
<div class="load-icon"
ng-class="{loading: controller.isLoading()}"
ng-if="controller.isLoading()">
<span class="icon wait-spinner"></span>
<span class="title-label">Loading...</span>
</div>
<!-- Load more button -->
<div ng-if="controller.areMore()">
<button class="load-more-button btn very-subtle"
ng-click="controller.loadMore()">
Load more
</button>
</div>
<!-- Load more button -->
<div ng-if="controller.areMore()">
<button class="load-more-button btn very-subtle"
ng-click="controller.loadMore()">
Load more
</button>
</div> </div>
</div> </div>