Changed notification message position ( #86696p66d )

public/css/app.css

@@ -65184,6 +65184,10 @@ body{
     right: 1rem;
   }
 
+  :is([dir="ltr"] .sm\:ltr\:left-4){
+    left: 1rem;
+  }
+
   :is([dir="ltr"] .sm\:ltr\:pl-10){
     padding-left: 2.5rem;
   }
@@ -65192,6 +65196,10 @@ body{
     left: 1rem;
   }
 
+  :is([dir="rtl"] .sm\:rtl\:right-4){
+    right: 1rem;
+  }
+
   :is([dir="rtl"] .sm\:rtl\:space-x-reverse) > :not([hidden]) ~ :not([hidden]){
     --tw-space-x-reverse: 1;
   }

resources/assets/js/components/NotificationPlugin/Notification.vue

@@ -2,9 +2,24 @@
     <div
         @click="tryClose"
         data-notify="container"
-    class="alert alert-notify fixed w-full sm:w-500 flex items-center justify-between ltr:right-0 rtl:left-0 sm:ltr:right-4 sm:rtl:left-4 p-4 text-black font-bold rounded-lg z-30"
         :class="[
-      { 'alert-with-icon': icon },
+            'alert alert-notify',
+            'fixed w-full sm:w-500 flex items-center justify-between',
+            {
+                'rtl:right-0 ltr:left-0' : horizontalAlign == 'left',
+                'sm:rtl:right-4 sm:ltr:left-4' : horizontalAlign == 'left',
+            },
+            {
+                'ltr:right-0 rtl:left-0' : horizontalAlign == 'right',
+                'sm:ltr:right-4 sm:rtl:left-4' : horizontalAlign == 'right',
+            },
+            'p-4',
+            'text-black font-bold',
+            'rounded-lg',
+            'z-30',
+            { 
+                'alert-with-icon': icon
+            },
             verticalAlign,
             horizontalAlign,
             alertType
@@ -26,11 +41,10 @@
                 <span v-if="title" class="title">
                     <b>{{ title }}<br/></b>
                 </span>
+
                 <span v-if="message" v-html="message"></span>
-      <content-render
+
-        v-if="!message && component"
+                <content-render v-if="!message && component" :component="component"></content-render>
-        :component="component"
-      ></content-render>
             </span>
         </div>
 
@@ -39,49 +53,60 @@
                 class="close text-2xl"
                 data-dismiss="alert"
                 aria-label="Close"
-              @click="close">
+                @click="close"
+            >
                 <span aria-hidden="true">×</span>
             </button>
         </slot>
     </div>
 </template>
+
 <script>
     export default {
         name: 'notification',
+
         components: {
             contentRender: {
                 props: ['component'],
                 render: h => h(this.component)
             }
         },
+
         props: {
             message: String,
+
             title: {
                 type: String,
                 description: 'Notification title'
             },
+
             icon: {
                 type: String,
                 description: 'Notification icon'
             },
+
             verticalAlign: {
                 type: String,
                 default: 'top',
                 validator: value => {
                     let acceptedValues = ['top', 'bottom'];
+
                     return acceptedValues.indexOf(value) !== -1;
                 },
                 description: 'Vertical alignment of notification (top|bottom)'
             },
+
             horizontalAlign: {
                 type: String,
                 default: 'right',
                 validator: value => {
                     let acceptedValues = ['left', 'center', 'right'];
+
                     return acceptedValues.indexOf(value) !== -1;
                 },
                 description: 'Horizontal alignment of notification (left|center|right)'
             },
+
             type: {
                 type: String,
                 default: 'info',
@@ -94,10 +119,12 @@
                         'warning',
                         'success'
                     ];
+
                     return acceptedValues.indexOf(value) !== -1;
                 },
                 description: 'Notification type of notification (gray-300|blue-300|gray-300|red-300|orange-300|green-300)'
             },
+
             timeout: {
                 type: Number,
                 default: 5000,
@@ -106,33 +133,40 @@
                 },
                 description: 'Notification timeout (closes after X milliseconds). Default is 5000 (5s)'
             },
