From f1bf88fac4327e6f3a1920f02f9d8a415fe477d5 Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 27 Aug 2015 16:41:11 -0700 Subject: [PATCH] [Inspector] Reorganization of scss files Split the inspector styling out of the general panes styling. Moved files into more appropriate folders. --- .../general/res/css/theme-espresso.css | 224 ++++++++++-------- platform/commonUI/general/res/sass/_main.scss | 3 +- .../res/sass/inspector/_inspector.scss | 123 ++++++++++ .../res/sass/{tree => panes}/_pane.scss | 102 +------- 4 files changed, 249 insertions(+), 203 deletions(-) create mode 100644 platform/commonUI/general/res/sass/inspector/_inspector.scss rename platform/commonUI/general/res/sass/{tree => panes}/_pane.scss (65%) diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 368361b01d..899a8317e8 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -5161,22 +5161,22 @@ input[type="text"] { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 31, ../sass/tree/_pane.scss */ +/* line 31, ../sass/panes/_pane.scss */ .pane.left.inactive { width: 0 !important; min-width: 0 !important; } - /* line 36, ../sass/tree/_pane.scss */ + /* line 36, ../sass/panes/_pane.scss */ .pane.left.inactive .tree-holder { padding-right: 0; } - /* line 41, ../sass/tree/_pane.scss */ + /* line 41, ../sass/panes/_pane.scss */ .pane.left.inactive .search-holder { display: none; } -/* line 47, ../sass/tree/_pane.scss */ +/* line 47, ../sass/panes/_pane.scss */ .pane.left .create-btn.major { top: 0; left: 0; transition: all 0.35s; } - /* line 52, ../sass/tree/_pane.scss */ + /* line 52, ../sass/panes/_pane.scss */ .pane.left .create-btn.major.inactivePane { top: 0; left: 0; @@ -5189,43 +5189,43 @@ input[type="text"] { line-height: 14px; left: -11px; top: 20px; } - /* line 70, ../sass/tree/_pane.scss */ + /* line 70, ../sass/panes/_pane.scss */ .pane.left .create-btn.major.inactivePane span { display: none; } -/* line 78, ../sass/tree/_pane.scss */ +/* line 78, ../sass/panes/_pane.scss */ .splitter-bar.splitter { opacity: 1; transition: opacity 0.35s, visibility 0.35s; top: 0; } - /* line 85, ../sass/tree/_pane.scss */ + /* line 85, ../sass/panes/_pane.scss */ .splitter-bar.splitter.inactive { visibility: hidden; opacity: 0; } - /* line 89, ../sass/tree/_pane.scss */ + /* line 89, ../sass/panes/_pane.scss */ .splitter-bar.splitter.inactive:before { border-width: 0; } -/* line 97, ../sass/tree/_pane.scss */ +/* line 97, ../sass/panes/_pane.scss */ .splitter-bar.left.splitter.inactive { transition: opacity 0s, visibility 0s; } -/* line 106, ../sass/tree/_pane.scss */ +/* line 106, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right.leftInactive { left: 0 !important; } -/* line 109, ../sass/tree/_pane.scss */ +/* line 109, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right.slide { transition: left 0.35s; } -/* line 116, ../sass/tree/_pane.scss */ +/* line 116, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane.rightInactive { right: 0 !important; } -/* line 119, ../sass/tree/_pane.scss */ +/* line 119, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane.slide { transition: right 0.35s; } -/* line 124, ../sass/tree/_pane.scss */ +/* line 124, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar { position: relative; } - /* line 127, ../sass/tree/_pane.scss */ + /* line 127, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs { position: relative; cursor: pointer; @@ -5236,129 +5236,151 @@ input[type="text"] { line-height: 16px; font-size: 10px; text-align: center; } - /* line 141, ../sass/tree/_pane.scss */ + /* line 141, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left { left: -12px; top: 3px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; } - /* line 149, ../sass/tree/_pane.scss */ + /* line 149, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.inactivePane { left: -15px; } - /* line 151, ../sass/tree/_pane.scss */ + /* line 151, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.inactivePane:after { content: 'F'; } - /* line 155, ../sass/tree/_pane.scss */ + /* line 155, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.activePane:after { content: '<'; } - /* line 161, ../sass/tree/_pane.scss */ + /* line 161, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right { float: right; right: -9px; top: -13px; border-top-left-radius: 2px; border-bottom-left-radius: 2px; } - /* line 170, ../sass/tree/_pane.scss */ + /* line 170, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.inactivePane { right: -12px; } - /* line 172, ../sass/tree/_pane.scss */ + /* line 172, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.inactivePane:after { content: '\e608'; } - /* line 176, ../sass/tree/_pane.scss */ + /* line 176, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.activePane:after { content: '>'; } - /* line 184, ../sass/tree/_pane.scss */ + /* line 184, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .items-select { margin-left: 10px; } - /* line 188, ../sass/tree/_pane.scss */ + /* line 188, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .btn-bar.right { margin-right: 10px; } -/* line 194, ../sass/tree/_pane.scss */ +/* line 194, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right { min-width: 150px; opacity: 1; transition: opacity 0.175s; transition-delay: 0.175s; } - /* line 200, ../sass/tree/_pane.scss */ + /* line 200, ../sass/panes/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right.inactive { min-width: 0 !important; width: 0 !important; visibility: hidden; opacity: 0; } - /* line 207, ../sass/tree/_pane.scss */ - .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder { - overflow-y: auto; - overflow-x: hidden; } - /* line 211, ../sass/tree/_pane.scss */ - .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder .info-icon { - color: #0099cc; } - /* line 215, ../sass/tree/_pane.scss */ - .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder .number-selected { - font-size: .8em; - padding: 6px; - background-color: #595959; - color: #a6a6a6; - border-radius: 4px; - margin-top: 4px; } - /* line 224, ../sass/tree/_pane.scss */ - .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li { - font-size: 0.9em; - padding: 2px 0px; - margin: 2px 0px; - border-top: solid 1px grey; } - /* line 231, ../sass/tree/_pane.scss */ - .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li:first-child { - border-top-width: 0px; } - /* line 236, ../sass/tree/_pane.scss */ - .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em { - font-weight: bold; - line-height: 1.25em; } - /* line 240, ../sass/tree/_pane.scss */ - .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em:after { - content: '\A'; - white-space: pre; } - /* line 247, ../sass/tree/_pane.scss */ - .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location { + +/***************************************************************************** + * 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 25, ../sass/inspector/_inspector.scss */ +.holder.inspector-holder { + overflow-y: auto; + overflow-x: hidden; } + /* line 29, ../sass/inspector/_inspector.scss */ + .holder.inspector-holder .info-icon { + color: #0099cc; } + /* line 33, ../sass/inspector/_inspector.scss */ + .holder.inspector-holder .number-selected { + font-size: .8em; + padding: 6px; + background-color: #595959; + color: #a6a6a6; + border-radius: 4px; + margin-top: 4px; } + /* line 42, ../sass/inspector/_inspector.scss */ + .holder.inspector-holder ul li { + font-size: 0.9em; + padding: 2px 0px; + margin: 2px 0px; + border-top: solid 1px grey; } + /* line 49, ../sass/inspector/_inspector.scss */ + .holder.inspector-holder ul li:first-child { + border-top-width: 0px; } + /* line 54, ../sass/inspector/_inspector.scss */ + .holder.inspector-holder ul li em { + font-weight: bold; + line-height: 1.25em; } + /* line 58, ../sass/inspector/_inspector.scss */ + .holder.inspector-holder ul li em:after { + content: '\A'; + white-space: pre; } + /* line 65, ../sass/inspector/_inspector.scss */ + .holder.inspector-holder ul li .inspector-location { + display: inline-block; + max-width: 100%; } + /* line 69, ../sass/inspector/_inspector.scss */ + .holder.inspector-holder ul li .inspector-location .label { + cursor: pointer; display: inline-block; - max-width: 100%; } - /* line 251, ../sass/tree/_pane.scss */ - .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label { - cursor: pointer; - display: inline-block; - white-space: nowrap; - transition: background-color 0.2s; - border-radius: 4px; - padding: 3px; - margin: 2px; - max-width: 100%; - text-overflow: ellipsis; - overflow-x: hidden; } - /* line 258, ../sass/tree/_pane.scss */ - .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label:hover { - background-color: #404040; } - /* line 272, ../sass/tree/_pane.scss */ - .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label .icon.type-icon { - font-size: 14px; } - /* line 275, ../sass/tree/_pane.scss */ - .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label .icon.type-icon .l-icon-link { - color: #49dedb; - font-size: 6px; - margin-left: -22px; - margin-right: 9px; - text-shadow: black 0 1px 2px; - z-index: 2; } - /* line 289, ../sass/tree/_pane.scss */ - .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:after { - content: '>'; - font-family: symbolsfont; - font-size: 8px; - position: relative; - top: -8px; - left: -4px; } - /* line 299, ../sass/tree/_pane.scss */ - .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:last-child:after { - content: ''; - display: inline-block; } + white-space: nowrap; + transition: background-color 0.2s; + border-radius: 4px; + padding: 3px; + margin: 2px; + max-width: 100%; + text-overflow: ellipsis; + overflow-x: hidden; } + /* line 76, ../sass/inspector/_inspector.scss */ + .holder.inspector-holder ul li .inspector-location .label:hover { + background-color: #404040; } + /* line 90, ../sass/inspector/_inspector.scss */ + .holder.inspector-holder ul li .inspector-location .label .icon.type-icon { + font-size: 14px; } + /* line 93, ../sass/inspector/_inspector.scss */ + .holder.inspector-holder ul li .inspector-location .label .icon.type-icon .l-icon-link { + color: #49dedb; + font-size: 6px; + margin-left: -22px; + margin-right: 9px; + text-shadow: black 0 1px 2px; + z-index: 2; } + /* line 107, ../sass/inspector/_inspector.scss */ + .holder.inspector-holder ul li .inspector-location:after { + content: '>'; + font-family: symbolsfont; + font-size: 8px; + position: relative; + top: -8px; + left: -4px; } + /* line 117, ../sass/inspector/_inspector.scss */ + .holder.inspector-holder ul li .inspector-location:last-child:after { + content: ''; + display: inline-block; } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index e4f10cb8a3..e4a6416a92 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -74,5 +74,6 @@ @import "initialization"; @import "hide-non-functional"; @import "views"; -@import "tree/pane"; +@import "panes/pane"; +@import "inspector/inspector"; @import "inspector/plot"; diff --git a/platform/commonUI/general/res/sass/inspector/_inspector.scss b/platform/commonUI/general/res/sass/inspector/_inspector.scss new file mode 100644 index 0000000000..62bea9c74f --- /dev/null +++ b/platform/commonUI/general/res/sass/inspector/_inspector.scss @@ -0,0 +1,123 @@ +/***************************************************************************** + * 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. + *****************************************************************************/ + +// Added by shale on 08/27/2015. Styling for the object inspector. + +.holder.inspector-holder { + overflow-y: auto; + overflow-x: hidden; + + .info-icon { + color: $colorKey; + } + + .number-selected { + font-size: .8em; + padding: 6px; + background-color: lighten($colorBodyBg, 15%); + color: lighten($colorBodyBg, 45%); + border-radius: 4px; + margin-top: 4px; + } + + ul li { + font-size: 0.9em; + + // Add spacing between items + padding: 2px 0px; + margin: 2px 0px; + border-top: solid 1px grey; + &:first-child { + border-top-width: 0px; + } + + // Style the titles + em { + font-weight: bold; + line-height: 1.25em; + + &:after { + content: '\A'; + white-space: pre; + } + } + + // Style object labels + .inspector-location { + display: inline-block; + max-width: 100%; + + .label { + cursor: pointer; + display: inline-block; + white-space: nowrap; + + // Colors + transition: background-color 0.2s; + &:hover { + background-color: lighten($colorBodyBg, 5%); + } + + // Sizing and spacing + border-radius: 4px; + padding: 3px; + margin: 2px; + + // Horizontal overflow + max-width: 100%; + text-overflow: ellipsis; + overflow-x: hidden; + + .icon.type-icon { + font-size: 14px; + + .l-icon-link { + color: $colorIconLink; + + font-size: 6px; + margin-left: -22px; + margin-right: 9px; + + @include txtShdwSubtle(1); + z-index: 2; + } + } + } + + // Add arrows to indicate tree heirarchy + &:after { + content: '>'; + font-family: symbolsfont; + font-size: 8px; + + //margin-left: -6px; + position: relative; + top: -8px; + left: -4px; + } + &:last-child:after { + content: ''; + display: inline-block; + } + } + } +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/tree/_pane.scss b/platform/commonUI/general/res/sass/panes/_pane.scss similarity index 65% rename from platform/commonUI/general/res/sass/tree/_pane.scss rename to platform/commonUI/general/res/sass/panes/_pane.scss index 6a3965c3cf..bd69fab1f6 100644 --- a/platform/commonUI/general/res/sass/tree/_pane.scss +++ b/platform/commonUI/general/res/sass/panes/_pane.scss @@ -20,7 +20,7 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ -// Added by shale on 08/19/2015. Styling for the collapsible tree view. +// Added by shale on 08/19/2015. Styling for the collapsible left and right panes. $transitionTime: 0.35s; // For the pane open/close @@ -203,105 +203,5 @@ $transitionTime: 0.35s; // For the pane open/close visibility: hidden; opacity: 0; } - - .holder.inspector-holder { - overflow-y: auto; - overflow-x: hidden; - - .info-icon { - color: $colorKey; - } - - .number-selected { - font-size: .8em; - padding: 6px; - background-color: lighten($colorBodyBg, 15%); - color: lighten($colorBodyBg, 45%); - border-radius: 4px; - margin-top: 4px; - } - - ul li { - font-size: 0.9em; - - // Add spacing between items - padding: 2px 0px; - margin: 2px 0px; - border-top: solid 1px grey; - &:first-child { - border-top-width: 0px; - } - - // Style the titles - em { - font-weight: bold; - line-height: 1.25em; - - &:after { - content: '\A'; - white-space: pre; - } - } - - // Style object labels - .inspector-location { - display: inline-block; - max-width: 100%; - - .label { - cursor: pointer; - display: inline-block; - white-space: nowrap; - - // Colors - transition: background-color 0.2s; - &:hover { - background-color: lighten($colorBodyBg, 5%); - } - - // Sizing and spacing - border-radius: 4px; - padding: 3px; - margin: 2px; - - // Horizontal overflow - max-width: 100%; - text-overflow: ellipsis; - overflow-x: hidden; - - .icon.type-icon { - font-size: 14px; - - .l-icon-link { - color: $colorIconLink; - - font-size: 6px; - margin-left: -22px; - margin-right: 9px; - - @include txtShdwSubtle(1); - z-index: 2; - } - } - } - - // Add arrows to indicate tree heirarchy - &:after { - content: '>'; - font-family: symbolsfont; - font-size: 8px; - - //margin-left: -6px; - position: relative; - top: -8px; - left: -4px; - } - &:last-child:after { - content: ''; - display: inline-block; - } - } - } - } } }