Skip to content

Commit bcbae3f

Browse files
hazzohazzo
authored
Merge pull request #6 from PygmySlowLoris/dev
Dev
2 parents 71076df + 4dd9291 commit bcbae3f

File tree

5 files changed

+133
-37
lines changed

5 files changed

+133
-37
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,12 @@ And
3535
| Properties | Type | Values |
3636
| :--------------- | :------- | :--------- |
3737
| `bg-color` | String | <b>Default '#333333'</b><br> Accepts all color formats: HEX, RGB & RGBA |
38-
| `position` | String | <b>Default 'bottom-left'</b> <br>'bottom-left', 'bottom-right', 'top-left','top-right' |
38+
| `position` | String | <b>Default 'bottom-left'</b> <br>Options: 'bottom-left', 'bottom-right', 'top-left','top-right' |
39+
| `position-type` | String | <b>Default 'fixed'</b> <br>Options: 'fixed' or 'absolute'|
3940
| `z-index` | String | <b>Default '999'</b> <br>Set any value that suits your needs. |
4041
| `ripple-show` | Boolean | <b>Default true</b> <br>Options: true or false. |
4142
| `ripple-color` | String | <b>Default 'light'</b> <br>Options: 'light' or 'dark'. |
43+
| `icon-size` | String | <b>Default 'medium'</b> <br>Options: 'small', 'medium' or 'large'. |
4244
| `main-icon` | String | <b>Default 'add'</b> <br>Use icons from the material icon library. |
4345
| `main-tooltip` | String | <b>Default `null`</b> |
4446
| `actions` | Object | <b>[Details bellow](https://github.com/PygmySlowLoris/vue-fab/#actions)</b>

‎demo/App.vue‎

Lines changed: 46 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -61,15 +61,39 @@
6161
</div>
6262
</div>
6363
<div class="column">
64-
<div class="field has-text-left">
65-
<label class="label">Position</label>
66-
<p class="control">
67-
<span class="select">
68-
<select v-model="position">
69-
<option v-for="pos in positions">{{pos}}</option>
70-
</select>
71-
</span>
72-
</p>
64+
<div class="field is-horizontal">
65+
<div class="field-body">
66+
<div class="field has-text-left">
67+
<label class="label">Position</label>
68+
<p class="control is-expanded">
69+
<span class="select is-fullwidth">
70+
<select v-model="position">
71+
<option v-for="pos in positions">{{pos}}</option>
72+
</select>
73+
</span>
74+
</p>
75+
</div>
76+
<div class="field has-text-left">
77+
<label class="label">Position Type</label>
78+
<p class="control is-expandend">
79+
<span class="select is-fullwidth">
80+
<select v-model="positionType">
81+
<option v-for="type in positionTypes">{{type}}</option>
82+
</select>
83+
</span>
84+
</p>
85+
</div>
86+
<div class="field has-text-left">
87+
<label class="label">Size</label>
88+
<p class="control is-expandend">
89+
<span class="select is-fullwidth">
90+
<select v-model="iconSizes">
91+
<option v-for="size in sizes">{{size}}</option>
92+
</select>
93+
</span>
94+
</p>
95+
</div>
96+
</div>
7397
</div>
7498
<label class="label" style="display: flex; align-items: center; padding-right: 1rem;">
7599
Main Icon & Tooltip
@@ -152,6 +176,8 @@
152176
</footer>
153177
<fab
154178
:position="position"
179+
:icon-size="iconSizes"
180+
:position-type="positionType"
155181
:bg-color="colors.hex"
156182
:main-icon="mainIcon"
157183
:main-tooltip="mainTooltip"
@@ -207,7 +233,18 @@
207233
'top-right',
208234
'top-left',
209235
],
236+
positionTypes: [
237+
'fixed',
238+
'absolute'
239+
],
240+
sizes: [
241+
'small',
242+
'medium',
243+
'large'
244+
],
210245
position: 'bottom-right',
246+
positionType: 'fixed',
247+
iconSizes: 'medium',
211248
colors: defaultProps,
212249
mainIcon: 'add',
213250
mainTooltip: 'Hello',

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
57
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
68
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
79
<title>vue-fab</title>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-fab",
3-
"version": "2.0.8",
3+
"version": "2.0.9",
44
"description": "Vue Floating Action Button",
55
"main": "src/index.js",
66
"repository": {

‎src/FAB.vue‎

Lines changed: 81 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div :id="position + '-wrapper'" class="fab-wrapper" v-on-clickaway="away"
3-
:style="[pos, {zIndex: zIndex}]">
3+
:style="[ pos, {zIndex: zIndex}, {position: positionType} ]">
44
<div :id="position + '-action'" class="actions-container" :style="listPos">
55
<transition name="fab-actions-appear"
66
:enter-active-class="transitionEnter"
@@ -16,13 +16,13 @@
1616
<li v-if="toggle" :style="{ 'background-color': action.color || bgColor }"
1717
v-tooltip="{ content: action.tooltip, placement: tooltipPosition, classes: 'fab-tooltip' }"
1818
@click="toParent(action.name)" class="pointer">
19-
<i class="material-icons">{{action.icon}}</i>
19+
<i :class="[ actionIconSize ,'material-icons']">{{action.icon}}</i>
2020
</li>
2121
</template>
2222
<template v-else>
2323
<li v-if="toggle" :style="{ 'background-color': action.color || bgColor }"
2424
@click="toParent(action.name)" class="pointer">
25-
<i class="material-icons">{{action.icon}}</i>
25+
<i :class="[ actionIconSize ,'material-icons']">{{action.icon}}</i>
2626
</li>
2727
</template>
2828
</transition>
@@ -34,32 +34,32 @@
3434
<template v-if="mainTooltip">
3535
<div v-ripple="rippleColor == 'light' ? 'rgba(255, 255, 255, 0.35)' : ''" @click="toggle = !toggle"
3636
v-tooltip="{ content: mainTooltip, placement: tooltipPosition, classes: 'fab-tooltip' }"
37-
class="fab pointer" :style="{ 'background-color': bgColor }"
37+
class="fab pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
3838
>
39-
<i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
40-
<i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
39+
<i :class="[ mainIconSize , { rotate: toggle } ,'material-icons main']">{{mainIcon}}</i>
40+
<i :class="[ mainIconSize , { rotate: toggle } ,'material-icons close']">add</i>
4141
</div>
4242
</template>
4343
<template v-else>
4444
<div v-ripple="rippleColor == 'light' ? 'rgba(255, 255, 255, 0.35)' : ''" @click="toggle = !toggle"
45-
class="fab pointer" :style="{ 'background-color': bgColor }"
45+
class="fab pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
4646
>
47-
<i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
48-
<i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
47+
<i :class="[ mainIconSize , { rotate: toggle }, 'material-icons main']">{{mainIcon}}</i>
48+
<i :class="[ mainIconSize , { rotate: toggle }, 'material-icons close']">add</i>
4949
</div>
5050
</template>
5151
</template>
5252
<template v-else>
5353
<template v-if="mainTooltip">
5454
<div v-bind:v-tooltip="{ content: mainTooltip, placement: tooltipPosition, classes: 'fab-tooltip'}"
55-
class="fab pointer" :style="{ 'background-color': bgColor }"
55+
class="fab pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
5656
>
5757
<i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
5858
<i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
5959
</div>
6060
</template>
6161
<template v-else>
62-
<div class="fab pointer" :style="{ 'background-color': bgColor }"
62+
<div class="fab pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
6363
>
6464
<i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
6565
<i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
@@ -91,6 +91,9 @@
9191
position: {
9292
default: 'bottom-right',
9393
},
94+
positionType: {
95+
default: 'fixed',
96+
},
9497
zIndex: {
9598
default: '999',
9699
},
@@ -103,12 +106,60 @@
103106
mainIcon: {
104107
default: 'add'
105108
},
109+
iconSize: {
110+
default: 'medium'
111+
},
106112
mainTooltip: {
107113
default: null
108114
},
109115
actions: {}
110116
},
111117
computed: {
118+
actionIconSize() {
119+
switch (this.iconSize) {
120+
case 'small':
121+
return 'md-18';
122+
break;
123+
case 'medium':
124+
return 'md-24';
125+
break;
126+
case 'large':
127+
return 'md-36';
128+
break;
129+
default:
130+
return 'md-24';
131+
}
132+
},
133+
mainIconSize() {
134+
switch (this.iconSize) {
135+
case 'small':
136+
return 'md-24';
137+
break;
138+
case 'medium':
139+
return 'md-36';
140+
break;
141+
case 'large':
142+
return 'md-48';
143+
break;
144+
default:
145+
return 'md-36';
146+
}
147+
},
148+
paddingAmount() {
149+
switch (this.iconSize) {
150+
case 'small':
151+
return '1.8rem';
152+
break;
153+
case 'medium':
154+
return '2rem';
155+
break;
156+
case 'large':
157+
return '2.5rem';
158+
break;
159+
default:
160+
return '1.9rem';
161+
}
162+
},
112163
listPos() {
113164
if (this.position === 'top-right' || this.position === 'top-left') {
114165
return {
@@ -255,22 +306,20 @@
255306
}
256307
257308
.fab-wrapper {
258-
position: fixed;
259309
z-index: 999;
260310
}
261311
262312
.fab {
263313
border-radius: 100px;
264-
width: 65px;
314+
/*width: 65px;*/
315+
/*height: 65px;*/
316+
padding: 2rem;
265317
position: relative;
266318
overflow: hidden;
267-
height: 65px;
268319
display: flex;
269320
align-items: center;
270321
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.20), 0 4px 4px rgba(0, 0, 0, 0.15);
271322
z-index: 2;
272-
display: flex;
273-
align-items: center;
274323
justify-content: center;
275324
}
276325
@@ -313,12 +362,16 @@
313362
.fab-list {
314363
position: relative;
315364
z-index: 1;
316-
margin: 2vh 0.5vw;
365+
margin: 2vh 0;
366+
display: flex;
367+
flex-direction: column;
368+
align-items: center;
317369
}
318370
319371
.fab-list li {
320-
width: 50px;
321-
height: 50px;
372+
/*width: 50px;*/
373+
/*height: 50px;*/
374+
padding: .8rem;
322375
margin-top: 2vh;
323376
display: flex;
324377
align-items: center;
@@ -383,25 +436,27 @@
383436
384437
@media screen and (max-width: 768px) {
385438
.fab-list {
386-
margin: 2vh 1.8vw;
439+
margin: 2vh 0;
387440
}
388441
389442
.fab-list li {
390-
width: 40px;
391-
height: 40px;
443+
/*width: 40px;*/
444+
/*height: 40px;*/
445+
/*padding: .6rem;*/
392446
}
393447
394448
.fab-list li i {
395-
font-size: 24px !important;
449+
/*font-size: 24px !important;*/
396450
}
397451
398452
.fab {
399-
width: 55px;
400-
height: 55px;
453+
/*width: 55px;*/
454+
/*height: 55px;*/
455+
/*padding: 1.5rem;*/
401456
}
402457
403458
.fab i {
404-
font-size: 34px !important;
459+
/*font-size: 34px !important;*/
405460
}
406461
407462
}

0 commit comments

Comments
 (0)