mirror of
https://github.com/sissbruecker/linkding.git
synced 2026-02-28 06:53:12 +08:00
Move bulk edit checkboxes into bookmark list container (#1257)
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user