From 156a9d46ab5b32f49711ce14163b60d0eba526a0 Mon Sep 17 00:00:00 2001
From: Adam Shaw <arshaw@arshaw.com>
Date: Mon, 4 Mar 2013 00:01:06 -0800
Subject: [PATCH] Use CSS3 rounded corners instead of ghetto hack. Remove
 unnecessary markup for events and buttons. And slightly change style of
 agenda events (no more differently colored event header). And remove
 glossy-look CSS hack for buttons.

---
 src/Calendar.js                   |   3 +
 src/Header.js                     |  17 +--
 src/agenda/AgendaEventRenderer.js |  29 ++---
 src/agenda/agenda.css             |  24 ++--
 src/common/DayEventRenderer.js    |  29 ++---
 src/common/common.css             | 184 +++++++-----------------------
 src/common/print.css              |  32 +-----
 src/main.css                      |   7 +-
 tests/sources.html                |   9 +-
 9 files changed, 99 insertions(+), 235 deletions(-)

diff --git a/src/Calendar.js b/src/Calendar.js
index d32595b..1445b75 100644
--- a/src/Calendar.js
+++ b/src/Calendar.js
@@ -80,6 +80,9 @@ function Calendar(element, options, eventSources) {
 		if (options.isRTL) {
 			element.addClass('fc-rtl');
 		}
+		else {
+			element.addClass('fc-ltr');
+		}
 		if (options.theme) {
 			element.addClass('ui-widget');
 		}
diff --git a/src/Header.js b/src/Header.js
index 8875fa1..0d91ae2 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -72,17 +72,12 @@ function Header(calendar, options) {
 							var text = smartProperty(options.buttonText, buttonName); // why are we using smartProperty here?
 							var button = $(
 								"<span class='fc-button fc-button-" + buttonName + " " + tm + "-state-default'>" +
-									"<span class='fc-button-inner'>" +
-										"<span class='fc-button-content'>" +
-											(icon ?
-												"<span class='fc-icon-wrap'>" +
-													"<span class='ui-icon ui-icon-" + icon + "'/>" +
-												"</span>" :
-												text
-												) +
-										"</span>" +
-										"<span class='fc-button-effect'><span></span></span>" +
-									"</span>" +
+									(icon ?
+										"<span class='fc-icon-wrap'>" +
+											"<span class='ui-icon ui-icon-" + icon + "'/>" +
+										"</span>" :
+										text
+										) +
 								"</span>"
 							);
 							if (button) {
diff --git a/src/agenda/AgendaEventRenderer.js b/src/agenda/AgendaEventRenderer.js
index 18f7897..01b5a8e 100644
--- a/src/agenda/AgendaEventRenderer.js
+++ b/src/agenda/AgendaEventRenderer.js
@@ -158,7 +158,7 @@ function AgendaEventRenderer() {
 			vsideCache={},
 			hsideCache={},
 			key, val,
-			contentElement,
+			titleElement,
 			height,
 			slotSegmentContainer = getSlotSegmentContainer(),
 			rtl, dis, dit,
@@ -247,9 +247,9 @@ function AgendaEventRenderer() {
 				seg.vsides = val === undefined ? (vsideCache[key] = vsides(eventElement, true)) : val;
 				val = hsideCache[key];
 				seg.hsides = val === undefined ? (hsideCache[key] = hsides(eventElement, true)) : val;
-				contentElement = eventElement.find('div.fc-event-content');
-				if (contentElement.length) {
-					seg.contentTop = contentElement[0].offsetTop;
+				titleElement = eventElement.find('.fc-event-title');
+				if (titleElement.length) {
+					seg.contentTop = titleElement[0].offsetTop;
 				}
 			}
 		}
@@ -263,7 +263,7 @@ function AgendaEventRenderer() {
 				eventElement[0].style.height = height + 'px';
 				event = seg.event;
 				if (seg.contentTop !== undefined && height - seg.contentTop < 10) {
-					// not enough room for title, put it in the time header
+					// not enough room for title, put it in the time (TODO: maybe make both display:inline instead)
 					eventElement.find('div.fc-event-time')
 						.text(formatDate(event.start, opt('timeFormat')) + ' - ' + event.title);
 					eventElement.find('div.fc-event-title')
@@ -280,16 +280,15 @@ function AgendaEventRenderer() {
 		var html = "<";
 		var url = event.url;
 		var skinCss = getSkinCss(event, opt);
-		var skinCssAttr = (skinCss ? " style='" + skinCss + "'" : '');
-		var classes = ['fc-event', 'fc-event-skin', 'fc-event-vert'];
+		var classes = ['fc-event', 'fc-event-vert'];
 		if (isEventDraggable(event)) {
 			classes.push('fc-event-draggable');
 		}
 		if (seg.isStart) {
-			classes.push('fc-corner-top');
+			classes.push('fc-event-start');
 		}
 		if (seg.isEnd) {
-			classes.push('fc-corner-bottom');
+			classes.push('fc-event-end');
 		}
 		classes = classes.concat(event.className);
 		if (event.source) {
@@ -304,19 +303,13 @@ function AgendaEventRenderer() {
 			" class='" + classes.join(' ') + "'" +
 			" style='position:absolute;z-index:8;top:" + seg.top + "px;left:" + seg.left + "px;" + skinCss + "'" +
 			">" +
-			"<div class='fc-event-inner fc-event-skin'" + skinCssAttr + ">" +
-			"<div class='fc-event-head fc-event-skin'" + skinCssAttr + ">" +
 			"<div class='fc-event-time'>" +
 			htmlEscape(formatDates(event.start, event.end, opt('timeFormat'))) +
 			"</div>" +
-			"</div>" +
-			"<div class='fc-event-content'>" +
 			"<div class='fc-event-title'>" +
 			htmlEscape(event.title) +
 			"</div>" +
-			"</div>" +
-			"<div class='fc-event-bg'></div>" +
-			"</div>"; // close inner
+			"<div class='fc-event-bg'></div>";
 		if (seg.isEnd && isEventResizable(event)) {
 			html +=
 				"<div class='ui-resizable-handle ui-resizable-s'>=</div>";
@@ -559,7 +552,9 @@ function AgendaEventRenderer() {
 		var granularityHeight = getGranularityHeight();
 		var granularityMinutes = getGranularityMinutes();
 		eventElement.resizable({
-			handles: 's',
+			handles: {
+				s: '.ui-resizable-handle',
+			},
 			grid: granularityHeight,
 			start: function(ev, ui) {
 				granularityDelta = prevGranularityDelta = 0;
diff --git a/src/agenda/agenda.css b/src/agenda/agenda.css
index 6f46bed..1001e93 100644
--- a/src/agenda/agenda.css
+++ b/src/agenda/agenda.css
@@ -96,19 +96,29 @@
 .fc-event-vert {
 	border-width: 0 1px;
 	}
-	
-.fc-event-vert .fc-event-head,
-.fc-event-vert .fc-event-content {
-	position: relative;
-	z-index: 2;
-	width: 100%;
-	overflow: hidden;
+
+.fc-event-vert.fc-event-start {
+	border-top-width: 1px;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	}
+
+.fc-event-vert.fc-event-end {
+	border-bottom-width: 1px;
+	border-bottom-left-radius: 3px;
+	border-bottom-right-radius: 3px;
 	}
 	
 .fc-event-vert .fc-event-time {
 	white-space: nowrap;
 	font-size: 10px;
 	}
+
+.fc-event-vert .fc-event-time,
+.fc-event-vert .fc-event-title {
+	position: relative;
+	z-index: 2;
+	}
 	
 .fc-event-vert .fc-event-bg { /* makes the event lighter w/ a semi-transparent overlay  */
 	position: absolute;
diff --git a/src/common/DayEventRenderer.js b/src/common/DayEventRenderer.js
index 0430c69..c154062 100644
--- a/src/common/DayEventRenderer.js
+++ b/src/common/DayEventRenderer.js
@@ -136,28 +136,22 @@ function DayEventRenderer() {
 		for (i=0; i<segCnt; i++) {
 			seg = segs[i];
 			event = seg.event;
-			classes = ['fc-event', 'fc-event-skin', 'fc-event-hori'];
+			classes = ['fc-event', 'fc-event-hori'];
 			if (isEventDraggable(event)) {
 				classes.push('fc-event-draggable');
 			}
+			if (seg.isStart) {
+				classes.push('fc-event-start');
+			}
+			if (seg.isEnd) {
+				classes.push('fc-event-end');
+			}
 			if (rtl) {
-				if (seg.isStart) {
-					classes.push('fc-corner-right');
-				}
-				if (seg.isEnd) {
-					classes.push('fc-corner-left');
-				}
 				leftCol = dayOfWeekCol(seg.end.getDay()-1);
 				rightCol = dayOfWeekCol(seg.start.getDay());
 				left = seg.isEnd ? colContentLeft(leftCol) : minLeft;
 				right = seg.isStart ? colContentRight(rightCol) : maxLeft;
 			}else{
-				if (seg.isStart) {
-					classes.push('fc-corner-left');
-				}
-				if (seg.isEnd) {
-					classes.push('fc-corner-right');
-				}
 				leftCol = dayOfWeekCol(seg.start.getDay());
 				rightCol = dayOfWeekCol(seg.end.getDay()-1);
 				left = seg.isStart ? colContentLeft(leftCol) : minLeft;
@@ -177,10 +171,6 @@ function DayEventRenderer() {
 			html +=
 				" class='" + classes.join(' ') + "'" +
 				" style='position:absolute;z-index:8;left:"+left+"px;" + skinCss + "'" +
-				">" +
-				"<div" +
-				" class='fc-event-inner fc-event-skin'" +
-				(skinCss ? " style='" + skinCss + "'" : '') +
 				">";
 			if (!event.allDay && seg.isStart) {
 				html +=
@@ -189,8 +179,7 @@ function DayEventRenderer() {
 					"</span>";
 			}
 			html +=
-				"<span class='fc-event-title'>" + htmlEscape(event.title) + "</span>" +
-				"</div>";
+				"<span class='fc-event-title'>" + htmlEscape(event.title) + "</span>";
 			if (seg.isEnd && isEventResizable(event)) {
 				html +=
 					"<div class='ui-resizable-handle ui-resizable-" + (rtl ? 'w' : 'e') + "'>" +
@@ -386,7 +375,7 @@ function DayEventRenderer() {
 	function resizableDayEvent(event, element, seg) {
 		var rtl = opt('isRTL');
 		var direction = rtl ? 'w' : 'e';
-		var handle = element.find('div.ui-resizable-' + direction);
+		var handle = element.find('.ui-resizable-' + direction); // TODO: stop using this class because we aren't using jqui for this
 		var isResizing = false;
 		
 		// TODO: look into using jquery-ui mouse widget for this stuff
diff --git a/src/common/common.css b/src/common/common.css
index 73db495..7ef453e 100644
--- a/src/common/common.css
+++ b/src/common/common.css
@@ -25,43 +25,37 @@
 .fc-button {
 	position: relative;
 	display: inline-block;
+	padding: 0 .6em;
+	overflow: hidden;
+	height: 1.9em;
+	line-height: 1.9em;
+	white-space: nowrap;
 	cursor: pointer;
 	}
 	
 .fc-state-default { /* non-theme */
-	border-style: solid;
-	border-width: 1px 0;
+	border: 1px solid;
 	}
-	
-.fc-button-inner {
-	position: relative;
-	float: left;
-	overflow: hidden;
+
+.fc-state-default.fc-corner-left { /* non-theme */
+	border-top-left-radius: 4px;
+	border-bottom-left-radius: 4px;
 	}
-	
-.fc-state-default .fc-button-inner { /* non-theme */
-	border-style: solid;
-	border-width: 0 1px;
-	}
-	
-.fc-button-content {
-	position: relative;
-	float: left;
-	height: 1.9em;
-	line-height: 1.9em;
-	padding: 0 .6em;
-	white-space: nowrap;
+
+.fc-state-default.fc-corner-right { /* non-theme */
+	border-top-right-radius: 4px;
+	border-bottom-right-radius: 4px;
 	}
 	
 /* icon (for jquery ui) */
 	
-.fc-button-content .fc-icon-wrap {
+.fc-button .fc-icon-wrap {
 	position: relative;
 	float: left;
 	top: 50%;
 	}
 	
-.fc-button-content .ui-icon {
+.fc-button .ui-icon {
 	position: relative;
 	float: left;
 	margin-top: -50%;
@@ -69,58 +63,31 @@
 	*top: -50%;
 	}
 	
-/* gloss effect */
-	
-.fc-state-default .fc-button-effect {
-	position: absolute;
-	top: 50%;
-	left: 0;
-	}
-	
-.fc-state-default .fc-button-effect span {
-	position: absolute;
-	top: -100px;
-	left: 0;
-	width: 500px;
-	height: 100px;
-	border-width: 100px 0 0 1px;
-	border-style: solid;
-	border-color: #fff;
-	background: #444;
-	opacity: .09;
-	filter: alpha(opacity=9);
-	}
-	
 /* button states (determines colors)  */
 	
-.fc-state-default,
-.fc-state-default .fc-button-inner {
+.fc-state-default {
 	border-style: solid;
 	border-color: #ccc #bbb #aaa;
 	background: #F3F3F3;
 	color: #000;
 	}
 	
-.fc-state-hover,
-.fc-state-hover .fc-button-inner {
+.fc-state-hover {
 	border-color: #999;
 	}
 	
-.fc-state-down,
-.fc-state-down .fc-button-inner {
+.fc-state-down {
 	border-color: #555;
 	background: #777;
 	}
 	
-.fc-state-active,
-.fc-state-active .fc-button-inner {
+.fc-state-active {
 	border-color: #555;
 	background: #777;
 	color: #fff;
 	}
 	
-.fc-state-disabled,
-.fc-state-disabled .fc-button-inner {
+.fc-state-disabled {
 	color: #999;
 	border-color: #ddd;
 	}
@@ -129,56 +96,39 @@
 	cursor: default;
 	}
 	
-.fc-state-disabled .fc-button-effect {
-	display: none;
-	}
-	
 	
 
 /* Global Event Styles
 ------------------------------------------------------------------------*/
 	 
 .fc-event {
-	border-style: solid;
-	border-width: 0;
+	overflow: hidden;
+	border: 1px solid #36c; /* default BORDER color */
+	background-color: #36c; /* default BACKGROUND color */
+	color: #fff;            /* default TEXT color */
 	font-size: .85em;
 	cursor: default;
 	}
+
+a.fc-event {
+	text-decoration: none;
+	}
 	
 a.fc-event,
 .fc-event-draggable {
 	cursor: pointer;
 	}
 	
-a.fc-event {
-	text-decoration: none;
-	}
-	
 .fc-rtl .fc-event {
 	text-align: right;
 	}
 	
-.fc-event-skin {
-	border-color: #36c;     /* default BORDER color */
-	background-color: #36c; /* default BACKGROUND color */
-	color: #fff;            /* default TEXT color */
-	}
-	
-.fc-event-inner {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	border-style: solid;
-	border-width: 0;
-	overflow: hidden;
-	}
-	
 .fc-event-time,
 .fc-event-title {
 	padding: 0 1px;
 	}
 	
-.fc .ui-resizable-handle { /*** TODO: don't use ui-resizable anymore, change class ***/
+.fc .ui-resizable-handle {
 	display: block;
 	position: absolute;
 	z-index: 99999;
@@ -196,6 +146,20 @@ a.fc-event {
 	border-width: 1px 0;
 	margin-bottom: 1px;
 	}
+
+.fc-ltr .fc-event-hori.fc-event-start,
+.fc-rtl .fc-event-hori.fc-event-end {
+	border-left-width: 1px;
+	border-top-left-radius: 3px;
+	border-bottom-left-radius: 3px;
+	}
+
+.fc-ltr .fc-event-hori.fc-event-end,
+.fc-rtl .fc-event-hori.fc-event-start {
+	border-right-width: 1px;
+	border-top-right-radius: 3px;
+	border-bottom-right-radius: 3px;
+	}
 	
 /* resizable */
 	
@@ -221,66 +185,6 @@ a.fc-event {
 	
 	
 	
-/* Fake Rounded Corners (for buttons and events)
-------------------------------------------------------------*/
-	
-.fc-corner-left {
-	margin-left: 1px;
-	}
-	
-.fc-corner-left .fc-button-inner,
-.fc-corner-left .fc-event-inner {
-	margin-left: -1px;
-	}
-	
-.fc-corner-right {
-	margin-right: 1px;
-	}
-	
-.fc-corner-right .fc-button-inner,
-.fc-corner-right .fc-event-inner {
-	margin-right: -1px;
-	}
-	
-.fc-corner-top {
-	margin-top: 1px;
-	}
-	
-.fc-corner-top .fc-event-inner {
-	margin-top: -1px;
-	}
-	
-.fc-corner-bottom {
-	margin-bottom: 1px;
-	}
-	
-.fc-corner-bottom .fc-event-inner {
-	margin-bottom: -1px;
-	}
-	
-	
-	
-/* Fake Rounded Corners SPECIFICALLY FOR EVENTS
------------------------------------------------------------------*/
-	
-.fc-corner-left .fc-event-inner {
-	border-left-width: 1px;
-	}
-	
-.fc-corner-right .fc-event-inner {
-	border-right-width: 1px;
-	}
-	
-.fc-corner-top .fc-event-inner {
-	border-top-width: 1px;
-	}
-	
-.fc-corner-bottom .fc-event-inner {
-	border-bottom-width: 1px;
-	}
-	
-	
-	
 /* Reusable Separate-border Table
 ------------------------------------------------------------*/
 
diff --git a/src/common/print.css b/src/common/print.css
index 4cee605..5383b3f 100644
--- a/src/common/print.css
+++ b/src/common/print.css
@@ -15,38 +15,12 @@
  /* Events
 -----------------------------------------------------*/
  
-.fc-event-skin {
-	background: none !important;
+.fc-event {
+	background: #fff !important;
 	color: #000 !important;
 	}
 	
-/* horizontal events */
-	
-.fc-event-hori {
-	border-width: 0 0 1px 0 !important;
-	border-bottom-style: dotted !important;
-	border-bottom-color: #000 !important;
-	padding: 1px 0 0 0 !important;
-	}
-	
-.fc-event-hori .fc-event-inner {
-	border-width: 0 !important;
-	padding: 0 1px !important;
-	}
-	
-/* vertical events */
-	
-.fc-event-vert {
-	border-width: 0 0 0 1px !important;
-	border-left-style: dotted !important;
-	border-left-color: #000 !important;
-	padding: 0 1px 0 0 !important;
-	}
-	
-.fc-event-vert .fc-event-inner {
-	border-width: 0 !important;
-	padding: 1px 0 !important;
-	}
+/* for vertical events */
 	
 .fc-event-bg {
 	display: none !important;
diff --git a/src/main.css b/src/main.css
index 0076e75..2ec5ec8 100644
--- a/src/main.css
+++ b/src/main.css
@@ -77,11 +77,8 @@ html .fc,
 	margin-right: -1px;
 	}
 	
-.fc-header .fc-corner-right {
-	margin-right: 1px; /* back to normal */
-	}
-	
-.fc-header .ui-corner-right {
+.fc-header .fc-corner-right,  /* non-theme */
+.fc-header .ui-corner-right { /* theme */
 	margin-right: 0; /* back to normal */
 	}
 	
diff --git a/tests/sources.html b/tests/sources.html
index e87f680..9e449d1 100644
--- a/tests/sources.html
+++ b/tests/sources.html
@@ -152,18 +152,15 @@
 </script>
 <style>
 
-	.red-event,
-	.red-event .fc-event-skin {
+	.red-event {
 		background: red !important;
 	}
 	
-	.yellow-event,
-	.yellow-event .fc-event-skin {
+	.yellow-event {
 		background: yellow !important;
 	}
 	
-	.black-text-event,
-	.black-text-event .fc-event-skin {
+	.black-text-event {
 		color: #000 !important;
 	}