Fast template improvements (#2484)

* carved out improvements from larger PR

* make main_layout buttons work

* fix bug when users exit fullscreen via ESC

* update documentation

Co-authored-by: Marc Skov Madsen <masma@orsted.dk>

examples/reference/templates/FastGridTemplate.ipynb

@@ -30,36 +30,59 @@
     "\n",
     "#### Parameters:\n",
     "\n",
-    "In addition to the four different areas we can populate, the `FastGridTemplate` declares a few variables to configure the layout:\n",
+    "In addition to the four different areas we can populate, the `FastGridTemplate` also provides the parameters below:\n",
+    "\n",
+    "* **`site`** (str): Name of the site. Will be shown in the header. Default is '', i.e. not shown.\n",
+    "* **`site_url`** (str): Url of the site and logo. Default is \"/\".\n",
+    "* **`logo`** (str): URI of logo to add to the header (if local file, logo is base64 encoded as URI).\n",
+    "* **`title`** (str): A title to show in the header. Also added to the document head meta settings and as the browser tab title.\n",
+    "* **`favicon`** (str): URI of favicon to add to the document head (if local file, favicon is base64 encoded as URI).\n",
+    "* **`sidebar_footer`** (str): Can be used to insert additional HTML. For example a menu, some additional info, links etc.\n",
+    "* **`config`** (TemplateConfig): Contains configuration options similar to `pn.config` but applied to the current Template only. (Currently only `css_files` is supported)\n",
+    "* **`busy_indicator`** (BooleanIndicator): Visual indicator of application busy state.\n",
+    "\n",
+    "For configuring the **grid**\n",
     "\n",
     "* **`cols`** (dict): Number of columns in the grid for different display sizes (`default={'lg': 12, 'md': 10, 'sm': 6, 'xs': 4, 'xxs': 2}`)\n",
     "* **`breakpoints`** (dict): Sizes in pixels for various layouts (`default={'lg': 1200, 'md': 996, 'sm': 768, 'xs': 480, 'xxs': 0}`)\n",
     "* **`row_height`** (int, default=150): Height per row in the grid\n",
     "* **`dimensions`** (dict): Minimum/Maximum sizes of cells in grid units (`default={'minW': 0, 'maxW': 'Infinity', 'minH': 0, 'maxH': 'Infinity'}`)\n",
     "* **`prevent_collision`** (bool, default=Flase): Prevent collisions between grid items.\n",
     "* **`save_layout`** {bool, default=False): Save layout changes to localStorage.\n",
-    "* **`main_max_width`** (str): The maximum width of the main area. For example '800px' or '80%'. If the string is '' (default) no max width is set.\n",
-    "* **`sidebar_width`** (int): The width of the sidebar in pixels. Default is 330.\n",
-    "* **`sidebar_footer`** (str): Can be used to insert additional HTML. For example a menu, some additional info, links etc.\n",
-    "* **`enable_theme_toggle`** (boolean): If `True` a switch to toggle the Theme is shown. Default is `True`.\n",
-    "* **`busy_indicator`** (BooleanIndicator): Visual indicator of application busy state.\n",
     "\n",
-    "Finally the `FastListTemplate` provides parameters for branding and styling:\n",
+    "For **styling** you can use\n",
     "\n",
-    "* **`title`** (str): A title to show in the header. Also added to the document head meta settings and as the browser tab title.\n",
-    "* **`site`** (str): Name of the site. Will be shown in the header. Default is '', i.e. not shown.\n",
-    "* **`site_url`** (str): Url of the site and logo. Default is \"/\".\n",
     "* **`theme`** (Theme): A Theme class (available in `panel.template`. One of `DefaultTheme` or `DarkTheme`). \n",
     "    - For convenience you can provide \"default\" or \"dark\" string to the constructor.\n",
     "    - If you add `?theme=default` or `?theme=dark` in the url this will set the theme unless explicitly declared\n",
-    "* **`favicon`** (str): URI of favicon to add to the document head (if local file, favicon is base64 encoded as URI).\n",
-    "* **`logo`** (str): URI of logo to add to the header (if local file, logo is base64 encoded as URI).\n",
+    "* **`enable_theme_toggle`** (boolean): If `True` a switch to toggle the Theme is shown. Default is `True`.\n",
+    "* **`background_color`** (str): Optional body background color override.\n",
+    "* **`neutral_color`** (str): Optional body neutral color override.\n",
+    "* **`accent_base_color`** (str): Optional body accent base color override.\n",
     "* **`header_background`** (str): Optional header background color override.\n",
     "* **`header_color`** (str): Optional header text color override.\n",
+    "* **`header_neutral_color`** (str): Optional header neutral color override.\n",
     "* **`header_accent_base_color`** (str): Optional header accent base color override.\n",
-    "* **`accent_base_color`** (str): Optional body accent base color override.\n",
-    "* **`config`** (TemplateConfig): Contains configuration options similar to `pn.config` but applied to the current Template only. Currently only `css_files` is supported.\n",
+    "* **`corner_radius`** (str): The corner radius applied to controls.\n",
+    "* **`font`** (str): A font url to import.\n",
+    "* **`font_url`** (str): A font url to import.\n",
+    "* **`shadow`** (str): Optional shadow override. Whether or not to apply shadow.\n",
+    "* **`main_layout`** (str): What to wrap the main components into. Options are '' (i.e. none) and 'card' (Default). Could be extended to Accordion, Tab etc. in the future.\n",
+    "\n",
+    "For **layout** you can use\n",
+    "\n",
+    "* **`sidebar_width`** (int): The width of the sidebar in pixels. Default is 330.\n",
+    "* **`main_max_width`** (str): The maximum width of the main area. For example '800px' or '80%'. If the string is '' (default) no max width is set.\n",
+    "\n",
+    "For **meta** and **base** values you can use\n",
     "\n",
+    "* **`meta_description`** (str): A meta description to add to the document head for search engine optimization. For example 'P.A. Nelson'.\n",
+    "* **`meta_keywords`** (str): Meta keywords to add to the document head for search engine optimization.\n",
+    "* **`meta_author`** (str): A meta author to add to the the document head for search engine optimization. For example 'P.A. Nelson'.\n",
+    "* **`meta_refresh`** (str): A meta refresh rate to add to the document head. For example '30' will instruct the browser to refresh every 30 seconds. Default is '', i.e. no automatic refresh.\n",
+    "* **`meta_viewport`** (str): A meta viewport to add to the header.\n",
+    "* **`base_url`** (str): Specifies the base URL for all relative URLs in a page. Default is '', i.e. not the domain.\n",
+    "* **`base_target`** (str): Specifies the base Target for all relative URLs in a page. Default is _self.\n",
     "\n",
     "\n",
     "________"

examples/reference/templates/FastListTemplate.ipynb

@@ -30,27 +30,51 @@
     "\n",
     "#### Parameters:\n",
     "\n",
-    "In addition to the four different areas we can populate, the `FastListTemplate` also provide additional parameters:\n",
+    "In addition to the four different areas we can populate, the `FastListTemplate` also provides the parameters below:\n",
     "\n",
-    "* **`title`** (str): A title to show in the header. Also added to the document head meta settings and as the browser tab title.\n",
     "* **`site`** (str): Name of the site. Will be shown in the header. Default is '', i.e. not shown.\n",
     "* **`site_url`** (str): Url of the site and logo. Default is \"/\".\n",
+    "* **`logo`** (str): URI of logo to add to the header (if local file, logo is base64 encoded as URI).\n",
+    "* **`title`** (str): A title to show in the header. Also added to the document head meta settings and as the browser tab title.\n",
+    "* **`favicon`** (str): URI of favicon to add to the document head (if local file, favicon is base64 encoded as URI).\n",
+    "* **`sidebar_footer`** (str): Can be used to insert additional HTML. For example a menu, some additional info, links etc.\n",
+    "* **`config`** (TemplateConfig): Contains configuration options similar to `pn.config` but applied to the current Template only. (Currently only `css_files` is supported)\n",
+    "* **`busy_indicator`** (BooleanIndicator): Visual indicator of application busy state.\n",
+    "\n",
+    "For **styling** you can use\n",
+    "\n",
     "* **`theme`** (Theme): A Theme class (available in `panel.template`. One of `DefaultTheme` or `DarkTheme`). \n",
     "    - For convenience you can provide \"default\" or \"dark\" string to the constructor.\n",
     "    - If you add `?theme=default` or `?theme=dark` in the url this will set the theme unless explicitly declared\n",
-    "* **`favicon`** (str): URI of favicon to add to the document head (if local file, favicon is base64 encoded as URI).\n",
-    "* **`logo`** (str): URI of logo to add to the header (if local file, logo is base64 encoded as URI).\n",
-    "* **`sidebar_footer`** (str): Can be used to insert additional HTML. For example a menu, some additional info, links etc.\n",
     "* **`enable_theme_toggle`** (boolean): If `True` a switch to toggle the Theme is shown. Default is `True`.\n",
+    "* **`background_color`** (str): Optional body background color override.\n",
+    "* **`neutral_color`** (str): Optional body neutral color override.\n",
+    "* **`accent_base_color`** (str): Optional body accent base color override.\n",
     "* **`header_background`** (str): Optional header background color override.\n",
     "* **`header_color`** (str): Optional header text color override.\n",
+    "* **`header_neutral_color`** (str): Optional header neutral color override.\n",
     "* **`header_accent_base_color`** (str): Optional header accent base color override.\n",
-    "* **`accent_base_color`** (str): Optional body accent base color override.\n",
-    "* **`config`** (TemplateConfig): Contains configuration options similar to `pn.config` but applied to the current Template only. (Currently only `css_files` is supported)\n",
-    "* **`main_max_width`** (str): The maximum width of the main area. For example '800px' or '80%'. If the string is '' (default) no max width is set.\n",
-    "* **`busy_indicator`** (BooleanIndicator): Visual indicator of application busy state.\n",
+    "* **`corner_radius`** (str): The corner radius applied to controls.\n",
+    "* **`font`** (str): A font url to import.\n",
+    "* **`font_url`** (str): A font url to import.\n",
+    "* **`shadow`** (str): Optional shadow override. Whether or not to apply shadow.\n",
+    "* **`main_layout`** (str): What to wrap the main components into. Options are '' (i.e. none) and 'card' (Default). Could be extended to Accordion, Tab etc. in the future.\n",
+    "\n",
+    "For **layout** you can use\n",
     "\n",
     "* **`sidebar_width`** (int): The width of the sidebar in pixels. Default is 330.\n",
+    "* **`main_max_width`** (str): The maximum width of the main area. For example '800px' or '80%'. If the string is '' (default) no max width is set.\n",
+    "\n",
+    "For **meta** and **base** values you can use\n",
+    "\n",
+    "* **`meta_description`** (str): A meta description to add to the document head for search engine optimization. For example 'P.A. Nelson'.\n",
+    "* **`meta_keywords`** (str): Meta keywords to add to the document head for search engine optimization.\n",
+    "* **`meta_author`** (str): A meta author to add to the the document head for search engine optimization. For example 'P.A. Nelson'.\n",
+    "* **`meta_refresh`** (str): A meta refresh rate to add to the document head. For example '30' will instruct the browser to refresh every 30 seconds. Default is '', i.e. no automatic refresh.\n",
+    "* **`meta_viewport`** (str): A meta viewport to add to the header.\n",
+    "* **`base_url`** (str): Specifies the base URL for all relative URLs in a page. Default is '', i.e. not the domain.\n",
+    "* **`base_target`** (str): Specifies the base Target for all relative URLs in a page. Default is _self.\n",
+    "\n",
     "________"
    ]
   },

