fix: button correct gradient

tiant11 · Apr 5, 2019 · dec347e · dec347e
1 parent 1a31b83
commit dec347e
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 48 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400" rel="stylesheet">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
     <title>Vuestic Admin</title>

diff --git a/src/services/color-functions.js b/src/services/color-functions.js
@@ -46,6 +46,6 @@ export const getGradientColor = (color) => {
 }
 
 export const getGradientBackground = (color) => {
-  return 'linear-gradient(to right,' + getGradientColor(color)[0] +
-    ',' + getGradientColor(color)[1] + ')'
+  const [left, right] = getGradientColor(color)
+  return `linear-gradient(to right, ${left}, ${right})`
 }
diff --git a/src/vuestic-theme/vuestic-components/va-button-group/VaButtonGroup.demo.vue b/src/vuestic-theme/vuestic-components/va-button-group/VaButtonGroup.demo.vue
@@ -1,5 +1,23 @@
 <template>
   <VbDemo>
+    <VbContainer title="Full gradient">
+      <va-button-group :color="value">
+        <va-button>One</va-button>
+        <va-button>Two</va-button>
+        <va-button>Three</va-button>
+      </va-button-group>
+      <va-button-group color="danger">
+        <va-button>One</va-button>
+        <va-button>Two</va-button>
+        <va-button>Three</va-button>
+      </va-button-group>
+      <va-button-group color="warning">
+        <va-button>One</va-button>
+        <va-button>Two</va-button>
+        <va-button>Three</va-button>
+      </va-button-group>
+    </VbContainer>
+
     <VbContainer>
       <table class="table table-bordered">
         <tr>
@@ -17,6 +35,7 @@
               </va-button-group>
             </VbContainer>
             <VbContainer title="Outline Button Group">
+              <va-button outline> Button 1</va-button>
               <va-button-group>
                 <va-button outline> Button 1</va-button>
                 <va-button outline> Button 2</va-button>
@@ -115,7 +134,7 @@
                 <va-button large icon="maki maki-art-gallery"/>
                 <va-button large icon="glyphicon glyphicon-pencil"/>
               </va-button-group>
-              <va-button-group>
+              <va-button-group color="success">
                 <va-button small icon="glyphicon glyphicon-pencil"/>
                 <va-button small icon="maki maki-art-gallery"/>
                 <va-button small icon="maki maki-art-gallery"/>
@@ -199,9 +218,16 @@
 <script>
 
 import VaButtonGroup from './VaButtonGroup'
+import VaButton from '../va-button/VaButton'
 
 export default {
+  data () {
+    return {
+      value: 'danger',
+    }
+  },
   components: {
+    VaButton,
     VaButtonGroup,
   },
 }

diff --git a/src/vuestic-theme/vuestic-components/va-button-group/VaButtonGroup.vue b/src/vuestic-theme/vuestic-components/va-button-group/VaButtonGroup.vue
@@ -1,20 +1,73 @@
 <template>
-  <div class="va-button-group">
-    <slot></slot>
+  <div
+    class="va-button-group"
+    :class="computedClass"
+    :style="computedStyle"
+  >
+    <slot/>
   </div>
 </template>
 
 <script>
+import { getGradientBackground } from '../../../services/color-functions'
+import Vue from 'vue'
+
 export default {
   name: 'va-button-group',
+  props: {
+    color: {
+      type: String,
+    },
+  },
+  provide () {
+    const parent = this
+    return {
+      va: new Vue({
+        computed: {
+          color () {
+            return parent.color
+          },
+        },
+      }),
+    }
+  },
+  computed: {
+    computedClass () {
+      return {
+        'va-button-group--large': this.large,
+        'va-button-group--small': this.small,
+        'va-button-group--normal': !this.large && !this.small,
+      }
+    },
+    computedStyle () {
+      return {
+        backgroundImage: getGradientBackground(this.$themes[this.color]),
+      }
+    },
+  },
 }
 </script>
 
 <style lang='scss'>
