From bcc1e2e26fc19e337e981151ce49f053741ca545 Mon Sep 17 00:00:00 2001 From: shale Date: Wed, 22 Jul 2015 10:38:56 -0700 Subject: [PATCH] [Search] Starting front-end Starting to modify the front-end so that the searchbar appears in the tree view area. Made the tree holder have relative position so that the searchbar is visibile for now. (Later will be different.) --- .../general/res/css/theme-espresso.css | 45 +++-- platform/commonUI/general/res/sass/_main.scss | 1 + .../general/res/sass/search/_layout.scss | 37 +++++ .../general/res/sass/search/_search.scss | 156 ++++++++++++++++++ 4 files changed, 229 insertions(+), 10 deletions(-) create mode 100644 platform/commonUI/general/res/sass/search/_layout.scss create mode 100644 platform/commonUI/general/res/sass/search/_search.scss diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index e3bbcd7448..2ce1f1780a 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -92,7 +92,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -113,38 +113,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -675,10 +675,35 @@ mct-container { .split-layout.vertical > .pane:first-child .holder { right: 3px; } -/* line 284, ../sass/user-environ/_layout.scss */ +/* line 286, ../sass/user-environ/_layout.scss */ .vscroll { overflow-y: auto; } +/***************************************************************************** + * 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 27, ../sass/search/_layout.scss */ +.split-layout.vertical > .pane:first-child .holder { + position: relative; } + /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index d56c55aca5..06eb0c2e7a 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -31,6 +31,7 @@ @import "global"; @import "fonts"; @import "user-environ/layout"; +@import "search/layout"; @import "fixed-position"; @import "about"; @import "text"; diff --git a/platform/commonUI/general/res/sass/search/_layout.scss b/platform/commonUI/general/res/sass/search/_layout.scss new file mode 100644 index 0000000000..795c3e6627 --- /dev/null +++ b/platform/commonUI/general/res/sass/search/_layout.scss @@ -0,0 +1,37 @@ +/***************************************************************************** + * 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. + *****************************************************************************/ + +.split-layout { + &.vertical { + >.pane { + &:first-child { + .holder { + // Want tree holder to dissapear when search is activated. + // Currently though, just have the tree holder position + // relative to search. + position: relative; + } + } + } + + } +} diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss new file mode 100644 index 0000000000..b4f54ac8b6 --- /dev/null +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -0,0 +1,156 @@ +/***************************************************************************** + * 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. + *****************************************************************************/ + +ul.searchbar { + @include menuUlReset(); + li { + display: block; + position: relative; + span.searchbar-item { + $runningItemW: 0; + @include border-radius($basicCr); + @include single-transition(background-color, 0.25s); + display: block; + font-size: 0.8em; + height: $menuLineH; + line-height: $menuLineH; + margin-bottom: $interiorMarginSm; + position: relative; +/* + .view-control { + display: inline-block; + margin-left: $interiorMargin; + font-size: 0.75em; + width: $treeVCW; + $runningItemW: $interiorMargin + $treeVCW; + &:hover { + color: $colorItemTreeVCHover; + } + } +*/ + + .label { + display: block; + @include absPosDefault(); + left: $runningItemW; + + .type-icon { + @include absPosDefault(0, false); + @include txtShdwSubtle(0.6); + color: $colorItemTreeIcon; + left: $interiorMargin; + right: auto; width: 1em; + + .icon { + &.l-icon-link, + &.l-icon-alert { + @include txtShdwSubtle(1); + position: absolute; + z-index: 2; + } + &.l-icon-alert { + $d: 8px; + @include ancillaryIcon($d, $colorAlert); + top: 1px; + right: -2px; + } + &.l-icon-link { + $d: 8px; + @include ancillaryIcon($d, $colorIconLink); + left: -3px; + bottom: 5px; + + } + } + } + .title-label { + @include absPosDefault(); + display: block; + left: $runningItemW + ($interiorMargin * 3); + //right: $treeContextTriggerW + $interiorMargin; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + &.loading { + pointer-events: none; + .label { + opacity: 0.5; + .title-label { + font-style: italic; + } + } + .wait-spinner { + margin-left: 14px; + } + } + + &.selected { + $c: #fff; + background: $colorKeySelectedBg; + color: $c; + .view-control { + color: $colorItemTreeIcon; + } + .label .type-icon { + color: #fff; //$colorItemTreeIconHover; + } + } + + &:not(.selected) { + &:hover { + background: lighten($colorBodyBg, 5%); + color: lighten($colorBodyFg, 20%); + .context-trigger { + display: block; + } + .icon { + color: $colorItemTreeIconHover; + } + } + } + + &:not(.loading) { + cursor: pointer; + } + + .context-trigger { + $h: 0.9rem; + //display: none; + top: -1px; + position: absolute; + right: $interiorMarginSm; + .invoke-menu { + font-size: 0.75em; + height: $h; + line-height: $h; + } + } + } + } + + ul.tree { + margin-left: $treeVCW + $interiorMargin; + } +} \ No newline at end of file