github/filestash
4
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash.git synced 2024-04-21 12:32:08 +00:00
Code Issues Releases Wiki Activity

improvement (design): incremental design improvement

Browse Source
This commit is contained in:
Mickael KERJEAN
2019-01-28 01:09:45 +11:00
parent 6e44847f98
commit 98e8a47781
14 changed files with 87 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/assets/css/reset.scss
+1 -2
View File
@@ -37,10 +37,9 @@
:root {
--bg-color: #f2f3f5;
--color: #626466;
--emphasis: #375160;
--emphasis: #466372;
--primary: #9AD1ED;
--emphasis-primary: #c5e2f1;
--secondary: #466372;
--emphasis-secondary: #466372;
--light: #909090;
--super-light: #f9fafc;
client/components/alert.js
+1 -1
View File
@@ -36,7 +36,7 @@ export class ModalAlert extends Popup {
modalContentFooter(){
return (
<Button type="submit" theme="secondary" onClick={this.onSubmit.bind(this)}>OK</Button>
<Button type="submit" theme="emphasis" onClick={this.onSubmit.bind(this)}>OK</Button>
);
}
}
client/components/breadcrumb.scss
+3 -2
View File
@@ -4,9 +4,10 @@
.breadcrumb{
background: white;
margin: 0 0 0px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
border-bottom: 1px solid #e8e8e8;
z-index: 1000;
padding: 2px 0;
padding: 3px 0;
ul{
list-style-type: none;
client/components/button.scss
-4
View File
@@ -15,10 +15,6 @@ button{
background: var(--primary);
color: white;
}
&.secondary{
background: var(--secondary);
color: white;
}
&.emphasis{
background: var(--emphasis);
color: white
client/components/confirm.js
+1 -1
View File
@@ -45,7 +45,7 @@ export class ModalConfirm extends Popup{
return (
<div>
<Button type="button" onClick={this.no.bind(this)}>NO</Button>
<Button type="submit" theme="secondary" onClick={this.yes.bind(this)}>YES</Button>
<Button type="submit" theme="emphasis" onClick={this.yes.bind(this)}>YES</Button>
</div>
);
}
client/components/notification.scss
+2 -2
View File
@@ -23,11 +23,11 @@
}
&.error{
background: var(--error);
color: var(--secondary);
color: var(--emphasis);
}
&.success{
background: var(--success);
color: var(--secondary);
color: var(--emphasis);
}
.message{
client/components/prompt.js
+1 -1
View File
@@ -46,7 +46,7 @@ export class ModalPrompt extends Popup {
return (
<div>
<Button type="button" onClick={this.onCancel.bind(this)}>CANCEL</Button>
<Button type="submit" theme="secondary" onClick={this.onSubmit.bind(this)}>OK</Button>
<Button type="submit" theme="emphasis" onClick={this.onSubmit.bind(this)}>OK</Button>
</div>
);
}
client/pages/connectpage/forkme.scss
+1 -1
View File
@@ -12,7 +12,7 @@
.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}
}
svg{
fill: var(--secondary);
fill: var(--emphasis);
color: var(--primary);
position: absolute;
top: 0;
client/pages/filespage.js
+1 -1
View File
@@ -230,7 +230,7 @@ export class FilesPage extends React.Component {
initialLoad={false} useWindow={false} loadMore={this.loadMore.bind(this)} threshold={100}>
<NgIf className="container" cond={!this.state.loading}>
<NgIf cond={this.state.path === '/'}>
<FrequentlyAccess files={this.state.frequents}/>
<FrequentlyAccess files={this.state.frequents} default={this.state.files}/>
</NgIf>
<Submenu path={this.state.path} sort={this.state.sort} view={this.state.view} onSearch={this.onSearch.bind(this)} onViewUpdate={(value) => this.onView(value)} onSortUpdate={(value) => {this.onSort(value);}} accessRight={this.state.metadata || {}}></Submenu>
<NgIf cond={true}>
client/pages/filespage/frequently_access.js
+33 -16
View File
@@ -12,25 +12,42 @@ export class FrequentlyAccess extends React.Component {
super(props);
}
render(){
if(this.props.files.length < 1) return null;
let files = this.props.files;
if(this.props.files.length === 0){
const keep = [ "Documents", "Users", "home", "Home", "Desktop", "Downloads", "Movie", "Music", "Picture", "Photos", "Guest", "Share", "Shared", "share", "shared"];
files = this.props.default
.filter((file) => keep.indexOf(file.name) !== -1)
.sort((a, b) => keep.indexOf(b) > keep.indexOf(a))
.map((f) => f.path)
.slice(0, 2);
}
if(files.length === 0){
return null;
}
return (
<ReactCSSTransitionGroup transitionName="frequent-access" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={300}>
<Container>
<span>Quick Access</span>
<div className="component_frequently-access">
{
this.props.files.map(function(path, index){
return (
<Link key={path} to={"/files"+path+window.location.search}>
<Icon name={'directory'} />
<div>{Path.basename(path)}</div>
</Link>
);
})
}
</div>
</Container>
<div className="component_frequently-access">
<Container>
<span>Quick Access</span>
<div className="frequent_wrapper">
{
files.map(function(path, index){
return (
<Link key={path} to={"/files"+path+window.location.search}>
<Icon name={'directory'} />
<div>{Path.basename(path)}</div>
</Link>
);
})
}
</div>
</Container>
</div>
</ReactCSSTransitionGroup>
);
}
client/pages/filespage/frequently_access.scss
+32 -29
View File
@@ -1,25 +1,28 @@
.component_frequently-access{
display: flex;
a{
width: 33.33%;
background: var(--light-color);
box-shadow: rgba(158, 163, 172, 0.3) 0px 19px 60px, rgba(158, 163, 172, 0.22) 0px 15px 20px;
overflow: hidden;
margin-right: 5px;
padding: 5px;
cursor: pointer;
img{
float: left;
height: 25px;
margin-right: 2px;
}
line-height: 25px;
display: block;
div{
width: calc(100% - 30px);
white-space: nowrap;
min-height: 80px;
.frequent_wrapper{
display: flex;
a{
width: 33.33%;
background: var(--super-light);
box-shadow: rgba(158, 163, 172, 0.3) 0px 19px 60px, rgba(158, 163, 172, 0.22) 0px 15px 20px;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 5px;
padding: 5px;
cursor: pointer;
img{
float: left;
height: 25px;
margin-right: 2px;
}
line-height: 25px;
display: block;
div{
width: calc(100% - 30px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
@media (max-width: 800px){ a:nth-child(6){display: none;} }
@@ -30,12 +33,12 @@
.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;
}
.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;
}
client/pages/filespage/submenu.scss
+6 -1
View File
@@ -51,7 +51,12 @@
border: 2px solid rgba(0,0,0,0);
}
&.list-grid, & .search{margin-top: -5px!important;}
&.component_dropdown { margin-top: -10px; }
&.component_dropdown {
&.active .dropdown_button{
box-shadow: none;
}
margin-top: -10px;
}
}
&.search_focus form input{transition: 0.2s width ease-in;}
form{
client/pages/viewerpage/editor.scss
+4 -4
View File
@@ -170,13 +170,13 @@
overflow: hidden;
white-space: nowrap;
}
.cm-s-default .cm-header.cm-comment{font-weight: normal; font-size: 0.9em!important; float: right; display: inline-block; color: var(--secondary); line-height: 23px;}
.cm-s-default .cm-header.cm-comment{font-weight: normal; font-size: 0.9em!important; float: right; display: inline-block; color: var(--emphasis); line-height: 23px;}
pre.CodeMirror-line{clear: right;}
.cm-s-default .cm-link{color: var(--secondary)}
.cm-s-default .cm-strong{color: var(--secondary)}
.cm-s-default .cm-org-url, .cm-s-default .cm-org-image{color: var(--secondary)!important; border-bottom: 1px dashed var(--light); cursor: pointer;}
.cm-s-default .cm-link{color: var(--emphasis)}
.cm-s-default .cm-strong{color: var(--emphasis)}
.cm-s-default .cm-org-url, .cm-s-default .cm-org-image{color: var(--emphasis)!important; border-bottom: 1px dashed var(--light); cursor: pointer;}
.cm-s-default .cm-variable-3 {color: #085;}
.cm-s-default .cm-comment {color: var(--light);}
.cm-s-default .cm-string, .cm-s-default .cm-string-2{ color: #c41a16; }
server/ctrl/static.go
+1 -1
View File
@@ -71,7 +71,7 @@ func AboutHandler(ctx App, res http.ResponseWriter, req *http.Request) {
App []string
Plugins [][]string
}{
App: []string{"Nuage " + APP_VERSION, BUILD_NUMBER + "_" + hashFile(filepath.Join(GetCurrentDir(), "/nuage"), 6)},
App: []string{"Nuage " + APP_VERSION + "." + BUILD_NUMBER, hashFile(filepath.Join(GetCurrentDir(), "/nuage"), 6)},
Plugins: func () [][]string {
pPath := filepath.Join(GetCurrentDir(), PLUGIN_PATH)
file, err := os.Open(pPath)