Merge pull request #5713 from nextcloud/datepicker-redesign

Redesign jQuery UI datepicker
nextcloud · Jul 23, 2017 · 05d979c · 05d979c
2 parents 2e7e03b + 25d29f0
commit 05d979c
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 4 deletions.
diff --git a/core/css/header.scss b/core/css/header.scss
@@ -211,7 +211,8 @@ nav {
 	margin-left: -54px;
 }
 
-#navigation {
+#navigation,
+.ui-datepicker {
 	position: relative;
 	left: -100%;
 	width: 160px;

diff --git a/core/css/inputs.scss b/core/css/inputs.scss
@@ -492,8 +492,9 @@ input {
 }
 
 .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
-	border: none;
-	background: nc-darken($color-main-background, 3%);
+	border: 1px solid transparent;
+	background: inherit;
+	color: $color-primary;
 }
 
 /* Animation */

diff --git a/core/css/styles.scss b/core/css/styles.scss
@@ -964,6 +964,83 @@ code {
 	background-image: url('../img/actions/play-previous.svg?v=1');
 }
 
+/* ---- jQuery UI datepicker ---- */
+.ui-widget.ui-datepicker {
+	margin-top: 10px;
+	padding: 4px 8px;
+	width: auto;
+
+	.ui-state-default,
+	.ui-widget-content .ui-state-default,
+	.ui-widget-header .ui-state-default {
+		border: 1px solid transparent;
+		background: inherit;
+	}
+	.ui-widget-header {
+		padding: 7px;
+		font-size: 13px;
+		border:	none;
+		background-color: $color-main-background;
+		color: $color-main-text;
+
+		.ui-datepicker-title {
+			line-height: 1;
+			font-weight: 300;
+		}
+		.ui-icon {
+			opacity: .5;
+
+			&.ui-icon-circle-triangle-e {
+				background: url("../img/actions/arrow-right.svg") center center no-repeat;
+			}
+			&.ui-icon-circle-triangle-w {
+				background: url("../img/actions/arrow-left.svg") center center no-repeat;
+			}
+		}
+		.ui-state-hover .ui-icon {
+			opacity: 1;
+		}
+	}
+	.ui-datepicker-calendar {
+		th {
+			font-weight: normal;
+			color: nc-lighten($color-main-text, 33%);
+			opacity: .8;
+		}
+		tr:hover {
+			background-color: inherit;
+		}
+		td {
+			> * {
+				border-radius: 50%;
+				text-align: center;
+				font-weight: normal;
+				color: $color-main-text;
+				padding: 6px;
+				line-height: 12px;
+			}
+
+			&.ui-datepicker-today a:not(.ui-state-hover) {
+				background-color: nc-lighten($color-main-text, 86%);
+			}
+
+			&.ui-datepicker-current-day a.ui-state-active,
+			.ui-state-hover,
+			.ui-state-focus {
+				background-color: $color-primary;
+				color: $color-primary-text;
+				font-weight: bold;
+			}
+
+			&.ui-datepicker-week-end :not(.ui-state-hover),
+			.ui-priority-secondary:not(.ui-state-hover) {
+				color: nc-lighten($color-main-text, 33%);
+				opacity: .8;
+			}
+		}
+	}
+}
+
 .ui-datepicker-prev, .ui-datepicker-next {
 	border: nc-lighten($color-main-text, 86%);
 	background: $color-main-background;

diff --git a/core/img/actions/arrow-left.svg b/core/img/actions/arrow-left.svg
diff --git a/core/img/actions/arrow-right.svg b/core/img/actions/arrow-right.svg
diff --git a/lib/private/legacy/template.php b/lib/private/legacy/template.php
@@ -108,9 +108,9 @@ public static function initTemplateEngine($renderAs) {
 				}
 			}
 
+			OC_Util::addStyle('server', null, true);
 			OC_Util::addStyle('jquery-ui-fixes',null,true);
 			OC_Util::addVendorStyle('jquery-ui/themes/base/jquery-ui',null,true);
-			OC_Util::addStyle('server', null, true);
 			OC_Util::addVendorStyle('select2/select2', null, true);
 			OC_Util::addStyle('jquery.ocdialog');
 			OC_Util::addTranslations("core", null, true);