Merge pull request #6547 from Simounet/feat/mass-action-ui

Feat/mass action UI

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

@@ -60,7 +60,7 @@
   #article article h6,
   .dropdown-content li > a,
   .nav-panels .input-field input:focus,
-  .results a,
+  .results-item,
   .side-nav li > a,
   .side-nav li > a > i.material-icons {
     color: #dfdfdf;

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

@@ -2,40 +2,72 @@
  * Entries
  * ========================================================================== */
 
-.mass-buttons {
+.mass-action-toggle {
-  margin: 10px 5px 10px 20px;
+  display: inline-flex;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
 
-  #selectAll {
+  &:focus {
-    position: relative;
+    background-color: transparent;
-    opacity: initial;
-    left: 0;
-  }
-
-  span {
-    padding: 3px;
-  }
-
-  button {
-    i {
-      font-size: 15px;
-    }
-
-    height: 24px;
-    line-height: 24px;
-    padding: 0 0.5rem;
-    margin-right: 0.75rem;
   }
 }
 
-.card-stacked {
+.mass-action {
-  input[type="checkbox"] {
+  margin: 10px 5px 10px 20px;
-    position: relative;
+}
-    opacity: initial;
-    left: 0;
-  }
 
-  .entry-checkbox {
+.mass-action-group {
-    margin-right: 10px;
+  display: flex;
+  padding: 3px;
+  gap: 10px;
+}
+
+.mass-action-button {
+  height: 24px;
+  line-height: 24px;
+  padding: 0 0.5rem;
+
+  i {
+    font-size: 1rem;
+  }
+}
+
+.entry-checkbox {
+  margin: 10px 15px 10px 5px;
+
+  .card & {
+    float: right;
+    margin-right: 0;
+    padding: 10px;
+  }
+}
+
+.entries .entry-checkbox-input,
+.mass-action .entry-checkbox-input {
+  position: relative;
+  left: 0;
+  width: 20px;
+  min-height: 25px;
+  height: 100%;
+  vertical-align: middle;
+  opacity: initial;
+}
+
+.toggle-checkbox:not(:checked) + .mass-action,
+.toggle-checkbox:not(:checked) + .mass-action-tags,
+.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;
   }
 }
 
@@ -62,10 +94,10 @@
   .nb-results {
     display: inline-flex;
   }
+}
 
-  a {
+.results-item {
-    color: #444;
+  color: #444;
-  }
 }
 
 .pagination {
@@ -138,3 +170,11 @@ footer {
     margin-bottom: 10px;
   }
 }
+
+@media screen and (min-width: 993px) {
+  .mass-action {
+    display: flex;
+    align-items: center;
+    gap: 30px;
+  }
+}

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

@@ -21,6 +21,7 @@
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
+  user-select: none;
 
   /* Support for all WebKit browsers. */
   -webkit-font-smoothing: antialiased;

src/Wallabag/CoreBundle/Resources/views/Entry/Card/_mass_checkbox.html.twig

@@ -1,3 +1,3 @@
 <div class="entry-checkbox">
-    <input type="checkbox" data-js="entry-checkbox" name="entry-checkbox[]" value="{{ entry.id }}" />
+    <input type="checkbox" class="entry-checkbox-input" data-js="entry-checkbox" name="entry-checkbox[]" value="{{ entry.id }}" />
 </div>

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

@@ -1,6 +1,7 @@
 <div class="card entry-card{% if currentRoute in routes and entry.isArchived %} archived{% endif %}">
     <div class="card-body">
         <div class="card-image waves-effect waves-block waves-light">
+            {% include "@WallabagCore/Entry/Card/_mass_checkbox.html.twig" with {'entry': entry} only %}
             <ul class="card-entry-labels">
             {% for tag in entry.tags|slice(0, 3) %}
                 <li title="{{ tag.label }}"><a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a></li>

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

@@ -1,11 +1,12 @@
 {% if tag is defined %}
-    <a rel="alternate" type="application/atom+xml" href="{{ path('tag_feed', {'username': app.user.username, 'token': app.user.config.feedToken, 'slug': tag.slug}) }}" class="right"><i class="material-icons md-24">rss_feed</i></a>
+    {% set feed_route = 'tag_feed' %}
+    {% set slug = tag.slug %}
 {% elseif current_route in ['homepage', 'unread', 'starred', 'archive', 'all'] %}
     {% set feed_route = current_route %}
     {% if current_route == 'homepage' %}
         {% set feed_route = 'unread' %}
     {% endif %}
     {% set feed_route = feed_route ~ '_feed' %}
-
+    {% set slug = null %}
-    <a rel="alternate" type="application/atom+xml" href="{{ path(feed_route, {'username': app.user.username, 'token': app.user.config.feedToken}) }}" class="right"><i class="material-icons">rss_feed</i></a>
 {% endif %}
+<a rel="alternate" type="application/atom+xml" href="{{ path(feed_route, {'username': app.user.username, 'token': app.user.config.feedToken, 'slug': slug}) }}" class="results-item"><i class="material-icons">rss_feed</i></a>

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

@@ -29,7 +29,12 @@
     <div class="results">
         <div class="nb-results">
             {{ 'entry.list.number_on_the_page'|transchoice(entries.count) }}
-            <a href="{{ path('switch_view_mode') }}"><i class="material-icons">{% if list_mode == 0 %}view_list{% else %}view_module{% endif %}</i></a>
+            {% if entries.count > 0 %}
+                <a class="results-item" href="{{ path('switch_view_mode') }}"><i class="material-icons">{% if list_mode == 0 %}view_list{% else %}view_module{% endif %}</i></a>
+            {% endif %}
+            {% if entries.count > 0 %}
+                <label for="mass-action-inputs-displayed" class="mass-action-toggle results-item tooltipped" data-position="right" data-delay="50" data-tooltip="{{ 'entry.list.toggle_mass_action'|trans }}"><i class="material-icons">library_add_check</i></label>
+            {% endif %}
             {% if app.user.config.feedToken %}
                 {% include "@WallabagCore/Entry/_feed_link.html.twig" %}
             {% endif %}
@@ -40,41 +45,39 @@
         {% endif %}
     </div>
 
-    {% if list_mode == 1 %}
+    {% if entries.count > 0 %}
-        <div class="mass-buttons">
+        <input id="mass-action-inputs-displayed" class="toggle-checkbox" type="checkbox" />
-            {% if entries.count > 0 and list_mode == 1 %}
+        <div class="mass-action">
-                <span>
+            <div class="mass-action-group">
-                    <input id="selectAll" type="checkbox" data-toggle="[data-js='entry-checkbox']" data-js="checkboxes-toggle" />&nbsp;
+                <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>
-            {% endif %}
         </div>
+
+        <ol class="entries {% if list_mode == 1 %}collection{% else %}row entries-row data{% endif %}">
+
+            {% for entry in entries %}
+                <li id="entry-{{ entry.id|e }}" class="{% if list_mode != 0 %}col collection-item{% endif %} s12" data-entry-id="{{ entry.id|e }}" data-test="entry">
+                    {% if list_mode == 1 %}
+                        {% include "@WallabagCore/Entry/_card_list.html.twig" with {'entry': entry, 'currentRoute': current_route, 'routes': entries_with_archived_class_routes} only %}
+                    {% elseif not entry.previewPicture is null and entry.mimetype starts with 'image/' %}
+                        {% include "@WallabagCore/Entry/_card_full_image.html.twig" with {'entry': entry, 'currentRoute': current_route, 'routes': entries_with_archived_class_routes} only %}
+                    {% else %}
+                        {% include "@WallabagCore/Entry/_card_preview.html.twig" with {'entry': entry, 'currentRoute': current_route, 'routes': entries_with_archived_class_routes} only %}
+                    {% endif %}
+                </li>
+            {% endfor %}
+        </ol>
     {% endif %}
-
-    <ol class="entries {% if list_mode == 1 %}collection{% else %}row entries-row data{% endif %}">
-
-        {% for entry in entries %}
-            <li id="entry-{{ entry.id|e }}" class="{% if list_mode != 0 %}col collection-item{% endif %} s12" data-entry-id="{{ entry.id|e }}" data-test="entry">
-                {% if list_mode == 1 %}
-                    {% include "@WallabagCore/Entry/_card_list.html.twig" with {'entry': entry, 'currentRoute': current_route, 'routes': entries_with_archived_class_routes} only %}
-                {% elseif not entry.previewPicture is null and entry.mimetype starts with 'image/' %}
-                    {% include "@WallabagCore/Entry/_card_full_image.html.twig" with {'entry': entry, 'currentRoute': current_route, 'routes': entries_with_archived_class_routes} only %}
-                {% else %}
-                    {% include "@WallabagCore/Entry/_card_preview.html.twig" with {'entry': entry, 'currentRoute': current_route, 'routes': entries_with_archived_class_routes} only %}
-                {% endif %}
-            </li>
-        {% endfor %}
-    </ol>
 </form>
 
     {% if entries.getNbPages > 1 %}

translations/messages.en.yml

@@ -240,6 +240,8 @@ entry:
         export_title: Export
         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