Merge pull request #6 from PygmySlowLoris/dev

Dev
PygmySlowLoris · Jun 28, 2017 · bcbae3f · bcbae3f
2 parents 71076df + 4dd9291
commit bcbae3f
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -35,10 +35,12 @@ And
 | Properties | Type | Values |
 | :--------------- | :------- | :--------- |
 | `bg-color` | String | <b>Default '#333333'</b><br> Accepts all color formats: HEX, RGB & RGBA |
-| `position` | String | <b>Default 'bottom-left'</b> <br>'bottom-left', 'bottom-right', 'top-left','top-right' |
+| `position` | String | <b>Default 'bottom-left'</b> <br>Options: 'bottom-left', 'bottom-right', 'top-left','top-right' |
+| `position-type` | String | <b>Default 'fixed'</b> <br>Options: 'fixed' or 'absolute'|
 | `z-index` | String | <b>Default '999'</b> <br>Set any value that suits your needs. |
 | `ripple-show` | Boolean | <b>Default true</b> <br>Options: true or false. |
 | `ripple-color` | String | <b>Default 'light'</b> <br>Options: 'light' or 'dark'. |
+| `icon-size` | String | <b>Default 'medium'</b> <br>Options: 'small', 'medium' or 'large'. |
 | `main-icon` | String | <b>Default 'add'</b> <br>Use icons from the material icon library. |
 | `main-tooltip` | String | <b>Default `null`</b> |
 | `actions` | Object | <b>[Details bellow](https://github.com/PygmySlowLoris/vue-fab/#actions)</b>

diff --git a/demo/App.vue b/demo/App.vue
@@ -61,15 +61,39 @@
  </div>
  </div>
  <div class="column">
- <div class="field has-text-left">
- <label class="label">Position</label>
- <p class="control">
- <span class="select">
- <select v-model="position">
- <option v-for="pos in positions">{{pos}}</option>
- </select>
- </span>
- </p>
+ <div class="field is-horizontal">
+ <div class="field-body">
+ <div class="field has-text-left">
+ <label class="label">Position</label>
+ <p class="control is-expanded">
+ <span class="select is-fullwidth">
+ <select v-model="position">
+ <option v-for="pos in positions">{{pos}}</option>
+ </select>
+ </span>
+ </p>
+ </div>
+ <div class="field has-text-left">
+ <label class="label">Position Type</label>
+ <p class="control is-expandend">
+ <span class="select is-fullwidth">
+ <select v-model="positionType">
+ <option v-for="type in positionTypes">{{type}}</option>
+ </select>
+ </span>
+ </p>
+ </div>
+ <div class="field has-text-left">
+ <label class="label">Size</label>
+ <p class="control is-expandend">
+ <span class="select is-fullwidth">
+ <select v-model="iconSizes">
+ <option v-for="size in sizes">{{size}}</option>
+ </select>
+ </span>
+ </p>
+ </div>
+ </div>
  </div>
  <label class="label" style="display: flex; align-items: center; padding-right: 1rem;">
  Main Icon & Tooltip
@@ -152,6 +176,8 @@
  </footer>
  <fab
  :position="position"
+ :icon-size="iconSizes"
+ :position-type="positionType"
  :bg-color="colors.hex"
  :main-icon="mainIcon"
  :main-tooltip="mainTooltip"
@@ -207,7 +233,18 @@
  'top-right',
  'top-left',
  ],
+ positionTypes: [
+ 'fixed',
+ 'absolute'
+ ],
+ sizes: [
+ 'small',
+ 'medium',
+ 'large'
+ ],
  position: 'bottom-right',
+ positionType: 'fixed',
+ iconSizes: 'medium',
  colors: defaultProps,
  mainIcon: 'add',
  mainTooltip: 'Hello',

diff --git a/index.html b/index.html
@@ -2,6 +2,8 @@
 <html lang="en">
  <head>
  <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  <title>vue-fab</title>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-fab",
