ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-31 06:31:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Consolidated treeview elements markup

Browse Source 
open #250
Removed un-needed markup around treeview
includes and mct-reps; moved CSS class defs into
mct-include and mct-rep for search and tree
respectively;
This commit is contained in:
Charles Hacskaylo 2015-11-09 15:42:24 -08:00
parent 55d3a27917
commit 2a201df435
3 changed files with 60 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
platform/commonUI/browse/res/templates/browse.html
View File

@ -33,23 +33,20 @@
mct-object="navigatedObject" mct-object="navigatedObject"
class="flex-elem"> class="flex-elem">
</mct-representation> </mct-representation>
<div class='holder l-flex-col flex-elem search-holder'
ng-class="{ active: treeModel.search, grows: treeModel.search }">
<mct-include key="'search'" <mct-include key="'search'"
ng-model="treeModel" ng-model="treeModel"
class="flex-container"> class="holder l-flex-col flex-elem search-holder"
ng-class="{ active: treeModel.search, grows: treeModel.search }">
</mct-include> </mct-include>
</div>
<div class='holder flex-elem grows vscroll tree-holder'
ng-hide="treeModel.search">
<mct-representation key="'tree'" <mct-representation key="'tree'"
mct-object="domainObject" mct-object="domainObject"
parameters="tree" parameters="tree"
ng-model="treeModel"> ng-model="treeModel"
class="holder flex-elem grows vscroll tree-holder"
ng-hide="treeModel.search">
</mct-representation> </mct-representation>
</div> </div>
</div> </div>
</div>
<mct-splitter class="splitter-treeview mobile-hide"></mct-splitter> <mct-splitter class="splitter-treeview mobile-hide"></mct-splitter>

