Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add logo option for BaseTemplates #1608

Merged
merged 1 commit into from
Oct 5, 2020
Merged

Add logo option for BaseTemplates #1608

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/reference/templates/Bootstrap.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions examples/reference/templates/GoldenLayout.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions examples/reference/templates/Material.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions examples/reference/templates/Vanilla.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
14 changes: 14 additions & 0 deletions panel/pane/image.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)

Expand Down
14 changes: 14 additions & 0 deletions panel/template/base.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"""
from __future__ import absolute_import, division, unicode_literals

import os
import sys
import uuid

Expand All @@ -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
Expand Down Expand Up @@ -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")
Expand Down Expand Up @@ -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

Expand Down
8 changes: 8 additions & 0 deletions panel/template/bootstrap/bootstrap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -75,3 +82,4 @@ p.bk.card-button {
display: flex;
margin-left: auto;
}

7 changes: 6 additions & 1 deletion panel/template/bootstrap/bootstrap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
11 changes: 10 additions & 1 deletion panel/template/golden/golden.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
9 changes: 7 additions & 2 deletions panel/template/golden/golden.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
10 changes: 10 additions & 0 deletions panel/template/material/material.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
7 changes: 6 additions & 1 deletion panel/template/material/material.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
19 changes: 13 additions & 6 deletions panel/template/vanilla/vanilla.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -62,9 +70,8 @@ body {
overflow-y: scroll;
}

#sidebarCollapse {
background: none;
border: none;
#sidebar-button {
padding-right: 10px;
}

a.navbar-brand {
Expand Down Expand Up @@ -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 {
Expand Down
11 changes: 8 additions & 3 deletions panel/template/vanilla/vanilla.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down