- "version": "2.0.8",
+ "version": "2.0.9",
  "description": "Vue Floating Action Button",
  "main": "src/index.js",
  "repository": {

diff --git a/src/FAB.vue b/src/FAB.vue
@@ -1,6 +1,6 @@
 <template>
  <div :id="position + '-wrapper'" class="fab-wrapper" v-on-clickaway="away"
- :style="[pos, {zIndex: zIndex}]">
+ :style="[ pos, {zIndex: zIndex}, {position: positionType} ]">
  <div :id="position + '-action'" class="actions-container" :style="listPos">
  <transition name="fab-actions-appear"
  :enter-active-class="transitionEnter"
@@ -16,13 +16,13 @@
  <li v-if="toggle" :style="{ 'background-color': action.color || bgColor }"
  v-tooltip="{ content: action.tooltip, placement: tooltipPosition, classes: 'fab-tooltip' }"
  @click="toParent(action.name)" class="pointer">
- <i class="material-icons">{{action.icon}}</i>
+ <i :class="[ actionIconSize ,'material-icons']">{{action.icon}}</i>
  </li>
  </template>
  <template v-else>
  <li v-if="toggle" :style="{ 'background-color': action.color || bgColor }"
  @click="toParent(action.name)" class="pointer">
- <i class="material-icons">{{action.icon}}</i>
+ <i :class="[ actionIconSize ,'material-icons']">{{action.icon}}</i>
  </li>
  </template>
  </transition>
@@ -34,32 +34,32 @@
  <template v-if="mainTooltip">
  <div v-ripple="rippleColor == 'light' ? 'rgba(255, 255, 255, 0.35)' : ''" @click="toggle = !toggle"
  v-tooltip="{ content: mainTooltip, placement: tooltipPosition, classes: 'fab-tooltip' }"
- class="fab pointer" :style="{ 'background-color': bgColor }"
+ class="fab pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
  >
- <i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
- <i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
+ <i :class="[ mainIconSize , { rotate: toggle } ,'material-icons main']">{{mainIcon}}</i>
+ <i :class="[ mainIconSize , { rotate: toggle } ,'material-icons close']">add</i>
  </div>
  </template>
  <template v-else>
  <div v-ripple="rippleColor == 'light' ? 'rgba(255, 255, 255, 0.35)' : ''" @click="toggle = !toggle"
- class="fab pointer" :style="{ 'background-color': bgColor }"
+ class="fab pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
  >
- <i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
- <i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
+ <i :class="[ mainIconSize , { rotate: toggle }, 'material-icons main']">{{mainIcon}}</i>
+ <i :class="[ mainIconSize , { rotate: toggle }, 'material-icons close']">add</i>
  </div>
  </template>
  </template>
  <template v-else>
  <template v-if="mainTooltip">
  <div v-bind:v-tooltip="{ content: mainTooltip, placement: tooltipPosition, classes: 'fab-tooltip'}"
- class="fab pointer" :style="{ 'background-color': bgColor }"
+ class="fab pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
  >
  <i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
  <i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
  </div>
  </template>
  <template v-else>
- <div class="fab pointer" :style="{ 'background-color': bgColor }"
+ <div class="fab pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
  >
  <i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
  <i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
@@ -91,6 +91,9 @@
  position: {
  default: 'bottom-right',
  },
+ positionType: {
+ default: 'fixed',
+ },
  zIndex: {
  default: '999',
  },
@@ -103,12 +106,60 @@
  mainIcon: {
  default: 'add'
  },
+ iconSize: {
+ default: 'medium'
+ },
  mainTooltip: {
  default: null
  },
  actions: {}
  },
  computed: {
+ actionIconSize() {
+ switch (this.iconSize) {
+ case 'small':
+ return 'md-18';
+ break;
+ case 'medium':
+ return 'md-24';
+ break;
+ case 'large':
+ return 'md-36';
+ break;
+ default:
+ return 'md-24';
+ }
+ },
+ mainIconSize() {
+ switch (this.iconSize) {
+ case 'small':
+ return 'md-24';
+ break;
+ case 'medium':
+ return 'md-36';
+ break;
+ case 'large':
+ return 'md-48';
+ break;
+ default:
+ return 'md-36';
+ }
+ },
+ paddingAmount() {
+ switch (this.iconSize) {
+ case 'small':
+ return '1.8rem';
+ break;
+ case 'medium':
+ return '2rem';
+ break;
+ case 'large':
+ return '2.5rem';
+ break;
+ default:
+ return '1.9rem';
+ }
+ },
  listPos() {
  if (this.position === 'top-right' || this.position === 'top-left') {
  return {
@@ -255,22 +306,20 @@
  }
 
  .fab-wrapper {
- position: fixed;
  z-index: 999;
  }
 
  .fab {
  border-radius: 100px;
- width: 65px;
+ /*width: 65px;*/
+ /*height: 65px;*/
+ padding: 2rem;
  position: relative;
  overflow: hidden;
- height: 65px;
  display: flex;
  align-items: center;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.20), 0 4px 4px rgba(0, 0, 0, 0.15);
  z-index: 2;
- display: flex;
- align-items: center;
  justify-content: center;
  }
 
@@ -313,12 +362,16 @@
  .fab-list {
  position: relative;
  z-index: 1;
- margin: 2vh 0.5vw;
+ margin: 2vh 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
  }
 
  .fab-list li {
- width: 50px;
- height: 50px;
+ /*width: 50px;*/
+ /*height: 50px;*/
+ padding: .8rem;
  margin-top: 2vh;
  display: flex;
  align-items: center;
@@ -383,25 +436,27 @@
 
  @media screen and (max-width: 768px) {
  .fab-list {
- margin: 2vh 1.8vw;
+ margin: 2vh 0;
  }
 
  .fab-list li {
- width: 40px;
- height: 40px;
+ /*width: 40px;*/
+ /*height: 40px;*/
+ /*padding: .6rem;*/
  }
 
  .fab-list li i {
- font-size: 24px !important;
+ /*font-size: 24px !important;*/
  }
 
  .fab {
- width: 55px;
- height: 55px;
+ /*width: 55px;*/
+ /*height: 55px;*/
+ /*padding: 1.5rem;*/
  }
 
  .fab i {
- font-size: 34px !important;
+ /*font-size: 34px !important;*/
  }
 
  }