Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create Global Trip settings and variables #1240

Merged
merged 6 commits into from
Jul 3, 2024
Merged

Create Global Trip settings and variables #1240

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5a359ff
Create toggle and global settings
amy-corson-ibigroup Jun 19, 2024
96555b8
fix passing accent color to AdvancedModeSubsettingsContainer
amy-corson-ibigroup Jun 19, 2024
8a65b46
Merge branch 'master-trip-form-update' into connected-toggle-checkboxes
amy-corson-ibigroup Jun 21, 2024
4f3ccf0
remove unnecessary comment
amy-corson-ibigroup Jun 21, 2024
8d75fb9
Make subheaders invisible and address feedback
amy-corson-ibigroup Jul 1, 2024
077876d
adjust form for if there are no processedGlobalSettings
amy-corson-ibigroup Jul 1, 2024
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
59 changes: 40 additions & 19 deletions lib/components/form/advanced-settings-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
import * as apiActions from '../../actions/api'
import * as formActions from '../../actions/form'
import {
addSettingsToButton,
AdvancedModeSubsettingsContainer,
ModeSettingRenderer,
populateSettingWithValue
} from '@opentripplanner/trip-form'
import { AppReduxState } from '../../util/state-types'
import { blue, getBaseColor } from '../util/colors'

import { blue, getBaseColor } from '../util/colors'
import { Close } from '@styled-icons/fa-solid'

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sort imports

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried to sort these and literally couldn't get eslint to be happy, so good luck

import { ComponentContext } from '../../util/contexts'

import { connect } from 'react-redux'
import { decodeQueryParams, DelimitedArrayParam } from 'serialize-query-params'
import { FormattedMessage, useIntl } from 'react-intl'
Expand All @@ -24,9 +20,14 @@ import {
ModeSettingValues
} from '@opentripplanner/types'

import * as apiActions from '../../actions/api'
import * as formActions from '../../actions/form'
import { AppReduxState } from '../../util/state-types'
import { ComponentContext } from '../../util/contexts'
import PageTitle from '../util/page-title'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sort imports


import React, { RefObject, useContext } from 'react'
import styled from 'styled-components'

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sort imports

import {
addCustomSettingLabels,
Expand All @@ -37,8 +38,7 @@ import {
setModeButton
} from './util'
import { setModeButtonEnabled } from './batch-settings'

import styled from 'styled-components'
import { styledCheckboxCss } from './styled'

const PanelOverlay = styled.div`
background-color: #fff;
Expand All @@ -52,6 +52,14 @@ const PanelOverlay = styled.div`
overflow-y: scroll;
`

const GlobalSettingsContainer = styled.div`
display: flex;
flex-direction: column;
gap: 10px;

${styledCheckboxCss}
`

const CloseButton = styled.button`
background: transparent;
border: none;
Expand Down Expand Up @@ -100,14 +108,29 @@ const AdvancedSettingsPanel = ({
// @ts-expect-error Context not typed
const { ModeIcon } = useContext(ComponentContext)

const processedModeSettings = modeSettingDefinitions.map(
pipe(
populateSettingWithIcon(ModeIcon),
populateSettingWithValue(modeSettingValues),
addCustomSettingLabels(intl)
const processSettings = (settings: any) =>
settings.map(
amy-corson-ibigroup marked this conversation as resolved.
Show resolved Hide resolved
pipe(
populateSettingWithIcon(ModeIcon),
populateSettingWithValue(modeSettingValues),
addCustomSettingLabels(intl)
)
)

const globalSettings = modeSettingDefinitions.filter((x) => !x.applicableMode)
const processedGlobalSettings = processSettings(globalSettings)

const globalSettingsComponents = processedGlobalSettings.map(
(setting: any) => (
<ModeSettingRenderer
amy-corson-ibigroup marked this conversation as resolved.
Show resolved Hide resolved
key={setting.key}
onChange={onSettingsUpdate(setQueryParam)}
setting={setting}
/>
)
)

const processedModeSettings = processSettings(modeSettingDefinitions)
const processedModeButtons = modeButtonOptions.map(
pipe(
addModeButtonIcon(ModeIcon),
Expand Down Expand Up @@ -135,15 +158,13 @@ const AdvancedSettingsPanel = ({
<Subheader>
<FormattedMessage id="components.BatchSearchScreen.tripOptions" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's hide this header if there are no global settings.
Also: Do we need these headers? I don't think they add much value and they take up vertical space.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left them invisible for screenreaders since I think they're helpful context, and so some configurations could have access to them! I took them out, let me know what you think? I kinda miss them but I see what you mean.

</Subheader>
{/**
* Trip options (walk speed, walk reluctance, accessible routing) go here
*/}

<GlobalSettingsContainer>
{globalSettingsComponents}
</GlobalSettingsContainer>
<Subheader>
<FormattedMessage id="components.BatchSearchScreen.modeOptions" />
</Subheader>
{/**
* AdvancedModeSubsettingsContainer (import from Otp-ui) goes here
*/}
<AdvancedModeSubsettingsContainer
accentColor={accentColor}
fillModeIcons
Expand Down
67 changes: 67 additions & 0 deletions lib/components/form/styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,3 +287,70 @@ export const TransitionStyles = styled.div`
${transitionMixin}
}
`

const toggleTransition = css`
transition: all 150ms ease-in;
`

export const styledCheckboxCss = css`
& > div {
width: 100%;
margin-left: 0;
}
input[type='checkbox'] + label {
align-items: center;
display: flex;
position: relative;
justify-content: space-between;
width: 100%;

&::after {
content: '';
position: relative;
width: 33px;
height: 22px;
background-color: ${grey[600]};
border-radius: 20px;
${toggleTransition};
cursor: pointer;
}

&::before {
content: '';
position: absolute;
width: 18px;
height: 18px;
background-color: white;
border-radius: 100%;
right: 13px;
z-index: 99;
${toggleTransition};
cursor: pointer;
}
}

input[type='checkbox'] {
clip: rect(0, 0, 0, 0);
height: 0;
overflow: hidden;
position: absolute;
width: 0;

&:checked + label {
&::after {
background-color: ${blue[700]};
${toggleTransition};
}

&::before {
right: 2px;
${toggleTransition};
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}
}

&:focus-visible + label {
outline: 1px solid blue;
}
}
`
Loading