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,
.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;

View file

@ -2,40 +2,72 @@
* Entries
* ========================================================================== */
.mass-buttons {
.mass-action-toggle {
display: inline-flex;
background-color: transparent;
border: none;
cursor: pointer;
&:focus {
background-color: transparent;
}
}
.mass-action {
margin: 10px 5px 10px 20px;
#selectAll {
position: relative;
opacity: initial;
left: 0;
}
span {
.mass-action-group {
display: flex;
padding: 3px;
gap: 10px;
}
button {
i {
font-size: 15px;
}
.mass-action-button {
height: 24px;
line-height: 24px;
padding: 0 0.5rem;
margin-right: 0.75rem;
}
}
.card-stacked {
input[type="checkbox"] {
position: relative;
opacity: initial;
left: 0;
i {
font-size: 1rem;
}
}
.entry-checkbox {
margin-right: 10px;
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 {
color: #444;
}
.results-item {
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;
}
}

View file

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

View file

@ -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>

View file

@ -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>

View file

@ -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' %}
<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>
{% set slug = null %}
{% 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="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,26 +45,23 @@
{% endif %}
</div>
{% if list_mode == 1 %}
<div class="mass-buttons">
{% if entries.count > 0 and list_mode == 1 %}
<span>
<input id="selectAll" type="checkbox" data-toggle="[data-js='entry-checkbox']" data-js="checkboxes-toggle" />&nbsp;
</span>
<span>
<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>
<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>
<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"><i class="material-icons">label</i></button>
</span>
<span class="input-field inline">
<input type="text" name="tags" />
</span>
{% endif %}
{% if entries.count > 0 %}
<input id="mass-action-inputs-displayed" class="toggle-checkbox" type="checkbox" />
<div class="mass-action">
<div class="mass-action-group">
<input type="checkbox" class="entry-checkbox-input" data-toggle="[data-js='entry-checkbox']" data-js="checkboxes-toggle" />
<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>
<input id="mass-action-tags-displayed" class="toggle-checkbox" type="checkbox" />
<div class="mass-action-tags">
<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="tag">Ajouter</button>
</div>
</div>
{% endif %}
<ol class="entries {% if list_mode == 1 %}collection{% else %}row entries-row data{% endif %}">
@ -75,6 +77,7 @@
</li>
{% endfor %}
</ol>
{% endif %}
</form>
{% if entries.getNbPages > 1 %}

View file

@ -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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long