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

bookmarks/styles/bookmark-page.css

@@ -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;
+    display: none;
-    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;
     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;
   }

bookmarks/templates/bookmarks/bulk_edit_bar.html

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

bookmarks/tests_e2e/e2e_test_bookmark_page_bulk_edit.py

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