[4.0] Change the select all toggle to a checkbox in media manager (#34597)

* Change the select all toggle to a checkbox in media manager

* More merge conflicts fixed

* Correct border

* Listen on click

* CS

* Only stop propagation

* code style

Author: laoneo

administrator/components/com_media/resources/scripts/components/toolbar/toolbar.vue

@@ -9,17 +9,13 @@
       class="media-loader"
     />
     <div class="media-view-icons">
-      <a
-        href="#"
+      <input
+        ref="mediaToolbarSelectAll"
+        type="checkbox"
         class="media-toolbar-icon media-toolbar-select-all"
         :aria-label="translate('COM_MEDIA_SELECT_ALL')"
-        @click.stop.prevent="toggleSelectAll()"
+        @click.stop="toggleSelectAll"
       >
-        <span
-          :class="toggleSelectAllBtnIcon"
-          aria-hidden="true"
-        />
-      </a>
     </div>
     <media-breadcrumb />
     <div
@@ -102,9 +98,6 @@ export default {
     toggleListViewBtnIcon() {
       return (this.isGridView) ? 'icon-list' : 'icon-th';
     },
-    toggleSelectAllBtnIcon() {
-      return (this.allItemsSelected) ? 'icon-check-square' : 'icon-square';
-    },
     isLoading() {
       return this.$store.state.isLoading;
     },
@@ -119,6 +112,14 @@ export default {
       return (this.$store.getters.getSelectedDirectoryContents.length === this.$store.state.selectedItems.length);
     },
   },
+  watch: {
+    // eslint-disable-next-line
+    '$store.state.selectedItems'() {
+      if (!this.allItemsSelected) {
+        this.$refs.mediaToolbarSelectAll.checked = false;
+      }
+    },
+  },
   methods: {
     toggleInfoBar() {
       if (this.$store.state.showInfoBar) {

build/media_source/com_media/scss/components/_media-toolbar.scss

@@ -5,27 +5,31 @@
   padding: 0;
   background-color: $toolbar-bg;
   border-bottom: 1px solid $border-color;
+  border-left: 1px solid $border-color;
   border-radius: $border-radius $border-radius 0 0;
   box-shadow: 0 -1px 0 0  $border-color;
   input {
     padding: .3rem .75rem;
   }
-}
-
-.media-toolbar-icon {
-  display: inline-block;
-  width: $toolbar-icon-width;
-  font-size: 1.3rem;
-  line-height: $toolbar-height;
-  color: var(--atum-bg-dark-60);
-  text-align: center;
-  background-color: transparent;
-  border: 0;
-  border-left: 1px solid $border-color;
-  box-shadow: 1px 0 #fefefe inset;
-  &:hover {
-    background-color: $toolbar-icon-bg-hover;
-    box-shadow: none;
+  &-icon {
+    display: inline-block;
+    width: $toolbar-icon-width;
+    font-size: 1.3rem;
+    line-height: $toolbar-height;
+    color: var(--atum-bg-dark-60);
+    text-align: center;
+    background-color: transparent;
+    border: 0;
+    border-left: 1px solid $border-color;
+    box-shadow: 1px 0 #fefefe inset;
+    &:hover {
+      background-color: $toolbar-icon-bg-hover;
+      box-shadow: none;
+    }
+  }
+  &-select-all {
+    width: 1rem;
+    margin: 1rem;
   }
 }