+
             timestamp: {
                 type: Date,
                 default: () => new Date(),
                 description: 'Notification timestamp (used internally to handle notification removal correctly)'
             },
+
             component: {
                 type: [Object, Function],
                 description: 'Custom content component. Cane be a `.vue` component or render function'
             },
+
             showClose: {
                 type: Boolean,
                 default: true,
                 description: 'Whether to show close button'
             },
+
             closeOnClick: {
                 type: Boolean,
                 default: true,
                 description: 'Whether to close notification when clicking it\' body'
             },
+
             clickHandler: {
                 type: Function,
                 description: 'Custom notification click handler'
             }
         },
+
         data() {
             return {
                 elmHeight: 0,
+
                 typeByClass: {
                     'default': 'black-100',
                     'info':    'blue-100',
@@ -141,6 +175,7 @@
                     'warning': 'orange-100',
                     'success': 'green-100',
                 },
+
                 textByClass: {
                     'default': 'black-600',
                     'info':    'blue-600',
@@ -151,16 +186,20 @@
                 }
             };
         },
+
         computed: {
             hasIcon() {
                 return this.icon && this.icon.length > 0;
             },
+
             alertType() {
                 return `bg-${this.typeByClass[this.type]} text-${this.textByClass[this.type]}`;
             },
+
             customPosition() {
                 let initialMargin = 20;
                 let alertHeight = this.elmHeight + 10;
+
                 let sameAlertsCount = this.$notifications.state.filter(alert => {
                     return (
                         alert.horizontalAlign === this.horizontalAlign &&
@@ -168,37 +207,51 @@
                         alert.timestamp <= this.timestamp
                     );
                 }).length;
+
                 if (this.$notifications.settings.overlap) {
                     sameAlertsCount = 1;
                 }
+
                 let pixels = (sameAlertsCount - 1) * alertHeight + initialMargin;
+
+                if (sameAlertsCount > 1) {
+                    pixels = 30 + this.$parent.children[sameAlertsCount - 2].elm.offsetHeight;
+                }
+
                 let styles = {};
+
                 if (this.verticalAlign === 'top') {
                     styles.top = `${pixels}px`;
                 } else {
                     styles.bottom = `${pixels}px`;
                 }
+
                 return styles;
             }
         },
+
         methods: {
             close() {
                 this.$emit('close', this.timestamp);
             },
+
             tryClose(evt) {
                 if (this.clickHandler) {
                     this.clickHandler(evt, this);
                 }
+
                 if (this.closeOnClick) {
                     this.close();
                 }
             }
         },
+
         mounted() {
             this.elmHeight = this.$el.clientHeight;
+
             if (this.timeout) {
-        setTimeout(this.close, this.timeout);
+                //setTimeout(this.close, this.timeout);
-      }
             }
+        },
     };
 </script>

resources/assets/js/components/NotificationPlugin/Notifications.vue

@@ -2,7 +2,8 @@
     <div class="notifications">
         <slide-y-up-transition :duration="transitionDuration"
             group
-                             mode="out-in">
+            mode="out-in"
+        >
             <notification
                 v-for="notification in notifications"
                 v-bind="notification"
@@ -14,6 +15,7 @@
         </slide-y-up-transition>
     </div>
 </template>
+
 <script>
     import Notification from './Notification.vue';
     import { SlideYUpTransition } from 'vue2-transitions';
@@ -23,29 +25,35 @@
             SlideYUpTransition,
             Notification
         },
+
         props: {
             transitionDuration: {
                 type: Number,
                 default: 200
             },
+
             overlap: {
                 type: Boolean,
                 default: false
             }
         },
+
         data() {
             return {
                 notifications: this.$notifications.state
             };
         },
+
         methods: {
             removeNotification(timestamp) {
                 this.$notifications.removeNotification(timestamp);
             }
         },
+
         created() {
             this.$notifications.settings.overlap = this.overlap;
         },
