Skip to content
Permalink
Browse files

make SiteSwitcher work on touch devices (#164)

  • Loading branch information...
samuelmeuli authored and dannyvankooten committed Oct 26, 2018
1 parent a9ed76f commit 036c36933360f3b1e5716c48b996bdcfa3e629cb
Showing with 33 additions and 5 deletions.
  1. +29 −1 assets/src/js/components/SiteSwitcher.js
  2. +4 −4 assets/src/sass/styles.scss
@@ -4,6 +4,13 @@ import { h, Component } from 'preact';
import { bind } from 'decko';

class SiteSwitcher extends Component {
constructor() {
super();
this.state = {
isExpanded: false
};
}

@bind
selectSite(evt) {
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 })
}

@bind
expand() {
this.setState({
isExpanded: true
});
}

@bind
collapse() {
this.setState({
isExpanded: false
});
}

@bind
toggleExpanded() {
this.setState({
isExpanded: !this.state.isExpanded
});
}

render(props, state) {
// show nothing if there is only 1 site and no option to add additional sites
if(!props.showAdd && props.sites.length == 1) {
@@ -30,7 +58,7 @@ class SiteSwitcher extends Component {

// otherwise, render list of sites + add button
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>
<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>)) }
@@ -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.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:hover ul { display: block; box-shadow: 0 2px 8px 0 rgba(34,34,34,.10); }
nav li.sites:hover a { color: #fff; }
nav li.expanded ul { display: block; box-shadow: 0 2px 8px 0 rgba(34,34,34,.10); }
nav li.sites.expanded a { color: #fff; }
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: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.sites { width: 204px; margin-right: 0; }
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 li ul { width: 204px; right: 0; margin: 0; }

0 comments on commit 036c369

Please sign in to comment.
You can’t perform that action at this time.