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

use colours for the button state

Browse Source 
proof of concept for #1039 (tweaking clicked/hover colours may be needed)
This commit is contained in:
Mateusz Konieczny 2023-01-14 01:12:13 +01:00
parent f397bf2065
commit 4efaf8bd90
9 changed files with 46 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/frontend/map/borough-switcher.tsx
View File

@ -6,7 +6,7 @@ import { useDisplayPreferences } from '../displayPreferences-context';
export const BoroughSwitcher: React.FC<{}> = () => {
const { borough, boroughSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`borough-switcher map-button ${darkLightTheme}`} onSubmit={boroughSwitch}>
<form className={`borough-switcher map-button ${borough}-state ${darkLightTheme}`} onSubmit={boroughSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(borough === 'enabled')? 'Borough Boundaries on' : 'Borough Boundaries off'}

2
app/src/frontend/map/conservation-switcher.tsx
View File

@ -6,7 +6,7 @@ import { useDisplayPreferences } from '../displayPreferences-context';
export const ConservationAreaSwitcher: React.FC<{}> = (props) => {
const { conservation, conservationSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`conservation-switcher map-button ${darkLightTheme}`} onSubmit={conservationSwitch}>
<form className={`conservation-switcher map-button ${conservation}-state ${darkLightTheme}`} onSubmit={conservationSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(conservation === 'enabled')? 'Conservation Areas on' : 'Conservation Areas off'}

2
app/src/frontend/map/creative-switcher.tsx
View File

@ -6,7 +6,7 @@ import { useDisplayPreferences } from '../displayPreferences-context';
export const CreativeSwitcher: React.FC<{}> = () => {
const { creative, creativeSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`creative-switcher map-button ${darkLightTheme}`} onSubmit={creativeSwitch}>
<form className={`creative-switcher map-button ${creative}-state ${darkLightTheme}`} onSubmit={creativeSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(creative === 'enabled')? 'Enterprise Zones on' : 'Creative Enterprise Zones off'}

2
app/src/frontend/map/flood-switcher.tsx
View File

@ -6,7 +6,7 @@ import { useDisplayPreferences } from '../displayPreferences-context';
export const FloodSwitcher: React.FC<{}> = () => {
const { flood, floodSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`flood-switcher map-button ${darkLightTheme}`} onSubmit={floodSwitch}>
<form className={`flood-switcher map-button ${flood}-state ${darkLightTheme}`} onSubmit={floodSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(flood === 'enabled')? 'Flood Zones on' : 'Flood Zones of'}

2
app/src/frontend/map/historic-data-switcher.tsx
View File

@ -6,7 +6,7 @@ import { useDisplayPreferences } from '../displayPreferences-context';
export const HistoricDataSwitcher: React.FC<{}> = (props) => {
const { historicData, historicDataSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`historic-data-switcher map-button ${darkLightTheme}`} onSubmit={historicDataSwitch}>
<form className={`historic-data-switcher map-button ${historicData}-state ${darkLightTheme}`} onSubmit={historicDataSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(historicData === 'enabled')? 'The OS 1890s Historical Map on' : 'The OS 1890s Historical Map off'}

2
app/src/frontend/map/housing-switcher.tsx
View File

@ -6,7 +6,7 @@ import { useDisplayPreferences } from '../displayPreferences-context';
export const HousingSwitcher: React.FC<{}> = () => {
const { housing, housingSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`housing-switcher map-button ${darkLightTheme}`} onSubmit={housingSwitch}>
<form className={`housing-switcher map-button ${housing}-state ${darkLightTheme}`} onSubmit={housingSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(housing === 'enabled')? 'Housing Zones on' : 'Housing Zones off'}

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

@ -29,6 +29,44 @@
background-image: none;
border-color: #343a40;
}
.map-button.disabled-state,
.map-button.disabled-state .btn{
background-color: #df7474;
}
.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: #61ef61;
background-color: #61ef61;
}
.map-button.enabled-state .btn{
background-color: #61ef61;
}
.map-button.night.enabled-state {
color: #448844;
background-color: #448844;
}
.map-button.night.enabled-state .btn{
background-color: #448844;
}
.map-button.enabled .btn:hover {
background-color: transparent;
background-image: none;
}
.map-button.night.enabled .btn:hover {
background-color: transparent;
background-image: none;
}
@media (max-width: 990px){
.map-button {
visibility: hidden;

2
app/src/frontend/map/parcel-switcher.tsx
View File

@ -6,7 +6,7 @@ import { useDisplayPreferences } from '../displayPreferences-context';
export const ParcelSwitcher: React.FC<{}> = () => {
const { parcel, parcelSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`parcel-switcher map-button ${darkLightTheme}`} onSubmit={parcelSwitch}>
<form className={`parcel-switcher map-button ${parcel}-state ${darkLightTheme}`} onSubmit={parcelSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(parcel === 'enabled')? 'Parcel overlay (sample) on' : 'Parcel overlay (sample) off'}

2
app/src/frontend/map/vista-switcher.tsx
View File

@ -6,7 +6,7 @@ import { useDisplayPreferences } from '../displayPreferences-context';
export const VistaSwitcher: React.FC<{}> = () => {
const { vista, vistaSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`vista-switcher map-button ${darkLightTheme}`} onSubmit={vistaSwitch}>
<form className={`vista-switcher map-button ${vista}-state ${darkLightTheme}`} onSubmit={vistaSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(vista === 'enabled')? 'Protected Vistas on' : 'Protected Vistas off'}