diff --git a/bookmarks/e2e/e2e_test_bookmark_page_partial_updates.py b/bookmarks/e2e/e2e_test_bookmark_page_partial_updates.py index d1cfe04..47ec11a 100644 --- a/bookmarks/e2e/e2e_test_bookmark_page_partial_updates.py +++ b/bookmarks/e2e/e2e_test_bookmark_page_partial_updates.py @@ -119,10 +119,27 @@ class BookmarkPagePartialUpdatesE2ETestCase(LinkdingE2ETestCase): with sync_playwright() as p: self.open(reverse('bookmarks:index'), p) - expect(self.locate_bookmark('Bookmark 2').get_by_text('Bookmark 2')).to_have_class('text-italic') - self.locate_bookmark('Bookmark 2').get_by_text('Mark as read').click() + expect(self.locate_bookmark('Bookmark 2')).to_have_class('unread') + self.locate_bookmark('Bookmark 2').get_by_text('Unread').click() + self.locate_bookmark('Bookmark 2').get_by_text('Yes').click() - expect(self.locate_bookmark('Bookmark 2').get_by_text('Bookmark 2')).not_to_have_class('text-italic') + expect(self.locate_bookmark('Bookmark 2')).not_to_have_class('unread') + self.assertReloads(0) + + def test_active_bookmarks_partial_update_on_unshare(self): + self.setup_fixture() + bookmark2 = self.get_numbered_bookmark('Bookmark 2') + bookmark2.shared = True + bookmark2.save() + + with sync_playwright() as p: + self.open(reverse('bookmarks:index'), p) + + expect(self.locate_bookmark('Bookmark 2')).to_have_class('shared') + self.locate_bookmark('Bookmark 2').get_by_text('Shared').click() + self.locate_bookmark('Bookmark 2').get_by_text('Yes').click() + + expect(self.locate_bookmark('Bookmark 2')).not_to_have_class('shared') self.assertReloads(0) def test_active_bookmarks_partial_update_on_bulk_archive(self): diff --git a/bookmarks/frontend/behaviors/confirm-button.js b/bookmarks/frontend/behaviors/confirm-button.js index 742601a..6b6ea01 100644 --- a/bookmarks/frontend/behaviors/confirm-button.js +++ b/bookmarks/frontend/behaviors/confirm-button.js @@ -16,9 +16,31 @@ class ConfirmButtonBehavior { onClick(event) { event.preventDefault(); + const container = document.createElement("span"); + container.className = "confirmation"; + + const icon = this.button.getAttribute("confirm-icon"); + if (icon) { + const iconElement = document.createElementNS( + "http://www.w3.org/2000/svg", + "svg", + ); + iconElement.style.width = "16px"; + iconElement.style.height = "16px"; + iconElement.innerHTML = ``; + container.append(iconElement); + } + + const question = this.button.getAttribute("confirm-question"); + if (question) { + const questionElement = document.createElement("span"); + questionElement.innerText = question; + container.append(question); + } + const cancelButton = document.createElement(this.button.nodeName); cancelButton.type = "button"; - cancelButton.innerText = "Cancel"; + cancelButton.innerText = question ? "No" : "Cancel"; cancelButton.className = "btn btn-link btn-sm mr-1"; cancelButton.addEventListener("click", this.reset.bind(this)); @@ -26,12 +48,10 @@ class ConfirmButtonBehavior { confirmButton.type = this.button.dataset.type; confirmButton.name = this.button.dataset.name; confirmButton.value = this.button.dataset.value; - confirmButton.innerText = "Confirm"; + confirmButton.innerText = question ? "Yes" : "Confirm"; confirmButton.className = "btn btn-link btn-sm"; confirmButton.addEventListener("click", this.reset.bind(this)); - const container = document.createElement("span"); - container.className = "confirmation"; container.append(cancelButton, confirmButton); this.container = container; diff --git a/bookmarks/styles/base.scss b/bookmarks/styles/base.scss index 53830fa..db31527 100644 --- a/bookmarks/styles/base.scss +++ b/bookmarks/styles/base.scss @@ -65,13 +65,19 @@ section.content-area { span.confirmation { display: flex; align-items: baseline; -} - -span.confirmation .btn.btn-link { + gap: $unit-1; color: $error-color !important; - &:hover { - text-decoration: underline; + svg { + align-self: center; + } + + .btn.btn-link { + color: $error-color !important; + + &:hover { + text-decoration: underline; + } } } @@ -116,3 +122,13 @@ span.confirmation .btn.btn-link { padding-left: $unit-6; padding-right: $unit-6; } + +.btn.btn-sm.btn-icon { + display: inline-flex; + align-items: baseline; + gap: $unit-h; + + svg { + align-self: center; + } +} \ No newline at end of file diff --git a/bookmarks/styles/bookmark-page.scss b/bookmarks/styles/bookmark-page.scss index dc8c811..afa88a8 100644 --- a/bookmarks/styles/bookmark-page.scss +++ b/bookmarks/styles/bookmark-page.scss @@ -66,6 +66,10 @@ li[ld-bookmark-item] { text-overflow: ellipsis; } + &.unread .title a { + font-style: italic; + } + .title img { width: 16px; height: 16px; @@ -85,11 +89,18 @@ li[ld-bookmark-item] { } } - .actions { + .actions, .extra-actions { display: flex; align-items: baseline; flex-wrap: wrap; - gap: $unit-2; + column-gap: $unit-2; + } + + @media (max-width: $size-sm) { + .extra-actions { + width: 100%; + margin-top: $unit-1; + } } .actions { @@ -113,13 +124,6 @@ li[ld-bookmark-item] { .separator { align-self: flex-start; } - - .toggle-notes { - align-self: center; - display: flex; - align-items: center; - gap: $unit-h; - } } } diff --git a/bookmarks/templates/bookmarks/bookmark_list.html b/bookmarks/templates/bookmarks/bookmark_list.html index d991fc4..1176f84 100644 --- a/bookmarks/templates/bookmarks/bookmark_list.html +++ b/bookmarks/templates/bookmarks/bookmark_list.html @@ -6,124 +6,115 @@ {% include 'bookmarks/empty_bookmarks.html' %} {% else %}