secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Scolling rules

Browse Source
This commit is contained in:
James Barnsley
2018-10-25 17:00:49 +13:00
parent 99b700d5aa
commit d5a96fe716
16 changed files with 13852 additions and 10508 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/js/components/GridItem.js
View File

@ -25,6 +25,11 @@ export default class GridItem extends React.Component{
handleClick(e){
if (this.props.onClick && e.target.tagName.toLowerCase() !== 'a'){
// Scroll to the top
helpers.scrollToTop();
// And then trigger the click event
this.props.onClick(e);
}
}

11
src/js/components/Link.js
View File

@ -2,6 +2,8 @@
import React from 'react';
import {Link} from 'react-router';
import * as helpers from '../helpers';
/**
* Extends react-router's Link but provides the ability to hook in to the navigation event
* which lets us scroll to the top of our <main> for a more traditional navigation experience
@ -14,7 +16,14 @@ export default class extends React.Component{
handleClick(e){
if (!this.props.retainScroll){
document.getElementById('main').scrollTo(0, 0);
if (this.props.scrollTo){
var element = document.getElementById(this.props.scrollTo);
if (element){
element.scrollIntoView();
}
} else {
helpers.scrollToTop();
}
}
}

12
src/js/components/Services.js
View File

@ -295,9 +295,9 @@ class Services extends React.Component{
}
return (
<div className="menu">
<div className="menu" id="services-menu">
<div className="menu__inner">
<Link className={"menu-item"+(this.props.active == 'spotify' ? ' menu-item--active' : '')} to={this.props.active == 'spotify' ? global.baseURL+'settings' : global.baseURL+'settings/service/spotify'}>
<Link className={"menu-item"+(this.props.active == 'spotify' ? ' menu-item--active' : '')} to={this.props.active == 'spotify' ? global.baseURL+'settings' : global.baseURL+'settings/service/spotify'} scrollTo="services-menu">
<div className="menu-item__inner">
{spotify_icon}
<div className="menu-item__title">
@ -306,7 +306,7 @@ class Services extends React.Component{
{this.props.spotify.authorization ? <span className="status green-text">Authorized</span> : <span className="status mid_grey-text">Read-only</span>}
</div>
</Link>
<Link className={"menu-item"+(this.props.active == 'lastfm' ? ' menu-item--active' : '')} to={this.props.active == 'lastfm' ? global.baseURL+'settings' : global.baseURL+'settings/service/lastfm'}>
<Link className={"menu-item"+(this.props.active == 'lastfm' ? ' menu-item--active' : '')} to={this.props.active == 'lastfm' ? global.baseURL+'settings' : global.baseURL+'settings/service/lastfm'} scrollTo="services-menu">
<div className="menu-item__inner">
{lastfm_icon}
<div className="menu-item__title">
@ -315,7 +315,7 @@ class Services extends React.Component{
{this.props.lastfm.authorization ? <span className="status green-text">Authorized</span> : <span className="status mid_grey-text">Read-only</span>}
</div>
</Link>
<Link className={"menu-item"+(this.props.active == 'genius' ? ' menu-item--active' : '')} to={this.props.active == 'genius' ? global.baseURL+'settings' : global.baseURL+'settings/service/genius'}>
<Link className={"menu-item"+(this.props.active == 'genius' ? ' menu-item--active' : '')} to={this.props.active == 'genius' ? global.baseURL+'settings' : global.baseURL+'settings/service/genius'} scrollTo="services-menu">
<div className="menu-item__inner">
{genius_icon}
<div className="menu-item__title">
@ -324,7 +324,7 @@ class Services extends React.Component{
{this.props.genius.authorization ? <span className="status green-text">Authorized</span> : <span className="status mid_grey-text">Unauthorized</span>}
</div>
</Link>
<Link className={"menu-item"+(this.props.active == 'snapcast' ? ' menu-item--active' : '')} to={this.props.active == 'snapcast' ? global.baseURL+'settings' : global.baseURL+'settings/service/snapcast'}>
<Link className={"menu-item"+(this.props.active == 'snapcast' ? ' menu-item--active' : '')} to={this.props.active == 'snapcast' ? global.baseURL+'settings' : global.baseURL+'settings/service/snapcast'} scrollTo="services-menu">
<div className="menu-item__inner">
<Icon className="menu-item__icon" name="devices" />
<div className="menu-item__title">
@ -333,7 +333,7 @@ class Services extends React.Component{
{this.props.pusher.config.snapcast_enabled ? <span className="status green-text">Enabled</span> : <span className="status mid_grey-text">Disabled</span>}
</div>
</Link>
<Link className={"menu-item"+(this.props.active == 'icecast' ? ' menu-item--active' : '')} to={this.props.active == 'icecast' ? global.baseURL+'settings' : global.baseURL+'settings/service/icecast'}>
<Link className={"menu-item"+(this.props.active == 'icecast' ? ' menu-item--active' : '')} to={this.props.active == 'icecast' ? global.baseURL+'settings' : global.baseURL+'settings/service/icecast'} scrollTo="services-menu">
<div className="menu-item__inner">
<Icon className="menu-item__icon" name="wifi_tethering" />
<div className="menu-item__title">