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

[Search] Less space above tree

Browse Source 
Removed the awkward spacing between the filetree
and the search bar. Now 'My Items' appears just
below the search bar.
Also added .search-holder to the sass, but haven't
done anything with it yet.
This commit is contained in:
shale
2015-07-23 09:25:10 -07:00
parent 501e426868
commit 8c08f7b93e
5 changed files with 127 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -700,10 +700,14 @@ mct-container {
* 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.
*****************************************************************************/ *****************************************************************************/
/* line 27, ../sass/search/_layout.scss */ /* line 29, ../sass/search/_layout.scss */
.split-layout.vertical > .pane:first-child .holder { .split-layout.vertical > .pane:first-child .holder {
position: relative; } position: relative; }
/* line 42, ../sass/search/_layout.scss */
.pane.treeview.left .tree-holder {
top: 0; }
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space

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

@@ -271,41 +271,44 @@ ul.tree {
* 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.
*****************************************************************************/ *****************************************************************************/
/* line 27, ../sass/search/_search.scss */ /* line 22, ../sass/search/_search.scss */
.search .search-input { .search-holder {
margin-top: 10px; overflow-y: auto; }
width: 100%; } /* line 30, ../sass/search/_search.scss */
/* line 33, ../sass/search/_search.scss */ .search-holder .search .search-input {
.search .results { margin-top: 10px;
margin-top: 10px; } width: 100%; }
/* line 37, ../sass/search/_search.scss */ /* line 36, ../sass/search/_search.scss */
.search .results .search-result-item { .search-holder .search .results {
margin-bottom: 5px; margin-top: 10px; }
background: #005177; /* line 40, ../sass/search/_search.scss */
border-radius: 2px; .search-holder .search .results .search-result-item {
padding-top: 2px; margin-bottom: 5px;
padding-bottom: 1px; } background: #005177;
/* line 47, ../sass/search/_search.scss */ border-radius: 2px;
.search .results .search-result-item .label { padding-top: 2px;
margin-left: 6px; } padding-bottom: 1px; }
/* line 56, ../sass/search/_search.scss */ /* line 50, ../sass/search/_search.scss */
.search .results .search-result-item .label .title-label { .search-holder .search .results .search-result-item .label {
display: inline-block; margin-left: 6px; }
position: absolute; /* line 59, ../sass/search/_search.scss */
width: auto; .search-holder .search .results .search-result-item .label .title-label {
left: 29px; display: inline-block;
right: 0; position: absolute;
font-size: .8em; width: auto;
line-height: 17px; left: 29px;
overflow: hidden; right: 0;
text-overflow: ellipsis; font-size: .8em;
white-space: nowrap; } line-height: 17px;
/* line 79, ../sass/search/_search.scss */ overflow: hidden;
.search .load-more-button { text-overflow: ellipsis;
margin-top: 5px; white-space: nowrap; }
position: relative; /* line 82, ../sass/search/_search.scss */
left: 25%; .search-holder .search .load-more-button {
width: 50%; margin-top: 5px;
height: 20px; position: relative;
line-height: 11px; left: 25%;
font-size: 0.7em; } width: 50%;
height: 20px;
line-height: 11px;
font-size: 0.7em; }

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

@@ -20,6 +20,8 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
// Overrides some styling in user-environ/_layout.scss
.split-layout { .split-layout {
&.vertical { &.vertical {
>.pane { >.pane {
@@ -32,6 +34,14 @@
} }
} }
} }
} }
} }
.pane {
&.treeview.left {
.tree-holder {
// Want tree holder to start right below the search bar
top: 0;
}
}
}

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

@@ -19,75 +19,79 @@
* 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.
*****************************************************************************/ *****************************************************************************/
.search-holder {
.search { //position: relative;
$iconWidth: 20px; overflow-y: auto; // This should make it scroll, but isn't wokring :(
$leftMargin: 6px;
.search-input { .search {
// Align with the top of the divider bar, below create button $iconWidth: 20px;
margin-top: 10px; $leftMargin: 6px;
width: 100%;
}
.results {
// Spacing away from the search input
margin-top: 10px;
.search-result-item { .search-input {
// Space the results from each other // Align with the top of the divider bar, below create button
margin-bottom: 5px; margin-top: 10px;
width: 100%;
// Make the highlights the right color and shape }
background: $colorKeySelectedBg; // Later make this apply to only certain ones
border-radius: 2px; .results {
padding-top: 2px; // Spacing away from the search input
padding-bottom: 1px; margin-top: 10px;
.label { .search-result-item {
// Give some padding away from the left side // Space the results from each other
margin-left: $leftMargin; margin-bottom: 5px;
.type-icon { // Make the highlights the right color and shape
.icon { background: $colorKeySelectedBg; // Later make this apply to only certain ones
} border-radius: 2px;
} padding-top: 2px;
padding-bottom: 1px;
.title-label {
display: inline-block; .label {
position: absolute;
// Give some padding away from the left side // Give some padding away from the left side
width: auto; margin-left: $leftMargin;
left: $leftMargin + 3px + $iconWidth;
right: 0; .type-icon {
.icon {
// Size and position the text }
font-size: .8em; }
line-height: 17px;
.title-label {
// Hide overflow text display: inline-block;
// Only works when width is defined position: absolute;
overflow: hidden;
text-overflow: ellipsis; // Give some padding away from the left side
white-space: nowrap; width: auto;
left: $leftMargin + 3px + $iconWidth;
right: 0;
// Size and position the text
font-size: .8em;
line-height: 17px;
// Hide overflow text
// Only works when width is defined
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
} }
} }
}
.load-more-button {
.load-more-button { // Space away form the results list
// Space away form the results list margin-top: 5px;
margin-top: 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; }
} }
} }

2
platform/features/search/res/templates/search.html
View File

@@ -38,7 +38,7 @@
</mct-representation> </mct-representation>
</div> </div>
<!-- Load more? --> <!-- Load more -->
<div ng-if="controller.areMore()"> <div ng-if="controller.areMore()">
<button class="load-more-button btn very-subtle" <button class="load-more-button btn very-subtle"
ng-click="controller.loadMore()"> ng-click="controller.loadMore()">