From 5796992b5677906f311325c3490ad620115b0b35 Mon Sep 17 00:00:00 2001 From: Francis Lachapelle Date: Thu, 6 Oct 2016 12:27:59 -0400 Subject: [PATCH] (js,css) Resizable left column in attendees editor Will not work in IE since it doesn't support the "resize" CSS property. Fixes #1479, #3667 --- NEWS | 1 + .../SchedulerUI/UIxAttendeesEditor.wox | 2 +- UI/WebServerResources/ResizeSensor.js | 6 +++++ UI/WebServerResources/UIxAttendeesEditor.css | 22 ++++++++++++++----- UI/WebServerResources/UIxAttendeesEditor.js | 6 +++++ 5 files changed, 30 insertions(+), 7 deletions(-) create mode 100644 UI/WebServerResources/ResizeSensor.js diff --git a/NEWS b/NEWS index 52d04f778..046cd4749 100644 --- a/NEWS +++ b/NEWS @@ -6,6 +6,7 @@ New features Enhancements - [web] allow custom email address to be one of the user's profile (#3551) + - [web] the left column of the attendees editor is resizable (not supported in IE) (#1479, #3667) Bug fixes - [eas] make sure we don't sleep for too long when EAS processes need interruption diff --git a/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox b/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox index 15ed1ccba..c50b6c390 100644 --- a/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox +++ b/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox @@ -11,7 +11,7 @@ const:toolbar="none" const:popup="YES" const:cssFiles="datepicker.css,SOGoTimePicker.css" - const:jsFiles="datepicker.js,SOGoTimePicker.js"> + const:jsFiles="datepicker.js,SOGoTimePicker.js,ResizeSensor.js">
diff --git a/UI/WebServerResources/ResizeSensor.js b/UI/WebServerResources/ResizeSensor.js new file mode 100644 index 000000000..9ccd7a151 --- /dev/null +++ b/UI/WebServerResources/ResizeSensor.js @@ -0,0 +1,6 @@ +/** + * Copyright Marc J. Schmidt. See the LICENSE file at the top-level + * directory of this distribution and at + * https://github.com/marcj/css-element-queries/blob/master/LICENSE. + */ +!function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():e.ResizeSensor=t()}(this,function(){function e(e,t){var i=Object.prototype.toString.call(e),n="[object Array]"===i||"[object NodeList]"===i||"[object HTMLCollection]"===i||"undefined"!=typeof jQuery&&e instanceof jQuery||"undefined"!=typeof Elements&&e instanceof Elements,o=0,s=e.length;if(n)for(;s>o;o++)t(e[o]);else t(e)}var t=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){return window.setTimeout(e,20)},i=function(n,o){function s(){var e=[];this.add=function(t){e.push(t)};var t,i;this.call=function(){for(t=0,i=e.length;i>t;t++)e[t].call()},this.remove=function(n){var o=[];for(t=0,i=e.length;i>t;t++)e[t]!==n&&o.push(e[t]);e=o},this.length=function(){return e.length}}function r(e,t){return e.currentStyle?e.currentStyle[t]:window.getComputedStyle?window.getComputedStyle(e,null).getPropertyValue(t):e.style[t]}function d(e,i){if(e.resizedAttached){if(e.resizedAttached)return void e.resizedAttached.add(i)}else e.resizedAttached=new s,e.resizedAttached.add(i);e.resizeSensor=document.createElement("div"),e.resizeSensor.className="resize-sensor";var n="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;",o="position: absolute; left: 0; top: 0; transition: 0s;";e.resizeSensor.style.cssText=n,e.resizeSensor.innerHTML='
',e.appendChild(e.resizeSensor),"static"==r(e,"position")&&(e.style.position="relative");var d=e.resizeSensor.childNodes[0],c=d.childNodes[0],l=e.resizeSensor.childNodes[1],a=function(){c.style.width=1e5+"px",c.style.height=1e5+"px",d.scrollLeft=1e5,d.scrollTop=1e5,l.scrollLeft=1e5,l.scrollTop=1e5};a();var f=!1,h=function(){e.resizedAttached&&(f&&(e.resizedAttached.call(),f=!1),t(h))};t(h);var u,v,z,p,y=function(){(z=e.offsetWidth)==u&&(p=e.offsetHeight)==v||(f=!0,u=z,v=p),a()},m=function(e,t,i){e.attachEvent?e.attachEvent("on"+t,i):e.addEventListener(t,i)};m(d,"scroll",y),m(l,"scroll",y)}e(n,function(e){d(e,o)}),this.detach=function(e){i.detach(n,e)}};return i.detach=function(t,i){e(t,function(e){e.resizedAttached&&"function"==typeof i&&(e.resizedAttached.remove(i),e.resizedAttached.length())||e.resizeSensor&&(e.contains(e.resizeSensor)&&e.removeChild(e.resizeSensor),delete e.resizeSensor,delete e.resizedAttached)})},i}); diff --git a/UI/WebServerResources/UIxAttendeesEditor.css b/UI/WebServerResources/UIxAttendeesEditor.css index f3ba190db..fb656ae9d 100644 --- a/UI/WebServerResources/UIxAttendeesEditor.css +++ b/UI/WebServerResources/UIxAttendeesEditor.css @@ -40,13 +40,19 @@ TABLE#freeBusy TH border: 0px; vertical-align: top; } -TABLE#freeBusy TD.freeBusyHeader DIV, -TABLE#freeBusy TD.freeBusyAttendees DIV +TABLE#freeBusy TD.freeBusyHeader DIV { overflow: hidden; } +TABLE#freeBusy TD.freeBusyAttendees DIV +{ overflow-x: auto; } + TABLE#freeBusy TD.freeBusyData DIV { overflow: scroll; } +TABLE#freeBusyAttendees { + width: 100%; +} + TABLE#freeBusyAttendees TD.attendeeStatus { width: 24px; min-width: 24px; @@ -144,16 +150,20 @@ TABLE#freeBusyAttendees TD TABLE#freeBusyData TR.futureData TD { border-left: none; } -TABLE#freeBusy TD.freeBusyAttendees DIV -{ width: 16em; } +TABLE#freeBusy TD.freeBusyAttendees > DIV +{ min-width: 16em; + resize: horizontal; /* NOTE: unsupported property in IE */ } TABLE#freeBusyAttendees TD.attendees INPUT { background-image: url("abcard.png"); background-repeat: no-repeat; background-position: 4px center; border: 0px; - width: 12em; - padding-left: 24px; } + box-sizing: border-box; + display: table-cell; + margin: 0; + padding: 6px 0 6px 24px; + width: 100%; } TABLE#freeBusyAttendees TR.futureAttendee INPUT { background-image: none; diff --git a/UI/WebServerResources/UIxAttendeesEditor.js b/UI/WebServerResources/UIxAttendeesEditor.js index f9862b98d..4b61718b7 100644 --- a/UI/WebServerResources/UIxAttendeesEditor.js +++ b/UI/WebServerResources/UIxAttendeesEditor.js @@ -1666,6 +1666,12 @@ function onFreeBusyLoadHandler() { Event.observe(window, "resize", onWindowResize); $$('TABLE#freeBusy TD.freeBusyData DIV').first().observe("scroll", onScroll); scrollToEvent(); + + // Recompute dimensions of attendees cell (left size) and freebusy data cell (right size) + // when the attendees cell is resized. + new ResizeSensor($('freeBusyAttendees').parentNode, function() { + onWindowResize(null); + }); } document.observe("dom:loaded", onFreeBusyLoadHandler);