TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added flex layout CSS classes. Inspector container wrapper now uses flex layout. Minor CSS fixes.

This commit is contained in:
alekseybobkov 2015-11-14 20:28:34 -08:00
parent 2df22fda83
commit 67590fefad
9 changed files with 101 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
modules/backend/assets/css/october.css
View File

@ -618,6 +618,7 @@ body{webkit-font-smoothing:antialiased;font-family:'Open Sans',Arial,sans-serif;
.layout > .layout-cell.center{text-align:center}
.layout > .layout-cell.middle{vertical-align:middle}
.whiteboard{background:white}
.layout-fill-container{position:absolute;left:0;top:0;width:100%;height:100%}
.layout-cell.width-fix > form,[data-calculate-width] > form,.layout-cell.width-fix > div,[data-calculate-width] > div{display:inline-block}
body.compact-container .layout.layout-container,body.compact-container .layout .layout-container{padding:0 !important}
body.slim-container .layout.layout-container,body.slim-container .layout .layout-container{padding-left:0 !important;padding-right:0 !important}
@ -627,6 +628,24 @@ body.slim-container .layout.layout-container,body.slim-container .layout .layout
.layout.responsive-sidebar > .layout-cell:last-child{display:table-header-group;width:auto;height:auto}
.layout.responsive-sidebar > .layout-cell:last-child .layout-absolute{position:static}
}
.flex-layout-column{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex;-webkit-flex-direction:column;-moz-flex-direction:column;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}
.flex-layout-column.full-height-strict{height:100%}
.flex-layout-column.absolute{position:absolute !important}
.flex-layout-column.fill-container{position:absolute;left:0;top:0;width:100%;height:100%}
.flex-layout-row{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex;-webkit-flex-direction:row;-moz-flex-direction:row;-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row}
.flex-layout-column.justify-center,.flex-layout-row.justify-center{-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:;-webkit-box-pack:center;justify-content:center}
.flex-layout-column.align-center,.flex-layout-row.align-center{-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;align-items:center;-webkit-align-content:center;-moz-align-content:center;-webkit-box-align:center;-ms-align-content:center;align-content:center}
.flex-layout-column.full-height,.flex-layout-row.full-height{min-height:100%}
.flex-layout-item{margin:0}
.flex-layout-item.fix{-webkit-box-flex:0;-webkit-flex:0 0 auto;-moz-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}
.flex-layout-item.stretch{-webkit-box-flex:1;-webkit-flex:1 1 auto;-moz-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}
.flex-layout-item.stretch-constrain{-webkit-box-flex:1;-webkit-flex:1;-moz-flex:1;-ms-flex:1;flex:1}
.flex-layout-item.center{-webkit-align-self:center;-moz-align-self:center;-ms-align-self:center;align-self:center}
.flex-layout-item.relative{position:relative}
.flex-layout-item.layout-container{max-width:none}
.flex-layout-item.width-100{width:100px}
.flex-layout-item.width-200{width:200px}
.flex-layout-item.width-300{width:300px}
body.mainmenu-open{overflow:hidden}
nav#layout-mainmenu.navbar{background-color:#111111;padding:0 0 0 20px;line-height:0;white-space:nowrap}
nav#layout-mainmenu.navbar a{text-decoration:none}
@ -800,7 +819,7 @@ html.csstransitions body.outer.preload .outer-form-container{-webkit-transform:s
.fancy-layout .control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs,.fancy-layout.control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs{background:#f9f9f9}
.fancy-layout .control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs > li,.fancy-layout.control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs > li{margin-left:-19px}
.fancy-layout .control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs > li:first-child,.fancy-layout.control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs > li:first-child{margin-left:0;padding-left:8px}
.fancy-layout .control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs > li a,.fancy-layout.control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs > li a{padding:8px 16px 0 16px;font-weight:400;color:#2b3e50;opacity:0.6;filter:alpha(opacity=60)}
.fancy-layout .control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs > li a,.fancy-layout.control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs > li a{padding:8px 16px 0 16px;font-weight:400;height:33px;color:#2b3e50;opacity:0.6;filter:alpha(opacity=60)}
.fancy-layout .control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs > li a > span.title,.fancy-layout.control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs > li a > span.title{position:relative;display:inline-block;padding:4px 5px 9px 5px;font-size:13px;z-index:100;height:25px !important;background-color:transparent}
.fancy-layout .control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs > li a > span.title:before,.fancy-layout.control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs > li a > span.title:before,.fancy-layout .control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs > li a > span.title:after,.fancy-layout.control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs > li a > span.title:after{content:' ';position:absolute;background:transparent url(../images/secondary-tab-shape-content.svg) no-repeat left top;width:15px;height:25px;top:0;z-index:100;display:none}
.fancy-layout .control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs > li a > span.title:before,.fancy-layout.control-tabs.secondary-tabs.secondary-content-tabs > div > ul.nav-tabs > li a > span.title:before{left:-15px}

1
modules/backend/assets/less/layout/fancylayout.less
View File

@ -232,6 +232,7 @@
a {
padding: 8px 16px 0 16px;
font-weight: 400;
height: 33px;
color: #2b3e50;
.opacity(0.6);

54
modules/backend/assets/less/layout/flexlayout.less Normal file
View File

@ -0,0 +1,54 @@
.flex-layout-column {
.flex-display();
.flex-direction-column();
&.full-height-strict {
height: 100%;
}
&.absolute {
position: absolute!important;
}
&.fill-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}
.flex-layout-row {
.flex-display();
.flex-direction-row();
}
.flex-layout-column, .flex-layout-row {
&.justify-center {.justify-content(center);}
&.align-center {
.align-items(center);
.align-content(center);
}
&.full-height {
min-height: 100%;
// height: 100%;
}
}
.flex-layout-item {
margin: 0;
&.fix {.flex-fix();}
&.stretch {.flex-stretch();}
&.stretch-constrain {.flex-stretch-constrain();}
&.center {.align-self(center);}
&.relative {position: relative;}
&.layout-container {max-width: none;}
&.width-100 {width: 100px;}
&.width-200 {width: 200px;}
&.width-300 {width: 300px;}
}

8
modules/backend/assets/less/layout/layout.less
View File

@ -142,6 +142,14 @@ body {
background: white;
}
.layout-fill-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
//
// Calculated fixed width
//

1
modules/backend/assets/less/october.less
View File

@ -56,6 +56,7 @@
// Layout
@import "layout/layout.less";
@import "layout/flexlayout.less";
@import "layout/mainmenu.less";
@import "layout/sidenav.less";
@import "layout/sidepanel.less";

19
modules/system/assets/ui/js/inspector.wrapper.container.js
View File

@ -125,18 +125,11 @@
InspectorContainer.prototype.buildLayout = function() {
var layout = document.createElement('div'),
headRow = document.createElement('div'),
bodyRow = document.createElement('div'),
bodyCell = document.createElement('div'),
layoutRelative = document.createElement('div')
bodyRow = document.createElement('div')
layout.setAttribute('class', 'layout')
headRow.setAttribute('class', 'layout-row min-size')
bodyRow.setAttribute('class', 'layout-row')
bodyCell.setAttribute('class', 'layout-cell')
layoutRelative.setAttribute('class', 'layout-relative')
bodyCell.appendChild(layoutRelative)
bodyRow.appendChild(bodyCell)
layout.setAttribute('class', 'flex-layout-column fill-container')
headRow.setAttribute('class', 'flex-layout-item fix')
bodyRow.setAttribute('class', 'flex-layout-item stretch relative')
layout.appendChild(headRow)
layout.appendChild(bodyRow)
@ -148,7 +141,7 @@
return {
headContainer: headRow,
bodyContainer: layoutRelative
bodyContainer: bodyRow
}
}
@ -170,7 +163,7 @@
}
InspectorContainer.prototype.getLayout = function() {
return this.options.container.get(0).querySelector('div.layout')
return this.options.container.get(0).querySelector('div.flex-layout-column')
}
InspectorContainer.prototype.registerLayoutHandlers = function(layout) {

4
modules/system/assets/ui/less/inspector.less
View File

@ -603,6 +603,10 @@ div.inspector-dictionary-container {
}
.inspector-container {
&:empty {
display: none;
}
.control-scrollpad {
position: absolute;
}

16
modules/system/assets/ui/storm-min.js vendored
View File

@ -3891,26 +3891,22 @@ scrollWrapper.setAttribute('class','scroll-wrapper inspector-wrapper')
scrollpad.appendChild(scrollWrapper)
scrollWrapper.appendChild(scrollableContainer)
return{scrollpad:scrollpad,container:scrollableContainer}}
InspectorContainer.prototype.buildLayout=function(){var layout=document.createElement('div'),headRow=document.createElement('div'),bodyRow=document.createElement('div'),bodyCell=document.createElement('div'),layoutRelative=document.createElement('div')
layout.setAttribute('class','layout')
headRow.setAttribute('class','layout-row min-size')
bodyRow.setAttribute('class','layout-row')
bodyCell.setAttribute('class','layout-cell')
layoutRelative.setAttribute('class','layout-relative')
bodyCell.appendChild(layoutRelative)
bodyRow.appendChild(bodyCell)
InspectorContainer.prototype.buildLayout=function(){var layout=document.createElement('div'),headRow=document.createElement('div'),bodyRow=document.createElement('div')
layout.setAttribute('class','flex-layout-column fill-container')
headRow.setAttribute('class','flex-layout-item fix')
bodyRow.setAttribute('class','flex-layout-item stretch relative')
layout.appendChild(headRow)
layout.appendChild(bodyRow)
this.options.container.get(0).appendChild(layout)
$.oc.foundation.controlUtils.markDisposable(layout)
this.registerLayoutHandlers(layout)
return{headContainer:headRow,bodyContainer:layoutRelative}}
return{headContainer:headRow,bodyContainer:bodyRow}}
InspectorContainer.prototype.validateAndApply=function(){if(!this.surface.validate()){return false}
this.applyValues()
return true}
InspectorContainer.prototype.isScrollable=function(){return this.options.container.data('inspector-scrollable')!==undefined}
InspectorContainer.prototype.isLiveUpdateEnabled=function(){return this.options.container.data('inspector-live-update')!==undefined}
InspectorContainer.prototype.getLayout=function(){return this.options.container.get(0).querySelector('div.layout')}
InspectorContainer.prototype.getLayout=function(){return this.options.container.get(0).querySelector('div.flex-layout-column')}
InspectorContainer.prototype.registerLayoutHandlers=function(layout){var $layout=$(layout)
$layout.one('dispose-control',this.proxy(this.dispose))
$layout.on('click','span.close',this.proxy(this.onClose))

1
modules/system/assets/ui/storm.css
View File

@ -2529,6 +2529,7 @@ div.inspector-dictionary-container table.inspector-dictionary-table tbody tr:las
.inspector-header span:hover{opacity:1;filter:alpha(opacity=100);color:#ffffff}
.inspector-header .detach{right:26px}
.inspector-header .close{right:11px;font-size:21px}
.inspector-container:empty{display:none}
.inspector-container .control-scrollpad{position:absolute}
.inspector-field-comment:empty{display:none}
.select2-dropdown.ocInspectorDropdown{font-size:12px;-webkit-border-radius:0 !important;-moz-border-radius:0 !important;border-radius:0 !important;border:none !important}