Преглед изворни кода

HUE-9485 [frontend] Add small and primary options to the HueButton component

Johan Ahlen пре 5 година
родитељ
комит
bf5417cfa9

+ 9 - 3
desktop/core/src/desktop/js/components/DateRangePicker.vue

@@ -67,8 +67,8 @@
           </div>
         </div>
         <div class="date-range-picker-footer">
-          <hue-button @click="closePanel">Cancel</hue-button>
-          <hue-button @click="apply(closePanel)">Apply</hue-button>
+          <hue-link @click="closePanel">Cancel</hue-link>
+          <hue-button :primary="true" :small="true" @click="apply(closePanel)">Apply</hue-button>
         </div>
       </div>
     </template>
@@ -76,6 +76,7 @@
 </template>
 
 <script lang="ts">
+  import { Range } from './DateRangePicker';
   import { DateTime } from 'luxon';
   import Datepicker from 'vuejs-datepicker';
   import HueLink from './HueLink.vue';
@@ -284,8 +285,13 @@
     }
 
     .date-range-picker-footer {
+      line-height: 24px;
       text-align: right;
-      padding: 5px;
+      padding: 6px 10px;
+
+      a {
+        font-size: 12px;
+      }
     }
   }
 </style>

+ 15 - 2
desktop/core/src/desktop/js/components/HueButton.vue

@@ -17,15 +17,28 @@
 -->
 
 <template>
-  <button class="btn" type="button" @click="$emit('click')"><slot /></button>
+  <button
+    class="btn"
+    type="button"
+    :class="{ 'btn-primary': primary, 'btn-xs': small }"
+    @click="$emit('click')"
+  >
+    <slot />
+  </button>
 </template>
 
 <script lang="ts">
   import Vue from 'vue';
   import Component from 'vue-class-component';
+  import { Prop } from 'vue-property-decorator';
 
   @Component
-  export default class HueButton extends Vue {}
+  export default class HueButton extends Vue {
+    @Prop({ required: false })
+    primary?: boolean;
+    @Prop({ required: false })
+    small?: boolean;
+  }
 </script>
 
 <style lang="scss" scoped>

+ 6 - 3
desktop/core/src/desktop/js/components/__snapshots__/DateRangePicker.test.ts.snap

@@ -273,11 +273,14 @@ exports[`DateRangePicker.vue should render 1`] = `
         <div
           class="date-range-picker-footer"
         >
-          <hue-button-stub>
+          <hue-link-stub>
             Cancel
-          </hue-button-stub>
+          </hue-link-stub>
            
-          <hue-button-stub>
+          <hue-button-stub
+            primary="true"
+            small="true"
+          >
             Apply
           </hue-button-stub>
         </div>