Merge pull request #11522 from nextcloud/filepicker-design

Filepicker design improvements

apps/files/css/files.scss

@@ -52,10 +52,6 @@
 	min-width: 500px;
 }
 
-#filestable tbody tr {
-	height: 51px;
-}
-
 /* fit app list view heights */
 .app-files #app-content>.viewcontainer {
 	min-height: 0%;
@@ -132,7 +128,7 @@
 
 #filestable tbody tr {
 	transition: background-color 0.3s ease;
-	height: 40px;
+	height: 51px;
 }
 #filestable tbody tr:hover,
 #filestable tbody tr:focus,

apps/files/css/upload.scss

@@ -172,12 +172,14 @@
 .oc-dialog .fileexists #allfiles + span{
 	vertical-align: bottom;
 }
+
 .oc-dialog .oc-dialog-buttonrow {
 	width:100%;
 	text-align:right;
-}
-.oc-dialog .oc-dialog-buttonrow .cancel {
-	float:left;
+
+	.cancel {
+		float:left;
+	}
 }
 
 .highlightUploaded {

apps/files/js/fileactions.js

@@ -662,7 +662,7 @@
 					if (permissions & OC.PERMISSION_UPDATE) {
 						actions = OC.dialogs.FILEPICKER_TYPE_COPY_MOVE;
 					}
-					OC.dialogs.filepicker(t('files', 'Target folder'), function(targetPath, type) {
+					OC.dialogs.filepicker(t('files', 'Choose target folder'), function(targetPath, type) {
 						if (type === OC.dialogs.FILEPICKER_TYPE_COPY) {
 							context.fileList.copy(filename, targetPath, false, context.dir);
 						}

apps/files/js/filelist.js

@@ -849,7 +849,7 @@
 			};
 
 			var actions = this.isSelectedMovable() ? OC.dialogs.FILEPICKER_TYPE_COPY_MOVE : OC.dialogs.FILEPICKER_TYPE_COPY;
-			OC.dialogs.filepicker(t('files', 'Target folder'), function(targetPath, type) {
+			OC.dialogs.filepicker(t('files', 'Choose target folder'), function(targetPath, type) {
 				self.fileMultiSelectMenu.toggleLoading('copyMove', true);
 				if (type === OC.dialogs.FILEPICKER_TYPE_COPY) {
 					self.copy(files, targetPath, disableLoadingState);

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;
 }

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;
 		}
 	}
-}
+}

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 {

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;

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;