+
         watch: {
             overlap: function (newVal) {
                 this.$notifications.settings.overlap = newVal;

resources/assets/js/components/NotificationPlugin/index.js

@@ -2,6 +2,7 @@ import Notifications from './Notifications.vue';
 
 const NotificationStore = {
     state: [], // here the notifications will be added
+
     settings: {
         overlap: false,
         verticalAlign: 'top',
@@ -11,26 +12,37 @@ const NotificationStore = {
         closeOnClick: true,
         showClose: true
     },
+
     setOptions(options) {
         this.settings = Object.assign(this.settings, options);
     },
+
     removeNotification(timestamp) {
         const indexToDelete = this.state.findIndex(n => n.timestamp === timestamp);
+
         if (indexToDelete !== -1) {
             this.state.splice(indexToDelete, 1);
         }
     },
+
     addNotification(notification) {
         if (typeof notification === 'string' || notification instanceof String) {
-      notification = { message: notification };
+            notification = { 
+                message: notification
+            };
         }
+
         notification.timestamp = new Date();
+
         notification.timestamp.setMilliseconds(
             notification.timestamp.getMilliseconds() + this.state.length
         );
+
         notification = Object.assign({}, this.settings, notification);
+
         this.state.push(notification);
     },
+
     notify(notification) {
         if (Array.isArray(notification)) {
             notification.forEach(notificationInstance => {
@@ -48,15 +60,18 @@ const NotificationsPlugin = {
             data: {
                 notificationStore: NotificationStore
             },
+
             methods: {
                 notify(notification) {
                     this.notificationStore.notify(notification);
                 }
             }
         });
+
         Vue.prototype.$notify = app.notify;
         Vue.prototype.$notifications = app.notificationStore;
         Vue.component('Notifications', Notifications);
+
         if (options) {
             NotificationStore.setOptions(options);
         }

resources/assets/js/mixins/global.js

@@ -271,6 +271,8 @@ export default {
                 }
 
                 this.$notify({
+                    verticalAlign: 'bottom',
+                    horizontalAlign: 'left',
                     message: notify.message,
                     timeout: timeout,
                     icon: 'error_outline',
@@ -1120,6 +1122,8 @@ export default {
                                 document.execCommand('copy');
 
                                 this.$notify({
+                                    verticalAlign: 'bottom',
+                                    horizontalAlign: 'left',
                                     message: this.share.success_message,
                                     timeout: 5000,
                                     icon: 'error_outline',

resources/assets/js/mixins/wizardAction.js

@@ -72,6 +72,8 @@ export default {
             }
 
             this.$notify({
+                verticalAlign: 'bottom',
+                horizontalAlign: 'left',
                 message: response.data.message,
                 timeout: timeout,
                 icon: "error_outline",
@@ -92,6 +94,8 @@ export default {
             }
 
             this.$notify({
+                verticalAlign: 'bottom',
+                horizontalAlign: 'left',
                 message: event.message,
                 timeout: timeout,
                 icon: "error_outline",

resources/assets/js/views/auth/common.js

@@ -54,6 +54,8 @@ const login = new Vue({
                 let type = notify.level;
 
                 this.$notify({
+                    verticalAlign: 'bottom',
+                    horizontalAlign: 'left',
                     message: notify.message,
                     timeout: 5000,
                     icon: '',

resources/assets/js/views/common/contacts.js

@@ -69,6 +69,8 @@ const app = new Vue({
 
                         if (response.data.error) {
                             this.$notify({
+                                verticalAlign: 'bottom',
+                                horizontalAlign: 'left',
                                 message: response.data.message,
                                 timeout: 0,
                                 icon: 'fas fa-bell',

resources/assets/js/views/modules/apps.js

@@ -106,6 +106,8 @@ const app = new Vue({
             add_to_cart_promise.then(response => {
                 if (response.data.success) {
                     this.$notify({
+                        verticalAlign: 'bottom',
+                        horizontalAlign: 'left',
                         message: response.data.message,
                         timeout: 0,
                         icon: "shopping_cart_checkout",

resources/assets/js/views/wizard/Finish.vue

@@ -112,6 +112,8 @@ export default {
         })
         .catch((error) => {
             this.$notify({
+                verticalAlign: 'bottom',
+                horizontalAlign: 'left',
                 message: this.translations.finish.error_message,
                 timeout: 1000,
                 icon: "",