From dedbceb0709aec686145c75cb7dffb1027341f7d Mon Sep 17 00:00:00 2001 From: greta Date: Mon, 16 Sep 2024 16:26:47 +0200 Subject: [PATCH] feat: change the datepicker styling to look more like the native picker Signed-off-by: greta --- .../NcDateTimePicker/NcDateTimePicker.vue | 6 +- src/components/NcDateTimePicker/index.scss | 64 ++++++++++--------- 2 files changed, 39 insertions(+), 31 deletions(-) diff --git a/src/components/NcDateTimePicker/NcDateTimePicker.vue b/src/components/NcDateTimePicker/NcDateTimePicker.vue index 69c5b8fc0b..64f69533e5 100644 --- 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 index a68e3d204f..eb4667c04b 100644 --- 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,8 +155,10 @@ // 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); @@ -160,15 +166,16 @@ } &.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,15 +341,13 @@ 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'); } @@ -348,15 +355,12 @@ .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); } } }