diff --git a/platypush/backend/http/webapp/src/Events.vue b/platypush/backend/http/webapp/src/Events.vue
index 9162b0c4d..19226c11d 100644
--- a/platypush/backend/http/webapp/src/Events.vue
+++ b/platypush/backend/http/webapp/src/Events.vue
@@ -181,6 +181,11 @@ export default {
created() {
bus.on('subscribe', this.subscribe)
bus.on('unsubscribe', this.unsubscribe)
+
+ this.$watch('opened', (open) => {
+ bus.emit(open ? 'connect' : 'disconnect')
+ })
+
this.init()
},
}
diff --git a/platypush/backend/http/webapp/src/components/Nav.vue b/platypush/backend/http/webapp/src/components/Nav.vue
index 9d32ab51e..ebdee6913 100644
--- a/platypush/backend/http/webapp/src/components/Nav.vue
+++ b/platypush/backend/http/webapp/src/components/Nav.vue
@@ -3,6 +3,9 @@
+
@@ -76,6 +79,7 @@
import icons from '@/assets/icons.json'
import Utils from "@/Utils";
import configSections from '@/components/panels/Settings/sections.json';
+import { bus } from "@/bus";
export default {
name: "Nav",
@@ -137,11 +141,18 @@ export default {
return name
},
+
+ setConnected(connected) {
+ return () => {
+ this.connected = connected
+ }
+ },
},
data() {
return {
collapsed: true,
+ connected: false,
icons: icons,
host: null,
configSections: configSections,
@@ -150,6 +161,8 @@ export default {
mounted() {
this.collapsed = this.collapsedDefault
+ bus.on('connect', this.setConnected(true))
+ bus.on('disconnect', this.setConnected(false))
},
}
@@ -239,10 +252,26 @@ nav {
background: $nav-toggler-bg;
display: flex;
font-size: 1.5em;
+ position: relative;
cursor: pointer;
padding: 0.4em;
align-items: center;
box-shadow: $nav-toggler-shadow;
+
+ .icon.status {
+ position: absolute;
+ top: calc($toggler-height / 2 + 0.3em);
+ right: 0.5em;
+ font-size: 0.5em;
+
+ &.ok {
+ color: $ok-fg;
+ }
+
+ &.error {
+ color: $error-fg;
+ }
+ }
}
.hostname {
@@ -328,6 +357,11 @@ nav {
background: $nav-toggler-collapsed-mobile-bg;
color: $nav-toggler-collapsed-mobile-fg;
}
+
+ .icon.status {
+ top: 0.75em;
+ left: 2em;
+ }
}
.footer {
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
index 5631191f7..d5faabd21 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
@@ -39,7 +39,7 @@
-
+
diff --git a/platypush/backend/http/webapp/src/style/themes/light.scss b/platypush/backend/http/webapp/src/style/themes/light.scss
index 7e37f6d0f..4254e270a 100644
--- a/platypush/backend/http/webapp/src/style/themes/light.scss
+++ b/platypush/backend/http/webapp/src/style/themes/light.scss
@@ -6,6 +6,7 @@ $default-bg-4: #f1f3f2 !default;
$default-bg-5: #edf0ee !default;
$default-bg-6: #e4eae8 !default;
$default-bg-7: #e4e4e4 !default;
+$ok-fg: #17ad17 !default;
$error-fg: #ad1717 !default;
$default-fg: black !default;