Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Allow for null bookmark in bookmark-icon (#16909) 

Sometimes we need to render the icon as a call to action
to create a bookmark at which point the bookmark does
not yet exist, so we need to just show the normal bookmark
icon and a create title.

Also adds a CSS class for the bookmark existing and not existing
for styling.
This commit is contained in:
Martin Brennan 2022-05-25 13:22:59 +10:00 committed by GitHub
parent 583704f603
commit 0d16d77401
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/javascripts/discourse/app/components/bookmark-icon.js
View File

@ -14,6 +14,10 @@ export default class BookmarkIcon extends Component {
@computed("bookmark.reminder_at")
get icon() {
if (!this.bookmark) {
return NO_REMINDER_ICON;
}
if (!isEmpty(this.bookmark.reminder_at)) {
return WITH_REMINDER_ICON;
}
@ -21,8 +25,19 @@ export default class BookmarkIcon extends Component {
return NO_REMINDER_ICON;
}
@computed("bookmark")
get cssClasses() {
return this.bookmark
? "bookmark-icon bookmark-icon__bookmarked"
: "bookmark-icon";
}
@computed("bookmark.name", "bookmark.reminder_at")
get title() {
if (!this.bookmark) {
return I18n.t("bookmarks.create");
}
if (!isEmpty(this.bookmark.reminder_at)) {
const formattedTime = formattedReminderTime(
this.bookmark.reminder_at,

2
app/assets/javascripts/discourse/app/templates/components/bookmark-icon.hbs
View File

@ -1 +1 @@
{{d-icon icon translatedtitle=title}}
{{d-icon icon translatedtitle=title class=cssClasses}}

24
app/assets/javascripts/discourse/tests/integration/components/bookmark-icon-test.js
View File

@ -29,7 +29,9 @@ discourseModule("Component | bookmark-icon", function (hooks) {
},
async test(assert) {
assert.ok(exists(".d-icon-discourse-bookmark-clock"));
assert.ok(
exists(".d-icon-discourse-bookmark-clock.bookmark-icon__bookmarked")
);
assert.strictEqual(
query(".svg-icon-title")["title"],
I18n.t("bookmarks.created_with_reminder_generic", {
@ -56,7 +58,7 @@ discourseModule("Component | bookmark-icon", function (hooks) {
},
async test(assert) {
assert.ok(exists(".d-icon-bookmark"));
assert.ok(exists(".d-icon-bookmark.bookmark-icon__bookmarked"));
assert.strictEqual(
query(".svg-icon-title")["title"],
I18n.t("bookmarks.created_generic", {
@ -65,4 +67,22 @@ discourseModule("Component | bookmark-icon", function (hooks) {
);
},
});
componentTest("null bookmark", {
template: hbs`{{bookmark-icon bookmark=bookmark}}`,
beforeEach() {
this.setProperties({
bookmark: null,
});
},
async test(assert) {
assert.ok(exists(".d-icon-bookmark.bookmark-icon"));
assert.strictEqual(
query(".svg-icon-title")["title"],
I18n.t("bookmarks.create")
);
},
});
});