Merge pull request #20201 from rmanibus/issue_20130

display file list in flexbox

Author: skjnldsv

core/css/styles.scss

@@ -718,6 +718,8 @@ code {
 /* ---- DIALOGS ---- */
 #oc-dialog-filepicker-content {
 	position: relative;
+	display: flex;
+	flex-direction:column;
 
 	.dirtree {
 		flex-wrap: wrap;
@@ -778,7 +780,9 @@ code {
 		border: 1px solid var(--color-border-dark);
 		border-radius: var(--border-radius-pill);
 		position: relative;
-		top: -5px;
+		left: 15px;
+		top:3px;
+		order:1;
 
 		.icon.icon-add{
 			background-image: var(--icon-add-000);
@@ -811,7 +815,8 @@ code {
 		box-sizing: border-box;
 		display: inline-block;
 		overflow-y: auto;
-		height: 100%;
+		flex: 1;
+		/*height: 100%;*/
 		/* overflow under the button row */
 		width: 100%;
 		overflow-x: hidden;

core/js/dist/login.js

@@ -1218,8 +1218,12 @@ const Dialogs = {
 	 * fills the tree list with directories
 	 */
 	_fillSlug: function() {
+		var addButton = this.$dirTree.find('.actions.creatable').detach()
 		this.$dirTree.empty()
 		var self = this
+
+		self.$dirTree.append(addButton)
+
 		var dir
 		var path = this.$filePicker.data('path')
 		var $template = $('<div data-dir="{dir}"><a>{name}</a></div>').addClass('crumb')
@@ -1236,10 +1240,12 @@ const Dialogs = {
 				}))
 			})
 		}
+
 		$template.octemplate({
 			dir: '',
 			name: '' // Ugly but works ;)
 		}, { escapeFunction: null }).prependTo(this.$dirTree)
+		
 	},
 	/**
 	 * handle selection made in the tree list

core/js/dist/login.js.map

@@ -1,15 +1,18 @@
 <div id="{dialog_name}" title="{title}">
-	<span class="dirtree breadcrumb"></span>
-	<span class="actions creatable"><a href="#" class="icon icon-add button button-add"></a>
-	<nav class="menu popovermenu bubble menu-left newFolderMenu">
-		<ul><li>
-		<form class="filenameform">
-			<input type="text" value={newtext}>
-			<input class="icon-confirm" type="submit" value="">
-		</form>
-			</li></ul>
-	</nav>
+	<span class="dirtree breadcrumb">
+		<span class="actions creatable"><a href="#" class="icon icon-add button button-add"></a>
+			<nav class="menu popovermenu bubble menu-left newFolderMenu">
+				<ul><li>
+				<form class="filenameform">
+					<input type="text" value={newtext}>
+					<input class="icon-confirm" type="submit" value="">
+				</form>
+				</li></ul>
+			</nav>
+		</span>
+
 	</span>
+
 	<input type="checkbox" class="hidden-visually" id="picker-showgridview" checked="checked" />
 	<label id="picker-view-toggle" for="picker-showgridview" class="button icon-toggle-filelist"></label>
 	<div class="filelist-container">