mirror of
https://github.com/nasa/openmct.git
synced 2025-02-20 17:33:23 +00:00
[Search] Attempt at scroll bars
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
parent
aa17d3034e
commit
0feab1965c
@ -704,7 +704,7 @@ mct-container {
|
||||
.split-layout.vertical > .pane:first-child .holder {
|
||||
position: relative; }
|
||||
|
||||
/* line 42, ../sass/search/_layout.scss */
|
||||
/* line 44, ../sass/search/_layout.scss */
|
||||
.pane.treeview.left .tree-holder {
|
||||
top: 0; }
|
||||
|
||||
|
||||
@ -273,86 +273,90 @@ ul.tree {
|
||||
*****************************************************************************/
|
||||
/* line 23, ../sass/search/_search.scss */
|
||||
.search-holder {
|
||||
overflow-y: auto;
|
||||
padding-right: 5px; }
|
||||
/* line 34, ../sass/search/_search.scss */
|
||||
/* line 36, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-input {
|
||||
margin-top: 10px;
|
||||
width: 100%; }
|
||||
/* line 40, ../sass/search/_search.scss */
|
||||
.search-holder .search .load-icon {
|
||||
position: relative; }
|
||||
/* line 42, ../sass/search/_search.scss */
|
||||
.search-holder .search .load-icon.loading {
|
||||
pointer-events: none;
|
||||
margin-left: 6px; }
|
||||
/* line 46, ../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 56, ../sass/search/_search.scss */
|
||||
.search-holder .search .load-icon.loading .wait-spinner {
|
||||
margin-left: 6px; }
|
||||
/* line 61, ../sass/search/_search.scss */
|
||||
.search-holder .search .load-icon:not(.loading) {
|
||||
cursor: pointer; }
|
||||
/* line 66, ../sass/search/_search.scss */
|
||||
.search-holder .search .results {
|
||||
margin-top: 10px; }
|
||||
/* line 70, ../sass/search/_search.scss */
|
||||
.search-holder .search .results .search-result-item {
|
||||
-moz-transition: background-color 0.25s;
|
||||
-o-transition: background-color 0.25s;
|
||||
-webkit-transition: background-color 0.25s;
|
||||
transition: background-color 0.25s;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 2px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 2px; }
|
||||
/* line 84, ../sass/search/_search.scss */
|
||||
.search-holder .search .results .search-result-item .label {
|
||||
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 {
|
||||
/* line 42, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll {
|
||||
height: 100%;
|
||||
overflow: auto; }
|
||||
/* line 46, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results {
|
||||
margin-top: 10px; }
|
||||
/* line 50, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item {
|
||||
-moz-transition: background-color 0.25s;
|
||||
-o-transition: background-color 0.25s;
|
||||
-webkit-transition: background-color 0.25s;
|
||||
transition: background-color 0.25s;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 2px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 2px; }
|
||||
/* line 64, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item .label {
|
||||
margin-left: 6px; }
|
||||
/* line 68, ../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 90, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item.selected {
|
||||
background: #005177;
|
||||
color: #fff; }
|
||||
/* line 124, ../sass/search/_search.scss */
|
||||
.search-holder .search .results .search-result-item:not(.selected):hover {
|
||||
background: #404040;
|
||||
color: #cccccc; }
|
||||
/* line 127, ../sass/search/_search.scss */
|
||||
.search-holder .search .results .search-result-item:not(.selected):hover .context-trigger {
|
||||
display: block; }
|
||||
/* line 130, ../sass/search/_search.scss */
|
||||
.search-holder .search .results .search-result-item:not(.selected):hover .icon {
|
||||
color: #33ccff; }
|
||||
/* line 138, ../sass/search/_search.scss */
|
||||
.search-holder .search .load-more-button {
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
height: 20px;
|
||||
line-height: 11px;
|
||||
font-size: 0.7em; }
|
||||
/* line 94, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item.selected .view-control {
|
||||
color: #0099cc; }
|
||||
/* line 97, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon {
|
||||
color: #fff; }
|
||||
/* line 104, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover {
|
||||
background: #404040;
|
||||
color: #cccccc; }
|
||||
/* line 107, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
|
||||
display: block; }
|
||||
/* line 110, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
|
||||
color: #33ccff; }
|
||||
/* line 118, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-icon {
|
||||
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; }
|
||||
|
||||
@ -39,6 +39,8 @@
|
||||
|
||||
.pane {
|
||||
&.treeview.left {
|
||||
//overflow: auto; // This one works! (But the bar goes too high)
|
||||
|
||||
.tree-holder {
|
||||
// Want tree holder to start right below the search bar
|
||||
top: 0;
|
||||
@ -46,7 +48,12 @@
|
||||
// Make tree invisible when there are things in search results
|
||||
&.search-in-use {
|
||||
//display: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.search-holder {
|
||||
//overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -26,10 +26,12 @@
|
||||
$rightPadding: 5px;
|
||||
|
||||
//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;
|
||||
|
||||
.search {
|
||||
//height: auto;
|
||||
//overflow: auto;
|
||||
|
||||
.search-input {
|
||||
// Align with the top of the divider bar, below create button
|
||||
@ -37,117 +39,126 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.search-scroll {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.results {
|
||||
// Spacing away from the search input
|
||||
margin-top: 10px;
|
||||
|
||||
&:not(.loading) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.search-result-item {
|
||||
// Include transitions (for the highlights)
|
||||
@include single-transition(background-color, 0.25s);
|
||||
|
||||
.results {
|
||||
// Spacing away from the search input
|
||||
margin-top: 10px;
|
||||
// Space the results from each other
|
||||
margin-bottom: 2px;
|
||||
|
||||
.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;
|
||||
|
||||
.title-label {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
// 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
|
||||
left: $leftMargin + 3px + $iconWidth;
|
||||
// and the right side
|
||||
right: $rightPadding;
|
||||
margin-left: $leftMargin;
|
||||
|
||||
// Size and position the text
|
||||
font-size: .8em;
|
||||
line-height: 17px;
|
||||
.title-label {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
// 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;
|
||||
// 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;
|
||||
}
|
||||
.icon {
|
||||
color: $colorItemTreeIconHover;
|
||||
}
|
||||
|
||||
// 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-more-button {
|
||||
// Space away form the results list
|
||||
margin-top: 5px;
|
||||
.load-icon {
|
||||
position: relative;
|
||||
&.loading {
|
||||
pointer-events: none;
|
||||
margin-left: $leftMargin;
|
||||
|
||||
// Center it
|
||||
position: relative;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
.title-label {
|
||||
// Text styling
|
||||
font-style: italic;
|
||||
font-size: .9em;
|
||||
opacity: 0.5;
|
||||
|
||||
// Make smallish button
|
||||
height: 20px;
|
||||
line-height: 11px;
|
||||
font-size: 0.7em;
|
||||
// Text positioning
|
||||
margin-left: $iconWidth + $leftMargin;
|
||||
line-height: 24px;
|
||||
}
|
||||
.wait-spinner {
|
||||
margin-left: $leftMargin;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.loading) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.load-more-button {
|
||||
// Space away form the results list
|
||||
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
|
||||
//margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -19,7 +19,7 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<span class="search"
|
||||
<div class="search"
|
||||
ng-controller="SearchController as controller">
|
||||
<!-- Search bar input -->
|
||||
<div>
|
||||
@ -28,30 +28,38 @@
|
||||
type="text"
|
||||
value=""
|
||||
ng-keyup="controller.search('searchbarinput')" />
|
||||
<!--mct-control key="searchbar"
|
||||
ng-keyup="controller.search('searchbarinput')">asdf
|
||||
</mct-control-->
|
||||
</div>
|
||||
|
||||
<!-- Results list -->
|
||||
<div class="results">
|
||||
<mct-representation key="'search-item'"
|
||||
ng-repeat="result in results"
|
||||
mct-object="result.object"
|
||||
ng-model="ngModel">
|
||||
</mct-representation>
|
||||
<!-- This div exists to determine scroll bar location -->
|
||||
<div class="search-scroll">
|
||||
|
||||
<!-- Results list -->
|
||||
<div class="results">
|
||||
<mct-representation key="'search-item'"
|
||||
ng-repeat="result in results"
|
||||
mct-object="result.object"
|
||||
ng-model="ngModel">
|
||||
</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>
|
||||
|
||||
</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>
|
||||
</span>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user