Move bulk edit checkboxes into bookmark list container (#1257)

This commit is contained in:
Sascha Ißbrücker
2026-01-03 09:27:30 +01:00
committed by GitHub
parent ee169e82cd
commit 4f5009b30f
3 changed files with 88 additions and 121 deletions

View File

@@ -139,7 +139,7 @@
ul.bookmark-list {
list-style: none;
margin: 0;
margin: var(--unit-4) 0 0 0;
padding: 0;
/* Increase line-height for better separation within / between items */
@@ -426,92 +426,18 @@ ul.bookmark-list {
--bulk-edit-bar-offset: calc(
var(--bulk-edit-toggle-width) + (2 * var(--bulk-edit-toggle-offset))
);
--bulk-edit-transition-duration: 400ms;
}
ld-bookmark-page {
& .bulk-edit-bar {
margin-top: -1px;
margin-left: calc(-1 * var(--bulk-edit-bar-offset));
margin-bottom: var(--unit-4);
max-height: 0;
overflow: hidden;
transition: max-height var(--bulk-edit-transition-duration);
background: var(--bulk-actions-bg-color);
}
&.active .bulk-edit-bar {
max-height: 37px;
border-bottom: solid 1px var(--secondary-border-color);
}
/* Hide section border when bulk edit bar is opened, otherwise borders overlap in dark mode due to using contrast colors */
&.active .main .section-header {
border-bottom-color: transparent;
}
/* make sticky pagination expand to cover checkboxes to the left */
&.active .bookmark-pagination.sticky:before {
content: "";
position: absolute;
top: -1px;
bottom: 0;
left: calc(
-1 * calc(var(--bulk-edit-toggle-width) + var(--bulk-edit-toggle-offset))
);
width: calc(var(--bulk-edit-toggle-width) + var(--bulk-edit-toggle-offset));
background: var(--body-color);
border-top: solid 1px var(--secondary-border-color);
}
/* All checkbox */
& .form-checkbox.bulk-edit-checkbox.all {
display: block;
width: var(--bulk-edit-toggle-width);
margin: 0 0 0 var(--bulk-edit-toggle-offset);
padding: 0;
}
/* Bookmark checkboxes */
& .form-checkbox.bulk-edit-checkbox:not(.all) {
display: block;
position: absolute;
width: var(--bulk-edit-toggle-width);
min-height: var(--bulk-edit-toggle-width);
left: calc(
-1 * var(--bulk-edit-toggle-width) - var(--bulk-edit-toggle-offset)
);
top: 50%;
transform: translateY(-50%);
padding: 0;
margin: 0;
visibility: hidden;
opacity: 0;
transition: all var(--bulk-edit-transition-duration);
.form-icon {
top: 0;
}
}
&.active .form-checkbox.bulk-edit-checkbox:not(.all) {
visibility: visible;
opacity: 1;
}
/* Actions */
& .bulk-edit-actions {
display: flex;
display: none;
align-items: center;
padding: var(--unit-1) 0;
border-top: solid 1px var(--secondary-border-color);
gap: var(--unit-2);
background: var(--bulk-actions-bg-color);
border-bottom: solid 1px var(--secondary-border-color);
/* Actions */
& button {
--control-padding-x-sm: 0;
}
@@ -534,6 +460,49 @@ ld-bookmark-page {
}
}
&.active .bulk-edit-bar {
display: flex;
}
/* All checkbox */
& .form-checkbox.bulk-edit-checkbox.all {
display: block;
width: var(--bulk-edit-toggle-width);
margin: 0 0 0 var(--bulk-edit-toggle-offset);
padding: 0;
}
/* Bookmark checkboxes */
& .form-checkbox.bulk-edit-checkbox:not(.all) {
display: none;
position: absolute;
width: var(--bulk-edit-toggle-width);
min-height: var(--bulk-edit-toggle-width);
left: calc(
-1 * var(--bulk-edit-toggle-width) - var(--bulk-edit-toggle-offset)
);
top: 50%;
transform: translateY(-50%);
padding: 0;
margin: 0;
.form-icon {
top: 0;
}
}
&.active .form-checkbox.bulk-edit-checkbox:not(.all) {
display: block;
}
&.active ul.bookmark-list > li {
padding-left: calc(
var(--bulk-edit-toggle-width) + calc(var(--bulk-edit-toggle-offset) * 2)
);
}
& ld-tag-autocomplete {
display: none;
}

View File

@@ -1,45 +1,43 @@
{% load shared %}
{% htmlmin %}
<div class="bulk-edit-bar">
<div class="bulk-edit-actions">
<label class="form-checkbox bulk-edit-checkbox all">
<input type="checkbox">
<i class="form-icon"></i>
</label>
<select name="bulk_action" class="form-select select-sm">
{% if not 'bulk_archive' in bookmark_list.bulk_edit_disabled_actions %}
<option value="bulk_archive">Archive</option>
{% endif %}
{% if not 'bulk_unarchive' in bookmark_list.bulk_edit_disabled_actions %}
<option value="bulk_unarchive">Unarchive</option>
{% endif %}
<option value="bulk_delete">Delete</option>
<option value="bulk_tag">Add tags</option>
<option value="bulk_untag">Remove tags</option>
<option value="bulk_read">Mark as read</option>
<option value="bulk_unread">Mark as unread</option>
{% if request.user_profile.enable_sharing %}
<option value="bulk_share">Share</option>
<option value="bulk_unshare">Unshare</option>
{% endif %}
<option value="bulk_refresh">Refresh from website</option>
{% if bookmark_list.snapshot_feature_enabled %}<option value="bulk_snapshot">Create HTML snapshot</option>{% endif %}
</select>
<ld-tag-autocomplete input-name="bulk_tag_string"
input-placeholder="Tag names..."
variant="small">
</ld-tag-autocomplete>
<button data-confirm
type="submit"
name="bulk_execute"
class="btn btn-link btn-sm">
<span>Execute</span>
</button>
<label class="form-checkbox select-across d-none">
<input type="checkbox" name="bulk_select_across">
<i class="form-icon"></i>
All pages (<span class="total">{{ bookmark_list.bookmarks_total }}</span> bookmarks)
</label>
</div>
<label class="form-checkbox bulk-edit-checkbox all">
<input type="checkbox">
<i class="form-icon"></i>
</label>
<select name="bulk_action" class="form-select select-sm">
{% if not 'bulk_archive' in bookmark_list.bulk_edit_disabled_actions %}
<option value="bulk_archive">Archive</option>
{% endif %}
{% if not 'bulk_unarchive' in bookmark_list.bulk_edit_disabled_actions %}
<option value="bulk_unarchive">Unarchive</option>
{% endif %}
<option value="bulk_delete">Delete</option>
<option value="bulk_tag">Add tags</option>
<option value="bulk_untag">Remove tags</option>
<option value="bulk_read">Mark as read</option>
<option value="bulk_unread">Mark as unread</option>
{% if request.user_profile.enable_sharing %}
<option value="bulk_share">Share</option>
<option value="bulk_unshare">Unshare</option>
{% endif %}
<option value="bulk_refresh">Refresh from website</option>
{% if bookmark_list.snapshot_feature_enabled %}<option value="bulk_snapshot">Create HTML snapshot</option>{% endif %}
</select>
<ld-tag-autocomplete input-name="bulk_tag_string"
input-placeholder="Tag names..."
variant="small">
</ld-tag-autocomplete>
<button data-confirm
type="submit"
name="bulk_execute"
class="btn btn-link btn-sm">
<span>Execute</span>
</button>
<label class="form-checkbox select-across d-none">
<input type="checkbox" name="bulk_select_across">
<i class="form-icon"></i>
All <span class="total">{{ bookmark_list.bookmarks_total }}</span> bookmarks
</label>
</div>
{% endhtmlmin %}

View File

@@ -304,7 +304,7 @@ class BookmarkPageBulkEditE2ETestCase(LinkdingE2ETestCase):
self.locate_bulk_edit_select_all().click()
expect(
self.locate_bulk_edit_bar().get_by_text("All pages (100 bookmarks)")
self.locate_bulk_edit_bar().get_by_text("All 100 bookmarks")
).to_be_visible()
self.select_bulk_action("Delete")
@@ -317,5 +317,5 @@ class BookmarkPageBulkEditE2ETestCase(LinkdingE2ETestCase):
self.locate_bulk_edit_select_all().click()
expect(
self.locate_bulk_edit_bar().get_by_text("All pages (70 bookmarks)")
self.locate_bulk_edit_bar().get_by_text("All 70 bookmarks")
).to_be_visible()