Display left | right

adecrown · Feb 25, 2020 · cbff6e2 · cbff6e2
1 parent 1a0721c
commit cbff6e2
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -74,6 +74,7 @@ All props below are optional.
 | 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                               |
+|display| left or right | right| controls which side the notification should come out from |
 
 #### Custom Status
 

diff --git a/src/components/Whoosh/Card.vue b/src/components/Whoosh/Card.vue
@@ -2,13 +2,7 @@
   <transition name="slide-fade">
     <div
       class="card"
-      :style="{
-        'margin-bottom': setMargin,
-        color: textColor,
-        'background-color': fill ? statusColor : 'white',
-        width: setWidth,
-        height: setHeight
-      }"
+      :style="mainStyle"
       @mouseover="paused = true"
       @mouseleave="paused = false"
       @click="$emit('click')"
@@ -22,10 +16,11 @@
       <div class="card-noti">
         <div
           class="card__status"
+          :class="{'card__status-left':display==='left'}"
           :style="{ 'background-color': statusColor, height: setStatusHeight }"
           v-if="!fill"
         ></div>
-        <div class="card__body">
+        <div class="card__body" :class="{'card__body-left':display==='left' && !fill}">
           <div
             class="card__title"
             v-if="content.title"
@@ -66,6 +61,8 @@ export default class Card extends Vue {
   @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"];
+  @Prop({ type: String, required: true, validator: (value) => {return value ===  'right' || value ===  'left'} })
+   private display!: 'right' | 'left';
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   timer: any = {
@@ -76,6 +73,18 @@ export default class Card extends Vue {
   paused = false;
   now = 0;
 
+  get mainStyle(){
+    const style = {
+    'margin-bottom': this.setMargin,
+    color: this.textColor,
+    'background-color': this.fill ? this.statusColor : 'white',
+    width: this.setWidth,
+    height: this.setHeight,
+    [this.display]:"10px"
+    }
+
+    return style
+  }
   get moveProgress() {
     const total = this.useDuration() * 1000; //1000 = 1 seconds;
     return ((total - this.now) / total) * 100;
@@ -210,12 +219,19 @@ export default class Card extends Vue {
   margin-top: 5px;
   margin-left: 5px;
 }
+.card__status-left {
+  position: absolute;
+  right: 5px;
+}
 .card__body {
   width: 100%;
   margin: 10px;
   text-align: left;
   font-weight: 500;
 }
+.card__body-left{
+margin-right: 20px
+}
 .card__title {
   border-bottom: #0000001a 1px solid;
   padding-bottom: 8px;

diff --git a/src/components/Whoosh/Whoosh.vue b/src/components/Whoosh/Whoosh.vue
@@ -17,6 +17,7 @@
         :progressColor="progressColor"
         :messageStyle="messageStyle"
         :titleStyle="titleStyle"
+        :display="display"
       />
     </transition-group>
   </div>
@@ -53,6 +54,8 @@ export default class Whoosh extends Vue {
     default: () => ({ width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT })
   })
   private size!: CardContent["size"];
+  @Prop({ type: String, required: false, default:'right',validator: (value) => {return value ===  'right' || value ===  'left'} })
+  private display!: 'right' | 'left';
 
   mounted() {
     events.$on("startWhoosh", this.makeAWhooshList);