From 67590fefad17d1719d6b9129355283a02ae35e7f Mon Sep 17 00:00:00 2001 From: alekseybobkov Date: Sat, 14 Nov 2015 20:28:34 -0800 Subject: [PATCH] Added flex layout CSS classes. Inspector container wrapper now uses flex layout. Minor CSS fixes. --- modules/backend/assets/css/october.css | 21 +++++++- .../assets/less/layout/fancylayout.less | 1 + .../assets/less/layout/flexlayout.less | 54 +++++++++++++++++++ .../backend/assets/less/layout/layout.less | 8 +++ modules/backend/assets/less/october.less | 1 + .../ui/js/inspector.wrapper.container.js | 19 +++---- modules/system/assets/ui/less/inspector.less | 4 ++ modules/system/assets/ui/storm-min.js | 16 +++--- modules/system/assets/ui/storm.css | 1 + 9 files changed, 101 insertions(+), 24 deletions(-) create mode 100644 modules/backend/assets/less/layout/flexlayout.less diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 3661b3254..3ff481fb4 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -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} diff --git a/modules/backend/assets/less/layout/fancylayout.less b/modules/backend/assets/less/layout/fancylayout.less index 630751d82..d68220b7e 100644 --- a/modules/backend/assets/less/layout/fancylayout.less +++ b/modules/backend/assets/less/layout/fancylayout.less @@ -232,6 +232,7 @@ a { padding: 8px 16px 0 16px; font-weight: 400; + height: 33px; color: #2b3e50; .opacity(0.6); diff --git a/modules/backend/assets/less/layout/flexlayout.less b/modules/backend/assets/less/layout/flexlayout.less new file mode 100644 index 000000000..0f3fe3d7c --- /dev/null +++ b/modules/backend/assets/less/layout/flexlayout.less @@ -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;} +} \ No newline at end of file diff --git a/modules/backend/assets/less/layout/layout.less b/modules/backend/assets/less/layout/layout.less index ad4b4a431..da8c8491e 100644 --- a/modules/backend/assets/less/layout/layout.less +++ b/modules/backend/assets/less/layout/layout.less @@ -142,6 +142,14 @@ body { background: white; } +.layout-fill-container { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; +} + // // Calculated fixed width // diff --git a/modules/backend/assets/less/october.less b/modules/backend/assets/less/october.less index cb5339d3e..4fa7b625d 100644 --- a/modules/backend/assets/less/october.less +++ b/modules/backend/assets/less/october.less @@ -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"; diff --git a/modules/system/assets/ui/js/inspector.wrapper.container.js b/modules/system/assets/ui/js/inspector.wrapper.container.js index 46724a94f..3d5c226a5 100644 --- a/modules/system/assets/ui/js/inspector.wrapper.container.js +++ b/modules/system/assets/ui/js/inspector.wrapper.container.js @@ -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) { diff --git a/modules/system/assets/ui/less/inspector.less b/modules/system/assets/ui/less/inspector.less index e7e6316d9..1e5333742 100644 --- a/modules/system/assets/ui/less/inspector.less +++ b/modules/system/assets/ui/less/inspector.less @@ -603,6 +603,10 @@ div.inspector-dictionary-container { } .inspector-container { + &:empty { + display: none; + } + .control-scrollpad { position: absolute; } diff --git a/modules/system/assets/ui/storm-min.js b/modules/system/assets/ui/storm-min.js index baddd3abd..e3549f49e 100644 --- a/modules/system/assets/ui/storm-min.js +++ b/modules/system/assets/ui/storm-min.js @@ -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)) diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css index 4eed85489..6438b7f23 100644 --- a/modules/system/assets/ui/storm.css +++ b/modules/system/assets/ui/storm.css @@ -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}