Add bookmark-clock icon (#8553)

Adds a custom bookmark-clock icon to discourse-additional.svg for use with the new bookmarks with reminder functionality.

Also add some code to correctly refresh the post-stream icon for bookmark to show the clock after save.

app/assets/javascripts/discourse/controllers/bookmark.js.es6

@@ -111,14 +111,19 @@ export default Controller.extend(ModalFunctionality, {
 
   saveBookmark() {
     const reminderAt = this.reminderAt();
+    const reminderAtISO = reminderAt ? reminderAt.toISOString() : null;
     const data = {
       reminder_type: this.selectedReminderType,
-      reminder_at: reminderAt ? reminderAt.toISOString() : null,
+      reminder_at: reminderAtISO,
       name: this.name,
       post_id: this.model.postId
     };
 
-    return ajax("/bookmarks", { type: "POST", data });
+    return ajax("/bookmarks", { type: "POST", data }).then(() => {
+      if (this.afterSave) {
+        this.afterSave(reminderAtISO);
+      }
+    });
   },
 
   reminderAt() {

app/assets/javascripts/discourse/models/post.js.es6

@@ -351,9 +351,14 @@ const Post = RestModel.extend({
         onCloseWithoutSaving: () => {
           this.toggleProperty("bookmarked_with_reminder");
           this.appEvents.trigger("post-stream:refresh", { id: this.id });
+        },
+        afterSave: reminderAtISO => {
+          this.set("bookmark_reminder_at", reminderAtISO);
+          this.appEvents.trigger("post-stream:refresh", { id: this.id });
         }
       });
     } else {
+      this.set("bookmark_reminder_at", null);
       return Post.destroyBookmark(this.id)
         .then(() => this.appEvents.trigger("page:bookmark-post-toggled", this))
         .catch(error => {

app/assets/javascripts/discourse/widgets/post-menu.js.es6

@@ -332,7 +332,7 @@ registerButton("bookmarkWithReminder", (attrs, state, siteSettings) => {
     title,
     titleOptions,
     className: classNames.join(" "),
-    icon: "bookmark"
+    icon: attrs.bookmarkReminderAt ? "discourse-bookmark-clock" : "bookmark"
   };
 });
 

app/assets/stylesheets/desktop/topic-post.scss

@@ -206,9 +206,6 @@ nav.post-controls {
       &.bookmarked .d-icon {
         color: $tertiary;
       }
-      &.with-reminder.bookmarked .d-icon {
-        color: $danger;
-      }
     }
   }
   .post-admin-menu {

lib/svg_sprite/svg_sprite.rb

@@ -30,6 +30,7 @@ module SvgSprite
     "book",
     "book-reader",
     "bookmark",
+    "discourse-bookmark-clock",
     "briefcase",
     "calendar-alt",
     "caret-down",

vendor/assets/svg-icons/discourse-additional.svg

@@ -11,4 +11,7 @@ Additional SVG icons
   <symbol id="discourse-expand" viewBox="0 0 1792 1792">
     <path d="M883 1056q0 13-10 23l-332 332 144 144q19 19 19 45t-19 45-45 19h-448q-26 0-45-19t-19-45v-448q0-26 19-45t45-19 45 19l144 144 332-332q10-10 23-10t23 10l114 114q10 10 10 23zm781-864v448q0 26-19 45t-45 19-45-19l-144-144-332 332q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l332-332-144-144q-19-19-19-45t19-45 45-19h448q26 0 45 19t19 45z"></path>
   </symbol>
+  <symbol id="discourse-bookmark-clock" viewBox="0 0 536 512">
+    <path d="M215.86 143.33A168.09 168.09 0 01296 0H48A48 48 0 000 48v464l192-112 192 112V315.53c-94-.04-168.14-79.33-168.14-172.2z M392.45 0a144 144 0 10144 144 143.91 143.91 0 00-144-144zm64 150.3a9.77 9.77 0 01-9.7 9.7h-60.6a9.77 9.77 0 01-9.7-9.7V73.7a9.77 9.77 0 019.7-9.7h12.6a9.77 9.77 0 019.7 9.7V128h38.3a9.77 9.77 0 019.7 9.7z"/>
+  </symbol> 
 </svg>