Merge pull request #12732 from nextcloud/polishing-fixes

Polishing fixes

4 files changed, 13 insertions, 28 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 32b34f2651a..43055680e28 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -171,16 +171,12 @@ kbd {
 				top: 22px;
 			}
 
-			/* hide and animate deletion/collapse of subitems */
+			/* hide deletion/collapse of subitems */
 			&.deleted,
 			&.collapsible:not(.open) {
 				> ul {
-					opacity: 0;
-					max-height: 0;
-					overflow-y: hidden;
-					/* bezier override the hide/slow effect due to the 2000 max-height */
-					transition: max-height 1000ms cubic-bezier(0, 1, 0, 1),
-								opacity 250ms ease-in-out;
+					// NO ANIMATE because if not really hidden, we can still tab through it
+					display: none;
 				}
 			}
 
@@ -205,10 +201,6 @@ kbd {
 			> ul {
 				flex: 0 1 auto;
 				width: 100%;
-				transition: max-height 2000ms ease-in-out,
-							opacity 250ms ease-in-out;
-				max-height: 9999px;
-				opacity: 1;
 				position: relative;
 				> li {
 					display: inline-flex;
@@ -387,23 +379,15 @@ kbd {
 			-webkit-transform: rotate(-90deg);
 			-ms-transform: rotate(-90deg);
 			transform: rotate(-90deg);
-			z-index: 50;
+			z-index: 105; // above a, under button
+			background-color: var(--color-main-background);
+			transition: opacity $animation-quick ease-in-out;
 		}
 
 		/* force padding on link no matter if 'a' has an icon class */
 		> a:first-child {
 			padding-left: 44px;
 		}
-		&:before,
-		> a {
-			transition: background-position 100ms ease-in-out,
-						transform 250ms ease-in-out,
-						opacity 100ms ease-in-out;
-		}
-		&:hover > a,
-		&:focus > a {
-			background-position-x: -50px;
-		}
 		&:hover,
 		&:focus {
 			&:before {
@@ -519,6 +503,8 @@ kbd {
 				margin-left: -1px;
 			}
 			&:last-child {
+				border-bottom-right-radius: var(--border-radius);
+				border-top-right-radius: var(--border-radius);
 				border-bottom-left-radius: 0;
 				border-top-left-radius: 0;
 			}
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 66addec7c91..d739bab1013 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -767,12 +767,10 @@ code {
 		background-color: var(--color-main-background);
 		width: 100%;
 	}
-	#filestable.filelist {
+	#picker-filestable.filelist {
 		/* prevent the filepicker to overflow */
 		min-width: initial;
 		margin-bottom: 50px;
-	}
-	.filelist {
 		thead {
 			tr {
 				border-bottom: 1px solid var(--color-border);
@@ -872,6 +870,7 @@ code {
 							background-position: center top;
 							background-size: contain;
 							line-height: $name-height;
+							max-width: none;
 						}
 						&.filesize {
 							line-height: $name-height / 3;
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index 3169dab4b88..f1fa2b41c9d 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -242,7 +242,7 @@ var OCdialogs = {
 			// No grid for IE! 
 			if (OC.Util.isIE()) {
 				self.$filePicker.find('#picker-view-toggle').remove();
-				self.$filePicker.find('#filestable').removeClass('view-grid');
+				self.$filePicker.find('#picker-filestable').removeClass('view-grid');
 			}
 
 			$('body').append(self.$filePicker);
@@ -808,7 +808,7 @@ var OCdialogs = {
 	_getGridSettings: function() {
 		var self = this;
 		$.get(OC.generateUrl('/apps/files/api/v1/showgridview'), function(response) {
-			self.$showGridView.checked = response.gridview;
+			self.$showGridView.get(0).checked = response.gridview;
 			self.$showGridView.next('#picker-view-toggle')
 				.removeClass('icon-toggle-filelist icon-toggle-pictures')
 				.addClass(response.gridview ? 'icon-toggle-filelist' : 'icon-toggle-pictures')
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
index 090e6bce773..2f61d32f3f4 100644
--- a/core/templates/filepicker.html
+++ b/core/templates/filepicker.html
@@ -7,7 +7,7 @@
 			<div class="icon-folder"></div>
 			<h2>{emptytext}</h2>
 		</div>
-		<table id="filestable" class="filelist list-container view-grid">
+		<table id="picker-filestable" class="filelist list-container view-grid">
 			<thead>
 				<tr>
 					<th id="headerName" class="column-name">