Merge pull request #4326 from wallabag/mass-actions

Added mass actions for Material design in list view

2 files changed, 49 insertions, 0 deletions

diff --git a/app/Resources/static/themes/material/css/entries.scss b/app/Resources/static/themes/material/css/entries.scss
index 5c55caa8..e22178a5 100644
--- a/app/Resources/static/themes/material/css/entries.scss
+++ b/app/Resources/static/themes/material/css/entries.scss
@@ -2,6 +2,42 @@
  * Entries
  * ========================================================================== */
 
+.mass-buttons {
+  margin: 5px;
+
+  #selectAll {
+    position: relative;
+    opacity: initial;
+    left: 0;
+  }
+
+  span {
+    padding: 3px;
+  }
+
+  button {
+    i {
+      font-size: 12px;
+    }
+
+    height: 24px;
+    line-height: 24px;
+    padding: 0 0.5rem;
+  }
+}
+
+.card-stacked {
+  input[type=checkbox] {
+    position: relative;
+    opacity: initial;
+    left: 0;
+  }
+
+  .entry-checkbox {
+    margin-right: 10px;
+  }
+}
+
 .collection {
   margin: 15px 15px 0;
 
diff --git a/app/Resources/static/themes/material/index.js b/app/Resources/static/themes/material/index.js
index da055e80..1c28401d 100755
--- a/app/Resources/static/themes/material/index.js
+++ b/app/Resources/static/themes/material/index.js
@@ -105,4 +105,17 @@ $(document).ready(() => {
     $('.nav-panels').css('background', 'transparent');
     return false;
   });
+
+  const mainCheckboxes = document.querySelectorAll('[data-js="checkboxes-toggle"]');
+  if (mainCheckboxes.length) {
+    [...mainCheckboxes].forEach((el) => {
+      el.addEventListener('click', () => {
+        const checkboxes = document.querySelectorAll(el.dataset.toggle);
+        [...checkboxes].forEach((checkbox) => {
+          const checkboxClone = checkbox;
+          checkboxClone.checked = el.checked;
+        });
+      });
+    });
+  }
 });