Mass action tag layout updated

app/Resources/static/themes/material/css/entries.scss

@@ -13,22 +13,23 @@
   }
 }
 
-.mass-buttons {
+.mass-action {
   margin: 10px 5px 10px 20px;
+}
 
-  span {
+.mass-action-group {
-    padding: 3px;
+  display: flex;
-  }
+  padding: 3px;
+  gap: 10px;
+}
 
-  button {
+.mass-action-button {
-    i {
+  height: 24px;
-      font-size: 15px;
+  line-height: 24px;
-    }
+  padding: 0 0.5rem;
 
-    height: 24px;
+  i {
-    line-height: 24px;
+    font-size: 1rem;
-    padding: 0 0.5rem;
-    margin-right: 0.75rem;
   }
 }
 
@@ -43,7 +44,7 @@
 }
 
 .entries .entry-checkbox-input,
-.mass-buttons .entry-checkbox-input {
+.mass-action .entry-checkbox-input {
   position: relative;
   left: 0;
   width: 20px;
@@ -53,12 +54,23 @@
   opacity: initial;
 }
 
-.mass-action-inputs-displayed:not(:checked) ~ .mass-buttons,
+.toggle-checkbox:not(:checked) + .mass-action,
-.mass-action-inputs-displayed:not(:checked) ~ .entries .entry-checkbox,
+.toggle-checkbox:not(:checked) + .mass-action-tags,
-.mass-action-inputs-displayed:checked ~ .entries .card-preview {
+.toggle-checkbox:not(:checked) ~ .entries .entry-checkbox,
+.toggle-checkbox:checked ~ .entries .card-preview {
   display: none;
 }
 
+.mass-action-tags {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  .mass-action-tags-input {
+    margin: 0;
+  }
+}
+
 .entries {
   list-style: none;
 }
@@ -158,3 +170,11 @@ footer {
     margin-bottom: 10px;
   }
 }
+
+@media screen and (min-width: 993px) {
+  .mass-action {
+    display: flex;
+    align-items: center;
+    gap: 30px;
+  }
+}

src/Wallabag/CoreBundle/Resources/views/Entry/entries.html.twig

@@ -46,22 +46,21 @@
     </div>
 
     {% if entries.count > 0 %}
-        <input id="mass-action-inputs-displayed" class="mass-action-inputs-displayed" type="checkbox" />
+        <input id="mass-action-inputs-displayed" class="toggle-checkbox" type="checkbox" />
-        <div class="mass-buttons">
+        <div class="mass-action">
-            <span>
+            <div class="mass-action-group">
                 <input type="checkbox" class="entry-checkbox-input" data-toggle="[data-js='entry-checkbox']" data-js="checkboxes-toggle" />
-            </span>
+                <button class="mass-action-button btn cyan darken-1" type="submit" name="toggle-read" title="{{ 'entry.list.toogle_as_read'|trans }}"><i class="material-icons">done</i></button>
+                <button class="mass-action-button btn cyan darken-1" type="submit" name="toggle-star" title="{{ 'entry.list.toogle_as_star'|trans }}" ><i class="material-icons">star</i></button>
+                <button class="mass-action-button btn cyan darken-1" type="submit" name="delete" onclick="return confirm('{{ 'entry.confirm.delete_entries'|trans|escape('js') }}')" title="{{ 'entry.list.delete'|trans }}"><i class="material-icons">delete</i></button>
+                <label for="mass-action-tags-displayed" class="mass-action-button btn cyan darken-1" type="button" title="{{ 'entry.list.add_tag'|trans }}"><i class="material-icons">label</i></label>
+            </div>
 
-            <span>
+            <input id="mass-action-tags-displayed" class="toggle-checkbox" type="checkbox" />
-                <button class="btn cyan darken-1" type="submit" name="toggle-read" title="{{ 'entry.list.toogle_as_read'|trans }}"><i class="material-icons">done</i></button>
+            <div class="mass-action-tags">
-                <button class="btn cyan darken-1" type="submit" name="toggle-star" title="{{ 'entry.list.toogle_as_star'|trans }}" ><i class="material-icons">star</i></button>
+                <input type="text" class="mass-action-tags-input" name="tags" placeholder="{{ 'entry.list.mass_action_tags_input_placeholder'|trans }}" required />
-                <button class="btn cyan darken-1" type="submit" name="delete" onclick="return confirm('{{ 'entry.confirm.delete_entries'|trans|escape('js') }}')" title="{{ 'entry.list.delete'|trans }}"><i class="material-icons">delete</i></button>
+                <button class="btn cyan darken-1" type="submit" name="tag">Ajouter</button>
-                <button class="btn cyan darken-1" type="submit" name="tag"><i class="material-icons">label</i></button>
+            </div>
-            </span>
-
-            <span class="input-field inline">
-                <input type="text" name="tags" />
-            </span>
         </div>
 
         <ol class="entries {% if list_mode == 1 %}collection{% else %}row entries-row data{% endif %}">

translations/messages.en.yml

@@ -241,6 +241,7 @@ entry:
         show_same_domain: Show articles with the same domain
         assign_search_tag: Assign this search as a tag to each result
         toggle_mass_action: Toggle mass action
+        mass_action_tags_input_placeholder: tag1, tag2, tag3
     filters:
         title: Filters
         status_label: Status