alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] Apply flex layout to object header elements

Browse Source 
open #250
open #260
vista#132
Major refactoring to markup and CSS to apply
flex layout strategy to object headers;
Flex necessary to fix 'overflow: hidden' setting
applied in open90 to object-browse-bar that
was preventing the view switcher menu from
appearing;
Browse, edit, mobile, frames in layouts, etc. all
visually checked in a first go round;
Mobile classes tweaked to fix left and right
margin problems resulting from open90 changes;
z-indexing of Inspector pane and splitters changed
to allow primary pane elements to overflow beneath
when primary pane width is severely constrained;
This commit is contained in:
Charles Hacskaylo
2015-11-06 17:42:54 -08:00
parent 76e15f2963
commit 4e79de6156
13 changed files with 612 additions and 7744 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,15 +20,17 @@
at runtime from the About dialog for additional information.
-->
<span ng-controller="BrowseObjectController">
<div class="object-browse-bar bar l-flex">
<div class="items-select left">
<div class="object-browse-bar l-flex-row">
<div class="items-select left flex-elem l-flex-row grows">
<mct-representation key="'back-arrow'"
mct-object="domainObject"
class="l-back"></mct-representation>
<mct-representation key="'object-header'" mct-object="domainObject">
class="flex-elem l-back"></mct-representation>
<mct-representation key="'object-header'"
mct-object="domainObject"
class="l-flex-row flex-elem grows object-header">
</mct-representation>
</div>
<div class="btn-bar right">
<div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
<mct-representation key="'switcher'"
mct-object="domainObject"
ng-model="representation">

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

@@ -19,12 +19,14 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<div class='object-header'>
<span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
<!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
<span class="l-elem-wrapper l-flex">
<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>
</span>
</div>
<!--<div class='object-header'> Moved up to browse-object.html and frame.html. TO-DO: make sure this is Ok!-->
<span class='type-icon ui-symbol flex-elem'>{{type.getGlyph()}}</span>
<span class="l-elem-wrapper l-flex-row flex-elem grows">
<span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
<span class='title-label flex-elem flex-can-shrink'>{{model.name}}</span>
<mct-representation
key="'menu-arrow'"
mct-object='domainObject'
class="flex-elem"></mct-representation>
</span>
<!--</div>-->