Two new plugin outlets - user_activity_bottom and user_menu_glyphs

Feature
1

In the midst of working on the voting plugin, I had an idea for a way to show users the topics they’ve voted on. To keep with the current UX, I’d like to add another feed at the bottom of the user activity menu. This would be similar to Bookmarks.

Profile_-_joebuhlig_-_Discourse_Meta.png740×814 106 KB

At the same time, if we make that option available, it would make sense from a users standpoint to put another glyph in the user menu to go alongside.

Profile_-_joebuhlig_-_Discourse_Meta.png744×238 24 KB

From what I can tell, this would require the addition of two plugin outlets. I’d be more than willing to create the PRs for these, but is there support for these? Would anyone else have an interest in them?

6 Likes
2

I’m not sure what you mean by user_menu_glyphs as a plugin-outlet.

Font Awesome glyphs can be specified in the hbs files eg.

<i class="fa fa-[icon name of your choice here]"></i>
3

He is talking about a way to add a glyph in that menu. Currently, you’d have to overwrite the entire template.

4

What he said. :wink:

5

I may need more coffee but I’m still not getting where a user_menu_glyphs plugin-outlet would go.

    {{#if showBookmarks}}
    <li>
      {{#link-to 'userActivity.bookmarks'}}
        <i class="glyph fa fa-bookmark"></i>{{i18n 'user_action_groups.3'}}
      {{/link-to}}
    </li>
    {{/if}}
  </ul>

  {{#if viewingSelf}}
    <div class='user-archive'>
      {{d-button action="exportUserArchive" label="user.download_archive" icon="download"}}
    </div>
  {{/if}}

</section>

I’m seeing CSS rules for .glyph
display: none; and position: absolute;

Maybe CSS to restore them?

6

Just for the record, I liked the initial post because I’m in support for this. I could see multiple ways of utilizing those locations. Private Profile Notes, for example, would benefit from the outlet on the User Page.

@Mittineague, above the {{#if viewingSelf}} on the user page, and before bookmarks on the user menu (or after depending if the CSS is using floats).

So there would be two outlets, one specifically for the User Page and one specifically for adding an icon/glyph only link on the User Menu.

User Page Location:
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/user/activity.hbs#L28-L32

User Menu Location:
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/user-menu.hbs#L11-L20

7

I typically assume that when I ask a question about functionality that people who like it are in support of it. I suppose the voting plugin that sparked this question would eventually help with that. But now we’re getting a bit too meta. :wink:

Here’s what I would propose. For user_activity_bottom, it should go after the bookmarks link. That means it would go directly before the highlighted line:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/user/activity.hbs#L26

And for user_menu_glyphs, it should be before the other glyphs in the menu. I wouldn’t want to disrupt the current expectation for menu items. That means it would go before this line:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/user-menu.hbs#L12

1 Like
8

Ah, OK, thanks for being patient, I got it now (I was misconstruing “user_menu” to mean “activity_menu” despite the screen shot plain as day) .
lol, I’ve aslo had a couple more cups of coffee

And I agree both of these could come in handy

1 Like
9

Since there’s a bit of interest shown:

https://github.com/discourse/discourse/pull/4043

https://github.com/discourse/discourse/pull/4044

3 Likes
10

Looking I’m wondering if a third would be in order.

The user.hbs already has two plugin-outlets - “primary” and “secondary” - but maybe another in the “user-nav”?

The only negative I can think of is that it could make things a bit cramped.

      {{#if model.can_edit}}
        <li>{{#link-to 'preferences'}}{{fa-icon "cog"}}{{i18n 'user.preferences'}}{{/link-to}}</li>
      {{/if}}
{{here ?}}
    </ul>
11

Do you have a use case for that one? I’m not objecting. I’m just curious what would go there. It might be overkill.

12

No, I don’t have a use for it (not yet anyway).
And the “secondary” would work in a pinch I guess.
And having both would likely be over-kill.

I guess what I missing is understanding the “semantics” of one over the other.

prof-oulets-png.PNG1012×452 40.7 KB

13

Now that I’m looking at it, the user-nav seems to be geared towards information about the user and the other about topics. I could see the desire for both.

The UX designer in me starts to wonder about placement though. Summaries and preferences are typically at the beginning or end of lists. Would it make more sense to put it between Badges and Summary?

14

Yes, I think it would make more sense there.
But I’m thinking too that it might be foolish to start adding plugin-outlets before there is an actual call for them to be there.

It seems a bit odd that the user_menu has “bookmarks”, “messages” and “preferences” together.
Yet on the Activity page they are in different places.

Decisions, decisions.

I guess in your use - Voting - they are to do with posts so the user_activity_bottom does feel like the better choice.

15

Agreed. I’m willing to sit on this until someone calls for it.

16

Sam had a good question on GitHub about the user-menu-glyphs add. What happens when there is a long username like “WWWWWWWWWWWWW”. I used that username in the DOM and this is what it looks like before the extra glyph:

Discourse_Meta.png696×218 19.3 KB

If you add a glyph to the list with the same username:

However, changing the padding on the a tags in that menu from 0.5em to 0.4em makes it look like this:

There’s a little difference in spacing between icons and I’m not sure I like making things tighter than they already are. I currently don’t have a solution in mind otherwise.

17

Yeah, that’s going to be a problem regardless, though I don’t see a lot of people tying into that specific spot (although it’d be cool). One alternative, is to force the outlet to be below the current glyphs, so those who do choose to, know they are going to be extending that user menu.

That also means anyone without any said plugins then wouldn’t get that extra hit.

Something like

      <li class='glyphs'>
        {{d-link path=bookmarksPath title="user.bookmarks" icon="bookmark"}}
        {{#if siteSettings.enable_private_messages}}
          {{d-link path=messagesPath title="user.private_messages" icon="envelope"}}
        {{/if}}
        {{#if showEnableAnon}}
          {{d-link action="toggleAnon" title="switch_to_anon" icon="user-secret"}}
        {{/if}}
        {{d-link path=preferencesPath title="user.preferences" icon="gear"}}
        <div class="glyph-outlet">{{plugin-outlet "user-menu-glyphs"}}</div>
      </li>

Which producces

And this way, it is only instances that install plugins that add said glyph that would get this behavior, but at least it can easily support 3 of them.

18

The more I look at this, the more I think we should skip it. It looks pretty tacky with an extra row when it appears that it will fit with the others. And if we shrink the padding in the main row, it only allows for one extra glyph. That means plugins could create issues with each other.

And if we think about it, the three glyphs that are there don’t cover all the options from the user activity page anyway. They are simply the most common (and standard) links. I’m not sure many plugins will hit that status. As much as I’d like to think the voting plugin is that important, it’s likely not to the majority of users. One extra click from the activity page isn’t a big deal.

Sam already merged the PR for user-activity-bottom. I’m going to run with that for now and if we can find a better way in the user menu, I’ll jump on it. But I’m not sure it’s worth it.

4 Likes
19

That’s cool. As I don’t have an immediate need for it right this moment either. :slightly_smiling:

20

IIRC when that UI was being reworked there was some concern about limited real estate and a desire to have things minimal.

Also, care must be taken with styling to avoid touch area problems.

2 Likes