Skip to content
Snippets Groups Projects
Commit c35bf9cb authored by Jorrit Schaap's avatar Jorrit Schaap
Browse files

Task #10241: layout improvements

parent 545d3adf
No related branches found
No related tags found
No related merge requests found
...@@ -6,8 +6,6 @@ body { ...@@ -6,8 +6,6 @@ body {
} }
.grid { .grid {
min-height: 400px;
min-width: 500px;
height: 100%; height: 100%;
width: 100%; width: 100%;
......
...@@ -20,45 +20,51 @@ angular.module('ui.layout', []).controller('uiLayoutCtrl', [ ...@@ -20,45 +20,51 @@ angular.module('ui.layout', []).controller('uiLayoutCtrl', [
var opts = angular.extend({}, $parse(tAttrs.uiLayout)(), $parse(tAttrs.options)()); var opts = angular.extend({}, $parse(tAttrs.uiLayout)(), $parse(tAttrs.options)());
var isUsingColumnFlow = opts.flow === 'column'; var isUsingColumnFlow = opts.flow === 'column';
tElement.addClass('stretch').addClass('ui-layout-' + (opts.flow || 'row')); tElement.addClass('stretch').addClass('ui-layout-' + (opts.flow || 'row'));
var child_widths = []; var child_lenghts = [];
var total_width = tElement[0].clientWidth; var total_length = isUsingColumnFlow ? tElement[0].clientWidth : tElement[0].clientHeight;
for (_i = 0; _i < _child_len; ++_i) { for (_i = 0; _i < _child_len; ++_i) {
angular.element(_childens[_i]).addClass('stretch'); angular.element(_childens[_i]).addClass('stretch');
var init_width_attr = _childens[_i].attributes.getNamedItem('ui-layout-init-min-width'); var init_length_attr = isUsingColumnFlow ? _childens[_i].attributes.getNamedItem('ui-layout-init-width') || _childens[_i].attributes.getNamedItem('ui-layout-init-min-width') : _childens[_i].attributes.getNamedItem('ui-layout-init-height') || _childens[_i].attributes.getNamedItem('ui-layout-init-min-height');
if(init_width_attr) { if(init_length_attr) {
if(init_width_attr.nodeValue.includes('%')) { if(init_length_attr.nodeValue.includes('%')) {
var child_width_perc = parseFloat(init_width_attr.nodeValue); var child_length_perc = parseFloat(init_length_attr.nodeValue);
child_widths.push(child_width_perc); child_lenghts.push(child_length_perc);
} }
else { else {
var child_width_perc = 100.0*parseFloat(init_width_attr.nodeValue) / total_width; var child_length_perc = 100.0*parseFloat(init_length_attr.nodeValue) / total_length;
child_widths.push(child_width_perc); child_lenghts.push(child_length_perc);
}
//if there is more room than needed for the initial min length, distribute evenly
var is_minimal_length = isUsingColumnFlow ? _childens[_i].attributes.getNamedItem('ui-layout-init-width') === null : _childens[_i].attributes.getNamedItem('ui-layout-init-height') === null;
if(is_minimal_length) {
child_lenghts[child_lenghts.length-1] = Math.max(child_lenghts[child_lenghts.length-1], 100.0 / _child_len);
} }
} }
else else
child_widths.push(undefined); child_lenghts.push(undefined);
} }
if (_child_len > 1) { if (_child_len > 1) {
var totalDefinedChildWidth = child_widths.filter(function(cw) { return cw != undefined;}).reduce(function(a, b){return a+b;}); var totalDefinedChildLength = child_lenghts.filter(function(cl) { return cl != undefined;}).reduce(function(a, b){return a+b;});
var remainingWithForUndefinedChilds = 100 - totalDefinedChildWidth; var remainingLengthForUndefinedChilds = 100 - totalDefinedChildLength;
var numUndefinedChilds = child_widths.filter(function(cw) { return cw == undefined;}).length; var numUndefinedChilds = child_lenghts.filter(function(cl) { return cl == undefined;}).length;
var undefinedChildWidth = remainingWithForUndefinedChilds / numUndefinedChilds; var undefinedChildLength = remainingLengthForUndefinedChilds / numUndefinedChilds;
var flowProperty = isUsingColumnFlow ? 'left' : 'top'; var flowProperty = isUsingColumnFlow ? 'left' : 'top';
var oppositeFlowProperty = isUsingColumnFlow ? 'right' : 'bottom'; var oppositeFlowProperty = isUsingColumnFlow ? 'right' : 'bottom';
var prevPerc = 0; var prevPerc = 0;
for (_i = 0; _i < _child_len; ++_i) { for (_i = 0; _i < _child_len; ++_i) {
var child_width = child_widths[_i]; var child_length = child_lenghts[_i];
if(child_width == undefined) { if(child_length == undefined) {
child_width = undefinedChildWidth; child_length = undefinedChildLength;
} }
var area = angular.element(_childens[_i]).css(flowProperty, prevPerc + '%').css(oppositeFlowProperty, 100 - (prevPerc + child_width) + '%'); var area = angular.element(_childens[_i]).css(flowProperty, prevPerc + '%').css(oppositeFlowProperty, 100 - (prevPerc + child_length) + '%');
if (_i < _child_len - 1) { if (_i < _child_len - 1) {
var bar = angular.element(splitBarElem_htmlTemplate).css(flowProperty, prevPerc + child_width + '%'); var bar = angular.element(splitBarElem_htmlTemplate).css(flowProperty, prevPerc + child_length + '%');
area.after(bar); area.after(bar);
} }
prevPerc += child_width; prevPerc += child_length;
} }
} }
}, },
......
"use strict";angular.module("ui.layout",[]).controller("uiLayoutCtrl",["$scope","$attrs","$element",function(b,c,d){return{opts:angular.extend({},b.$eval(c.uiLayout),b.$eval(c.options)),element:d}}]).directive("uiLayout",["$parse",function(a){var b='<div class="stretch ui-splitbar"></div>';return{restrict:"AE",compile:function(d,e){var f,g=d.children(),h=g.length,i=angular.extend({},a(e.uiLayout)(),a(e.options)()),j="column"===i.flow;d.addClass("stretch").addClass("ui-layout-"+(i.flow||"row"));var k=[],l=d[0].clientWidth;for(f=0;f<h;++f){angular.element(g[f]).addClass("stretch");var m=g[f].attributes.getNamedItem("ui-layout-init-min-width");if(m)if(m.nodeValue.includes("%")){var n=parseFloat(m.nodeValue);k.push(n)}else{var n=100*parseFloat(m.nodeValue)/l;k.push(n)}else k.push(void 0)}if(h>1){var o=k.filter(function(a){return void 0!=a}).reduce(function(a,b){return a+b}),p=100-o,q=k.filter(function(a){return void 0==a}).length,r=p/q,s=j?"left":"top",t=j?"right":"bottom",u=0;for(f=0;f<h;++f){var v=k[f];void 0==v&&(v=r);var w=angular.element(g[f]).css(s,u+"%").css(t,100-(u+v)+"%");if(f<h-1){var x=angular.element(b).css(s,u+v+"%");w.after(x)}u+=v}}},controller:"uiLayoutCtrl"}}]).directive("uiSplitbar",function(){var a=angular.element(document.body.parentElement);return{require:"^uiLayout",restrict:"EAC",link:function(b,c,d,e){function o(){var a=e.element[0].getBoundingClientRect(),b=n.getBoundingClientRect();h.time=+new Date,h.barSize=b[m],h.layoutSize=a[m],h.layoutOrigine=a[k]}function p(){var a=(g-h.layoutOrigine)/h.layoutSize*100;a=Math.min(a,100-h.barSize/h.layoutSize*100),a=Math.max(a,parseInt(n.previousElementSibling.style[k],10)),n.nextElementSibling.nextElementSibling&&(a=Math.min(a,parseInt(n.nextElementSibling.nextElementSibling.style[k],10))),n.style[k]=n.nextElementSibling.style[k]=a+"%",n.previousElementSibling.style[l]=100-a+"%",f=null}function q(a){g=a[j]||a.originalEvent[j],f&&window.cancelAnimationFrame(f),(!h.time||+new Date>h.time+1e3)&&o(),f=window.requestAnimationFrame(p)}var f,g,h={},i="column"===e.opts.flow,j=i?"clientX":"clientY",k=i?"left":"top",l=i?"right":"bottom",m=i?"width":"height",n=c[0];c.on("mousedown touchstart",function(b){return b.preventDefault(),b.stopPropagation(),a.on("mousemove touchmove",q),!1}),a.on("mouseup touchend",function(){a.off("mousemove touchmove")})}}});for(var lastTime=0,vendors=["ms","moz","webkit","o"],x=0;x<vendors.length&&!window.requestAnimationFrame;++x)window.requestAnimationFrame=window[vendors[x]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[vendors[x]+"CancelAnimationFrame"]||window[vendors[x]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(a){var b=(new Date).getTime(),c=Math.max(0,16-(b-lastTime)),d=window.setTimeout(function(){a(b+c)},c);return lastTime=b+c,d}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)}); "use strict";angular.module("ui.layout",[]).controller("uiLayoutCtrl",["$scope","$attrs","$element",function(b,c,d){return{opts:angular.extend({},b.$eval(c.uiLayout),b.$eval(c.options)),element:d}}]).directive("uiLayout",["$parse",function(a){var b='<div class="stretch ui-splitbar"></div>';return{restrict:"AE",compile:function(d,e){var f,g=d.children(),h=g.length,i=angular.extend({},a(e.uiLayout)(),a(e.options)()),j="column"===i.flow;d.addClass("stretch").addClass("ui-layout-"+(i.flow||"row"));var k=[],l=j?d[0].clientWidth:d[0].clientHeight;for(f=0;f<h;++f){angular.element(g[f]).addClass("stretch");var m=j?g[f].attributes.getNamedItem("ui-layout-init-width")||g[f].attributes.getNamedItem("ui-layout-init-min-width"):g[f].attributes.getNamedItem("ui-layout-init-height")||g[f].attributes.getNamedItem("ui-layout-init-min-height");if(m){if(m.nodeValue.includes("%")){var n=parseFloat(m.nodeValue);k.push(n)}else{var n=100*parseFloat(m.nodeValue)/l;k.push(n)}var o=j?null===g[f].attributes.getNamedItem("ui-layout-init-width"):null===g[f].attributes.getNamedItem("ui-layout-init-height");o&&(k[k.length-1]=Math.max(k[k.length-1],100/h))}else k.push(void 0)}if(h>1){var p=k.filter(function(a){return void 0!=a}).reduce(function(a,b){return a+b}),q=100-p,r=k.filter(function(a){return void 0==a}).length,s=q/r,t=j?"left":"top",u=j?"right":"bottom",v=0;for(f=0;f<h;++f){var w=k[f];void 0==w&&(w=s);var x=angular.element(g[f]).css(t,v+"%").css(u,100-(v+w)+"%");if(f<h-1){var y=angular.element(b).css(t,v+w+"%");x.after(y)}v+=w}}},controller:"uiLayoutCtrl"}}]).directive("uiSplitbar",function(){var a=angular.element(document.body.parentElement);return{require:"^uiLayout",restrict:"EAC",link:function(b,c,d,e){function o(){var a=e.element[0].getBoundingClientRect(),b=n.getBoundingClientRect();h.time=+new Date,h.barSize=b[m],h.layoutSize=a[m],h.layoutOrigine=a[k]}function p(){var a=(g-h.layoutOrigine)/h.layoutSize*100;a=Math.min(a,100-h.barSize/h.layoutSize*100),a=Math.max(a,parseInt(n.previousElementSibling.style[k],10)),n.nextElementSibling.nextElementSibling&&(a=Math.min(a,parseInt(n.nextElementSibling.nextElementSibling.style[k],10))),n.style[k]=n.nextElementSibling.style[k]=a+"%",n.previousElementSibling.style[l]=100-a+"%",f=null}function q(a){g=a[j]||a.originalEvent[j],f&&window.cancelAnimationFrame(f),(!h.time||+new Date>h.time+1e3)&&o(),f=window.requestAnimationFrame(p)}var f,g,h={},i="column"===e.opts.flow,j=i?"clientX":"clientY",k=i?"left":"top",l=i?"right":"bottom",m=i?"width":"height",n=c[0];c.on("mousedown touchstart",function(b){return b.preventDefault(),b.stopPropagation(),a.on("mousemove touchmove",q),!1}),a.on("mouseup touchend",function(){a.off("mousemove touchmove")})}}});for(var lastTime=0,vendors=["ms","moz","webkit","o"],x=0;x<vendors.length&&!window.requestAnimationFrame;++x)window.requestAnimationFrame=window[vendors[x]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[vendors[x]+"CancelAnimationFrame"]||window[vendors[x]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(a){var b=(new Date).getTime(),c=Math.max(0,16-(b-lastTime)),d=window.setTimeout(function(){a(b+c)},c);return lastTime=b+c,d}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)});
...@@ -112,8 +112,8 @@ ...@@ -112,8 +112,8 @@
ui-grid-edit ui-grid-selection ui-grid-cellNav ui-grid-resize-columns ui-grid-auto-resize ui-grid-edit ui-grid-selection ui-grid-cellNav ui-grid-resize-columns ui-grid-auto-resize
class="grid"></div> class="grid"></div>
</div> </div>
<div ui-layout options="{flow: 'row'}"> <div ui-layout options="{flow: 'row'}" style="height: 100%; margin-right: 4px;">
<md-content margin-top='10px' style="margin-right: 4px;"> <md-content margin-top='10px'>
<md-tabs md-dynamic-height md-border-bottom style="height: 100%; width: 100%;" > <md-tabs md-dynamic-height md-border-bottom style="height: 100%; width: 100%;" >
<div ng-controller="GanttProjectController as ganttProjectCtrl" ng-init="enabled=true"> <div ng-controller="GanttProjectController as ganttProjectCtrl" ng-init="enabled=true">
<md-tab label="Tasks" md-on-select="enabled=true" md-on-deselect="enabled=false"> <md-tab label="Tasks" md-on-select="enabled=true" md-on-deselect="enabled=false">
...@@ -167,7 +167,7 @@ ...@@ -167,7 +167,7 @@
</div> </div>
</md-tabs> </md-tabs>
</md-content> </md-content>
<div ng-controller="EventGridController as eventGridCtrl" style="margin-right: 4px;" ui-layout-init-min-width="150px"> <div ng-controller="EventGridController as eventGridCtrl" ui-layout-init-height="250px">
<div id="grid" <div id="grid"
ui-grid="gridOptions" ui-grid="gridOptions"
ui-grid-resize-columns ui-grid-auto-resize ui-grid-resize-columns ui-grid-auto-resize
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment