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

Feat/mass action UI
This commit is contained in:
Kevin Decherf 2023-06-01 22:20:05 +02:00 committed by GitHub
commit 3e02a8aaf5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 120 additions and 72 deletions

View file

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

View file

@ -2,40 +2,72 @@
* Entries * 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 { .nb-results {
display: inline-flex; display: inline-flex;
} }
}
a { .results-item {
color: #444; color: #444;
}
} }
.pagination { .pagination {
@ -138,3 +170,11 @@ footer {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
@media screen and (min-width: 993px) {
.mass-action {
display: flex;
align-items: center;
gap: 30px;
}
}

View file

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

View file

@ -1,3 +1,3 @@
<div class="entry-checkbox"> <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> </div>

View file

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

View file

@ -1,11 +1,12 @@
{% if tag is defined %} {% 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'] %} {% elseif current_route in ['homepage', 'unread', 'starred', 'archive', 'all'] %}
{% set feed_route = current_route %} {% set feed_route = current_route %}
{% if current_route == 'homepage' %} {% if current_route == 'homepage' %}
{% set feed_route = 'unread' %} {% set feed_route = 'unread' %}
{% endif %} {% endif %}
{% set feed_route = feed_route ~ '_feed' %} {% 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 %} {% 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>

View file

@ -29,7 +29,12 @@
<div class="results"> <div class="results">
<div class="nb-results"> <div class="nb-results">
{{ 'entry.list.number_on_the_page'|transchoice(entries.count) }} {{ '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 %} {% if app.user.config.feedToken %}
{% include "@WallabagCore/Entry/_feed_link.html.twig" %} {% include "@WallabagCore/Entry/_feed_link.html.twig" %}
{% endif %} {% endif %}
@ -40,41 +45,39 @@
{% endif %} {% endif %}
</div> </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> </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 %} {% 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> </form>
{% if entries.getNbPages > 1 %} {% if entries.getNbPages > 1 %}

View file

@ -240,6 +240,8 @@ entry:
export_title: Export export_title: Export
show_same_domain: Show articles with the same domain show_same_domain: Show articles with the same domain
assign_search_tag: Assign this search as a tag to each result 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: filters:
title: Filters title: Filters
status_label: Status status_label: Status

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long