panel/template/fast/base.py

@@ -3,7 +3,6 @@
 import param
 
 from ...io.state import state
-from ...widgets import Tabulator
 from ..base import BasicTemplate
 from ..react import ReactTemplate
 from ..theme import THEMES, DefaultTheme
@@ -12,18 +11,45 @@
 
 
 class FastBaseTemplate(BasicTemplate):
+
     accent_base_color = param.String(doc="""
-        Accent color override.""")
+        Optional body accent color override.""")
+
+    background_color = param.String(doc="""
+        Optional body background color override.""")
+
+    corner_radius = param.Integer(default=3, bounds=(0,25), doc="""
+        The corner radius applied to controls.""")
+
+    font = param.String(doc="""
+        The font to use.""")
+
+    font_url = param.String(doc="""
+        A font url to import.""")
+
+    header_neutral_color = param.String(doc="""
+        Optional header neutral color override.""")
 
     header_accent_base_color = param.String(doc="""
         Optional header accent color override.""")
 
+    neutral_color = param.String(doc="""
+        Optional body neutral color override.""")
+
     theme_toggle = param.Boolean(default=True, doc="""
         If True a switch to toggle the Theme is shown.""")
 
+    shadow = param.Boolean(doc="""
+        Optional shadow override. Whether or not to apply shadow.""")
+
     sidebar_footer = param.String("", doc="""
         A HTML string appended to the sidebar""")
 
+    # Might be extended to accordion or tabs in the future
+    main_layout = param.Selector(default="card", label="Layout", objects=["", "card"], doc="""
+        What to wrap the main components into. Options are '' (i.e. none) and 'card' (Default).
+        Could be extended to Accordion, Tab etc. in the future.""")
+
     _css = [
         _ROOT / "css/fast_root.css",
         _ROOT / "css/fast_bokeh.css",
@@ -45,12 +71,6 @@ class FastBaseTemplate(BasicTemplate):
         'bundle': False
     }
 
-    _modifiers = {
-        Tabulator: {
-            'theme': 'fast'
-        }
-    }
-
     __abstract = True
 
     def __init__(self, **params):
@@ -64,6 +84,8 @@ def __init__(self, **params):
 
         super().__init__(**params)
         theme = self._get_theme()
+        if "background_color" not in params:
+            self.background_color = theme.style.background_color
         if "accent_base_color" not in params:
             self.accent_base_color = theme.style.accent_base_color
         if "header_color" not in params:
@@ -72,6 +94,18 @@ def __init__(self, **params):
             self.header_accent_base_color = theme.style.header_accent_base_color
         if "header_background" not in params:
             self.header_background = theme.style.header_background
+        if "neutral_color" not in params:
+            self.neutral_color = theme.style.neutral_color
+        if "header_neutral_color" not in params:
+            self.header_neutral_color = theme.style.header_neutral_color
+        if "corner_radius" not in params:
+            self.corner_radius = theme.style.corner_radius
+        if "font" not in params:
+            self.font = theme.style.font
+        if "font_url" not in params:
+            self.font_url = theme.style.font_url
+        if "shadow" not in params:
+            self.shadow = theme.style.shadow
 
     @staticmethod
     def _get_theme_from_query_args():
@@ -84,14 +118,22 @@ def _get_theme_from_query_args():
     def _update_vars(self):
         super()._update_vars()
         style = self._get_theme().style
+        style.background_color = self.background_color
         style.accent_base_color = self.accent_base_color
         style.header_color = self.header_color
         style.header_background = self.header_background
         style.header_accent_base_color = self.header_accent_base_color
+        style.neutral_color = self.neutral_color
+        style.header_neutral_color = self.header_neutral_color
+        style.corner_radius = self.corner_radius
+        style.font = self.font
+        style.font_url = self.font_url
+        style.shadow = self.shadow
         self._render_variables["style"] = style
         self._render_variables["theme_toggle"] = self.theme_toggle
         self._render_variables["theme"] = self.theme.__name__[:-5].lower()
         self._render_variables["sidebar_footer"] = self.sidebar_footer
+        self._render_variables["main_layout"] = self.main_layout
 
 
 class FastGridBaseTemplate(FastBaseTemplate, ReactTemplate):

panel/template/fast/grid/dark.css

@@ -2,7 +2,6 @@
 #sidebar {
   border-right: 2px solid var(--neutral-fill-rest);
 }
-
 .bk.card-header {
   color: var(--neutral-foreground-rest);
   background-color: var(--neutral-fill-active) !important;

panel/template/fast/grid/default.css

@@ -1,13 +1,4 @@
 /* fast default.css */
-#header {
-  box-shadow: 2px 2px 10px silver;
-}
-
-#sidebar {
-  background-color: white;
-  box-shadow: 2px 2px 10px silver;
-}
-
 .react-grid-item{
-  background-color:  white !important;
+  background-color:  var(--background-color) !important;
 }

panel/template/fast/grid/fast_grid_template.css

@@ -392,3 +392,7 @@ html {
 .react-grid-item > fast-card {
   margin: 0px;
 }
+div.pn-wrapper {
+  position: relative;
+  background: var(--background-color)
+}