Use icon buttons for edit/info/tooltip

2018-10-01 16:59:39 +01:00 · 2018-10-01 16:59:39 +01:00 · a012b24bd1
commit a012b24bd1
parent 86e30b1012
5 changed files with 161 additions and 65 deletions
--- a/app/src/frontend/building-view.js
+++ b/app/src/frontend/building-view.js
@ -4,25 +4,40 @@ import { Link, NavLink } from 'react-router-dom';
 import Sidebar from './sidebar';
 import Tooltip from './tooltip';
 import InfoBox from './info-box';
+import { InfoIcon, EditIcon } from './icons';


 const DataSection = function(props){
    const match = props.hash && props.slug.match(props.hash);
    return (
        <section className={(props.inactive)? "data-section inactive": "data-section"}>
-            <NavLink className="bullet-prefix" to={(match)? '#': `#${props.slug}`}
-                     isActive={() => match}>
-                <h3 className="h3">{props.title}</h3>
-            </NavLink>
+            <header className="bullet-prefix section-header" isActive={() => match}>
+                <NavLink to={(match)? '#': `#${props.slug}`}>
+                    <h3 className="h3">{props.title}</h3>
+                </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.inactive)?
                    <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`} className="btn btn-primary">Edit data</Link>
+                        <Link to={`/building/${props.building_id}/edit.html#${props.slug}`} className="btn btn-primary">Edit data</Link>
                    </div>
                : null
-            }</Fragment>
+            }
        </section>
    );
 }
