Skip to content

Commit

Permalink
Custom Style
Browse files Browse the repository at this point in the history
  • Loading branch information
Ade94 committed Feb 21, 2020
1 parent 0af3a63 commit 1b51b0e
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 6 deletions.
40 changes: 38 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,10 @@ this.$whoosh({
// (optional) Notification message
message: "I am the message",

// (optional) This will override the default duration and the provided duration mains.js
// (optional) This will override the default duration and the provided prop duration
duration: 5,

// (optional) This will override the size and the provided prop size
// (optional) This will override the default size and the provided prop size
size: {
width: 400,
height: 250
Expand All @@ -72,3 +72,39 @@ All props below are optional.
| textColor | String | black | set the text color to what you prefer |
| progressColor | String | #dcd9d9 | set the progress color to what you prefer |
| size | Object | {width:500,height:210} | use it to set your prefered width and height |
| messageStyle | Object | | give a custom style to the message section |
| titleStyle | Object | | give a custom style to the title section |



#### Custom Status
If the default status (success, error, warn) are not enough or not to your taste, you can create your own custom statuses which is an array of objects status and each object requires a name and color.

Inside your main.js file add the options parameter like below.

```javascript
import Whoosh from "@adecrown/whoosh";
Vue.use(Whoosh,{
statuses:[
{
name: 'Testing',
color: 'red'
},
{
name: 'Testing 3',
color: 'green'
}
]
});
```
Use Whoosh as normal to call your custom status
```javascript
this.$whoosh({
status: "Testing",
title: "This is my custom status",
message: "Hello Testing"
});
```
The defualt statuses are still available along with your custom ones


21 changes: 17 additions & 4 deletions src/components/Whoosh/Card.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,16 @@
v-if="!fill"
></div>
<div class="card__body">
<div class="card__title" v-if="content.title">{{ content.title }}</div>
<div class="card__message" v-if="content.message">{{ content.message }}</div>
<div
class="card__title"
v-if="content.title"
:style="titleStyle"
>{{ content.title }}</div>
<div
class="card__message"
v-if="content.message"
:style="messageStyle"
>{{ content.message }}</div>
</div>
</div>
</div>
Expand All @@ -54,6 +62,8 @@ export default class Card extends Vue {
@Prop({ type: Boolean, required: false }) private closeOnClick!: boolean;
@Prop({ type: Boolean, required: false }) private fill!: boolean;
@Prop({ type: String, required: false }) private textColor!: string;
@Prop({ type: Object, required: false }) private messageStyle!: object;
@Prop({ type: Object, required: false }) private titleStyle!: object;
@Prop({ type: String, required: false }) private progressColor!: string;
@Prop({ type: Object, required: true }) private size!: CardContent["size"];
Expand Down Expand Up @@ -111,9 +121,12 @@ export default class Card extends Vue {
get statusColor() {
if (isCustomStatusesDefined(this.content.statuses)) {
return this.content.statuses!.find(
const isCustom = this.content.statuses!.find(
element => element.name === this.content.status
)!.color;
);
if (isCustom) {
return isCustom.color;
}
}
switch (this.content.status) {
case status.success:
Expand Down
4 changes: 4 additions & 0 deletions src/components/Whoosh/Whoosh.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
:fill="fill"
:textColor="textColor"
:progressColor="progressColor"
:messageStyle="messageStyle"
:titleStyle="titleStyle"
/>
</transition-group>
</div>
Expand Down Expand Up @@ -42,6 +44,8 @@ export default class Whoosh extends Vue {
@Prop({ type: Boolean, default: false }) private closeOnClick!: boolean;
@Prop({ type: Boolean, default: false }) private fill!: boolean;
@Prop({ type: String, default: "black" }) private textColor!: string;
@Prop({ type: Object, required: false }) private messageStyle!: object;
@Prop({ type: Object, required: false }) private titleStyle!: object;
@Prop({ type: String, required: false }) private progressColor!: string;
@Prop({
type: Object,
Expand Down

0 comments on commit 1b51b0e

Please sign in to comment.