[Entities UI] Added Expand/Collapse and Hide actions to groups.

Also, replaced all the deprecated `::v-deep` SCSS notations with
`:deep`.

platypush/backend/http/webapp/src/components/elements/DropdownItem.vue

@@ -81,7 +81,7 @@ export default {
     align-items: center;
   }
 
-  ::v-deep(.icon-container) {
+  :deep(.icon-container) {
     width: 2em;
     display: inline-flex;
     align-items: center;

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

@@ -43,13 +43,18 @@
               </span>
 
               <span class="section right">
-                <button title="Refresh" @click="refresh(group)">
+                <Dropdown title="Actions" icon-class="fa fa-ellipsis-h">
-                  <i class="fa fa-sync-alt" />
+                  <DropdownItem text="Refresh" icon-class="fa fa-sync-alt" @click="refresh(group)" />
-                </button>
+                  <DropdownItem text="Hide" icon-class="fa fa-eye-slash" @click="hideGroup(group)" />
+                  <DropdownItem text="Collapse" icon-class="fa fa-caret-up"
+                    @click="collapsedGroups[group] = true" v-if="!collapsedGroups[group]" />
+                  <DropdownItem text="Expand" icon-class="fa fa-caret-down"
+                    @click="collapsedGroups[group] = false" v-else />
+                </Dropdown>
               </span>
             </div>
 
-            <div class="body">
+            <div class="body" v-if="!collapsedGroups[group]">
               <div class="entity-frame"
                  v-for="entity in Object.values(group.entities).sort((a, b) => a.name.localeCompare(b.name))"
                  :key="entity.id">
@@ -76,6 +81,8 @@
 
 <script>
 import Utils from "@/Utils"
+import Dropdown from "@/components/elements/Dropdown";
+import DropdownItem from "@/components/elements/DropdownItem";
 import Loading from "@/components/Loading";
 import Icon from "@/components/elements/Icon";
 import NoItems from "@/components/elements/NoItems";
@@ -91,6 +98,8 @@ export default {
   name: "Entities",
   mixins: [Utils],
   components: {
+    Dropdown,
+    DropdownItem,
     Entity,
     EntityModal,
     Icon,
@@ -129,6 +138,7 @@ export default {
         selectedEntities: {},
         selectedGroups: {},
       },
+      collapsedGroups: {},
     }
   },
 
@@ -217,6 +227,14 @@ export default {
       )
     },
 
+    hideGroup(group) {
+      Object.keys(group.entities).forEach((id) => {
+        if (this.selector.selectedEntities[id])
+          delete this.selector.selectedEntities[id]
+      })
+      delete this.selector.selectedGroups[group.name]
+    },
+
     async refresh(group) {
       const entities = (group ? group.entities : this.entities) || {}
       const args = {}
@@ -625,5 +643,20 @@ export default {
       }
     }
   }
+
+  :deep(.dropdown-container) {
+    .dropdown {
+      min-width: 10em;
+      margin-left: 0;
+
+      .item {
+        box-shadow: none;
+      }
+    }
+
+    button {
+      background: none;
+    }
+  }
 }
 </style>

platypush/backend/http/webapp/src/components/panels/Media/Header.vue

@@ -163,7 +163,7 @@ export default {
     }
   }
 
