From e9371ac5d0785cdeb6b4e79dbc9b1f158d14cf9f Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 15 Jan 2023 15:03:53 +0100
Subject: [PATCH] Improved entity collapse logic

- Toggle collapsed state also if clicked on the gap between the entity
  name and the right edge, instead of opening the entity modal. The
  entity configuration modal should open only when clicking on the
  entity name or icon (and these should be highlighted on hover as links
  as well).

- The collapsed state update should be propagated to the wrapped
  component as well, if applicable.
---
 .../src/components/panels/Entities/Entity.vue | 41 ++++++++++++++++++-
 .../http/webapp/src/style/themes/light.scss   |  1 +
 2 files changed, 40 insertions(+), 2 deletions(-)

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;