Merge pull request #6095 from nextcloud-libraries/improve/datetimepicker

fix(NcDateTimePicker): change styling to look more like the native picker
nextcloud-libraries · Oct 22, 2024 · 91a7841 · 91a7841
2 parents d3946a4 + dedbceb
commit 91a7841
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 31 deletions.
diff --git a/src/components/NcDateTimePicker/NcDateTimePicker.vue b/src/components/NcDateTimePicker/NcDateTimePicker.vue
@@ -311,7 +311,7 @@ export default {
 					// 0 = sunday, 1 = monday
 					firstDayOfWeek: getFirstDay(),
 				},
-				monthFormat: 'MMM',
+				monthFormat: 'MMMM',
 			}
 		},
 
@@ -478,6 +478,10 @@ export default {
 	}
 }
 
+.v-select.select {
+	min-width: 246px;
+	left: -8px !important;
+}
 // TODO: This should be scoped or targeted by a specific selector, but the NcSelect component does not allow this yet.
 .vs__dropdown-menu--floating {
 	// Higher z-index than the popover in which the NcSelect is located.

diff --git a/src/components/NcDateTimePicker/index.scss b/src/components/NcDateTimePicker/index.scss
@@ -2,8 +2,9 @@
  * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
- 
+
  $cell_height: 32px;
+ $opacity_full: 1;
 
 @import 'vue2-datepicker/scss/index';
 
@@ -23,7 +24,7 @@
 			border: 2px solid var(--color-border-maxcontrast);
 			background-color: var(--color-main-background);
 			background-clip: content-box;
-			
+
 			&:active:not(.disabled),
 			&:hover:not(.disabled),
 			&:focus:not(.disabled) {
@@ -51,6 +52,7 @@
 	background-color: var(--color-main-background);
 	font-family: var(--font-face) !important;
 	line-height: 1.5;
+	left: 0 !important;
 
 	svg {
 		fill: var(--color-main-text);
@@ -64,7 +66,7 @@
 			border-left: 1px solid var(--color-border);
 		}
 	}
-	
+
 	&.show-week-number .mx-calendar {
 		width: $cell_height * 8 + 2 * 5px + 30px; // week number + 7 days + padding + 30px padding to fit the buttons
 	}
@@ -109,12 +111,13 @@
 
 		// first active cell, range style on day picker panel only
 		.mx-calendar-content .mx-table-date .cell {
+			border-radius: var(--border-radius-small);
 			&.active {
-				border-radius: var(--border-radius) 0 0 var(--border-radius);
+				border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
 			}
 			// second selected cell
 			&.in-range + .cell.active {
-				border-radius: 0 var(--border-radius) var(--border-radius) 0;
+				border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
 			}
 		}
 	}
@@ -126,7 +129,7 @@
 		thead > tr > th {
 			text-align: center;
 			opacity: $opacity_disabled;
-			color: var(--color-text-lighter);
+			color: var(--color-main-text);
 		}
 
 		// Override table rule from server
@@ -141,7 +144,8 @@
 			transition: all 100ms ease-in-out;
 			text-align: center;
 			opacity: $opacity_normal;
