mirror of
https://github.com/wallabag/wallabag.git
synced 2024-11-23 01:21:03 +00:00
Merge pull request #6547 from Simounet/feat/mass-action-ui
Feat/mass action UI
This commit is contained in:
Kevin Decherf
GitHub
commit
3e02a8aaf5
10 changed files with 120 additions and 72 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -2,40 +2,72 @@
|
|||
* Entries
|
||||
* ========================================================================== */
|
||||
|
||||
.mass-buttons {
|
||||
margin: 10px 5px 10px 20px;
|
||||
.mass-action-toggle {
|
||||
display: inline-flex;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
#selectAll {
|
||||
position: relative;
|
||||
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;
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.card-stacked {
|
||||
input[type="checkbox"] {
|
||||
position: relative;
|
||||
opacity: initial;
|
||||
left: 0;
|
||||
}
|
||||
.mass-action {
|
||||
margin: 10px 5px 10px 20px;
|
||||
}
|
||||
|
||||
.entry-checkbox {
|
||||
margin-right: 10px;
|
||||
.mass-action-group {
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
user-select: none;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
<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" />
|
||||
</span>
|
||||
{% 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>
|
||||
|
||||
<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 %}
|
||||
<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>
|
||||
|
||||
<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 %}
|
||||
|
|
|
|||
|
|
@ -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
Loading…
Reference in a new issue