Visual distinction between reply to last comment and reply to original post


(Noam Yorav-Raphael) #1

I see replying to the last comment and replying to the original post as two very different things, as I see comments as a hierarchy. Each has its own button. However, I see no visual distinction between those.

How about, for replies to the last comment, adding an arrow pointing upwards with a tooltip saying “This is a reply to the previous comment”? Something like:

(Notice the arrow).

Here’s a relevant comment about the difference between the two.


Moving post-specific reply indicator into the editor
(Pirat) #2

here is a button if it is not clear


(Noam Yorav-Raphael) #4

I’m sorry, I don’t quite get it. I don’t see this button if I reply to the last comment.


(Jeff Atwood) #5

By default, we suppress in-reply-to indicators for single replies directly underneath the post. It is implied by locality and would be extremely noisy if on by default. You can turn this suppression off in site settings if you like.

We also consider a reply to the first post, a generic reply to the topic. As the first post defines the topic. (Caveat: unless you quote something from the first post.)


(Noam Yorav-Raphael) #6

I agree that full in-reply-to indicators would be noisy. But I suggest a single, gray arrow (see the mockup in my original post). I think it’s very unobtrusive, and it lets those that are aware of its meaning distinguish between replies to the last comment and replies to the original post. Currently, distinguishing between those two is impossible. The current state also feels inconsistent to me – I can reply to the last comment, and when composing I see “Replying to post 5 by codinghorror”. I can also reply to the topic, and when composing I see "Reply to ". But after I click “Reply” there’s no distinction between the two.

I agree that treating replies to the first post like generic replies is a good idea.


(Michael Downey) #7

We’re having an increasing number of users accidentally click the “Reply” button on the last post in a topic, thinking they’re replying to the original author. This causes lots of problems for threading and notifications too, I think.

So just put a CSS hack to add in " Here" (for the post actions below each post) or " to this Topic" for the reply button at the bottom.

This UX confusion could really use some love. :heartpulse:


Moving post-specific reply indicator into the editor
(Dave McClure) #8

Let us know how well those tweaks work after you have some more data.


(Michael Downey) #9

So it’s quite a pain because the HTML doesn’t differentiate much between the reply buttons on the page, and in the editing window (both for creating topics and replying).

It would be nice if all the different create/reply buttons could have unique classes. :purple_heart:


(Mittineague) #10

But they do have different “selectors” that could be used.

<section class="ember-view post-menu-area clearfix" id="ember13234">
<nav class="post-controls">
<div class="actions">
<button aria-label="begin composing a reply to this post" title="begin composing a reply to this post" class="create" data-action="reply">
<i class="fa fa-reply"></i>
Reply
</button>


<div class="ember-view" id="topic-footer-buttons">
<button title="begin composing a reply to this topic" class="ember-view btn btn-primary create standard" id="ember13396">
<i class="fa fa-reply"></i>
Reply
</button>

eg. not ideal, but

div.actions button.create i.fa::after {
 content: "to this post";
}
div#topic-footer-buttons button.btn i.fa-reply::after {
 content: "to this topic";
}

results in


(Michael Downey) #11

Sure, but I was feeling a bit worried that those could more likely get moved around and cause the customization to break at some point. :smile:


(Dave McClure) #12

If you could make the per-post reply button say “Reply to {{username}}” that might really drive the point home.


(Jeff Atwood) #13

I was thinking the avatar would be even better.


(Mittineague) #14

I’m short on time for a while (RL tends to get in the way too often :sadpanda:) , but I’ll see if I can throw together some JavaScript ASAP


(Dave McClure) #15

That might even work on mobile.


(Mittineague) #16

I’ve got to get to sleep soon, but I stayed awake long enough to get a (crude) working POC

var post_btns = document.querySelectorAll("div.actions button.create");

if (typeof post_btns != "undefined") {
	for (var p = 0; p < post_btns.length; p++) {
		var post_parent_node = post_btns[p].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
		var poster_avatar = post_parent_node.querySelector("div.topic-avatar div.contents a img.avatar");
		var avatar_src = "";
		var avatar_img = "";
		if (poster_avatar) {
			avatar_src = poster_avatar.getAttribute('src');
			avatar_img = "<img src='" + avatar_src + "' width='20' height='20' />";
		}
		var new_btn_content = post_btns[p].innerHTML + " to " + avatar_img;
		post_btns[p].innerHTML = new_btn_content;
	}
}


(Michael Downey) #17

Love how this looks, but couldn’t get it working (yet) on my site. :slight_smile:


(Mittineague) #18

I put it in a userscript, so it runs after page load. I didn’t try on localhost yet but did you try putting it in “footer”? (i.e. not “head”)

Maybe try the “topic reply”, much less code

var topic_btn = document.querySelector("div#topic-footer-buttons button.create");
if (topic_btn) {
		var new_btn_content = topic_btn.innerHTML + " to Topic";
		topic_btn.innerHTML = new_btn_content;
}


(Michael Downey) #19

No luck on either, but I might be missing something. :slight_smile:


(Thomas Purchas) #20

Try this in the “head” customisation area:

<script>
    Discourse.PostMenuView.reopen({
        didInsertElement : function(){
            var text = this.$('button.create').html();
            
            if (!this.post.get('firstPost')){
                var avatar_url = Discourse.Utilities.avatarUrl(this.post.avatar_template, 20);
                var avatar_img = "<img src='" + avatar_url + "' class='reply-avatar' width='20' height='20' />";
                
                var html = text + ' to ' + avatar_img;
                
            } else {
                var html = text + ' to Topic';
            }
            
            this.$('button.create').html(html);
        }
    });
    
    Discourse.TopicFooterButtonsView.reopen({
        didInsertElement : function(){
            var text = this.$('button.create').html();
            
            var html = text + ' to Topic';
            
            this.$('button.create').html(html);
        }
    })
</script>

and also add this CSS to the same customisation:

.reply-avatar {
    border-radius: 10px;
}

That should put avatars in every “Reply” button, and also changes the last and first (on original post) “Reply” button to “Reply to Topic”.

I’ve never used ember before, so if someone could vet this, and make sure it’s not doing anything really stupid I would be grateful :smile:


(Michael Downey) #21

This worked for me, but it might be nice to add the same to the button below the editor window … not sure how practical that might be given that it’s dependent on which “Reply” button one clicks.