Skip to content

Commit

Permalink
feat: change the datepicker styling to look more like the native picker
Browse files Browse the repository at this point in the history 
Signed-off-by: greta <[email protected]>
  • Loading branch information
@GretaD @backportbot
GretaD authored and backportbot[bot] committed Nov 5, 2024
1 parent 619594a commit cdbca5e
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 31 deletions.
6 changes: 5 additions & 1 deletion src/components/NcDateTimePicker/NcDateTimePicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -309,7 +309,7 @@ export default ScopeComponent({
// 0 = sunday, 1 = monday
firstDayOfWeek: getFirstDay(),
},
monthFormat: 'MMM',
monthFormat: 'MMMM',
}
},
Expand Down Expand Up @@ -477,6 +477,10 @@ export default ScopeComponent({
}
}
.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.
Expand Down
64 changes: 34 additions & 30 deletions src/components/NcDateTimePicker/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 'vue-datepicker-next/scss/index';

Expand All @@ -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) {
Expand Down Expand Up @@ -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);
Expand All @@ -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
}
Expand Down Expand Up @@ -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;
}
}
}
Expand All @@ -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
Expand All @@ -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
> * {
Expand All @@ -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;
Expand All @@ -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);
}
}

Expand Down Expand Up @@ -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,
Expand All @@ -236,6 +243,7 @@
height: 95%;
min-height: $cell_height;
transition: background 100ms ease-in-out;
color: var(--color-main-text);
}
}
&.mx-table-year {
Expand All @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -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);
}
}
}
Expand Down

0 comments on commit cdbca5e

Please sign in to comment.