a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1067 from matkoniecz/fix/final-review

Browse Source 
Group of additional changes from the meeting
This commit is contained in:
Mike Simpson 2023-01-23 14:56:41 +00:00 committed by GitHub
commit 6463044aab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 87 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/src/frontend/building/data-containers/age.tsx
View File

@ -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<CategoryViewProps> = (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<CategoryViewProps> = (props) => {
/>
</DataEntryGroup>
<DataEntryGroup name="Lifespan and Site History" collapsed={true} >
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={historicDataSwitchOnClick}>
<button className={`map-switcher-inline ${historicData}-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={historicDataSwitchOnClick}>
{(historicData === 'enabled')?'Click here to hide historical maps':'Click here to show historical maps'}
</button>
<DataEntryGroup collapsed={false} name="Constructions and demolitions on this site" showCount={false}>
@ -228,7 +229,7 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
<InfoBox>
This section is under development.
</InfoBox>
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={historicDataSwitchOnClick}>
<button className={`map-switcher-inline ${historicData}-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={historicDataSwitchOnClick}>
{(historicData === 'enabled')?'Click here to hide historical maps':'Click here to show historical maps'}
</button>
<SelectDataEntry
@ -404,7 +405,7 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
/>
</DataEntryGroup>
<DataEntryGroup name="Lifespan and Site History" collapsed={true} >
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={historicDataSwitchOnClick}>
<button className={`map-switcher-inline ${historicData} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={historicDataSwitchOnClick}>
{(historicData === 'enabled')?'Click here to hide historical maps':'Click here to show historical maps'}
</button>
<DataEntryGroup collapsed={false} name="Constructions and demolitions on this site" showCount={false}>
@ -497,7 +498,7 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
<InfoBox>
This section is under development.
</InfoBox>
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={historicDataSwitchOnClick}>
<button className={`map-switcher-inline ${historicData} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={historicDataSwitchOnClick}>
{(historicData === 'enabled')?'Click here to hide historical maps':'Click here to show historical maps'}
</button>
<SelectDataEntry

11
app/src/frontend/building/data-containers/community.tsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import '../../map/map-button.css';
import withCopyEdit from '../data-container';
import UserOpinionEntry from '../data-components/user-opinion-data-entry';
import { MultiSelectDataEntry } from '../data-components/multi-select-data-entry';
@ -13,6 +14,7 @@ import './community.css';
import SelectDataEntry from '../data-components/select-data-entry';
import Verification from '../data-components/verification';
import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
import { useDisplayPreferences } from '../../displayPreferences-context';
/**
* Community view/edit section
@ -34,6 +36,7 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (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 <>
<InfoBox type='warning'>
@ -54,7 +57,7 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
copy={props.copy}
/>
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={switchToLikesMapStyle}>
<button className={`map-switcher-inline ${props.mapColourScale == "likes" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToLikesMapStyle}>
{'Click here to switch map key to this info'}
</button>
<LogicalDataEntry
@ -100,7 +103,7 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
mode={props.mode}
copy={props.copy}
/>
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={switchToLocalSignificanceMapStyle}>
<button className={`map-switcher-inline ${props.mapColourScale == "community_local_significance_total" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToLocalSignificanceMapStyle}>
{'Click here to switch map key to this info'}
</button>
<UserOpinionEntry
@ -113,7 +116,7 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
mode={props.mode}
copy={props.copy}
/>
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={switchToExpectedApplicationMapStyle}>
<button className={`map-switcher-inline ${props.mapColourScale == "community_expected_planning_application_total" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToExpectedApplicationMapStyle}>
{'Click here to switch map key to this info'}
</button>
<InfoBox>You can click and colour any other building on the map as well.</InfoBox>
@ -174,7 +177,7 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
mode={props.mode}
copy={props.copy}
/>
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={switchToPublicOwnershipMapStyle}>
<button className={`map-switcher-inline ${props.mapColourScale == "community_in_public_ownership" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToPublicOwnershipMapStyle}>
{'Click here to switch map key to this info'}
</button>
<Verification

18
app/src/frontend/building/data-containers/map-switcher-inline.css
View File

@ -1,18 +0,0 @@
.map-switcher-inline {
border-radius: 4px;
background: #FFC0CB;
margin: 12px;
min-width: 400px;
}
.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;
}

34
app/src/frontend/building/data-containers/planning.tsx
View File

@ -1,6 +1,6 @@
import React, { Fragment } from 'react';
import './map-switcher-inline.css'; // import in a proper place
import '../../map/map-button.css';
import { Link } from 'react-router-dom';
import InfoBox from '../../components/info-box';
import NumericDataEntryWithFormattedLink from '../data-components/numeric-data-entry-with-formatted-link';
@ -61,15 +61,15 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (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 (
<Fragment>
<DataEntryGroup name="Planning application information" collapsed={true} >
<DataEntryGroup name="Current/active applications (official data)" collapsed={false} >
<InfoBox>
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 <i>and</i> time with a registration date less than year ago.
<br />
To comment on an application follow the application link if provided, or visit the relevant local authority's planning page.
</InfoBox>
{props.building.planning_data ?
@ -106,11 +106,11 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => {
<InfoBox type='info'>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 <Link to={communityLinkUrl}>Community</Link> section.</InfoBox>
{
props.mapColourScale != "community_expected_planning_application_total" ?
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={switchToExpectedApplicationMapStyle}>
<button className={`map-switcher-inline no-applicable-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToExpectedApplicationMapStyle}>
{'Click here to view possible locations of future applications'}
</button>
:
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={switchToAllPlanningApplicationsMapStyle}>
<button className={`map-switcher-inline no-applicable-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToAllPlanningApplicationsMapStyle}>
{'Click to see planning applications'}
</button>
}
@ -130,12 +130,14 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => {
</DataEntryGroup>
<DataEntryGroup name="Planning zones" collapsed={true} >
<InfoBox>
To view planning zone data for London click the pink buttons. You may need to <u>zoom out</u>.
To view planning zone data for London click the buttons below. You may need to <u>zoom out</u>.
Information on whether a specific building is in a zone will be added automatically in future.
</InfoBox>
<div className={`alert alert-dark`} role="alert" style={{ fontSize: 13, backgroundColor: "#f6f8f9" }}>
<i>
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 <a href="https://www.london.gov.uk/programmes-strategies/planning/digital-planning/planning-london-datahub">the Greater London Authority's Planning London Datahub</a>. Please check the original GLA source when using for planning purposes.
<br />
Specific sources are mentioned in the footer of map for currently enabled layers.
</i>
</div>
<LogicalDataEntry
@ -145,7 +147,7 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (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.\""}
/>
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={floodSwitchOnClick}>
<button className={`map-switcher-inline ${flood}-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={floodSwitchOnClick}>
{(flood === 'enabled')? 'Click to hide Flood Zones' : 'Click to see Flood Zones mapped'}
</button>
<LogicalDataEntry
@ -155,7 +157,7 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (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.\""}
/>
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={housingSwitchOnClick}>
<button className={`map-switcher-inline ${housing}-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={housingSwitchOnClick}>
{(housing === 'enabled')? 'Click to hide Housing Zones' : 'Click to see Housing Zones mapped'}
</button>
<LogicalDataEntry
@ -165,7 +167,7 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (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.\""}
/>
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={creativeSwitchOnClick}>
<button className={`map-switcher-inline ${creative}-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={creativeSwitchOnClick}>
{(creative === 'enabled')? 'Click to hide Creative Enterprise Zones' : 'Click to see Creative Enterprise Zones'}
</button>
<LogicalDataEntry
@ -175,7 +177,7 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (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.\""}
/>
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={vistaSwitchOnClick}>
<button className={`map-switcher-inline ${vista}-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={vistaSwitchOnClick}>
{(vista === 'enabled')? 'Click to hide Protected Vistas' : 'Click to see Protected Vistas'}
</button>
{/*
@ -205,15 +207,15 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => {
</InfoBox>
{
props.mapColourScale != "planning_combined" ?
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={switchToBuildingProtectionMapStyle}>
<button className={`map-switcher-inline no-applicable-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToBuildingProtectionMapStyle}>
{'Click to see individual protected buildings mapped'}
</button>
:
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={switchToAllPlanningApplicationsMapStyle}>
<button className={`map-switcher-inline no-applicable-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToAllPlanningApplicationsMapStyle}>
{'Click to see planning applications'}
</button>
}
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={conservationSwitchOnClick}>
<button className={`map-switcher-inline ${conservation}-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={conservationSwitchOnClick}>
{(conservation === 'enabled')? 'Click to hide Conservation Areas' : 'Click to see Conservation Areas'}
</button>
<NumericDataEntryWithFormattedLink
@ -474,7 +476,7 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => {
<InfoBox>
This section is designed to provide information on land parcels and their ownership type. Can you help us to crowdsource this information?
</InfoBox>
<button className="map-switcher-inline btn btn-outline btn-outline-dark" onClick={parcelSwitchOnClick}>
<button className={`map-switcher-inline ${parcel}-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={parcelSwitchOnClick}>
{(parcel === 'enabled')? 'Click to hide sample of parcel data (in City)' : 'Click to see sample of parcel data (in City) mapped'}
</button>
<div className="data-title">

2
app/src/frontend/config/data-fields-config.ts
View File

@ -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 <a href=\"https://historicengland.org.uk/listing/what-is-designation/local/conservation-areas/\" target=\"_blank\">Conservation Area</a>?",
title: "Is the building in a <a href=\"https://historicengland.org.uk/listing/what-is-designation/local/conservation-areas/\" target=\"_blank\">Conservation Area (CA)</a>?",
example: "",
//tooltip: ,
},

20
app/src/frontend/displayPreferences-context.tsx
View File

@ -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(

47
app/src/frontend/map/map-button.css
View File

@ -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;
}
*/