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

fix (UI): fix UI + improvements

Browse Source
This commit is contained in:
Mickael KERJEAN
2018-04-12 02:19:35 +10:00
parent d67c200af7
commit c41cb064b2
5 changed files with 39 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
client/helpers/dom.js
View File

@ -1,8 +1,15 @@
export function screenHeight(){ export function screenHeight(withMenuBar){
const $breadcrumb = document.querySelector(".component_breadcrumb"); const $breadcrumb = document.querySelector(".component_breadcrumb");
const $menubar = document.querySelector(".component_menubar"); let size = document.body.offsetHeight;
let size = document.body.clientHeight; if($breadcrumb){ size -= $breadcrumb.offsetHeight; }
if($breadcrumb){ size -= $breadcrumb.clientHeight; } return size;
if($menubar){ size -= $menubar.clientHeight; } }
export function screenHeightWithMenubar(){
const $breadcrumb = document.querySelector(".component_breadcrumb");
const $menubar = document.querySelector(".component_menubar");
let size = document.body.offsetHeight;
if($breadcrumb){ size -= $breadcrumb.offsetHeight; }
if($menubar){ size -= $menubar.offsetHeight; }
return size; return size;
} }

2
client/helpers/index.js
View File

@ -8,6 +8,6 @@ export { pathBuilder, basename, dirname } from './path';
export { memory } from './memory'; export { memory } from './memory';
export { prepare } from './navigate'; export { prepare } from './navigate';
export { invalidate, http_get, http_post, http_delete } from './ajax'; export { invalidate, http_get, http_post, http_delete } from './ajax';
export { screenHeight } from './dom'; export { screenHeight, screenHeightWithMenubar } from './dom';
export { prompt } from './prompt'; export { prompt } from './prompt';
export { notify } from './notify'; export { notify } from './notify';

17
client/pages/viewerpage/editor.js
View File

@ -20,6 +20,7 @@ import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/fold/foldgutter.css'; import 'codemirror/addon/fold/foldgutter.css';
import './editor.scss'; import './editor.scss';
import { debounce, screenHeightWithMenubar } from '../../helpers/';
export class Editor extends React.Component { export class Editor extends React.Component {
constructor(props){ constructor(props){
@ -27,8 +28,10 @@ export class Editor extends React.Component {
this.state = { this.state = {
loading: null, loading: null,
editor: null, editor: null,
filename: this.props.filename filename: this.props.filename,
height: 0
}; };
this.resetHeight = debounce(this.resetHeight.bind(this), 100);
} }
componentWillReceiveProps(props){ componentWillReceiveProps(props){
@ -77,12 +80,22 @@ export class Editor extends React.Component {
this.props.onSave && this.props.onSave(); this.props.onSave && this.props.onSave();
}; };
} }
this.resetHeight();
window.addEventListener("resize", this.resetHeight);
} }
componentWillUnmount(){ componentWillUnmount(){
this.state.editor.clearHistory(); this.state.editor.clearHistory();
window.removeEventListener("resize", this.resetHeight);
} }
resetHeight(){
this.setState({
height: screenHeightWithMenubar()
});
}
loadMode(file){ loadMode(file){
let ext = file.split('.').pop(), let ext = file.split('.').pop(),
mode = null; mode = null;
@ -134,7 +147,7 @@ export class Editor extends React.Component {
<Loader/> <Loader/>
</NgIf> </NgIf>
<NgIf cond={this.state.loading === false} style={{height: '100%'}}> <NgIf cond={this.state.loading === false} style={{height: '100%'}}>
<div id="editor" style={{height: '100%'}}></div> <div id="editor" style={{height: this.state.height+"px"}}></div>
</NgIf> </NgIf>
</div> </div>
); );

4
client/pages/viewerpage/editor.scss
View File

@ -1,7 +1,9 @@
.CodeMirror { .CodeMirror {
height: 100%; height: 100%;
color: #333333; color: #3b4045;
background: var(--bg-color); background: var(--bg-color);
font-size: 14px;
font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;
} }
.CodeMirror-scroll { -webkit-overflow-scrolling: touch; } .CodeMirror-scroll { -webkit-overflow-scrolling: touch; }

18
client/router.js
View File

@ -9,16 +9,14 @@ export default class AppRouter extends React.Component {
return ( return (
<div style={{height: '100%'}}> <div style={{height: '100%'}}>
<BrowserRouter> <BrowserRouter>
<div style={{height: '100%'}}> <Switch>
<Switch> <Route exact path="/" component={HomePage} />
<Route exact path="/" component={HomePage} /> <Route path="/login" component={ConnectPage} />
<Route path="/login" component={ConnectPage} /> <Route path="/files/:path*" component={FilesPage} />
<Route path="/files/:path*" component={FilesPage} /> <Route path="/view/:path*" component={ViewerPage} />
<Route path="/view/:path*" component={ViewerPage} /> <Route path="/logout" component={LogoutPage} />
<Route path="/logout" component={LogoutPage} /> <Route component={NotFoundPage} />
<Route component={NotFoundPage} /> </Switch>
</Switch>
</div>
</BrowserRouter> </BrowserRouter>
<ModalPrompt /> <ModalPrompt />
<Notification /> <Notification />