Backup_Repos/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash synced 2026-01-05 23:35:34 +01:00
Code Issues Projects Releases Wiki Activity

improvement (UI): better buttons

Browse source
This commit is contained in:
Mickael Kerjean 2018-08-02 01:44:16 +10:00
parent 35178ee70e
commit bbb9572012
3 changed files with 31 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
client/assets/css/mixin.scss Normal file
View file

@ -0,0 +1,12 @@
@mixin ripple($color) {
background-position: center;
transition: background 0.4s;
&:hover{
background: #ffffff00 radial-gradient(circle, transparent 1%, $color 1%) center/15000%;
}
&:active{
background-color: #00000033;
background-size: 100%;
transition: background 0s;
}
}

8
client/pages/filespage/thing-new.js
View file

@ -61,8 +61,12 @@ export class NewThing extends React.Component {
return (
<div>
<div className="menubar no-select">
<NgIf cond={this.props.accessRight.can_create_file !== false} onClick={this.onNew.bind(this, 'file')} type="inline">New File</NgIf>
<NgIf cond={this.props.accessRight.can_create_directory !== false} onClick={this.onNew.bind(this, 'directory')} type="inline">New Directory</NgIf>
<NgIf cond={this.props.accessRight.can_create_file !== false} onClick={this.onNew.bind(this, 'file')} type="inline">
New File
</NgIf>
<NgIf cond={this.props.accessRight.can_create_directory !== false} onClick={this.onNew.bind(this, 'directory')} type="inline">
New Directory
</NgIf>
<Dropdown className="view sort" onChange={this.onSortChange.bind(this)}>
<DropdownButton>
<Icon name="sort"/>

30
client/pages/filespage/thing.scss
View file

@ -1,3 +1,5 @@
@import "../../assets/css/mixin.scss";
// Menu for new file and directory
.menubar{
font-size: 15px;
@ -9,15 +11,17 @@
/* Create Buttons */
> span {
border-radius: 2px;
padding: 3px 5px;
cursor: pointer;
display: inline-block;
margin-right: 5px;
&:hover{
transtion: 0.15s ease-out background;
background: white;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
margin-top: -2px;
border-radius: 2px;
cursor: pointer;
padding: 3px 5px;
&:active, &:hover{
color: var(--color);
}
@include ripple(var(--bg-color));
}
> div {cursor: pointer; margin-right: 15px;}
@ -32,17 +36,9 @@
border-radius: 2px;
padding: 5px;
margin: 2px 0 2px 0;
&:hover, &:focus{
background: white;
border-color: var(--bg-color);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
}
&.active > .dropdown_button{
background: white;
border-color: var(--bg-color);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
&.list-grid, & .dropdown_button{ @include ripple(var(--bg-color)); }
.dropdown_container .component_icon{
box-sizing: border-box;
border: 2px solid rgba(0,0,0,0);