New launch skin

adecrown · Apr 12, 2020 · b0311a2 · b0311a2
1 parent cc2fb43
commit b0311a2
Show file tree

Hide file tree

Showing 17 changed files with 1,477 additions and 625 deletions.
diff --git a/README.md b/README.md
@@ -92,6 +92,8 @@ All props below are optional.
 | display       | left or right | right                  | controls which side the notification should come out from                                   |
 | mobileDisplay | top or bottom | top                    | controls which position the notification should be displayed on mobile                      |
 | isResponsive  | Boolean       | true                   | handles responsiveness of notifications. Set it to false if you don't want the mobile view. |
+| skin | default or launch | default | set the notification skin type to use
+| queue | Boolean | false | wait for existing notification to close before showing a new one 
 
 #### Custom Status
 
@@ -133,3 +135,16 @@ The defualt statuses are still available along with your custom ones but you can
     color: 'black'
   }
 ```
+
+#### launch skin notification (usage)
+Making use of the launch notification only require one prop, just add a skin prop to whoosh and specify 'launch' as the string. It's duration is fixed to 5 seconds.
+
+```javascript
+  <Whoosh skin="launch"/>
+```
+```javascript
+this.$whoosh({
+  status: "success",
+  message: "My launch message"
+});
+```
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     }
   },
   "dependencies": {
-    "core-js": "^3.6.4",
+    "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.2",
     "vue-property-decorator": "^8.4.1"
@@ -68,12 +68,12 @@
     "@babel/core": "^7.9.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.9.0",
-    "@typescript-eslint/eslint-plugin": "^2.24.0",
-    "@typescript-eslint/parser": "^2.24.0",
-    "@vue/cli-plugin-babel": "^4.2.3",
-    "@vue/cli-plugin-eslint": "^4.2.3",
-    "@vue/cli-plugin-typescript": "^4.2.3",
-    "@vue/cli-service": "^4.2.3",
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
+    "@vue/cli-plugin-babel": "^4.3.1",
+    "@vue/cli-plugin-eslint": "^4.3.1",
+    "@vue/cli-plugin-typescript": "^4.3.1",
+    "@vue/cli-service": "^4.3.1",
     "@vue/eslint-config-typescript": "^5.0.2",
     "babel-eslint": "^10.1.0",
     "babel-plugin-transform-dynamic-import": "^2.1.0",

diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <script src="https://kit.fontawesome.com/dc5877d970.js" crossorigin="anonymous"></script>
   </head>
   <body>
     <noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,34 +1,37 @@
 <template>
   <div id="app">
-    <DefaultCard
+    <Launch
       :content="content"
       :list="list"
       :masterDuration="masterDuration"
       :size="size"
       progressColor="red"
       :expandable="expandi"
       fill
-      display="left"
+      skin="simple"
     />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import DefaultCard from "./components/Whoosh/DefaultCard.vue";
+import Launch from "./components/Whoosh/skins/Launch.vue";
 @Component({
   components: {
-    DefaultCard
+    DefaultCard,
+    Launch
   }
 })
 export default class App extends Vue {
   pro = 20;
-  list = [];
+  list = [{id:1},{id:2},{id:3}];
   masterDuration = 5;
   size = { height: 200 };
   content = {
+    id:2,
     title: "My name is go sgi sisd sidsoiosdvosdin wefewuifewfiun ",
-    message: "This is my message ",
+    message: "This is my message",
     status: "error"
   };
   expandi = {

diff --git a/src/components/Whoosh/Card.vue b/src/components/Whoosh/Card.vue
@@ -14,14 +14,14 @@ export default class Card extends Vue {
 
 <style scoped>
 .card {
-  width: 500px;
+  width:500px;
   height: 200px;
   position: absolute;
   bottom: 10px;
   right: 10px;
   box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.2);
   background-color: white;
   display: inline-block;
-  z-index: 9999;
+  z-index: 9998;
 }
 </style>
diff --git a/src/components/Whoosh/DefaultCard.vue b/src/components/Whoosh/DefaultCard.vue
@@ -41,7 +41,7 @@
           v-if="!closeOnClick"
           :color="progressColor"
         />
-        <div class="default-noti" @click="$emit('click')" 
+        <div class="default-noti"  :id="content.id+'whooshHeight'" @click="$emit('click')" 
         @mouseover="paused = true"
         @mouseleave="paused = false">
           <Status :display="display" :height="setStatusHeight" :fill="fill" :statusColor="statusColor"/>
@@ -67,16 +67,16 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Prop, Vue, Watch } from "vue-property-decorator";
-import { isCustomStatusesDefined, TimerCup } from "./helpers/Util";
-import { DEFAULT_HEIGHT, MARGIN_GAP, status } from "./helpers/Constant";
-import { CardContent,expandData } from "../types/index";
+import { Component, Mixins } from "vue-property-decorator";
+import { DEFAULT_HEIGHT, MARGIN_GAP } from "./helpers/Constant";
+import { CardContent } from "../types/index";
 import Progress from "./Progress.vue";
 import More from "./More.vue";
 import Card from "./Card.vue";
 import ExpandedCard from "./ExpandedCard.vue";
 import Status from "./Status.vue";
 import Mobile from "./Mobile.vue";
+import WhooshMixIn from "./mixins/whooshMixin"
 
 @Component({
   components: {
@@ -88,39 +88,8 @@ import Mobile from "./Mobile.vue";
     Mobile
   }
 })
-export default class DefaultCard extends Vue {
-  @Prop({ type: Number, default: 0 }) private position!: number;
-  @Prop({ type: Array, required: true }) private list!: Array<CardContent>;
-  @Prop({ type: Object, required: true }) private content!: CardContent;
-  @Prop({ type: Number, required: true }) private masterDuration!: number;
-  @Prop({ type: Boolean, required: false }) private closeOnClick!: boolean;
-  @Prop({ type: Boolean, required: false }) private fill!: boolean;
-  @Prop({ type: Object, required: false }) private expandable!: expandData;
-  @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"];
-  @Prop({
-    type: String,
-    required: true,
-    validator: value => {
-      return value === "right" || value === "left";
-    }
-  })
-  private display!: "right" | "left";
-  @Prop({ type: Boolean, required: false, default:false}) private isMobile!: boolean;
-  @Prop({ type: String, required: false }) private mobileDisplay!: string;
+export default class DefaultCard extends Mixins(WhooshMixIn) {
   
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  timer: any = {
-    getTimeLeft: () => {
-      return 0;
-    }
-  };
-  paused = false;
-  now = 0;
   expand = false;
 
   get mainStyle() {
@@ -134,12 +103,7 @@ export default class DefaultCard extends Vue {
     };
   }
 
-  get moveProgress() {
-    const total = this.useDuration() * 1000; //1000 = 1 seconds;
-    return ((total - this.now) / total) * 100;
-  }
-
- get buttonColor(){
+  get buttonColor(){
     return this.expandable.buttonColor ? this.expandable.buttonColor : this.mainStyle['background-color']
   }
 
@@ -180,53 +144,6 @@ export default class DefaultCard extends Vue {
     return this.isProgressVisible(this.size!.height - MARGIN_GAP) + "px";
   }
 
-  get statusColor() {
-    if (isCustomStatusesDefined(this.content.statuses)) {
-      const isCustom = this.content.statuses!.find(
-        element => element.name === this.content.status
-      );
-      if (isCustom) {
-        return isCustom.color;
-      }
-    }
-    switch (this.content.status) {
-      case status.success:
-        return "#4caf50ad";
-      case status.warning:
-        return "#00bcd4b0";
-      case status.error:
-        return "#ff0000";
-      default:
-        return "#f7a104b5";
-    }
-  }
-
-  @Emit()
-  close() {
-    return this.content;
-  }
-
-  mounted() {
-    if (!this.closeOnClick) {
-      this.startTimer();
-    }
-  }
-
-  @Watch("paused")
-  pausedChanged(newVal: boolean, old: boolean) {
-    if (!this.closeOnClick) {
-      if (newVal) {
-        this.timer.pause();
-      } else {
-        this.timer.resume();
-      }
-    }
-  }
-
-  useDuration(): number {
-    return this.content.duration ? this.content.duration : this.masterDuration;
-  }
-
   isProgressVisible(height: number) {
     return this.closeOnClick ? height : height - 5;
   }
@@ -236,20 +153,7 @@ export default class DefaultCard extends Vue {
     this.$emit("expand", this.expand);
   }
 
-  startTimer() {
-    this.timer = new TimerCup(() => {
-      this.close();
-    }, this.useDuration() * 1000);
-    this.getSetTimeOutTimeLeft();
-  }
-  getSetTimeOutTimeLeft() {
-    const setIntervalTRef = setInterval(() => {
-      this.now = this.timer.getTimeLeft();
-      if (this.now <= 0) {
-        clearInterval(setIntervalTRef);
-      }
-    }, 17);
-  }
+ 
   add(whatsBelow: CardContent) {
     let whatsBelowSize: number;
     whatsBelowSize = this.size!.height;

diff --git a/src/components/Whoosh/Progress.vue b/src/components/Whoosh/Progress.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="progress">
-    <div class="progress__indicator" :style="{'width':progress+'%','background-color':color}"></div>
+    <div class="progress__indicator" :style="{'width':progress+'%','background-color':color,height:height+'px'}"></div>
   </div>
 </template>
 
@@ -12,6 +12,8 @@ export default class Progress extends Vue {
   private progress!: number;
   @Prop({ type: String, required: false, default: "#dcd9d9" })
   private color!: string;
+  @Prop({ type: Number, required: false, default: 5 })
+  private height!: number;
 }
 </script>
 
@@ -24,7 +26,6 @@ export default class Progress extends Vue {
 .progress__indicator {
   width: 0%;
   max-width: 100%;
-  height: 5px;
   border-radius: 20px;
 }
 </style>
diff --git a/src/components/Whoosh/Status.vue b/src/components/Whoosh/Status.vue
@@ -1,11 +1,11 @@
 <template>
-<div v-if="!fill">
+<div v-if="!fill" style="display:flex">
   <div v-if="top" class="status" :style="{ 'background-color': statusColor}"/>
   <div
     v-else
     class="status-side"
     :class="{ 'status-left': display === 'left' }"
-    :style="{ 'background-color': statusColor, height }"
+    :style="[{ 'background-color': statusColor, height },statusStyles]"
   />
 </div>
 </template>
@@ -19,6 +19,7 @@ export default class Status extends Vue {
   @Prop({ type: String, required: false }) private height!: string;
   @Prop({ type: String, required: false }) private width!: string;
   @Prop({ type: String, required: false }) private statusColor!: string;
+  @Prop({ type: Object, required: false }) private statusStyles!: object;
   @Prop({ type: Boolean, required: false,default:false }) private top!: boolean;
 }
 </script>
@@ -29,7 +30,6 @@ export default class Status extends Vue {
 }
 .status-side {
   width: 10px;
-  height: 190px;
   border-radius: 20px;
   margin-top: 5px;
   margin-left: 5px;