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

[Mobile] IN PROGRESS: Significant redo of object-header

Browse Source 
open #74
Added .bar .l-flex using display: flex in object header;
This commit is contained in:
Charles Hacskaylo 2015-08-24 12:22:08 -07:00
parent 039d692e4c
commit e96d3e3738
9 changed files with 171 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
platform/commonUI/browse/res/templates/back-arrow.html
View File

@ -21,8 +21,8 @@
--> -->
<!-- Back Arrow Icon used on mobile--> <!-- Back Arrow Icon used on mobile-->
<span ng-controller="BrowseController" <a ng-controller="BrowseController"
class='type-icon icon ui-symbol s-back'
ng-click='backArrow()' ng-click='backArrow()'
ng-class="checkRoot(); atRoot ? 'hidden' : ''"> ng-class="checkRoot(); atRoot ? 'hidden' : ''">{
<a class='type-icon icon ui-symbol'>{</a> </a>
</span>

8
platform/commonUI/browse/res/templates/browse-object.html
View File

@ -20,14 +20,14 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<span ng-controller="BrowseObjectController"> <span ng-controller="BrowseObjectController">
<div class="object-browse-bar bar abs"> <div class="object-browse-bar bar l-flex">
<div class="items-select left abs"> <div class="items-select left">
<mct-representation key="'back-arrow'"></mct-representation> <mct-representation key="'back-arrow'" class="l-back"></mct-representation>
<mct-representation key="'object-header'" mct-object="domainObject"> <mct-representation key="'object-header'" mct-object="domainObject">
</mct-representation> </mct-representation>
</div> </div>
<!-- Temporarily, on mobile, the button bar is hidden--> <!-- Temporarily, on mobile, the button bar is hidden-->
<div class="btn-bar right abs mobile-hide"> <div class="btn-bar right mobile-hide">
<mct-representation key="'action-group'" <mct-representation key="'action-group'"
mct-object="domainObject" mct-object="domainObject"
parameters="{ category: 'view-control' }"> parameters="{ category: 'view-control' }">

7
platform/commonUI/browse/res/templates/browse/object-header.html
View File

@ -21,10 +21,11 @@
--> -->
<div class='object-header object-header-mobile'> <div class='object-header object-header-mobile'>
<span class='type-icon ui-symbol'>{{type.getGlyph()}}</span> <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
<span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
<!--span class='type-name mobile-important-hide'>{{type.getName()}}</span--> <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
<span class='title-label'> <span class="l-elem-wrapper">
{{model.name}} <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
<span class='title-label'>{{model.name}}</span>
<mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation> <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
</span> </span>
</div> </div>

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

@ -542,23 +542,34 @@ mct-container {
.bar.abs, .btn-menu span.bar.l-click-area { .bar.abs, .btn-menu span.bar.l-click-area {
text-wrap: none; text-wrap: none;
white-space: nowrap; } white-space: nowrap; }
/* line 74, ../sass/user-environ/_layout.scss */ /* line 73, ../sass/user-environ/_layout.scss */
.bar.left, .bar.abs.left, .btn-menu span.bar.left.l-click-area,
.bar .left { .bar.abs .left,
width: 45% !important; .btn-menu span.bar.l-click-area .left {
right: auto !important; } width: 45%;
/* line 79, ../sass/user-environ/_layout.scss */ right: auto; }
.bar.right, /* line 78, ../sass/user-environ/_layout.scss */
.bar .right { .bar.abs.right, .btn-menu span.bar.right.l-click-area,
width: 45% !important; .bar.abs .right,
left: auto !important; .btn-menu span.bar.l-click-area .right {
text-align: right; } width: 45%;
/* line 84, ../sass/user-environ/_layout.scss */ left: auto;
.bar.right .icon.major, text-align: right; }
.bar .right .icon.major { /* line 83, ../sass/user-environ/_layout.scss */
margin-left: 15px; } .bar.abs.right .icon.major, .btn-menu span.bar.right.l-click-area .icon.major,
.bar.abs .right .icon.major,
.btn-menu span.bar.l-click-area .right .icon.major {
margin-left: 15px; }
/* line 88, ../sass/user-environ/_layout.scss */
.bar.l-flex {
display: flex;
flex-flow: row nowrap;
align-items: stretch; }
/* line 92, ../sass/user-environ/_layout.scss */
.bar.l-flex .left {
flex: 1 1 auto; }
/* line 91, ../sass/user-environ/_layout.scss */ /* line 99, ../sass/user-environ/_layout.scss */
.user-environ .browse-area, .user-environ .browse-area,
.user-environ .edit-area, .user-environ .edit-area,
.user-environ .editor { .user-environ .editor {
@ -566,23 +577,23 @@ mct-container {
right: 10px; right: 10px;
bottom: 35px; bottom: 35px;
left: 10px; } left: 10px; }
/* line 102, ../sass/user-environ/_layout.scss */ /* line 110, ../sass/user-environ/_layout.scss */
.user-environ .browse-area > .contents, .user-environ .browse-area > .contents,
.user-environ .edit-area > .contents { .user-environ .edit-area > .contents {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 108, ../sass/user-environ/_layout.scss */ /* line 116, ../sass/user-environ/_layout.scss */
.user-environ .edit-area { .user-environ .edit-area {
top: 45px; } top: 45px; }
/* line 111, ../sass/user-environ/_layout.scss */ /* line 119, ../sass/user-environ/_layout.scss */
.user-environ .edit-area .tool-bar { .user-environ .edit-area .tool-bar {
bottom: auto; bottom: auto;
height: 30px; height: 30px;
line-height: 25px; } line-height: 25px; }
/* line 116, ../sass/user-environ/_layout.scss */ /* line 124, ../sass/user-environ/_layout.scss */
.user-environ .edit-area .work-area { .user-environ .edit-area .work-area {
top: 40px; } top: 40px; }
/* line 121, ../sass/user-environ/_layout.scss */ /* line 129, ../sass/user-environ/_layout.scss */
.user-environ .bottom-bar { .user-environ .bottom-bar {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@ -594,20 +605,20 @@ mct-container {
height: auto; height: auto;
top: auto; top: auto;
height: 25px; } height: 25px; }
/* line 126, ../sass/user-environ/_layout.scss */ /* line 134, ../sass/user-environ/_layout.scss */
.user-environ .bottom-bar .status-holder { .user-environ .bottom-bar .status-holder {
z-index: 1; } z-index: 1; }
/* line 130, ../sass/user-environ/_layout.scss */ /* line 138, ../sass/user-environ/_layout.scss */
.user-environ .bottom-bar .app-logo { .user-environ .bottom-bar .app-logo {
left: auto; left: auto;
width: 105px; width: 105px;
z-index: 2; } z-index: 2; }
/* line 138, ../sass/user-environ/_layout.scss */ /* line 146, ../sass/user-environ/_layout.scss */
.cols { .cols {
overflow: hidden; overflow: hidden;
*zoom: 1; } *zoom: 1; }
/* line 140, ../sass/user-environ/_layout.scss */ /* line 148, ../sass/user-environ/_layout.scss */
.cols .col { .cols .col {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -618,112 +629,112 @@ mct-container {
margin-left: 1.5%; margin-left: 1.5%;
padding-left: 5px; padding-left: 5px;
position: relative; } position: relative; }
/* line 148, ../sass/user-environ/_layout.scss */ /* line 156, ../sass/user-environ/_layout.scss */
.cols .col:first-child { .cols .col:first-child {
margin-left: 0; margin-left: 0;
padding-left: 0; } padding-left: 0; }
/* line 155, ../sass/user-environ/_layout.scss */ /* line 163, ../sass/user-environ/_layout.scss */
.cols.cols-2 .col-1 { .cols.cols-2 .col-1 {
min-width: 250px; min-width: 250px;
width: 48.5%; } width: 48.5%; }
/* line 161, ../sass/user-environ/_layout.scss */ /* line 169, ../sass/user-environ/_layout.scss */
.cols.cols-2-ff .col-100px { .cols.cols-2-ff .col-100px {
width: 100px; } width: 100px; }
/* line 168, ../sass/user-environ/_layout.scss */ /* line 176, ../sass/user-environ/_layout.scss */
.cols.cols-6 .col-1 { .cols.cols-6 .col-1 {
min-width: 83.33333px; min-width: 83.33333px;
width: 15.16667%; } width: 15.16667%; }
/* line 174, ../sass/user-environ/_layout.scss */ /* line 182, ../sass/user-environ/_layout.scss */
.cols.cols-16 .col-1 { .cols.cols-16 .col-1 {
min-width: 31.25px; min-width: 31.25px;
width: 4.75%; } width: 4.75%; }
/* line 177, ../sass/user-environ/_layout.scss */ /* line 185, ../sass/user-environ/_layout.scss */
.cols.cols-16 .col-2 { .cols.cols-16 .col-2 {
min-width: 62.5px; min-width: 62.5px;
width: 11%; } width: 11%; }
/* line 180, ../sass/user-environ/_layout.scss */ /* line 188, ../sass/user-environ/_layout.scss */
.cols.cols-16 .col-7 { .cols.cols-16 .col-7 {
min-width: 218.75px; min-width: 218.75px;
width: 42.25%; } width: 42.25%; }
/* line 186, ../sass/user-environ/_layout.scss */ /* line 194, ../sass/user-environ/_layout.scss */
.cols.cols-32 .col-2 { .cols.cols-32 .col-2 {
min-width: 31.25px; min-width: 31.25px;
width: 4.75%; } width: 4.75%; }
/* line 189, ../sass/user-environ/_layout.scss */ /* line 197, ../sass/user-environ/_layout.scss */
.cols.cols-32 .col-15 { .cols.cols-32 .col-15 {
min-width: 234.375px; min-width: 234.375px;
width: 45.375%; } width: 45.375%; }
/* line 193, ../sass/user-environ/_layout.scss */ /* line 201, ../sass/user-environ/_layout.scss */
.cols .l-row { .cols .l-row {
overflow: hidden; overflow: hidden;
*zoom: 1; *zoom: 1;
padding: 5px 0; } padding: 5px 0; }
/* line 201, ../sass/user-environ/_layout.scss */ /* line 209, ../sass/user-environ/_layout.scss */
.browse-mode .split-layout .split-pane-component.pane.left { .browse-mode .split-layout .split-pane-component.pane.left {
min-width: 150px; min-width: 150px;
max-width: 50%; } max-width: 50%; }
/* line 210, ../sass/user-environ/_layout.scss */ /* line 218, ../sass/user-environ/_layout.scss */
.edit-mode .split-layout .split-pane-component.pane.right { .edit-mode .split-layout .split-pane-component.pane.right {
min-width: 150px; min-width: 150px;
max-width: 50%; } max-width: 50%; }
/* line 213, ../sass/user-environ/_layout.scss */ /* line 221, ../sass/user-environ/_layout.scss */
.edit-mode .split-layout .split-pane-component.pane.right .split-pane-component.pane.bottom { .edit-mode .split-layout .split-pane-component.pane.right .split-pane-component.pane.bottom {
min-height: 50px; min-height: 50px;
max-height: 80%; } max-height: 80%; }
/* line 221, ../sass/user-environ/_layout.scss */ /* line 229, ../sass/user-environ/_layout.scss */
.pane { .pane {
position: absolute; } position: absolute; }
/* line 224, ../sass/user-environ/_layout.scss */ /* line 232, ../sass/user-environ/_layout.scss */
.pane.treeview.left .create-btn-holder { .pane.treeview.left .create-btn-holder {
bottom: auto; bottom: auto;
top: 0; top: 0;
height: 24px; } height: 24px; }
/* line 227, ../sass/user-environ/_layout.scss */ /* line 235, ../sass/user-environ/_layout.scss */
.pane.treeview.left .create-btn-holder .wrapper.menu-element { .pane.treeview.left .create-btn-holder .wrapper.menu-element {
position: absolute; position: absolute;
bottom: 5px; } bottom: 5px; }
/* line 232, ../sass/user-environ/_layout.scss */ /* line 240, ../sass/user-environ/_layout.scss */
.pane.treeview.left .tree-holder { .pane.treeview.left .tree-holder {
overflow: auto; overflow: auto;
top: 34px; top: 34px;
padding-right: 5px; } padding-right: 5px; }
/* line 240, ../sass/user-environ/_layout.scss */ /* line 248, ../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 .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 .right.abs,
.pane.items .object-browse-bar .btn-menu span.right.l-click-area, .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
.btn-menu .pane.items .object-browse-bar span.right.l-click-area { .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
top: auto; } top: auto; }
/* line 251, ../sass/user-environ/_layout.scss */ /* line 259, ../sass/user-environ/_layout.scss */
.pane.items .object-holder { .pane.items .object-holder {
top: 34px; } top: 34px; }
/* line 255, ../sass/user-environ/_layout.scss */ /* line 263, ../sass/user-environ/_layout.scss */
.pane .object-holder { .pane .object-holder {
overflow: auto; } overflow: auto; }
/* line 263, ../sass/user-environ/_layout.scss */ /* line 271, ../sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane { .split-layout.horizontal > .pane {
margin-top: 5px; } margin-top: 5px; }
/* line 266, ../sass/user-environ/_layout.scss */ /* line 274, ../sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane:first-child { .split-layout.horizontal > .pane:first-child {
margin-top: 0; } margin-top: 0; }
/* line 273, ../sass/user-environ/_layout.scss */ /* line 281, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane { .split-layout.vertical > .pane {
margin-left: 5px; } margin-left: 5px; }
/* line 276, ../sass/user-environ/_layout.scss */ /* line 284, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane > .holder { .split-layout.vertical > .pane > .holder {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 280, ../sass/user-environ/_layout.scss */ /* line 288, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child { .split-layout.vertical > .pane:first-child {
margin-left: 0; } margin-left: 0; }
/* line 282, ../sass/user-environ/_layout.scss */ /* line 290, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child .holder { .split-layout.vertical > .pane:first-child .holder {
right: 3px; } right: 3px; }
/* line 291, ../sass/user-environ/_layout.scss */ /* line 299, ../sass/user-environ/_layout.scss */
.vscroll { .vscroll {
overflow-y: auto; } overflow-y: auto; }
@ -2552,26 +2563,33 @@ label.checkbox.custom {
/******************************************************** OBJECT-HEADER */ /******************************************************** OBJECT-HEADER */
/* line 364, ../sass/controls/_controls.scss */ /* line 364, ../sass/controls/_controls.scss */
.object-header { .object-header {
font-size: 1em; font-size: 1em; }
line-height: 120%; }
/* line 373, ../sass/controls/_controls.scss */ /* line 373, ../sass/controls/_controls.scss */
.object-header .title-label, .object-header .title-label,
.object-header .type-icon, .object-header .type-icon,
.object-header .context-available { .object-header .context-available {
border: 1px dotted rgba(102, 102, 255, 0.75);
vertical-align: middle; } vertical-align: middle; }
/* line 379, ../sass/controls/_controls.scss */ /* line 379, ../sass/controls/_controls.scss */
.object-header > .type-icon { .object-header > .type-icon {
font-size: 120%; } font-size: 120%;
/* line 383, ../sass/controls/_controls.scss */ float: left;
margin-right: 5px; }
/* line 386, ../sass/controls/_controls.scss */
.object-header .l-elem-wrapper {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start; }
/* line 392, ../sass/controls/_controls.scss */
.object-header .action {
margin-right: 5px; }
/* line 396, ../sass/controls/_controls.scss */
.object-header .title-label { .object-header .title-label {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
color: white; color: white;
padding-right: 0.75em; padding-right: 0.35em; }
position: relative; } /* line 403, ../sass/controls/_controls.scss */
/* line 390, ../sass/controls/_controls.scss */
.object-header .context-available { .object-header .context-available {
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
@ -2586,15 +2604,13 @@ label.checkbox.custom {
-webkit-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
opacity: 0; opacity: 0;
font-size: 0.7em; font-size: 0.7em; }
position: absolute; /* line 411, ../sass/controls/_controls.scss */
right: 0; }
/* line 398, ../sass/controls/_controls.scss */
.object-header:hover .context-available { .object-header:hover .context-available {
opacity: 1; } opacity: 1; }
/******************************************************** SLIDERS */ /******************************************************** SLIDERS */
/* line 420, ../sass/controls/_controls.scss */ /* line 423, ../sass/controls/_controls.scss */
.slider .slot { .slider .slot {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
@ -2615,7 +2631,7 @@ label.checkbox.custom {
right: 0; right: 0;
bottom: auto; bottom: auto;
left: 0; } left: 0; }
/* line 431, ../sass/controls/_controls.scss */ /* line 434, ../sass/controls/_controls.scss */
.slider .knob { .slider .knob {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -2698,12 +2714,12 @@ label.checkbox.custom {
-webkit-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
border-color: #0099cc; } border-color: #0099cc; }
/* line 442, ../sass/controls/_controls.scss */ /* line 445, ../sass/controls/_controls.scss */
.slider .knob:before { .slider .knob:before {
top: 1px; top: 1px;
bottom: 3px; bottom: 3px;
left: 5px; } left: 5px; }
/* line 449, ../sass/controls/_controls.scss */ /* line 452, ../sass/controls/_controls.scss */
.slider .range { .slider .range {
background: rgba(0, 153, 204, 0.6); background: rgba(0, 153, 204, 0.6);
cursor: ew-resize; cursor: ew-resize;
@ -2714,12 +2730,12 @@ label.checkbox.custom {
left: auto; left: auto;
height: auto; height: auto;
width: auto; } width: auto; }
/* line 459, ../sass/controls/_controls.scss */ /* line 462, ../sass/controls/_controls.scss */
.slider .range:hover { .slider .range:hover {
background: rgba(0, 153, 204, 0.7); } background: rgba(0, 153, 204, 0.7); }
/******************************************************** BROWSER ELEMENTS */ /******************************************************** BROWSER ELEMENTS */
/* line 467, ../sass/controls/_controls.scss */ /* line 470, ../sass/controls/_controls.scss */
::-webkit-scrollbar { ::-webkit-scrollbar {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
@ -2736,7 +2752,7 @@ label.checkbox.custom {
height: 10px; height: 10px;
width: 10px; } width: 10px; }
/* line 473, ../sass/controls/_controls.scss */ /* line 476, ../sass/controls/_controls.scss */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -2754,7 +2770,7 @@ label.checkbox.custom {
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
border-top: 1px solid gray; } border-top: 1px solid gray; }
/* line 480, ../sass/controls/_controls.scss */ /* line 483, ../sass/controls/_controls.scss */
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -2763,7 +2779,7 @@ label.checkbox.custom {
background-image: -webkit-linear-gradient(#808080, #737373 20px); background-image: -webkit-linear-gradient(#808080, #737373 20px);
background-image: linear-gradient(#808080, #737373 20px); } background-image: linear-gradient(#808080, #737373 20px); }
/* line 485, ../sass/controls/_controls.scss */ /* line 488, ../sass/controls/_controls.scss */
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, 0.4); } background: rgba(0, 0, 0, 0.4); }
@ -3494,31 +3510,6 @@ label.checkbox.custom {
font-size: 0.65em; font-size: 0.65em;
vertical-align: top; } vertical-align: top; }
/* line 2, ../sass/_flex.scss */
.l-flex.l-flex-justify {
justify-content: space-between; }
/* line 5, ../sass/_flex.scss */
.l-flex .l-flex-row, .l-flex.l-flex-row {
display: flex;
flex-flow: row nowrap; }
/* line 16, ../sass/_flex.scss */
.l-flex .l-flex-max {
flex: 1 0 !important; }
/* line 20, ../sass/_flex.scss */
.l-flex .flex-ignore {
display: flex;
flex-flow: row nowrap;
flex: 0 1 auto; }
/* line 28, ../sass/_flex.scss */
.object-browse-bar.bar > div.abs {
background-color: rgba(0, 128, 0, 0.2); }
/* line 33, ../sass/_flex.scss */
.l-flex-row .title-label {
background-color: rgba(0, 0, 255, 0.2);
flex: 1 0 !important; }
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space
@ -4706,11 +4697,25 @@ input[type="text"] {
*****************************************************************************/ *****************************************************************************/
/* line 22, ../sass/user-environ/_object-browse.scss */ /* line 22, ../sass/user-environ/_object-browse.scss */
.object-browse-bar { .object-browse-bar {
overflow: hidden;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: auto;
height: auto;
height: 24px; height: 24px;
line-height: 24px; } line-height: 24px;
/* line 26, ../sass/user-environ/_object-browse.scss */ white-space: nowrap; }
.object-browse-bar .items-select .btn-menu { /* line 28, ../sass/user-environ/_object-browse.scss */
margin-right: 15px; } .object-browse-bar .left {
padding-right: 5px; }
/* line 30, ../sass/user-environ/_object-browse.scss */
.object-browse-bar .left .l-back {
display: inline-block;
float: left;
margin-right: 10px; }
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government

2
platform/commonUI/general/res/sass/_main.scss
View File

@ -53,7 +53,7 @@
@import "edit/editor"; @import "edit/editor";
@import "features/imagery"; @import "features/imagery";
@import "features/time-display"; @import "features/time-display";
@import "flex"; //@import "flex";
@import "forms/elems"; @import "forms/elems";
@import "forms/validation"; @import "forms/validation";
@import "forms/text-input"; @import "forms/text-input";

35
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@ -364,7 +364,7 @@ label.checkbox.custom {
.object-header { .object-header {
//@include test(); //@include test();
font-size: 1em; font-size: 1em;
line-height: 120%; //line-height: 120%;
.label { .label {
//display: flex; //display: flex;
//flex-direction: row; //flex-direction: row;
@ -373,26 +373,39 @@ label.checkbox.custom {
.title-label, .title-label,
.type-icon, .type-icon,
.context-available { .context-available {
@include tmpBorder(#6666ff); //@include tmpBorder(#6666ff);
vertical-align: middle; vertical-align: middle;
} }
> .type-icon { > .type-icon {
font-size: 120%; font-size: 120%;
float: left;
margin-right: $interiorMargin;
}
.l-elem-wrapper {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
.action {
margin-right: $interiorMargin;
} }
.title-label { .title-label {
@include ellipsize(); @include ellipsize();
color: lighten($colorBodyFg, 40%); color: lighten($colorBodyFg, 40%);
padding-right: 0.75em; // For context arrow. Done with em's so pad is relative to the scale of the text. padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
position: relative; //position: relative;
} }
.context-available { .context-available {
@include trans-prop-nice(opacity, 0.25s); @include trans-prop-nice(opacity, 0.25s);
opacity: 0; opacity: 0;
font-size: 0.7em; font-size: 0.7em;
position: absolute; //position: absolute;
right: 0; //right: 0;
} }
&:hover { &:hover {
.context-available { .context-available {
@ -401,16 +414,6 @@ label.checkbox.custom {
} }
} }
.top-bar,
.object-browse-bar {
.object-header {
//font-size: 1.1em;
span {
//display: inline-block;
}
}
}
/******************************************************** SLIDERS */ /******************************************************** SLIDERS */
.slider { .slider {

32
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@ -70,19 +70,27 @@
&.abs { &.abs {
text-wrap: none; text-wrap: none;
white-space: nowrap; white-space: nowrap;
&.left,
.left {
width: 45%;
right: auto;
}
&.right,
.right {
width: 45%;
left: auto;
text-align: right;
.icon.major {
margin-left: $interiorMargin * 3;
}
}
} }
&.left, &.l-flex {
.left { display: flex;
width: 45% !important; flex-flow: row nowrap;
right: auto !important; align-items: stretch;
} .left {
&.right, flex: 1 1 auto;
.right {
width: 45% !important;
left: auto !important;
text-align: right;
.icon.major {
margin-left: $interiorMargin * 3;
} }
} }
} }

12
platform/commonUI/general/res/sass/user-environ/_object-browse.scss
View File

@ -20,11 +20,17 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
.object-browse-bar { .object-browse-bar {
@include absPosDefault();
height: $ueTopBarH; height: $ueTopBarH;
line-height: $ueTopBarH; line-height: $ueTopBarH;
.items-select { white-space: nowrap;
.btn-menu {
margin-right: $interiorMargin * 3; .left {
padding-right: $interiorMargin;
.l-back {
display: inline-block;
float: left;
margin-right: $interiorMarginLg;
} }
} }
} }

6
platform/features/layout/res/templates/frame.html
View File

@ -20,12 +20,12 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div class="frame frame-template abs"> <div class="frame frame-template abs">
<div class="bar abs object-header object-top-bar"> <div class="bar abs l-flex object-header object-top-bar">
<div class="left abs"> <div class="left">
<mct-representation key="'object-header'" mct-object="domainObject"> <mct-representation key="'object-header'" mct-object="domainObject">
</mct-representation> </mct-representation>
</div> </div>
<div class="btn-bar right abs"> <div class="btn-bar right">
<mct-representation key="'switcher'" <mct-representation key="'switcher'"
ng-model="representation" ng-model="representation"
mct-object="domainObject"> mct-object="domainObject">