From 0cc46a8dba0159f66bbb78c8341240180b117166 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Tue, 8 Feb 2022 15:05:27 +0100
Subject: [PATCH] Relayout userdirectory toolbar

---
 src/theme.scss       |  6 ++++++
 src/views/users.html | 23 +++++++++++++----------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/theme.scss b/src/theme.scss
index e3b23fc68..422b6dcd5 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -1445,6 +1445,12 @@ footer {
     overflow: hidden;
 }
 
+.users-toolbar {
+    display: flex;
+    margin-bottom: 5px;
+    gap: 5px;
+}
+
 // ----------------------------
 // Upgrade
 // ----------------------------
diff --git a/src/views/users.html b/src/views/users.html
index 792ab0195..f678e9314 100644
--- a/src/views/users.html
+++ b/src/views/users.html
@@ -593,10 +593,15 @@
   <div class="text-left">
     <h1>
       {{ 'users.title' | tr }}
-      <button class="btn btn-primary btn-outline pull-right" ng-click="useradd.show()">
-        <i class="fa fa-user-plus"></i> {{ 'users.newUserAction' | tr }}
-      </button>
-      <div class="btn-group pull-right" style="margin-left: 5px;">
+    </h1>
+  </div>
+
+  <div>
+    <div class="users-toolbar">
+      <input type="text" id="userSearchInput" class="form-control" style="max-width: 350px;" ng-model="userSearchString" ng-model-options="{ debounce: 1000 }" ng-change="updateFilter()" placeholder="{{ 'main.searchPlaceholder' | tr }}"/>
+      <multiselect ng-model="userStateFilter" ms-header="{{ 'apps.stateFilterHeader' | tr }}" ms-selected="{{ userStateFilter }}" options="state.label for state in userStates" data-multiple="false"></multiselect>
+      <div style="flex-grow: 1;"></div>
+      <div class="btn-group">
         <button class="btn btn-default" ng-click="userImport.show()" uib-tooltip="{{ 'users.userImport.tooltip' | tr }}" tooltip-append-to-body="true"><i class="fas fa-download"></i></button>
         <div class="btn-group" role="group">
           <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" uib-tooltip="{{ 'users.userExport.tooltip' | tr }}" tooltip-append-to-body="true">
@@ -608,12 +613,10 @@
           </ul>
         </div>
       </div>
-      <multiselect class="pull-right" style="margin-left: 5px;" ng-model="userStateFilter" ms-header="{{ 'apps.stateFilterHeader' | tr }}" ms-selected="{{ userStateFilter }}" options="state.label for state in userStates" data-multiple="false"></multiselect>
-      <input type="text" id="userSearchInput" class="form-control pull-right" style="max-width: 350px;" ng-model="userSearchString" ng-model-options="{ debounce: 1000 }" ng-change="updateFilter()" placeholder="{{ 'main.searchPlaceholder' | tr }}"/>
-    </h1>
-  </div>
-
-  <div>
+      <button class="btn btn-primary btn-outline" ng-click="useradd.show()">
+        <i class="fa fa-user-plus"></i> {{ 'users.newUserAction' | tr }}
+      </button>
+    </div>
     <div class="card card-large">
       <div class="grid-item-top">
         <div class="row ng-hide" ng-show="userRefreshBusy">