From 9179d8463a91e66541190242dd26ea1427467f5e Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Thu, 10 Oct 2024 09:27:24 -0500 Subject: [PATCH 1/4] update styling of dt selector and trip form --- .../form/advanced-settings-button.tsx | 41 ++-- .../form/advanced-settings-panel.tsx | 5 +- lib/components/form/batch-settings.tsx | 42 ++-- lib/components/form/batch-styled.ts | 2 +- lib/components/form/date-time-button.tsx | 211 ------------------ lib/components/form/styled.ts | 22 +- package.json | 3 +- yarn.lock | 10 +- 8 files changed, 55 insertions(+), 281 deletions(-) delete mode 100644 lib/components/form/date-time-button.tsx diff --git a/lib/components/form/advanced-settings-button.tsx b/lib/components/form/advanced-settings-button.tsx index 0449dc85d..63351e9c8 100644 --- a/lib/components/form/advanced-settings-button.tsx +++ b/lib/components/form/advanced-settings-button.tsx @@ -1,6 +1,7 @@ -import { ArrowRight } from '@styled-icons/fa-solid' -import { FormattedMessage } from 'react-intl' +import { Gear } from '@styled-icons/fa-solid' +import { useIntl } from 'react-intl' +import { Button } from './batch-styled' import { grey } from '../util/colors' import React from 'react' import styled from 'styled-components' @@ -9,21 +10,29 @@ interface Props { onClick: () => void } -const StyledTransparentButton = styled.button` - align-items: center; - background: transparent; - border: none; - color: ${grey[800]}; - display: flex; - gap: 7px; - margin-bottom: 5px; +const StyledAdvancedSettingsButton = styled(Button)` + border: 2px solid ${grey[700]}; + color: ${grey[700]}; + background: white; ` -const AdvancedSettingsButton = ({ onClick }: Props): JSX.Element => ( - - - - -) +const AdvancedSettingsButton = ({ onClick }: Props): JSX.Element => { + const intl = useIntl() + + const label = intl.formatMessage({ + id: 'components.BatchSearchScreen.moreOptions' + }) + + return ( + + + + ) +} export default AdvancedSettingsButton diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index ea085d017..0e7a24029 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -95,6 +95,7 @@ const DtSelectorContainer = styled.div` .date-time-modal { padding: 0; + width: 100%; .main-panel { margin: 0; @@ -102,10 +103,6 @@ const DtSelectorContainer = styled.div` button { padding: 6px 0; } - - .date-time-selector { - margin: 15px 0; - } } } ` diff --git a/lib/components/form/batch-settings.tsx b/lib/components/form/batch-settings.tsx index 23bd13a6c..28661e99e 100644 --- a/lib/components/form/batch-settings.tsx +++ b/lib/components/form/batch-settings.tsx @@ -28,7 +28,7 @@ import { PlanTripButton } from './batch-styled' import AdvancedSettingsButton from './advanced-settings-button' -import DateTimeButton from './date-time-button' +import DateTimeModal from './date-time-modal' // TYPESCRIPT TODO: better types type Props = { @@ -90,8 +90,7 @@ function BatchSettings({ return ( - - + - - - {hasValidLocation(currentQuery, 'from') && - hasValidLocation(currentQuery, 'to') && - !!activeSearch ? ( - - ) : ( - - )} - - +
+ + + + {hasValidLocation(currentQuery, 'from') && + hasValidLocation(currentQuery, 'to') && + !!activeSearch ? ( + + ) : ( + + )} + + +
) diff --git a/lib/components/form/batch-styled.ts b/lib/components/form/batch-styled.ts index 4fe5d9da5..e1fc6d922 100644 --- a/lib/components/form/batch-styled.ts +++ b/lib/components/form/batch-styled.ts @@ -92,7 +92,7 @@ export const MainSettingsRow = styled.div` align-items: top; display: flex; flex-flow: wrap; - gap: 5px 0; + gap: 10px 0; justify-content: space-between; margin-bottom: 5px; diff --git a/lib/components/form/date-time-button.tsx b/lib/components/form/date-time-button.tsx deleted file mode 100644 index 26d554322..000000000 --- a/lib/components/form/date-time-button.tsx +++ /dev/null @@ -1,211 +0,0 @@ -import { - arrow, - FloatingFocusManager, - offset, - safePolygon, - shift, - useClick, - useDismiss, - useFloating, - useHover, - useInteractions, - useRole -} from '@floating-ui/react' -import { FormattedMessage } from 'react-intl' -import React, { HTMLAttributes, useCallback, useRef, useState } from 'react' -import styled from 'styled-components' - -import InvisibleA11yLabel from '../util/invisible-a11y-label' - -import { activeCss, boxShadowCss, buttonPixels } from './batch-styled' -import DateTimeModal from './date-time-modal' -import DateTimePreview from './date-time-preview' - -const ButtonWrapper = styled.span` - position: relative; - - & > button { - background-color: var(--main-base-color, rgba(0, 0, 0, 0.5)); - border-radius: 5px; - border: none; - color: var(--main-color, white); - cursor: pointer; - font-size: 12px; - height: ${buttonPixels}px; - padding: 4px 5px; - text-align: left; - transition: all 250ms cubic-bezier(0.27, 0.01, 0.38, 1.06); - white-space: nowrap; - width: 120px; - } - - & > button:hover, - & > button[aria-expanded='true'] { - ${activeCss} - ${boxShadowCss} - } - - /* Remove pointer events triggered by children of the button. - (they interfere with the floating-ui hover interaction handler.) */ - & > button > * { - pointer-events: none; - } -` - -const HoverPanel = styled.div` - min-width: min(400px, 100vw); - max-width: 100vw; - padding: 0 10px; - width: 33vw; - z-index: 100; -` - -// Ideally, import styles below from mode selector package. -const HoverInnerContainer = styled.div` - background: #fff; - border-radius: 4px; - padding: 0px 20px 10px; - ${boxShadowCss} -` - -const Arrow = styled.div` - background: #fff; - height: 10px; - margin-top: -5px; - position: absolute; - transform: rotate(-45deg); - width: 10px; - ${boxShadowCss} -` - -interface DateTimeButtonProps extends HTMLAttributes { - open: boolean - setOpen: (arg: boolean) => void -} - -/** - * Button and popup component for the date & time selector. - */ -export default function DateTimeButton({ - open, - setOpen, - style -}: DateTimeButtonProps): JSX.Element { - const arrowRef = useRef(null) - // State used to keep the popup open when triggered by keyboard while moving the mouse around. - const [openWithKeyboard, setOpenWithKeyboard] = useState(false) - const onOpenChange = useCallback( - (value) => { - setOpen(value) - if (!value) { - setOpenWithKeyboard(false) - } - }, - [setOpen, setOpenWithKeyboard] - ) - const { - context, - floating, - middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, - reference, - strategy, - x, - y - } = useFloating({ - middleware: [offset(8), shift(), arrow({ element: arrowRef })], - onOpenChange, - open - }) - - const { getFloatingProps, getReferenceProps } = useInteractions([ - useHover(context, { - // Enable hover only if no popup has been triggered via keyboard. - // (This keeps the keyboard-triggered popups open while moving mouse around.) - enabled: !openWithKeyboard, - handleClose: safePolygon({ - blockPointerEvents: false, - buffer: 0, - restMs: 500 - }) - }), - useClick(context), - useRole(context), - useDismiss(context) - ]) - - const interactionProps = getReferenceProps() - - // ARIA roles are added by the `useRole` hook. - // Remove the aria-controls, aria-expanded, and aria-haspopup props from the span, they will - // instead be passed to the button for keyboard/screen reader users to trigger the popup. - const { - 'aria-controls': ariaControls, - 'aria-expanded': ariaExpanded, - 'aria-haspopup': ariaHasPopup, - ...spanInteractionProps - } = interactionProps - - const handleButtonClick = useCallback( - (e) => { - setOpenWithKeyboard(true) - if (typeof interactionProps.onClick === 'function') { - interactionProps.onClick(e) - } - }, - [interactionProps] - ) - - return ( - - - {open && ( - - - - - - - - - )} - - ) -} diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts index 5033db42f..ddd576263 100644 --- a/lib/components/form/styled.ts +++ b/lib/components/form/styled.ts @@ -190,27 +190,7 @@ export const StyledSettingsSelectorPanel = styled(SettingsSelectorPanel)` } ` -export const StyledDateTimeSelector = styled(DateTimeSelector)` - margin: 0 -15px 15px; - - ${TripFormClasses.DateTimeSelector.DateTimeRow} { - margin: 20px 0px 15px; - input { - ${commonInputCss} - background-color: #fff; - border: 0; - border-bottom: 1px solid #000; - box-shadow: none; - outline: none; - text-align: center; - } - } - ${TripFormClasses.ModeButton.Button} { - ${commonButtonCss} - font-size: 14px; - height: 35px; - } -` +export const StyledDateTimeSelector = styled(DateTimeSelector)`` export const UnpaddedList = styled.ul` padding: 0; diff --git a/package.json b/package.json index 7b69da5c0..195ad6c70 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,6 @@ "@auth0/auth0-react": "^1.1.0", "@bugsnag/js": "^7.17.0", "@bugsnag/plugin-react": "^7.17.0", - "@floating-ui/react": "^0.19.2", "@opentripplanner/base-map": "4.0.0", "@opentripplanner/building-blocks": "2.0.0", "@opentripplanner/core-utils": "12.0.0", @@ -63,7 +62,7 @@ "@opentripplanner/transit-vehicle-overlay": "5.0.0", "@opentripplanner/transitive-overlay": "4.0.0", "@opentripplanner/trip-details": "6.0.0", - "@opentripplanner/trip-form": "4.0.0", + "@opentripplanner/trip-form": "/Users/amy.corson/git/otp-ui/packages/trip-form", "@opentripplanner/trip-viewer-overlay": "3.0.0", "@opentripplanner/vehicle-rental-overlay": "3.0.0", "@styled-icons/fa-regular": "^10.34.0", diff --git a/yarn.lock b/yarn.lock index 1a65ef7a9..d0ea2ea4e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2408,7 +2408,7 @@ resolved "https://registry.yarnpkg.com/@opentripplanner/building-blocks/-/building-blocks-2.0.0.tgz#8282c01dff7db5c7e809f6ea91cb52df559a2f9d" integrity sha512-N07rDaZL8fp552eI9/0j1udKjc0uOpvO0Wv1P19Ge0a4roques463MJgWJ026fbopRCi3uwbc/gYTlh4/ske9A== -"@opentripplanner/building-blocks@^1.0.3", "@opentripplanner/building-blocks@^1.2.2": +"@opentripplanner/building-blocks@^1.2.2": version "1.2.3" resolved "https://registry.yarnpkg.com/@opentripplanner/building-blocks/-/building-blocks-1.2.3.tgz#404e8f9038867d66d55f51adf8855b1326c51ed5" integrity sha512-I0AxiZrTZu+e7+av4u0tHW2ijqpxH0AkLHrhf75BHf1Ep2FOGxaul/v+8UT18mNYiM5eHNstOX3XiXaDjtCUaw== @@ -2698,14 +2698,12 @@ flat "^5.0.2" react-animate-height "^3.0.4" -"@opentripplanner/trip-form@4.0.0": +"@opentripplanner/trip-form@file:../otp-ui/packages/trip-form": version "4.0.0" - resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-4.0.0.tgz#27b36a0504e46cfda1cdf50c971b5cea03de8ae2" - integrity sha512-Cg8SlAVN8M+qoWpz8jAkwuqllIPgrL2PVewTPuDPsIQ8i5B7xo5KKE3TPo7cQUM+jE6WEshpvv0FIdMF+NAlNg== dependencies: "@floating-ui/react" "^0.19.2" - "@opentripplanner/building-blocks" "^1.0.3" - "@opentripplanner/core-utils" "^11.4.4" + "@opentripplanner/building-blocks" "^2.0.0" + "@opentripplanner/core-utils" "^12.0.0" "@styled-icons/bootstrap" "^10.34.0" "@styled-icons/boxicons-regular" "^10.38.0" "@styled-icons/fa-regular" "^10.37.0" From b5c6f6ccb8d9b82ea16050445d1a332f1d450a17 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Fri, 1 Nov 2024 10:35:17 -0500 Subject: [PATCH 2/4] Accomadate new d/t selector design --- .../form/advanced-settings-panel.tsx | 13 ----- lib/components/form/batch-settings.tsx | 12 ++-- lib/components/form/batch-styled.ts | 17 +++--- lib/components/form/date-time-modal.tsx | 39 ++++++------- lib/components/form/form.css | 58 +++++++------------ lib/components/form/styled.ts | 8 +-- lib/components/mobile/date-time-screen.tsx | 5 +- 7 files changed, 53 insertions(+), 99 deletions(-) diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx index 0e7a24029..27c18eec1 100644 --- a/lib/components/form/advanced-settings-panel.tsx +++ b/lib/components/form/advanced-settings-panel.tsx @@ -92,19 +92,6 @@ const ReturnToTripPlanButton = styled.button` const DtSelectorContainer = styled.div` margin: 2em 0; - - .date-time-modal { - padding: 0; - width: 100%; - - .main-panel { - margin: 0; - - button { - padding: 6px 0; - } - } - } ` const AdvancedSettingsPanel = ({ diff --git a/lib/components/form/batch-settings.tsx b/lib/components/form/batch-settings.tsx index 28661e99e..718236aa6 100644 --- a/lib/components/form/batch-settings.tsx +++ b/lib/components/form/batch-settings.tsx @@ -25,7 +25,8 @@ import { import { MainSettingsRow, ModeSelectorContainer, - PlanTripButton + PlanTripButton, + TripFormButtonContainer } from './batch-styled' import AdvancedSettingsButton from './advanced-settings-button' import DateTimeModal from './date-time-modal' @@ -70,9 +71,6 @@ function BatchSettings({ }: Props) { const intl = useIntl() - // Whether the date/time selector is open - const [dateTimeOpen, setDateTimeOpen] = useState(false) - // @ts-expect-error Context not typed const { ModeIcon } = useContext(ComponentContext) @@ -89,7 +87,7 @@ function BatchSettings({ const accentColor = getDarkenedBaseColor() return ( - + -
+ -
+ ) diff --git a/lib/components/form/batch-styled.ts b/lib/components/form/batch-styled.ts index e1fc6d922..8e91e85fd 100644 --- a/lib/components/form/batch-styled.ts +++ b/lib/components/form/batch-styled.ts @@ -44,6 +44,11 @@ export const Button = styled.button` ${buttonCss} ` +export const TripFormButtonContainer = styled.div` + display: flex; + gap: 2px; +` + export const PlanTripButton = styled(Button)` background-color: green; color: #ffffffdd; @@ -89,15 +94,7 @@ export const ModeSelectorContainer = styled.div<{ squashed?: boolean }>` ` export const MainSettingsRow = styled.div` - align-items: top; display: flex; - flex-flow: wrap; - gap: 10px 0; - justify-content: space-between; - margin-bottom: 5px; - - label { - /* Cancel bottom margin of bootstrap labels in mode selector. */ - margin-bottom: 0; - } + flex-direction: column; + gap: 10px; ` diff --git a/lib/components/form/date-time-modal.tsx b/lib/components/form/date-time-modal.tsx index e9f31407b..421562574 100644 --- a/lib/components/form/date-time-modal.tsx +++ b/lib/components/form/date-time-modal.tsx @@ -1,4 +1,5 @@ import { connect } from 'react-redux' +import { DateTimeSelector } from '@opentripplanner/trip-form' import coreUtils from '@opentripplanner/core-utils' import React, { useCallback } from 'react' @@ -7,8 +8,6 @@ import * as narrativeActions from '../../actions/narrative' import { AppConfig } from '../../util/config-types' import { AppReduxState, FilterType, SortType } from '../../util/state-types' -import { StyledDateTimeSelector } from './styled' - type Props = { config: AppConfig date: string @@ -66,26 +65,22 @@ function DateTimeModal({ [setQueryParam, updateItineraryFilter, sort, syncSortWithDepartArrive] ) return ( -
-
- `. - // These props are not relevant in modern browsers, - // where `` already - // formats the time|date according to the OS settings. - // eslint-disable-next-line react/jsx-sort-props - timeFormatLegacy={timeFormatLegacy} - timeZone={homeTimezone} - /> -
-
+ `. + // These props are not relevant in modern browsers, + // where `` already + // formats the time|date according to the OS settings. + // eslint-disable-next-line react/jsx-sort-props + timeFormatLegacy={timeFormatLegacy} + timeZone={homeTimezone} + /> ) } diff --git a/lib/components/form/form.css b/lib/components/form/form.css index 9f694e155..0d77b7d56 100644 --- a/lib/components/form/form.css +++ b/lib/components/form/form.css @@ -26,16 +26,6 @@ z-index: 100; } -/* Date-Time Modal */ - -.otp .date-time-modal .button-row { - margin-bottom: 20px; -} - -.otp .date-time-modal .button-row .selected { - background-color: #ccc; -} - /* Date/Time selectors */ /* Remove up/down arrows on date/time input (to save on width) */ @@ -53,34 +43,6 @@ -webkit-appearance: none; } -.otp .date-time-selector .col-xs-4, -.otp .date-time-selector .col-xs-6 { - padding-left: 5px; - padding-right: 5px; -} - -.otp .date-time-selector .date-option-button { - width: 100%; - font-size: 14px; -} - -.otp .date-time-selector .date-selector, -.otp .date-time-selector .time-selector { - font-size: 16px; - width: 100%; - -webkit-appearance: textfield; - -moz-appearance: textfield; - appearance: textfield; - box-shadow: none; - text-align: center; -} - -.otp.mobile .date-time-selector .date-selector, -.otp.mobile .date-time-selector .time-selector { - font-size: 20px; - padding-bottom: 10px; -} - /* switch button */ .otp .switch-button .hidden { display: inline-block; @@ -188,6 +150,26 @@ outline: none; } +.otp .main-settings-row { + container-type: inline-size; + container-name: main-settings-row; + display: flex; +} + + + +@container main-settings-row (max-width: 370px) { + + .mode-selector-container { + justify-content: end !important; + } + + .otp .metro-mode-selector { + display: none; + } + +} + /* General settings */ .otp.mobile .dropdown-selector { diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts index ddd576263..69b6b78ad 100644 --- a/lib/components/form/styled.ts +++ b/lib/components/form/styled.ts @@ -1,11 +1,11 @@ +import { Input, MenuItemLi } from '@opentripplanner/location-field/lib/styled' + import { blue, grey } from '../util/colors' +import { prefersReducedMotion } from '../util/prefersReducedMotion' import { - DateTimeSelector, SettingsSelectorPanel, Styled as TripFormClasses } from '@opentripplanner/trip-form' -import { Input, MenuItemLi } from '@opentripplanner/location-field/lib/styled' -import { prefersReducedMotion } from '../util/prefersReducedMotion' import LocationField from '@opentripplanner/location-field' import styled, { css } from 'styled-components' @@ -190,8 +190,6 @@ export const StyledSettingsSelectorPanel = styled(SettingsSelectorPanel)` } ` -export const StyledDateTimeSelector = styled(DateTimeSelector)`` - export const UnpaddedList = styled.ul` padding: 0; ` diff --git a/lib/components/mobile/date-time-screen.tsx b/lib/components/mobile/date-time-screen.tsx index 3754c6d5b..b0254cbee 100644 --- a/lib/components/mobile/date-time-screen.tsx +++ b/lib/components/mobile/date-time-screen.tsx @@ -26,10 +26,7 @@ const MobileDateTimeScreen = ({ setMobileScreen }: Props) => { showBackButton />
-
- -
- +
Date: Fri, 1 Nov 2024 10:39:04 -0500 Subject: [PATCH 3/4] remove spacedOut configuration --- lib/components/form/batch-settings.tsx | 9 +++------ lib/components/form/batch-styled.ts | 9 +-------- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/lib/components/form/batch-settings.tsx b/lib/components/form/batch-settings.tsx index 718236aa6..29fa385b2 100644 --- a/lib/components/form/batch-settings.tsx +++ b/lib/components/form/batch-settings.tsx @@ -42,7 +42,6 @@ type Props = { openAdvancedSettings: () => void routingQuery: any setQueryParam: (evt: any) => void - spacedOutModeSelector?: boolean } export function setModeButtonEnabled(enabledKeys: string[]) { @@ -66,8 +65,7 @@ function BatchSettings({ onPlanTripClick, openAdvancedSettings, routingQuery, - setQueryParam, - spacedOutModeSelector + setQueryParam }: Props) { const intl = useIntl() @@ -89,7 +87,7 @@ function BatchSettings({ return ( - + { modes?.initialState?.enabledModeButtons || {}, fillModeIcons: state.otp.config.itinerary?.fillModeIcons, - modeButtonOptions: modes?.modeButtons || [], - spacedOutModeSelector: modes?.spacedOut + modeButtonOptions: modes?.modeButtons || [] } } diff --git a/lib/components/form/batch-styled.ts b/lib/components/form/batch-styled.ts index 8e91e85fd..325219567 100644 --- a/lib/components/form/batch-styled.ts +++ b/lib/components/form/batch-styled.ts @@ -66,7 +66,7 @@ export const PlanTripButton = styled(Button)` } ` -export const ModeSelectorContainer = styled.div<{ squashed?: boolean }>` +export const ModeSelectorContainer = styled.div` align-items: flex-start; display: flex; float: right; @@ -74,14 +74,7 @@ export const ModeSelectorContainer = styled.div<{ squashed?: boolean }>` width: 100%; ${PlanTripButton} { - border-bottom-left-radius: ${(props) => (props.squashed ? 0 : 'invalid')}; - border-top-left-radius: ${(props) => (props.squashed ? 0 : 'invalid')}; margin-top: 0px; - margin-left: ${(props) => (props.squashed ? 0 : '3px')}; - } - label:last-of-type { - border-bottom-right-radius: ${(props) => (props.squashed ? 0 : 'invalid')}; - border-top-right-radius: ${(props) => (props.squashed ? 0 : 'invalid')}; } fieldset { gap: 0 2px; From 612123a96005fc3ff17de9f3d2aa924440211f31 Mon Sep 17 00:00:00 2001 From: miles-grant-ibigroup Date: Mon, 18 Nov 2024 12:43:48 -0500 Subject: [PATCH 4/4] make it work for people not named amy --- package.json | 2 +- yarn.lock | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 195ad6c70..086acb9b0 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "@opentripplanner/transit-vehicle-overlay": "5.0.0", "@opentripplanner/transitive-overlay": "4.0.0", "@opentripplanner/trip-details": "6.0.0", - "@opentripplanner/trip-form": "/Users/amy.corson/git/otp-ui/packages/trip-form", + "@opentripplanner/trip-form": "../otp-ui/packages/trip-form", "@opentripplanner/trip-viewer-overlay": "3.0.0", "@opentripplanner/vehicle-rental-overlay": "3.0.0", "@styled-icons/fa-regular": "^10.34.0", diff --git a/yarn.lock b/yarn.lock index d0ea2ea4e..77b87be07 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2698,8 +2698,8 @@ flat "^5.0.2" react-animate-height "^3.0.4" -"@opentripplanner/trip-form@file:../otp-ui/packages/trip-form": - version "4.0.0" +"@opentripplanner/trip-form@../otp-ui/packages/trip-form": + version "4.1.0" dependencies: "@floating-ui/react" "^0.19.2" "@opentripplanner/building-blocks" "^2.0.0"