Merged all the items in the entities panel's header in the Selector component.

platypush/backend/http/webapp/src/components/panels/Entities/Index.vue

@@ -3,17 +3,13 @@
     <Loading v-if="loading" />
 
     <header>
-      <div class="col-s-10 col-m-11 left">
+      <Selector
-        <Selector :entity-groups="entityGroups" :value="selector" @input="selector = $event" />
+        :entity-groups="entityGroups"
-      </div>
+        :value="selector"
-
+        @input="selector = $event"
-      <div class="col-s-2 col-m-1 actions-container right">
+        @refresh="refresh"
-        <Dropdown title="Actions" icon-class="fas fa-ellipsis">
+        @show-variable-modal="variableModalVisible = true"
-          <DropdownItem  icon-class="fa fa-sync-alt" text="Refresh" @click="refresh" />
+      />
-          <DropdownItem  icon-class="fa fa-square-root-variable"
-            text="Set Variable" @click="variableModalVisible = true" />
-        </Dropdown>
-      </div>
     </header>
 
     <div class="groups-canvas">
@@ -79,8 +75,6 @@
 </template>
 
 <script>
-import Dropdown from "@/components/elements/Dropdown";
-import DropdownItem from "@/components/elements/DropdownItem";
 import Utils from "@/Utils"
 import Loading from "@/components/Loading";
 import Icon from "@/components/elements/Icon";
@@ -97,8 +91,6 @@ export default {
   name: "Entities",
   mixins: [Utils],
   components: {
-    Dropdown,
-    DropdownItem,
     Entity,
     EntityModal,
     Icon,
@@ -449,42 +441,6 @@ export default {
         padding: 0.5em 0;
       }
     }
-
-    :deep(.right) {
-      .dropdown-container {
-        .dropdown {
-          min-width: 10em;
-
-          .item {
-            box-shadow: none;
-
-            .text {
-              text-align: left;
-              margin-left: 0.75em;
-            }
-          }
-        }
-
-        button {
-          margin-right: 0;
-          text-align: center;
-          background: transparent;
-          border: 0;
-
-          @include until($tablet) {
-            padding-right: 0;
-          }
-
-          &:hover {
-            color: $default-hover-fg;
-          }
-
-          i {
-            margin-left: 0.5em;
-          }
-        }
-      }
-    }
   }
 
   .groups-canvas {

platypush/backend/http/webapp/src/components/panels/Entities/Selector.vue

@@ -1,24 +1,34 @@
 <template>
   <div class="entities-selectors-container">
-    <div class="selector">
+    <div class="selector search-container col-11"
-      <Dropdown title="Group by" icon-class="fas fa-object-ungroup" ref="groupingSelector">
+      v-if="Object.keys(entityGroups.id || {}).length">
-        <DropdownItem v-for="g in visibleGroupings" :key="g" :text="prettifyGroupingName(g)"
+      <input ref="search" type="text" class="search-bar"
-          :item-class="{selected: value?.grouping === g}"
+        title="Filter by name, plugin or ID" placeholder="🔎"
-          @click="onGroupingChanged(g)" />
+        v-model="searchTerm">
-      </Dropdown>
     </div>
 
-    <div class="selector" :class="{active: isGroupFilterActive}" v-if="value?.grouping">
+    <div class="selector actions-container col-1 pull-right">
-      <Dropdown title="Filter by" icon-class="fas fa-filter" ref="groupSelector"
+      <Dropdown title="Actions" icon-class="fas fa-ellipsis">
-          keep-open-on-item-click>
+        <DropdownItem  icon-class="fas fa-sync-alt" text="Refresh"
-        <DropdownItem v-for="g in sortedGroups" :key="g" :text="g"
+          @click="$emit('refresh')" />
-          v-bind="iconForGroup(g)" :item-class="{selected: !!selectedGroups[g]}"
+        <DropdownItem  icon-class="fas fa-square-root-variable"
-          @click.stop="toggleGroup(g)" />
+          text="Set Variable" @click="$emit('show-variable-modal')" />
-      </Dropdown>
-    </div>
 
-    <div class="selector" v-if="Object.keys(entityGroups.id || {}).length">
+        <Dropdown title="Group by" text="Group by"
-      <input ref="search" type="text" class="search-bar" placeholder="🔎" v-model="searchTerm">
+          icon-class="fas fa-object-ungroup" ref="groupingSelector">
+          <DropdownItem v-for="g in visibleGroupings" :key="g" :text="prettifyGroupingName(g)"
+            :item-class="{selected: value?.grouping === g}"
+            @click="onGroupingChanged(g)" />
+        </Dropdown>
+
+        <Dropdown title="Filter groups" text="Filter groups"
+            :icon-class="{fas: true, 'fa-filter': true, active: hasActiveFilter}"
+            ref="groupSelector" keep-open-on-item-click>
+          <DropdownItem v-for="g in sortedGroups" :key="g" :text="g"
+            v-bind="iconForGroup(g)" :item-class="{selected: !!selectedGroups[g]}"
+            @click.stop="toggleGroup(g)" />
+        </Dropdown>
+      </Dropdown>
     </div>
   </div>
 </template>
@@ -33,7 +43,7 @@ import { bus } from "@/bus";
 
 export default {
   name: "Selector",
-  emits: ['input'],
+  emits: ['input', 'refresh', 'show-variable-modal'],
   mixins: [Utils],
   components: {Dropdown, DropdownItem},
   props: {
@@ -62,6 +72,10 @@ export default {
       )
     },
 
+    hasActiveFilter() {
+      return Object.values(this.selectedGroups).filter((val) => val === false).length > 0
+    },
+
     sortedGroups() {
       return Object.keys(this.entityGroups[this.value?.grouping] || {}).sort()
     },
@@ -189,14 +203,6 @@ export default {
   .selector {
     height: 100%;
     display: inline-flex;
-
-    &.active {
-      :deep(.dropdown-container) {
-        button {
-          color: $default-hover-fg;
-        }
-      }
-    }
   }
 
   @media (max-width: 330px) {
@@ -205,10 +211,53 @@ export default {
     }
   }
 
+  .search-bar {
+    margin: 0.25em 0;
+  }
+
+  @include until(#{$tablet - 1 }) {
+    .search-bar {
+      width: 100%;
+      margin-right: 2em;
+    }
+  }
+
+  @include from($tablet) {
+    .search-bar {
+      min-width: 400px;
+    }
+  }
+
   :deep(.dropdown-container) {
     height: 100%;
     display: flex;
 
+    .dropdown {
+      min-width: 10em;
+
+      .text {
+        text-align: left;
+        padding-left: 0.5em;
+      }
+    }
+
+    .dropdown-container {
+      button {
+        width: 100%;
+        background: none;
+        text-align: left;
+        letter-spacing: 0.01em;
+
+        .text {
+          padding-left: 0.25em;
+        }
+
+        .icon.active {
+          color: $selected-fg;
+        }
+      }
+    }
+
     button {
       height: 100%;
       background: $default-bg-2;
@@ -221,7 +270,7 @@ export default {
     }
 
     .item {
-      padding: 0.5em 4em 0.5em 0.5em;
+      padding: 0.75em 0.5em;
       border: 0;
       box-shadow: none;