diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue index 99cb7bcdc..e5b421bf3 100644 --- a/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue +++ b/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue @@ -4,16 +4,19 @@ <div class="row item entity-container" :class="{blink: justUpdated, 'with-children': hasChildren, collapsed: isCollapsed}"> <div class="adjuster" :class="{'col-12': !hasChildren, 'col-11': hasChildren}"> - <component :is="component" + <component + :is="component" :value="value" :loading="loading" + ref="instance" :error="error || value?.reachable == false" + @click="onClick" @input="$emit('input', $event)" @loading="$emit('loading', $event)" /> </div> - <div class="col-1 collapse-toggler" @click.stop="collapsed = !collapsed" v-if="hasChildren"> + <div class="col-1 collapse-toggler" @click.stop="toggleCollapsed" v-if="hasChildren"> <i class="fas" :class="{'fa-chevron-down': isCollapsed, 'fa-chevron-up': !isCollapsed}" /> </div> @@ -63,6 +66,10 @@ export default { return this.collapsed }, + + instance() { + return this.$refs.instance + }, }, methods: { @@ -76,6 +83,20 @@ export default { return this.objectsEqual(a, b) }, + + onClick(event) { + if (event.target.classList.contains('label')) { + event.stopPropagation() + this.toggleCollapsed() + } + }, + + toggleCollapsed() { + this.collapsed = !this.collapsed + // Propagate the collapsed state to the wrapped component if applicable + if ('collapsed' in this.instance) + this.instance.collapsed = !this.instance.collapsed + } }, mounted() { @@ -152,6 +173,22 @@ export default { } } +:deep(.entity-container) { + .head { + .name { + display: inline-flex; + + &:hover { + color: $hover-fg; + } + } + + .icon:hover { + color: $hover-fg; + } + } +} + .blink { animation: blink-animation 1s steps(20, start); } diff --git a/platypush/backend/http/webapp/src/style/themes/light.scss b/platypush/backend/http/webapp/src/style/themes/light.scss index 18e4faf1a..b96a19bbc 100644 --- a/platypush/backend/http/webapp/src/style/themes/light.scss +++ b/platypush/backend/http/webapp/src/style/themes/light.scss @@ -79,6 +79,7 @@ $active-glow-bg-2: #9cdfb0 !default; /// Hover $default-hover-fg: #35b870 !default; $default-hover-fg-2: #38cf80 !default; +$hover-fg: $default-hover-fg !default; $hover-bg: linear-gradient(90deg, rgba(190,246,218,1) 0%, rgba(229,251,240,1) 100%) !default; $active-bg: #8fefb7 !default;