feat: refresh notification

build/webpack.base.js

@@ -17,7 +17,7 @@ const postcssLoader = {
     plugins: [
       prefixer({
         prefix: '_',
-        ignore: [/luna-object-viewer/]
+        ignore: [/luna-object-viewer/, /luna-notification/]
       }),
       autoprefixer,
       clean()

package.json

@@ -61,6 +61,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^4.0.2",
     "licia": "^1.19.0",
+    "luna-notification": "^0.1.2",
     "luna-object-viewer": "^0.1.1",
     "node-sass": "^4.13.1",
     "postcss-clean": "^1.1.0",

src/DevTools/DevTools.js

@@ -15,6 +15,7 @@ import {
   isDarkMode
 } from '../lib/util'
 import evalCss from '../lib/evalCss'
+import LunaNotification from 'luna-notification'
 
 export default class DevTools extends Emitter {
   constructor($container) {
@@ -33,6 +34,7 @@ export default class DevTools extends Emitter {
 
     this._appendTpl()
     this._initNavBar()
+    this._initNotification()
     this._bindEvent()
   }
   show() {
@@ -176,7 +178,9 @@ export default class DevTools extends Emitter {
       })
       .separator()
   }
-
+  notify(content, options) {
+    this._notification.notify(content, options)
+  }
   destroy() {
     evalCss.remove(this._style)
     this.removeAll()
@@ -206,6 +210,14 @@ export default class DevTools extends Emitter {
     this._navBar = new NavBar(this._$el.find('.eruda-nav-bar-container'))
     this._navBar.on('showTool', name => this.showTool(name))
   }
+  _initNotification() {
+    this._notification = new LunaNotification(this._$el.get(0), {
+      position: {
+        x: 'center',
+        y: 'top'
+      }
+    })
+  }
   _bindEvent() {
     const $navBar = this._$el.find('.eruda-nav-bar')
     const startListener = e => {

src/Elements/Elements.js

@@ -216,7 +216,10 @@ export default class Elements extends Tool {
     const $bottomBar = this._$el.find('.eruda-bottom-bar')
 
     $bottomBar
-      .on('click', '.eruda-refresh', () => this._render())
+      .on('click', '.eruda-refresh', () => {
+        this._render()
+        container.notify('Refreshed')
+      })
       .on('click', '.eruda-highlight', () => this._toggleHighlight())
       .on('click', '.eruda-select', () => this._toggleSelect())
       .on('click', '.eruda-reset', () => this.set(this._htmlEl))

src/Resources/Resources.js

@@ -220,25 +220,34 @@ export default class Resources extends Tool {
     const container = this._container
 
     $el
-      .on('click', '.eruda-refresh-local-storage', () =>
+      .on('click', '.eruda-refresh-local-storage', () => {
+        container.notify('Refreshed')
         this.refreshLocalStorage()._render()
-      )
+      })
-      .on('click', '.eruda-refresh-session-storage', () =>
+      .on('click', '.eruda-refresh-session-storage', () => {
+        container.notify('Refreshed')
         this.refreshSessionStorage()._render()
-      )
+      })
-      .on('click', '.eruda-refresh-cookie', () =>
+      .on('click', '.eruda-refresh-cookie', () => {
+        container.notify('Refreshed')
         this.refreshCookie()._render()
-      )
+      })
-      .on('click', '.eruda-refresh-script', () =>
+      .on('click', '.eruda-refresh-script', () => {
+        container.notify('Refreshed')
         this.refreshScript()._render()
-      )
+      })
-      .on('click', '.eruda-refresh-stylesheet', () =>
+      .on('click', '.eruda-refresh-stylesheet', () => {
+        container.notify('Refreshed')
         this.refreshStylesheet()._render()
-      )
+      })
-      .on('click', '.eruda-refresh-iframe', () =>
+      .on('click', '.eruda-refresh-iframe', () => {
+        container.notify('Refreshed')
         this.refreshIframe()._render()
-      )
+      })
-      .on('click', '.eruda-refresh-image', () => this.refreshImage()._render())
+      .on('click', '.eruda-refresh-image', () => {
+        container.notify('Refreshed')
+        this.refreshImage()._render()
+      })
       .on('click', '.eruda-search', function() {
         const $this = $(this)
         const type = $this.data('type')

src/eruda.js

@@ -199,6 +199,7 @@ export default {
 
     evalCss(
       require('luna-object-viewer/luna-object-viewer.css') +
+      require('luna-notification/luna-notification.css') + 
       require('./style/style.scss') +
         require('./style/reset.scss') +
         require('./style/icon.css')

src/style/luna.scss

@@ -35,3 +35,26 @@
   border-top-color: transparent;
   border-left-color: var(--foreground);
 }
+
+.luna-notification {
+  pointer-events: none !important;
+  padding: $padding;
+  z-index: 1000;
+}
+
+.luna-notification-item {
+  z-index: 500;
+  color: var(--foreground);
+  background: var(--background);
+  box-shadow: none;
+  padding: 5px 10px;
+  border: 1px solid var(--border);
+}
+
+.luna-notification-upper {
+  margin-bottom: 10px;
+}
+
+.luna-notification-lower {
+  margin-top: 10px;
+}

src/style/reset.scss

@@ -1,7 +1,4 @@
 .container {
-  html,
-  body,
-  div,
   span,
   applet,
   object,