From 6d8f7f47fa67615725b80242f83bbeeb8c632a1c Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 18 Jan 2016 18:04:46 +0100
Subject: [PATCH] Overhauled visuals for date picker

---
 .../files/js/WoltLab/WCF/Date/Picker.js       | 24 +++++-
 .../install/files/style/ui/datePicker.scss    | 85 ++++++++-----------
 2 files changed, 59 insertions(+), 50 deletions(-)

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js b/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
index 26edc93b06..60989b9675 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
@@ -114,6 +114,18 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
 				element.parentNode.insertBefore(container, element);
 				container.insertBefore(element, button);
 				
+				// check if the date input has one of the following classes set otherwise default to 'short'
+				var hasClass = false, knownClasses = ['tiny', 'short', 'medium', 'long'];
+				for (var i = 0; i < 4; i++) {
+					if (element.classList.contains(knownClasses[i])) {
+						hasClass = true;
+					}
+				}
+				
+				if (!hasClass) {
+					element.classList.add('short')
+				}
+				
 				_data.set(element, {
 					shadow: shadowElement,
 					
@@ -457,7 +469,11 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
 			_dateMonth = elCreate('select');
 			_dateMonth.className = 'month';
 			_dateMonth.addEventListener('change', this._changeMonth.bind(this));
-			monthYearContainer.appendChild(_dateMonth);
+			
+			var selectWrapper = elCreate('label');
+			selectWrapper.className = 'selectDropdown';
+			selectWrapper.appendChild(_dateMonth);
+			monthYearContainer.appendChild(selectWrapper);
 			
 			var months = '', monthNames = Language.get('__monthsShort');
 			for (var i = 0; i < 12; i++) {
@@ -468,7 +484,11 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
 			_dateYear = elCreate('select');
 			_dateYear.className = 'year';
 			_dateYear.addEventListener('change', this._changeYear.bind(this));
-			monthYearContainer.appendChild(_dateYear);
+			
+			selectWrapper = elCreate('label');
+			selectWrapper.className = 'selectDropdown';
+			selectWrapper.appendChild(_dateYear);
+			monthYearContainer.appendChild(selectWrapper);
 			
 			_dateMonthNext = elCreate('a');
 			_dateMonthNext.className = 'icon icon16 fa-arrow-right next';
diff --git a/wcfsetup/install/files/style/ui/datePicker.scss b/wcfsetup/install/files/style/ui/datePicker.scss
index 237b29c38f..3400f01a6e 100644
--- a/wcfsetup/install/files/style/ui/datePicker.scss
+++ b/wcfsetup/install/files/style/ui/datePicker.scss
@@ -1,7 +1,4 @@
-// TODO: overhaul file
-
 .inputAddon > .inputDatePicker {
-	// TODO: background-color: @wcfInputBackgroundColor !important;
 	cursor: pointer;
 	flex: 0 1 150px;
 	min-width: 150px;
@@ -10,7 +7,7 @@
 .datePicker {
 	background-color: $wcfDropdownBackground;
 	border: 1px solid $wcfDropdownBorder;
-	border-radius: 3px;
+	box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);
 	color: $wcfDropdownText;
 	opacity: 0;
 	position: absolute;
@@ -19,8 +16,6 @@
 	width: 240px;
 	z-index: 450;
 	
-	@include boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
-	
 	&.active {
 		opacity: 1;
 		transition-delay: 0s;
@@ -56,7 +51,7 @@
 	
 	> header,
 	> footer {
-		padding: $wcfGapSmall;
+		padding: 10px;
 		position: relative;
 		text-align: center;
 	}
@@ -72,63 +67,57 @@
 		}
 		
 		&.previous {
-			left: $wcfGapSmall;
+			left: 10px;
 		}
 		
 		&.next {
-			right: $wcfGapSmall;
+			right: 10px;
 		}
 	}
 	
-	> ul {
+	.selectDropdown + .selectDropdown {
+		margin-left: 5px;
+	}
+	
+	> ul > li {
 		border-top: 1px solid $wcfDropdownBorder;
+		display: flex;
 		
-		// hide borders
-		margin: 0 -1px -1px 0;
+		> a,
+		> span {
+			display: block;
+			flex: 1;
+			padding: 5px 0;
+			text-align: center;
+			
+			&:not(:last-child) {
+				border-right: 1px solid $wcfDropdownBorder;
+			}
+		}
 		
-		> li {
-			display: flex;
+		> a {
+			color: $wcfDropdownLink;
 			
-			> a,
-			> span {
-				border: 1px solid $wcfDropdownBorder;
-				border-width: 0 1px 1px 0;
-				display: block;
-				flex: 1;
-				padding: $wcfGapTiny 0;
-				text-align: center;
+			&:hover {
+				text-decoration: none;
 			}
 			
-			> a {
-				// TODO: background-color: @wcfContainerAccentBackgroundColor;
-				// TODO: color: @wcfColor;
-				
-				&:hover {
-					text-decoration: none;
-				}
-				
-				&.active,
-				&:not(.otherMonth):hover {
-					// TODO: 	background-color: @wcfContainerHoverBackgroundColor;
-				}
-				
-				&.otherMonth {
-					// TODO: 	background-color: @wcfContainerBackgroundColor;
-					// TODO: color: @wcfDimmedColor;
-					cursor: default;
-				}
+			&.active,
+			&:not(.otherMonth):hover {
+				background-color: $wcfDropdownBackgroundActive;
+				color: $wcfDropdownLinkActive;
 			}
 			
-			> span {
-				// TODO: background-color: @wcfTabularBoxBackgroundColor;
-				// TODO: border-right-color: @wcfTabularBoxBackgroundColor;
-				// TODO: color: @wcfTabularBoxColor;
-				font-size: .85rem;
-				text-transform: uppercase;
-				
-				// TODO: .textShadow(@wcfTabularBoxBackgroundColor);
+			&.otherMonth {
+				color: $wcfContentDimmedText;
+				cursor: default;
 			}
 		}
+		
+		> span {
+			text-transform: uppercase;
+			@extend .wcfFontSmall;
+		}
 	}
 	
 	> footer {
-- 
2.20.1