chore: add tooltip and popover

Author: smotornyuk

ckanext/theming/cli.py

@@ -136,7 +136,7 @@ def analyze_theme(ctx: click.Context, theme_name: str | None):
         templates_path = os.path.join(info.path, "templates")
         if os.path.exists(templates_path):
             click.secho("\nTemplate files:", fg="yellow")
-            for root, dirs, files in os.walk(templates_path):
+            for root, _dirs, files in os.walk(templates_path):
                 for file in files:
                     if file.endswith((".html", ".htm", ".xml")):
                         rel_path = os.path.relpath(os.path.join(root, file), info.path)
@@ -146,7 +146,7 @@ def analyze_theme(ctx: click.Context, theme_name: str | None):
         click.echo(click.style(f"Error: Theme '{theme_name}' not found", fg="red"))
         click.echo("Available themes:")
         themes = lib_theme.collect_themes()
-        for name in themes.keys():
+        for name in themes:
             click.echo(f"  - {name}")
 
 
@@ -290,7 +290,7 @@ def check_theme(theme_name: str | None):
             click.echo(click.style("✓ Assets directory exists", fg="green"))
             # List asset files
             asset_files = []
-            for root, dirs, files in os.walk(assets_dir):
+            for root, _dirs, files in os.walk(assets_dir):
                 for file in files:
                     asset_files.append(os.path.relpath(os.path.join(root, file), assets_dir))
             click.echo(f"  Assets: {len(asset_files)} files")

ckanext/theming/lib.py

@@ -22,7 +22,7 @@
 import uuid
 from collections import defaultdict
 from collections.abc import Iterable, Iterator
-from typing import Any, Protocol, cast
+from typing import Any, Protocol
 
 from jinja2.runtime import Macro
 from markupsafe import Markup
@@ -311,11 +311,12 @@ def switch_theme(name: str, config: Any):
 
     next_name = name
     enabled_themes = {next_name}
-    template_paths = []
     while theme := themes.get(next_name):
-        template_paths.append(os.path.join(theme.path, "templates"))
         relpath = os.path.relpath(theme.path, os.path.dirname(__file__))
 
+        if os.path.isdir(os.path.join(theme.path, "templates")):
+            tk.add_template_directory(config, os.path.join(relpath, "templates"))
+
         if os.path.isdir(os.path.join(theme.path, "assets")):
             tk.add_resource(os.path.join(relpath, "assets"), f"theming/{next_name}")
 
@@ -335,14 +336,3 @@ def switch_theme(name: str, config: Any):
     else:
         msg = f"Theme '{next_name}' is not recognised."
         raise CkanConfigurationException(msg)
-
-    log.info("Re-loading templates from %s", template_paths)
-
-    if "plugin_template_paths" in config:
-        template_paths = cast(list[str], config["plugin_template_paths"]) + template_paths
-
-    if extra_template_paths := cast(str, config["extra_template_paths"]):
-        # must be first for them to override defaults
-        template_paths = extra_template_paths.split(",") + template_paths
-
-    config["computed_template_paths"] = template_paths

ckanext/theming/plugin.py

@@ -20,13 +20,12 @@
 
 @tk.blanket.cli
 @tk.blanket.config_declarations
-class ThemingPlugin(ITheme, p.IConfigurer, p.IConfigurable, p.IMiddleware, p.SingletonPlugin):
+class ThemingPlugin(ITheme, p.IConfigurer, p.IMiddleware, p.SingletonPlugin):
     @override
     def update_config(self, config: Any):
-        # tk.add_template_directory(config, "templates")
-        # tk.add_public_directory(config, "public")
-        # tk.add_resource("assets", "theming")
-        pass
+        if config["ckan.ui.theme"]:
+            switch_theme(config["ckan.ui.theme"], config)
+        UIManager.reset()
 
     @override
     def register_themes(self) -> dict[str, Theme]:
@@ -39,12 +38,6 @@ def register_themes(self) -> dict[str, Theme]:
             "pico": Theme(os.path.join(root, "themes/pico"), parent="bare"),
         }
 
-    @override
-    def configure(self, config: Any) -> None:
-        if config["ckan.ui.theme"]:
-            switch_theme(config["ckan.ui.theme"], config)
-        UIManager.reset()
-
     @override
     def make_middleware(self, app: types.CKANApp, config: Any) -> types.CKANApp:
         app.jinja_env.add_extension("jinja2.ext.debug")

ckanext/theming/themes/bare/assets/script.js

@@ -45,7 +45,21 @@
         constructor(el) {
             this.el = el;
         }
-        hide() {
+        close() {
+            this.el.hidden = true;
+        }
+        show() {
+            this.el.hidden = false;
+        }
+        destroy() {
+            this.el.remove();
+        }
+    }
+    class Tooltip {
+        constructor(el) {
+            this.el = el;
+        }
+        close() {
             this.el.hidden = true;
         }
         show() {
@@ -55,6 +69,21 @@
             this.el.remove();
         }
     }
+    class Popover {
+        constructor(el) {
+            this.el = el;
+        }
+        close() {
+            this.el.hidePopover();
+        }
+        show() {
+            document.body.appendChild(this.el);
+            this.el.showPopover();
+        }
+        destroy() {
+            this.el.remove();
+        }
+    }
     const ui = {
         button(content, params = {}) {
             const btn = document.createElement("button");
@@ -137,6 +166,35 @@
             }
             return new Notification(el);
         },
