mirror of
https://github.com/status-im/fathom.git
synced 2025-03-01 03:20:27 +00:00
add functioning modal that opens on gearwheel click
This commit is contained in:
Danny van Kooten
parent
6db0edc8dc
commit
c0448d9719
@ -5,29 +5,10 @@ import Client from '../lib/client.js';
|
||||
import { bind } from 'decko';
|
||||
|
||||
class Gearwheel extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchData();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
}
|
||||
|
||||
@bind
|
||||
fetchData() {
|
||||
|
||||
}
|
||||
|
||||
render(props, state) {
|
||||
return (
|
||||
<li class="settings">
|
||||
<a href="#"><svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z"></path></svg></a>
|
||||
<a href="javascript:void(0);" onClick={props.onClick}><svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z"></path></svg></a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
@ -8,19 +8,25 @@ class SiteSettings extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {}
|
||||
|
||||
this.state = {
|
||||
copied: false,
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchData();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
}
|
||||
componentDidMount() {}
|
||||
componentWillUnmount() {}
|
||||
|
||||
@bind
|
||||
fetchData() {
|
||||
copyToClipboard(evt) {
|
||||
this.textarea.select()
|
||||
document.execCommand('copy')
|
||||
this.setState({ copied: true })
|
||||
window.setTimeout(() => { this.setState({copied: false})}, 2400)
|
||||
}
|
||||
|
||||
@bind
|
||||
deleteSite(evt) {
|
||||
|
||||
}
|
||||
|
||||
@ -29,20 +35,29 @@ class SiteSettings extends Component {
|
||||
console.log(evt)
|
||||
}
|
||||
|
||||
@bind
|
||||
maybeClose(evt) {
|
||||
if ( evt.target.matches('.modal *, .modal')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.props.onClose()
|
||||
}
|
||||
|
||||
render(props, state) {
|
||||
return (
|
||||
<div class="modal-wrap" style={"display: " + ( props.visible ? '' : 'none')}>
|
||||
<div class="modal">
|
||||
<p>Update your site name or get your tracking code</p>
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<fieldset>
|
||||
<label>Site Name</label>
|
||||
<input type="text" name="site-name" id="sitename" placeholder="" value="Paul Jarvis" />
|
||||
</fieldset>
|
||||
<div class="modal-wrap" style={"display: " + ( props.visible ? '' : 'none')} onClick={this.maybeClose}>
|
||||
<div class="modal">
|
||||
<p>Update your site name or get your tracking code</p>
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<fieldset>
|
||||
<label>Site Name</label>
|
||||
<input type="text" name="site-name" id="sitename" placeholder="" value="Paul Jarvis" />
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<label>Add this code to your website</label>
|
||||
<textarea onclick={(evt) => evt.target.select() } readonly="readonly">{`<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
|
||||
<fieldset>
|
||||
<label>Add this code to your website</label>
|
||||
<textarea ref={(el) => { this.textarea = el }} onClick={(evt) => evt.target.select() } readonly="readonly">{`<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
|
||||
<script>
|
||||
(function(f, a, t, h, o, m){
|
||||
a[h]=a[h]||function(){
|
||||
@ -56,20 +71,19 @@ class SiteSettings extends Component {
|
||||
fathom('trackPageview');
|
||||
</script>
|
||||
<!-- / Fathom -->`}
|
||||
</textarea>
|
||||
<small><a href="#">Copy code</a></small>
|
||||
</fieldset>
|
||||
</textarea>
|
||||
<small><a href="javascript:void(0);" onClick={this.copyToClipboard}>{state.copied ? "Copied!" : "Copy code"}</a></small>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<div class="half">
|
||||
<div class="submit"><button type="submit">Update site name</button></div>
|
||||
<div class="delete"><a href="#">Delete site</a></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
<fieldset>
|
||||
<div class="half">
|
||||
<div class="submit"><button type="submit">Update site name</button></div>
|
||||
<div class="delete"><a href="javascript:void(0);" onClick={this.deleteSite}>Delete site</a></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -20,17 +20,35 @@ class Dashboard extends Component {
|
||||
before: 0,
|
||||
after: 0,
|
||||
isPublic: document.cookie.indexOf('auth') < 0,
|
||||
site: {},
|
||||
settingsOpen: false,
|
||||
}
|
||||
}
|
||||
|
||||
@bind
|
||||
updateDateRange(s) {
|
||||
changeDateRange(s) {
|
||||
this.setState({
|
||||
before: s.before,
|
||||
after: s.after
|
||||
})
|
||||
}
|
||||
|
||||
@bind
|
||||
openSiteSettings() {
|
||||
this.setState({ settingsOpen: true })
|
||||
}
|
||||
|
||||
@bind
|
||||
closeSiteSettings() {
|
||||
this.setState({settingsOpen: false})
|
||||
}
|
||||
|
||||
@bind
|
||||
changeSite(evt) {
|
||||
console.log(evt)
|
||||
}
|
||||
|
||||
|
||||
render(props, state) {
|
||||
// only show logout link if this dashboard is not public
|
||||
let logoutMenuItem = state.isPublic ? '' : (
|
||||
@ -44,8 +62,8 @@ class Dashboard extends Component {
|
||||
<nav class="main-nav animated fadeInDown">
|
||||
<ul>
|
||||
<li class="logo"><a href="/">Fathom</a></li>
|
||||
<SiteSwitcher />
|
||||
<Gearwheel />
|
||||
<SiteSwitcher onChange={this.changeSite} onAdd={this.openSiteSettings} />
|
||||
<Gearwheel onClick={this.openSiteSettings} />
|
||||
<li class="visitors"><Realtime /></li>
|
||||
</ul>
|
||||
</nav>
|
||||
@ -53,7 +71,7 @@ class Dashboard extends Component {
|
||||
|
||||
<section class="section animated fadeInUp delayed_02s">
|
||||
<nav class="date-nav">
|
||||
<DatePicker onChange={this.updateDateRange} />
|
||||
<DatePicker onChange={this.changeDateRange} />
|
||||
</nav>
|
||||
|
||||
<div class="boxes">
|
||||
@ -79,7 +97,7 @@ class Dashboard extends Component {
|
||||
|
||||
<footer class="section"></footer>
|
||||
|
||||
<SiteSettings visible={false} site={{ name: "Test", id: 50}} />
|
||||
<SiteSettings visible={state.settingsOpen} onClose={this.closeSiteSettings} site={{ name: "Test", id: 50}} />
|
||||
</div>
|
||||
)}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user