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

[Search] Attempt at scroll bars

Browse Source 
Attempted to make the search results scroll,
but failed for now. Created a div for the
search results, load icon, and load more
button, which are the elements desired to
be scrolled. Did not work because search
result labels have absolute position text.
This commit is contained in:
shale
2015-07-23 15:12:13 -07:00
parent aa17d3034e
commit 0feab1965c
5 changed files with 231 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/general/res/css/theme-espresso.css
View File

@@ -704,7 +704,7 @@ mct-container {
.split-layout.vertical > .pane:first-child .holder { .split-layout.vertical > .pane:first-child .holder {
position: relative; } position: relative; }
/* line 42, ../sass/search/_layout.scss */ /* line 44, ../sass/search/_layout.scss */
.pane.treeview.left .tree-holder { .pane.treeview.left .tree-holder {
top: 0; } top: 0; }

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

@@ -273,86 +273,90 @@ ul.tree {
*****************************************************************************/ *****************************************************************************/
/* line 23, ../sass/search/_search.scss */ /* line 23, ../sass/search/_search.scss */
.search-holder { .search-holder {
overflow-y: auto;
padding-right: 5px; } padding-right: 5px; }
/* line 34, ../sass/search/_search.scss */ /* line 36, ../sass/search/_search.scss */
.search-holder .search .search-input { .search-holder .search .search-input {
margin-top: 10px; margin-top: 10px;
width: 100%; } width: 100%; }
/* line 40, ../sass/search/_search.scss */ /* line 42, ../sass/search/_search.scss */
.search-holder .search .load-icon { .search-holder .search .search-scroll {
position: relative; } height: 100%;
/* line 42, ../sass/search/_search.scss */ overflow: auto; }
.search-holder .search .load-icon.loading { /* line 46, ../sass/search/_search.scss */
pointer-events: none; .search-holder .search .search-scroll .results {
margin-left: 6px; } margin-top: 10px; }
/* line 46, ../sass/search/_search.scss */ /* line 50, ../sass/search/_search.scss */
.search-holder .search .load-icon.loading .title-label { .search-holder .search .search-scroll .results .search-result-item {
font-style: italic; -moz-transition: background-color 0.25s;
font-size: .9em; -o-transition: background-color 0.25s;
opacity: 0.5; -webkit-transition: background-color 0.25s;
margin-left: 26px; transition: background-color 0.25s;
line-height: 24px; } margin-bottom: 2px;
/* line 56, ../sass/search/_search.scss */ border-radius: 2px;
.search-holder .search .load-icon.loading .wait-spinner { padding-top: 4px;
margin-left: 6px; } padding-bottom: 2px; }
/* line 61, ../sass/search/_search.scss */ /* line 64, ../sass/search/_search.scss */
.search-holder .search .load-icon:not(.loading) { .search-holder .search .search-scroll .results .search-result-item .label {
cursor: pointer; } margin-left: 6px; }
/* line 66, ../sass/search/_search.scss */ /* line 68, ../sass/search/_search.scss */
.search-holder .search .results { .search-holder .search .search-scroll .results .search-result-item .label .title-label {
margin-top: 10px; } display: inline-block;
/* line 70, ../sass/search/_search.scss */ position: absolute;
.search-holder .search .results .search-result-item { left: 29px;
-moz-transition: background-color 0.25s; right: 5px;
-o-transition: background-color 0.25s; font-size: .8em;
-webkit-transition: background-color 0.25s; line-height: 17px;
transition: background-color 0.25s; width: auto;
margin-bottom: 2px; overflow: hidden;
border-radius: 2px; text-overflow: ellipsis;
padding-top: 4px; white-space: nowrap; }
padding-bottom: 2px; } /* line 90, ../sass/search/_search.scss */
/* line 84, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected {
.search-holder .search .results .search-result-item .label { background: #005177;
margin-left: 6px; }
/* line 88, ../sass/search/_search.scss */
.search-holder .search .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 110, ../sass/search/_search.scss */
.search-holder .search .results .search-result-item.selected {
background: #005177;
color: #fff; }
/* line 114, ../sass/search/_search.scss */
.search-holder .search .results .search-result-item.selected .view-control {
color: #0099cc; }
/* line 117, ../sass/search/_search.scss */
.search-holder .search .results .search-result-item.selected .label .type-icon {
color: #fff; } color: #fff; }
/* line 124, ../sass/search/_search.scss */ /* line 94, ../sass/search/_search.scss */
.search-holder .search .results .search-result-item:not(.selected):hover { .search-holder .search .search-scroll .results .search-result-item.selected .view-control {
background: #404040; color: #0099cc; }
color: #cccccc; } /* line 97, ../sass/search/_search.scss */
/* line 127, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon {
.search-holder .search .results .search-result-item:not(.selected):hover .context-trigger { color: #fff; }
display: block; } /* line 104, ../sass/search/_search.scss */
/* line 130, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover {
.search-holder .search .results .search-result-item:not(.selected):hover .icon { background: #404040;
color: #33ccff; } color: #cccccc; }
/* line 138, ../sass/search/_search.scss */ /* line 107, ../sass/search/_search.scss */
.search-holder .search .load-more-button { .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
margin-top: 5px; display: block; }
position: relative; /* line 110, ../sass/search/_search.scss */
left: 25%; .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
width: 50%; color: #33ccff; }
height: 20px; /* line 118, ../sass/search/_search.scss */
line-height: 11px; .search-holder .search .search-scroll .load-icon {
font-size: 0.7em; } position: relative; }
/* line 120, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading {
pointer-events: none;
margin-left: 6px; }
/* line 124, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading .title-label {
font-style: italic;
font-size: .9em;
opacity: 0.5;
margin-left: 26px;
line-height: 24px; }
/* line 134, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading .wait-spinner {
margin-left: 6px; }
/* line 139, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon:not(.loading) {
cursor: pointer; }
/* line 144, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-more-button {
margin-top: 5px;
margin-bottom: 5px;
position: relative;
left: 25%;
width: 50%;
height: 20px;
line-height: 11px;
font-size: 0.7em; }

7
platform/commonUI/general/res/sass/search/_layout.scss
View File

@@ -39,6 +39,8 @@
.pane { .pane {
&.treeview.left { &.treeview.left {
//overflow: auto; // This one works! (But the bar goes too high)
.tree-holder { .tree-holder {
// Want tree holder to start right below the search bar // Want tree holder to start right below the search bar
top: 0; top: 0;
@@ -46,7 +48,12 @@
// Make tree invisible when there are things in search results // Make tree invisible when there are things in search results
&.search-in-use { &.search-in-use {
//display: none; //display: none;
} }
} }
.search-holder {
//overflow: auto;
}
} }
} }

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

@@ -26,10 +26,12 @@
$rightPadding: 5px; $rightPadding: 5px;
//position: relative; //position: relative;
overflow-y: auto; // This should make it scroll, but isn't wokring :( //overflow-y: auto; // This should make it scroll, but isn't wokring :(
padding-right: $rightPadding; padding-right: $rightPadding;
.search { .search {
//height: auto;
//overflow: auto;
.search-input { .search-input {
// Align with the top of the divider bar, below create button // Align with the top of the divider bar, below create button
@@ -37,117 +39,126 @@
width: 100%; width: 100%;
} }
.load-icon { .search-scroll {
position: relative; height: 100%;
&.loading { overflow: auto;
pointer-events: none;
margin-left: $leftMargin;
.title-label { .results {
// Text styling // Spacing away from the search input
font-style: italic; margin-top: 10px;
font-size: .9em;
opacity: 0.5;
// Text positioning .search-result-item {
margin-left: $iconWidth + $leftMargin; // Include transitions (for the highlights)
line-height: 24px; @include single-transition(background-color, 0.25s);
}
.wait-spinner { // Space the results from each other
margin-left: $leftMargin; margin-bottom: 2px;
// Make the highlights the right color and shape.
// Attempting to match the style in the tree, but
// 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;
}
}
}
} }
} }
&:not(.loading) { .load-icon {
cursor: pointer; position: relative;
} &.loading {
} pointer-events: none;
.results {
// Spacing away from the search input
margin-top: 10px;
.search-result-item {
// Include transitions (for the highlights)
@include single-transition(background-color, 0.25s);
// Space the results from each other
margin-bottom: 2px;
// Make the highlights the right color and shape.
// Attempting to match the style in the tree, but we
// 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; margin-left: $leftMargin;
.title-label { .title-label {
display: inline-block; // Text styling
position: absolute; font-style: italic;
font-size: .9em;
opacity: 0.5;
// Give some padding away from the left side // Text positioning
left: $leftMargin + 3px + $iconWidth; margin-left: $iconWidth + $leftMargin;
// and the right side line-height: 24px;
right: $rightPadding; }
.wait-spinner {
// Size and position the text margin-left: $leftMargin;
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 &:not(.loading) {
&.selected { cursor: pointer;
$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-more-button { .load-more-button {
// Space away form the results list // Space away form the results list
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px;
// Center it // Center it
position: relative; position: relative;
left: 25%; left: 25%;
width: 50%; width: 50%;
// Make smallish button // Make smallish button
height: 20px; height: 20px;
line-height: 11px; line-height: 11px;
font-size: 0.7em; font-size: 0.7em;
}
// temp
//margin-bottom: 30px;
} }
} }
} }

54
platform/features/search/res/templates/search.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.
--> -->
<span class="search" <div class="search"
ng-controller="SearchController as controller"> ng-controller="SearchController as controller">
<!-- Search bar input --> <!-- Search bar input -->
<div> <div>
@@ -28,30 +28,38 @@
type="text" type="text"
value="" value=""
ng-keyup="controller.search('searchbarinput')" /> ng-keyup="controller.search('searchbarinput')" />
<!--mct-control key="searchbar"
ng-keyup="controller.search('searchbarinput')">asdf
</mct-control-->
</div> </div>
<!-- Results list --> <!-- This div exists to determine scroll bar location -->
<div class="results"> <div class="search-scroll">
<mct-representation key="'search-item'"
ng-repeat="result in results"
mct-object="result.object"
ng-model="ngModel">
</mct-representation>
</div>
<!-- Loading icon --> <!-- Results list -->
<div class="load-icon" <div class="results">
ng-class="{loading: controller.isLoading()}" <mct-representation key="'search-item'"
ng-if="controller.isLoading()"> ng-repeat="result in results"
<span class="icon wait-spinner"></span> mct-object="result.object"
<span class="title-label">Loading...</span> ng-model="ngModel">
</div> </mct-representation>
</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>
</span> </div>