From f262aedb898d4ee684038d39706641e6bee1248d Mon Sep 17 00:00:00 2001 From: Mateusz Konieczny Date: Sun, 22 Jan 2023 19:10:14 +0100 Subject: [PATCH 1/6] better coloring for formerly pink buttons fixes #1064 --- .../frontend/building/data-containers/age.tsx | 11 +++-- .../building/data-containers/community.tsx | 11 +++-- .../data-containers/map-switcher-inline.css | 18 ------- .../building/data-containers/planning.tsx | 26 +++++----- app/src/frontend/map/map-button.css | 47 ++++++++++++++----- 5 files changed, 61 insertions(+), 52 deletions(-) delete mode 100644 app/src/frontend/building/data-containers/map-switcher-inline.css 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 ( @@ -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,7 +130,7 @@ 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.
@@ -145,7 +145,7 @@ const PlanningView: React.FunctionComponent = (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 +205,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/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 From 8c9f62b51e07f0747b7c50da35c137df69615097 Mon Sep 17 00:00:00 2001 From: Mateusz Konieczny Date: Mon, 23 Jan 2023 13:00:29 +0100 Subject: [PATCH 2/6] mention CA short name --- app/src/frontend/config/data-fields-config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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: , }, From 9868a700f8bc7aadd3aac4e237a1840138a5c2c1 Mon Sep 17 00:00:00 2001 From: Mateusz Konieczny Date: Mon, 23 Jan 2023 13:10:01 +0100 Subject: [PATCH 3/6] rewrite explanation info for current applications --- app/src/frontend/building/data-containers/planning.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/frontend/building/data-containers/planning.tsx b/app/src/frontend/building/data-containers/planning.tsx index 875b1713..e759f169 100644 --- a/app/src/frontend/building/data-containers/planning.tsx +++ b/app/src/frontend/building/data-containers/planning.tsx @@ -68,8 +68,8 @@ const PlanningView: React.FunctionComponent = (props) => { - 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 ? From 63e22f46b6ec51bc42141d95fd3a6586b3e26cd5 Mon Sep 17 00:00:00 2001 From: Mateusz Konieczny Date: Mon, 23 Jan 2023 13:43:44 +0100 Subject: [PATCH 4/6] add one more link to datahub --- app/src/frontend/building/data-containers/planning.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/frontend/building/data-containers/planning.tsx b/app/src/frontend/building/data-containers/planning.tsx index e759f169..7b63db7f 100644 --- a/app/src/frontend/building/data-containers/planning.tsx +++ b/app/src/frontend/building/data-containers/planning.tsx @@ -135,7 +135,7 @@ const PlanningView: React.FunctionComponent = (props) => {
- 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.
Date: Mon, 23 Jan 2023 13:59:38 +0100 Subject: [PATCH 5/6] mention where more specific sources are --- app/src/frontend/building/data-containers/planning.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/src/frontend/building/data-containers/planning.tsx b/app/src/frontend/building/data-containers/planning.tsx index 7b63db7f..1b1c6933 100644 --- a/app/src/frontend/building/data-containers/planning.tsx +++ b/app/src/frontend/building/data-containers/planning.tsx @@ -136,6 +136,8 @@ const PlanningView: React.FunctionComponent = (props) => {
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.
Date: Mon, 23 Jan 2023 14:13:51 +0100 Subject: [PATCH 6/6] unroll layer option on using buttons --- .../frontend/displayPreferences-context.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) 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(