Author: pyaschenko Date: 2007-11-28 11:24:32 -0500 (Wed, 28 Nov 2007) New Revision: 4316 Modified: trunk/samples/calendar-sample/src/main/webapp/pages/Calendar.jsp trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/css/calendar.xcss trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js Log: RF-1192 Modified: trunk/samples/calendar-sample/src/main/webapp/pages/Calendar.jsp =================================================================== --- trunk/samples/calendar-sample/src/main/webapp/pages/Calendar.jsp 2007-11-28 15:37:25 UTC (rev 4315) +++ trunk/samples/calendar-sample/src/main/webapp/pages/Calendar.jsp 2007-11-28 16:24:32 UTC (rev 4316) @@ -38,7 +38,7 @@ </h:panelGrid> <br /> <br /> - <calendar:calendar datePattern="" showApplyButton="#{calendarBean.showApplyButton}" popup="#{calendarBean.popup}"/> + <calendar:calendar datePattern="#{calendarBean.pattern}" showApplyButton="#{calendarBean.showApplyButton}" popup="#{calendarBean.popup}"/> <calendar:calendar cellWidth="5" cellHeight="5"/> <calendar:calendar cellWidth="40" cellHeight="40"/> <calendar:calendar Modified: trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/css/calendar.xcss =================================================================== --- trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/css/calendar.xcss 2007-11-28 15:37:25 UTC (rev 4315) +++ trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/css/calendar.xcss 2007-11-28 16:24:32 UTC (rev 4316) @@ -40,7 +40,7 @@ .rich-calendar-tool{ vertical-align : middle; text-align : center; - width : 25px; + width : 20px; height : 22px; } @@ -74,9 +74,8 @@ } .rich-calendar-toolfooter{ - - padding : 0px 4px 0px 4px; height : 22px; + padding : 1px 2px 1px 1px; } .rich-calendar-footer-optional{ @@ -136,6 +135,7 @@ <u:style name="font-family" skin="headerFamilyFont"/> <u:style name="font-weight" skin="headerWeightFont"/> <u:style name="color" skin="headerTextColor"/> + <u:style name="white-space" value="nowrap"/> </u:selector> <u:selector name=".rich-calendar-days"> @@ -193,8 +193,34 @@ <u:style name="background" skin="additionalBackgroundColor"/> <u:style name="font-size" skin="generalSizeFont"/> <u:style name="font-family" skin="generalFamilyFont"/> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.iconimages.CalendarSeparator" /> + </u:style> + <u:style name="background-repeat" value="no-repeat" /> + <u:style name="background-position" value="right center" /> </u:selector> + + <u:selector name=".rich-calendar-tool-btn"> + <u:style name="cursor" value="pointer"/> + <u:style name="padding" value="2px 3px 2px 3px"/> + <u:style name="white-space" value="nowrap"/> + </u:selector> + + <u:selector name=".rich-calendar-tool-btn-hover"> + <u:style name="background" skin="calendarWeekBackgroundColor"/> + <u:style name="border" value="1px solid"/> + <u:style name="border-color" skin="tableBackgroundColor"/> + <u:style name="border-right-color" skin="panelBorderColor"/> + <u:style name="border-bottom-color" skin="panelBorderColor"/> + <u:style name="padding" value="1px 2px 1px 2px"/> + </u:selector> + <u:selector name=".rich-calendar-tool-btn-press"> + <u:style name="border-color" skin="panelBorderColor"/> + <u:style name="border-right-color" skin="tableBackgroundColor"/> + <u:style name="border-bottom-color" skin="tableBackgroundColor"/> + </u:selector> + <u:selector name=".rich-calendar-footer-optional"> <u:style name="border-top-color" skin="panelBorderColor"/> <u:style name="border-right-color" skin="panelBorderColor"/> @@ -210,20 +236,20 @@ <u:style name="font-size" skin="generalSizeFont"/> <u:style name="font-family" skin="generalFamilyFont"/> </u:selector> - - <u:selector name=".rich-calendar-button"> - <u:style name="cursor" value="pointer"/> - <u:style name="vertical-align" value="middle"/> - </u:selector> - - <u:selector name=".rich-calendar-close-tool"> + + <u:selector name=".rich-calendar-tool-close"> + <u:style name="padding" value="2px 2px 2px 4px"/> <u:style name="background-image"> <f:resource f:key="org.richfaces.renderkit.html.iconimages.CalendarSeparator" /> </u:style> <u:style name="background-repeat" value="no-repeat" /> <u:style name="background-position" value="left center" /> - <u:style name="background-attachment" value="scroll" /> - <u:style name="background-color" skin="headerBackgroundColor"/> </u:selector> + + <u:selector name=".rich-calendar-button"> + <u:style name="cursor" value="pointer"/> + <u:style name="vertical-align" value="middle"/> + </u:selector> + </f:template> Modified: trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js =================================================================== --- trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js 2007-11-28 15:37:25 UTC (rev 4315) +++ trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js 2007-11-28 16:24:32 UTC (rev 4316) @@ -481,7 +481,7 @@ if (this.params.showWeekDaysBar==undefined) this.params.showWeekDaysBar = true; if (this.params.showWeeksBar==undefined) this.params.showWeeksBar = true; - if (!this.params.datePattern) this.params.datePattern = "MMM d, y h:mm a"; + if (!this.params.datePattern) this.params.datePattern = "MMM d, y"; // time this.setTimeProperties(); @@ -687,7 +687,7 @@ ts.value = a; h = (h==0 ? '12' : (h>12 ? h-12 : h)); } - th.value = (h<10 ? '0'+h : h); + th.value = (this.timeHoursDigits==2 && h<10 ? '0'+h : h); tm.value = (m<10 ? '0'+m : m); div.style.width = element.clientWidth+'px'; @@ -715,7 +715,7 @@ var id = this.id; var getString = function (p) { - return (i==0 || p.length==0 ? obj.marker : dateTimePattern.substring(pattern[i-1].str.length+pattern[i-1].idx, obj.idx+obj.str.length)); + return (p.length==0 ? obj.marker : dateTimePattern.substring(pattern[i-1].str.length+pattern[i-1].idx, obj.idx+obj.str.length)); }; for (var i=0;i<pattern.length;i++) @@ -755,8 +755,10 @@ function($1,$2,$3) { switch ($3) { case 'a' : return $2+'<input style="width:22px; margin: 0px 2px;" id="'+id+'TimeSign"/>'; - case 'H' : - case 'h' : return $2+'<input style="width:22px; margin: 0px 2px;" id="'+id+'TimeHours"/>'; + case 'H' : + case 'HH' : + case 'h' : + case 'hh' : return $2+'<input style="width:22px; margin: 0px 2px;" id="'+id+'TimeHours"/>'; case 'mm' : return $2+'<input style="width:22px; margin: 0px 2px;" id="'+id+'TimeMinutes"/>'; } } @@ -1545,6 +1547,11 @@ this.selectedDate = newSelectedDate; if (this.selectedDate!=null) { + if (oldSelectedDate!=null) + { + this.selectedDate.setHours(oldSelectedDate.getHours()); + this.selectedDate.setMinutes(oldSelectedDate.getMinutes()); + } if (!this.showApplyButton) field.value=this.getSelectedDateString(this.params.datePattern); var d = new Date(this.selectedDate); @@ -1700,11 +1707,11 @@ }); CalendarView = {}; -CalendarView.getControl = function(text, functionName, paramsStr) { - var attr = { - onclick: (functionName ? "Richfaces.getComponent('calendar',this)."+functionName+"("+(paramsStr ? paramsStr : "")+");" : "")+"return true;", - className: "rich-calendar-btn" - }; +CalendarView.getControl = function(text, attributes, functionName, paramsStr) { + var attr = Object.extend({ + onclick: (functionName ? "Richfaces.getComponent('calendar',this)."+functionName+"("+(paramsStr ? paramsStr : "")+");" : "")+"return true;", + className: "rich-calendar-btn" + }, attributes); return new E('div',attr,[new T(text)]); }; @@ -1715,7 +1722,7 @@ var text = Richfaces.Calendar.formatDate(calendar.selectedDate,(calendar.timeType ? calendar.datePattern : calendar.params.datePattern), calendar.params.monthLabels, calendar.params.monthLabelsShort); - var markup = new E('div', {'class': 'rich-calendar-btn', 'style': 'white-space:nowrap', 'onclick': "Richfaces.getComponent('calendar',this).showSelectedDate(); return true;"}, [new ET(text)]); + var markup = new E('div', {'class': 'rich-calendar-tool-btn', 'onclick': "Richfaces.getComponent('calendar',this).showSelectedDate(); return true;"}, [new ET(text)]); return markup; }; @@ -1726,22 +1733,25 @@ var text = Richfaces.Calendar.formatDate(calendar.selectedDate, calendar.timePattern, calendar.params.monthLabels, calendar.params.monthLabelsShort); - var markup = new E('div', {'class': 'rich-calendar-btn rich-calendar-time', 'style': 'white-space:nowrap', 'onclick': "Richfaces.getComponent('calendar',this).showTimeEditor(this);return true;"}, [new ET(text)]); + var markup = new E('div', {'class': 'rich-calendar-tool-btn rich-calendar-tool-btn-hover rich-calendar-tool-btn-press', 'onclick': "Richfaces.getComponent('calendar',this).showTimeEditor(this);return true;", + 'onmouseover': "Element.removeClassName(this, 'rich-calendar-tool-btn-press');", + 'onmouseout' : "Element.addClassName(this, 'rich-calendar-tool-btn-press');"}, [new ET(text)]); return markup; }; -CalendarView.nextYearControl = CalendarView.getControl(">>", "nextYear"); -CalendarView.previousYearControl = CalendarView.getControl("<<", "prevYear"); -CalendarView.nextMonthControl = CalendarView.getControl(">", "nextMonth"); -CalendarView.previousMonthControl = CalendarView.getControl("<", "prevMonth"); +CalendarView.toolButtonAttributes = {className: "rich-calendar-tool-btn", onmouseover:"this.className='rich-calendar-tool-btn rich-calendar-tool-btn-hover'", onmouseout:"this.className='rich-calendar-tool-btn'", onmousedown:"this.className='rich-calendar-tool-btn rich-calendar-tool-btn-hover rich-calendar-tool-btn-press'", onmouseup:"this.className='rich-calendar-tool-btn rich-calendar-tool-btn-hover'"}; +CalendarView.nextYearControl = CalendarView.getControl(">>", null, "nextYear"); +CalendarView.previousYearControl = CalendarView.getControl("<<", null, "prevYear"); +CalendarView.nextMonthControl = CalendarView.getControl(">", null, "nextMonth"); +CalendarView.previousMonthControl = CalendarView.getControl("<", null, "prevMonth"); CalendarView.currentMonthControl = function (context) { return Richfaces.Calendar.formatDate(context.calendar.getCurrentDate(), "MMMM, yyyy", context.monthLabels, context.monthLabelsShort);}; -CalendarView.todayControl = CalendarView.getControl("Today", "today"); +CalendarView.todayControl = CalendarView.getControl("Today", CalendarView.toolButtonAttributes, "today"); CalendarView.selectedDateControl = function (context) { return CalendarView.getSelectedDateControl(context.calendar);}; CalendarView.timeControl = function (context) { return CalendarView.getTimeControl(context.calendar);}; -CalendarView.closeControl = CalendarView.getControl("x", "close", "false"); -CalendarView.applyControl = function (context) { return (context.calendar.showApplyButton ? CalendarView.getControl("OK", "close", "true") : "");}; -CalendarView.cleanControl = function (context) { return (context.calendar.selectedDate ? CalendarView.getControl("Clean", "resetSelectedDate") : "");}; +CalendarView.closeControl = CalendarView.getControl("x", CalendarView.toolButtonAttributes, "close", "false"); +CalendarView.applyControl = function (context) { return (context.calendar.showApplyButton ? CalendarView.getControl("OK", CalendarView.toolButtonAttributes, "close", "true") : "");}; +CalendarView.cleanControl = function (context) { return (context.calendar.selectedDate ? CalendarView.getControl("Clean", CalendarView.toolButtonAttributes, "resetSelectedDate") : "");}; CalendarView.header = [ new E('table',{'border': '0', 'cellpadding': '0', 'cellspacing': '0', 'width': '100%'}, @@ -1770,7 +1780,7 @@ [ new ET(function (context) { return Richfaces.evalMacro("nextYearControl", context)}) ]), - new E('td',{'class': 'rich-calendar-tool rich-calendar-close-tool'}, + new E('td',{'class': 'rich-calendar-tool rich-calendar-tool-close'}, [ new ET(function (context) { return Richfaces.evalMacro("closeControl", context)}) ]) @@ -1794,16 +1804,16 @@ [ new ET(function (context) { return Richfaces.evalMacro("cleanControl", context)}) ]), - new E('td',{'class': 'rich-calendar-toolfooter', 'style':function(context){return (this.isEmpty ? 'display:none;' : '')+'background-color:#ffffff;';}}, + new E('td',{'class': 'rich-calendar-toolfooter', 'style':function(context){return (this.isEmpty ? 'display:none;' : '');}}, [ new ET(function (context) { return Richfaces.evalMacro("timeControl", context)}) ]), new E('td',{'width': '100%'}, []), - new E('td',{'class': 'rich-calendar-toolfooter', 'style':function(context){return (this.isEmpty ? 'display:none;' : '');}}, + new E('td',{'class': 'rich-calendar-toolfooter', 'style':function(context){return (this.isEmpty ? 'display:none;' : '')+(!context.calendar.showApplyButton ? 'background-image:none;' : '');}}, [ new ET(function (context) { return Richfaces.evalMacro("todayControl", context)}) ]), - new E('td',{'class': 'rich-calendar-toolfooter', 'style':function(context){return (this.isEmpty ? 'display:none;' : '');}}, + new E('td',{'class': 'rich-calendar-toolfooter', 'style':function(context){return (this.isEmpty ? 'display:none;' : '')+'background-image:none;';}}, [ new ET(function (context) { return Richfaces.evalMacro("applyControl", context)}) ])