From ab0f830de11f81115b0f29e628f3d11b3d1f67dd Mon Sep 17 00:00:00 2001 From: SharglutDev Date: Wed, 18 Dec 2024 16:20:24 +0100 Subject: [PATCH] ui-core: add close button to pickers - use the Modal component to display the calendar picker to harmonize with tolerance and time picker - add a modal.css file with the modal base styles to avoid repeating the code - add a close button to the Modal component Signed-off-by: SharglutDev --- ui-core/src/components/Modal.tsx | 5 +++ .../inputs/datePicker/DatePicker.tsx | 5 +-- ui-core/src/styles/inputs/datePicker.css | 7 ---- ui-core/src/styles/inputs/index.css | 1 + ui-core/src/styles/inputs/modal.css | 33 +++++++++++++++++++ ui-core/src/styles/inputs/timePicker.css | 16 --------- ui-core/src/styles/inputs/tolerancePicker.css | 14 -------- 7 files changed, 42 insertions(+), 39 deletions(-) create mode 100644 ui-core/src/styles/inputs/modal.css diff --git a/ui-core/src/components/Modal.tsx b/ui-core/src/components/Modal.tsx index 0547a4eb..5994ce03 100644 --- a/ui-core/src/components/Modal.tsx +++ b/ui-core/src/components/Modal.tsx @@ -1,5 +1,7 @@ import React, { useEffect, useRef } from 'react'; +import { X } from '@osrd-project/ui-icons'; + import { useModalPosition } from '../hooks/useModalPosition'; import useOutsideClick from '../hooks/useOutsideClick'; @@ -31,6 +33,9 @@ const InputModal = ({ inputRef, isOpen, onClose, children }: ModalProps) => { className="modal-content" style={{ top: modalPosition.top, left: modalPosition.left }} > + {children} diff --git a/ui-core/src/components/inputs/datePicker/DatePicker.tsx b/ui-core/src/components/inputs/datePicker/DatePicker.tsx index aa824a50..a8b6a4da 100644 --- a/ui-core/src/components/inputs/datePicker/DatePicker.tsx +++ b/ui-core/src/components/inputs/datePicker/DatePicker.tsx @@ -6,6 +6,7 @@ import cx from 'classnames'; import { type CalendarSlot } from '.'; import CalendarPicker, { type CalendarPickerPublicProps } from './CalendarPicker'; import useDatePicker from './useDatePicker'; +import InputModal from '../../Modal'; import Input, { type InputProps } from '../Input'; type BaseDatePickerProps = { @@ -69,7 +70,7 @@ export const DatePicker = (props: DatePickerProps) => { statusWithMessage={statusWithMessage} /> - {showPicker && ( + setShowPicker(false)}>
{ selectableSlot={selectableSlot} />
- )} + ); }; diff --git a/ui-core/src/styles/inputs/datePicker.css b/ui-core/src/styles/inputs/datePicker.css index b5f2a1ef..61558b0b 100644 --- a/ui-core/src/styles/inputs/datePicker.css +++ b/ui-core/src/styles/inputs/datePicker.css @@ -13,17 +13,10 @@ } .calendar-picker { - position: absolute; - width: fit-content; - border-radius: 0.5rem; - box-shadow: - 0 0.813rem 0.938rem -0.438rem rgba(31, 27, 23, 0.1), - 0 0.188rem 0.375rem rgba(31, 27, 23, 0.2); display: flex; flex-direction: row; align-items: center; justify-content: center; - @apply bg-white-100; .calendar-navigation-btn { width: 2rem; diff --git a/ui-core/src/styles/inputs/index.css b/ui-core/src/styles/inputs/index.css index c3da36af..db2d490c 100644 --- a/ui-core/src/styles/inputs/index.css +++ b/ui-core/src/styles/inputs/index.css @@ -14,3 +14,4 @@ @import './timePicker.css'; @import './tokenInput.css'; @import './tolerancePicker.css'; +@import './modal.css'; diff --git a/ui-core/src/styles/inputs/modal.css b/ui-core/src/styles/inputs/modal.css new file mode 100644 index 00000000..bf55f51f --- /dev/null +++ b/ui-core/src/styles/inputs/modal.css @@ -0,0 +1,33 @@ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1000; +} + +.modal-content { + background-color: theme('colors.white.100'); + border-radius: 0.5rem; + box-shadow: + 0px 1px 0px rgba(255, 255, 255, 1) inset, + 0px 4px 7px -3px rgba(24, 68, 239, 0.19), + 0px 1px 3px rgba(49, 46, 43, 0.2); + position: absolute; + + .close-button { + position: absolute; + top: 16px; + right: 16px; + color: theme('colors.grey.50'); + + &:hover { + color: theme('colors.grey.90'); + } + + &:active { + color: theme('colors.grey.20'); + } + } +} diff --git a/ui-core/src/styles/inputs/timePicker.css b/ui-core/src/styles/inputs/timePicker.css index cf020069..72aefd64 100644 --- a/ui-core/src/styles/inputs/timePicker.css +++ b/ui-core/src/styles/inputs/timePicker.css @@ -10,24 +10,8 @@ display: none; } - .modal-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1000; - } - .modal-content { - background-color: #fff; padding: 4.563rem; - border-radius: 0.313rem; - box-shadow: - 0px 1px 0px rgba(255, 255, 255, 1) inset, - 0px 4px 7px -3px rgba(24, 68, 239, 0.19), - 0px 1px 3px rgba(49, 46, 43, 0.2); - position: absolute; } .time-picker-container { diff --git a/ui-core/src/styles/inputs/tolerancePicker.css b/ui-core/src/styles/inputs/tolerancePicker.css index 88e36ac3..71185d8c 100644 --- a/ui-core/src/styles/inputs/tolerancePicker.css +++ b/ui-core/src/styles/inputs/tolerancePicker.css @@ -20,13 +20,6 @@ } .modal-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1000; - .tolerance-picker-section { display: flex; gap: 1rem; @@ -56,14 +49,7 @@ } .modal-content { - background-color: #fff; padding: 1.25rem; - border-radius: 0.313rem; - box-shadow: - 0px 1px 0px rgba(255, 255, 255, 1) inset, - 0px 4px 7px -3px rgba(24, 68, 239, 0.19), - 0px 1px 3px rgba(49, 46, 43, 0.2); - position: absolute; } .time-picker-container {