Backup_Repos/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash synced 2025-12-06 16:32:31 +01:00
Code Issues Projects Releases Wiki Activity

improvement (UI): incremental UI improvement

Browse source
This commit is contained in:
Mickael KERJEAN 2018-04-16 19:24:28 +10:00
parent 7e62478f6f
commit 227dc5567f
4 changed files with 35 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/pages/filespage/frequently_access.js
View file

@ -1,4 +1,6 @@
import React from 'react'; import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import { Container, Icon } from '../../components/'; import { Container, Icon } from '../../components/';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Path from 'path'; import Path from 'path';
@ -11,8 +13,9 @@ export class FrequentlyAccess extends React.Component {
} }
render(){ render(){
if(this.props.files.length < 4) return null; if(this.props.files.length < 1) return null;
return ( return (
<ReactCSSTransitionGroup transitionName="frequent-access" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={300}>
<Container> <Container>
<div className="component_frequently-access"> <div className="component_frequently-access">
{ {
@ -27,6 +30,7 @@ export class FrequentlyAccess extends React.Component {
} }
</div> </div>
</Container> </Container>
</ReactCSSTransitionGroup>
); );
} }
} }

15
client/pages/filespage/frequently_access.scss
View file

@ -1,7 +1,7 @@
.component_frequently-access{ .component_frequently-access{
display: flex; display: flex;
a{ a{
width: 50%; width: 33.33%;
background: var(--bg-color); background: var(--bg-color);
box-shadow: rgba(158, 163, 172, 0.3) 0px 19px 60px, rgba(158, 163, 172, 0.22) 0px 15px 20px; box-shadow: rgba(158, 163, 172, 0.3) 0px 19px 60px, rgba(158, 163, 172, 0.22) 0px 15px 20px;
overflow: hidden; overflow: hidden;
@ -26,5 +26,16 @@
@media (max-width: 750px){ a:nth-child(5){display: none;} } @media (max-width: 750px){ a:nth-child(5){display: none;} }
@media (max-width: 650px){ a:nth-child(4){display: none;} } @media (max-width: 650px){ a:nth-child(4){display: none;} }
@media (max-width: 450px){ a:nth-child(3){display: none;} } @media (max-width: 450px){ a:nth-child(3){display: none;} }
}
.frequent-access-appear{
opacity: 0;
transform: translateX(5px);
}
.frequent-access-appear.frequent-access-appear-active{
opacity: 1;
transform: translateX(0px);
transition: all 0.3s ease-out;
} }

2
client/pages/viewerpage/menubar.js
View file

@ -10,7 +10,7 @@ export const MenuBar = (props) => {
return ( return (
<div className="component_menubar"> <div className="component_menubar">
<Container> <Container>
<ReactCSSTransitionGroup transitionName="menubar" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={150}> <ReactCSSTransitionGroup transitionName="menubar" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={350}>
<DownloadButton link={props.download} name={props.title} /> <DownloadButton link={props.download} name={props.title} />
<span style={{letterSpacing: '0.3px'}}>{props.title}</span> <span style={{letterSpacing: '0.3px'}}>{props.title}</span>
</ReactCSSTransitionGroup> </ReactCSSTransitionGroup>

2
client/pages/viewerpage/menubar.scss
View file

@ -1,5 +1,6 @@
.component_menubar{ .component_menubar{
background: var(--color); background: var(--color);
background: linear-gradient(var(--color) 94%, var(--dark));
color: #f1f1f1; color: #f1f1f1;
position: relative; position: relative;
box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
@ -23,4 +24,5 @@
opacity: 1; opacity: 1;
transform: translateY(0px); transform: translateY(0px);
transition: all 0.15s ease-out; transition: all 0.15s ease-out;
transition-delay: 0.2s;
} }