Merge pull request #11522 from nextcloud/filepicker-design

Filepicker design improvements

5 files changed, 30 insertions, 9 deletions

diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss
index b1b7df3115f..058e018b415 100644
--- a/core/css/css-variables.scss
+++ b/core/css/css-variables.scss
@@ -34,6 +34,7 @@
 	--color-border: $color-border;
 	--color-border-dark: $color-border-dark;
 	--border-radius: $border-radius;
+	--border-radius-large: $border-radius-large;
 
 	--font-face: $font-face;
 }
diff --git a/core/css/jquery.ocdialog.scss b/core/css/jquery.ocdialog.scss
index 0a0222497bc..b5ae27034af 100644
--- a/core/css/jquery.ocdialog.scss
+++ b/core/css/jquery.ocdialog.scss
@@ -1,8 +1,8 @@
 .oc-dialog {
 	background: var(--color-main-background);
 	color: var(--color-text-light);
-	border-radius: var(--border-radius);
-	box-shadow: 0 0 7px var(--color-box-shadow);
+	border-radius: var(--border-radius-large);
+	box-shadow: 0 0 30px var(--color-box-shadow);
 	padding: 15px;
 	z-index: 10000;
 	font-size: 100%;
@@ -25,8 +25,8 @@
 	background: transparent;
 	right: 0;
 	bottom: 0;
-	padding: 10px;
-	padding-bottom: 0;
+	padding: 0;
+	padding-top: 10px;
 	box-sizing: border-box;
 	width: 100%;
 	background-image: linear-gradient(rgba(255, 255, 255, 0.0), var(--color-main-background));
@@ -41,6 +41,12 @@
 	&.twobuttons.aside {
 		justify-content: flex-end;
 	}
+
+	button {
+	    white-space: nowrap;
+	    overflow: hidden;
+	    text-overflow: ellipsis;
+	}
 }
 
 .oc-dialog-close {
@@ -49,6 +55,13 @@
 	right: 0;
 	padding: 25px;
 	background: url('../img/actions/close.svg') no-repeat center;
+	opacity: .5;
+
+	&:hover,
+	&:focus,
+	&:active {
+		opacity: 1;
+	}
 }
 
 .oc-dialog-dim {
@@ -76,4 +89,4 @@
 			display: none;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index e4a4f53367b..f7f3827eba5 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -123,7 +123,7 @@
 		display: none;
 	}
 	#oc-dialog-filepicker-content .filelist .filename {
-		max-width: 80%;
+		max-width: 100%;
 	}
 
 	.snapjs-left table.multiselect thead {
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 2d6df4c3932..dc217fb8f22 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -700,8 +700,10 @@ code {
 
 #oc-dialog-filepicker-content {
 	.dirtree {
-		width: 92%;
+		width: 96%;
 		flex-wrap: wrap;
+		padding-left: 12px;
+
 		div:first-child a {
 			background-image: url('../img/places/home.svg?v=1');
 			background-repeat: no-repeat;
@@ -725,8 +727,9 @@ code {
 		display: inline-block;
 		overflow-y: auto;
 		height: 100%;
-		/** overflow under the button row */
+		/* overflow under the button row */
 		width: 100%;
+		overflow-x: hidden;
 	}
 	.emptycontent {
 		color: var(--color-text-details);
@@ -1007,6 +1010,9 @@ div.crumb {
 		white-space: nowrap;
 		overflow: hidden;
 		flex: 0 0 auto;
+		// Some sane max-width for each folder name
+		max-width: 200px;
+
 		&.icon-home {
 			// Hide home text
 			text-indent: -9999px;
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 3bfc37484c4..f5b97c9b879 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -66,13 +66,14 @@ $image-login-background: url('../img/background.png?v=2') !default;
 $color-loading-light: #ccc !default;
 $color-loading-dark: #777 !default;
 
-$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75) !default;
+$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.5) !default;
 
 // light border like file table or app-content list
 $color-border: nc-darken($color-main-background, 7%) !default;
 // darker border like inputs or very visible elements
 $color-border-dark: nc-darken($color-main-background, 14%) !default;
 $border-radius: 3px !default;
+$border-radius-large: 20px;
 
 $font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;