From c50d7aab1ea9488b66c7e3fe07f78a6422a16611 Mon Sep 17 00:00:00 2001 From: Jason Lampel Date: Thu, 18 Mar 2021 16:11:54 -0500 Subject: [PATCH 1/8] Omnibox search results: use light secondary color, remove icons --- src/components/home/OmniboxResult.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/components/home/OmniboxResult.tsx b/src/components/home/OmniboxResult.tsx index 9a7db7e1..0e00119e 100644 --- a/src/components/home/OmniboxResult.tsx +++ b/src/components/home/OmniboxResult.tsx @@ -1,7 +1,6 @@ import React, { FC } from 'react' import { createStyles, makeStyles, Theme } from '@material-ui/core/styles' import { Typography, Box } from '@material-ui/core' -import { FaStreetView } from 'react-icons/fa' import { PreppedAutocompleteGroup } from './types' @@ -16,17 +15,10 @@ const useStyles = makeStyles((theme: Theme) => fontSize: '0.8rem', }, resultHeading: { - alignItems: 'center', - color: theme.palette.secondary.main, - display: 'flex', + color: theme.palette.secondary.light, fontSize: '1em', lineHeight: 1, marginTop: 4, - '& svg': { - color: theme.palette.secondary.main, - flexShrink: 0, // otherwise squished next to super-long headings - marginRight: 3, - }, }, // The footer details: { @@ -72,7 +64,6 @@ export const OmniboxResult: FC<{ data: PreppedAutocompleteGroup }> = ( return ( - {data.location} From 184276d32d0d2d33f6027322f6d5f46a19c80f63 Mon Sep 17 00:00:00 2001 From: Jason Lampel Date: Thu, 18 Mar 2021 16:43:41 -0500 Subject: [PATCH 2/8] Table: add Audio column (closes #192), reusabilitize Video stuff --- src/components/results/Cells.tsx | 9 ++++----- ...eoColumnFilter.tsx => MediaColumnFilter.tsx} | 6 +++--- src/components/results/ResultsModal.tsx | 1 + src/components/results/config.tsx | 17 ++++++++++++++--- src/components/results/types.ts | 8 +++++++- 5 files changed, 29 insertions(+), 12 deletions(-) rename src/components/results/{VideoColumnFilter.tsx => MediaColumnFilter.tsx} (87%) diff --git a/src/components/results/Cells.tsx b/src/components/results/Cells.tsx index 111212a4..b302ac23 100644 --- a/src/components/results/Cells.tsx +++ b/src/components/results/Cells.tsx @@ -10,7 +10,7 @@ import { GoCircleSlash } from 'react-icons/go' import { LegendSwatch } from 'components/legend' import { InstanceLevelSchema } from 'components/context/types' -import { CellProps } from './types' +import { CellProps, MediaColumnCellProps } from './types' const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -20,14 +20,13 @@ const useStyles = makeStyles((theme: Theme) => }) ) -export const VideoColumnCell: FC = (props) => { +export const MediaColumnCell: FC = (props) => { const classes = useStyles() - const { data } = props - const { Video: video } = data + const { data, columnName } = props return (
- {video ? : } + {data[columnName] ? : }
) } diff --git a/src/components/results/VideoColumnFilter.tsx b/src/components/results/MediaColumnFilter.tsx similarity index 87% rename from src/components/results/VideoColumnFilter.tsx rename to src/components/results/MediaColumnFilter.tsx index 2c8a325f..5fcb04ff 100644 --- a/src/components/results/VideoColumnFilter.tsx +++ b/src/components/results/MediaColumnFilter.tsx @@ -17,10 +17,10 @@ const useStyles = makeStyles((theme: Theme) => // CRED: (partial anyway): // https://github.com/mbrn/material-table/issues/671#issuecomment-651743451 -export const VideoColumnFilter: FC = (props) => { +export const MediaColumnFilter: FC = (props) => { const classes = useStyles() const { columnDef, onFilterChanged } = props - const { tableData } = columnDef + const { tableData, field } = columnDef const { filterValue } = tableData const checked = filterValue === CHECK_STRING @@ -36,7 +36,7 @@ export const VideoColumnFilter: FC = (props) => { } diff --git a/src/components/results/ResultsModal.tsx b/src/components/results/ResultsModal.tsx index 3089446e..cb0246ce 100644 --- a/src/components/results/ResultsModal.tsx +++ b/src/components/results/ResultsModal.tsx @@ -14,6 +14,7 @@ import { whittleLangFeats } from './utils' // CRED: https://stackoverflow.com/a/51808262/1048518 const fields: Array> = [ 'Additional Neighborhoods', + 'Audio', 'countryImg', 'Country', 'Description', diff --git a/src/components/results/config.tsx b/src/components/results/config.tsx index 0d84699d..26a32a76 100644 --- a/src/components/results/config.tsx +++ b/src/components/results/config.tsx @@ -22,7 +22,7 @@ import * as Types from './types' import * as utils from './utils' import * as Cells from './Cells' -import { VideoColumnFilter } from './VideoColumnFilter' +import { MediaColumnFilter } from './MediaColumnFilter' import { LocalColumnTitle } from './LocalColumnTitle' const COMM_STATUS_LOOKUP = { @@ -278,9 +278,20 @@ export const columns = [ field: 'Video', ...commonColProps, export: false, - filterComponent: VideoColumnFilter, + filterComponent: MediaColumnFilter, headerStyle: { whiteSpace: 'nowrap' }, - render: (data) => , + render: (data) => , + searchable: false, + disableClick: true, + }, + { + title: 'Audio', + field: 'Audio', + ...commonColProps, + export: false, + filterComponent: MediaColumnFilter, + headerStyle: { whiteSpace: 'nowrap' }, + render: (data) => , searchable: false, disableClick: true, }, diff --git a/src/components/results/types.ts b/src/components/results/types.ts index 0c238eea..b2639c82 100644 --- a/src/components/results/types.ts +++ b/src/components/results/types.ts @@ -92,4 +92,10 @@ export type RecordDescriptionProps = { descriptionID: string } -export type CellProps = { data: InstanceLevelSchema } +export type CellProps = { + data: InstanceLevelSchema +} + +export type MediaColumnCellProps = CellProps & { + columnName: keyof InstanceLevelSchema +} From 802d78b4cdef4e9e6d1651a8b588f210b4c24939 Mon Sep 17 00:00:00 2001 From: Jason Lampel Date: Thu, 18 Mar 2021 17:56:12 -0500 Subject: [PATCH 3/8] Language Profile intro: include profile description (closes #193) --- src/components/context/types.ts | 9 ++++---- src/components/details/DetailedIntro.tsx | 12 +++++++++- src/components/explore/LangProfileDescrip.tsx | 23 +++++++++++++++++++ src/components/explore/index.ts | 1 + 4 files changed, 39 insertions(+), 6 deletions(-) create mode 100644 src/components/explore/LangProfileDescrip.tsx diff --git a/src/components/context/types.ts b/src/components/context/types.ts index 964ae06e..f45c444a 100644 --- a/src/components/context/types.ts +++ b/src/components/context/types.ts @@ -59,6 +59,8 @@ export type LangLevelOptional = CensusFields & addlNeighborhoods: string[] // suuuper shakes mcgee Audio: string descriptionID: string + // Used in "Language Profile" (aka Pre-Details), not Details + langProfileDescripID: string Glottocode: string Macrocommunity: string[] Neighborhood: string[] @@ -101,13 +103,10 @@ export type InitialMapToolsState = { } export type MapToolsAction = + | { type: 'CLEAR_CENSUS_FIELD' } | { type: 'SET_BOUNDARIES_VISIBLE'; payload: boolean } + | { type: 'SET_CENSUS_FIELD'; payload: CensusFieldPayload } | { type: 'SET_GEOLOC_ACTIVE'; payload: boolean } - | { type: 'CLEAR_CENSUS_FIELD' } - | { - type: 'SET_CENSUS_FIELD' - payload: CensusFieldPayload - } export type MapToolsDispatch = React.Dispatch diff --git a/src/components/details/DetailedIntro.tsx b/src/components/details/DetailedIntro.tsx index 97fc5cd9..9de33baa 100644 --- a/src/components/details/DetailedIntro.tsx +++ b/src/components/details/DetailedIntro.tsx @@ -1,11 +1,14 @@ import React, { FC } from 'react' import { createStyles, makeStyles, Theme } from '@material-ui/core/styles' +import { Route } from 'react-router-dom' import { Media } from 'components/media' import { MoreLikeThis } from 'components/details' import { CensusPopover } from 'components/explore/CensusPopover' import { StatsAndMeta } from 'components/explore/StatsAndMeta' import { FancyHorizRule } from 'components/generic' +import { LangProfileDescrip } from 'components/explore' +import { routes } from 'components/config/api' import { LangOrEndoIntro } from './LangOrEndoIntro' import { DetailedIntroProps } from './types' import { ReadMoreLangDescrip } from './ReadMoreLangDescrip' @@ -18,7 +21,7 @@ const useStyles = makeStyles((theme: Theme) => }) ) -// The intro section of pre-Details and Details views +// The intro section of pre-Details ("Language Profile") and Details views export const DetailedIntro: FC = (props) => { const { data, shareNoun, isInstance, langDescripID } = props const classes = useStyles() @@ -32,6 +35,13 @@ export const DetailedIntro: FC = (props) => { {langDescripID && } + + {data.langProfileDescripID && ( + + )} + ) diff --git a/src/components/explore/LangProfileDescrip.tsx b/src/components/explore/LangProfileDescrip.tsx new file mode 100644 index 00000000..2b63df35 --- /dev/null +++ b/src/components/explore/LangProfileDescrip.tsx @@ -0,0 +1,23 @@ +import React, { FC } from 'react' + +import { ReadMore } from 'components/generic' +import { useAirtable } from './hooks' + +export const LangProfileDescrip: FC<{ langProfileDescripID: string }> = ( + props +) => { + const { langProfileDescripID } = props + + const { data, error, isLoading } = useAirtable<{ Description: string }>( + // TODO: TS-ify the names of all tables + 'Language Profiles', + { + // TODO: TS-ify the field names for all tables + filterByFormula: `{id} = '${langProfileDescripID}'`, + } + ) + + if (isLoading || error || !data.length) return null + + return +} diff --git a/src/components/explore/index.ts b/src/components/explore/index.ts index 47cd6803..79a2f30a 100644 --- a/src/components/explore/index.ts +++ b/src/components/explore/index.ts @@ -3,6 +3,7 @@ export * from './CardList' export * from './CustomCard' export * from './Explore' export * from './LangCardsList' +export * from './LangProfileDescrip' export * from './MidLevelExplore' export * from './config' From 79ff60c037a0ca917e0a4c60f7f753163c3a4a00 Mon Sep 17 00:00:00 2001 From: Jason Lampel Date: Thu, 18 Mar 2021 19:27:49 -0500 Subject: [PATCH 4/8] Small layout and style improvements to Cards and Read More --- src/components/details/DetailedIntro.tsx | 5 +++-- src/components/explore/CustomCard.tsx | 3 +-- src/components/explore/LangProfileDescrip.tsx | 6 ++---- src/components/explore/MidLevelExplore.tsx | 5 ----- src/components/explore/types.ts | 8 ++------ src/components/generic/ReadMore.tsx | 3 ++- src/components/generic/ToggleableSection.tsx | 3 +++ 7 files changed, 13 insertions(+), 20 deletions(-) diff --git a/src/components/details/DetailedIntro.tsx b/src/components/details/DetailedIntro.tsx index 9de33baa..d01eb99f 100644 --- a/src/components/details/DetailedIntro.tsx +++ b/src/components/details/DetailedIntro.tsx @@ -6,7 +6,6 @@ import { Media } from 'components/media' import { MoreLikeThis } from 'components/details' import { CensusPopover } from 'components/explore/CensusPopover' import { StatsAndMeta } from 'components/explore/StatsAndMeta' -import { FancyHorizRule } from 'components/generic' import { LangProfileDescrip } from 'components/explore' import { routes } from 'components/config/api' import { LangOrEndoIntro } from './LangOrEndoIntro' @@ -17,6 +16,9 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ root: { textAlign: 'center', + paddingBottom: '0.75rem', + marginBottom: '1rem', + borderBottom: `solid 1px ${theme.palette.divider}`, }, }) ) @@ -42,7 +44,6 @@ export const DetailedIntro: FC = (props) => { /> )} - ) } diff --git a/src/components/explore/CustomCard.tsx b/src/components/explore/CustomCard.tsx index 7ce96d6a..0a259f3c 100644 --- a/src/components/explore/CustomCard.tsx +++ b/src/components/explore/CustomCard.tsx @@ -93,7 +93,7 @@ export const GlottoIsoFooter: FC = (props) => { } export const CustomCard: FC = (props) => { - const { title, url, uniqueInstances, intro, icon, footer, footerIcon } = props + const { title, url, uniqueInstances, intro, icon, footer } = props const classes = useStyles() return ( @@ -126,7 +126,6 @@ export const CustomCard: FC = (props) => { variant="caption" className={classes.footer} > - {footerIcon} {footer || (uniqueInstances !== undefined && utils.prettyTruncate(uniqueInstances as string[]))} diff --git a/src/components/explore/LangProfileDescrip.tsx b/src/components/explore/LangProfileDescrip.tsx index 2b63df35..c16c6e99 100644 --- a/src/components/explore/LangProfileDescrip.tsx +++ b/src/components/explore/LangProfileDescrip.tsx @@ -11,10 +11,8 @@ export const LangProfileDescrip: FC<{ langProfileDescripID: string }> = ( const { data, error, isLoading } = useAirtable<{ Description: string }>( // TODO: TS-ify the names of all tables 'Language Profiles', - { - // TODO: TS-ify the field names for all tables - filterByFormula: `{id} = '${langProfileDescripID}'`, - } + // TODO: TS-ify the field names for all tables + { filterByFormula: `{id} = '${langProfileDescripID}'` } ) if (isLoading || error || !data.length) return null diff --git a/src/components/explore/MidLevelExplore.tsx b/src/components/explore/MidLevelExplore.tsx index 0f4e104c..965516c9 100644 --- a/src/components/explore/MidLevelExplore.tsx +++ b/src/components/explore/MidLevelExplore.tsx @@ -5,7 +5,6 @@ import { Route, Link as RouterLink, } from 'react-router-dom' -import { BiMapPin } from 'react-icons/bi' import { FlagFromHook } from 'components/generic/icons-and-swatches' import { SwatchOnly } from 'components/legend' @@ -87,9 +86,6 @@ export const MidLevelExplore: FC = (props) => { ) } - const footerIcon = (value !== undefined || tableName === 'Language') && ( - - ) const { definition, plural } = landingData[0] || {} let primaryData @@ -131,7 +127,6 @@ export const MidLevelExplore: FC = (props) => { key={nameOrLang} intro={value || field === 'Language' ? nameOrLang : ''} title={tableName === 'Language' ? row.Endonym : nameOrLang} - footerIcon={footerIcon} uniqueInstances={uniqueInstances} url={`${url}/${nameOrLang}`} // TODO: use and refactor SwatchOrFlagOrIcon for icon prop diff --git a/src/components/explore/types.ts b/src/components/explore/types.ts index 099dbb3e..1261c958 100644 --- a/src/components/explore/types.ts +++ b/src/components/explore/types.ts @@ -13,7 +13,7 @@ export type ReactQueryOptions = { } // TODO: try to reuse some of these, they're pretty common in sev. components -type CategoryProps = { +export type CustomCardProps = { title: string uniqueInstances?: unknown[] url: string @@ -22,10 +22,6 @@ type CategoryProps = { intro?: string } -export type CustomCardProps = CategoryProps & { - footerIcon?: React.ReactNode -} - export type CategoryConfig = { name: keyof InstanceLevelSchema definition?: string @@ -41,7 +37,7 @@ export type RouteMatch = { language?: string } -export type CardConfig = CategoryProps & { +export type CardConfig = CustomCardProps & { footer: string to: string } diff --git a/src/components/generic/ReadMore.tsx b/src/components/generic/ReadMore.tsx index 93264039..c72efe89 100644 --- a/src/components/generic/ReadMore.tsx +++ b/src/components/generic/ReadMore.tsx @@ -50,7 +50,8 @@ const useStyles = makeStyles((theme: Theme) => description: { textAlign: 'left', fontSize: (props: ReadMoreStyles) => props.fontSize, - marginBottom: '0.25rem', + marginBottom: '0.75rem', + lineHeight: 1.75, }, }) ) diff --git a/src/components/generic/ToggleableSection.tsx b/src/components/generic/ToggleableSection.tsx index d9102046..52f8b58c 100644 --- a/src/components/generic/ToggleableSection.tsx +++ b/src/components/generic/ToggleableSection.tsx @@ -25,6 +25,9 @@ const useStyles = makeStyles(() => }) ) +// TODO: consider ellipsizing with `line-clamp`: +// https://css-tricks.com/multiline-truncated-text-with-show-more-button/ +// https://css-tricks.com/almanac/properties/l/line-clamp/ export const ToggleableSection: FC = (props) => { const { children, show, initialHeight = 0 } = props const classes = useStyles({ show, initialHeight }) From 4f370fac2ae8c1dbe2a1f580813e0c3f0a75d566 Mon Sep 17 00:00:00 2001 From: Jason Lampel Date: Thu, 18 Mar 2021 21:39:25 -0500 Subject: [PATCH 5/8] Map 2D/3D: don't force 3D, let user toggle (closes #194) --- src/components/details/NeighborhoodList.tsx | 1 + src/components/map/Map.tsx | 47 +++++++++++++++------ src/components/map/MapCtrlBtns.tsx | 47 ++++++++++----------- src/components/map/hooks.tsx | 3 +- src/components/map/types.ts | 4 +- src/components/map/utils.ts | 5 ++- 6 files changed, 63 insertions(+), 44 deletions(-) diff --git a/src/components/details/NeighborhoodList.tsx b/src/components/details/NeighborhoodList.tsx index 961f7bef..f2facd20 100644 --- a/src/components/details/NeighborhoodList.tsx +++ b/src/components/details/NeighborhoodList.tsx @@ -110,6 +110,7 @@ export const NeighborhoodList: FC = (props) => { let url // TODO: de-shabbify, wire up w/Town const footer = + // TODO: use Routes, dude if (!isInstance) url = `/details/${instanceIDs ? instanceIDs[i] : 999999}` else url = `/Explore/${locRouteName}/${loc}` diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index e6df3d42..9c1d4433 100644 --- a/src/components/map/Map.tsx +++ b/src/components/map/Map.tsx @@ -53,6 +53,7 @@ export const Map: FC = (props) => { // const symbLabelState = contexts.useSymbAndLabelState() // const { activeSymbGroupID } = symbLabelState const [beforeId, setBeforeId] = useState('background') + const [isMapTilted, setIsMapTilted] = useState(false) const [ geocodeMarker, @@ -70,13 +71,32 @@ export const Map: FC = (props) => { clickedBoundary, setClickedBoundary, ] = useState() - const shouldFlyHome = useZoomToLangFeatsExtent(panelOpen, map) + const shouldFlyHome = useZoomToLangFeatsExtent(panelOpen, isMapTilted, map) // TODO: mobile const boundaryPopup = useBoundaryPopup(panelOpen, clickedBoundary, map) // TODO: rm if not needed for hover/popup stuff // const symbCache = cache.getQueryData([activeSymbGroupID, 'legend']) || [] // const interactiveLayerIds = symbCache + useEffect((): void => { + if (!map) return + + if (isMapTilted) map.setPitch(80, { forceViewportUpdate: true }) + else map.setPitch(0, { forceViewportUpdate: true }) + + if (breakpoint !== 'mobile' || !panelOpen) return + + // Pitch reset in 50/50 page layout on smaller screens needs extra love: + setTimeout(() => { + const yOffset = isMapTilted ? -0.1 : 0.1 + + // TODO: smooth this out for 3D + map.panBy([0, yOffset * offset[1]], undefined, { + forceViewportUpdate: true, + }) + }, 5) + }, [isMapTilted]) + useEffect((): void => { if (!map) return @@ -111,7 +131,11 @@ export const Map: FC = (props) => { nuclearClear() - const settings = utils.getFlyToPointSettings(selFeatAttribs, offset) + const settings = utils.getFlyToPointSettings( + selFeatAttribs, + offset, + isMapTilted + ) utils.flyToPoint(map, settings, null) // eslint-disable-next-line react-hooks/exhaustive-deps @@ -177,7 +201,11 @@ export const Map: FC = (props) => { ) if (selFeatAttribs) { - const settings = utils.getFlyToPointSettings(selFeatAttribs, offset) + const settings = utils.getFlyToPointSettings( + selFeatAttribs, + offset, + isMapTilted + ) utils.flyToPoint(mapObj, settings, null) } else { @@ -226,16 +254,7 @@ export const Map: FC = (props) => { if (actionID === 'home') { utils.flyHome(map, nuclearClear, offset) } else if (actionID === 'reset-pitch') { - setViewport({ ...viewport, pitch: 0 }) - - // Pitch reset in 50/50 page layout on smaller screens needs extra love: - if (panelOpen && breakpoint === 'mobile') { - setTimeout(() => { - map.panBy([0, 2 * offset[1] + 50], undefined, { - forceViewportUpdate: true, - }) - }, 5) - } + setIsMapTilted(!isMapTilted) } else if (actionID === 'in') { map.zoomIn({ offset }, { forceViewportUpdate: true }) } else if (actionID === 'out') { @@ -314,7 +333,7 @@ export const Map: FC = (props) => { )} { onMapCtrlClick(actionID) }} diff --git a/src/components/map/MapCtrlBtns.tsx b/src/components/map/MapCtrlBtns.tsx index 89bafea8..881e8274 100644 --- a/src/components/map/MapCtrlBtns.tsx +++ b/src/components/map/MapCtrlBtns.tsx @@ -2,7 +2,6 @@ import React, { FC } from 'react' import { makeStyles, createStyles, Theme } from '@material-ui/core/styles' import { SpeedDial, SpeedDialAction } from '@material-ui/lab' import { MdYoutubeSearchedFor } from 'react-icons/md' -import { TiCompass } from 'react-icons/ti' import { FaSearchPlus, FaSearchMinus } from 'react-icons/fa' import 'react-map-gl-geocoder/dist/mapbox-gl-geocoder.css' @@ -11,7 +10,7 @@ import { MapCtrlBtnsProps, CtrlBtnConfig } from './types' const useStyles = makeStyles((theme: Theme) => createStyles({ - mapCtrlsRoot: { + root: { position: 'fixed', top: -8, right: 6, @@ -59,44 +58,42 @@ const ctrlBtnsConfig = [ }, { id: 'reset-pitch', - icon: , - name: 'Reset pitch', - disabledOnProp: 'isPitchZero', + icon: 3D, + name: 'Toggle 2D/3D', }, ] as CtrlBtnConfig[] export const MapCtrlBtns: FC = (props) => { - const { onMapCtrlClick } = props + const { onMapCtrlClick, isMapTilted } = props const classes = useStyles() return ( - <> - ) } diff --git a/src/components/map/hooks.tsx b/src/components/map/hooks.tsx index 25f89480..ecb8bbea 100644 --- a/src/components/map/hooks.tsx +++ b/src/components/map/hooks.tsx @@ -203,6 +203,7 @@ export const useBoundaryPopup: Types.UseBoundaryPopup = ( // Fly to extent of lang features on length change export const useZoomToLangFeatsExtent: Types.UseZoomToLangFeatsExtent = ( panelOpen, + isMapTilted, map ) => { const { state } = useContext(GlobalContext) @@ -235,7 +236,7 @@ export const useZoomToLangFeatsExtent: Types.UseZoomToLangFeatsExtent = ( latitude: firstCoords[1], longitude: firstCoords[0], zoom: POINT_ZOOM_LEVEL, - pitch: 80, + pitch: isMapTilted ? 80 : 0, offset, }, null diff --git a/src/components/map/types.ts b/src/components/map/types.ts index 25253c6a..31951852 100644 --- a/src/components/map/types.ts +++ b/src/components/map/types.ts @@ -138,7 +138,7 @@ export type MapProps = { } & LocalPanelProps export type MapCtrlBtnsProps = { - isPitchZero: boolean + isMapTilted: boolean onMapCtrlClick: (actionID: MapControlAction) => void } @@ -152,7 +152,6 @@ export type CtrlBtnConfig = { icon: React.ReactNode name: string customFn?: boolean - disabledOnProp?: keyof MapCtrlBtnsProps } export type BoundsConfig = { @@ -262,6 +261,7 @@ export type UseBoundaryPopup = ( export type UseZoomToLangFeatsExtent = ( panelOpen: boolean, + isMapTilted: boolean, map?: Map ) => boolean diff --git a/src/components/map/utils.ts b/src/components/map/utils.ts index b4c1244d..a5986d23 100644 --- a/src/components/map/utils.ts +++ b/src/components/map/utils.ts @@ -263,14 +263,15 @@ export const flyHome = ( export const getFlyToPointSettings = ( selFeatAttribs: Types.SelFeatAttribs, - offset: Types.Offset + offset: Types.Offset, + isMapTilted: boolean ): Types.FlyToPointSettings => ({ // bearing: 80, // TODO: consider it as it does add a new element of fancy longitude: selFeatAttribs.Longitude, latitude: selFeatAttribs.Latitude, zoom: config.POINT_ZOOM_LEVEL, disregardCurrZoom: true, - pitch: 80, + pitch: isMapTilted ? 80 : 0, offset, }) From d8364bd47bcb7a23d1d981e1fb25d1a2a3f8351c Mon Sep 17 00:00:00 2001 From: Jason Lampel Date: Fri, 19 Mar 2021 12:05:04 -0500 Subject: [PATCH 6/8] Omnibox: make language group headings linkable to Explore (#195) --- src/components/home/SearchByOmnibox.tsx | 4 ++-- src/components/home/utils.tsx | 9 +++++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/home/SearchByOmnibox.tsx b/src/components/home/SearchByOmnibox.tsx index a473f175..65f283a3 100644 --- a/src/components/home/SearchByOmnibox.tsx +++ b/src/components/home/SearchByOmnibox.tsx @@ -36,9 +36,9 @@ const useStyles = makeStyles((theme: Theme) => borderBottom: `1px solid ${theme.palette.text.hint}`, color: theme.palette.text.primary, fontFamily: theme.typography.h1.fontFamily, - fontSize: '1.1rem', - paddingLeft: 12, + fontSize: '1.25rem', fontWeight: theme.typography.h1.fontWeight, + paddingLeft: 12, }, }, // The
  • items. Not sure why it works via classes and `groupUl` doesn't. diff --git a/src/components/home/utils.tsx b/src/components/home/utils.tsx index 5dd9c747..dc7f05d5 100644 --- a/src/components/home/utils.tsx +++ b/src/components/home/utils.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { Link as RouterLink } from 'react-router-dom' import { VariableSizeList } from 'react-window' import { AutocompleteRenderGroupParams } from '@material-ui/lab/Autocomplete' import ListSubheader from '@material-ui/core/ListSubheader' @@ -24,8 +25,12 @@ export function useResetCache( // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types export const renderGroup = (params: AutocompleteRenderGroupParams) => { return [ - - {params.group} + // Could NOT get it to style properly if setting component to anything but + // "div" and could not make it stay sticky either. Frustration station. + + + {params.group} + , params.children, ] From 6d24919f58bf3763646a85e8aa58f629fe16d402 Mon Sep 17 00:00:00 2001 From: Jason Lampel Date: Fri, 19 Mar 2021 13:40:45 -0500 Subject: [PATCH 7/8] Point/label toggles: for Labels in Home, and both in Census (#195) --- .../context/SymbAndLabelContext.tsx | 24 +++-- src/components/legend/LangPointsToggle.tsx | 89 ++++++++++++++++--- src/components/legend/LayerLabelSelect.tsx | 1 - src/components/legend/LegendPanel.tsx | 12 ++- src/components/legend/index.ts | 2 +- src/components/local/CensusFieldSelect.tsx | 11 +-- src/components/local/LocalPanel.tsx | 10 ++- src/components/map/LangMbSrcAndLayer.tsx | 13 ++- src/components/map/styles.tsx | 2 +- 9 files changed, 128 insertions(+), 36 deletions(-) diff --git a/src/components/context/SymbAndLabelContext.tsx b/src/components/context/SymbAndLabelContext.tsx index af88237e..b3ec69a9 100644 --- a/src/components/context/SymbAndLabelContext.tsx +++ b/src/components/context/SymbAndLabelContext.tsx @@ -4,20 +4,23 @@ import { LangSchemaCol } from './types' type Dispatch = React.Dispatch type InitialState = { - activeLabelID: LangSchemaCol | '' | 'None' + activeLabelID: LangSchemaCol activeSymbGroupID: LangSchemaCol hideLangPoints: boolean + hideLangLabels: boolean } export type Action = - | { type: 'TOGGLE_LANG_POINTS' } - | { type: 'SET_LANG_LAYER_LABELS'; payload: LangSchemaCol | '' } + | { type: 'TOGGLE_LANG_LABELS'; payload?: boolean } + | { type: 'TOGGLE_LANG_POINTS'; payload?: boolean } + | { type: 'SET_LANG_LAYER_LABELS'; payload: LangSchemaCol } | { type: 'SET_LANG_LAYER_SYMBOLOGY'; payload: LangSchemaCol } const initialState = { - activeLabelID: '', + activeLabelID: 'Language', activeSymbGroupID: 'World Region', hideLangPoints: false, + hideLangLabels: true, } as InitialState const SymbAndLabelContext = React.createContext( @@ -32,7 +35,18 @@ function reducer(state: InitialState, action: Action) { case 'TOGGLE_LANG_POINTS': return { ...state, - hideLangPoints: !state.hideLangPoints, + hideLangPoints: + // `undefined` if from individual checkboxes (as opposed to "all", + // e.g. from Census panel) + action.payload === undefined ? !state.hideLangPoints : action.payload, + } + case 'TOGGLE_LANG_LABELS': + return { + ...state, + hideLangLabels: + // `undefined` if from individual checkboxes (as opposed to "all", + // e.g. from Census panel) + action.payload === undefined ? !state.hideLangLabels : action.payload, } case 'SET_LANG_LAYER_LABELS': return { diff --git a/src/components/legend/LangPointsToggle.tsx b/src/components/legend/LangPointsToggle.tsx index 1c379566..6d08ce5b 100644 --- a/src/components/legend/LangPointsToggle.tsx +++ b/src/components/legend/LangPointsToggle.tsx @@ -3,7 +3,15 @@ import React, { FC } from 'react' import { FormControlLabel, Switch } from '@material-ui/core' import { createStyles, makeStyles, Theme } from '@material-ui/core/styles' -import { useLabelAndSymbDispatch } from 'components/context/SymbAndLabelContext' +import { + useLabelAndSymbDispatch, + useSymbAndLabelState, +} from 'components/context/SymbAndLabelContext' + +type CustomFormControlProps = { + label: string + switchControl: React.ReactElement +} const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -21,29 +29,88 @@ const useStyles = makeStyles((theme: Theme) => }) ) -// TODO: abstract and reuse for labels -export const LangPointsToggle: FC<{ checked: boolean }> = (props) => { - const { checked } = props +export const CustomFormControl: FC = (props) => { + const { label, switchControl } = props const classes = useStyles() const { smallerText, root } = classes + + return ( + + ) +} + +export const LangPointsToggle: FC = (props) => { + const { hideLangPoints } = useSymbAndLabelState() const symbLabelDispatch = useLabelAndSymbDispatch() - const handleBoundariesToggle = () => { + const handleChange = (event: React.ChangeEvent) => { symbLabelDispatch({ type: 'TOGGLE_LANG_POINTS' }) } return ( - + } + /> + ) +} + +export const LangLabelsToggle: FC = (props) => { + const { hideLangLabels } = useSymbAndLabelState() + const symbLabelDispatch = useLabelAndSymbDispatch() + + const handleChange = (event: React.ChangeEvent) => { + symbLabelDispatch({ type: 'TOGGLE_LANG_LABELS' }) + } + + return ( + + } + /> + ) +} + +export const AllLangDataToggle: FC = () => { + const { hideLangLabels, hideLangPoints } = useSymbAndLabelState() + const symbLabelDispatch = useLabelAndSymbDispatch() + + const handleChange = (event: React.ChangeEvent) => { + const payload = event.target.checked + + symbLabelDispatch({ type: 'TOGGLE_LANG_POINTS', payload }) + symbLabelDispatch({ type: 'TOGGLE_LANG_LABELS', payload }) + } + + return ( + } - label="Hide symbols" /> ) } diff --git a/src/components/legend/LayerLabelSelect.tsx b/src/components/legend/LayerLabelSelect.tsx index e8ef1074..db0151e7 100644 --- a/src/components/legend/LayerLabelSelect.tsx +++ b/src/components/legend/LayerLabelSelect.tsx @@ -28,7 +28,6 @@ export const LayerLabelSelect: FC = () => { onChange={handleChange} inputProps={{ name: 'label', id: 'lang-label-TextField' }} > - {labelFields.map((label: string) => (