diff --git a/app/src/frontend/building/data-containers/age.tsx b/app/src/frontend/building/data-containers/age.tsx index 16fc09c5..16afcb52 100644 --- a/app/src/frontend/building/data-containers/age.tsx +++ b/app/src/frontend/building/data-containers/age.tsx @@ -1,5 +1,6 @@ import React, { Fragment } from 'react'; +import '../../map/map-button.css'; import { dataFields } from '../../config/data-fields-config'; import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry'; import { DataEntryGroup } from '../data-components/data-entry-group'; @@ -37,7 +38,7 @@ const AgeView: React.FunctionComponent = (props) => { const ageLinkUrl = `/${props.mode}/${Category.Age}/${props.building.building_id}`; - const { historicData, historicDataSwitchOnClick } = useDisplayPreferences(); + const { historicData, historicDataSwitchOnClick, darkLightTheme } = useDisplayPreferences(); if (props.building.date_source == "Expert knowledge of building" || props.building.date_source == "Expert estimate from image" || @@ -135,7 +136,7 @@ const AgeView: React.FunctionComponent = (props) => { /> - @@ -228,7 +229,7 @@ const AgeView: React.FunctionComponent = (props) => { This section is under development. - = (props) => { /> - @@ -497,7 +498,7 @@ const AgeView: React.FunctionComponent = (props) => { This section is under development. - = (props) => { e.preventDefault(); props.onMapColourScale('community_in_public_ownership') } + const { darkLightTheme } = useDisplayPreferences(); const worthKeepingReasonsNonEmpty = Object.values(props.building.community_type_worth_keeping_reasons ?? {}).some(x => x); return <> @@ -54,7 +57,7 @@ const CommunityView: React.FunctionComponent = (props) => { copy={props.copy} /> - = (props) => { mode={props.mode} copy={props.copy} /> - = (props) => { mode={props.mode} copy={props.copy} /> - You can click and colour any other building on the map as well. @@ -174,7 +177,7 @@ const CommunityView: React.FunctionComponent = (props) => { mode={props.mode} copy={props.copy} /> - = (props) => { e.preventDefault(); props.onMapColourScale('planning_applications_status_all') } - const { flood, floodSwitchOnClick, housing, housingSwitchOnClick, creative, creativeSwitchOnClick, vista, vistaSwitchOnClick, parcel, parcelSwitchOnClick, conservation, conservationSwitchOnClick } = useDisplayPreferences(); + const { flood, floodSwitchOnClick, housing, housingSwitchOnClick, creative, creativeSwitchOnClick, vista, vistaSwitchOnClick, parcel, parcelSwitchOnClick, conservation, conservationSwitchOnClick, darkLightTheme } = useDisplayPreferences(); const communityLinkUrl = `/${props.mode}/${Category.Community}/${props.building.building_id}`; return ( - To see planning applications visualised for different periods click on the map key dropdown. - + This section lists active applications. Active applications are defined here as ones with a decision date less than year ago and time with a registration date less than year ago. +
To comment on an application follow the application link if provided, or visit the relevant local authority's planning page. {props.building.planning_data ? @@ -106,11 +106,11 @@ const PlanningView: React.FunctionComponent = (props) => { Click and colour buildings here if you think they may be subject to a future planning application involving demolition. To add your opinion on how well this building works, please also visit the Community section. { props.mapColourScale != "community_expected_planning_application_total" ? - : - } @@ -130,12 +130,14 @@ const PlanningView: React.FunctionComponent = (props) => { - To view planning zone data for London click the pink buttons. You may need to zoom out. + To view planning zone data for London click the buttons below. You may need to zoom out. Information on whether a specific building is in a zone will be added automatically in future.
- Data in this section comes from the Greater London Authority's Planning London Datahub. Please check the original GLA source when using for planning purposes. + Data in this section comes from the Greater London Authority's Planning London Datahub. Please check the original GLA source when using for planning purposes. +
+ Specific sources are mentioned in the footer of map for currently enabled layers.
= (props) => { disabled={true} tooltip={"the GLA official description: \"All areas with more than a 1 in 1,000 annual probability of either river or sea flooding.\""} /> - = (props) => { disabled={true} tooltip={"the GLA official description: \"Housing zones are areas funded by the Mayor and government to attract developers and relevant partners to build new homes.\""} /> - = (props) => { disabled={true} tooltip={"GLA official description: \"Creative Enterprise Zones are a new Mayoral initiative to designate areas of London where artists and creative businesses can find permanent affordable space to work; are supported to start-up and grow; and where local people are helped to learn creative sector skills and find new jobs.\""} /> - = (props) => { disabled={true} tooltip={"GLA official description: \"The Protected Vistas are established in the London Plan with more detailed guidance provided in the London View Management Framework (LVMF). The London Plan seeks to protect the significant views which help to define London, including the panoramas, linear views and townscape views in this layer.\""} /> - {/* @@ -205,15 +207,15 @@ const PlanningView: React.FunctionComponent = (props) => { { props.mapColourScale != "planning_combined" ? - : - } - = (props) => { This section is designed to provide information on land parcels and their ownership type. Can you help us to crowdsource this information? -
diff --git a/app/src/frontend/config/data-fields-config.ts b/app/src/frontend/config/data-fields-config.ts index dc999d9a..070c4ada 100644 --- a/app/src/frontend/config/data-fields-config.ts +++ b/app/src/frontend/config/data-fields-config.ts @@ -474,7 +474,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */ }, planning_in_conservation_area_url: { category: Category.Planning, - title: "Is the building in a Conservation Area?", + title: "Is the building in a Conservation Area (CA)?", example: "", //tooltip: , }, diff --git a/app/src/frontend/displayPreferences-context.tsx b/app/src/frontend/displayPreferences-context.tsx index 01a0ff3b..6694c943 100644 --- a/app/src/frontend/displayPreferences-context.tsx +++ b/app/src/frontend/displayPreferences-context.tsx @@ -176,6 +176,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { e.preventDefault(); const newVista = (vista === 'enabled')? 'disabled' : 'enabled'; setVista(newVista); + setShowLayerSelection('enabled') }, [vista], ) @@ -184,6 +185,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { e.preventDefault(); const newVista = (vista === 'enabled')? 'disabled' : 'enabled'; setVista(newVista); + setShowLayerSelection('enabled') } const floodSwitch = useCallback( @@ -191,6 +193,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { e.preventDefault(); const newFlood = (flood === 'enabled')? 'disabled' : 'enabled'; setFlood(newFlood); + setShowLayerSelection('enabled') }, [flood], ) @@ -199,6 +202,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { e.preventDefault(); const newFlood = (flood === 'enabled')? 'disabled' : 'enabled'; setFlood(newFlood); + setShowLayerSelection('enabled') } const housingSwitch = useCallback( @@ -206,6 +210,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { e.preventDefault(); const newHousing = (housing === 'enabled')? 'disabled' : 'enabled'; setHousing(newHousing); + setShowLayerSelection('enabled') }, [housing], ) @@ -214,6 +219,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { e.preventDefault(); const newHousing = (housing === 'enabled')? 'disabled' : 'enabled'; setHousing(newHousing); + setShowLayerSelection('enabled') } const creativeSwitch = useCallback( @@ -221,6 +227,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { e.preventDefault(); const newCreative = (creative === 'enabled')? 'disabled' : 'enabled'; setCreative(newCreative); + setShowLayerSelection('enabled') }, [creative], ) @@ -229,6 +236,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { e.preventDefault(); const newCreative = (creative === 'enabled')? 'disabled' : 'enabled'; setCreative(newCreative); + setShowLayerSelection('enabled') } const boroughSwitch = useCallback( @@ -244,6 +252,9 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { e.preventDefault(); const newBorough = (borough === 'enabled')? 'disabled' : 'enabled'; setBorough(newBorough); + if(newBorough === 'enabled') { + setShowLayerSelection('enabled') + } } const parcelSwitch = useCallback( @@ -259,6 +270,9 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { e.preventDefault(); const newParcel = (parcel === 'enabled')? 'disabled' : 'enabled'; setParcel(newParcel); + if(newParcel === 'enabled') { + setShowLayerSelection('enabled') + } } const conservationSwitch = useCallback( @@ -274,6 +288,9 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { e.preventDefault(); const newConservation = (conservation === 'enabled')? 'disabled' : 'enabled'; setConservation(newConservation); + if(newConservation === 'enabled') { + setShowLayerSelection('enabled') + } } const historicDataSwitch = useCallback( @@ -289,6 +306,9 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => { e.preventDefault(); const newHistoric = (historicData === 'enabled')? 'disabled' : 'enabled'; setHistoricData(newHistoric); + if(newHistoric === 'enabled') { + setShowLayerSelection('enabled') + } } const darkLightThemeSwitch = useCallback( diff --git a/app/src/frontend/map/map-button.css b/app/src/frontend/map/map-button.css index 6ca067f5..86fd8b96 100644 --- a/app/src/frontend/map/map-button.css +++ b/app/src/frontend/map/map-button.css @@ -33,26 +33,24 @@ background-image: none; border-color: #343a40; } +.map-switcher-inline.night.no-applicable-state { + color: #191b1d; +} +.map-switcher-inline.disabled-state, .map-button.disabled-state, .map-button.disabled-state .btn{ background-color: #df7474; } +.map-switcher-inline.night.disabled-state, .map-button.night.disabled-state, .map-button.night.disabled-state .btn{ background-color: #b03f3f; } -.map-button.disabled .btn:hover { - background-color: transparent; - background-image: none; -} -.map-button.night.disabled .btn:hover { - background-color: transparent; - background-image: none; -} .map-button.enabled-state { color: #75e775; background-color: #75e775; } +.map-switcher-inline.enabled-state, .map-button.enabled-state .btn{ background-color: #75e775; } @@ -60,13 +58,13 @@ color: #448844; background-color: #448844; } +.map-switcher-inline.night.enabled-state, .map-button.night.enabled-state .btn{ background-color: #448844; } -.map-button.enabled .btn:hover { - background-color: transparent; - background-image: none; -} + +.map-switcher-inline.night.no-applicable-state, +.map-button.enabled .btn:hover, .map-button.night.enabled .btn:hover { background-color: transparent; background-image: none; @@ -122,3 +120,28 @@ .parcel-switcher { top: 437px; } + +.map-switcher-inline { + border-radius: 4px; + /*background: #FFC0CB;*/ + margin: 12px; + min-width: 400px; + color: #343a40; +} +.map-switcher-inline.night { + color: #d4d7da; +} +/* +.map-switcher-inline.night { + background: #FFC0CB; + color: #fff; + background-color: #343a40; + border-color: #ff6065; +} +.map-switcher-inline.night .btn:hover { + color: #343a40; + background-color: transparent; + background-image: none; + border-color: #ff6065; +} +*/ \ No newline at end of file