Theme component to use "Category icons" in "Events plugin" calendar

theme
#1

Discourse-events-calendar-icons

Repository: https://framagit.org/oca/discourse-events-calendar-icons.git

This component requires both:

Before / After:

calendar-with-bullets
calendar-with-bullets1112×675 35.4 KB

calendar-with-icons
calendar-with-icons1112×676 37.1 KB

It removes the bullet in the calendar view and replaces it with the category icon defined in the [Category icons component] settings. If there is no category icon, the bullet is still removed as one can see for Vendredi (Friday) 3rd.

How to install (with a trap !)

In order for it to work, I’ve needed to “force” the display of the category-icon-widget. I’ll ask its author to inject the modification in the source code but before that, there is some minor editing to do.

  • Install the component as usual. How do I install a Theme or Theme Component?
  • Edit the Category icons component
    • Go to https://myforum.tld/admin/customize/themes/ and choose: Category Icons
    • Click: Modify CSS/HTML and Ok the warning
    • Select: Header and look for: api.createWidget("category-icon", { near the end of the file.
    • Replace the method by:
      api.createWidget("category-icon", {
    tagName: "div.category-icon-widget",
    html(attrs) {
      let iconItem = getIconItem(attrs.category.slug);
      let force_display = ('force_display' in attrs);
      if(iconItem && (!attrs.category.parent_category_id || force_display)) {
        let itemColor = iconItem[2] ? `color: ${iconItem[2]}` : "";
        let itemIcon = iconItem[1] != '' ? iconNode(iconItem[1]) : "";
        return h("span.category-icon", { "style": itemColor }, itemIcon);
      }
    }
  });
    This change adds a way to force the icon to be displayed even if it is not from a top level category.
12 Likes
Category icons component
#2

Nice work @oca!

I think you can avoid the hack with the category icons component by including the {{category-link}} helper instead of mounting the category-icons widget. I tried locally with

{{category-link event.topic.category hideParent="true"}}

and it works well, it needs some styling adjustments to hide the category label, but otherwise, the icons show up for parent and non-parent categories.

4 Likes