Skip to content
This repository was archived by the owner on Jan 30, 2024. It is now read-only.

datepicker et timepicker: bonifier affichage mobile #543

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

datepicker et timepicker: bonifier affichage mobile #543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions ...dul-components/src/components/calendar/calendar-renderer/base-calendar/base-calendar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,14 @@
@click.stop="onMonthPrevious()"
:disabled="isMinMonth"
icon-name="m-svg__chevron--left"
icon-size="16px"
ref="previousMonth"
skin="link">{{ previousMonthLabel }}</m-icon-button>
icon-size="18px"
ref="previousMonth">{{ previousMonthLabel }}</m-icon-button>
<m-icon-button class="m-base-calendar__next"
@click.stop="onMonthNext()"
:disabled="isMaxMonth"
icon-name="m-svg__chevron--right"
icon-size="16px"
ref="nextMonth"
skin="link">{{ nextMonthLabel }}</m-icon-button>
icon-size="18px"
ref="nextMonth">{{ nextMonthLabel }}</m-icon-button>
</div>
</transition>
</nav>
Expand Down
38 changes: 25 additions & 13 deletions ...dul-components/src/components/calendar/calendar-renderer/base-calendar/base-calendar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@

$m-base-calendar--week-length: 7 !default;
$m-base-calendar--dimension: $m-touch-size !default;
$m-base-calendar--weekday-height: 41px !default; // magic number
$m-base-calendar--weekday-height: 44px !default; // magic number
$m-base-calendar--width: calc(#{$m-base-calendar--dimension * $m-base-calendar--week-length} + #{$m-space-md} * 2) !default;
$m-base-calendar--min-height: calc(#{($m-base-calendar--dimension * 5) + $m-base-calendar--weekday-height} + #{$m-space});
$m-base-calendar--max-height: calc(#{($m-base-calendar--dimension * 6) + $m-base-calendar--weekday-height} + #{$m-space});
$m-base-calendar--min-height: calc(#{($m-base-calendar--dimension * 5) + $m-base-calendar--weekday-height} + #{$m-space-md});
$m-base-calendar--max-height: calc(#{($m-base-calendar--dimension * 6) + $m-base-calendar--weekday-height} + #{$m-space-md});
$m-base-calendar--border-focus: 1px solid $m-color-interactive-darker;

@mixin m-base-calendar__show-indicator() {
Expand Down Expand Up @@ -54,8 +54,10 @@ $m-base-calendar--border-focus: 1px solid $m-color-interactive-darker;
overflow: hidden;

@media (min-width: $m-mq-min-sm) {
border: $m-border-width-sm solid $m-color-border;
width: $m-base-calendar--width;
border: $m-border-width-sm solid $m-color-border;
border-radius: $m-border-radius;
box-shadow: $m-box-shadow;
}

&.m--is-years-months-view {
Expand All @@ -67,14 +69,15 @@ $m-base-calendar--border-focus: 1px solid $m-color-interactive-darker;
}
}

&__next,
&__previous {
color: $m-color-interactive;
&__previous,
&__next {
position: relative;
z-index: 0;
}

&:hover,
&:focus {
color: $m-color-interactive-darker;
}

&__next {
margin-left: #{- $m-space-xs};
}

&__header,
Expand Down Expand Up @@ -138,6 +141,10 @@ $m-base-calendar--border-focus: 1px solid $m-color-interactive-darker;
&__body {
position: relative;
overflow: hidden;

@media (max-width: $m-mq-max-sm) {
padding-bottom: $m-space-md;
}
}

&.m--is-max-row {
Expand All @@ -154,18 +161,23 @@ $m-base-calendar--border-focus: 1px solid $m-color-interactive-darker;
&__years-months-view {
padding-right: $m-space;
padding-left: $m-space;
padding-bottom: $m-space;
padding-bottom: $m-space-md;
width: 100%;
height: $m-base-calendar--min-height;

@include m-scrollbar();

@media (max-width: $m-mq-max-sm) {
height: $m-base-calendar--max-height;
}

@media (min-width: $m-mq-min-sm) {
// for animation purpose
transition: height $m-transition-duration ease;
padding-right: $m-space-md;
padding-left: $m-space-md;
}

}

&__days-view {
Expand Down Expand Up @@ -219,7 +231,7 @@ $m-base-calendar--border-focus: 1px solid $m-color-interactive-darker;

align-items: center;
border-bottom: $m-border-width-sm solid $m-color-border;
padding: 0 0 $m-space-2xs 0;
padding: 0 0 $m-space-sm 0;
margin: 0;
}

Expand Down
1 change: 1 addition & 0 deletions packages/modul-components/src/components/datepicker/datepicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
open-trigger="manual"
:padding="false"
placement="bottom"
:shadow="false"
@open="onOpen"
@close="onClose">
<h2 v-if="label && isMqMaxS"
Expand Down
4 changes: 4 additions & 0 deletions packages/modul-components/src/components/input-style/input-style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,10 @@
background: rgba(255, 255, 255, 0);
-webkit-box-shadow: 0 0 0 1000px $m-color-white inset !important;
}

&:disabled {
color: $m-color-disabled;
}
}

textarea {
Expand Down
94 changes: 48 additions & 46 deletions packages/modul-components/src/components/timepicker/timepicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,54 +57,56 @@
:focus-management="false"
open-trigger="manual"
placement="bottom-end"
:shadow="false"
@open="onOpen"
@close="onClose">
<div slot="header"
class="m-timepicker__header">
<span class="m-timepicker__header__hours">{{ $i18n.translate('m-timepicker:hours') }}</span>:
<span class="m-timepicker__header__minutes">{{ $i18n.translate('m-timepicker:minutes') }}</span>
</div>
<div class="m-timepicker__body">
<ul class="m-timepicker__hours"
ref="hours"
role="listbox"
@mousedown="onMousedown"
@mouseup="onMouseup"
@scroll="onScroll">
<li v-for="(h, hoursIndex) in currentfilteredHours"
:key="hoursIndex"
:id="h"
class="m-timepicker__hours-item">
<m-calendar-button :selected="h == currentHour"
role="option"
@click="onSelectHour(h)"
@keyup="onSelectHourKeyup($event, h)">
{{formatNumber(h)}}
</m-calendar-button>
</li>
</ul>
<ul class="m-timepicker__minutes"
ref="minutes"
@mousedown="onMousedown"
@mouseup="onMouseup"
@scroll="onScroll">
<li v-for="(m, minutesIndex) in currentFilteredMinutes"
:key="minutesIndex"
:id="minutesIndex"
class="m-timepicker__minutes-item">
<m-calendar-button :selected="m == currentMinute"
@click="onSelectMinute(m)"
@keyup="onSelectMinuteKeyup($event, m)"
role="option">
{{formatNumber(m)}}
</m-calendar-button>
</li>
</ul>
</div>
<div slot="footer"
class="m-timepicker__footer">
<m-link mode="button"
@click="onOk">{{i18nButton}}</m-link>
<div class="m-timepicker__box">
<header class="m-timepicker__header">
<span class="m-timepicker__header__hours">{{ $i18n.translate('m-timepicker:hours') }}</span>:
<span class="m-timepicker__header__minutes">{{ $i18n.translate('m-timepicker:minutes') }}</span>
</header>
<div class="m-timepicker__body">
<ul class="m-timepicker__hours"
ref="hours"
role="listbox"
@mousedown="onMousedown"
@mouseup="onMouseup"
@scroll="onScroll">
<li v-for="(h, hoursIndex) in currentfilteredHours"
:key="hoursIndex"
:id="h"
class="m-timepicker__hours-item">
<m-calendar-button :selected="h == currentHour"
role="option"
@click="onSelectHour(h)"
@keyup="onSelectHourKeyup($event, h)">
{{formatNumber(h)}}
</m-calendar-button>
</li>
</ul>
<ul class="m-timepicker__minutes"
ref="minutes"
@mousedown="onMousedown"
@mouseup="onMouseup"
@scroll="onScroll">
<li v-for="(m, minutesIndex) in currentFilteredMinutes"
:key="minutesIndex"
:id="minutesIndex"
class="m-timepicker__minutes-item">
<m-calendar-button :selected="m == currentMinute"
@click="onSelectMinute(m)"
@keyup="onSelectMinuteKeyup($event, m)"
role="option">
{{formatNumber(m)}}
</m-calendar-button>
</li>
</ul>
</div>
<footer class="m-timepicker__footer">
<m-link class="m-timepicker__footer-link"
mode="button"
@click="onOk">{{i18nButton}}</m-link>
</footer>
</div>
</m-popup>
</m-input-style>
Expand Down
33 changes: 17 additions & 16 deletions packages/modul-components/src/components/timepicker/timepicker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,20 @@ $m-timepicker--height-multiplier: 5;
}
}

&__validation-message {
transition: margin-top $m-transition-duration ease;
}

&__header,
&__body,
&__footer {
background: $m-color-white;
&__box {
background-color: $m-color-white;

@media (min-width: #{$m-mq-min-sm}) {
border-right: $m-border-width-sm solid $m-color-border;
border-left: $m-border-width-sm solid $m-color-border;
border-radius: $m-border-radius;
border: 1px solid $m-color-border;
box-shadow: $m-box-shadow;
}
}

&__validation-message {
transition: margin-top $m-transition-duration ease;
}

&__header {
display: flex;
align-items: center;
Expand All @@ -38,10 +37,6 @@ $m-timepicker--height-multiplier: 5;
border-bottom: $m-border-width-sm solid $m-color-border;
font-weight: $m-font-weight-semi-bold;

@media (min-width: #{$m-mq-min-sm}) {
border-top: $m-border-width-sm solid $m-color-border;
}

&__hours,
&__minutes {
flex: 1 1 auto;
Expand Down Expand Up @@ -88,14 +83,20 @@ $m-timepicker--height-multiplier: 5;

&__footer {
border-top: $m-border-width-sm solid $m-color-border;
padding: 6px $m-space;
padding: $m-space-sm $m-space $m-space-2xl $m-space;
min-height: $m-touch-size;
display: flex;
align-items: center;
justify-content: center;

@media (min-width: #{$m-mq-min-sm}) {
border-bottom: $m-border-width-sm solid $m-color-border;
padding-bottom: $m-space-sm;
}
}

&__footer-link {
width: 100%;
text-align: center;
justify-content: center;
}
}