change position of clear notification button

Author: utchoang

ui/public/locales/en.json

@@ -570,7 +570,7 @@
 "label.cks.cluster.size": "Cluster size (Worker nodes)",
 "label.cleanup": "Clean up",
 "label.clear": "Clear",
-"label.clear.all.notify": "Clear all notification",
+"label.clear.notification": "Clear notification",
 "label.clear.list": "Clear list",
 "label.close": "Close",
 "label.cloud.console": "Cloud Management Console",

ui/src/components/header/UserMenu.vue

@@ -18,10 +18,6 @@
 <template>
   <div class="user-menu">
 
-    <a-tooltip v-if="countNotify > 0" :title="$t('label.clear.all.notify')" class="action button-clear-notification" @click="clearAllNotify">
-      <a-icon type="bell" class="bell-icon" />
-      <a-icon type="stop" class="clear-icon" />
-    </a-tooltip>
     <translation-menu class="action"/>
     <header-notice class="action"/>
     <label class="user-menu-server-info action" v-if="$config.multipleServer">
@@ -183,19 +179,4 @@ export default {
     }
   }
 }
-
-.button-clear-notification {
-  position: relative;
-
-  .bell-icon {
-    position: absolute;
-    left: 18px;
-    font-size: 12px;
-  }
-
-  .clear-icon {
-    font-size: 20px;
-    padding: 4px;
-  }
-}
 </style>

ui/src/components/page/GlobalLayout.vue

@@ -91,6 +91,13 @@
         />
       </a-affix>
 
+      <a-button
+        v-if="showClear"
+        type="default"
+        size="small"
+        class="button-clear-notification"
+        @click="onClearNotification">{{ $t('label.clear.notification') }}</a-button>
+
       <!-- layout content -->
       <a-layout-content class="layout-content" :class="{'is-header-fixed': fixedHeader}">
         <slot></slot>
@@ -128,7 +135,8 @@ export default {
     return {
       collapsed: false,
       menus: [],
-      showSetting: false
+      showSetting: false,
+      showClear: false
     }
   },
   computed: {
@@ -161,6 +169,12 @@ export default {
       } else {
         document.body.classList.remove('dark-mode')
       }
+    },
+    '$store.getters.countNotify' (countNotify) {
+      this.showClear = false
+      if (countNotify && countNotify > 0) {
+        this.showClear = true
+      }
     }
   },
   provide: function () {
@@ -212,6 +226,10 @@ export default {
     },
     toggleSetting (showSetting) {
       this.showSetting = showSetting
+    },
+    onClearNotification () {
+      this.$notification.destroy()
+      this.$store.commit('SET_COUNT_NOTIFY', 0)
     }
   }
 }

ui/src/layouts/UserLayout.vue

@@ -17,6 +17,12 @@
 
 <template>
   <div id="userLayout" :class="['user-layout', device]">
+    <a-button
+      v-if="showClear"
+      type="default"
+      size="small"
+      class="button-clear-notification"
+      @click="onClearNotification">{{ $t('label.clear.notification') }}</a-button>
     <div class="user-layout-container">
       <div class="user-layout-header">
         <img
@@ -45,7 +51,9 @@ export default {
   components: { RouteView },
   mixins: [mixinDevice],
   data () {
-    return {}
+    return {
+      showClear: false
+    }
   },
   watch: {
     '$store.getters.darkMode' (darkMode) {
@@ -54,6 +62,12 @@ export default {
       } else {
         document.body.classList.remove('dark-mode')
       }
+    },
+    '$store.getters.countNotify' (countNotify) {
+      this.showClear = false
+      if (countNotify && countNotify > 0) {
+        this.showClear = true
+      }
     }
   },
   mounted () {
@@ -66,6 +80,12 @@ export default {
   beforeDestroy () {
     document.body.classList.remove('userLayout')
     document.body.classList.remove('dark-mode')
+  },
+  methods: {
+    onClearNotification () {
+      this.$notification.destroy()
+      this.$store.commit('SET_COUNT_NOTIFY', 0)
+    }
   }
 }
 </script>

ui/src/style/dark-mode.less

@@ -901,4 +901,8 @@
   .ant-empty-normal {
     color: @dark-text-color-3;
   }
+
+  .button-clear-notification {
+    background-color: @dark-secondary-bgColor;
+  }
 }

ui/src/style/vars.less

@@ -344,3 +344,10 @@ a {
     border-color: @primary-color;
   }
 }
+
+.button-clear-notification {
+  position: fixed;
+  right: 287px;
+  top: 35px;
+  z-index: 1001;
+}