feat: align search input positions across the app

owncloud · Nov 22, 2023 · 2e2c04b · 2e2c04b
1 parent 4305008
commit 2e2c04b
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 42 deletions.
diff --git a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
@@ -1,12 +1,13 @@
 <template>
   <div id="group-list">
-    <oc-text-input
-      id="groups-filter"
-      v-model="filterTerm"
-      class="oc-ml-m oc-my-s"
-      :label="$gettext('Search')"
-      autocomplete="off"
-    />
+    <div class="group-filters oc-flex oc-flex-right oc-flex-wrap oc-mx-m oc-mb-m">
+      <oc-text-input
+        id="groups-filter"
+        v-model="filterTerm"
+        :label="$gettext('Search')"
+        autocomplete="off"
+      />
+    </div>
     <oc-table
       ref="tableRef"
       :sort-by="sortBy"

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -1,12 +1,13 @@
 <template>
   <div id="space-list">
-    <oc-text-input
-      id="spaces-filter"
-      v-model="filterTerm"
-      class="oc-ml-m oc-my-s"
-      :label="$gettext('Search')"
-      autocomplete="off"
-    />
+    <div class="space-filters oc-flex oc-flex-right oc-flex-wrap oc-mx-m oc-mb-m">
+      <oc-text-input
+        id="spaces-filter"
+        v-model="filterTerm"
+        :label="$gettext('Search')"
+        autocomplete="off"
+      />
+    </div>
     <oc-table
       ref="tableRef"
       class="spaces-table"

diff --git a/packages/web-app-admin-settings/src/components/Users/UsersList.vue b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -1,13 +1,14 @@
 <template>
   <div id="user-list">
-    <oc-text-input
-      id="users-filter"
-      v-model="filterTerm"
-      class="oc-ml-m oc-my-s"
-      :label="$gettext('Search')"
-      autocomplete="off"
-    />
-    <slot name="filter" />
+    <div class="user-filters oc-flex oc-flex-between oc-flex-wrap oc-mx-m oc-mb-m">
+      <slot name="filter" />
+      <oc-text-input
+        id="users-filter"
+        v-model="filterTerm"
+        :label="$gettext('Search')"
+        autocomplete="off"
+      />
+    </div>
     <no-content-message v-if="!users.length" icon="user">
       <template #message>
         <span v-text="$gettext('No users in here')" />
@@ -462,6 +463,10 @@ export default defineComponent({
   width: 16rem;
 }
 
+.user-filters {
+  align-items: end;
+}
+
 .highlight-mark {
   font-weight: 600;
 }

diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
@@ -43,7 +43,7 @@
               <context-actions :items="selectedUsers" />
             </template>
             <template #filter>
-              <div class="oc-flex oc-flex-middle oc-ml-m oc-mb-m oc-mt-m">
+              <div class="oc-flex oc-flex-middle">
                 <div class="oc-mr-m oc-flex oc-flex-middle">
                   <oc-icon name="filter-2" class="oc-mr-xs" />
                   <span v-text="$gettext('Filter:')" />

diff --git a/...web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap b/...web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
@@ -2,15 +2,17 @@
 
 exports[`SpacesList should render all spaces in a table 1`] = `
 <div headerposition="0" id="space-list">
-  <div class="oc-ml-m oc-my-s">
-    <label class="oc-label" for="spaces-filter">Search</label>
-    <div class="oc-position-relative">
+  <div class="space-filters oc-flex oc-flex-right oc-flex-wrap oc-mx-m oc-mb-m">
+    <div class="">
+      <label class="oc-label" for="spaces-filter">Search</label>
+      <div class="oc-position-relative">
+        <!--v-if-->
+        <input aria-invalid="false" autocomplete="off" class="oc-text-input oc-input oc-rounded" id="spaces-filter" type="text">
+        <!--v-if-->
+      </div>
       <!--v-if-->
-      <input aria-invalid="false" autocomplete="off" class="oc-text-input oc-input oc-rounded" id="spaces-filter" type="text">
       <!--v-if-->
     </div>
-    <!--v-if-->
-    <!--v-if-->
   </div>
   <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu spaces-table">
     <thead class="oc-thead">

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -30,13 +30,14 @@
           </template>
         </no-content-message>
         <div v-else class="spaces-list oc-mt-l">
-          <oc-text-input
-            id="spaces-filter"
-            v-model="filterTerm"
-            class="oc-ml-m oc-my-m"
-            :label="$gettext('Search')"
-            autocomplete="off"
-          />
+          <div class="spaces-list-filters oc-flex oc-flex-right oc-px-m oc-mb-m">
+            <oc-text-input
+              id="spaces-filter"
+              v-model="filterTerm"
+              :label="$gettext('Search')"
+              autocomplete="off"
+            />
+          </div>
           <resource-tiles
             v-if="viewMode === ViewModeConstants.tilesView.name"
             v-model:selectedIds="selectedResourcesIds"

diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
@@ -6,15 +6,17 @@ exports[`Projects view different files view states lists all available project s
     <div id="files-view">
       <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" hasbulkactions="true" hasfileextensions="false" hashiddenfiles="false" haspagination="false" hassidebartoggle="true" hasviewoptions="true" showactionsonselection="true" sidebaropen="false" viewmodedefault="resource-tiles" viewmodes="[object Object],[object Object]"></app-bar-stub>
       <div class="spaces-list oc-mt-l">
-        <div class="oc-ml-m oc-my-m">
-          <label class="oc-label" for="spaces-filter">Search</label>
-          <div class="oc-position-relative">
+        <div class="spaces-list-filters oc-flex oc-flex-right oc-px-m oc-mb-m">
+          <div class="">
+            <label class="oc-label" for="spaces-filter">Search</label>
+            <div class="oc-position-relative">
+              <!--v-if-->
+              <input aria-invalid="false" autocomplete="off" class="oc-text-input oc-input oc-rounded" id="spaces-filter" type="text">
+              <!--v-if-->
+            </div>
             <!--v-if-->
-            <input aria-invalid="false" autocomplete="off" class="oc-text-input oc-input oc-rounded" id="spaces-filter" type="text">
             <!--v-if-->
           </div>
-          <!--v-if-->
-          <!--v-if-->
         </div>
         <resource-table-stub arepathsdisplayed="false" areresourcesclickable="true" arethumbnailsdisplayed="true" class="spaces-table" dragdrop="false" fieldsdisplayed="image,name,manager,members,totalQuota,usedQuota,remainingQuota,status,mdate" hasactions="true" headerposition="0" hover="true" isselectable="true" paddingx="small" resourcedomselector="[Function]" resources="[object Object],[object Object]" selectedids="" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" sortby="[Function]" sortdir="desc" sticky="false" viewmode="resource-table"></resource-table-stub>
       </div>