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

Jump to bottom

add setting FLEXMEASURES_EXTRA_CSS_PATH & allow plugins to add custom stylesheets to their base template #185

Merged
merged 1 commit into from Sep 17, 2021
Merged

add setting FLEXMEASURES_EXTRA_CSS_PATH & allow plugins to add custom stylesheets to their base template #185

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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions documentation/changelog.rst
View file
Open in desktop
Expand Up @@ -10,6 +10,7 @@ v0.7.0 | October XX, 2021
New features
-----------
* Set a logo for the top left corner with the new FLEXMEASURES_MENU_LOGO_PATH setting [see `PR #184 <http://www.github.com/SeitaBV/flexmeasures/pull/184>`_]
* Add an extra style-sheet which applies to all pages with the new FLEXMEASURES_EXTRA_CSS_PATH setting [see `PR #185 <http://www.github.com/SeitaBV/flexmeasures/pull/185>`_]


Bugfixes
Expand Down
13 changes: 13 additions & 0 deletions documentation/configuration.rst
View file
Open in desktop
Expand Up @@ -115,6 +115,19 @@ The path can be a complete URL or a relative from the app root.
Default: ""


.. _extra-css-config:

FLEXMEASURES_EXTRA_CSS_PATH
^^^^^^^^^^^^^^^^^^^^^^^^^^^^

A URL path to identify a CSS style-sheet to be added to the base template.
The path can be a complete URL or a relative from the app root.

.. note:: You can also add extra styles for plugins with the usual Blueprint method. That is more elegant but only applies to the Blueprint's views.

Default: ""


FLEXMEASURES_ROOT_VIEW
^^^^^^^^^^^^^^^^^^^^^^^^^^

Expand Down
21 changes: 21 additions & 0 deletions documentation/dev/plugins.rst
View file
Open in desktop
Expand Up @@ -132,6 +132,25 @@ Starting the template with ``{% extends "base.html" %}`` integrates your page co
We'd name this file ``our_client_base.html``. Then, we'd extend our page template from ``our_client_base.html``, instead of ``base.html``.


Adding your own stylesheets
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

You can style your plugin's pages in a distinct way by adding your own style-sheet. This happens by overwriting FlexMeasures ``styles`` block. Add to your plugin's base template (see above):

.. code-block:: html

{% block styles %}
{{ super() }}
<!-- Our client styles -->
<link rel="stylesheet" href="{{ url_for('our_client_bp.static', filename='css/style.css')}}">
{% endblock %}

This will find `css/styles.css` if you add that folder and file to your Blueprint's static folder.

.. note:: This styling will only apply to the pages defined in your plugin (to pages based on your own base template). To apply a styling to all other pages which are served by FlexMeasures, consider using the config setting :ref:`extra-css-config`.



Using other code files in your non-package plugin
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Expand All @@ -152,6 +171,8 @@ But it can be achieved if you put the plugin path on the import path. Do it like
from my_other_file import my_function




Using a custom favicon icon
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Expand Down
5 changes: 5 additions & 0 deletions flexmeasures/ui/templates/base.html
View file
Open in desktop
Expand Up @@ -14,6 +14,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
{% block styles %}
<!-- Leaflet -->
<link href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet" />
<link href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" rel="stylesheet" />
Expand Down Expand Up @@ -44,6 +45,10 @@
{% elif active_page in ("assets", "users", "portfolio") %}
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" />
{% endif %}
{% if extra_css %}
<link href="{{ extra_css }}" rel="stylesheet" />
{% endif %}
{% endblock %}
</head>

<body>
Expand Down
1 change: 1 addition & 0 deletions flexmeasures/ui/utils/view_utils.py
View file
Open in desktop
Expand Up @@ -90,6 +90,7 @@ def render_flexmeasures_template(html_filename: str, **variables):
variables["js_versions"] = current_app.config.get("FLEXMEASURES_JS_VERSIONS")

variables["menu_logo"] = current_app.config.get("FLEXMEASURES_MENU_LOGO_PATH")
variables["extra_css"] = current_app.config.get("FLEXMEASURES_EXTRA_CSS_PATH")

return render_template(html_filename, **variables)

Expand Down
2 changes: 2 additions & 0 deletions flexmeasures/utils/config_defaults.py
View file
Open in desktop
Expand Up @@ -97,6 +97,8 @@ class Config(object):
FLEXMEASURES_PLUGINS: List[str] = []
FLEXMEASURES_PROFILE_REQUESTS: bool = False
FLEXMEASURES_DB_BACKUP_PATH: str = "migrations/dumps"
FLEXMEASURES_MENU_LOGO_PATH: str = ""
FLEXMEASURES_EXTRA_CSS_PATH: str = ""
FLEXMEASURES_ROOT_VIEW: Union[str, List[Union[str, Tuple[str, List[str]]]]] = []
FLEXMEASURES_MENU_LISTED_VIEWS: List[Union[str, Tuple[str, List[str]]]] = [
"dashboard",
Expand Down