Remove bookmark from top right of post; move its functionality to the post menu button

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

@@ -64,13 +64,15 @@ Discourse.Post = Discourse.Model.extend({
     } else {
       if (this.get('read')) {
         result += ' seen';
+      } else {
+        result += ' unseen';
       }
     }
     return result;
   }.property('read', 'topic.last_read_post_number', 'bookmarked'),
 
   // Custom tooltips for the bookmark icons
-  bookmarkTooltip: (function() {
+  bookmarkTooltip: function() {
     var topic;
     if (this.get('bookmarked')) return Em.String.i18n('bookmarks.created');
     if (!this.get('read')) return "";
@@ -79,7 +81,7 @@ Discourse.Post = Discourse.Model.extend({
       return Em.String.i18n('bookmarks.last_read');
     }
     return Em.String.i18n('bookmarks.not_bookmarked');
-  }).property('read', 'topic.last_read_post_number', 'bookmarked'),
+  }.property('read', 'topic.last_read_post_number', 'bookmarked'),
 
   bookmarkedChanged: function() {
     var post = this;

app/assets/javascripts/discourse/templates/post.js.handlebars

@@ -10,8 +10,6 @@
   <div class='row'>
     {{#if controller.multiSelect}}
       <button class='post-select' {{action selectPost this}}>{{view.selectText}}</button>
-    {{else}}
-      <div {{bindAttr class="bookmarkClass"}} {{bindAttr title="bookmarkTooltip"}} {{action toggleBookmark this}}></div>
     {{/if}}
 
     {{#if showUserReplyTab}}

app/assets/javascripts/discourse/views/post_menu_view.js

@@ -38,7 +38,7 @@ Discourse.PostMenuView = Discourse.View.extend({
   // Trigger re-rendering
   needsToRender: function() {
     this.rerender();
-  }.observes('post.deleted_at', 'post.flagsAvailable.@each', 'post.url', 'post.bookmarked', 'post.reply_count', 'post.showRepliesBelow', 'post.can_delete'),
+  }.observes('post.deleted_at', 'post.flagsAvailable.@each', 'post.url', 'post.bookmarked', 'post.reply_count', 'post.showRepliesBelow', 'post.can_delete', 'post.read', 'post.topic.last_read_post_number'),
 
   // Replies Button
   renderReplies: function(post, buffer) {
@@ -152,13 +152,9 @@ Discourse.PostMenuView = Discourse.View.extend({
   renderBookmark: function(post, buffer) {
     if (!Discourse.User.current()) return;
 
-    var icon = 'bookmark';
-    if (!this.get('post.bookmarked')) {
-      icon += '-empty';
-    }
-    buffer.push("<button title=\"" +
-                (Em.String.i18n("post.controls.bookmark")) +
-                "\" data-action=\"bookmark\" class='bookmark'><i class=\"icon-" + icon + "\"></i></button>");
+    buffer.push("<button title=\"" + this.get('post.bookmarkTooltip') +
+                "\" data-action=\"bookmark\" class='bookmark'><div class='" + this.get('post.bookmarkClass') +
+                "'></div></button>");
   },
 
   clickBookmark: function() {

app/assets/stylesheets/application/topic-post.css.scss

@@ -74,11 +74,6 @@
     .gutter {
       width: 100px;
     }
-    article.boxed {
-      .read-icon {
-        left: 750px !important;
-      }
-    }
   }
 }
 
@@ -202,13 +197,6 @@
     }
   }
   @include hover {
-    .read-icon {
-      i {
-        &:before {
-          font-size: 25px;
-        }
-      }
-    }
     section.post-menu-area {
       display: block;
     }
@@ -282,6 +270,25 @@
         &.like, &.edit, &.flag, &.delete, &.share, &.bookmark, &.create {
           float: right;
         }
+        .read-icon {
+          &:before {
+            font-family: "FontAwesome";
+            content: "\f02e";
+          }
+          &.unseen {
+            &:before {
+              content: "\f097";
+            }
+          }
+          &.last-read {
+            color: $red;
+          }
+          &.bookmarked {
+            &:before {
+              color: $bookmarkColor;
+            }
+          }
+        }
       }
       button.create {
         color: $attention_fg;
@@ -484,11 +491,6 @@
     position: relative;
     font-size: 16px;
     line-height: 20px;
-    @include small-width {
-      .read-icon {
-        right: 365px !important;
-      }
-    }
     .post-select {
       @include border-radius-all(4px);
       background-color: $light_gray;
@@ -504,36 +506,6 @@
       padding: 2px 5px;
       z-index: 490;
     }
-    .read-icon {
-      @include transition(opacity 1s);
-      opacity: 0;
-      position: absolute;
-      top: -3px;
-      left: 800px;
-      width: 16px;
-      height: 22px;
-      z-index: 490;
-      font-size: 20px;
-      cursor: pointer;
-      &:before {
-        font-family: "FontAwesome";
-        content: "\f02e";
-      }
-      &.seen {
-        color: $gray;
-        opacity: 1;
-      }
-      &.last-read {
-        color: $red;
-        opacity: 1;
-      }
-      &.bookmarked {
-        &:before {
-          color: $bookmarkColor;
-        }
-        opacity: 1;
-      }
-    }
     img {
       max-width: 100%;
     }