Improving discourse-layout widgets

[nolo]

Feature

Improving discourse-layout widgets

Description

I’ve been using the discourse-layout plugin on several setups now. This is a collection of feedback on the widgets.

Use Case

Improve the overall ease of use and reduce custom css and html modifications to make the widgets look of a piece.

Here’s a screenshot of a setup I’m using with the plugin. The widgets in the sidebar are in order:

• Category List
• Profile
• Custom Html
• Topics List

Category List

This works really well out of the box! The only thing I adapt a bit is making the checkmark icon on unread topics either smaller or hiding it. It feels quite big right now and seeking too much attention.

Profile

I adapted the code to have a direct link to Assigned (renamed Leads here). I think the widget would profit a lot if one could list specific links to the user profile in the widget setting. It would be superb if it would also show notification bubbles for Messages etc… but that might be a lot of coding?

Would also be good if this widget is not rendered when no user is registered.

Custom Html

I repeatedly use this to make a tag-based navigation menu. I think it would be great to generally have a Tag List widget to use with the plugin and have a similar styling as the Category List. Right now this approach needs quite some custom css to make it look of a piece (as you can see on the screenshot, where it’s not done yet).

As I hand-coded the tag icons here, that’s another thing I noticed about the Category List: It’s not aware of category icons. That would also be a helpful feature.

I also wondered if the form field for the custom html in the widget settings could be bigger? That would allow for some quick hacks right from the settings. Now it’s just a single line, so you practically have to copy/paste from a separate file.

Topics List

That’s a great widget! Would be great to have it follow the same styling as the Category List as well. Right now it just changes the cursor when hovering over a link.
The List title (here in red) is rendered as a link, but without reference. That is misleading and would be good to have it link to the category by default.

Overall

My ideal view of how the widgets could work: have a widget for

• user profile
• custom html
• lists

And have the list widget offer a title and list entries, that can be links to categories, topics, tags or custom html.

For this the plugin would need to allow using multiple widgets of the same type. But that could offer quite some creativity I think. Being able to name a widget and add it to the layouts menu.

[angus]

Thanks for this great feedback.

@nolo

The only thing I adapt a bit is making the checkmark icon on unread topics either smaller or hiding it.

I actually recently removed the “clear unread” button (aka the “checkmark icon”), as I switched from “unread” to “latest” which is a combination of new and unread (see here). The “clear” button doesn’t make sense in that context. The user can clear unread and new seperately in individual categories.

@nolo

I think the widget would profit a lot if one could list specific links to the user profile in the widget setting

I agree. Would you be willing to work on a PR to do that? it’s relatively straightfoward:

1. Add a “enum” type setting in the theme component, with the “choices” being a list of possible profile links (see a description of enum settings in discourse/config/site_settings.yml)

2. Map the value of the enum setting to the relevant links on widget render

@nolo

It would be superb if it would also show notification bubbles for Messages etc… but that might be a lot of coding?

Yeah that would be ideal, but more of a “do later” task I reckon. Handling profile links properly is the first step perhaps.

@nolo

Would also be good if this widget is not rendered when no user is registered.

You can actually do this already. If you set the “Group” access for the widget to “trust level 0” (i.e. a proxy for logged in users). I think the move here is probably to make that use of group access a little clearer. I might make “Users” an explict proxy of “trust level 0” and make this clear in the docs.

As to guest handling in the widget itself, there might be some situations in which an admin wants the widget to appear for guests. There is actually pre-existing handling for this in the component, but it wasn’t ported over properly from the old plugin version of this. I’ve fixed that

Fix guest locale string

@nolo

I repeatedly use this to make a tag-based navigation menu. I think it would be great to generally have a Tag List widget to use with the plugin and have a similar styling as the Category List. Right now this approach needs quite some custom css to make it look of a piece (as you can see on the screenshot, where it’s not done yet).

I think there’s something there, but we’d need to refine that idea a bit, as tag lists tend to be a lot larger and more dynamic than category lists. Perhaps an admin-dfined list, or user-defined list of tags they’re watching?

@nolo

As I hand-coded the tag icons here, that’s another thing I noticed about the Category List: It’s not aware of category icons. That would also be a helpful feature.

Yes good point. I’ll add that to the category list widget shortly.

@nolo

I also wondered if the form field for the custom html in the widget settings could be bigger? That would allow for some quick hacks right from the settings. Now it’s just a single line, so you practically have to copy/paste from a separate file.

Yeah, we’re somewhat constrained by the Discourse settings structure here. There isn’t a “textfield” type setting in discourse. We should perhaps petition the discourse team for one.

@nolo

That’s a great widget! Would be great to have it follow the same styling as the Category List as well. Right now it just changes the cursor when hovering over a link.
The List title (here in red) is rendered as a link, but without reference. That is misleading and would be good to have it link to the category by default.

Yes, good feedback. I’ll try and address some of those a bit later in the week.

@nolo

And have the list widget offer a title and list entries, that can be links to categories, topics, tags or custom html.

I understand where you’re coming from here, but generally it’s best to keep these things seperate as they’re quite different structures in discourse. Technically speaking (as opposed to the UX) a generic “lists widget” doesn’t make sense.

[nolo]

@angus

You can actually do this already. If you set the “Group” access for the widget to “trust level 0”

Ah yes, thanks for pointing this out!

@angus

I think there’s something there, but we’d need to refine that idea a bit, as tag lists tend to be a lot larger and more dynamic than category lists. Perhaps an admin-defined list, or user-defined list of tags they’re watching?

Yes, I just thought of a navigation menu with a view selected tags, like in the screenshots above. There would be many more tags on the site, but I put the 4 i used in the menu in a specific tag group to structure the site. I guess there’s much more to tags that I have not figured out yet, but I like to use some tags instead of nesting categories. But I don’t know how many people also do that and it could just be a limited use case to have these functional tag menus.

@angus

There isn’t a “textfield” type setting in discourse. We should perhaps petition the discourse team for one.

I saw this in the settings of the Versatile Banner TC:

@angus

Technically speaking (as opposed to the UX) a generic “lists widget” doesn’t make sense.

Well yes, I’m all ignorant of how things actually work under the hood… I was just thinking in terms of presentation and style.

@angus

Would you be willing to work on a PR to do that? it’s relatively straightfoward

About the straightforward part… there’s still people in this world that never did a PR on github
I’m more than willing to learn it now for Discourse theming and it might even be an easy enough first step… just better not wait for my request if you want to get ahead with it!

[angus]

@nolo

I saw this in the settings of the Versatile Banner TC:

Oh interesting. New to me. I’ve made the custom html field a textarea field

@nolo

But I don’t know how many people also do that and it could just be a limited use case to have these functional tag menus.

I think people often have a handful of tags they like to use regularly. I think the first version of this would be an admin-defined list of tags to appear in a sidebar widget.

@nolo

I’m more than willing to learn it now for Discourse theming and it might even be an easy enough first step… just better not wait for my request if you want to get ahead with it!

Give it a shot I’m happy to wait and also happy to give you feedback on any attempt. We all gotta start somewhere.