From 98e8a47781412e167db6115f8318dd6bff77953f Mon Sep 17 00:00:00 2001 From: Mickael KERJEAN Date: Mon, 7 Jan 2019 19:26:17 +1100 Subject: [PATCH] improvement (design): incremental design improvement --- client/assets/css/reset.scss | 3 +- client/components/alert.js | 2 +- client/components/breadcrumb.scss | 5 +- client/components/button.scss | 4 -- client/components/confirm.js | 2 +- client/components/notification.scss | 4 +- client/components/prompt.js | 2 +- client/pages/connectpage/forkme.scss | 2 +- client/pages/filespage.js | 2 +- client/pages/filespage/frequently_access.js | 49 ++++++++++----- client/pages/filespage/frequently_access.scss | 61 ++++++++++--------- client/pages/filespage/submenu.scss | 7 ++- client/pages/viewerpage/editor.scss | 8 +-- server/ctrl/static.go | 2 +- 14 files changed, 87 insertions(+), 66 deletions(-) diff --git a/client/assets/css/reset.scss b/client/assets/css/reset.scss index 5346c67e..ea2caba6 100644 --- a/client/assets/css/reset.scss +++ b/client/assets/css/reset.scss @@ -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; diff --git a/client/components/alert.js b/client/components/alert.js index 5d142995..e32ee872 100644 --- a/client/components/alert.js +++ b/client/components/alert.js @@ -36,7 +36,7 @@ export class ModalAlert extends Popup { modalContentFooter(){ return ( - + ); } } diff --git a/client/components/breadcrumb.scss b/client/components/breadcrumb.scss index 00600113..72b7e29a 100644 --- a/client/components/breadcrumb.scss +++ b/client/components/breadcrumb.scss @@ -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; diff --git a/client/components/button.scss b/client/components/button.scss index 2ff373c5..f827da9b 100644 --- a/client/components/button.scss +++ b/client/components/button.scss @@ -15,10 +15,6 @@ button{ background: var(--primary); color: white; } - &.secondary{ - background: var(--secondary); - color: white; - } &.emphasis{ background: var(--emphasis); color: white diff --git a/client/components/confirm.js b/client/components/confirm.js index 6ae7344b..e0404d6d 100644 --- a/client/components/confirm.js +++ b/client/components/confirm.js @@ -45,7 +45,7 @@ export class ModalConfirm extends Popup{ return (
- +
); } diff --git a/client/components/notification.scss b/client/components/notification.scss index ac56595c..2fe61e49 100644 --- a/client/components/notification.scss +++ b/client/components/notification.scss @@ -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{ diff --git a/client/components/prompt.js b/client/components/prompt.js index 01dfb27b..2b41566c 100644 --- a/client/components/prompt.js +++ b/client/components/prompt.js @@ -46,7 +46,7 @@ export class ModalPrompt extends Popup { return (
- +
); } diff --git a/client/pages/connectpage/forkme.scss b/client/pages/connectpage/forkme.scss index e7187f5b..a94fe598 100644 --- a/client/pages/connectpage/forkme.scss +++ b/client/pages/connectpage/forkme.scss @@ -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; diff --git a/client/pages/filespage.js b/client/pages/filespage.js index f2763cf0..ff0abc5c 100644 --- a/client/pages/filespage.js +++ b/client/pages/filespage.js @@ -230,7 +230,7 @@ export class FilesPage extends React.Component { initialLoad={false} useWindow={false} loadMore={this.loadMore.bind(this)} threshold={100}> - + this.onView(value)} onSortUpdate={(value) => {this.onSort(value);}} accessRight={this.state.metadata || {}}> diff --git a/client/pages/filespage/frequently_access.js b/client/pages/filespage/frequently_access.js index 07935c4a..76541a78 100644 --- a/client/pages/filespage/frequently_access.js +++ b/client/pages/filespage/frequently_access.js @@ -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 ( - - Quick Access -
- { - this.props.files.map(function(path, index){ - return ( - - -
{Path.basename(path)}
- - ); - }) - } -
- +
+ + Quick Access +
+ { + files.map(function(path, index){ + return ( + + +
{Path.basename(path)}
+ + ); + }) + } +
+ +
); } diff --git a/client/pages/filespage/frequently_access.scss b/client/pages/filespage/frequently_access.scss index 274380d0..aeafed25 100644 --- a/client/pages/filespage/frequently_access.scss +++ b/client/pages/filespage/frequently_access.scss @@ -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; + } diff --git a/client/pages/filespage/submenu.scss b/client/pages/filespage/submenu.scss index 8df8b35f..76180be7 100644 --- a/client/pages/filespage/submenu.scss +++ b/client/pages/filespage/submenu.scss @@ -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{ diff --git a/client/pages/viewerpage/editor.scss b/client/pages/viewerpage/editor.scss index 5231b910..7a4c667b 100644 --- a/client/pages/viewerpage/editor.scss +++ b/client/pages/viewerpage/editor.scss @@ -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; } diff --git a/server/ctrl/static.go b/server/ctrl/static.go index a66997dd..e0e78463 100644 --- a/server/ctrl/static.go +++ b/server/ctrl/static.go @@ -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)