diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx
index 76f5d7e24..c2b09213e 100644
--- a/lib/components/form/advanced-settings-panel.tsx
+++ b/lib/components/form/advanced-settings-panel.tsx
@@ -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'
-import { ComponentContext } from '../../util/contexts'
-
import { connect } from 'react-redux'
import { decodeQueryParams, DelimitedArrayParam } from 'serialize-query-params'
import { FormattedMessage, useIntl } from 'react-intl'
@@ -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'
import React, { RefObject, useContext } from 'react'
+import styled from 'styled-components'
import {
addCustomSettingLabels,
@@ -36,9 +37,11 @@ import {
populateSettingWithIcon,
setModeButton
} from './util'
-import { setModeButtonEnabled } from './batch-settings'
-import styled from 'styled-components'
+import { invisibleCss } from '@opentripplanner/trip-form/lib/MetroModeSelector'
+
+import { setModeButtonEnabled } from './batch-settings'
+import { styledCheckboxCss } from './styled'
const PanelOverlay = styled.div`
background-color: #fff;
@@ -52,6 +55,15 @@ const PanelOverlay = styled.div`
overflow-y: scroll;
`
+const GlobalSettingsContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ margin-bottom: 2em;
+
+ ${styledCheckboxCss}
+`
+
const CloseButton = styled.button`
background: transparent;
border: none;
@@ -61,13 +73,11 @@ const HeaderContainer = styled.div`
align-items: center;
display: flex;
justify-content: space-between;
+ margin-bottom: 2em;
`
const Subheader = styled.h2`
- display: block;
- font-size: 18px;
- font-weight: 700;
- margin: 1em 0;
+ ${invisibleCss}
`
const baseColor = getBaseColor()
const accentColor = baseColor || blue[900]
@@ -100,14 +110,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: ModeSetting[]) =>
+ settings.map(
+ pipe(
+ populateSettingWithIcon(ModeIcon),
+ populateSettingWithValue(modeSettingValues),
+ addCustomSettingLabels(intl)
+ )
+ )
+
+ const globalSettings = modeSettingDefinitions.filter((x) => !x.applicableMode)
+ const processedGlobalSettings = processSettings(globalSettings)
+
+ const globalSettingsComponents = processedGlobalSettings.map(
+ (setting: ModeSetting) => (
+
)
)
+ const processedModeSettings = processSettings(modeSettingDefinitions)
const processedModeButtons = modeButtonOptions.map(
pipe(
addModeButtonIcon(ModeIcon),
@@ -132,18 +157,19 @@ const AdvancedSettingsPanel = ({
{/**
* Date time selector goes here
*/}
-
-
-
- {/**
- * Trip options (walk speed, walk reluctance, accessible routing) go here
- */}
+ {processedGlobalSettings.length > 0 && (
+ <>
+
+
+
+
+ {globalSettingsComponents}
+
+ >
+ )}
- {/**
- * AdvancedModeSubsettingsContainer (import from Otp-ui) goes here
- */}
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: ${baseColor || 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;
+ }
+ }
+`