+@import '../../vuestic-sass/resources/resources';
+
 .va-button-group {
   display: flex;
+  justify-content: stretch;
   margin: 0.375rem 0.5rem;
 
+  &--small {
+    border-radius: $btn-border-radius-sm;
+  }
+
+  &--large {
+    border-radius: $btn-border-radius-lg;
+  }
+
+  &--normal {
+    border-radius: $btn-border-radius-nrm;
+  }
+
   .va-button {
     margin: 0;
   }

diff --git a/src/vuestic-theme/vuestic-components/va-button/VaButton.vue b/src/vuestic-theme/vuestic-components/va-button/VaButton.vue
@@ -2,8 +2,8 @@
   <component
     :is="computedTag"
     class="va-button"
-    :class="buttonClass"
-    :style="buttonStyle"
+    :class="computedClass"
+    :style="computedStyle"
     :disabled="disabled"
     :type="type"
     :href="href"
@@ -55,6 +55,11 @@ import {
 export default {
   name: 'va-button',
   components: { VaIcon },
+  inject: {
+    va: {
+      default: () => ({}),
+    },
+  },
   props: {
     tag: {
       type: String,
@@ -68,7 +73,6 @@ export default {
     },
     color: {
       type: String,
-      default: 'success',
     },
     small: {
       type: Boolean,
@@ -122,12 +126,17 @@ export default {
     }
   },
   computed: {
-    buttonClass () {
+    colorComputed () {
+      return this.color ? this.color : 'success'
+    },
+    computedClass () {
       return {
         'va-button--default': !this.flat && !this.outline,
         'va-button--flat': this.flat,
         'va-button--outline': this.outline,
         'va-button--disabled': this.disabled,
+        'va-button--hover': this.hoverState,
+        'va-button--focus': this.focusState,
         'va-button--without-title': !this.hasTitleData,
         'va-button--with-left-icon': this.icon,
         'va-button--with-right-icon': this.iconRight,
@@ -136,43 +145,57 @@ export default {
         'va-button--normal': !this.large && !this.small,
       }
     },
-    buttonStyle () {
+    gradientStyle () {
+      if (this.flat || this.outline) {
+        return
+      }
+      if (this.va.color) { // Color is provided from button group
+        return
+      }
+      return getGradientBackground(this.$themes[this.colorComputed])
+    },
+    shadowStyle () {
+      if (this.flat || this.outline) {
+        return
+      }
+      if (this.va.color) {
+        return '0 0.125rem 0.19rem 0 ' + getBoxShadowColor(this.$themes[this.va.color])
+      }
+      return '0 0.125rem 0.19rem 0 ' + getBoxShadowColor(this.$themes[this.colorComputed])
+    },
+    computedStyle () {
+      const computedStyle = {
+        color: '',
+        borderColor: '',
+        background: '',
+        backgroundImage: '',
+        boxShadow: '',
+      }
+
       if (this.focusState) {
         if (this.outline || this.flat) {
-          return {
-            color: this.$themes[this.color],
-            borderColor: this.outline ? this.$themes[this.color] : '',
-            background: getFocusColor(this.$themes[this.color]),
-          }
+          computedStyle.color = this.$themes[this.colorComputed]
+          computedStyle.borderColor = this.outline ? this.$themes[this.colorComputed] : ''
+          computedStyle.background = getFocusColor(this.$themes[this.colorComputed])
         } else {
-          return {
-            backgroundImage: !this.flat && !this.outline
-              ? getGradientBackground(this.$themes[this.color]) : '',
-          }
+          computedStyle.backgroundImage = this.gradientStyle
         }
       } else if (this.hoverState) {
         if (this.outline || this.flat) {
-          return {
-            color: this.$themes[this.color],
-            borderColor: this.outline ? this.$themes[this.color] : '',
-            background: getHoverColor(this.$themes[this.color]),
-          }
+          computedStyle.color = this.$themes[this.colorComputed]
+          computedStyle.borderColor = this.outline ? this.$themes[this.colorComputed] : ''
+          computedStyle.background = getHoverColor(this.$themes[this.colorComputed])
         } else {
-          return {
-            backgroundImage: !this.flat && !this.outline
-              ? getGradientBackground(this.$themes[this.color]) : '',
-          }
+          computedStyle.backgroundImage = this.gradientStyle
         }
       } else {
-        return {
-          color: this.flat || this.outline ? this.$themes[this.color] : '#ffffff',
-          borderColor: this.outline ? this.$themes[this.color] : '',
-          backgroundImage: !this.flat && !this.outline
-            ? getGradientBackground(this.$themes[this.color]) : '',
-          boxShadow: !this.flat && !this.outline ? '0 0.125rem 0.19rem 0 ' + getBoxShadowColor(this.$themes[this.color]) : '',
-
-        }
+        computedStyle.color = this.flat || this.outline ? this.$themes[this.colorComputed] : '#ffffff'
+        computedStyle.borderColor = this.outline ? this.$themes[this.colorComputed] : ''
+        computedStyle.backgroundImage = this.gradientStyle
+        computedStyle.boxShadow = this.shadowStyle
       }
+
+      return computedStyle
     },
     hasTitleData () {
       return this.$slots.default
@@ -213,13 +236,6 @@ export default {
 <style lang='scss'>
 @import "../../vuestic-sass/resources/resources";
 
-@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
-  padding: $padding-y $padding-x;
-  font-size: $font-size;
-  line-height: $line-height;
-  border-radius: $border-radius;
-}
-
 .va-button {
   display: inline-block;
   margin: $btn-margin;
@@ -232,6 +248,7 @@ export default {
   text-transform: initial;
   cursor: pointer;
   transition: $btn-transition;
+  background-color: transparent;
 
   &__content {
     display: flex;
@@ -289,7 +306,7 @@ export default {
   }
 
   &--large {
-    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+    @include va-button($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
     letter-spacing: $btn-letter-spacing-lg;
 
     .va-button__content__icon {
@@ -318,7 +335,7 @@ export default {
   }
 
   &--small {
-    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+    @include va-button($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
     letter-spacing: $btn-letter-spacing-sm;
 
     .va-button__content__icon {
@@ -347,7 +364,7 @@ export default {
   }
 
   &--normal {
-    @include button-size($btn-padding-y-nrm, $btn-padding-x-nrm, $btn-font-size-nrm, $btn-line-height-nrm, $btn-border-radius-nrm);
+    @include va-button($btn-padding-y-nrm, $btn-padding-x-nrm, $btn-font-size-nrm, $btn-line-height-nrm, $btn-border-radius-nrm);
     letter-spacing: $btn-letter-spacing-nrm;
 
     .va-button__content__icon {

diff --git a/src/vuestic-theme/vuestic-sass/overrides/_override-custom-libs.scss b/src/vuestic-theme/vuestic-sass/overrides/_override-custom-libs.scss
@@ -96,7 +96,7 @@
 }
 
 .medium-editor-toolbar-anchor-preview {
-  @include button-size($btn-padding-y-nrm, $btn-padding-x-nrm, $btn-font-size-nrm, $btn-line-height-nrm, $btn-border-radius-nrm);
+  @include va-button($btn-padding-y-nrm, $btn-padding-x-nrm, $btn-font-size-nrm, $btn-line-height-nrm, $btn-border-radius-nrm);
 
   .medium-editor-toolbar-anchor-preview {
     margin: 0;

diff --git a/src/vuestic-theme/vuestic-sass/resources/_mixins.scss b/src/vuestic-theme/vuestic-sass/resources/_mixins.scss
@@ -54,3 +54,10 @@
     opacity: 0.5;
   }
 }
+
+@mixin va-button($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+  line-height: $line-height;
+  border-radius: $border-radius;
+}