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

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

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

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

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