Add logo option for BaseTemplates (#1608)

holoviz · Oct 5, 2020 · e6ca798 · e6ca798
1 parent 186b16b
commit e6ca798
Show file tree

Hide file tree

Showing 14 changed files with 100 additions and 14 deletions.
diff --git a/examples/reference/templates/Bootstrap.ipynb b/examples/reference/templates/Bootstrap.ipynb
@@ -35,6 +35,7 @@
     "* **`busy_indicator`** (BooleanIndicator): Visual indicator of application busy state.\n",
     "* **`header_background`** (str): Optional header background color override.\n",
     "* **`header_color`** (str): Optional header text color override.\n",
+    "* **`logo`** (str): URI of logo to add to the header (if local file, logo is base64 encoded as URI).\n",
     "* **`theme`** (Theme): A Theme class (available in `panel.template.theme`)\n",
     "* **`title`** (str): A title to show in the header.\n",
     "\n",

diff --git a/examples/reference/templates/GoldenLayout.ipynb b/examples/reference/templates/GoldenLayout.ipynb
@@ -35,6 +35,7 @@
     "* **`busy_indicator`** (BooleanIndicator): Visual indicator of application busy state.\n",
     "* **`header_background`** (str): Optional header background color override.\n",
     "* **`header_color`** (str): Optional header text color override.\n",
+    "* **`logo`** (str): URI of logo to add to the header (if local file, logo is base64 encoded as URI).\n",
     "* **`theme`** (Theme): A Theme class (available in `panel.template.theme`)\n",
     "* **`title`** (str): A title to show in the header.\n",
     "\n",

diff --git a/examples/reference/templates/Material.ipynb b/examples/reference/templates/Material.ipynb
@@ -35,6 +35,7 @@
     "* **`busy_indicator`** (BooleanIndicator): Visual indicator of application busy state.\n",
     "* **`header_background`** (str): Optional header background color override.\n",
     "* **`header_color`** (str): Optional header text color override.\n",
+    "* **`logo`** (str): URI of logo to add to the header (if local file, logo is base64 encoded as URI).\n",
     "* **`theme`** (Theme): A Theme class (available in `panel.template.theme`)\n",
     "* **`title`** (str): A title to show in the header.\n",
     "\n",

diff --git a/examples/reference/templates/Vanilla.ipynb b/examples/reference/templates/Vanilla.ipynb
@@ -35,6 +35,7 @@
     "* **`busy_indicator`** (BooleanIndicator): Visual indicator of application busy state.\n",
     "* **`header_background`** (str): Optional header background color override.\n",
     "* **`header_color`** (str): Optional header text color override.\n",
+    "* **`logo`** (str): URI of logo to add to the header (if local file, logo is base64 encoded as URI).\n",
     "* **`theme`** (Theme): A Theme class (available in `panel.template.theme`)\n",
     "* **`title`** (str): A title to show in the header.\n",
     "\n",

diff --git a/panel/pane/image.py b/panel/pane/image.py
@@ -84,6 +84,13 @@ def _img(self):
             r = requests.request(url=self.object, method='GET')
             return r.content
 
+    def _b64(self):
+        data = self._img()
+        if not isinstance(data, bytes):
+            data = data.encode('utf-8')
+        b64 = base64.b64encode(data).decode("utf-8")
+        return "data:image/"+self.imgtype+f";base64,{b64}"
+
     def _imgshape(self, data):
         """Calculate and return image width,height"""
         raise NotImplementedError
@@ -207,6 +214,13 @@ def _img(self):
             return self.object
         return super(SVG, self)._img()
 
+    def _b64(self):
+        data = self._img()
+        if not isinstance(data, bytes):
+            data = data.encode('utf-8')
+        b64 = base64.b64encode(data).decode("utf-8")
+        return f"data:image/svg+xml;base64,{b64}"
+
     def _imgshape(self, data):
         return (self.width, self.height)
 

diff --git a/panel/template/base.py b/panel/template/base.py
@@ -4,6 +4,7 @@
 """
 from __future__ import absolute_import, division, unicode_literals
 
+import os
 import sys
 import uuid
 
@@ -25,6 +26,7 @@
 from ..layout import Column, ListLike
 from ..models.comm_manager import CommManager
 from ..pane import panel as _panel, HTML, Str, HoloViews
+from ..pane.image import ImageBase
 from ..viewable import ServableMixin, Viewable
 from ..widgets import Button
 from ..widgets.indicators import BooleanIndicator, LoadingSpinner
@@ -319,6 +321,10 @@ class BasicTemplate(BaseTemplate):
     modal = param.ClassSelector(class_=ListLike, constant=True, doc="""
         A list-like container which populates the modal""")
 
+    logo = param.String(constant=True, doc="""
+        URI of logo to add to the header (if local file, logo is
+        base64 encoded as URI).""")
+
     title = param.String(doc="A title to show in the header.")
 
     header_background = param.String(doc="Optional header background color override")
@@ -388,6 +394,14 @@ def _init_doc(self, doc=None, comm=None, title=None, notebook=False, location=Tr
 
     def _update_vars(self, *args):
         self._render_variables['app_title'] = self.title
+        if os.path.isfile(self.logo):
+            img = _panel(self.logo)
+            if not isinstance(img, ImageBase):
+                raise ValueError("Could not determine file type of logo: {self.logo}.")
+            logo = img._b64()
+        else:
+            logo = self.logo
+        self._render_variables['app_logo'] = logo
         self._render_variables['header_background'] = self.header_background
         self._render_variables['header_color'] = self.header_color
 

diff --git a/panel/template/bootstrap/bootstrap.css b/panel/template/bootstrap/bootstrap.css
@@ -31,6 +31,13 @@ body {
 
 a.navbar-brand {
   padding-left: 10px;
+  display: flex;
+  align-items: center;
+  font-size: 1.5em;
+}
+
+img.app-logo {
+  padding-right: 10px;
 }
 
 p.bk.card-button {
@@ -75,3 +82,4 @@ p.bk.card-button {
   display: flex;
   margin-left: auto;
 }
+
diff --git a/panel/template/bootstrap/bootstrap.html b/panel/template/bootstrap/bootstrap.html
@@ -16,7 +16,12 @@
       <span class="navbar-toggler-icon"></span>
     </button>
     {% endif %}
-    <a class="navbar-brand" href="#">{{ app_title }}</a>
+    <a class="navbar-brand" href="#">
+      {% if app_logo %}
+      <img src="{{ app_logo }}" height="30" class="app-logo"></img>
+      {% endif %}
+      {{ app_title }}
+    </a>
     {% for doc in docs %}
     {% for root in doc.roots %}
     {% if "header" in root.tags %}

diff --git a/panel/template/golden/golden.css b/panel/template/golden/golden.css
@@ -34,13 +34,22 @@ body {
   color: white;
 }
 
+.app-header {
+  display: flex;
+}
+
+img.app-logo {
+  padding-left: 10px;
+}
+
 .header-adjust {
   padding-top: 64px;
 }
 
 .header-title {
   font-size: 1.5em;
-  padding-left: 1.5em;
+  line-height: 2em;
+  padding-left: 1em;
   font: 1.5em Arial, sans-serif;
   color: white;
   text-align: center;

diff --git a/panel/template/golden/golden.html b/panel/template/golden/golden.html
@@ -11,8 +11,13 @@
 {% block contents %}
 <header class="app-bar" id="header">
   <div style="display: contents;">
-    <span class="header-title">{{ app_title }}</span>
-    <section>
+    <div class="app-header">
+      {% if app_logo %}
+      <img src="{{ app_logo }}" height="30" class="app-logo"></img>
+      {% endif %}
+      <span class="header-title">{{ app_title }}</span>
+    </div>
+	<section>
 	  {% for doc in docs %}
       {% for root in doc.roots %}
       {% if "header" in root.tags %}

diff --git a/panel/template/material/material.css b/panel/template/material/material.css
@@ -11,6 +11,16 @@ body {
   position: relative;
 }
 
+.mdc-top-app-bar__title {
+  display: flex;
+  padding-left: 10px;
+  font-size: 1.5em;
+}
+
+img.app-logo {
+  padding-right: 10px;
+}
+
 .main-content {
   height: 100%;
   margin-left: 20px;

diff --git a/panel/template/material/material.html b/panel/template/material/material.html
@@ -16,7 +16,12 @@
       {% if nav %}
       <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
       {% endif %}
-      <span class="mdc-top-app-bar__title">{{ app_title }}</span>
+      <span class="mdc-top-app-bar__title">
+		{% if app_logo %}
+        <img src="{{ app_logo }}" height="30" class="app-logo"></img>
+        {% endif %}
+        {{ app_title }}
+	  </span>
 	  {% for doc in docs %}
       {% for root in doc.roots %}
       {% if "header" in root.tags %}

diff --git a/panel/template/vanilla/vanilla.css b/panel/template/vanilla/vanilla.css
@@ -17,13 +17,21 @@ body {
 
 .title {
   color: #fff;
-  padding-left: 10px;
   text-decoration: none;
   text-decoration-line: none;
   text-decoration-style: initial;
   text-decoration-color: initial;
   font-weight: 400;
-  font-size: 28px;
+  font-size: 1.5em;
+  line-height: 2em;
+}
+
+.app-header {
+  display: flex;
+}
+
+img.app-logo {
+  padding-right: 10px;
 }
 
 .pn-bar {
@@ -62,9 +70,8 @@ body {
   overflow-y: scroll;
 }
 
-#sidebarCollapse {
-  background: none;
-  border: none;
+#sidebar-button {
+  padding-right: 10px;
 }
 
 a.navbar-brand {
@@ -110,7 +117,7 @@ p.bk.card-button {
 
 @media screen and (max-height: 450px) {
   .sidenav {padding-top: 15px;}
-  .sidenav a {font-size: 18px;}
+  .sidenav a {font-size: 1.2em;}
 }
 
 .nav.flex-column {

diff --git a/panel/template/vanilla/vanilla.html b/panel/template/vanilla/vanilla.html
@@ -2,16 +2,21 @@
 
 <!-- goes in body -->
 {% block contents %}
-<div class="" id="container">
-  <nav class="" style="{% if header_background %}background-color: {{ header_background }} !important;{% endif %}{% if header_color %}color: {{ header_color }}{% endif %}" id="header">
+<div id="container">
+  <nav style="{% if header_background %}background-color: {{ header_background }} !important;{% endif %}{% if header_color %}color: {{ header_color }}{% endif %}" id="header">
     {% if nav %}
     <span style="font-size:30px;cursor:pointer" onclick="closeNav()" id="sidebar-button">
 	  <div class="pn-bar"></div>
 	  <div class="pn-bar"></div>
 	  <div class="pn-bar"></div>
 	</span>
     {% endif %}
-    <a class="title" href="#">{{ app_title }}</a>
+	<div class="app-header">
+      {% if app_logo %}
+      <img src="{{ app_logo }}" height="30" class="app-logo"></img>
+      {% endif %}
+      <a class="title" href="#">{{ app_title }}</a>
+    </div>
     {% for doc in docs %}
     {% for root in doc.roots %}
     {% if "header" in root.tags %}