-  ::v-deep(button) {
+  :deep(button) {
     background: none;
     padding: 0 .25em;
     border: 0;

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

@@ -398,11 +398,11 @@ export default {
   }
 }
 
-::v-deep(.loading) {
+:deep(.loading) {
   z-index: 10;
 }
 
-::v-deep(.media-info-container) {
+:deep(.media-info-container) {
   .modal-container {
     .content {
       max-width: 75%;
@@ -415,7 +415,7 @@ export default {
   }
 }
 
-::v-deep(.subtitles-container) {
+:deep(.subtitles-container) {
   .body {
     padding: 0 !important;
 
@@ -425,7 +425,7 @@ export default {
   }
 }
 
-::v-deep(.play-url-container) {
+:deep(.play-url-container) {
   .body {
     padding: 1em !important;
   }

platypush/backend/http/webapp/src/components/panels/Media/Players.vue

@@ -118,7 +118,7 @@ export default {
 }
 
 .players {
-  ::v-deep(.dropdown) {
+  :deep(.dropdown) {
     direction: ltr;
     .item {
       padding: .5em;
@@ -129,13 +129,13 @@ export default {
     }
   }
 
-  ::v-deep(.refresh) {
+  :deep(.refresh) {
     font-weight: bold;
     font-size: .8em;
     opacity: .7;
   }
 
-  ::v-deep(.player.selected) {
+  :deep(.player.selected) {
     color: $selected-fg;
   }
 }

platypush/backend/http/webapp/src/components/panels/Media/Results.vue

@@ -92,7 +92,7 @@ export default {
         margin-right: .5em;
       }
 
-      ::v-deep(.dropdown-container) {
+      :deep(.dropdown-container) {
         .item {
           box-shadow: none;
         }

platypush/backend/http/webapp/src/components/panels/Music/Header.vue

@@ -20,7 +20,7 @@ export default {
   padding: .5em;
   box-shadow: $border-shadow-bottom;
 
-  ::v-deep(.dropdown) {
+  :deep(.dropdown) {
     .item.active {
       color: $default-hover-fg;
     }

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

@@ -347,7 +347,7 @@ main {
     overflow: auto;
   }
 
-  ::v-deep(button) {
+  :deep(button) {
     background: none;
     padding: .5em .75em;
     border: 0;
@@ -358,7 +358,7 @@ main {
     }
   }
 
-  ::v-deep(a) {
+  :deep(a) {
     color: $default-fg;
     opacity: 0.65;
 
@@ -370,13 +370,13 @@ main {
 }
 
 .playlists-modal-container {
-  ::v-deep(.body) {
+  :deep(.body) {
     display: flex;
     flex-direction: column;
     padding: 0 !important;
   }
 
-  ::v-deep(.filter) {
+  :deep(.filter) {
     padding: .33em;
     background-color: $default-bg-6;
     border-bottom: $default-border-2;
@@ -386,7 +386,7 @@ main {
     }
   }
 
-  ::v-deep(.playlists) {
+  :deep(.playlists) {
     overflow: auto;
     padding: 1.5em;
 
@@ -406,7 +406,7 @@ main {
 }
 
 .track-info-container {
-  ::v-deep(.body) {
+  :deep(.body) {
     height: 15em;
     overflow: auto;
 

platypush/backend/http/webapp/src/components/panels/Music/Library.vue

@@ -205,7 +205,7 @@ export default {
     }
   }
 
-  ::v-deep(.header) {
+  :deep(.header) {
     display: flex;
     width: 100%;
     align-items: center;

platypush/backend/http/webapp/src/components/panels/Music/Playlist.vue

@@ -365,7 +365,7 @@ export default {
   }
 }
 
-::v-deep(.track-info-content) {
+:deep(.track-info-content) {
   .attr {
     opacity: 0.75;
   }

platypush/backend/http/webapp/src/components/panels/Music/Playlists.vue

@@ -357,7 +357,7 @@ export default {
     width: 100%;
   }
 
-  ::v-deep(.header) {
+  :deep(.header) {
     .back-btn {
       padding-left: .25em;
     }

platypush/backend/http/webapp/src/components/panels/Music/Search.vue

@@ -242,13 +242,13 @@ export default {
       width: 100%;
     }
 
-    ::v-deep(.form-footer) {
+    :deep(.form-footer) {
       height: 3em;
       padding-right: 0;
       border: 0;
     }
 
-    ::v-deep(button) {
+    :deep(button) {
       border: 0;
 
       &[type=submit] {
@@ -268,7 +268,7 @@ export default {
     overflow: auto;
   }
 
-  ::v-deep(.header) {
+  :deep(.header) {
     display: flex;
     width: 100%;
     align-items: center;

platypush/backend/http/webapp/src/components/panels/Music/track.scss

@@ -69,7 +69,7 @@
   }
 
   .actions {
-    ::v-deep(button) {
+    :deep(button) {
       opacity: .7;
     }
   }

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

@@ -400,7 +400,7 @@ export default {
   background: $background-color;
 }
 
-::v-deep(.info) {
+:deep(.info) {
   .modal {
     .content {
       width: 90%;

platypush/backend/http/webapp/src/components/panels/Torrent/Header.vue

@@ -50,7 +50,7 @@ export default {
     }
   }
 
-  ::v-deep(button) {
+  :deep(button) {
     background: none;
     padding: 0 .25em;
     border: 0;

platypush/backend/http/webapp/src/components/panels/Torrent/View.vue

@@ -246,7 +246,7 @@ export default {
   }
 }
 
-::v-deep(.modal-body) {
+:deep(.modal-body) {
   .row {
     display: flex;
     border-bottom: $default-border;
@@ -276,7 +276,7 @@ export default {
   }
 }
 
-::v-deep(.modal-body) {
+:deep(.modal-body) {
   .dropdown-container {
     .row {
       box-shadow: none;

platypush/backend/http/webapp/src/style/items.scss

@@ -55,7 +55,7 @@ $header-height: 3.5em;
   }
 
   .actions {
-    ::v-deep(button) {
+    :deep(button) {
       opacity: .65;
     }
   }
@@ -65,7 +65,7 @@ $header-height: 3.5em;
     margin-right: .75em;
   }
 
-  ::v-deep(.dropdown-container) {
+  :deep(.dropdown-container) {
     .item {
       box-shadow: none;
     }