浏览代码

HUE-9485 [frontend] Switch to using the Dropdown component in the Paginator and some initial styling

Johan Ahlen 5 年之前
父节点
当前提交
d397c7f872

+ 34 - 10
desktop/core/src/desktop/js/components/Paginator.vue

@@ -17,15 +17,17 @@
 -->
 
 <template>
-  <div>
-    <div>
-      Rows per page:
-      <a href="javascript: void(0);" @click="setLimit(25)">25</a>
-      <a href="javascript: void(0);" @click="setLimit(50)">50</a>
-      <a href="javascript: void(0);" @click="setLimit(100)">100</a>
+  <div class="hue-paginator">
+    <div class="page-status">
+      {{ offset + 1 }}-{{ Math.min(offset + limit, totalEntries) }} of {{ totalEntries }}
     </div>
-    <div>{{ offset + 1 }}-{{ Math.min(offset + limit, totalEntries) }} of {{ totalEntries }}</div>
-    <div>
+    Rows per page:
+    <dropdown :inline="true" :text="limit">
+      <dropdown-item-button @click="setLimit(25)">25</dropdown-item-button>
+      <dropdown-item-button @click="setLimit(50)">50</dropdown-item-button>
+      <dropdown-item-button @click="setLimit(100)">100</dropdown-item-button>
+    </dropdown>
+    <div class="navigation-actions">
       <a href="javascript: void(0);" @click="gotoFirstPage">|&lt;</a>
       <a href="javascript: void(0);" @click="gotoPreviousPage">&lt;</a>
       <a href="javascript: void(0);" @click="gotoNextPage">&gt;</a>
@@ -35,11 +37,15 @@
 </template>
 
 <script lang="ts">
+  import Dropdown from './dropdown/Dropdown.vue';
+  import DropdownItemButton from './dropdown/DropdownItemButton.vue';
   import Vue from 'vue';
   import Component from 'vue-class-component';
   import { Prop, Watch } from 'vue-property-decorator';
 
-  @Component
+  @Component({
+    components: { Dropdown, DropdownItemButton }
+  })
   export default class Paginator extends Vue {
     @Prop({ required: true })
     totalEntries!: number;
@@ -102,4 +108,22 @@
   }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .hue-paginator {
+    width: 100%;
+    height: 25px;
+    text-align: right;
+    padding: 10px 0;
+
+    .page-status {
+      display: inline-block;
+      margin-right: 15px;
+    }
+
+    .navigation-actions {
+      margin-left: 15px;
+      margin-right: 20px;
+      display: inline-block;
+    }
+  }
+</style>

+ 26 - 22
desktop/core/src/desktop/js/components/__snapshots__/Paginator.test.ts.snap

@@ -1,35 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Paginator.vue should render 1`] = `
-<div>
-  <div>
+<div
+  class="hue-paginator"
+>
+  <div
+    class="page-status"
+  >
     
-    Rows per page:
-    
-    <a
-      href="javascript: void(0);"
-    >
+    1-25 of 500
+  
+  </div>
+  
+  Rows per page:
+  
+  <dropdown-stub
+    inline="true"
+    text="25"
+  >
+    <dropdown-item-button-stub>
       25
-    </a>
+    </dropdown-item-button-stub>
      
-    <a
-      href="javascript: void(0);"
-    >
+    <dropdown-item-button-stub>
       50
-    </a>
+    </dropdown-item-button-stub>
      
-    <a
-      href="javascript: void(0);"
-    >
+    <dropdown-item-button-stub>
       100
-    </a>
-  </div>
-   
-  <div>
-    1-25 of 500
-  </div>
+    </dropdown-item-button-stub>
+  </dropdown-stub>
    
-  <div>
+  <div
+    class="navigation-actions"
+  >
     <a
       href="javascript: void(0);"
     >