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

Use icon buttons for edit/info/tooltip

Browse Source
This commit is contained in:
Tom Russell 2018-10-01 16:59:39 +01:00
parent 86e30b1012
commit a012b24bd1
5 changed files with 161 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
app/src/frontend/building-view.js
View File

@ -4,25 +4,40 @@ import { Link, NavLink } from 'react-router-dom';
import Sidebar from './sidebar'; import Sidebar from './sidebar';
import Tooltip from './tooltip'; import Tooltip from './tooltip';
import InfoBox from './info-box'; import InfoBox from './info-box';
import { InfoIcon, EditIcon } from './icons';
const DataSection = function(props){ const DataSection = function(props){
const match = props.hash && props.slug.match(props.hash); const match = props.hash && props.slug.match(props.hash);
return ( return (
<section className={(props.inactive)? "data-section inactive": "data-section"}> <section className={(props.inactive)? "data-section inactive": "data-section"}>
<NavLink className="bullet-prefix" to={(match)? '#': `#${props.slug}`} <header className="bullet-prefix section-header" isActive={() => match}>
isActive={() => match}> <NavLink to={(match)? '#': `#${props.slug}`}>
<h3 className="h3">{props.title}</h3> <h3 className="h3">{props.title}</h3>
</NavLink> </NavLink>
{
props.helpLink?
<a className="icon-button help" title="Find out more" href={props.helpLink} target="_blank" rel="noopener noreferrer">
<InfoIcon />
</a>
: null
}
{
!props.inactive?
<NavLink className="icon-button edit" title="Edit data" to={`/building/${props.building_id}/edit.html#${props.slug}`}>
<EditIcon />
</NavLink>
: null
}
</header>
<Fragment>{ (match)? props.children : null }</Fragment> <Fragment>{ (match)? props.children : null }</Fragment>
<Fragment>{ {
(match && !props.inactive)? (match && !props.inactive)?
<div className="buttons-container with-space"> <div className="buttons-container with-space">
<Link to="/map/date_year.html" className="btn btn-secondary">Back to maps</Link> <Link to={`/building/${props.building_id}/edit.html#${props.slug}`} className="btn btn-primary">Edit data</Link>
<Link to={`/building/${props.building_id}/edit.html`} className="btn btn-primary">Edit data</Link>
</div> </div>
: null : null
}</Fragment> }
</section> </section>
); );
} }
@ -41,13 +56,13 @@ const BuildingView = function(props){
const hash = (props.location && props.location.hash)? props.location.hash.replace('#', ''): undefined; const hash = (props.location && props.location.hash)? props.location.hash.replace('#', ''): undefined;
return ( return (
<Sidebar title={`View Building`}> <Sidebar title={`View Building`}>
<DataSection title="Location" slug="location" hash={hash}> <DataSection title="Location" slug="location" hash={hash}
helpLink="https://pollyhudson.wixsite.com/colouringlondon/location">
<p className="data-intro"> <p className="data-intro">
Section introduction of up to roughly 100 characters will take Section introduction of up to roughly 100 characters will take
approx&shy;imately this much space. approx&shy;imately this much space.
<a href="/">Read more</a>.
</p> </p>
<dl id="data-list-location" className="data-list collapse show"> <dl id="data-list-location" className="data-list collapse show">
<dt> <dt>
@ -67,13 +82,16 @@ const BuildingView = function(props){
<dd>{props.location_postcode ? props.location_postcode : '-'}</dd> <dd>{props.location_postcode ? props.location_postcode : '-'}</dd>
</dl> </dl>
</DataSection> </DataSection>
<DataSection inactive={true} title="Use" slug="use" hash={hash}> <DataSection inactive={true} title="Use" slug="use" hash={hash}
<p className="data-intro">Coming soon&hellip;</p> helpLink="https://pollyhudson.wixsite.com/colouringlondon/use">
<p className="data-intro">Coming soon&hellip; Click the ? for more info.</p>
</DataSection> </DataSection>
<DataSection inactive={true} title="Type" slug="type" hash={hash}> <DataSection inactive={true} title="Type" slug="type" hash={hash}
<p className="data-intro">Coming soon&hellip;</p> helpLink="https://pollyhudson.wixsite.com/colouringlondon/type">
<p className="data-intro">Coming soon&hellip; Click the ? for more info.</p>
</DataSection> </DataSection>
<DataSection title="Age" slug="age" hash={hash}> <DataSection title="Age" slug="age" hash={hash}
helpLink="https://pollyhudson.wixsite.com/colouringlondon/age">
<dl className="data-list"> <dl className="data-list">
<dt>Year built (best estimate)</dt> <dt>Year built (best estimate)</dt>
<dd>{props.date_year? props.date_year : '-'}</dd> <dd>{props.date_year? props.date_year : '-'}</dd>
@ -87,7 +105,8 @@ const BuildingView = function(props){
<dd>{props.date_facade? props.date_facade : '-'}</dd> <dd>{props.date_facade? props.date_facade : '-'}</dd>
</dl> </dl>
</DataSection> </DataSection>
<DataSection title="Size" slug="size" hash={hash}> <DataSection title="Size" slug="size" hash={hash}
helpLink="https://pollyhudson.wixsite.com/colouringlondon/shape">
<dl className="data-list"> <dl className="data-list">
<dt>Total storeys</dt> <dt>Total storeys</dt>
<dd>{(props.size_storeys_attic + props.size_storeys_basement + props.size_storeys_core)}</dd> <dd>{(props.size_storeys_attic + props.size_storeys_basement + props.size_storeys_core)}</dd>
@ -107,28 +126,36 @@ const BuildingView = function(props){
<dd>{props.size_width_frontage? props.size_width_frontage : '-'}</dd> <dd>{props.size_width_frontage? props.size_width_frontage : '-'}</dd>
</dl> </dl>
</DataSection> </DataSection>
<DataSection inactive={true} title="Shape &amp; Position" slug="form" hash={hash}> <DataSection inactive={true} title="Shape &amp; Position" slug="form" hash={hash}
<p className="data-intro">Coming soon&hellip;</p> helpLink="https://pollyhudson.wixsite.com/colouringlondon/form">
<p className="data-intro">Coming soon&hellip; Click the ? for more info.</p>
</DataSection> </DataSection>
<DataSection inactive={true} title="Build Team" slug="build-team" hash={hash}> <DataSection inactive={true} title="Build Team" slug="build-team" hash={hash}
<p className="data-intro">Coming soon&hellip;</p> helpLink="https://pollyhudson.wixsite.com/colouringlondon/builder">
<p className="data-intro">Coming soon&hellip; Click the ? for more info.</p>
</DataSection> </DataSection>
<DataSection inactive={true} title="Construction &amp; Design" slug="construction" hash={hash}> <DataSection inactive={true} title="Construction &amp; Design" slug="construction" hash={hash}
<p className="data-intro">Coming soon&hellip;</p> helpLink="https://pollyhudson.wixsite.com/colouringlondon/contstruction">
<p className="data-intro">Coming soon&hellip; Click the ? for more info.</p>
</DataSection> </DataSection>
<DataSection inactive={true} title="Energy" slug="energy" hash={hash}> <DataSection inactive={true} title="Energy" slug="energy" hash={hash}
<p className="data-intro">Coming soon&hellip;</p> helpLink="https://pollyhudson.wixsite.com/colouringlondon/energy">
<p className="data-intro">Coming soon&hellip; Click the ? for more info.</p>
</DataSection> </DataSection>
<DataSection inactive={true} title="Greenery" slug="greenery" hash={hash}> <DataSection inactive={true} title="Greenery" slug="greenery" hash={hash}
<p className="data-intro">Coming soon&hellip;</p> helpLink="https://pollyhudson.wixsite.com/colouringlondon/copy-of-street-context">
<p className="data-intro">Coming soon&hellip; Click the ? for more info.</p>
</DataSection> </DataSection>
<DataSection inactive={true} title="Planning &amp; Protection" slug="planning" hash={hash}> <DataSection inactive={true} title="Planning &amp; Protection" slug="planning" hash={hash}
<p className="data-intro">Coming soon&hellip;</p> helpLink="https://pollyhudson.wixsite.com/colouringlondon/planning">
<p className="data-intro">Coming soon&hellip; Click the ? for more info.</p>
</DataSection> </DataSection>
<DataSection inactive={true} title="Demolition" slug="demolition" hash={hash}> <DataSection inactive={true} title="Demolition" slug="demolition" hash={hash}
<p className="data-intro">Coming soon&hellip;</p> helpLink="https://pollyhudson.wixsite.com/colouringlondon/demolitions">
<p className="data-intro">Coming soon&hellip; Click the ? for more info.</p>
</DataSection> </DataSection>
<DataSection title="Like Me!" slug="like" hash={hash}> <DataSection title="Like Me!" slug="like" hash={hash}
helpLink="https://pollyhudson.wixsite.com/colouringlondon/likeme">
<dl className="data-list"> <dl className="data-list">
<dt>Likes</dt> <dt>Likes</dt>
<dd>{props.likes ? props.likes.length : 0}</dd> <dd>{props.likes ? props.likes.length : 0}</dd>

3
app/src/frontend/icons.js
View File

@ -4,7 +4,8 @@
import React from 'react' import React from 'react'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faQuestionCircle, faPaintBrush, faInfoCircle, faTimes, faCheck, faAngleLeft, faCaretDown } from '@fortawesome/free-solid-svg-icons' import { faQuestionCircle, faPaintBrush, faInfoCircle, faTimes, faCheck, faCheckDouble,
faAngleLeft, faCaretDown } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faQuestionCircle, faQuestionCircle,

45
app/src/frontend/main.css
View File

@ -53,6 +53,50 @@
.bullet-prefix.active:hover::before { .bullet-prefix.active:hover::before {
content: '\25A0'; content: '\25A0';
} }
.icon-button {
display: inline-block;
width: 1.8rem;
height: 1.8rem;
padding: 0;
outline: none;
border: none;
border-radius: 0.9rem;
margin: 0 0.05rem;
background-color: transparent;
transition: background-color 0.2s;
color: #222;
vertical-align: top;
text-align: center;
}
.icon-button svg {
transition: color 0.2s;
color: #222;
margin-top: 2px;
width: 1rem;
height: 1rem;
display: inline-block;
vertical-align: middle;
}
.icon-button:hover {
background-color: #fff;
}
.icon-button.edit:hover svg {
color: rgb(11, 247, 255);
}
.icon-button.help:hover svg {
color: rgb(255, 11, 222);
}
.icon-button.tooltip-hint:hover svg {
color: rgb(11, 255, 72);
}
.section-header .icon-button {
float: right;
margin-top: -2px;
}
.data-section { .data-section {
border-top: 1px solid #ffffff; border-top: 1px solid #ffffff;
} }
@ -73,6 +117,7 @@
.data-list { .data-list {
margin: 0; margin: 0;
padding-left: 0.75rem; padding-left: 0.75rem;
padding-right: 0.5rem;
} }
.legend .data-list { .legend .data-list {
padding-left: 2.25rem; padding-left: 2.25rem;

40
app/src/frontend/tooltip.css
View File

@ -1,30 +1,24 @@
.tooltip-hook { .tooltip-hint {
display: inline-block;
position: relative;
cursor: pointer; cursor: pointer;
color: #222; }
background: #fff; .tooltip-wrap {
border: 1px solid #222; float: right;
width: 22px; position: relative;
height: 22px; top: -5px;
border-radius: 11px; }
padding: 0 0 0 1px; .tooltip-wrap .icon-button svg {
font-size: 0.8rem; width: 1rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; height: 1rem;
text-align: center; margin-top: -2px;
} }
.tooltip { .tooltip {
display: none; text-transform: none;
text-align: left;
width: 11em;
right: 0;
top: 27px;
opacity: 1; opacity: 1;
min-width: 11em;
left: -3px;
top: 25px;
} }
.tooltip .arrow { .tooltip .arrow {
left: 5px; right: 7px;
}
.tooltip-hook:hover .tooltip,
.tooltip-hook:hover + .tooltip {
display: block;
opacity: 1;
} }

49
app/src/frontend/tooltip.js
View File

@ -1,15 +1,44 @@
import React from 'react'; import React, { Component, Fragment } from 'react';
import './tooltip.css'; import './tooltip.css';
import { HelpIcon } from './icons';
const Tooltip = (props) => ( class Tooltip extends Component {
<span className="tooltip-hook" data-toggle="tooltip"> constructor(props) {
? super(props);
<div className="tooltip bs-tooltip-bottom"> this.state = {
<div className="arrow"></div> active: false
<div className="tooltip-inner">{props.text}</div> };
</div> this.handleClick = this.handleClick.bind(this);
</span> }
);
handleClick(event) {
event.preventDefault();
this.setState({
active: !this.state.active
});
}
render() {
console.log(this.state, this.props)
return (
<div className="tooltip-wrap">
<button className="tooltip-hint icon-button" title={this.props.text}
onClick={this.handleClick}>
<HelpIcon />
</button>
{
this.state.active?
(
<div className="tooltip bs-tooltip-bottom">
<div className="arrow"></div>
<div className="tooltip-inner">{this.props.text}</div>
</div>
)
: null
}
</div>
);
}
}
export default Tooltip; export default Tooltip;