+        tooltip(content, target, props = {}) {
+            if (typeof content !== "string") {
+                throw "Only string tooltips are supported";
+            }
+            const el = document.createElement("span");
+            el.dataset.tooltip = content;
+            target.insertAdjacentElement("afterend", el);
+            return new Tooltip(el);
+        },
+        getTooltip(id) {
+            const el = document.getElementById(id);
+            if (!el) {
+                return null;
+            }
+            return new Tooltip(el);
+        },
+        popover(content, props = {}) {
+            const el = document.createElement("div");
+            el.popover = "auto";
+            el.append(content);
+            return new Popover(el);
+        },
+        getPopover(id) {
+            const el = document.getElementById(id);
+            if (!el) {
+                return null;
+            }
+            return new Popover(el);
+        },
     };
     ckan.sandbox.setup((sb) => {
         sb.ui = sb.ui || {};

ckanext/theming/themes/bare/assets/script.ts

@@ -58,7 +58,7 @@
 
   class Notification implements INotification {
     constructor(public el: HTMLElement) {}
-    hide() {
+    close() {
       this.el.hidden = true;
     }
     show() {
@@ -68,6 +68,33 @@
       this.el.remove();
     }
   }
+
+  class Tooltip implements ITooltip {
+    constructor(public el: HTMLElement) {}
+    close() {
+      this.el.hidden = true;
+    }
+    show() {
+      this.el.hidden = false;
+    }
+    destroy() {
+      this.el.remove();
+    }
+  }
+  class Popover implements IPopover {
+    constructor(public el: HTMLElement) {}
+    close() {
+      this.el.hidePopover();
+    }
+    show() {
+      document.body.appendChild(this.el);
+      this.el.showPopover();
+    }
+    destroy() {
+      this.el.remove();
+    }
+  }
+
   const ui: IUi = {
     button(content: any, params = {}) {
       const btn = document.createElement("button");
@@ -173,6 +200,39 @@
       }
       return new Notification(el);
     },
+
+    tooltip(content, target, props = {}) {
+      if (typeof content !== "string") {
+        throw "Only string tooltips are supported";
+      }
+      const el = document.createElement("span");
+      el.dataset.tooltip = content;
+      target.insertAdjacentElement("afterend", el);
+
+      return new Tooltip(el);
+    },
+
+    getTooltip(id) {
+      const el = document.getElementById(id);
+      if (!el) {
+        return null;
+      }
+      return new Tooltip(el);
+    },
+    popover(content, props = {}) {
+      const el = document.createElement("div");
+      el.popover = "auto";
+      el.append(content);
+      return new Popover(el);
+    },
+
+    getPopover(id) {
+      const el = document.getElementById(id);
+      if (!el) {
+        return null;
+      }
+      return new Popover(el);
+    },
   };
 
   ckan.sandbox.setup((sb) => {

ckanext/theming/themes/bare/assets/style.css

@@ -26,6 +26,13 @@ img {
     max-width: 100%;
 }
 
+:hover+[data-tooltip]:after {
+    content: attr(data-tooltip);
+    padding: 0.5rem;
+    background: #fff;
+    position: absolute;
+}
+
 #account {
     background: var(--account-bg);
     text-align: right;

ckanext/theming/themes/bare/templates/macros/ui.html

@@ -103,3 +103,5 @@
 {% set search_form = component.search_form %}
 {% set facet_group = component.facet_group %}
 {% set facet_item = component.facet_item %}
+{% set activity_stream = component.activity_stream %}
+{% set activity_item = component.activity_item %}

ckanext/theming/themes/bare/templates/macros/ui/component.html

@@ -70,3 +70,14 @@
         {{ ui.divider() }}
     {%- endcall %}
 {%- endmacro %}
+
+{%- macro activity_stream(content) -%}
+    {{ ui.listing(content) }}
+{%- endmacro %}
+
+
+{%- macro activity_item(content, activity) -%}
+    <div>
+        {{ content }}
+    </div>
+{%- endmacro %}

ckanext/theming/themes/bare/templates/macros/ui/element.html

@@ -1,5 +1,5 @@
 {%- macro badge(content) -%}
-    <mark {{ ui.util.attrs(kwargs) }}>{{ content }}</mark>
+    <sup><mark {{ ui.util.attrs(kwargs) }}>{{ content }}</mark></sup>
 {%- endmacro %}
 
 {%- macro button(content, style="primary", type="button") -%}

ckanext/theming/themes/bare/templates/package/activity_stream.html

@@ -1,17 +1,10 @@
-{% extends "page.html" %}
+{% extends "package/read.html" %}
 
-{%- block primary_content_inner %}
-    <h1>{{ _('Activity Stream') }}</h1>
-
-    {%- if activities %}
-        <ul>
-            {%- for activity in activities %}
-                <li>{{ activity.activity_type }} - {{ ui.datetime(activity.timestamp) }}</li>
-            {%- endfor %}
-        </ul>
+{%- block breadcrumb_content -%}
+    {{ super() }}
+    {{ ui.breadcrumb_item(_("Activity Stream"), h.url_for("activity.package_activity", id=pkg_dict.name)) }}
+{%- endblock %}
 
-        {{ ui.pagination(page.page, page.last_page, page._url_generator) }}
-    {%- else %}
-        <p>{{ _('No activity') }}</p>
-    {%- endif %}
+{%- block primary_content_inner %}
+    {%- include "snippets/activity_stream.html" -%}
 {%- endblock %}