Commit 0fd85bfe authored by Bas Lijnse's avatar Bas Lijnse

Improved explicit sizing of child elements

parent 5b260280
......@@ -32,77 +32,6 @@ div.itasks-exception {
text-align: center;
}
/* Sizing children of vertical containers */
.itasks-viewport > .itasks-flex-width,
.itasks-panel > .itasks-inner > .itasks-flex-width,
.itasks-window > .itasks-inner > .itasks-flex-width,
.itasks-tabitems > .itasks-flex-width,
.itasks-container > .itasks-flex-width {
align-self: stretch;
}
.itasks-viewport > .itasks-flex-height,
.itasks-panel > .itasks-inner > .itasks-flex-height,
.itasks-window > .itasks-inner > .itasks-flex-height,
.itasks-tabitems > .itasks-flex-height,
.itasks-container > .itasks-flex-height {
flex: 1;
}
.itasks-viewport > .itasks-wrap-height,
.itasks-panel > .itasks-inner > .itasks-wrap-height,
.itasks-window > .itasks-inner > .itasks-wrap-height,
.itasks-tabitems > .itasks-wrap-height,
.itasks-container > .itasks-wrap-height {
flex-shrink: 0;
flex-grow: 0;
flex-basis: auto;
}
.itasks-viewport > .itasks-wrap-height .itasks-inner,
.itasks-panel > .itasks-inner > .itasks-wrap-height .itasks-inner,
.itasks-window > .itasks-inner > .itasks-wrap-height .itasks-inner,
.itasks-tabitems > .itasks-wrap-height .itasks-inner,
.itasks-container > .itasks-wrap-height .itasks-inner {
flex-basis: auto;
}
/* Sizing children of horizontal containers */
.itasks-container.itasks-horizontal > .itasks-flex-width,
.itasks-panel.itasks-horizontal > .itasks-flex-width,
.itasks-form-item > .itasks-flex-width,
.itasks-toolbar > .itasks-flex-width,
.itasks-buttonbar > .itasks-flex-width,
.itasks-cons > .itasks-flex-width,
.itasks-var-cons > .itasks-flex-width,
.itasks-listitem > .itasks-flex-width,
.itasks-listitem-controls > .itasks-flex-width {
flex: 1;
}
.itasks-container.itasks-horizontal > .itasks-flex-height,
.itasks-panel.itasks-horizontal > .itasks-flex-height,
.itasks-form-item > .itasks-flex-height,
.itasks-toolbar > .itasks-flex-height,
.itasks-buttonbar > .itasks-flex-height,
.itasks-cons > .itasks-flex-height,
.itasks-var-cons > .itasks-flex-height,
.itasks-listitem > .itasks-flex-height,
.itasks-listitem-controls > .itasks-flex-height {
align-self: stretch;
}
.itasks-horizontal-container > .itasks-wrap-width,
.itasks-form-item > .itasks-wrap-width,
.itasks-toolbar > .itasks-wrap-width,
.itasks-buttonbar > .itasks-wrap-width,
.itasks-cons > .itasks-wrap-width,
.itasks-var-cons > .itasks-wrap-width,
.itasks-listitem > .itasks-wrap-width,
.itasks-listitem-controls > .itasks-wrap-width {
flex-shrink: 0;
flex-basis: auto;
}
/* Styles for unlayouted content */
.itasks-raw-record,
.itasks-raw-cons,
......@@ -800,6 +729,107 @@ div.itasks-exception {
border: 3px solid red;
}
/* Sizing the children of containers that have specific size classes assigned to them: */
/* Sizing children of vertical containers */
.itasks-viewport > .itasks-flex-width,
.itasks-panel > .itasks-inner > .itasks-flex-width,
.itasks-window > .itasks-inner > .itasks-flex-width,
.itasks-tabitems > .itasks-flex-width,
.itasks-container > .itasks-flex-width {
align-self: stretch;
}
.itasks-viewport > .itasks-flex-height,
.itasks-panel > .itasks-inner > .itasks-flex-height,
.itasks-window > .itasks-inner > .itasks-flex-height,
.itasks-tabitems > .itasks-flex-height,
.itasks-container > .itasks-flex-height {
flex: 1;
}
.itasks-viewport > .itasks-exact-height, .itasks-viewport > .itasks-wrap-height,
.itasks-panel > .itasks-inner > .itasks-exact-height,
.itasks-panel > .itasks-inner > .itasks-wrap-height,
.itasks-window > .itasks-inner > .itasks-exact-height,
.itasks-window > .itasks-inner > .itasks-wrap-height,
.itasks-tabitems > .itasks-exact-height,
.itasks-tabitems > .itasks-wrap-height,
.itasks-container > .itasks-exact-height,
.itasks-container > .itasks-wrap-height {
flex: 0 0 auto;
}
.itasks-viewport > .itasks-exact-height > .itasks-inner, .itasks-viewport > .itasks-wrap-height > .itasks-inner,
.itasks-panel > .itasks-inner > .itasks-exact-height > .itasks-inner,
.itasks-panel > .itasks-inner > .itasks-wrap-height > .itasks-inner,
.itasks-window > .itasks-inner > .itasks-exact-height > .itasks-inner,
.itasks-window > .itasks-inner > .itasks-wrap-height > .itasks-inner,
.itasks-tabitems > .itasks-exact-height > .itasks-inner,
.itasks-tabitems > .itasks-wrap-height > .itasks-inner,
.itasks-container > .itasks-exact-height > .itasks-inner,
.itasks-container > .itasks-wrap-height > .itasks-inner {
flex-basis: auto;
}
/* Sizing children of horizontal containers */
.itasks-container.itasks-horizontal > .itasks-flex-width,
.itasks-panel.itasks-horizontal > .itasks-inner > .itasks-flex-width,
.itasks-form-item > .itasks-flex-width,
.itasks-toolbar > .itasks-flex-width,
.itasks-buttonbar > .itasks-flex-width,
.itasks-cons > .itasks-flex-width,
.itasks-var-cons > .itasks-flex-width,
.itasks-listitem > .itasks-flex-width,
.itasks-listitem-controls > .itasks-flex-width {
flex: 1;
}
.itasks-container.itasks-horizontal > .itasks-flex-height,
.itasks-panel.itasks-horizontal > .itasks-inner > .itasks-flex-height,
.itasks-form-item > .itasks-flex-height,
.itasks-toolbar > .itasks-flex-height,
.itasks-buttonbar > .itasks-flex-height,
.itasks-cons > .itasks-flex-height,
.itasks-var-cons > .itasks-flex-height,
.itasks-listitem > .itasks-flex-height,
.itasks-listitem-controls > .itasks-flex-height {
align-self: stretch;
}
.itasks-container.itasks-horizontal > .itasks-exact-width, .itasks-container.itasks-horizontal > .itasks-wrap-width,
.itasks-panel.itasks-horizontal > .itasks-inner > .itasks-exact-width,
.itasks-panel.itasks-horizontal > .itasks-inner > .itasks-wrap-width,
.itasks-form-item > .itasks-exact-width,
.itasks-form-item > .itasks-wrap-width,
.itasks-toolbar > .itasks-exact-width,
.itasks-toolbar > .itasks-wrap-width,
.itasks-buttonbar > .itasks-exact-width,
.itasks-buttonbar > .itasks-wrap-width,
.itasks-cons > .itasks-exact-width,
.itasks-cons > .itasks-wrap-width,
.itasks-var-cons > .itasks-exact-width,
.itasks-var-cons > .itasks-wrap-width,
.itasks-listitem > .itasks-exact-width,
.itasks-listitem > .itasks-wrap-width,
.itasks-listitem-controls > .itasks-exact-width,
.itasks-listitem-controls > .itasks-wrap-width {
flex: 0 0 auto;
}
.itasks-container.itasks-horizontal > .itasks-exact-width > .itasks-inner, .itasks-container.itasks-horizontal > .itasks-wrap-width > .itasks-inner,
.itasks-panel.itasks-horizontal > .itasks-inner > .itasks-exact-width > .itasks-inner,
.itasks-panel.itasks-horizontal > .itasks-inner > .itasks-wrap-width > .itasks-inner,
.itasks-form-item > .itasks-exact-width > .itasks-inner,
.itasks-form-item > .itasks-wrap-width > .itasks-inner,
.itasks-toolbar > .itasks-exact-width > .itasks-inner,
.itasks-toolbar > .itasks-wrap-width > .itasks-inner,
.itasks-buttonbar > .itasks-exact-width > .itasks-inner,
.itasks-buttonbar > .itasks-wrap-width > .itasks-inner,
.itasks-cons > .itasks-exact-width > .itasks-inner,
.itasks-cons > .itasks-wrap-width > .itasks-inner,
.itasks-var-cons > .itasks-exact-width > .itasks-inner,
.itasks-var-cons > .itasks-wrap-width > .itasks-inner,
.itasks-listitem > .itasks-exact-width > .itasks-inner,
.itasks-listitem > .itasks-wrap-width > .itasks-inner,
.itasks-listitem-controls > .itasks-exact-width > .itasks-inner,
.itasks-listitem-controls > .itasks-wrap-width > .itasks-inner {
flex-basis: auto;
}
/* Container components with additional styling */
.itasks-container.itasks-horizontal,
.itasks-panel.itasks-horizontal {
......
......@@ -32,77 +32,6 @@ div.itasks-exception {
text-align: center;
}
/* Sizing children of vertical containers */
.itasks-viewport > .itasks-flex-width,
.itasks-panel > .itasks-inner > .itasks-flex-width,
.itasks-window > .itasks-inner > .itasks-flex-width,
.itasks-tabitems > .itasks-flex-width,
.itasks-container > .itasks-flex-width {
align-self: stretch;
}
.itasks-viewport > .itasks-flex-height,
.itasks-panel > .itasks-inner > .itasks-flex-height,
.itasks-window > .itasks-inner > .itasks-flex-height,
.itasks-tabitems > .itasks-flex-height,
.itasks-container > .itasks-flex-height {
flex: 1;
}
.itasks-viewport > .itasks-wrap-height,
.itasks-panel > .itasks-inner > .itasks-wrap-height,
.itasks-window > .itasks-inner > .itasks-wrap-height,
.itasks-tabitems > .itasks-wrap-height,
.itasks-container > .itasks-wrap-height {
flex-shrink: 0;
flex-grow: 0;
flex-basis: auto;
}
.itasks-viewport > .itasks-wrap-height .itasks-inner,
.itasks-panel > .itasks-inner > .itasks-wrap-height .itasks-inner,
.itasks-window > .itasks-inner > .itasks-wrap-height .itasks-inner,
.itasks-tabitems > .itasks-wrap-height .itasks-inner,
.itasks-container > .itasks-wrap-height .itasks-inner {
flex-basis: auto;
}
/* Sizing children of horizontal containers */
.itasks-container.itasks-horizontal > .itasks-flex-width,
.itasks-panel.itasks-horizontal > .itasks-flex-width,
.itasks-form-item > .itasks-flex-width,
.itasks-toolbar > .itasks-flex-width,
.itasks-buttonbar > .itasks-flex-width,
.itasks-cons > .itasks-flex-width,
.itasks-var-cons > .itasks-flex-width,
.itasks-listitem > .itasks-flex-width,
.itasks-listitem-controls > .itasks-flex-width {
flex: 1;
}
.itasks-container.itasks-horizontal > .itasks-flex-height,
.itasks-panel.itasks-horizontal > .itasks-flex-height,
.itasks-form-item > .itasks-flex-height,
.itasks-toolbar > .itasks-flex-height,
.itasks-buttonbar > .itasks-flex-height,
.itasks-cons > .itasks-flex-height,
.itasks-var-cons > .itasks-flex-height,
.itasks-listitem > .itasks-flex-height,
.itasks-listitem-controls > .itasks-flex-height {
align-self: stretch;
}
.itasks-horizontal-container > .itasks-wrap-width,
.itasks-form-item > .itasks-wrap-width,
.itasks-toolbar > .itasks-wrap-width,
.itasks-buttonbar > .itasks-wrap-width,
.itasks-cons > .itasks-wrap-width,
.itasks-var-cons > .itasks-wrap-width,
.itasks-listitem > .itasks-wrap-width,
.itasks-listitem-controls > .itasks-wrap-width {
flex-shrink: 0;
flex-basis: auto;
}
/* Styles for unlayouted content */
.itasks-raw-record,
.itasks-raw-cons,
......@@ -800,6 +729,107 @@ div.itasks-exception {
border: 3px solid red;
}
/* Sizing the children of containers that have specific size classes assigned to them: */
/* Sizing children of vertical containers */
.itasks-viewport > .itasks-flex-width,
.itasks-panel > .itasks-inner > .itasks-flex-width,
.itasks-window > .itasks-inner > .itasks-flex-width,
.itasks-tabitems > .itasks-flex-width,
.itasks-container > .itasks-flex-width {
align-self: stretch;
}
.itasks-viewport > .itasks-flex-height,
.itasks-panel > .itasks-inner > .itasks-flex-height,
.itasks-window > .itasks-inner > .itasks-flex-height,
.itasks-tabitems > .itasks-flex-height,
.itasks-container > .itasks-flex-height {
flex: 1;
}
.itasks-viewport > .itasks-exact-height, .itasks-viewport > .itasks-wrap-height,
.itasks-panel > .itasks-inner > .itasks-exact-height,
.itasks-panel > .itasks-inner > .itasks-wrap-height,
.itasks-window > .itasks-inner > .itasks-exact-height,
.itasks-window > .itasks-inner > .itasks-wrap-height,
.itasks-tabitems > .itasks-exact-height,
.itasks-tabitems > .itasks-wrap-height,
.itasks-container > .itasks-exact-height,
.itasks-container > .itasks-wrap-height {
flex: 0 0 auto;
}
.itasks-viewport > .itasks-exact-height > .itasks-inner, .itasks-viewport > .itasks-wrap-height > .itasks-inner,
.itasks-panel > .itasks-inner > .itasks-exact-height > .itasks-inner,
.itasks-panel > .itasks-inner > .itasks-wrap-height > .itasks-inner,
.itasks-window > .itasks-inner > .itasks-exact-height > .itasks-inner,
.itasks-window > .itasks-inner > .itasks-wrap-height > .itasks-inner,
.itasks-tabitems > .itasks-exact-height > .itasks-inner,
.itasks-tabitems > .itasks-wrap-height > .itasks-inner,
.itasks-container > .itasks-exact-height > .itasks-inner,
.itasks-container > .itasks-wrap-height > .itasks-inner {
flex-basis: auto;
}
/* Sizing children of horizontal containers */
.itasks-container.itasks-horizontal > .itasks-flex-width,
.itasks-panel.itasks-horizontal > .itasks-inner > .itasks-flex-width,
.itasks-form-item > .itasks-flex-width,
.itasks-toolbar > .itasks-flex-width,
.itasks-buttonbar > .itasks-flex-width,
.itasks-cons > .itasks-flex-width,
.itasks-var-cons > .itasks-flex-width,
.itasks-listitem > .itasks-flex-width,
.itasks-listitem-controls > .itasks-flex-width {
flex: 1;
}
.itasks-container.itasks-horizontal > .itasks-flex-height,
.itasks-panel.itasks-horizontal > .itasks-inner > .itasks-flex-height,
.itasks-form-item > .itasks-flex-height,
.itasks-toolbar > .itasks-flex-height,
.itasks-buttonbar > .itasks-flex-height,
.itasks-cons > .itasks-flex-height,
.itasks-var-cons > .itasks-flex-height,
.itasks-listitem > .itasks-flex-height,
.itasks-listitem-controls > .itasks-flex-height {
align-self: stretch;
}
.itasks-container.itasks-horizontal > .itasks-exact-width, .itasks-container.itasks-horizontal > .itasks-wrap-width,
.itasks-panel.itasks-horizontal > .itasks-inner > .itasks-exact-width,
.itasks-panel.itasks-horizontal > .itasks-inner > .itasks-wrap-width,
.itasks-form-item > .itasks-exact-width,
.itasks-form-item > .itasks-wrap-width,
.itasks-toolbar > .itasks-exact-width,
.itasks-toolbar > .itasks-wrap-width,
.itasks-buttonbar > .itasks-exact-width,
.itasks-buttonbar > .itasks-wrap-width,
.itasks-cons > .itasks-exact-width,
.itasks-cons > .itasks-wrap-width,
.itasks-var-cons > .itasks-exact-width,
.itasks-var-cons > .itasks-wrap-width,
.itasks-listitem > .itasks-exact-width,
.itasks-listitem > .itasks-wrap-width,
.itasks-listitem-controls > .itasks-exact-width,
.itasks-listitem-controls > .itasks-wrap-width {
flex: 0 0 auto;
}
.itasks-container.itasks-horizontal > .itasks-exact-width > .itasks-inner, .itasks-container.itasks-horizontal > .itasks-wrap-width > .itasks-inner,
.itasks-panel.itasks-horizontal > .itasks-inner > .itasks-exact-width > .itasks-inner,
.itasks-panel.itasks-horizontal > .itasks-inner > .itasks-wrap-width > .itasks-inner,
.itasks-form-item > .itasks-exact-width > .itasks-inner,
.itasks-form-item > .itasks-wrap-width > .itasks-inner,
.itasks-toolbar > .itasks-exact-width > .itasks-inner,
.itasks-toolbar > .itasks-wrap-width > .itasks-inner,
.itasks-buttonbar > .itasks-exact-width > .itasks-inner,
.itasks-buttonbar > .itasks-wrap-width > .itasks-inner,
.itasks-cons > .itasks-exact-width > .itasks-inner,
.itasks-cons > .itasks-wrap-width > .itasks-inner,
.itasks-var-cons > .itasks-exact-width > .itasks-inner,
.itasks-var-cons > .itasks-wrap-width > .itasks-inner,
.itasks-listitem > .itasks-exact-width > .itasks-inner,
.itasks-listitem > .itasks-wrap-width > .itasks-inner,
.itasks-listitem-controls > .itasks-exact-width > .itasks-inner,
.itasks-listitem-controls > .itasks-wrap-width > .itasks-inner {
flex-basis: auto;
}
/* Container components with additional styling */
.itasks-container.itasks-horizontal,
.itasks-panel.itasks-horizontal {
......
......@@ -490,6 +490,53 @@
border: 3px solid red;
}
/* Sizing the children of containers that have specific size classes assigned to them: */
/* Sizing children of vertical containers */
.#{$prefix}viewport,
.#{$prefix}panel > .#{$prefix}inner,
.#{$prefix}window > .#{$prefix}inner,
.#{$prefix}tabitems,
.#{$prefix}container {
& > .#{$prefix}flex-width {
align-self: stretch;
}
& > .#{$prefix}flex-height {
flex: 1;
}
& > .#{$prefix}exact-height,
& > .#{$prefix}wrap-height {
flex: 0 0 auto;
> .#{$prefix}inner {
flex-basis: auto;
}
}
}
/* Sizing children of horizontal containers */
.#{$prefix}container.#{$prefix}horizontal,
.#{$prefix}panel.#{$prefix}horizontal > .#{$prefix}inner,
.#{$prefix}form-item,
.#{$prefix}toolbar,
.#{$prefix}buttonbar,
.#{$prefix}cons,
.#{$prefix}var-cons,
.#{$prefix}listitem,
.#{$prefix}listitem-controls {
& > .#{$prefix}flex-width {
flex: 1;
}
& > .#{$prefix}flex-height {
align-self: stretch;
}
& > .#{$prefix}exact-width,
& > .#{$prefix}wrap-width {
flex: 0 0 auto;
> .#{$prefix}inner {
flex-basis: auto;
}
}
}
/* Container components with additional styling */
.#{$prefix}container.#{$prefix}horizontal,
.#{$prefix}panel.#{$prefix}horizontal {
......
......@@ -20,68 +20,3 @@ div.#{$prefix}loader-spinner {
div.#{$prefix}exception {
text-align: center;
}
/* Sizing children of vertical containers */
.#{$prefix}viewport > .#{$prefix}flex-width,
.#{$prefix}panel > .#{$prefix}inner > .#{$prefix}flex-width,
.#{$prefix}window > .#{$prefix}inner > .#{$prefix}flex-width,
.#{$prefix}tabitems > .#{$prefix}flex-width,
.#{$prefix}container > .#{$prefix}flex-width {
align-self: stretch;
}
.#{$prefix}viewport > .#{$prefix}flex-height,
.#{$prefix}panel > .#{$prefix}inner > .#{$prefix}flex-height,
.#{$prefix}window > .#{$prefix}inner > .#{$prefix}flex-height,
.#{$prefix}tabitems > .#{$prefix}flex-height,
.#{$prefix}container > .#{$prefix}flex-height {
flex: 1;
}
.#{$prefix}viewport > .#{$prefix}wrap-height,
.#{$prefix}panel > .#{$prefix}inner > .#{$prefix}wrap-height,
.#{$prefix}window > .#{$prefix}inner > .#{$prefix}wrap-height,
.#{$prefix}tabitems > .#{$prefix}wrap-height,
.#{$prefix}container > .#{$prefix}wrap-height {
flex-shrink: 0;
flex-grow: 0;
flex-basis: auto;
.#{$prefix}inner {
flex-basis: auto;
}
}
/* Sizing children of horizontal containers */
.#{$prefix}container.#{$prefix}horizontal > .#{$prefix}flex-width,
.#{$prefix}panel.#{$prefix}horizontal > .#{$prefix}flex-width,
.#{$prefix}form-item > .#{$prefix}flex-width,
.#{$prefix}toolbar > .#{$prefix}flex-width,
.#{$prefix}buttonbar > .#{$prefix}flex-width,
.#{$prefix}cons > .#{$prefix}flex-width,
.#{$prefix}var-cons > .#{$prefix}flex-width,
.#{$prefix}listitem > .#{$prefix}flex-width,
.#{$prefix}listitem-controls > .#{$prefix}flex-width {
flex: 1;
}
.#{$prefix}container.#{$prefix}horizontal > .#{$prefix}flex-height,
.#{$prefix}panel.#{$prefix}horizontal > .#{$prefix}flex-height,
.#{$prefix}form-item > .#{$prefix}flex-height,
.#{$prefix}toolbar > .#{$prefix}flex-height,
.#{$prefix}buttonbar > .#{$prefix}flex-height,
.#{$prefix}cons > .#{$prefix}flex-height,
.#{$prefix}var-cons > .#{$prefix}flex-height,
.#{$prefix}listitem > .#{$prefix}flex-height,
.#{$prefix}listitem-controls > .#{$prefix}flex-height {
align-self: stretch;
}
.#{$prefix}horizontal-container > .#{$prefix}wrap-width,
.#{$prefix}form-item > .#{$prefix}wrap-width,
.#{$prefix}toolbar > .#{$prefix}wrap-width,
.#{$prefix}buttonbar > .#{$prefix}wrap-width,
.#{$prefix}cons > .#{$prefix}wrap-width,
.#{$prefix}var-cons > .#{$prefix}wrap-width,
.#{$prefix}listitem > .#{$prefix}wrap-width,
.#{$prefix}listitem-controls > .#{$prefix}wrap-width {
flex-shrink: 0;
flex-basis: auto;
}
......@@ -107,19 +107,25 @@ itasks.Component = {
height = me.attributes.height;
//Set width & height using attributes
if(width === 'flex') {
el.classList.add(me.cssPrefix + 'flex-width');
} else if (width === 'wrap') {
el.classList.add(me.cssPrefix + 'wrap-width');
} else {
el.style.width = width + 'px';
}
if(height === 'flex') {
el.classList.add(me.cssPrefix + 'flex-height');
} else if (height === 'wrap') {
el.classList.add(me.cssPrefix + 'wrap-height');
} else {
el.style.height = height + 'px';
if('width' in me.attributes) {
if(width === 'flex') {
el.classList.add(me.cssPrefix + 'flex-width');
} else if (width === 'wrap') {
el.classList.add(me.cssPrefix + 'wrap-width');
} else {
el.classList.add(me.cssPrefix + 'exact-width');
el.style.width = width + 'px';
}
}
if('height' in me.attributes) {
if(height === 'flex') {
el.classList.add(me.cssPrefix + 'flex-height');
} else if (height === 'wrap') {
el.classList.add(me.cssPrefix + 'wrap-height');
} else {
el.classList.add(me.cssPrefix + 'exact-height');
el.style.height = height + 'px';
}
}
},
doEditEvent: function (taskId, editorId, value) {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment