feat: Enhance Toast Notification Style - MEED-2627 - Meeds-io/MIPs#99 (…

…#3030) Prior to this change, the style of v-alert Vuetify component was embedded by stylesheet. This change will enhance the UX of Toast notifications UX in desktop and mobile.
Meeds-io · Oct 11, 2023 · 706f8ab · 706f8ab
1 parent 23433fa
commit 706f8ab
Show file tree

Hide file tree

Showing 23 changed files with 168 additions and 345 deletions.
diff --git a/webapp/portlet/src/main/webapp/vue-apps/common/components/Notifications.vue b/webapp/portlet/src/main/webapp/vue-apps/common/components/Notifications.vue
@@ -23,39 +23,62 @@
     :left="!$vuetify.rtl"
     :right="$vuetify.rtl"
     :timeout="timeout"
-    class="z-index-modal"
-    color="transparent"
+    :content-class="isMobile && 'pa-0 ma-0'"
+    :class="isMobile && 'full-height'"
+    class="z-index-snackbar"
+    color="transparent ma-0"
     elevation="0"
     app>
     <confeti-animation
       v-if="confeti"
       class="overflow-hidden" />
     <v-alert
       :type="alertType"
+      :min-width="minWidth"
       :max-width="maxWidth"
-      class="white position-relative z-index-modal"
-      border="left"
+      :min-height="minHeight"
+      :dense="isMobile"
+      :dismissible="!isMobile"
+      :icon="false"
+      :border="!isMobile && 'left' || false"
+      :class="isMobile && 'no-border-radius b-0 mb-0' || 'mb-5'"
+      :style="absolute && {
+        left: `${left}px`,
+      }"
+      v-touch="{
+        start: moveStart,
+        end: moveEnd,
+        move: moveSwipe,
+      }"
+      class="d-flex flex-column justify-center white mt-0 mx-0 py-2 px-4 border-box-sizing"
       elevation="2"
       light
       outlined
-      dismissible
       colored-border
       @input="closeAlertIfDismissed">
-      <div class="d-flex flex-nowrap align-center full-width">
+      <div
+        :class="isMobile && 'mt-2'"
+        class="d-flex flex-nowrap text-start align-center justify-center full-width">
+        <v-progress-linear
+          v-if="isMobile"
+          :color="`${alertType}-color-background`"
+          :value="progression"
+          height="6"
+          class="position-absolute t-0 l-0 r-0 mt-n1" />
         <span
           v-if="useHtml"
-          class="text--lighten-1 flex-grow-1 text-start pe-4"
+          class="text--lighten-1 flex-grow-1 me-4"
           v-sanitized-html="alertMessage"
           @click="handleAlertClicked">
         </span>
-        <span v-else class="text--lighten-1 flex-grow-1 pe-4">
+        <span v-else class="text--lighten-1 flex-grow-1 me-4">
           {{ alertMessage }}
         </span>
         <v-btn
           v-if="alertLink || alertLinkCallback"
           :href="alertLink"
           :title="alertLinkTooltip"
-          :class="alertLinkText && 'elevation-0 transparent primary--text me-n12' || 'secondary--text'"
+          :class="alertLinkText && 'elevation-0 transparent primary--text' || 'secondary--text'"
           :target="alertLinkTarget || '_blank'"
           :icon="!alertLinkText && alertLinkIcon"
           name="closeSnackbarButton"
@@ -66,6 +89,13 @@
           <v-icon v-else-if="alertLinkIcon">{{ alertLinkIcon }}</v-icon>
         </v-btn>
       </div>
+      <template v-if="!isMobile" #close="{toggle}">
+        <v-btn
+          icon
+          @click="toggle">
+          <v-icon size="16" class="icon-default-color">fa-times</v-icon>
+        </v-btn>
+      </template>
     </v-alert>
   </v-snackbar>
 </template>
@@ -86,6 +116,12 @@ export default {
     alertLinkTooltip: null,
     timeoutInstance: null,
     maxIconsSize: '20px',
+    interval: 0,
+    progression: 0,
+    absolute: false,
+    left: 0,
+    startEvent: null,
+    moving: false,
   }),
   computed: {
     isMobile() {
@@ -97,6 +133,26 @@ export default {
     maxWidth() {
       return this.isMobile && '100vw' || '50vw';
     },
+    minWidth() {
+      return this.isMobile && '100vw' || 400;
+    },
+    minHeight() {
+      return this.isMobile && 69 || 57;
+    },
+  },
+  watch: {
+    snackbar() {
+      if (this.isMobile) {
+        if (this.snackbar) {
+          this.interval = window.setInterval(() => {
+            this.progression -= this.timeout / 1000;
+          }, 1000);
+        } else if (this.interval) {
+          window.clearInterval(this.interval);
+          this.interval = 0;
+        }
+      }
+    },
   },
   created() {
     document.addEventListener('alert-message', (event) => {
@@ -157,10 +213,20 @@ export default {
       });
     });
     this.$root.$on('close-alert-message', this.closeAlert);
+
+    // Kept for backward compatibility
+    document.addEventListener('notification-alert', event => {
+      this.openAlert({
+        alertType: event?.detail?.type,
+        alertMessage: event?.detail?.message,
+      });
+    });
   },
   methods: {
     openAlert(params) {
+      this.reset();
       this.closeAlert();
+      this.progression = 100;
       this.$nextTick().then(() => {
         this.useHtml = params.useHtml || false;
         this.confeti = params.confeti || false;
@@ -206,6 +272,41 @@ export default {
         this.linkCallback();
       }
     },
+    reset() {
+      this.absolute = false;
+      this.left = -8;
+      this.startEvent = null;
+      this.moving = false;
+    },
+    moveStart() {
+      if (this.absolute) {
+        return;
+      }
+      this.reset();
+      window.setTimeout(() => this.absolute = true, 50);
+    },
+    moveEnd() {
+      const confirm = Math.abs(this.left) > (window.innerWidth / 4);
+      if (confirm) {
+        this.snackbar = false;
+      } else {
+        this.reset();
+      }
+    },
+    moveSwipe(event) {
+      if (!this.absolute) {
+        return;
+      }
+      if (!this.startEvent) {
+        this.startEvent = event;
+      } else if (!this.moving) {
+        this.moving = true;
+        this.$nextTick().then(() => {
+          this.left = parseInt(event.touchmoveX - this.startEvent.touchmoveX) - 8;
+          this.moving = false;
+        });
+      }
+    },
   },
 };
 </script>
diff --git a/...p/portlet/src/main/webapp/vue-apps/general-settings/components/registration/HubAccess.vue b/...p/portlet/src/main/webapp/vue-apps/general-settings/components/registration/HubAccess.vue
@@ -344,21 +344,13 @@ export default {
         if (newVal !== oldVal) {
           if (this.accessType === 'OPEN') {
             this.$root.$emit('alert-message-html', `
-                <div>
-                  ${this.$t('generalSettings.access.openChangeInformation1')}
-                </div>
-                <div>
-                  ${this.$t('generalSettings.access.openChangeInformation2')}
-                </div>
+                <div>${this.$t('generalSettings.access.openChangeInformation1')}</div>
+                <div>${this.$t('generalSettings.access.openChangeInformation2')}</div>
             `, 'info');
           } else if (this.accessType === 'RESTRICTED') {
             this.$root.$emit('alert-message-html', `
-                <div>
-                  ${this.$t('generalSettings.access.restrictedChangeInformation1')}
-                </div>
-                <div>
-                  ${this.$t('generalSettings.access.restrictedChangeInformation2')}
-                </div>
+                <div>${this.$t('generalSettings.access.restrictedChangeInformation1')}</div>
+                <div>${this.$t('generalSettings.access.restrictedChangeInformation2')}</div>
             `, 'info');
           }
         }

diff --git a/...pp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagement.vue b/...pp/portlet/src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagement.vue
@@ -1,10 +1,5 @@
 <template>
   <v-app class="white">
-    <v-card-text v-if="error" class="errorMessage">
-      <v-alert type="error">
-        {{ error }}
-      </v-alert>
-    </v-card-text>
     <v-card class="d-flex flex py-2" flat>
       <v-flex class="sm12 md4" flat>
         <groups-management-tree-toolbar />
@@ -20,14 +15,3 @@
     <groups-management-membership-form-drawer />
   </v-app>
 </template>
-
-<script>
-export default {
-  data: () => ({
-    error: null,
-  }),
-  mounted() {
-    this.$root.$on('error', error => this.error = error);
-  },
-};
-</script>
diff --git a/.../src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagementFormDrawer.vue b/.../src/main/webapp/vue-apps/idm-groups-management/components/GroupsManagementFormDrawer.vue
@@ -13,12 +13,6 @@
         class="form-horizontal pt-0 pb-4"
         flat
         @submit="saveGroup">
-        <v-card-text v-if="error" class="errorMessage">
-          <v-alert type="error">
-            {{ error }}
-          </v-alert>
-        </v-card-text>
-
         <v-card-text class="d-flex groupNameLabel flex-grow-1 text-no-wrap text-left font-weight-bold pb-2">
           {{ $t('GroupsManagement.name') }}<template v-if="newGroup">*</template>
         </v-card-text>
@@ -89,7 +83,6 @@
 <script>
 export default {
   data: () => ({
-    error: null,
     fieldError: false,
     drawer: false,
     newGroup: false,
@@ -209,7 +202,6 @@ export default {
         event.stopPropagation();
       }
 
-      this.error = null;
       this.fieldError = false;
 
       if (!this.$refs.groupForm.validate() // Vuetify rules
@@ -251,11 +243,7 @@ export default {
         if (this.fieldError && this.fieldError === 'NAME:ALREADY_EXISTS') {
           this.$refs.nameInput.setCustomValidity(this.$t('GroupsManagement.message.sameNameAlreadyExists'));
         } else {
-          this.error = String(error);
-
-          window.setTimeout(() => {
-            this.error = null;
-          }, 5000);
+          this.$root.$emit('alert-message', error, 'error');
         }
 
         window.setTimeout(() => {
@@ -264,8 +252,6 @@ export default {
             return;
           }
         }, 200);
-      } else {
-        this.error = null;
       }
     },
   },

diff --git a/...webapp/vue-apps/idm-groups-management/components/GroupsManagementMembershipFormDrawer.vue b/...webapp/vue-apps/idm-groups-management/components/GroupsManagementMembershipFormDrawer.vue
@@ -13,12 +13,6 @@
         class="form-horizontal pt-0 pb-4"
         flat
         @submit="saveMembership">
-        <v-card-text v-if="error" class="errorMessage">
-          <v-alert type="error">
-            {{ error }}
-          </v-alert>
-        </v-card-text>
-
         <v-card-text class="d-flex membershipNameLabel flex-grow-1 text-no-wrap text-left font-weight-bold pb-2">
           {{ $t('UsersManagement.membershipType') }} *
         </v-card-text>
@@ -193,7 +187,6 @@
 <script>
 export default {
   data: () => ({
-    error: null,
     fieldError: false,
     drawer: false,
     newMembership: false,
@@ -318,7 +311,6 @@ export default {
         event.stopPropagation();
       }
 
-      this.error = null;
       this.fieldError = false;
       this.resetCustomValidity();
 
@@ -371,10 +363,7 @@ export default {
           this.$refs.membershipTypeInput.setCustomValidity(this.$t('GroupsManagement.message.sameMembershipAlreadyExists'));
         } else {
           this.error = String(error);
-
-          window.setTimeout(() => {
-            this.error = null;
-          }, 5000);
+          this.$root.$emit('alert-message', error, 'error');
         }
 
         window.setTimeout(() => {
@@ -383,8 +372,6 @@ export default {
             return;
           }
         }, 200);
-      } else {
-        this.error = null;
       }
     },
     refreshUserSelection(value) {

diff --git a/...c/main/webapp/vue-apps/idm-groups-management/components/GroupsManagementTreeGroupMenu.vue b/...c/main/webapp/vue-apps/idm-groups-management/components/GroupsManagementTreeGroupMenu.vue
@@ -129,10 +129,7 @@ export default {
         if (errorI18N !== errorI18NKey) {
           error = errorI18N;
         }
-        this.$root.$emit('error', error);
-        window.setTimeout(() => {
-          this.$root.$emit('error', null);
-        }, 5000);
+        this.$root.$emit('alert-message', error, 'error');
       }).finally(() => this.loading = false);
     },
   },