OO-61 : colorchooser to callout

src/main/java/org/olat/commons/calendar/_content/calColor.html

-<h4>$r.translate("cal.color.title")</h4>
-
 <div id="o_cal_colorchooser">
 	<div class="o_cal_green">$r.render("greenLink")</div>
 	<div class="o_cal_blue">$r.render("blueLink")</div>
@@ -9,7 +7,3 @@
 	<div class="o_cal_grey">$r.render("greyLink")</div>
 </div>
 
-<p style="clear: both">
-<br>
-<br>
-$r.render("cancel")

src/main/java/org/olat/commons/calendar/_content/calConfig.html

@@ -35,7 +35,7 @@ $r.contextHelpWithWrapper("org.olat.commons.calendar","personal-calendar-callist
 		$calendarWrapper.getKalendarConfig().getDisplayName()
 	</div>
 
-	  <a class="o_cal_config_chosecolor" 
+	  <a id="colorchooser_$calendarWrapper.getKalendar().getCalendarID()" class="o_cal_config_chosecolor" 
 		  href="$r.commandURIbg("cc", "id", "$calendarWrapper.getKalendar().getCalendarID()")"
   		$r.bgTarget() 
 	  	title="$r.translateInAttribute("cal.color.choose")"></a>

src/main/java/org/olat/commons/calendar/_content/indexWeekly.html

 <div id="o_cal_config_below_cal_container">
-  <div class="b_subcolumns">
-	<div class="b_c75l">
-	  <div class="b_subcl">
-		<div class="b_subcolumns">
-			<div class="b_c25l">
-			  <div class="b_subcl">
+  <div class="o_cal_toptoolbar b_clearfix">
+			
+			<div class="o_cal_pagination">
 				$r.render("cal.thisweek")
 				$r.render("cal.prevweek")
 				$r.render("cal.nextweek")
-				
-			  <!-- TODO:gs:a refactor to use normal link component 
-				<a href="$r.commandURIbg("pw")" $r.bgTarget() title="$r.translateInAttribute("cal.previousweek")" class="o_cal_wv_prev" onclick="return o2cl()" onkeypress="return o2cl()"></a>
-				<a href="$r.commandURIbg("nw")" $r.bgTarget() title="$r.translateInAttribute("cal.nextweek")" class="o_cal_wv_next" onclick="return o2cl()" onkeypress="return o2cl()"></a>
-				-->
-				
-			  </div>
 			</div>
-			<div class="b_c50l">
-			  <div class="b_subcr">
-				<div class="o_cal_gotodate">
+			
+			<div class="o_cal_gotodate">
 				$r.render("cal.gotodate")
-				</div>
-		  	  </div>
 			</div>
-			<div class="b_c25r">
-	  			<div class="b_subcr">
-		    		$r.render("cal.search.button")
-		    	</div>
+			
+			<div class="o_cal_search">
+		    	$r.render("cal.search.button")
 			</div>
-		</div>
-	  </div>
-	</div>
+	
 	#if ($caller == "home")
 		$r.contextHelpWithWrapper("org.olat.commons.calendar","personal-calendar.html","help.hover.personalcal")
 	#elseif ($caller == "course")

src/main/java/org/olat/commons/calendar/_static/css/calendar.css

@@ -63,7 +63,7 @@
 
 /* calendar: height = 20px (header) + 10*20px (hours) + 10*20px (half-hours) */
 #o_cal_wv { 
-	padding: 0 5px 5px 5px;
+	padding: 0 0px 5px 0px;
 	position: relative; width: auto;
 }
 
@@ -203,9 +203,33 @@
 .o_cal_wv_event_content {
 	padding: 1px 2px 1px 2px;
 }
-.o_cal_gotodate {
-	margin-top:8px; /* margin-top hack ...*/
+
+/** toolbar **/
+.o_cal_toptoolbar {
+	margin-bottom:0.8em;
+	min-width:707px;
+	padding-bottom:8px;
+	border-bottom:1px solid #eee;
+}
+.o_cal_toptoolbar .o_cal_pagination {
+	float:left;
+	height:2em;
+	width:235px;
+}
+.o_cal_toptoolbar .o_cal_gotodate {
+	float:left;
+	height:2em;
+	width:350px;
 }
+.o_cal_gotodate div.b_form div.b_form_element_wrapper div.b_form_element {
+	margin-left:0;
+}
+.o_cal_toptoolbar .o_cal_search {
+	float:left;
+	height:2em;
+}
+
+
 
 /* day long events */
 .o_cal_wv_devent_wrapper { 
@@ -400,7 +424,7 @@ div.o_cal_gotodate div.b_form_element {margin-left:0%; margin-top:-4px; }
 
 div.o_cal_search_subscribe {float: right; margin-right: 20px; }
 
-div.o_cal_week_year_label {font-weight: bold;}
+div.o_cal_week_year_label {font-weight: bold; margin-top:8px;}
 	
 .o_cal_config_regenerate_link {
 	position: relative;

src/main/java/org/olat/commons/calendar/ui/KalendarConfigurationController.java

@@ -43,6 +43,7 @@ import org.olat.core.gui.control.Controller;
 import org.olat.core.gui.control.Event;
 import org.olat.core.gui.control.WindowControl;
 import org.olat.core.gui.control.controller.BasicController;
+import org.olat.core.gui.control.generic.closablewrapper.CloseableCalloutWindowController;
 import org.olat.core.gui.control.generic.closablewrapper.CloseableModalController;
 import org.olat.core.gui.control.generic.modal.DialogBoxController;
 import org.olat.core.gui.control.generic.modal.DialogBoxUIFactory;
@@ -70,6 +71,7 @@ public class KalendarConfigurationController extends BasicController {
 	private CalendarColorChooserController colorChooser;
 	private KalendarRenderWrapper lastCalendarWrapper;
 	private CloseableModalController cmc;
+	private CloseableCalloutWindowController ccwc;
 	private String currentCalendarID;
 	private CalendarExportController exportController;
 	private DialogBoxController confirmRemoveDialog;
@@ -132,10 +134,10 @@ public class KalendarConfigurationController extends BasicController {
 				removeAsListenerAndDispose(colorChooser);
 				colorChooser = new CalendarColorChooserController(getLocale(), getWindowControl(), lastCalendarWrapper.getKalendarConfig().getCss());
 				listenTo(colorChooser);
-				removeAsListenerAndDispose(cmc);
-				cmc = new CloseableModalController(getWindowControl(), translate("close"), colorChooser.getInitialComponent());
-				cmc.activate();
-				listenTo(cmc);
+				removeAsListenerAndDispose(ccwc);
+				ccwc = new CloseableCalloutWindowController(ureq, getWindowControl(),  colorChooser.getInitialComponent(), "colorchooser_"+calendarID, translate("cal.color.title"), false, null);
+				listenTo(ccwc);
+				ccwc.activate();
 			} else if (command.equals(CMD_ICAL_FEED)) {
 				String calendarID = ureq.getParameter(PARAM_ID);
 				KalendarRenderWrapper calendarWrapper = findKalendarRenderWrapper(calendarID);
@@ -172,7 +174,7 @@ public class KalendarConfigurationController extends BasicController {
 
 	public void event(UserRequest ureq, Controller source, Event event) {
 		if (source == colorChooser) {
-			cmc.deactivate();
+			ccwc.deactivate();
 			if (event == Event.DONE_EVENT) {
 				String choosenColor = colorChooser.getChoosenColor();
 				KalendarConfig config = lastCalendarWrapper.getKalendarConfig();