fix(styles): view controls styling

frappe · Dec 3, 2024 · 1f8bab8 · 1f8bab8
1 parent b4751b9
commit 1f8bab8
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/desk/src/components/view-controls/QuickFilters.vue b/desk/src/components/view-controls/QuickFilters.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="!quickFilters.loading"
-    class="flex items-center justify-between gap-2 px-5 py-4"
-  >
+  <div v-if="!quickFilters.loading">
     <FadedScrollableDiv
       class="flex flex-1 items-center overflow-x-auto -ml-1"
       orientation="horizontal"

diff --git a/desk/src/components/view-controls/SortBy.vue b/desk/src/components/view-controls/SortBy.vue
@@ -177,10 +177,6 @@ import SortIcon from "@/components/icons/SortIcon.vue";
 import DragIcon from "@/components/icons/DragIcon.vue";
 
 const props = defineProps({
-  doctype: {
-    type: String,
-    required: true,
-  },
   hideLabel: {
     type: Boolean,
     default: false,

diff --git a/desk/src/pages/desk/agent/Agents.vue b/desk/src/pages/desk/agent/Agents.vue
@@ -17,17 +17,25 @@
         </Button>
       </template>
     </LayoutHeader>
+    <!-- View Controls -->
     <div
       v-if="
         !filterableFields.loading &&
         !sortableFields.loading &&
         !quickFilters.loading
       "
+      class="flex items-center justify-between gap-2 px-5 pb-4 pt-3"
     >
-      <Filter class="w-fit" />
-      <SortBy class="w-fit" :hide-label="false" :docType="'HD Agent'" />
-      <QuickFilters class="w-fit" />
-      <button @click="agents.reload({ ...defaultParams })">Click me</button>
+      <QuickFilters />
+      <div class="flex items-center gap-2">
+        <Button :label="'Refresh'" @click="reload()" :loading="agents.loading">
+          <template #icon>
+            <RefreshIcon class="h-4 w-4" />
+          </template>
+        </Button>
+        <Filter />
+        <SortBy :hide-label="false" />
+      </div>
     </div>
     <div>
       {{ agents?.data?.data }}
@@ -109,6 +117,7 @@ provide("listViewActions", {
   applyFilters,
   applySort,
   addColumn,
+  reload,
 });
 
 const defaultParams = {
@@ -130,6 +139,10 @@ function addColumn(field) {
   console.log("ADD COLUMN", field);
 }
 
+function reload() {
+  agents.reload({ ...defaultParams });
+}
+
 usePageMeta(() => {
   return {
     title: "Agents",