opensource/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash.git synced 2025-11-01 19:32:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

improve (admin): loading indicator

Browse Source
This commit is contained in:
Mickael Kerjean
2020-06-16 14:59:14 +10:00
parent a0b841d8e6
commit 538c5f23d1
3 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
client/pages/adminpage.js
View File

@ -53,19 +53,24 @@ export class AdminPage extends React.Component {
constructor(props){
super(props);
this.state = {
isAdmin: null
isAdmin: null,
isSaving: false
};
}
isSaving(yesOrNo){
this.setState({isSaving: yesOrNo});
}
render(){
return (
<div className="component_page_admin">
<SideMenu url={this.props.match.url}/>
<SideMenu url={this.props.match.url} isLoading={this.state.isSaving}/>
<div className="page_container scroll-y">
<ReactCSSTransitionGroup key={window.location.pathname} transitionName="adminpage" transitionLeave={true} transitionEnter={true} transitionLeaveTimeout={15000} transitionEnterTimeout={20000} transitionAppear={true} transitionAppearTimeout={20000}>
<Switch>
<Route path={this.props.match.url + "/dashboard"} component={DashboardPage} />
<Route path={this.props.match.url + "/configure"} component={ConfigPage} />
<Route path={this.props.match.url + "/configure"} render={()=><ConfigPage isSaving={this.isSaving.bind(this)}/>} />
<Route path={this.props.match.url + "/activity"} component={LogPage} />
<Route path={this.props.match.url + "/plugins"} component={PluginPage} />
<Route path={this.props.match.url + "/support"} component={SupportPage} />
@ -82,10 +87,16 @@ export class AdminPage extends React.Component {
const SideMenu = (props) => {
return (
<div className="component_menu_sidebar no-select">
<NavLink to="/" className="header">
<Icon name="arrow_left" />
<img src="/assets/logo/android-chrome-512x512.png" />
</NavLink>
{ props.isLoading ?
<div className="header">
<Icon name="arrow_left" style={{"opacity": 0}}/>
<Icon name="loading" />
</div> :
<NavLink to="/" className="header">
<Icon name="arrow_left" />
<img src="/assets/logo/android-chrome-512x512.png" />
</NavLink>
}
<h2>{ t("Admin console") }</h2>
<ul>
<li>

2
client/pages/adminpage.scss
View File

@ -121,6 +121,8 @@
}
}
.header{
display: block;
height: 40px;
img{
width: 40px;
height: 40px;

12
client/pages/adminpage/config.js
View File

@ -1,7 +1,8 @@
import React from 'react';
import { FormBuilder } from '../../components/';
import { Config } from '../../model/';
import { format } from '../../helpers';
import { format, notify } from '../../helpers';
import { t } from '../../locales/';
export class ConfigPage extends React.Component {
constructor(props){
@ -36,8 +37,13 @@ export class ConfigPage extends React.Component {
onChange(form){
form.connections = window.CONFIG.connections;
Config.save(form);
this.setState({refresh: Math.random()});
this.props.isSaving(true);
Config.save(form, true, () => {
this.props.isSaving(false);
}, (err) => {
notify.send(err || t('Oops'), 'error');
this.props.isSaving(false);
});
}
render(){