From a03ae9b3232dc28db710cfd944d327a5fb8aec6c Mon Sep 17 00:00:00 2001 From: Martin Brennan Date: Mon, 23 May 2022 15:01:44 +1000 Subject: [PATCH] DEV: Add bookmark-icon component (#16893) This component will be useful for chat, and also moves the definition of the icon for with and without reminders to the bookmark model as consts, so they can easily be referenced in other places. --- .../discourse/app/components/bookmark-icon.js | 21 +++++++++ .../app/initializers/topic-footer-buttons.js | 8 +++- .../discourse/app/models/bookmark.js | 3 ++ .../templates/components/bookmark-icon.hbs | 1 + .../discourse/app/widgets/post-menu.js | 6 ++- .../app/widgets/quick-access-bookmarks.js | 12 ++--- .../components/bookmark-icon-test.js | 45 +++++++++++++++++++ 7 files changed, 88 insertions(+), 8 deletions(-) create mode 100644 app/assets/javascripts/discourse/app/components/bookmark-icon.js create mode 100644 app/assets/javascripts/discourse/app/templates/components/bookmark-icon.hbs create mode 100644 app/assets/javascripts/discourse/tests/integration/components/bookmark-icon-test.js diff --git a/app/assets/javascripts/discourse/app/components/bookmark-icon.js b/app/assets/javascripts/discourse/app/components/bookmark-icon.js new file mode 100644 index 0000000000..56eab68e72 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/bookmark-icon.js @@ -0,0 +1,21 @@ +import { isEmpty } from "@ember/utils"; +import { computed } from "@ember/object"; +import Component from "@ember/component"; +import { + NO_REMINDER_ICON, + WITH_REMINDER_ICON, +} from "discourse/models/bookmark"; + +export default class BookmarkIcon extends Component { + tagName = ""; + bookmark = null; + + @computed("bookmark.reminder_at") + get icon() { + if (!isEmpty(this.bookmark.reminder_at)) { + return WITH_REMINDER_ICON; + } + + return NO_REMINDER_ICON; + } +} diff --git a/app/assets/javascripts/discourse/app/initializers/topic-footer-buttons.js b/app/assets/javascripts/discourse/app/initializers/topic-footer-buttons.js index 83e5a63b40..610bfefe5d 100644 --- a/app/assets/javascripts/discourse/app/initializers/topic-footer-buttons.js +++ b/app/assets/javascripts/discourse/app/initializers/topic-footer-buttons.js @@ -1,4 +1,8 @@ import I18n from "I18n"; +import { + NO_REMINDER_ICON, + WITH_REMINDER_ICON, +} from "discourse/models/bookmark"; import { registerTopicFooterButton } from "discourse/lib/register-topic-footer-button"; import showModal from "discourse/lib/show-modal"; @@ -73,9 +77,9 @@ export default { id: "bookmark", icon() { if (this.topic.bookmarks.some((bookmark) => bookmark.reminder_at)) { - return "discourse-bookmark-clock"; + return WITH_REMINDER_ICON; } - return "bookmark"; + return NO_REMINDER_ICON; }, priority: BOOKMARK_PRIORITY, classNames() { diff --git a/app/assets/javascripts/discourse/app/models/bookmark.js b/app/assets/javascripts/discourse/app/models/bookmark.js index f2f1b2f6d6..56d6e12bdd 100644 --- a/app/assets/javascripts/discourse/app/models/bookmark.js +++ b/app/assets/javascripts/discourse/app/models/bookmark.js @@ -20,6 +20,9 @@ export const AUTO_DELETE_PREFERENCES = { ON_OWNER_REPLY: 2, }; +export const NO_REMINDER_ICON = "bookmark"; +export const WITH_REMINDER_ICON = "discourse-bookmark-clock"; + const Bookmark = RestModel.extend({ newBookmark: none("id"), diff --git a/app/assets/javascripts/discourse/app/templates/components/bookmark-icon.hbs b/app/assets/javascripts/discourse/app/templates/components/bookmark-icon.hbs new file mode 100644 index 0000000000..cbb52a288f --- /dev/null +++ b/app/assets/javascripts/discourse/app/templates/components/bookmark-icon.hbs @@ -0,0 +1 @@ +{{d-icon icon translatedtitle=@bookmark.name}} diff --git a/app/assets/javascripts/discourse/app/widgets/post-menu.js b/app/assets/javascripts/discourse/app/widgets/post-menu.js index 9023b0ed76..5d0c7ac74f 100644 --- a/app/assets/javascripts/discourse/app/widgets/post-menu.js +++ b/app/assets/javascripts/discourse/app/widgets/post-menu.js @@ -6,6 +6,10 @@ import { h } from "virtual-dom"; import showModal from "discourse/lib/show-modal"; import { smallUserAtts } from "discourse/widgets/actions-summary"; import I18n from "I18n"; +import { + NO_REMINDER_ICON, + WITH_REMINDER_ICON, +} from "discourse/models/bookmark"; const LIKE_ACTION = 2; const VIBRATE_DURATION = 5; @@ -359,7 +363,7 @@ registerButton( title, titleOptions, className: classNames.join(" "), - icon: attrs.bookmarkReminderAt ? "discourse-bookmark-clock" : "bookmark", + icon: attrs.bookmarkReminderAt ? WITH_REMINDER_ICON : NO_REMINDER_ICON, }; } ); diff --git a/app/assets/javascripts/discourse/app/widgets/quick-access-bookmarks.js b/app/assets/javascripts/discourse/app/widgets/quick-access-bookmarks.js index 4be4dfbfca..da090a5c32 100644 --- a/app/assets/javascripts/discourse/app/widgets/quick-access-bookmarks.js +++ b/app/assets/javascripts/discourse/app/widgets/quick-access-bookmarks.js @@ -1,4 +1,8 @@ import RawHtml from "discourse/widgets/raw-html"; +import { + NO_REMINDER_ICON, + WITH_REMINDER_ICON, +} from "discourse/models/bookmark"; import { iconHTML } from "discourse-common/lib/icon-library"; import QuickAccessPanel from "discourse/widgets/quick-access-panel"; import { ajax } from "discourse/lib/ajax"; @@ -8,8 +12,6 @@ import { postUrl } from "discourse/lib/utilities"; import I18n from "I18n"; import { htmlSafe } from "@ember/template"; -const ICON = "bookmark"; - createWidget("no-quick-access-bookmarks", { html() { return h("div.empty-state", [ @@ -21,7 +23,7 @@ createWidget("no-quick-access-bookmarks", { "

" + htmlSafe( I18n.t("user.no_bookmarks_body", { - icon: iconHTML(ICON), + icon: iconHTML(NO_REMINDER_ICON), }) ) + "

", @@ -74,9 +76,9 @@ createWidgetFrom(QuickAccessPanel, "quick-access-bookmarks", { icon(bookmark) { if (bookmark.reminder_at) { - return "discourse-bookmark-clock"; + return WITH_REMINDER_ICON; } - return ICON; + return NO_REMINDER_ICON; }, loadBookmarksWithReminders() { diff --git a/app/assets/javascripts/discourse/tests/integration/components/bookmark-icon-test.js b/app/assets/javascripts/discourse/tests/integration/components/bookmark-icon-test.js new file mode 100644 index 0000000000..4d5134e2df --- /dev/null +++ b/app/assets/javascripts/discourse/tests/integration/components/bookmark-icon-test.js @@ -0,0 +1,45 @@ +import Bookmark from "discourse/models/bookmark"; +import componentTest, { + setupRenderingTest, +} from "discourse/tests/helpers/component-test"; +import hbs from "htmlbars-inline-precompile"; +import { discourseModule, exists } from "discourse/tests/helpers/qunit-helpers"; + +discourseModule("Component | bookmark-icon", function (hooks) { + setupRenderingTest(hooks); + + componentTest("with reminder", { + template: hbs`{{bookmark-icon bookmark=bookmark}}`, + + beforeEach() { + this.set( + "bookmark", + Bookmark.create({ + reminder_at: moment(), + name: "some name", + }) + ); + }, + + async test(assert) { + assert.ok(exists(".d-icon-discourse-bookmark-clock")); + }, + }); + + componentTest("no reminder", { + template: hbs`{{bookmark-icon bookmark=bookmark}}`, + + beforeEach() { + this.set( + "bookmark", + Bookmark.create({ + name: "some name", + }) + ); + }, + + async test(assert) { + assert.ok(exists(".d-icon-bookmark")); + }, + }); +});