Convert color picker to an inline widget

The colors are now limited to the colors offered in Thunderbird.

UI/WebServerResources/SchedulerUI.js

@@ -699,7 +699,6 @@ function onViewEventCallback(http) {
             var cellDimensions = cell.getDimensions();
             var div = $("eventDialog");
             var divDimensions = div.getDimensions();
-            var viewPosition = $("calendarView").cumulativeOffset();
             var view;
             var left;
             var top = cellPosition[1] - 5;

UI/WebServerResources/UIxCalendarProperties.css

@@ -31,13 +31,19 @@ SPAN.content
 SPAN.content INPUT.textField
 { width: 160px; }
 
-BUTTON#colorButton
-{ display: none;
-  border: 1px solid #FFFFFF;
-  border-top: 1px solid #909090;
-  border-left: 1px solid #909090;
-  width: 3em;
-  height: 18px; }
+DIV.colorBox
+{ margin: 5px 0;
+ -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+  border: 2px solid #eee; }
+
+DIV.colorBox:hover
+{ border-color: #fff; }
+
+#colorPickerDialog
+{ width: 146px;
+  height: 191px; }
 
 DIV#buttons
 { position: absolute; 

UI/WebServerResources/UIxCalendarProperties.js

@@ -7,9 +7,12 @@ function onLoadCalendarProperties() {
 
     var colorButton = $("colorButton");
     var calendarColor = $("calendarColor");
-    colorButton.setStyle({ "backgroundColor": calendarColor.value, display: "inline" });
+    colorButton.setStyle({ "backgroundColor": colorButton.readAttribute('data-color') });
     colorButton.observe("click", onColorClick);
     
+    $('colorPickerDialog').on('click', 'span', onColorPickerChoice);
+    $(document.body).on("click", onBodyClickHandler);
+
     var cancelButton = $("cancelButton");
     cancelButton.observe("click", onCancelClick);
     
@@ -74,22 +77,31 @@ function onOKClick(event) {
       Event.stop(event);
 }
 
-function onColorClick(event) {
-  var cPicker = window.open(ApplicationBaseURL + "colorPicker", "colorPicker",
-                            "width=250,height=200,resizable=0,scrollbars=0"
-                            + "toolbar=0,location=0,directories=0,status=0,"
-                            + "menubar=0,copyhistory=0", "test"
-                            );
-  cPicker.focus();
-  
-  preventDefault(event);
+function onBodyClickHandler(event) {
+    var target = getTarget(event);
+    if (!target.hasClassName('colorBox'))
+        $("colorPickerDialog").hide();
 }
 
-function onColorPickerChoice(newColor) {
-  var colorButton = $("colorButton");
-  colorButton.setStyle({ "backgroundColor": newColor });
-  var calendarColor = $("calendarColor");
-  calendarColor.value = newColor;
+function onColorClick(event) {
+    var cellPosition = this.cumulativeOffset();
+    var cellDimensions = this.getDimensions();
+    var div = $('colorPickerDialog');
+    var divDimensions = div.getDimensions();
+    var left = cellPosition[0] + cellDimensions["width"] + 4;
+    var top = cellPosition[1] - 5;
+    div.setStyle({ left: left + "px", top: top + "px" });
+    div.show();
+
+    preventDefault(event);
+}
+
+function onColorPickerChoice(event) {
+    var span = getTarget(event);
+    var newColor = "#" + span.className.substr(4);
+    var colorButton = $("colorButton");
+    colorButton.setStyle({ "backgroundColor": newColor });
+    $("calendarColor").value = newColor;
 }
 
 document.observe("dom:loaded", onLoadCalendarProperties);

UI/WebServerResources/UIxPreferences.css

@@ -231,3 +231,19 @@ P.infoMessage#passwordError
 
 #receiptOptions
 { text-align: right; }
+
+#colorPickerDialog
+{ width: 146px;
+  height: 191px; }
+
+#colorPickerDialog.dialog.right > DIV
+{ padding-left: 10px; }
+
+.dialog.bottom > DIV:before {
+  top: auto;
+  bottom: 12px;
+}
+.dialog.bottom > DIV:after {
+  top: auto;
+  bottom: 13px;
+}

UI/WebServerResources/UIxPreferences.js

@@ -148,6 +148,12 @@ function _setupEvents() {
     }
 }
 
+function onBodyClickHandler(event) {
+    var target = getTarget(event);
+    if (!target.hasClassName('colorBox'))
+        $("colorPickerDialog").hide();
+}
+
 function onChoiceChanged(event) {
     var hasChanged = $("hasChanged");
     hasChanged.value = "1";
@@ -189,6 +195,9 @@ function initPreferences() {
     if (typeof (initAdditionalPreferences) != "undefined")
         initAdditionalPreferences();
 
+    $('colorPickerDialog').on('click', 'span', onColorPickerChoice);
+    $(document.body).on("click", onBodyClickHandler);
+
     // Calender categories
     var wrapper = $("calendarCategoriesListWrapper");
     if (wrapper) {
@@ -201,6 +210,7 @@ function initPreferences() {
         resetCalendarTableActions();
         $("calendarCategoryAdd").observe("click", onCalendarCategoryAdd);
         $("calendarCategoryDelete").observe("click", onCalendarCategoryDelete);
+        wrapper.observe("scroll", onBodyClickHandler);
     }
 
     // Mail labels/tags
@@ -882,48 +892,43 @@ function compactMailAccounts() {
 }
 
 /* common function between calendar categories and mail labels */
-function onColorEdit(e, type) {
-    var r;
-
-    if (type == "calendar")
-        r = $$("#calendarCategoriesListWrapper div.colorEditing");
-    else
-        r = $$("#mailLabelsListWrapper div.colorEditing");
-
-    for (var i=0; i<r.length; i++)
-        r[i].removeClassName("colorEditing");
+function onColorEdit(e, target) {
+    var view = $(target);
 
+    view.select('div.colorEditing').each(function(box) {
+        box.removeClassName('colorEditing');
+    });
     this.addClassName("colorEditing");
-    var cPicker = window.open(ApplicationBaseURL + "../" + UserLogin
-                              + "/Calendar/colorPicker", "colorPicker",
-                              "width=250,height=200,resizable=0,scrollbars=0"
-                              + "toolbar=0,location=0,directories=0,status=0,"
-                              + "menubar=0,copyhistory=0", "test"
-                             );
-    cPicker.focus();
-    cPicker.type = type;
 
-    preventDefault(e);
+    var cellPosition = this.cumulativeOffset();
+    var cellDimensions = this.getDimensions();
+    var div = $('colorPickerDialog');
+    var divDimensions = div.getDimensions();
+    var left = cellPosition[0] - divDimensions["width"];
+    var top = cellPosition[1] - 165 - view.scrollTop;
+    div.setStyle({ left: left + "px", top: top + "px" });
+    div.writeAttribute('data-target', target);
+    div.show();
 }
 
-function onColorPickerChoice(newColor, type) {
-    var div;
+function onColorPickerChoice(event) {
+    var span = getTarget(event);
+    var dialog = span.up('.dialog');
+    var target = dialog.readAttribute('data-target');
+    var newColor = "#" + span.className.substr(4);
 
-    if (type == "calendar")
-        div = $$("#calendarCategoriesListWrapper div.colorEditing").first();
-    else
-        div = $$("#mailLabelsListWrapper div.colorEditing").first();
+    var wrapper = $(target);
+    var div = wrapper.select("div.colorEditing").first();
 
-    //  div.removeClassName("colorEditing");
-    div.showColor = newColor;
+    div.writeAttribute('data-color', newColor);
     div.style.background = newColor;
     if (parseInt($("hasChanged").value) == 0) {
         var hasChanged = $("hasChanged");
         hasChanged.value = "1";
     }
-}
-/* /common function between calendar categories and mail labels */
 
+    dialog.hide();
+}
 
 /* calendar categories */
 function resetCalendarTableActions() {
@@ -940,23 +945,21 @@ function resetCalendarTableActions() {
 
 function onCalendarColorEdit(e) {
     var onCCE = onColorEdit.bind(this);
-    onCCE(e, "calendar");
+    onCCE(e, "calendarCategoriesListWrapper");
 }
 
 function onCalendarCategoryAdd(e) {
     var row = new Element("tr");
     var nametd = new Element("td").update("");
     var colortd = new Element("td");
-    var colordiv = new Element("div", {"class": "colorBox"});
+    var colordiv = new Element("div", {"class": "colorBox", dataColor: "#F0F0F0"});
 
     row.identify();
     row.addClassName("categoryListRow");
 
     nametd.addClassName("categoryListCell");
     colortd.addClassName("categoryListCell");
-    colordiv.innerHTML = "&nbsp;";
-    colordiv.showColor = "#F0F0F0";
-    colordiv.style.background = colordiv.showColor;
+    colordiv.setStyle({backgroundColor: "#F0F0F0"});
 
     colortd.appendChild(colordiv);
     row.appendChild(nametd);
@@ -985,7 +988,7 @@ function serializeCalendarCategories() {
     for (var i = 0; i < r.length; i++) {
         var tds = r[i].childElements();
         var name  = $(tds.first()).innerHTML;
-        var color = $(tds.last().childElements().first()).showColor;
+        var color = $(tds.last().childElements().first()).readAttribute('data-color');
         values.push("\"" + name + "\": \"" + color + "\"");
     }
 
@@ -996,11 +999,9 @@ function resetCalendarCategoriesColors(e) {
     var divs = $$("#calendarCategoriesListWrapper DIV.colorBox");
     for (var i = 0; i < divs.length; i++) {
         var d = divs[i];
-        var color = d.innerHTML;
-        d.showColor = color;
+        var color = d.readAttribute("data-color");
         if (color != "undefined")
             d.setStyle({ backgroundColor: color });
-        d.update("&nbsp;");
     }
 }
 
@@ -1021,23 +1022,21 @@ function resetMailTableActions() {
 
 function onMailColorEdit(e) {
     var onMCE = onColorEdit.bind(this);
-    onMCE(e, "mail");
+    onMCE(e, "mailLabelsListWrapper");
 }
 
 function onMailLabelAdd(e) {
     var row = new Element("tr");
     var nametd = new Element("td").update("");
     var colortd = new Element("td");
-    var colordiv = new Element("div", {"class": "colorBox"});
+    var colordiv = new Element("div", {"class": "colorBox", dataColor: "#F0F0F0"});
 
     row.identify();
     row.addClassName("labelListRow");
 
     nametd.addClassName("labelListCell");
     colortd.addClassName("labelListCell");
-    colordiv.innerHTML = "&nbsp;";
-    colordiv.showColor = "#F0F0F0";
-    colordiv.style.background = colordiv.showColor;
+    colordiv.setStyle({backgroundColor: "#F0F0F0"});
 
     colortd.appendChild(colordiv);
     row.appendChild(nametd);
@@ -1063,11 +1062,9 @@ function resetMailLabelsColors(e) {
     var divs = $$("#mailLabelsListWrapper DIV.colorBox");
     for (var i = 0; i < divs.length; i++) {
         var d = divs[i];
-        var color = d.innerHTML;
-        d.showColor = color;
+        var color = d.readAttribute('data-color');
         if (color != "undefined")
             d.setStyle({ backgroundColor: color });
-        d.update("&nbsp;");
     }
 }
 
@@ -1079,7 +1076,7 @@ function serializeMailLabels() {
         var tds = r[i].childElements();
         var name = r[i].readAttribute("data-name"); 
         var label  = $(tds.first()).innerHTML;
-        var color = $(tds.last().childElements().first()).showColor;
+        var color = $(tds.last().childElements().first()).readAttribute('data-color');
         
         /* if name is null, that's because we've just added a new tag */
         if (!name) {

UI/WebServerResources/generic.css

@@ -1153,7 +1153,8 @@ DIV.bottomToolbar A.bottomButton SPAN:active
   left: 0px; }
 
 /* color box */
-DIV.colorBox
+DIV.colorBox,
+#colorPickerDialog SPAN
 { cursor: pointer;
   margin: 0 3px 0 0;
   height: 12px;
@@ -1164,6 +1165,225 @@ DIV.colorBox
           border-radius: 2px;
   border: 0px; }
 
+#colorPickerDialog SPAN
+{ float: left;
+  margin: 3px; }
+
+#colorPickerDialog SPAN:hover
+{ border: 2px solid transparent;
+  margin: 1px; }
+
+.blc-FFFFFF {
+  background-color: #FFFFFF;
+}
+.blc-CCCCCC {
+  background-color: #CCCCCC;
+}
+.blc-C0C0C0 {
+  background-color: #C0C0C0;
+}
+.blc-999999 {
+  background-color: #999999;
+}
+.blc-666666 {
+  background-color: #666666;
+}
+.blc-333333 {
+  background-color: #333333;
+}
+.blc-000000 {
+  background-color: #000000;
+}
+.blc-FFCCCC {
+  background-color: #FFCCCC;
+}
+.blc-FF6666 {
+  background-color: #FF6666;
+}
+.blc-FF0000 {
+  background-color: #FF0000;
+}
+.blc-CC0000 {
+  background-color: #CC0000;
+}
+.blc-990000 {
+  background-color: #990000;
+}
+.blc-660000 {
+  background-color: #660000;
+}
+.blc-330000 {
+  background-color: #330000;
+}
+.blc-FFCC99 {
+  background-color: #FFCC99;
+}
+.blc-FF9966 {
+  background-color: #FF9966;
+}
+.blc-FF9900 {
+  background-color: #FF9900;
+}
+.blc-FF6600 {
+  background-color: #FF6600;
+}
+.blc-CC6600 {
+  background-color: #CC6600;
+}
+.blc-993300 {
+  background-color: #993300;
+}
+.blc-663300 {
+  background-color: #663300;
+}
+.blc-FFFF99 {
+  background-color: #FFFF99;
+}
+.blc-FFFF66 {
+  background-color: #FFFF66;
+}
+.blc-FFCC66 {
+  background-color: #FFCC66;
+}
+.blc-FFCC33 {
+  background-color: #FFCC33;
+}
+.blc-CC9933 {
+  background-color: #CC9933;
+}
+.blc-996633 {
+  background-color: #996633;
+}
+.blc-663333 {
+  background-color: #663333;
+}
+.blc-FFFFCC {
+  background-color: #FFFFCC;
+}
+.blc-FFFF33 {
+  background-color: #FFFF33;
+}
+.blc-FFFF00 {
+  background-color: #FFFF00;
+}
+.blc-FFCC00 {
+  background-color: #FFCC00;
+}
+.blc-999900 {
+  background-color: #999900;
+}
+.blc-666600 {
+  background-color: #666600;
+}
+.blc-333300 {
+  background-color: #333300;
+}
+.blc-99FF99 {
+  background-color: #99FF99;
+}
+.blc-66FF99 {
+  background-color: #66FF99;
+}
+.blc-33FF33 {
+  background-color: #33FF33;
+}
+.blc-33CC00 {
+  background-color: #33CC00;
+}
+.blc-009900 {
+  background-color: #009900;
+}
+.blc-006600 {
+  background-color: #006600;
+}
+.blc-003300 {
+  background-color: #003300;
+}
+.blc-99FFFF {
+  background-color: #99FFFF;
+}
+.blc-33FFFF {
+  background-color: #33FFFF;
+}
+.blc-66CCCC {
+  background-color: #66CCCC;
+}
+.blc-00CCCC {
+  background-color: #00CCCC;
+}
+.blc-339999 {
+  background-color: #339999;
+}
+.blc-336666 {
+  background-color: #336666;
+}
+.blc-003333 {
+  background-color: #003333;
+}
+.blc-CCFFFF {
+  background-color: #CCFFFF;
+}
+.blc-66FFFF {
+  background-color: #66FFFF;
+}
+.blc-33CCFF {
+  background-color: #33CCFF;
+}
+.blc-3366FF {
+  background-color: #3366FF;
+}
+.blc-3333FF {
+  background-color: #3333FF;
+}
+.blc-000099 {
+  background-color: #000099;
+}
+.blc-000066 {
+  background-color: #000066;
+}
+.blc-CCCCFF {
+  background-color: #CCCCFF;
+}
+.blc-9999FF {
+  background-color: #9999FF;
+}
+.blc-6666CC {
+  background-color: #6666CC;
+}
+.blc-6633FF {
+  background-color: #6633FF;
+}
+.blc-6600CC {
+  background-color: #6600CC;
+}
+.blc-333399 {
+  background-color: #333399;
+}
+.blc-330099 {
+  background-color: #330099;
+}
+.blc-FFCCFF {
+  background-color: #FFCCFF;
+}
+.blc-FF99FF {
+  background-color: #FF99FF;
+}
+.blc-CC66CC {
+  background-color: #CC66CC;
+}
+.blc-CC33CC {
+  background-color: #CC33CC;
+}
+.blc-993399 {
+  background-color: #993399;
+}
+.blc-663366 {
+  background-color: #663366;
+}
+.blc-330033 {
+  background-color: #330033;
+}
+
 /* ckeditor */
 span.cke_skin_kama
 { padding: 0px !important; }

UI/WebServerResources/js_color_picker_v2.css

@@ -1,191 +0,0 @@
-	#dhtmlgoodies_colorPicker{
-		position:absolute;
-		width:250px;
-		padding-bottom:1px;
-		background-color:#FFF;
-		border:1px solid #317082;
-		
-		width: 252px;	/* IE 5.x */
-		width/* */:/**/250px;	/* Other browsers */
-		width: /**/250px;	
-				
-	}
-	
-	#dhtmlgoodies_colorPicker .colorPicker_topRow{
-		padding-bottom:1px;
-		border-bottom:3px double #317082;
-		background-color:#E2EBED;
-		padding-left:2px;
-		
-		width: 250px;	/* IE 5.x */
-		width/* */:/**/248px;	/* Other browsers */
-		width: /**/248px;	
-		
-		height: 20px;	/* IE 5.x */
-		height/* */:/**/16px;	/* Other browsers */
-		height: /**/16px;	
-				
-	}
-	
-	#dhtmlgoodies_colorPicker .colorPicker_statusBar{
-		height:13px;
-		padding-bottom:2px;
-		width:248px;
-		border-top:3px double #317082;	
-		background-color:#E2EBED;
-		padding-left:2px;
-		clear:both;
-		
-		width: 250px;	/* IE 5.x */
-		width/* */:/**/248px;	/* Other browsers */
-		width: /**/248px;	
-		
-		height: 18px;	/* IE 5.x */
-		height/* */:/**/13px;	/* Other browsers */
-		height: /**/13px;	
-						
-	}
-	
-	#dhtmlgoodies_colorPicker .colorSquare{
-		margin-left:1px;
-		margin-bottom:1px;
-		float:left;
-		border:1px solid #000;
-		cursor:pointer;
-		
-		width: 12px;	/* IE 5.x */
-		width/* */:/**/10px;	/* Other browsers */
-		width: /**/10px;	
-		
-		height: 12px;	/* IE 5.x */
-		height/* */:/**/10px;	/* Other browsers */
-		height: /**/10px;	
-				
-	}
-	
-	.colorPickerTab_inactive,.colorPickerTab_active{
-	
-		height:17px;
-		padding-left:4px;
-		cursor:pointer;	
-		
-		
-	}
-	.colorPickerTab_inactive span{
-		background-image:url('tab_left_inactive.gif');
-	}
-	
-	.colorPickerTab_active span{
-		background-image:url('tab_left_active.gif');
-
-	}
-	.colorPickerTab_inactive span, .colorPickerTab_active span{
-		line-height:16px;
-		font-weight:bold;
-		font-family:arial;
-		font-size:11px;
-		padding-top:1px;
-		vertical-align:middle;
-		background-position:top left;
-		background-repeat: no-repeat;	
-		float:left;
-		padding-left:6px;
-		-moz-user-select:no;
-	}	
-	.colorPickerTab_inactive img,.colorPickerTab_active img{
-		float:left;
-	}
-	.colorPickerCloseButton{
-		width:11px;
-		height:11px;
-		text-align:center;
-		line-height:10px;
-		border:1px solid #317082;
-		position:absolute;
-		right:1px;
-		font-size:12px;
-		font-weight:bold;
-		top:1px;
-		padding:1px;
-		cursor:pointer;	
-		
-		width: 15px;	/* IE 5.x */
-		width/* */:/**/11px;	/* Other browsers */
-		width: /**/11px;
-		
-		height: 15px;	/* IE 5.x */
-		height/* */:/**/11px;	/* Other browsers */
-		height: /**/11px;
-
-			
-	}
-	#colorPicker_statusBarTxt{
-		font-size:11px;
-		font-family:arial;
-		vertical-align:top;
-		line-height:13px;
-
-	}
-	form{
-		padding-left:5px;
-	}
-	
-	.form_widget_amount_slider{
-		border-top:1px solid #9d9c99;
-		border-left:1px solid #9d9c99;
-		border-bottom:1px solid #eee;
-		border-right:1px solid #eee;
-		background-color:#f0ede0;
-		position:absolute;
-		bottom:0px;
-		
-		width: 5px;	/* IE 5.x */
-		width/* */:/**/3px;	/* Other browsers */
-		width: /**/3px;
-		
-		height: 5px;	/* IE 5.x */
-		height/* */:/**/3px;	/* Other browsers */
-		height: /**/3px;
-				
-	}
-	.colorSliderLabel{
-		width:15px;
-		height:20px;
-		float:left;
-		font-size:11px;
-		font-weight:bold;
-	}
-	.colorSlider{
-		width:175px;
-		height:20px;
-		float:left;
-	}
-	.colorInput{
-		width:45px;
-		height:20px;
-		float:left;
-	}	
-	.colorPreviewDiv{
-		width:186px;
-		margin-right:2px;
-		margin-top:1px;
-		border:1px solid #CCC;
-		height:20px;
-		float:left;
-		cursor:pointer;
-		
-		width: 188px;	/* IE 5.x */
-		width/* */:/**/186px;	/* Other browsers */
-		width: /**/186px;
-		
-		height: 22px;	/* IE 5.x */
-		height/* */:/**/20px;	/* Other browsers */
-		height: /**/20px;
-				
-
-	}
-	.colorCodeDiv{
-		width:50px;
-		height:20px;
-		float:left;
-	}