mirror of https://github.com/status-im/fathom.git
make SiteSwitcher work on touch devices (#164)
This commit is contained in:
parent
a9ed76f4d4
commit
036c369333
|
@ -4,6 +4,13 @@ import { h, Component } from 'preact';
|
||||||
import { bind } from 'decko';
|
import { bind } from 'decko';
|
||||||
|
|
||||||
class SiteSwitcher extends Component {
|
class SiteSwitcher extends Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
isExpanded: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
@bind
|
@bind
|
||||||
selectSite(evt) {
|
selectSite(evt) {
|
||||||
let itemId = evt.target.getAttribute("data-id")
|
let itemId = evt.target.getAttribute("data-id")
|
||||||
|
@ -22,6 +29,27 @@ class SiteSwitcher extends Component {
|
||||||
this.props.onAdd({ id: 1, name: "New site", unsaved: true })
|
this.props.onAdd({ id: 1, name: "New site", unsaved: true })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@bind
|
||||||
|
expand() {
|
||||||
|
this.setState({
|
||||||
|
isExpanded: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
@bind
|
||||||
|
collapse() {
|
||||||
|
this.setState({
|
||||||
|
isExpanded: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
@bind
|
||||||
|
toggleExpanded() {
|
||||||
|
this.setState({
|
||||||
|
isExpanded: !this.state.isExpanded
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
render(props, state) {
|
render(props, state) {
|
||||||
// show nothing if there is only 1 site and no option to add additional sites
|
// show nothing if there is only 1 site and no option to add additional sites
|
||||||
if(!props.showAdd && props.sites.length == 1) {
|
if(!props.showAdd && props.sites.length == 1) {
|
||||||
|
@ -30,7 +58,7 @@ class SiteSwitcher extends Component {
|
||||||
|
|
||||||
// otherwise, render list of sites + add button
|
// otherwise, render list of sites + add button
|
||||||
return (
|
return (
|
||||||
<li class="sites">
|
<li class={`sites ${state.isExpanded ? 'expanded' : ''}`} onClick={this.toggleExpanded} onMouseEnter={this.expand} onMouseLeave={this.collapse}>
|
||||||
<a href="javascript:void(0)">{props.selectedSite.name}</a>
|
<a href="javascript:void(0)">{props.selectedSite.name}</a>
|
||||||
<ul>
|
<ul>
|
||||||
{props.sites.map((s) => (<li class="site-switch"><a href="javascript:void(0);" data-id={s.id} onClick={this.selectSite}>{s.name}</a></li>)) }
|
{props.sites.map((s) => (<li class="site-switch"><a href="javascript:void(0);" data-id={s.id} onClick={this.selectSite}>{s.name}</a></li>)) }
|
||||||
|
|
|
@ -43,10 +43,10 @@ body { font: 400 16px "overpass", sans-serif; color: #222; text-align: center; p
|
||||||
nav li.logo a:hover { color: #222; }
|
nav li.logo a:hover { color: #222; }
|
||||||
|
|
||||||
nav li.sites { background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23533feb' d='M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z'%3E%3C/path%3E%3C/svg%3E") 97% 8px no-repeat; border-radius: 4px; padding: 8px; background-size: 10px auto; }
|
nav li.sites { background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23533feb' d='M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z'%3E%3C/path%3E%3C/svg%3E") 97% 8px no-repeat; border-radius: 4px; padding: 8px; background-size: 10px auto; }
|
||||||
nav li.sites:hover { background: #533feb url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23fff' d='M168.5 164.2l148 146.8c4.7 4.7 4.7 12.3 0 17l-19.8 19.8c-4.7 4.7-12.3 4.7-17 0L160 229.3 40.3 347.8c-4.7 4.7-12.3 4.7-17 0L3.5 328c-4.7-4.7-4.7-12.3 0-17l148-146.8c4.7-4.7 12.3-4.7 17 0z'%3E%3C/path%3E%3C/svg%3E") 97% 8px no-repeat; background-size: 10px auto; }
|
nav li.sites.expanded { background: #533feb url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23fff' d='M168.5 164.2l148 146.8c4.7 4.7 4.7 12.3 0 17l-19.8 19.8c-4.7 4.7-12.3 4.7-17 0L160 229.3 40.3 347.8c-4.7 4.7-12.3 4.7-17 0L3.5 328c-4.7-4.7-4.7-12.3 0-17l148-146.8c4.7-4.7 12.3-4.7 17 0z'%3E%3C/path%3E%3C/svg%3E") 97% 8px no-repeat; background-size: 10px auto; }
|
||||||
nav li ul { display: none; position: absolute; z-index: 1001; width: 100%; background: #533feb; border-radius: 4px; padding: 8px 0; margin: 0 0 0 -8px; }
|
nav li ul { display: none; position: absolute; z-index: 1001; width: 100%; background: #533feb; border-radius: 4px; padding: 8px 0; margin: 0 0 0 -8px; }
|
||||||
nav li:hover ul { display: block; box-shadow: 0 2px 8px 0 rgba(34,34,34,.10); }
|
nav li.expanded ul { display: block; box-shadow: 0 2px 8px 0 rgba(34,34,34,.10); }
|
||||||
nav li.sites:hover a { color: #fff; }
|
nav li.sites.expanded a { color: #fff; }
|
||||||
nav li ul li { padding: 0 4px; width: 100%; }
|
nav li ul li { padding: 0 4px; width: 100%; }
|
||||||
nav li ul a { color: #ddd; display: inline-block; width: 100%; font-size: 13px; padding: 4px; }
|
nav li ul a { color: #ddd; display: inline-block; width: 100%; font-size: 13px; padding: 4px; }
|
||||||
nav li ul a:hover { background: rgba(255,255,255,.2); border-radius: 2px; }
|
nav li ul a:hover { background: rgba(255,255,255,.2); border-radius: 2px; }
|
||||||
|
@ -117,7 +117,7 @@ body { font: 400 16px "overpass", sans-serif; color: #222; text-align: center; p
|
||||||
nav li { display: inline-block; position: relative; margin-right: 16px; }
|
nav li { display: inline-block; position: relative; margin-right: 16px; }
|
||||||
nav li.sites { width: 204px; margin-right: 0; }
|
nav li.sites { width: 204px; margin-right: 0; }
|
||||||
nav li.sites, nav li.settings { float: right; }
|
nav li.sites, nav li.settings { float: right; }
|
||||||
nav li.sites, nav li.sites:hover { background-position: 184px 8px; }
|
nav li.sites, nav li.sites.expanded { background-position: 184px 8px; }
|
||||||
|
|
||||||
nav .date-nav li { margin-right: 8px; }
|
nav .date-nav li { margin-right: 8px; }
|
||||||
nav li ul { width: 204px; right: 0; margin: 0; }
|
nav li ul { width: 204px; right: 0; margin: 0; }
|
||||||
|
|
Loading…
Reference in New Issue