-			border-radius: 50px;
+			border-radius: var(--border-radius-small);
+			min-height: var(--clickable-area-small) !important;
 
 			// force pointer on all content
 			> * {
@@ -151,24 +155,27 @@
 			// Selected and mouse event
 			&.today {
 				opacity: $opacity_full;
-				color: var(--color-primary-element);
 				font-weight: bold;
+				background-color: transparent;
+				color: var(--color-primary-element);
+				border-radius: var(--border-radius-small);
 				&:hover,
 				&:focus {
 					color: var(--color-primary-element-text);
 				}
 			}
 			&.in-range,
 			&.disabled {
-				border-radius: 0;
-				font-weight: normal;
+				border-radius: var(--border-radius-small);
+				color: var(--color-main-text);
+				opacity: 1;
 			}
 			&.in-range {
 				opacity: $opacity_normal;
 			}
 			&.not-current-month {
 				opacity: $opacity_disabled;
-				color: var(--color-text-lighter);
+				color: var(--color-text-maxcontrast);
 				&:hover,
 				&:focus {
 					opacity: $opacity_full;
@@ -187,10 +194,9 @@
 				font-weight: bold;
 			}
 			&.disabled {
-				opacity: $opacity_disabled;
-				color: var(--color-text-lighter);
-				border-radius: 0;
-				background-color: var(--color-background-darker);
+				opacity: $opacity_full;
+				color: var(--color-main-text);
+				border-radius: var(--border-radius-small);
 			}
 		}
 
@@ -222,6 +228,7 @@
 				flex: 1 1 $cell_height;
 				justify-content: space-around;
 				min-height: $cell_height;
+				color: var(--color-main-text);
 			}
 			// Default cell style
 			th,
@@ -236,6 +243,7 @@
 				height: 95%;
 				min-height: $cell_height;
 				transition: background 100ms ease-in-out;
+				color: var(--color-main-text);
 			}
 		}
 		&.mx-table-year {
@@ -259,12 +267,12 @@
 		min-width: $cell_height;
 		height: $cell_height;
 		margin: 0 2px !important; // center also single element. Definitively use margin so that buttons are not touching
-		padding: 7px 10px;
+		padding: 0;
 		cursor: pointer;
 		text-decoration: none;
-		opacity: $opacity_disabled;
-		color: var(--color-text-lighter);
-		border-radius: $cell_height;
+		opacity: $opacity_full;
+		color: var(--color-main-text);
+		border-radius: var(--border-radius-small);
 		line-height: $cell_height - 12px; // padding minus 2px for better visual
 		// Mouse feedback
 		&:hover,
@@ -291,9 +299,10 @@
 			cursor: pointer;
 			text-align: center;
 			text-decoration: none;
-			opacity: $opacity_normal;
+			opacity: $opacity_full;
 			color: var(--color-main-text);
-			border-radius: $cell_height;
+			border-radius: var(--border-radius-small);
+			background-color: transparent;
 			line-height: $cell_height - 12px; // padding minus 2px for better visual
 
 			// Mouse feedback
@@ -332,31 +341,26 @@
 				line-height: initial;
 			}
 		}
-
 		.mx-calendar-header-label {
 			display: flex;
+			color: var(--color-main-text);
 		}
-
 		.mx-btn-icon-double-left > i {
 			background-image: url('./chevron-double-left.svg');
 		}
-
 		.mx-btn-icon-left > i {
 			background-image: url('./chevron-left.svg');
 		}
 
 		.mx-btn-icon-right > i {
 			background-image: url('./chevron-right.svg');
 		}
-
 		.mx-btn-icon-double-right > i {
 			background-image: url('./chevron-double-right.svg');
 		}
-
 		button.mx-btn-icon-right {
 			order: 2;
 		}
-
 		button.mx-btn-icon-double-right {
 			order: 3;
 		}
@@ -371,7 +375,7 @@
 			&:hover,
 			&.mx-active-week {
 				opacity: $opacity_full;
-				border-radius: 50px;
+				border-radius: var(--border-radius-small);
 				background-color: var(--color-background-dark);
 				td {
 					background-color: transparent;
@@ -400,6 +404,8 @@
 			// only one button, center it
 			justify-content: center;
 			border-bottom: 1px solid var(--color-border);
+			opacity: 1 !important;
+			background-color: transparent;
 		}
 
 		.mx-time-column {
@@ -411,14 +417,12 @@
 			&.active,
 			&:hover {
 				color: var(--color-primary-element-text);
-				background-color: var(--color-primary-element);
 			}
 
 			&.disabled {
 				cursor: not-allowed;
 				opacity: $opacity_disabled;
 				color: var(--color-main-text);
-				background-color: var(--color-main-background);
 			}
 		}
 	}