From 8738b428617a6bb92170e4f9f1e2a5f53969597c Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 14 Jun 2017 17:51:48 +0200 Subject: [PATCH] Update the drive UI to show that Upload and New are linked to a folder --- www/drive/file.css | 20 +++++++++++++------- www/drive/file.less | 24 ++++++++++++++++-------- www/drive/inner.html | 5 +++-- www/drive/main.js | 28 ++++------------------------ 4 files changed, 36 insertions(+), 41 deletions(-) diff --git a/www/drive/file.css b/www/drive/file.css index acfdfeeda..bcb8d4d69 100644 --- a/www/drive/file.css +++ b/www/drive/file.css @@ -132,7 +132,7 @@ span.fa-folder-open { width: calc(100% - 30px); } #tree li > span.element-row { - width: calc(100% + 5px); + min-width: calc(100% + 5px); display: inline-block; cursor: pointer; margin-left: -5px; @@ -223,6 +223,11 @@ span.fa-folder-open { display: none; } /* CONTENT */ +#rightCol { + display: flex; + flex-flow: column; + flex: 1; +} #content { box-sizing: border-box; background: #fff; @@ -450,9 +455,6 @@ span.fa-folder-open { #driveToolbar { background: #ddd; color: #555; - height: 30px; - display: flex; - flex-flow: row; border-top: 1px solid #ccc; border-bottom: ; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); @@ -516,21 +518,25 @@ span.fa-folder-open { width: 250px; margin: 0; padding: 0; + display: inline-block; } #driveToolbar .rightside { margin: 0; padding: 0; - flex: 1; + display: inline-block; + float: right; } #driveToolbar .path { - display: inline-block; - height: 100%; + width: 100%; + height: 30px; line-height: 30px; cursor: default; width: auto; overflow: hidden; white-space: nowrap; direction: rtl; + max-width: 100%; + text-align: left; } #driveToolbar .path .element { padding: 5px; diff --git a/www/drive/file.less b/www/drive/file.less index bf3bb294a..f2b0f329e 100644 --- a/www/drive/file.less +++ b/www/drive/file.less @@ -171,7 +171,7 @@ span { width: ~"calc(100% - 30px)"; } & > span.element-row { - width: ~"calc(100% + 5px)"; + min-width: ~"calc(100% + 5px)"; display: inline-block; cursor: pointer; margin-left: -5px; @@ -272,7 +272,11 @@ span { } /* CONTENT */ - +#rightCol { + display: flex; + flex-flow: column; + flex: 1; +} #content { box-sizing: border-box; background: @content-bg; @@ -519,9 +523,9 @@ span { #driveToolbar { background: @toolbar-bg; color: @toolbar-fg; - height: 30px; - display: flex; - flex-flow: row; + //height: 30px; + //display: flex; + //flex-flow: row; border-top: 1px solid @toolbar-border-col; border-bottom: ; box-shadow: 0 2px 4px rgba(0,0,0,0.2); @@ -586,21 +590,25 @@ span { width: 250px; margin: 0; padding: 0; + display: inline-block; } .rightside { margin: 0; padding: 0; - flex: 1; + display: inline-block; + float: right; } .path { - display: inline-block; - height: 100%; + width: 100%; + height: 30px; line-height: 30px; cursor: default; width: auto; overflow: hidden; white-space: nowrap; direction: rtl; + max-width: 100%; + text-align: left; .element { padding: 5px; border: 1px solid @toolbar-bg; diff --git a/www/drive/inner.html b/www/drive/inner.html index c7f63f860..dfd37b799 100644 --- a/www/drive/inner.html +++ b/www/drive/inner.html @@ -10,11 +10,12 @@
-
-
+
+
+