Commit 392f1c5b authored by Bas Lijnse's avatar Bas Lijnse

Temporary fix for buggy resizers. Only top and bottom sizers on panels are...

Temporary fix for buggy resizers. Only top and bottom sizers on panels are allowed for now. Left and right sizers still need to be done.
parent e73fbd9a
......@@ -58,22 +58,18 @@ arrangeWithSideBar index side size resize = sequenceLayouts
,setUIAttributes (directionAttr direction)
,moveSubUIs (SelectByPath [0,index]) [] sidePanelIndex
,layoutSubUIs (SelectByPath [sidePanelIndex]) (sequenceLayouts
[setUIAttributes (sizeAttr sidePanelWidth sidePanelHeight)
:if resize
[setUIAttributes (resizableAttr (resizers side))
,setUIAttributes (padders side)
] []
])
(if resize
[wrapUI UIPanel
,setUIAttributes (sizeAttr sidePanelWidth sidePanelHeight)
,setUIAttributes (resizableAttr (resizers side))
]
[setUIAttributes (sizeAttr sidePanelWidth sidePanelHeight)]
))
]
where
sidePanelIndex = if (side === TopSide || side === LeftSide) 0 1
direction = if (side === TopSide|| side === BottomSide) Vertical Horizontal
padders TopSide = bottomPaddingAttr 5
padders BottomSide = topPaddingAttr 5
padders LeftSide = rightPaddingAttr 5
padders RightSide = leftPaddingAttr 5
resizers TopSide = [BottomSide]
resizers BottomSide = [TopSide]
resizers LeftSide = [RightSide]
......
......@@ -359,3 +359,14 @@
.#{$prefix}debug {
border: 3px solid red;
}
.#{$prefix}vsizer {
height: 5px;
cursor: ns-resize;
background-color: #{$canvas-base-color};
&:hover {
background-color: #{$select-base-color};
}
}
......@@ -558,6 +558,13 @@ div.itasks-exception {
.itasks-debug {
border: 3px solid red; }
.itasks-vsizer {
height: 5px;
cursor: ns-resize;
background-color: #eee; }
.itasks-vsizer:hover {
background-color: #333; }
.itasks-icon {
width: 16px;
height: 16px; }
......
......@@ -5,75 +5,20 @@ itasks.Container = {
if(me.baseCls) {
me.domEl.classList.add(me.baseCls);
}
if(me.attributes.resizable){
me.domEl.style.position = 'relative';
function resizer(me, c, w, h, l, r, t, b, rw, rh){
res = document.createElement('div');
res.style.width = w;
res.style.height = h;
res.style.background = 'gray';
res.style.position = 'absolute';
res.style.left = l;
res.style.right = r;
res.style.top = t;
res.style.bottom = b;
res.style.cursor = c;
res.style.borderStyle = 'groove';
res.style.borderWidth = '2px';
me.domEl.style.overflow = 'hidden';
me.domEl.appendChild(res);
//Add listener
res.addEventListener('mousedown', function init (e){
var oldX = e.clientX;
var oldY = e.clientY;
var oldW = parseInt(me.domEl.style.width.slice(0, -2));
var oldH = parseInt(me.domEl.style.height.slice(0, -2));
var resize = function resize(ev) {
me.domEl.style.width = rw(oldX, oldW, ev) + "px";
me.domEl.style.height = rh(oldY, oldH, ev) + "px";
};
window.addEventListener('mousemove', resize, false);
window.addEventListener('mouseup',
function stop(e){
window.removeEventListener('mousemove', resize, false);
window.removeEventListener('mouseup', stop, false);
}, false);
}, false);
}
if(me.attributes.resizable.includes("left")){
resizer(me, "ew-resize", '0px', '100%', 0, undefined, 0, undefined,
function (ox, ow, ev) {return ow + (ox - ev.clientX);},
function (oy, oh, ev) {return oh;});
}
if(me.attributes.resizable.includes("right")){
resizer(me, "ew-resize", '0px', '100%', undefined, 0, 0, undefined,
function (ox, ow, ev) {return ow + (ev.clientX - ox);},
function (oy, oh, ev) {return oh;});
}
if(me.attributes.resizable.includes("top")){
resizer(me, "ns-resize", '100%', '0px', 0, undefined, 0, undefined,
function (ox, ow, ev) {return ow;},
function (oy, oh, ev) {return oh + (oy - ev.clientY);});
}
if(me.attributes.resizable.includes("bottom")){
resizer(me, "ns-resize", '100%', '0px', 0, undefined, undefined, 0,
function (ox, ow, ev) {return ow;},
function (oy, oh, ev) {return oh + (ev.clientY - oy);});
}
}
}
};
itasks.Panel = {
cssCls: 'panel',
initDOMEl: function() {
var me = this,
isTab = (me.parentCmp && me.parentCmp.type == 'TabSet');
//Add top sizer
if(me.attributes.resizable && me.attributes.resizable.includes('top')) {
me.domEl.append(me.createSizer());
}
//Create header
if(me.attributes.title && !isTab) {
me.headerEl = document.createElement('div');
......@@ -87,6 +32,11 @@ itasks.Panel = {
me.containerEl.classList.add(me.cssPrefix + 'inner');
me.domEl.appendChild(me.containerEl);
//Add bottom sizer
if(me.attributes.resizable && me.attributes.resizable.includes('bottom')) {
me.domEl.append(me.createSizer());
}
if(me.frame) {
me.domEl.classList.add(me.cssPrefix + 'framed');
}
......@@ -131,12 +81,36 @@ itasks.Panel = {
fullscreener.style.zIndex = 999;
me.domEl.style.zIndex = 998;
me.fullscreen = true;
console.log(me.oldstyle);
}
};
me.domEl.appendChild(fullscreener);
}
}
},
createSizer: function() {
var me = this,
el = document.createElement('div');
el.classList.add(me.cssPrefix + 'vsizer');
el.addEventListener('mousedown', function init (e){
var startPos = e.clientY;
var startSize = parseInt(window.getComputedStyle(me.domEl).getPropertyValue('height').slice(0,-2));
var resize = function resize(ev) {
me.domEl.style['height'] = (startSize + (ev.clientY - startPos)) + 'px';
};
window.addEventListener('mousemove', resize, false);
window.addEventListener('mouseup', function stop(e){
window.removeEventListener('mousemove', resize, false);
window.removeEventListener('mouseup', stop, false);
}, false);
}, false);
return el;
},
};
itasks.TabSet = {
cssCls: 'tabset',
......
  • This quick fix is still in the master.

    My first question is whether someone who already worked on this has time to properly fix this (also including left/right resizers) within a couple of weeks. @baslijns? @mlubbers?

    Otherwise, I'll fix it. Then it would help to know what the problem was with the code removed by this quick fix. Should I revert to it and fix it or was there a fundamental problem and I should take a completely different approach?

    Thanks.

  • I can take a look at it. I want to clean up that part of the html/css anyway. If I remember correctly, it had to do with the fact that the wrapper elements of panels are always layed out vertically (e.g. title on top etc). So adding sizer elements in the vertical direction works, but left and right don’t. Nowadays css grid is supported almost everywhere, which should make it possible to create a flexible template for itasks panels that can also have optional left and right sizers.

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