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

[Bug] CSS and markup mods

Browse Source 
CSS markup and mods to fix issues related to bug WTD-618;
fix is complete and verified in Chrome
This commit is contained in:
Charles Hacskaylo 2014-12-30 17:02:48 -08:00 committed by Victor Woeltjen
parent 7db5c0692b
commit f820cd47b6
8 changed files with 95 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
platform/commonUI/edit/res/templates/edit-object.html
View File

@ -5,28 +5,29 @@
<div class="holder edit-area outline abs"> <div class="holder edit-area outline abs">
<!-- edit toolbar goes here --> <!-- edit toolbar goes here -->
<div class='split-layout vertical contents abs work-area'> <div class='split-layout vertical contents abs work-area'>
<div class='split-pane-component edit-main pane' style="right: 200px; left: 0px;"> <div class='abs pane left edit-main'>
<div class='holder abs object-holder'> <div class='holder abs object-holder'>
<mct-representation key="representation.selected.key" <mct-representation key="representation.selected.key"
mct-object="domainObject"> mct-object="domainObject">
</mct-representation> </mct-representation>
</div> </div>
</div> </div>
<div class="splitter" style="right: 200px"></div> <div class="splitter"></div>
<div class='split-pane-component edit-objects pane menus-to-left' <div class='abs pane right edit-objects menus-to-left'>
style="right: 0px; width: 200px">
<div class='holder abs split-layout horizontal'> <div class='holder abs split-layout horizontal'>
<div class="abs pane top accordion" ng-controller="ToggleController as toggle">
<mct-container key="accordion" title="Library" style="position: relative; top: 0px; height: 200px;"> <mct-container key="accordion" title="Library">
<mct-representation key="'tree'" mct-object="context.getRoot()"> <mct-representation key="'tree'" alias="foo1" mct-object="context.getRoot()">
</mct-representation> </mct-representation>
</mct-container> </mct-container>
</div>
<mct-container key="accordion" title="Elements" style="position: relative; top: 200px;"> <div class="splitter"></div>
<div class="abs pane bottom accordion" ng-controller="ToggleController as toggle">
<mct-container key="accordion" title="Elements">
<mct-representation key="'edit-elements'" mct-object="domainObject"> <mct-representation key="'edit-elements'" mct-object="domainObject">
</mct-representation> </mct-representation>
</mct-container> </mct-container>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -103,33 +103,36 @@ body, html {
color: #999999; color: #999999;
font-family: Helvetica, Arial, sans-serif; font-family: Helvetica, Arial, sans-serif;
font-size: 100%; font-size: 100%;
margin: 5px; height: 100%;
width: 100%;
overflow: hidden; } overflow: hidden; }
/* line 34, ../sass/_global.scss */ /* line 35, ../sass/_global.scss */
em { em {
color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.2);
font-style: normal; } font-style: normal; }
/* line 39, ../sass/_global.scss */ /* line 40, ../sass/_global.scss */
input, textarea { input, textarea {
font-family: Helvetica, Arial, sans-serif; } font-family: Helvetica, Arial, sans-serif; }
/* line 43, ../sass/_global.scss */ /* line 44, ../sass/_global.scss */
h1, h2, h3 { h1, h2, h3 {
margin: 0; } margin: 0; }
/* line 47, ../sass/_global.scss */ /* line 48, ../sass/_global.scss */
h1 { h1 {
font-size: 1.7em; font-size: 1.7em;
font-weight: normal; font-weight: normal;
margin-bottom: 20px; } margin-bottom: 20px; }
/* line 53, ../sass/_global.scss */ /* line 54, ../sass/_global.scss */
span { span {
box-sizing: border-box; } /* 618 DEBUG
box-sizing: border-box;
*/ }
/* line 57, ../sass/_global.scss */ /* line 60, ../sass/_global.scss */
.abs { .abs {
position: absolute; position: absolute;
top: 0; top: 0;
@ -139,28 +142,28 @@ span {
height: auto; height: auto;
width: auto; } width: auto; }
/* line 67, ../sass/_global.scss */ /* line 70, ../sass/_global.scss */
.code { .code {
font-family: "Lucida Console", monospace; font-family: "Lucida Console", monospace;
font-size: 0.7em; font-size: 0.7em;
line-height: 150%; line-height: 150%;
white-space: pre; } white-space: pre; }
/* line 74, ../sass/_global.scss */ /* line 77, ../sass/_global.scss */
.centered { .centered {
text-align: center; } text-align: center; }
/* line 78, ../sass/_global.scss */ /* line 81, ../sass/_global.scss */
.colorKey { .colorKey {
color: #0099cc; } color: #0099cc; }
/* line 82, ../sass/_global.scss */ /* line 85, ../sass/_global.scss */
.ds { .ds {
-webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; } box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
/* line 87, ../sass/_global.scss */ /* line 90, ../sass/_global.scss */
.hide, .hide,
.hidden { .hidden {
display: none !important; } display: none !important; }
@ -2360,7 +2363,7 @@ input[type="text"] {
border-right: 7px solid transparent; border-right: 7px solid transparent;
border-top: 10.5px solid #990000; } border-top: 10.5px solid #990000; }
/* line 4, ../sass/helpers/_splitter.scss */ /* line 8, ../sass/helpers/_splitter.scss */
.split-layout .splitter { .split-layout .splitter {
background-color: #404040; background-color: #404040;
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
@ -2369,20 +2372,30 @@ input[type="text"] {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
z-index: 1; } z-index: 1; }
/* line 11, ../sass/helpers/_splitter.scss */ /* line 15, ../sass/helpers/_splitter.scss */
.split-layout.horizontal { .split-layout.horizontal {
overflow: hidden; } overflow: hidden; }
/* line 14, ../sass/helpers/_splitter.scss */ /* line 18, ../sass/helpers/_splitter.scss */
.split-layout.horizontal .pane { .split-layout.horizontal .pane {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 18, ../sass/helpers/_splitter.scss */ /* line 21, ../sass/helpers/_splitter.scss */
.split-layout.horizontal .pane.top {
bottom: auto;
height: 70%; }
/* line 25, ../sass/helpers/_splitter.scss */
.split-layout.horizontal .pane.bottom {
top: auto;
height: 30%; }
/* line 30, ../sass/helpers/_splitter.scss */
.split-layout.horizontal > .splitter { .split-layout.horizontal > .splitter {
cursor: row-resize; cursor: row-resize;
left: 0; left: 0;
right: 0; right: 0;
width: auto; width: auto;
height: 5px; } height: 5px;
margin-top: -7px;
top: 70%; }
/* line 54, ../sass/_mixins.scss */ /* line 54, ../sass/_mixins.scss */
.split-layout.horizontal > .splitter:before { .split-layout.horizontal > .splitter:before {
content: ''; content: '';
@ -2397,15 +2410,25 @@ input[type="text"] {
/* line 75, ../sass/_mixins.scss */ /* line 75, ../sass/_mixins.scss */
.split-layout.horizontal > .splitter:not(.disabled):hover:before { .split-layout.horizontal > .splitter:not(.disabled):hover:before {
border-color: rgba(0, 153, 204, 0.9); } border-color: rgba(0, 153, 204, 0.9); }
/* line 28, ../sass/helpers/_splitter.scss */ /* line 42, ../sass/helpers/_splitter.scss */
.split-layout.vertical .pane { .split-layout.vertical .pane {
top: 0; top: 0;
bottom: 0; } bottom: 0; }
/* line 32, ../sass/helpers/_splitter.scss */ /* line 45, ../sass/helpers/_splitter.scss */
.split-layout.vertical .pane.left {
right: auto;
width: 84%; }
/* line 49, ../sass/helpers/_splitter.scss */
.split-layout.vertical .pane.right {
left: auto;
width: 15%; }
/* line 54, ../sass/helpers/_splitter.scss */
.split-layout.vertical > .splitter { .split-layout.vertical > .splitter {
bottom: 0; bottom: 0;
cursor: col-resize; cursor: col-resize;
width: 5px; } width: 5px;
margin-left: -7px;
left: 85%; }
/* line 54, ../sass/_mixins.scss */ /* line 54, ../sass/_mixins.scss */
.split-layout.vertical > .splitter:before { .split-layout.vertical > .splitter:before {
content: ''; content: '';
@ -2421,11 +2444,11 @@ input[type="text"] {
.split-layout.vertical > .splitter:not(.disabled):hover:before { .split-layout.vertical > .splitter:not(.disabled):hover:before {
border-color: rgba(0, 153, 204, 0.9); } border-color: rgba(0, 153, 204, 0.9); }
/* line 41, ../sass/helpers/_splitter.scss */ /* line 65, ../sass/helpers/_splitter.scss */
.browse-area .splitter { .browse-area .splitter {
top: 40px; } top: 40px; }
/* line 45, ../sass/helpers/_splitter.scss */ /* line 69, ../sass/helpers/_splitter.scss */
.edit-area .splitter { .edit-area .splitter {
top: 0; } top: 0; }

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

@ -91,12 +91,12 @@ ul.tree {
position: absolute; position: absolute;
top: 0; top: 0;
left: 37px; left: 37px;
right: 25px; right: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
height: 1.5rem; height: 1.5rem;
bottom: auto; bottom: auto;
white-space: nowrap; } white-space: nowrap; }
/* line 98, ../sass/tree/_tree.scss */ /* line 99, ../sass/tree/_tree.scss */
ul.tree ul.tree { ul.tree ul.tree {
margin-left: 15px; } margin-left: 15px; }

5
platform/commonUI/general/res/sass/_global.scss
View File

@ -27,7 +27,8 @@ body, html {
color: $colorBodyFg; color: $colorBodyFg;
font-family: Helvetica, Arial, sans-serif; font-family: Helvetica, Arial, sans-serif;
font-size: 100%; font-size: 100%;
margin: $bodyMargin; height: 100%;
width: 100%;
overflow: hidden; overflow: hidden;
} }
@ -51,7 +52,9 @@ h1 {
} }
span { span {
/* 618 DEBUG
box-sizing: border-box; box-sizing: border-box;
*/
} }
.abs { .abs {

7
platform/commonUI/general/res/sass/_holder.scss
View File

@ -1,7 +0,0 @@
.pane {
.holder {
// left: $interiorMargin;
// right: $interiorMargin;
}
// &:first-child .holder { left: 0; }
}

24
platform/commonUI/general/res/sass/helpers/_splitter.scss
View File

@ -1,6 +1,10 @@
.split-layout { .split-layout {
$b: lighten($colorBodyBg, 5%); $b: lighten($colorBodyBg, 5%);
$splitterD: 5px; $splitterD: 5px;
// TEMP VAlS - this will need to be redone when we implement a draggable splitter
$splitL: 85%;
$splitT: 70%;
.splitter { .splitter {
background-color: $b; background-color: $b;
@include box-shadow(rgba(black, 0.4) 0 0 3px); @include box-shadow(rgba(black, 0.4) 0 0 3px);
@ -14,6 +18,14 @@
.pane { .pane {
left: 0; left: 0;
right: 0; right: 0;
&.top {
bottom: auto;
height: $splitT;
}
&.bottom {
top: auto;
height: 100% - $splitT;
}
} }
>.splitter { >.splitter {
@include controlGrippy($b, horizontal); @include controlGrippy($b, horizontal);
@ -21,6 +33,8 @@
left: 0; right: 0; left: 0; right: 0;
width: auto; width: auto;
height: $splitterD; height: $splitterD;
margin-top: ($splitterD + 2) * -1;
top: $splitT;
} }
} }
&.vertical { &.vertical {
@ -28,12 +42,22 @@
.pane { .pane {
top: 0; top: 0;
bottom: 0; bottom: 0;
&.left {
right: auto;
width: $splitL - 1%;
}
&.right {
left: auto;
width: 100% - $splitL;
}
} }
>.splitter { >.splitter {
@include controlGrippy($b, vertical); @include controlGrippy($b, vertical);
bottom: 0; bottom: 0;
cursor: col-resize; cursor: col-resize;
width: $splitterD; width: $splitterD;
margin-left: ($splitterD + 2) * -1;
left: $splitL;
} }
} }
} }

3
platform/commonUI/general/res/sass/tree/_tree.scss
View File

@ -86,7 +86,8 @@ ul.tree {
position: absolute; position: absolute;
top: 0; top: 0;
left: $treeVCW + $treeTypeIconW + ($interiorMargin * 2); //38px; left: $treeVCW + $treeTypeIconW + ($interiorMargin * 2); //38px;
right: $treeContextTriggerW + $interiorMargin; // right: $treeContextTriggerW + $interiorMargin; //Disabling as context trigger not being used
right: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
height: $menuLineH; height: $menuLineH;

15
platform/commonUI/general/res/templates/containers/accordion.html
View File

@ -1,10 +1,7 @@
<div class="accordion" ng-controller="ToggleController as toggle"> <div class="accordion-head" ng-click="toggle.toggle()">
<div class="accordion-head" ng-click="toggle.toggle()"> {{container.title}}
{{container.title}} </div>
</div> <div class="accordion-contents"
<div class="accordion-contents" ng-show="!toggle.isActive()"
ng-show="!toggle.isActive()" ng-transclude>
style="height: 180px;"
ng-transclude>
</div>
</div> </div>