61
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@ -5111,21 +5111,7 @@ span.req {
* 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.
*****************************************************************************/ *****************************************************************************/
/*.abs.search-holder { /* line 23, ../../../../general/res/sass/search/_search.scss */
//@include test(#990000);
height: $treeSearchInputBarH;
bottom: 0;s
&.active {
height: auto;
bottom: 0;
}
top: 23px;
// Align with the top of the divider bar, below create button
//margin-top: 10px; // CH comment out
z-index:5;
}*/
/* line 38, ../../../../general/res/sass/search/_search.scss */
.clear-icon, .clear-icon,
.menu-icon { .menu-icon {
cursor: pointer; cursor: pointer;
@ -5147,20 +5133,20 @@ span.req {
-webkit-transition-delay: 0; -webkit-transition-delay: 0;
transition-delay: 0; } transition-delay: 0; }
/* line 47, ../../../../general/res/sass/search/_search.scss */ /* line 32, ../../../../general/res/sass/search/_search.scss */
.clear-icon:before { .clear-icon:before {
content: '\e607'; } content: '\e607'; }
/* line 55, ../../../../general/res/sass/search/_search.scss */ /* line 40, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar { .holder-search .search-bar {
font-size: 0.8em; font-size: 0.8em;
max-width: 250px; max-width: 250px;
position: relative; } position: relative; }
/* line 64, ../../../../general/res/sass/search/_search.scss */ /* line 49, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input { .holder-search .search-bar .search-input {
height: 25px; height: 25px;
line-height: 25px; } line-height: 25px; }
/* line 69, ../../../../general/res/sass/search/_search.scss */ /* line 54, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before, .holder-search .search-bar:before,
.holder-search .search-bar .clear-icon, .holder-search .search-bar .clear-icon,
.holder-search .search-bar .menu-icon { .holder-search .search-bar .menu-icon {
@ -5174,16 +5160,16 @@ span.req {
position: absolute; position: absolute;
text-align: center; text-align: center;
top: 4px; } top: 4px; }
/* line 82, ../../../../general/res/sass/search/_search.scss */ /* line 67, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input { .holder-search .search-bar .search-input {
position: relative; position: relative;
width: 100%; width: 100%;
padding-left: 22px !important; padding-left: 22px !important;
padding-right: 44px !important; } padding-right: 44px !important; }
/* line 89, ../../../../general/res/sass/search/_search.scss */ /* line 74, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input input { .holder-search .search-bar .search-input input {
width: inherit; } width: inherit; }
/* line 94, ../../../../general/res/sass/search/_search.scss */ /* line 79, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before { .holder-search .search-bar:before {
content: '\4d'; content: '\4d';
font-family: symbolsfont; font-family: symbolsfont;
@ -5205,40 +5191,40 @@ span.req {
-webkit-transition-delay: 0; -webkit-transition-delay: 0;
transition-delay: 0; transition-delay: 0;
pointer-events: none; } pointer-events: none; }
/* line 104, ../../../../general/res/sass/search/_search.scss */ /* line 89, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:hover:before { .holder-search .search-bar:hover:before {
color: #8c8c8c; } color: #8c8c8c; }
/* line 108, ../../../../general/res/sass/search/_search.scss */ /* line 93, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon { .holder-search .search-bar .clear-icon {
right: 22px; right: 22px;
visibility: hidden; visibility: hidden;
opacity: 0; } opacity: 0; }
/* line 114, ../../../../general/res/sass/search/_search.scss */ /* line 99, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon.show { .holder-search .search-bar .clear-icon.show {
visibility: visible; visibility: visible;
opacity: 1; } opacity: 1; }
/* line 119, ../../../../general/res/sass/search/_search.scss */ /* line 104, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon:hover { .holder-search .search-bar .clear-icon:hover {
color: #8c8c8c; } color: #8c8c8c; }
/* line 124, ../../../../general/res/sass/search/_search.scss */ /* line 109, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon { .holder-search .search-bar .menu-icon {
font-size: 0.8em; font-size: 0.8em;
padding-right: 4px; padding-right: 4px;
right: 4px; right: 4px;
text-align: right; } text-align: right; }
/* line 126, ../../../../general/res/sass/search/_search.scss */ /* line 111, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:before { .holder-search .search-bar .menu-icon:before {
content: '\76'; } content: '\76'; }
/* line 132, ../../../../general/res/sass/search/_search.scss */ /* line 117, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:hover { .holder-search .search-bar .menu-icon:hover {
color: #8c8c8c; } color: #8c8c8c; }
/* line 137, ../../../../general/res/sass/search/_search.scss */ /* line 122, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder { .holder-search .search-bar .search-menu-holder {
float: right; float: right;
left: -20px; left: -20px;
z-index: 70; z-index: 70;
transition: visibility .05s, opacity .05s; } transition: visibility .05s, opacity .05s; }
/* line 145, ../../../../general/res/sass/search/_search.scss */ /* line 130, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display { .holder-search .active-filter-display {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -5246,7 +5232,7 @@ span.req {
line-height: 130%; line-height: 130%;
padding-left: 1.4625em; padding-left: 1.4625em;
font-size: 0.65em; } font-size: 0.65em; }
/* line 158, ../../../../general/res/sass/search/_search.scss */ /* line 139, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display .clear-filters-icon { .holder-search .active-filter-display .clear-filters-icon {
color: #737373; color: #737373;
opacity: 1; opacity: 1;
@ -5254,7 +5240,7 @@ span.req {
position: absolute; position: absolute;
left: 1px; left: 1px;
cursor: pointer; } cursor: pointer; }
/* line 171, ../../../../general/res/sass/search/_search.scss */ /* line 149, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results { .holder-search .search-results {
-moz-transition-property: opacity, visibility; -moz-transition-property: opacity, visibility;
-o-transition-property: opacity, visibility; -o-transition-property: opacity, visibility;
@ -5271,17 +5257,18 @@ span.req {
-moz-transition-delay: 0; -moz-transition-delay: 0;
-o-transition-delay: 0; -o-transition-delay: 0;
-webkit-transition-delay: 0; -webkit-transition-delay: 0;
transition-delay: 0; } transition-delay: 0;
/* line 175, ../../../../general/res/sass/search/_search.scss */ padding-right: 5px; }
/* line 152, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .hint { .holder-search .search-results .hint {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 0.65em; font-size: 0.65em;
opacity: 0.6; } opacity: 0.6; }
/* line 181, ../../../../general/res/sass/search/_search.scss */ /* line 157, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results.active { .holder-search .search-results.active {
visibility: visible; visibility: visible;
opacity: 1; } opacity: 1; }
/* line 185, ../../../../general/res/sass/search/_search.scss */ /* line 161, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .load-more-button { .holder-search .search-results .load-more-button {
-moz-transform: translateX(-50%); -moz-transform: translateX(-50%);
-ms-transform: translateX(-50%); -ms-transform: translateX(-50%);

61
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

@ -5033,21 +5033,7 @@ span.req {
* 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.
*****************************************************************************/ *****************************************************************************/
/*.abs.search-holder { /* line 23, ../../../../general/res/sass/search/_search.scss */
//@include test(#990000);
height: $treeSearchInputBarH;
bottom: 0;s
&.active {
height: auto;
bottom: 0;
}
top: 23px;
// Align with the top of the divider bar, below create button
//margin-top: 10px; // CH comment out
z-index:5;
}*/
/* line 38, ../../../../general/res/sass/search/_search.scss */
.clear-icon, .clear-icon,
.menu-icon { .menu-icon {
cursor: pointer; cursor: pointer;
@ -5069,20 +5055,20 @@ span.req {
-webkit-transition-delay: 0; -webkit-transition-delay: 0;
transition-delay: 0; } transition-delay: 0; }
/* line 47, ../../../../general/res/sass/search/_search.scss */ /* line 32, ../../../../general/res/sass/search/_search.scss */
.clear-icon:before { .clear-icon:before {
content: '\e607'; } content: '\e607'; }
/* line 55, ../../../../general/res/sass/search/_search.scss */ /* line 40, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar { .holder-search .search-bar {
font-size: 0.8em; font-size: 0.8em;
max-width: 250px; max-width: 250px;
position: relative; } position: relative; }
/* line 64, ../../../../general/res/sass/search/_search.scss */ /* line 49, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input { .holder-search .search-bar .search-input {
height: 25px; height: 25px;
line-height: 25px; } line-height: 25px; }
/* line 69, ../../../../general/res/sass/search/_search.scss */ /* line 54, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before, .holder-search .search-bar:before,
.holder-search .search-bar .clear-icon, .holder-search .search-bar .clear-icon,
.holder-search .search-bar .menu-icon { .holder-search .search-bar .menu-icon {
@ -5096,16 +5082,16 @@ span.req {
position: absolute; position: absolute;
text-align: center; text-align: center;
top: 4px; } top: 4px; }
/* line 82, ../../../../general/res/sass/search/_search.scss */ /* line 67, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input { .holder-search .search-bar .search-input {
position: relative; position: relative;
width: 100%; width: 100%;
padding-left: 22px !important; padding-left: 22px !important;
padding-right: 44px !important; } padding-right: 44px !important; }
/* line 89, ../../../../general/res/sass/search/_search.scss */ /* line 74, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input input { .holder-search .search-bar .search-input input {
width: inherit; } width: inherit; }
/* line 94, ../../../../general/res/sass/search/_search.scss */ /* line 79, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before { .holder-search .search-bar:before {
content: '\4d'; content: '\4d';
font-family: symbolsfont; font-family: symbolsfont;
@ -5127,40 +5113,40 @@ span.req {
-webkit-transition-delay: 0; -webkit-transition-delay: 0;
transition-delay: 0; transition-delay: 0;
pointer-events: none; } pointer-events: none; }
/* line 104, ../../../../general/res/sass/search/_search.scss */ /* line 89, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:hover:before { .holder-search .search-bar:hover:before {
color: #8c8c8c; } color: #8c8c8c; }
/* line 108, ../../../../general/res/sass/search/_search.scss */ /* line 93, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon { .holder-search .search-bar .clear-icon {
right: 22px; right: 22px;
visibility: hidden; visibility: hidden;
opacity: 0; } opacity: 0; }
/* line 114, ../../../../general/res/sass/search/_search.scss */ /* line 99, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon.show { .holder-search .search-bar .clear-icon.show {
visibility: visible; visibility: visible;
opacity: 1; } opacity: 1; }
/* line 119, ../../../../general/res/sass/search/_search.scss */ /* line 104, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon:hover { .holder-search .search-bar .clear-icon:hover {
color: #8c8c8c; } color: #8c8c8c; }
/* line 124, ../../../../general/res/sass/search/_search.scss */ /* line 109, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon { .holder-search .search-bar .menu-icon {
font-size: 0.8em; font-size: 0.8em;
padding-right: 4px; padding-right: 4px;
right: 4px; right: 4px;
text-align: right; } text-align: right; }
/* line 126, ../../../../general/res/sass/search/_search.scss */ /* line 111, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:before { .holder-search .search-bar .menu-icon:before {
content: '\76'; } content: '\76'; }
/* line 132, ../../../../general/res/sass/search/_search.scss */ /* line 117, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:hover { .holder-search .search-bar .menu-icon:hover {
color: #8c8c8c; } color: #8c8c8c; }
/* line 137, ../../../../general/res/sass/search/_search.scss */ /* line 122, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder { .holder-search .search-bar .search-menu-holder {
float: right; float: right;
left: -20px; left: -20px;
z-index: 70; z-index: 70;
transition: visibility .05s, opacity .05s; } transition: visibility .05s, opacity .05s; }
/* line 145, ../../../../general/res/sass/search/_search.scss */ /* line 130, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display { .holder-search .active-filter-display {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -5168,7 +5154,7 @@ span.req {
line-height: 130%; line-height: 130%;
padding-left: 1.4625em; padding-left: 1.4625em;
font-size: 0.65em; } font-size: 0.65em; }
/* line 158, ../../../../general/res/sass/search/_search.scss */ /* line 139, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display .clear-filters-icon { .holder-search .active-filter-display .clear-filters-icon {
color: #a6a6a6; color: #a6a6a6;
opacity: 1; opacity: 1;
@ -5176,7 +5162,7 @@ span.req {
position: absolute; position: absolute;
left: 1px; left: 1px;
cursor: pointer; } cursor: pointer; }
/* line 171, ../../../../general/res/sass/search/_search.scss */ /* line 149, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results { .holder-search .search-results {
-moz-transition-property: opacity, visibility; -moz-transition-property: opacity, visibility;
-o-transition-property: opacity, visibility; -o-transition-property: opacity, visibility;
@ -5193,17 +5179,18 @@ span.req {
-moz-transition-delay: 0; -moz-transition-delay: 0;
-o-transition-delay: 0; -o-transition-delay: 0;
-webkit-transition-delay: 0; -webkit-transition-delay: 0;
transition-delay: 0; } transition-delay: 0;
/* line 175, ../../../../general/res/sass/search/_search.scss */ padding-right: 5px; }
/* line 152, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .hint { .holder-search .search-results .hint {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 0.65em; font-size: 0.65em;
opacity: 0.6; } opacity: 0.6; }
/* line 181, ../../../../general/res/sass/search/_search.scss */ /* line 157, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results.active { .holder-search .search-results.active {
visibility: visible; visibility: visible;
opacity: 1; } opacity: 1; }
/* line 185, ../../../../general/res/sass/search/_search.scss */ /* line 161, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .load-more-button { .holder-search .search-results .load-more-button {
-moz-transform: translateX(-50%); -moz-transform: translateX(-50%);
-ms-transform: translateX(-50%); -ms-transform: translateX(-50%);