[Search, Mobile] Merge

Merged search/master into mobile. Adjusted the search bar to work on branch and fit accordingly.
2015-08-25 15:27:21 -07:00
parent 0fa330adff 509badb225
commit e8bc9ecc1a
37 changed files with 2141 additions and 291 deletions
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -24,15 +24,25 @@
    <mct-include key="'topbar-browse'"></mct-include>
    <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
        <mct-split-pane class='contents abs' anchor='left'>
-            <div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'>
-                <div class='holder tree-holder abs mobile-tree-holder'>
+            <div
+                class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'
+                >
+                <mct-representation key="'create-button'" mct-object="navigatedObject">
+                </mct-representation>
+                <div class='holder search-holder abs'
+                     ng-class="{active: treeModel.search}">
+                    <mct-representation key="'search'"
+                                 mct-object="domainObject"
+                                 ng-model="treeModel">
+                    </mct-representation>
+                </div>
+                <div class='holder tree-holder abs mobile-tree-holder'
+                     ng-hide="treeModel.search">
                    <mct-representation key="'tree'"
                                        mct-object="domainObject"
                                        ng-model="treeModel">
                    </mct-representation>
                </div>
-                    <mct-representation key="'create-button'" mct-object="navigatedObject">
-                    </mct-representation>
            </div>

            <mct-splitter class="mobile-hide"></mct-splitter>
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -98,6 +98,7 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /* CONSTANTS */
+/*****************************************************************************
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -692,44 +693,46 @@ mct-container {
      position: absolute;
      bottom: 5px; }
  /* line 232, ../sass/user-environ/_layout.scss */
+  .pane.treeview.left .search-holder {
+    top: 34px; }
+  /* line 235, ../sass/user-environ/_layout.scss */
  .pane.treeview.left .tree-holder {
    overflow: auto;
-    top: 34px;
-    padding-right: 5px; }
-  /* line 240, ../sass/user-environ/_layout.scss */
+    top: 64px; }
+  /* line 242, ../sass/user-environ/_layout.scss */
  .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
  .pane.items .object-browse-bar .right.abs,
  .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
  .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
    top: auto; }
-  /* line 245, ../sass/user-environ/_layout.scss */
+  /* line 247, ../sass/user-environ/_layout.scss */
  .pane.items .object-holder {
    top: 34px; }
-  /* line 249, ../sass/user-environ/_layout.scss */
+  /* line 251, ../sass/user-environ/_layout.scss */
  .pane .object-holder {
    overflow: auto; }

-/* line 257, ../sass/user-environ/_layout.scss */
+/* line 259, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
  margin-top: 5px; }
-  /* line 260, ../sass/user-environ/_layout.scss */
+  /* line 262, ../sass/user-environ/_layout.scss */
  .split-layout.horizontal > .pane:first-child {
    margin-top: 0; }
-/* line 267, ../sass/user-environ/_layout.scss */
+/* line 269, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
  margin-left: 5px; }
-  /* line 270, ../sass/user-environ/_layout.scss */
+  /* line 272, ../sass/user-environ/_layout.scss */
  .split-layout.vertical > .pane > .holder {
    left: 0;
    right: 0; }
-  /* line 274, ../sass/user-environ/_layout.scss */
+  /* line 276, ../sass/user-environ/_layout.scss */
  .split-layout.vertical > .pane:first-child {
    margin-left: 0; }
-    /* line 276, ../sass/user-environ/_layout.scss */
+    /* line 278, ../sass/user-environ/_layout.scss */
    .split-layout.vertical > .pane:first-child .holder {
      right: 3px; }

-/* line 285, ../sass/user-environ/_layout.scss */
+/* line 287, ../sass/user-environ/_layout.scss */
 .vscroll {
  overflow-y: auto; }

@@ -812,7 +815,7 @@ mct-container {

 /* line 82, ../sass/mobile/_layout.scss */
 .mobile-tree-holder {
-  top: 30px; }
+  top: 50px; }

@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
  /* line 91, ../sass/mobile/_layout.scss */
@@ -2851,22 +2854,23 @@ label.checkbox.custom {
        color: #d9d9d9;
        line-height: 1.5rem;
        padding: 3px 10px 3px 30px;
+        position: relative;
        white-space: nowrap; }
-        /* line 46, ../sass/controls/_menus.scss */
+        /* line 47, ../sass/controls/_menus.scss */
        .menu-element .menu ul li:first-child {
          border: none; }
