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);