Bläddra i källkod

HUE-9485 [frontend] Initial styling of the Paginator component

Johan Ahlen 5 år sedan
förälder
incheckning
252127aea6

+ 46 - 5
desktop/core/src/desktop/js/components/Paginator.vue

@@ -32,15 +32,40 @@
       </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>
-      <a href="javascript: void(0);" @click="gotoLastPage">&gt;|</a>
+      <a
+        href="javascript: void(0);"
+        :class="{ disabled: currentPage === 1 }"
+        @click="gotoFirstPage"
+      >
+        <hue-icon type="hi-chevron-left-limit" />
+      </a>
+      <a
+        href="javascript: void(0);"
+        :class="{ disabled: currentPage === 1 }"
+        @click="gotoPreviousPage"
+      >
+        <hue-icon type="hi-chevron-left" />
+      </a>
+      <a
+        href="javascript: void(0);"
+        :class="{ disabled: currentPage === totalPages }"
+        @click="gotoNextPage"
+      >
+        <hue-icon type="hi-chevron-right" />
+      </a>
+      <a
+        href="javascript: void(0);"
+        :class="{ disabled: currentPage === totalPages }"
+        @click="gotoLastPage"
+      >
+        <hue-icon type="hi-chevron-right-limit" />
+      </a>
     </div>
   </div>
 </template>
 
 <script lang="ts">
+  import HueIcon from './HueIcon.vue';
   import Dropdown from './dropdown/Dropdown.vue';
   import DropdownItemButton from './dropdown/DropdownItemButton.vue';
   import Vue from 'vue';
@@ -51,7 +76,7 @@
   const PRESET_LIMITS = [DEFAULT_LIMIT, 50, 100];
 
   @Component({
-    components: { Dropdown, DropdownItemButton }
+    components: { HueIcon, Dropdown, DropdownItemButton }
   })
   export default class Paginator extends Vue {
     @Prop({ required: true })
@@ -117,6 +142,8 @@
 </script>
 
 <style lang="scss" scoped>
+  @import 'styles/colors';
+
   .hue-paginator {
     width: 100%;
     height: 25px;
@@ -129,6 +156,20 @@
     }
 
     .navigation-actions {
+      a {
+        color: $fluid-gray-700;
+
+        &.disabled {
+          cursor: default;
+          color: $hue-action-disabled;
+        }
+
+        &:hover:not(.disabled) {
+          color: $hue-action-primary-hover;
+        }
+      }
+
+      font-size: 23px;
       margin-left: 15px;
       margin-right: 20px;
       display: inline-block;

+ 16 - 4
desktop/core/src/desktop/js/components/__snapshots__/Paginator.test.ts.snap

@@ -39,27 +39,39 @@ exports[`Paginator.vue should render 1`] = `
     class="navigation-actions"
   >
     <a
+      class="disabled"
       href="javascript: void(0);"
     >
-      |&lt;
+      <hue-icon-stub
+        type="hi-chevron-left-limit"
+      />
     </a>
      
     <a
+      class="disabled"
       href="javascript: void(0);"
     >
-      &lt;
+      <hue-icon-stub
+        type="hi-chevron-left"
+      />
     </a>
      
     <a
+      class=""
       href="javascript: void(0);"
     >
-      &gt;
+      <hue-icon-stub
+        type="hi-chevron-right"
+      />
     </a>
      
     <a
+      class=""
       href="javascript: void(0);"
     >
-      &gt;|
+      <hue-icon-stub
+        type="hi-chevron-right-limit"
+      />
     </a>
   </div>
 </div>

+ 16 - 0
desktop/core/src/desktop/templates/hue_icons.mako

@@ -463,6 +463,22 @@
       <path d="M886.250667 552.490667 512 927.957333l-374.229333-375.466667C79.786667 505.429333 42.666667 433.536 42.666667 352.896 42.666667 211.029333 157.290667 96.042667 298.666667 96.042667c89.088 0 167.488 45.717333 213.333333 114.986667 45.845333-69.269333 124.245333-114.986667 213.333333-114.986667 141.376 0 256 114.986667 256 256.832C981.333333 433.536 944.213333 505.429333 886.250667 552.490667zM832.341333 458.858667l-138.858667 0-53.888-197.610667-20.586667 5.610667-20.117333-7.104-93.226667 317.034667-101.077333-252.672-20.245333 6.741333-19.989333-7.509333-50.794667 135.509333L192.341333 458.858667l0 42.666667 128 0 19.989333 7.509333 44.672-119.168 107.114667 267.754667 40.469333-13.504-3.477333-8.661333 3.349333 1.173333 85.76-291.562667 44.202667 162.090667 20.586667-5.610667 149.333333 0L832.341333 458.858667z"></path>
     </symbol>
 
+    <symbol id="hi-chevron-left-limit" viewBox="0 0 24 24">
+      <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"></path>
+    </symbol>
+
+    <symbol id="hi-chevron-left" viewBox="0 0 24 24">
+      <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
+    </symbol>
+
+    <symbol id="hi-chevron-right" viewBox="0 0 24 24">
+      <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>
+    </symbol>
+
+    <symbol id="hi-chevron-right-limit" viewBox="0 0 24 24">
+      <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"></path>
+    </symbol>
+
     <defs>
       <filter id="dropshadow" height="130%">
         <feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur> <!-- stdDeviation is how much to blur -->