@ -41,13 +56,13 @@ const BuildingView = function(props){
    const hash = (props.location && props.location.hash)? props.location.hash.replace('#', ''): undefined;
    return (
        <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">

                    Section introduction of up to roughly 100 characters will take
                    approx&shy;imately this much space.

-                    <a href="/">Read more</a>.
                </p>
                <dl id="data-list-location" className="data-list collapse show">
                    <dt>
@ -67,13 +82,16 @@ const BuildingView = function(props){
                    <dd>{props.location_postcode ? props.location_postcode : '-'}</dd>
                </dl>
            </DataSection>
-            <DataSection inactive={true} title="Use" slug="use" hash={hash}>
-                <p className="data-intro">Coming soon&hellip;</p>
+            <DataSection inactive={true} title="Use" slug="use" hash={hash}
+                         helpLink="https://pollyhudson.wixsite.com/colouringlondon/use">
+                <p className="data-intro">Coming soon&hellip; Click the ? for more info.</p>
            </DataSection>
-            <DataSection inactive={true} title="Type" slug="type" hash={hash}>
-                <p className="data-intro">Coming soon&hellip;</p>
+            <DataSection inactive={true} title="Type" slug="type" hash={hash}
+                         helpLink="https://pollyhudson.wixsite.com/colouringlondon/type">
+                <p className="data-intro">Coming soon&hellip; Click the ? for more info.</p>
            </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">
                    <dt>Year built (best estimate)</dt>
                    <dd>{props.date_year? props.date_year : '-'}</dd>
@ -87,7 +105,8 @@ const BuildingView = function(props){
                    <dd>{props.date_facade? props.date_facade : '-'}</dd>
                </dl>
            </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">
                    <dt>Total storeys</dt>
                    <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>
                </dl>
            </DataSection>
-            <DataSection inactive={true} title="Shape &amp; Position" slug="form" hash={hash}>
-                <p className="data-intro">Coming soon&hellip;</p>
+            <DataSection inactive={true} title="Shape &amp; Position" slug="form" hash={hash}
+                         helpLink="https://pollyhudson.wixsite.com/colouringlondon/form">
+                <p className="data-intro">Coming soon&hellip; Click the ? for more info.</p>
            </DataSection>
-            <DataSection inactive={true} title="Build Team" slug="build-team" hash={hash}>
-                <p className="data-intro">Coming soon&hellip;</p>
+            <DataSection inactive={true} title="Build Team" slug="build-team" hash={hash}
+                         helpLink="https://pollyhudson.wixsite.com/colouringlondon/builder">
+                <p className="data-intro">Coming soon&hellip; Click the ? for more info.</p>
            </DataSection>
-            <DataSection inactive={true} title="Construction &amp; Design" slug="construction" hash={hash}>
-                <p className="data-intro">Coming soon&hellip;</p>
+            <DataSection inactive={true} title="Construction &amp; Design" slug="construction" hash={hash}
+                         helpLink="https://pollyhudson.wixsite.com/colouringlondon/contstruction">
+                <p className="data-intro">Coming soon&hellip; Click the ? for more info.</p>
            </DataSection>
-            <DataSection inactive={true} title="Energy" slug="energy" hash={hash}>
-                <p className="data-intro">Coming soon&hellip;</p>
+            <DataSection inactive={true} title="Energy" slug="energy" hash={hash}
+                         helpLink="https://pollyhudson.wixsite.com/colouringlondon/energy">
+                <p className="data-intro">Coming soon&hellip; Click the ? for more info.</p>
            </DataSection>
-            <DataSection inactive={true} title="Greenery" slug="greenery" hash={hash}>
-                <p className="data-intro">Coming soon&hellip;</p>
+            <DataSection inactive={true} title="Greenery" slug="greenery" hash={hash}
+                         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 inactive={true} title="Planning &amp; Protection" slug="planning" hash={hash}>
-                <p className="data-intro">Coming soon&hellip;</p>
+            <DataSection inactive={true} title="Planning &amp; Protection" slug="planning" hash={hash}
+                         helpLink="https://pollyhudson.wixsite.com/colouringlondon/planning">
+                <p className="data-intro">Coming soon&hellip; Click the ? for more info.</p>
            </DataSection>
-            <DataSection inactive={true} title="Demolition" slug="demolition" hash={hash}>
-                <p className="data-intro">Coming soon&hellip;</p>
+            <DataSection inactive={true} title="Demolition" slug="demolition" hash={hash}
+                         helpLink="https://pollyhudson.wixsite.com/colouringlondon/demolitions">
+                <p className="data-intro">Coming soon&hellip; Click the ? for more info.</p>
            </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">
                    <dt>Likes</dt>
                    <dd>{props.likes ? props.likes.length : 0}</dd>
--- a/app/src/frontend/icons.js
+++ b/app/src/frontend/icons.js
@ -4,7 +4,8 @@
 import React from 'react'
 import { library } from '@fortawesome/fontawesome-svg-core'
 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(
    faQuestionCircle,
--- a/app/src/frontend/main.css
+++ b/app/src/frontend/main.css
@ -53,6 +53,50 @@
 .bullet-prefix.active:hover::before {
    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 {
    border-top: 1px solid #ffffff;
 }
@ -73,6 +117,7 @@
 .data-list {
    margin: 0;
    padding-left: 0.75rem;
+    padding-right: 0.5rem;
 }
 .legend .data-list {
    padding-left: 2.25rem;
--- a/app/src/frontend/tooltip.css
+++ b/app/src/frontend/tooltip.css
@ -1,30 +1,24 @@
-.tooltip-hook {
-    display: inline-block;
-    position: relative;
+.tooltip-hint {
    cursor: pointer;
-    color: #222;
-    background: #fff;
-    border: 1px solid #222;
-    width: 22px;
-    height: 22px;
-    border-radius: 11px;
-    padding: 0 0 0 1px;
-    font-size: 0.8rem;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    text-align: center;
+}
+.tooltip-wrap {
+    float: right;
+    position: relative;
+    top: -5px;
+}
+.tooltip-wrap .icon-button svg {
+    width: 1rem;
+    height: 1rem;
+    margin-top: -2px;
 }
 .tooltip {
-    display: none;
+    text-transform: none;
+    text-align: left;
+    width: 11em;
+    right: 0;
+    top: 27px;
    opacity: 1;
-    min-width: 11em;
-    left: -3px;
-    top: 25px;
 }
 .tooltip .arrow {
-    left: 5px;
-}
-.tooltip-hook:hover .tooltip,
-.tooltip-hook:hover + .tooltip {
-    display: block;
-    opacity: 1;
+    right: 7px;
 }
--- a/app/src/frontend/tooltip.js
+++ b/app/src/frontend/tooltip.js
@ -1,15 +1,44 @@
-import React from 'react';
+import React, { Component, Fragment } from 'react';

 import './tooltip.css';
+import { HelpIcon } from './icons';

-const Tooltip = (props) => (
-    <span className="tooltip-hook" data-toggle="tooltip">
-        ?
-        <div className="tooltip bs-tooltip-bottom">
-            <div className="arrow"></div>
-            <div className="tooltip-inner">{props.text}</div>
-        </div>
-    </span>
-);
+class Tooltip extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            active: false
+        };
+        this.handleClick = this.handleClick.bind(this);
+    }

+    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;