-        /* line 49, ../sass/controls/_menus.scss */
+        /* line 50, ../sass/controls/_menus.scss */
        .menu-element .menu ul li:hover {
          background: #737373;
          color: #fff; }
-          /* line 55, ../sass/controls/_menus.scss */
+          /* line 56, ../sass/controls/_menus.scss */
          .menu-element .menu ul li:hover .icon {
            color: #33ccff; }
-        /* line 63, ../sass/controls/_menus.scss */
+        /* line 64, ../sass/controls/_menus.scss */
        .menu-element .menu ul li .type-icon {
          left: 10px; }
-  /* line 70, ../sass/controls/_menus.scss */
-  .menu-element .context-menu,
+  /* line 71, ../sass/controls/_menus.scss */
+  .menu-element .context-menu, .menu-element .checkbox-menu,
  .menu-element .super-menu {
    pointer-events: auto;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOGM4YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
@@ -2889,35 +2893,56 @@ label.checkbox.custom {
    color: #999;
    display: inline-block; }
    /* line 171, ../sass/_mixins.scss */
-    .menu-element .context-menu.btn-menu .invoke-menu,
+    .menu-element .context-menu.btn-menu .invoke-menu, .menu-element .btn-menu.checkbox-menu .invoke-menu,
    .menu-element .super-menu.btn-menu .invoke-menu {
      color: #b0b0b0; }
-    /* line 78, ../sass/controls/_menus.scss */
-    .menu-element .context-menu ul li,
+    /* line 79, ../sass/controls/_menus.scss */
+    .menu-element .context-menu ul li, .menu-element .checkbox-menu ul li,
    .menu-element .super-menu ul li {
      padding-left: 25px; }
-      /* line 80, ../sass/controls/_menus.scss */
-      .menu-element .context-menu ul li a,
+      /* line 81, ../sass/controls/_menus.scss */
+      .menu-element .context-menu ul li a, .menu-element .checkbox-menu ul li a,
      .menu-element .super-menu ul li a {
        color: white; }
-      /* line 81, ../sass/controls/_menus.scss */
-      .menu-element .context-menu ul li .icon,
+      /* line 84, ../sass/controls/_menus.scss */
+      .menu-element .context-menu ul li .icon, .menu-element .checkbox-menu ul li .icon,
      .menu-element .super-menu ul li .icon {
        color: #24c8ff; }
-      /* line 84, ../sass/controls/_menus.scss */
-      .menu-element .context-menu ul li .type-icon,
+      /* line 87, ../sass/controls/_menus.scss */
+      .menu-element .context-menu ul li .type-icon, .menu-element .checkbox-menu ul li .type-icon,
      .menu-element .super-menu ul li .type-icon {
        left: 5px; }
-      /* line 87, ../sass/controls/_menus.scss */
-      .menu-element .context-menu ul li:hover .icon,
+      /* line 90, ../sass/controls/_menus.scss */
+      .menu-element .context-menu ul li:hover .icon, .menu-element .checkbox-menu ul li:hover .icon,
      .menu-element .super-menu ul li:hover .icon {
        color: #3dcfff; }
-  /* line 94, ../sass/controls/_menus.scss */
+  /* line 99, ../sass/controls/_menus.scss */
+  .menu-element .checkbox-menu ul li {
+    padding-left: 50px; }
+    /* line 101, ../sass/controls/_menus.scss */
+    .menu-element .checkbox-menu ul li .checkbox {
+      position: absolute;
+      left: 5px;
+      top: 0.53333rem; }
+      /* line 106, ../sass/controls/_menus.scss */
+      .menu-element .checkbox-menu ul li .checkbox em {
+        height: 0.7rem;
+        width: 0.7rem; }
+        /* line 109, ../sass/controls/_menus.scss */
+        .menu-element .checkbox-menu ul li .checkbox em:before {
+          font-size: 7px !important;
+          height: 0.7rem;
+          width: 0.7rem;
+          line-height: 0.7rem; }
+    /* line 117, ../sass/controls/_menus.scss */
+    .menu-element .checkbox-menu ul li .type-icon {
+      left: 25px; }
+  /* line 123, ../sass/controls/_menus.scss */
  .menu-element .super-menu {
    display: block;
    width: 500px;
    height: 480px; }
-    /* line 104, ../sass/controls/_menus.scss */
+    /* line 133, ../sass/controls/_menus.scss */
    .menu-element .super-menu .contents {
      overflow: hidden;
      position: absolute;
@@ -2927,12 +2952,12 @@ label.checkbox.custom {
      left: 5px;
      width: auto;
      height: auto; }
-    /* line 107, ../sass/controls/_menus.scss */
+    /* line 136, ../sass/controls/_menus.scss */
    .menu-element .super-menu .pane {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
-      /* line 109, ../sass/controls/_menus.scss */
+      /* line 138, ../sass/controls/_menus.scss */
      .menu-element .super-menu .pane.left {
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        left: 0;
@@ -2941,23 +2966,23 @@ label.checkbox.custom {
        width: 50%;
        overflow-x: hidden;
        overflow-y: auto; }
-        /* line 119, ../sass/controls/_menus.scss */
+        /* line 148, ../sass/controls/_menus.scss */
        .menu-element .super-menu .pane.left ul li {
          -moz-border-radius: 3px;
          -webkit-border-radius: 3px;
          border-radius: 3px;
          padding-left: 30px;
          border-top: none; }
-      /* line 126, ../sass/controls/_menus.scss */
+      /* line 155, ../sass/controls/_menus.scss */
      .menu-element .super-menu .pane.right {
        left: auto;
        right: 0;
        padding: 25px;
        width: 50%; }
-        /* line 132, ../sass/controls/_menus.scss */
+        /* line 161, ../sass/controls/_menus.scss */
        .menu-element .super-menu .pane.right .icon {
          color: #fff; }
-    /* line 139, ../sass/controls/_menus.scss */
+    /* line 168, ../sass/controls/_menus.scss */
    .menu-element .super-menu .menu-item-description .desc-area.icon {
      position: relative;
      font-size: 8em;
@@ -2966,40 +2991,40 @@ label.checkbox.custom {
      line-height: 150px;
      margin-bottom: 25px;
      text-align: center; }
-    /* line 149, ../sass/controls/_menus.scss */
+    /* line 178, ../sass/controls/_menus.scss */
    .menu-element .super-menu .menu-item-description .desc-area.title {
      color: #fff;
      font-size: 1.2em;
      margin-bottom: 0.5em; }
-    /* line 154, ../sass/controls/_menus.scss */
+    /* line 183, ../sass/controls/_menus.scss */
    .menu-element .super-menu .menu-item-description .desc-area.description {
      color: #fff;
      font-size: 0.8em;
      line-height: 1.5em; }
-  /* line 163, ../sass/controls/_menus.scss */
-  .menu-element .context-menu {
+  /* line 192, ../sass/controls/_menus.scss */
+  .menu-element .context-menu, .menu-element .checkbox-menu {
    font-size: 0.80rem; }

-/* line 168, ../sass/controls/_menus.scss */
+/* line 197, ../sass/controls/_menus.scss */
 .context-menu-holder {
  pointer-events: none;
  position: absolute;
  height: 200px;
  width: 170px;
  z-index: 70; }
-  /* line 174, ../sass/controls/_menus.scss */
+  /* line 203, ../sass/controls/_menus.scss */
  .context-menu-holder .context-menu-wrapper {
    position: absolute;
    height: 100%;
    width: 100%; }
-  /* line 181, ../sass/controls/_menus.scss */
-  .context-menu-holder.go-left .context-menu {
+  /* line 210, ../sass/controls/_menus.scss */
+  .context-menu-holder.go-left .context-menu, .context-menu-holder.go-left .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-left .checkbox-menu {
    right: 0; }
-  /* line 182, ../sass/controls/_menus.scss */
-  .context-menu-holder.go-up .context-menu {
+  /* line 213, ../sass/controls/_menus.scss */
+  .context-menu-holder.go-up .context-menu, .context-menu-holder.go-up .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-up .checkbox-menu {
    bottom: 0; }

-/* line 185, ../sass/controls/_menus.scss */
+/* line 218, ../sass/controls/_menus.scss */
 .btn-bar.right .menu,
 .menus-to-left .menu {
  left: auto;
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -301,6 +301,252 @@ ul.tree {
  ul.tree ul.tree {
    margin-left: 15px; }

+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 23, ../sass/search/_search.scss */
+.abs.search-holder {
+  height: 25px;
+  bottom: 0;
+  top: 23px;
+  z-index: 5; }
+  /* line 27, ../sass/search/_search.scss */
+  .abs.search-holder.active {
+    height: auto;
+    bottom: 0; }
+
+/* line 38, ../sass/search/_search.scss */
+.search {
+  display: flex;
+  flex-direction: column;
+  height: 100%; }
+  /* line 49, ../sass/search/_search.scss */
+  .search .search-bar {
+    font-size: 0.8em;
+    position: relative;
+    width: 100%; }
+    /* line 66, ../sass/search/_search.scss */
+    .search .search-bar .search-input {
+      height: 25px;
+      line-height: 25px;
+      padding-top: 0;
+      padding-bottom: 0; }
+    /* line 73, ../sass/search/_search.scss */
+    .search .search-bar .search-icon,
+    .search .search-bar .clear-icon,
+    .search .search-bar .menu-icon {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      color: #737373;
+      height: 17px;
+      width: 17px;
+      line-height: 17px;
+      position: absolute;
+      text-align: center;
+      top: 4px; }
+    /* line 86, ../sass/search/_search.scss */
+    .search .search-bar .clear-icon,
+    .search .search-bar .menu-icon {
+      cursor: pointer;
+      transition: color .25s; }
+    /* line 93, ../sass/search/_search.scss */
+    .search .search-bar .search-input {
+      position: relative;
+      width: 100%;
+      padding-left: 22px !important;
+      padding-right: 44px !important; }
+      /* line 100, ../sass/search/_search.scss */
+      .search .search-bar .search-input input {
+        width: 100%; }
+    /* line 105, ../sass/search/_search.scss */
+    .search .search-bar .search-icon {
+      color: #737373;
+      left: 3px;
+      transition: visibility .15s, opacity .15s, color .2s;
+      pointer-events: none; }
+    /* line 125, ../sass/search/_search.scss */
+    .search .search-bar .search-input:hover + div.search-icon {
+      color: #a6a6a6; }
+    /* line 129, ../sass/search/_search.scss */
+    .search .search-bar .clear-icon {
+      right: 22px;
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility .15s, opacity .15s, color .2s; }
+      /* line 138, ../sass/search/_search.scss */
+      .search .search-bar .clear-icon.content {
+        visibility: visible;
+        opacity: 1; }
+      /* line 143, ../sass/search/_search.scss */
+      .search .search-bar .clear-icon:hover {
+        color: #a6a6a6; }
+    /* line 148, ../sass/search/_search.scss */
+    .search .search-bar .menu-icon {
+      font-size: 0.8em;
+      padding-right: 4px;
+      right: 4px;
+      text-align: right; }
+      /* line 154, ../sass/search/_search.scss */
+      .search .search-bar .menu-icon:hover {
+        color: #a6a6a6; }
+    /* line 159, ../sass/search/_search.scss */
+    .search .search-bar .search-menu-holder {
+      float: right;
+      left: -20px;
+      z-index: 1;
+      transition: visibility .05s, opacity .05s; }
+      /* line 169, ../sass/search/_search.scss */
+      .search .search-bar .search-menu-holder.off {
+        visibility: hidden;
+        opacity: 0; }
+    /* line 176, ../sass/search/_search.scss */
+    .search .search-bar .menu-icon:hover + div.search-menu-holder {
+      visibility: visible; }
+    /* line 179, ../sass/search/_search.scss */
+    .search .search-bar div.search-menu-holder:hover {
+      visibility: visible; }
+  /* line 184, ../sass/search/_search.scss */
+  .search .active-filter-display {
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    line-height: 130%;
+    padding: 5px 0;
+    padding-left: 1.4625em;
+    font-size: 0.65em;
+    margin-top: 3px; }
+    /* line 199, ../sass/search/_search.scss */
+    .search .active-filter-display .clear-filters-icon {
+      opacity: 0.4;
+      font-size: 0.8em;
+      position: absolute;
+      left: 1px;
+      cursor: pointer; }
+    /* line 210, ../sass/search/_search.scss */
+    .search .active-filter-display.off {
+      visibility: hidden;
+      opacity: 0;
+      height: 0;
+      margin: 0;
+      padding: 0;
+      border: 0; }
+  /* line 220, ../sass/search/_search.scss */
+  .search .search-scroll {
+    order: 3;
+    margin-top: 4px;
+    overflow-y: auto;
+    top: auto;
+    height: auto;
+    max-height: 100%;
+    position: relative; }
+    /* line 235, ../sass/search/_search.scss */
+    .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 249, ../sass/search/_search.scss */
+      .search .search-scroll .results .search-result-item .label {
+        margin-left: 6px; }
+        /* line 253, ../sass/search/_search.scss */
+        .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 275, ../sass/search/_search.scss */
+      .search .search-scroll .results .search-result-item.selected {
+        background: #005177;
+        color: #fff; }
+        /* line 279, ../sass/search/_search.scss */
+        .search .search-scroll .results .search-result-item.selected .view-control {
+          color: #0099cc; }
+        /* line 282, ../sass/search/_search.scss */
+        .search .search-scroll .results .search-result-item.selected .label .type-icon {
+          color: #fff; }
+      /* line 287, ../sass/search/_search.scss */
+      .search .search-scroll .results .search-result-item .label .type-icon .l-icon-link {
+        text-shadow: black 0 1px 2px;
+        z-index: 2;
+        color: #49dedb;
+        font-size: 8px;
+        line-height: 8px;
+        height: 8px;
+        width: 8px;
+        margin-left: -25px; }
+      /* line 296, ../sass/search/_search.scss */
+      .search .search-scroll .results .search-result-item:not(.selected):hover {
+        background: #404040;
+        color: #cccccc; }
+        /* line 299, ../sass/search/_search.scss */
+        .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
+          display: block; }
+        /* line 302, ../sass/search/_search.scss */
+        .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
+          color: #33ccff; }
+    /* line 310, ../sass/search/_search.scss */
+    .search .search-scroll .load-icon {
+      position: relative; }
+      /* line 312, ../sass/search/_search.scss */
+      .search .search-scroll .load-icon.loading {
+        pointer-events: none;
+        margin-left: 6px; }
+        /* line 316, ../sass/search/_search.scss */
+        .search .search-scroll .load-icon.loading .title-label {
+          font-style: italic;
+          font-size: .9em;
+          opacity: 0.5;
+          margin-left: 26px;
+          line-height: 24px; }
+        /* line 326, ../sass/search/_search.scss */
+        .search .search-scroll .load-icon.loading .wait-spinner {
+          margin-left: 6px; }
+      /* line 331, ../sass/search/_search.scss */
+      .search .search-scroll .load-icon:not(.loading) {
+        cursor: pointer; }
+    /* line 336, ../sass/search/_search.scss */
+    .search .search-scroll .load-more-button {
+      margin-top: 5px 0;
+      font-size: 0.8em;
+      position: relative;
+      left: 50%;
+      margin-left: -45px;
+      text-align: center;
+      width: 90px;
+      white-space: nowrap; }
+
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
--- a/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
+++ b/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
@@ -1,19 +1,27 @@
 {
 	"metadata": {
-		"name": "WTD Symbols v2.1",
-		"lastOpened": 1439844340068,
-		"created": 1439844318831
+		"name": "WTD Symbols v2.2",
+		"lastOpened": 1439948744240,
+		"created": 1439948734037
 	},
 	"iconSets": [
 		{
 			"selection": [
+				{
+					"order": 82,
+					"id": 84,
+					"prevSize": 32,
+					"code": 58887,
+					"name": "icon-x-in-circle",
+					"tempChar": ""
+				},
 				{
 					"order": 77,
 					"id": 83,
 					"prevSize": 32,
 					"code": 58881,
 					"name": "icon-datatable",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 78,
@@ -21,7 +29,7 @@
 					"prevSize": 32,
 					"code": 58882,
 					"name": "icon-tabular-scrolling",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 79,
@@ -29,7 +37,7 @@
 					"prevSize": 32,
 					"code": 58884,
 					"name": "icon-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 80,
@@ -37,7 +45,7 @@
 					"prevSize": 32,
 					"code": 58885,
 					"name": "icon-calendar",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 81,
@@ -45,7 +53,7 @@
 					"prevSize": 32,
 					"code": 58886,
 					"name": "icon-paint-bucket",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 1,
@@ -53,7 +61,7 @@
 					"prevSize": 32,
 					"code": 123,
 					"name": "icon-pointer-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 3,
@@ -61,7 +69,7 @@
 					"prevSize": 32,
 					"code": 125,
 					"name": "icon-pointer-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 4,
@@ -69,7 +77,7 @@
 					"prevSize": 32,
 					"code": 80,
 					"name": "icon-person",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 5,
@@ -77,7 +85,7 @@
 					"prevSize": 32,
 					"code": 232,
 					"name": "icon-chain-links",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 6,
@@ -85,7 +93,7 @@
 					"prevSize": 32,
 					"code": 115,
 					"name": "icon-database-in-brackets",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 7,
@@ -93,7 +101,7 @@
 					"prevSize": 32,
 					"code": 114,
 					"name": "icon-refresh",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 8,
@@ -101,7 +109,7 @@
 					"prevSize": 32,
 					"code": 108,
 					"name": "icon-lock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 9,
@@ -109,7 +117,7 @@
 					"prevSize": 32,
 					"code": 51,
 					"name": "icon-box-with-dashed-lines",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 10,
@@ -117,7 +125,7 @@
 					"prevSize": 32,
 					"code": 58880,
 					"name": "icon-box-with-arrow-cursor",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 11,
@@ -125,7 +133,7 @@
 					"prevSize": 32,
 					"code": 65,
 					"name": "icon-activity-mode",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 12,
@@ -133,7 +141,7 @@
 					"prevSize": 32,
 					"code": 97,
 					"name": "icon-activity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 13,
@@ -141,7 +149,7 @@
 					"prevSize": 32,
 					"code": 33,
 					"name": "icon-alert-rect",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 14,
@@ -149,7 +157,7 @@
 					"prevSize": 32,
 					"code": 58883,
 					"name": "icon-alert-triangle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 15,
@@ -157,7 +165,7 @@
 					"prevSize": 32,
 					"code": 238,
 					"name": "icon-arrow-double-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 16,
@@ -165,7 +173,7 @@
 					"prevSize": 32,
 					"code": 235,
 					"name": "icon-arrow-double-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 2,
@@ -173,7 +181,7 @@
 					"prevSize": 32,
 					"code": 118,
 					"name": "icon-arrow-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 19,
@@ -181,7 +189,7 @@
 					"prevSize": 32,
 					"code": 60,
 					"name": "icon-arrow-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 20,
@@ -189,7 +197,7 @@
 					"prevSize": 32,
 					"code": 62,
 					"name": "icon-arrow-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 21,
@@ -197,7 +205,7 @@
 					"prevSize": 32,
 					"code": 236,
 					"name": "icon-arrow-tall-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 22,
@@ -205,7 +213,7 @@
 					"prevSize": 32,
 					"code": 237,
 					"name": "icon-arrow-tall-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 23,
@@ -213,7 +221,7 @@
 					"prevSize": 32,
 					"code": 94,
 					"name": "icon-arrow-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 24,
@@ -221,7 +229,7 @@
 					"prevSize": 32,
 					"code": 73,
 					"name": "icon-arrows-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 25,
@@ -229,7 +237,7 @@
 					"prevSize": 32,
 					"code": 58893,
 					"name": "icon-arrows-right-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 33,
@@ -237,7 +245,7 @@
 					"prevSize": 32,
 					"code": 53,
 					"name": "icon-arrows-up-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 26,
@@ -245,7 +253,7 @@
 					"prevSize": 32,
 					"code": 42,
 					"name": "icon-asterisk",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 27,
@@ -253,7 +261,7 @@
 					"prevSize": 32,
 					"code": 72,
 					"name": "icon-autoflow-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 28,
@@ -261,7 +269,7 @@
 					"prevSize": 32,
 					"code": 224,
 					"name": "icon-box-round-corners",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 29,
@@ -269,7 +277,7 @@
 					"prevSize": 32,
 					"code": 50,
 					"name": "icon-check",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 30,
@@ -277,7 +285,7 @@
 					"prevSize": 32,
 					"code": 67,
 					"name": "icon-clock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 31,
@@ -285,7 +293,7 @@
 					"prevSize": 32,
 					"code": 46,
 					"name": "icon-connectivity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 32,
@@ -293,7 +301,7 @@
 					"prevSize": 32,
 					"code": 100,
 					"name": "icon-database-query",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 17,
@@ -301,7 +309,7 @@
 					"prevSize": 32,
 					"code": 68,
 					"name": "icon-database",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 35,
@@ -309,7 +317,7 @@
 					"prevSize": 32,
 					"code": 81,
 					"name": "icon-dictionary",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 36,
@@ -317,7 +325,7 @@
 					"prevSize": 32,
 					"code": 242,
 					"name": "icon-duplicate",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 37,
@@ -325,7 +333,7 @@
 					"prevSize": 32,
 					"code": 102,
 					"name": "icon-folder-new",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 38,
@@ -333,7 +341,7 @@
 					"prevSize": 32,
 					"code": 70,
 					"name": "icon-folder",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 39,
@@ -341,7 +349,7 @@
 					"prevSize": 32,
 					"code": 95,
 					"name": "icon-fullscreen-collapse",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 40,
@@ -349,7 +357,7 @@
 					"prevSize": 32,
 					"code": 122,
 					"name": "icon-fullscreen-expand",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 41,
@@ -357,7 +365,7 @@
 					"prevSize": 32,
 					"code": 71,
 					"name": "icon-gear",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 49,
@@ -365,7 +373,7 @@
 					"prevSize": 32,
 					"code": 227,
 					"name": "icon-image",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 42,
@@ -373,7 +381,7 @@
 					"prevSize": 32,
 					"code": 225,
 					"name": "icon-layers",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 43,
@@ -381,7 +389,7 @@
 					"prevSize": 32,
 					"code": 76,
 					"name": "icon-layout",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 44,
@@ -389,7 +397,7 @@
 					"prevSize": 32,
 					"code": 226,
 					"name": "icon-line-horz",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 75,
@@ -397,7 +405,7 @@
 					"prevSize": 32,
 					"code": 244,
 					"name": "icon-link",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 46,
@@ -405,7 +413,7 @@
 					"prevSize": 32,
 					"code": 88,
 					"name": "icon-magnify-in",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 47,
@@ -413,7 +421,7 @@
 					"prevSize": 32,
 					"code": 89,
 					"name": "icon-magnify-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 48,
@@ -421,7 +429,7 @@
 					"prevSize": 32,
 					"code": 77,
 					"name": "icon-magnify",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 34,
@@ -429,7 +437,7 @@
 					"prevSize": 32,
 					"code": 109,
 					"name": "icon-menu",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 50,
@@ -437,7 +445,7 @@
 					"prevSize": 32,
 					"code": 243,
 					"name": "icon-move",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 51,
@@ -445,7 +453,7 @@
 					"prevSize": 32,
 					"code": 121,
 					"name": "icon-new-window",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 52,
@@ -453,7 +461,7 @@
 					"prevSize": 32,
 					"code": 111,
 					"name": "icon-object",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 73,
@@ -461,7 +469,7 @@
 					"prevSize": 32,
 					"code": 63,
 					"name": "icon-object-unknown",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 53,
@@ -469,7 +477,7 @@
 					"prevSize": 32,
 					"code": 86,
 					"name": "icon-packet",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 54,
@@ -477,7 +485,7 @@
 					"prevSize": 32,
 					"code": 234,
 					"name": "icon-page",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 55,
@@ -485,7 +493,7 @@
 					"prevSize": 32,
 					"code": 241,
 					"name": "icon-pause",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 56,
@@ -493,7 +501,7 @@
 					"prevSize": 32,
 					"code": 112,
 					"name": "icon-pencil",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 65,
@@ -501,7 +509,7 @@
 					"prevSize": 32,
 					"code": 79,
 					"name": "icon-people",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 57,
@@ -509,7 +517,7 @@
 					"prevSize": 32,
 					"code": 239,
 					"name": "icon-play",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 58,
@@ -517,7 +525,7 @@
 					"prevSize": 32,
 					"code": 233,
 					"name": "icon-plot-resource",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 59,
@@ -525,7 +533,7 @@
 					"prevSize": 32,
 					"code": 43,
 					"name": "icon-plus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 60,
@@ -533,7 +541,7 @@
 					"prevSize": 32,
 					"code": 45,
 					"name": "icon-minus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 61,
@@ -541,7 +549,7 @@
 					"prevSize": 32,
 					"code": 54,
 					"name": "icon-sine",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 62,
@@ -549,7 +557,7 @@
 					"prevSize": 32,
 					"code": 228,
 					"name": "icon-T",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 63,
@@ -557,7 +565,7 @@
 					"prevSize": 32,
 					"code": 116,
 					"name": "icon-telemetry-panel",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 64,
@@ -565,7 +573,7 @@
 					"prevSize": 32,
 					"code": 84,
 					"name": "icon-telemetry",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 18,
@@ -573,7 +581,7 @@
 					"prevSize": 32,
 					"code": 246,
 					"name": "icon-thumbs-strip",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 67,
@@ -581,7 +589,7 @@
 					"prevSize": 32,
 					"code": 83,
 					"name": "icon-timeline",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 68,
@@ -589,7 +597,7 @@
 					"prevSize": 32,
 					"code": 245,
 					"name": "icon-timer",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 69,
@@ -597,7 +605,7 @@
 					"prevSize": 32,
 					"code": 90,
 					"name": "icon-trash",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 70,
@@ -605,7 +613,7 @@
 					"prevSize": 32,
 					"code": 229,
 					"name": "icon-two-parts-both",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 71,
@@ -613,7 +621,7 @@
 					"prevSize": 32,
 					"code": 231,
 					"name": "icon-two-parts-one-only",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 72,
@@ -621,7 +629,7 @@
 					"prevSize": 32,
 					"code": 120,
 					"name": "icon-x-heavy",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 66,
@@ -629,7 +637,7 @@
 					"prevSize": 32,
 					"code": 58946,
 					"name": "icon-x",
-					"tempChar": ""
+					"tempChar": ""
 				}
 			],
 			"id": 2,
@@ -644,6 +652,21 @@
 			"height": 1024,
 			"prevSize": 32,
 			"icons": [
+				{
+					"id": 84,
+					"paths": [
+						"M512 0c-282.8 0-512 229.2-512 512s229.2 512 512 512 512-229.2 512-512-229.2-512-512-512zM832 704l-128 128-192-192-192 192-128-128 192-192-192-192 128-128 192 192 192-192 128 128-192 192 192 192z"
+					],
+					"attrs": [],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-x-in-circle"
+					],
+					"colorPermutations": {
+						"16161751": []
+					}
+				},
 				{
 					"id": 83,
 					"paths": [
@@ -666,6 +689,10 @@
 						"icon-datatable"
 					],
 					"colorPermutations": {
+						"16161751": [
+							1,
+							1
+						],
 						"125525525516161751": [
 							1,
 							1
@@ -709,6 +736,13 @@
 						"icon-tabular-scrolling"
 					],
 					"colorPermutations": {
+						"16161751": [
+							1,
+							1,
+							1,
+							1,
+							1
+						],
 						"125525525516161751": [
 							1,
 							1,
@@ -760,6 +794,14 @@
 						"icon-tabular"
 					],
 					"colorPermutations": {
+						"16161751": [
+							0,
+							0,
+							0,
+							0,
+							0,
+							0
+						],
 						"125525525516161751": [
 							0,
 							0,
@@ -787,6 +829,9 @@
 						"icon-calendar"
 					],
 					"colorPermutations": {
+						"16161751": [
+							1
+						],
 						"125525525516161751": [
 							1
 						]
@@ -814,6 +859,10 @@
 						"icon-paint-bucket"
 					],
 					"colorPermutations": {
+						"16161751": [
+							1,
+							1
+						],
 						"125525525516161751": [
 							1,
 							1
--- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
+++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
--- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
+++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
@@ -83,6 +83,7 @@
 <glyph unicode="&#xe604;" glyph-name="icon-tabular" d="M0 896v-192h448v256h-384c-35.2 0-64-28.8-64-64zM960 960h-384v-256h448v192c0 35.2-28.8 64-64 64zM576 576h448v-256h-448v256zM0 576h448v-256h-448v256zM0 0c0-35.2 28.8-64 64-64h384v256h-448v-192zM576-64h384c35.2 0 64 28.8 64 64v192h-448v-256z" />
 <glyph unicode="&#xe605;" glyph-name="icon-calendar" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
 <glyph unicode="&#xe606;" glyph-name="icon-paint-bucket" d="M896 320c0 0-130-188-128-256 2-70.6 57.4-128 128-128s126 57.4 128 128c2 68-128 256-128 256zM449 831l0.2 64.8c0 35.4-28.4 64-63.8 64.2 0 0-0.2 0-0.2 0-35.2 0-63.8-28.6-64-63.8l-0.6-190.8-294-292.6c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-447 447zM384 320c-70.6 0-128 57.4-128 128 0 47.4 25.8 89 64.4 111l-0.4-110.8c0-35.4 28.4-64 63.8-64.2 0 0 0.2 0 0.2 0 35.2 0 63.8 28.6 64 63.8l0.4 110.8c38-22.2 63.6-63.4 63.6-110.6 0-70.6-57.4-128-128-128z" />
+<glyph unicode="&#xe607;" glyph-name="icon-x-in-circle" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
 <glyph unicode="&#xe60d;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
 <glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
 </font></defs></svg>
--- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
+++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
--- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
+++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -100,6 +100,7 @@ $ueAppLogoW: 105px;
 $ueEditToolBarH: 25px;
 $ueBrowseLeftPaneW: 25%;
 $ueEditLeftPaneW: 75%;
+$treeSearchInputBarH: 25px;
 // Overlay
 $ovrTopBarH: 60px;
 $ovrFooterH: 40px;
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -1,3 +1,4 @@
+/*****************************************************************************
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -34,7 +35,6 @@
@import "fonts";
@import "user-environ/layout";
@import "mobile/layout";
-
@import "fixed-position";
@import "about";
@import "text";
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -21,15 +21,15 @@
 *****************************************************************************/
 /******************************************************** MENUS */
 .menu-element {
-    $bg: lighten($colorBodyBg, 5%);
+	$bg: lighten($colorBodyBg, 5%);
 	$bgHover: lighten($bg, 20%);
 	$iconColor: $colorKey;
 	cursor: pointer;
 	position: relative;
 	.menu {
 		@include border-radius($basicCr);
-        @include containerSubtle($bg);
-        @include txtShdwSubtle(0.2);
+		@include containerSubtle($bg);
+		@include txtShdwSubtle(0.2);
 		display: block; // set to block via jQuery
 		padding: $interiorMarginSm 0;
 		position: absolute;
@@ -37,11 +37,12 @@
 		ul {
 			@include menuUlReset();
 			li {
-                @include box-sizing(border-box);
+				@include box-sizing(border-box);
 				border-top: 1px solid lighten($bg, 20%);
 				color: lighten($bg, 60%);
 				line-height: $menuLineH;
 				padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
+				position: relative;
 				white-space: nowrap;
 				&:first-child {
 					border: none;
@@ -61,7 +62,7 @@
 				//	display: block;
 				//}
 				.type-icon {
-                    left: $interiorMargin * 2;
+					left: $interiorMargin * 2;
 				}
 			}
 		}
@@ -77,7 +78,9 @@
 		@include containerSubtle($bg);
 		ul li {
 			padding-left: 25px;
-			a { color: $fg; }
+			a {
+				color: $fg;
+			}
 			.icon {
 				color: $ic;
 			}
@@ -90,99 +93,131 @@
 		}
 	}

+	.checkbox-menu {
+		// Used in search dropdown in tree
+		@extend .context-menu;
+		ul li {
+			padding-left: 50px;
+			.checkbox {
+				$d: 0.7rem;
+				position: absolute;
+				left: $interiorMargin;
+				top: ($menuLineH - $d) / 1.5;
+				em {
+					height: $d;
+					width: $d;
+					&:before {
+						font-size: 7px !important;// $d/2;
+						height: $d;
+						width: $d;
+						line-height: $d;
+					}
+				}
+			}
+			.type-icon {
+				left: 25px;
+			}
+		}
+	}

-    .super-menu {
-        $w: 500px;
-        $h: $w - 20;
-        $plw: 50%; //$w * 0.5;
-        $prw: 50%; //$w - $plw;
-	    $fg: #fff; //lighten($colorBodyFg, 40%);
-	    $bgHover: $colorKey; //$bg;
-	    display: block;
-        width: $w;
-        height: $h;
-        .contents {
-	        @include absPosDefault($interiorMargin);
-        }
-        .pane {
-            @include box-sizing(border-box);
-            &.left {
-                //@include test();
-                border-right: 1px solid rgba(white, 0.2);
-                left: 0;
-                padding-right: $interiorMargin;
-                right: auto;
-                width: $plw;
-                overflow-x: hidden;
-                overflow-y: auto;
-                ul {
-                    li {
-                        @include border-radius($controlCr);
-	                    padding-left: 30px;
-                        border-top: none;
-                    }
-                }
-            }
-            &.right {
-	            //@include test(red);
-	            left: auto;
-                right: 0;
-                padding: $interiorMargin * 5;
-                width: $prw;
-	            .icon {
-		            color: $fg;
-	            }
-            }
-        }
-	    .menu-item-description {
-		    .desc-area {
-			    &.icon {
-				    $h: 150px;
-				    position: relative;
-				    font-size: 8em;
-				    left: 0;
-				    height: $h;
-				    line-height: $h;
-				    margin-bottom: $interiorMargin * 5;
-				    text-align: center;
-			    }
-			    &.title {
-				    color: $fg;
-				    font-size: 1.2em;
-				    margin-bottom: 0.5em;
-			    }
-			    &.description {
-				    //color: lighten($bg, 30%);
-				    color: $fg;
-				    font-size: 0.8em;
-				    line-height: 1.5em;
-			    }
-		    }
-	    }
-    }
-    .context-menu {
-        font-size: 0.80rem;
-    }
+	.super-menu {
+		$w: 500px;
+		$h: $w - 20;
+		$plw: 50%; //$w * 0.5;
+		$prw: 50%; //$w - $plw;
+		$fg: #fff; //lighten($colorBodyFg, 40%);
+		$bgHover: $colorKey; //$bg;
+		display: block;
+		width: $w;
+		height: $h;
+		.contents {
+			@include absPosDefault($interiorMargin);
+		}
+		.pane {
+			@include box-sizing(border-box);
+			&.left {
+				//@include test();
+				border-right: 1px solid rgba(white, 0.2);
+				left: 0;
+				padding-right: $interiorMargin;
+				right: auto;
+				width: $plw;
+				overflow-x: hidden;
+				overflow-y: auto;
+				ul {
+					li {
+						@include border-radius($controlCr);
+						padding-left: 30px;
+						border-top: none;
+					}
+				}
+			}
+			&.right {
+				//@include test(red);
+				left: auto;
+				right: 0;
+				padding: $interiorMargin * 5;
+				width: $prw;
+				.icon {
+					color: $fg;
+				}
+			}
+		}
+		.menu-item-description {
+			.desc-area {
+				&.icon {
+					$h: 150px;
+					position: relative;
+					font-size: 8em;
+					left: 0;
+					height: $h;
+					line-height: $h;
+					margin-bottom: $interiorMargin * 5;
+					text-align: center;
+				}
+				&.title {
+					color: $fg;
+					font-size: 1.2em;
+					margin-bottom: 0.5em;
+				}
+				&.description {
+					//color: lighten($bg, 30%);
+					color: $fg;
+					font-size: 0.8em;
+					line-height: 1.5em;
+				}
+			}
+		}
+	}
+	.context-menu {
+		font-size: 0.80rem;
+	}
 }

 .context-menu-holder {
-    pointer-events: none;
-    position: absolute;
-    height: 200px;
-    width: 170px;
-    z-index: 70;
-    .context-menu-wrapper {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        .context-menu {
-        }
-    }
-    &.go-left .context-menu { right: 0; }
-    &.go-up .context-menu { bottom: 0; }
+	pointer-events: none;
+	position: absolute;
+	height: 200px;
+	width: 170px;
+	z-index: 70;
+	.context-menu-wrapper {
+		position: absolute;
+		height: 100%;
+		width: 100%;
+		.context-menu {
+		}
+	}
+	&.go-left .context-menu {
+		right: 0;
+	}
+	&.go-up .context-menu {
+		bottom: 0;
+	}
 }

 .btn-bar.right .menu,
 .menus-to-left .menu {
-    left: auto; right: 0; width: auto;
+	left: auto;
+	right: 0;
+	width: auto;
 }
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -80,7 +80,7 @@
 }

 .mobile-tree-holder {
-    top: 30px;
+    top: 50px;
 }

 // When the tree is shown, these are
--- a/platform/commonUI/general/res/sass/search/_layout.scss
+++ b/platform/commonUI/general/res/sass/search/_layout.scss
@@ -0,0 +1,31 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// Overrides some styling in user-environ/_layout.scss
+.pane {
+    &.treeview.left {
+	    .tree-holder {
+            // Want tree holder to start right below the search bar.
+		    top: 60px;
+	    }
+    }
+}
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -0,0 +1,347 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+.abs.search-holder {
+	//@include test(#990000);
+	height: $treeSearchInputBarH;
+	bottom: 0;
+	&.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;
+}
+
+.search {
+	$iconWidth: 20px;
+	$leftMargin: 6px;
+	$rightPadding: 5px;
+
+	//padding-right: $rightPadding;
+	//@include test();
+	display: flex; //block;
+	flex-direction: column;
+	height: 100%;
+
+	.search-bar {
+		//$heightAdjust: 4px;
+		$textInputHeight: 19px; // This is equal to the default value, 19px
+		$iconEdgeM: 4px;
+		$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
+		font-size: 0.8em;
+
+		//order: 1;
+
+		position: relative;
+		width: 100%;
+		//height: $textInputHeight;
+		//margin-top: $heightAdjust;
+		.search-input,
+		.search-icon {
+		}
+		
+		.search-input {
+			height: $treeSearchInputBarH;
+			line-height: $treeSearchInputBarH;
+			padding-top: 0;
+			padding-bottom: 0;
+		}
+		
+		.search-icon,
+		.clear-icon,
+		.menu-icon {
+			//@include test(#008800);
+			@include box-sizing(border-box);
+			color: $colorItemFg;
+			height: $iconD; width: $iconD;
+			line-height: $iconD;
+			position: absolute;
+			text-align: center;
+			top: $iconEdgeM;
+		}
+
+		.clear-icon,
+		.menu-icon {
+			cursor: pointer;
+			transition: color .25s;
+		}
+
+
+		.search-input {
+			position: relative;
+			width: 100%;
+			padding-left: $iconD + $interiorMargin !important;
+			padding-right: ($iconD * 2) + ($interiorMargin * 2) !important;
+
+			// Make work for mct-control textfield
+			input {
+				width: 100%;
+			}
+		}
+
+		.search-icon {
+			color: $colorItemFg;
+			left: $interiorMarginSm;
+			transition: visibility .15s, opacity .15s, color .2s;
+			pointer-events: none;
+
+			&.content {
+				// Make icon invisible whenever there is text input
+				//visibility: hidden;
+				//opacity: 0;
+			}
+		}
+
+		// Make icon invisible when the text input is focused
+		.search-input:focus + div.search-icon {
+			//visibility: hidden;
+			//opacity: 0;
+		}
+
+		// Make icon lighten when hovering over search bar
+		.search-input:hover + div.search-icon {
+			color: lighten($colorItemFg, 20%);
+		}
+
+		.clear-icon {
+			right: $iconD + $interiorMargin;
+
+			// Icon is visible only when there is text input
+			visibility: hidden;
+			opacity: 0;
+
+			transition: visibility .15s, opacity .15s, color .2s;
+
+			&.content {
+				visibility: visible;
+				opacity: 1;
+			}
+
+			&:hover {
+				color: lighten($colorItemFg, 20%);
+			}
+		}
+
+		.menu-icon {
+			font-size: 0.8em;
+			padding-right: $iconEdgeM;
+			right: $iconEdgeM;
+			text-align: right;
+
+			&:hover {
+				color: lighten($colorItemFg, 20%);
+			}
+		}
+
+		.search-menu-holder {
+			float: right;
+			//margin-top: $textInputHeight - 2px;
+			//left: -50px;
+			left: -20px;
+
+			z-index: 1;
+
+			transition: visibility .05s, opacity .05s;
+
+			&.off {
+				visibility: hidden;
+				opacity: 0;
+			}
+		}
+
+		// Hovering reveals menu
+		.menu-icon:hover + div.search-menu-holder {
+			visibility: visible;
+		}
+		div.search-menu-holder:hover {
+			visibility: visible;
+		}
+	}
+
+	.active-filter-display {
+		//order: 2;
+		$s: 0.65em;
+		$p: $interiorMargin;
+		@include border-radius($basicCr);
+		@include box-sizing(border-box);
+		line-height: 130%;
+		padding: $p 0;
+		padding-left: $s * 2.25;
+		font-size: $s;
+		//background-color: rgba(#000, 0.3);
+		//border-radius: $basicCr;
+		margin-top: $interiorMarginSm;
+
+
+		.clear-filters-icon {
+			opacity: 0.4;
+			font-size: 0.8em;
+			position: absolute;
+			left: 1px;
+			cursor: pointer;
+		}
+
+		// Transition looks weird when the results list has none
+		//transition: visibility .2s, opacity .2s;
+
+		&.off {
+			visibility: hidden;
+			opacity: 0;
+			height: 0;
+			margin: 0;
+			padding: 0;
+			border: 0;
+		}
+	}
+
+	.search-scroll {
+		order: 3;
+
+		//padding-right: $rightPadding;
+		margin-top: 4px;
+
+		// Adjustable scrolling size
+		overflow-y: auto;
+		top: auto;
+		height: auto;
+		max-height: 100%;
+		position: relative;
+
+		.results {
+
+			.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
+				//   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;
+					}
+				}
+                
+                .label .type-icon .l-icon-link {
+                    @include txtShdwSubtle(1);
+                    z-index: 2;
+                    @include ancillaryIcon(8px, $colorIconLink);
+                    margin-left: -25px;
+                }
+
+				// 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-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;
+				}
+			}
+
+			&:not(.loading) {
+				cursor: pointer;
+			}
+		}
+
+		.load-more-button {
+			margin-top: $interiorMargin 0;
+			font-size: 0.8em;
+			position: relative;
+			left: 50%;
+			margin-left: -45px;
+			text-align: center;
+			width: 90px;
+			white-space: nowrap;
+		}
+	}
+}
--- a/platform/commonUI/general/res/sass/tree.scss
+++ b/platform/commonUI/general/res/sass/tree.scss
@@ -30,4 +30,5 @@
@import "mixins";
@import "mobile/mixins";
@import "tree/tree";
-@import "mobile/tree";
+@import "search/search";
+@import "mobile/tree";
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -229,10 +229,12 @@
 			    bottom: $interiorMargin;
 		    }
 	    }
+	    .search-holder {
+		    top: $ueTopBarH + $interiorMarginLg;
+	    }
 	    .tree-holder {
 		    overflow: auto;
-		    top: $ueTopBarH + $interiorMarginLg;
-            padding-right: $interiorMargin;
+			top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
 	    }
    }
    &.items {