add setting FLEXMEASURES_EXTRA_CSS_PATH & allow plugins to add custom…

… stylesheets to their base template (#185)
FlexMeasures · Sep 17, 2021 · 0d14885 · 0d14885
1 parent 19896bd
commit 0d14885
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 0 deletions.
diff --git a/documentation/changelog.rst b/documentation/changelog.rst
@@ -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

diff --git a/documentation/configuration.rst b/documentation/configuration.rst
@@ -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
 ^^^^^^^^^^^^^^^^^^^^^^^^^^
 

diff --git a/documentation/dev/plugins.rst b/documentation/dev/plugins.rst
@@ -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
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
@@ -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
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 

diff --git a/flexmeasures/ui/templates/base.html b/flexmeasures/ui/templates/base.html
@@ -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" />
@@ -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>

diff --git a/flexmeasures/ui/utils/view_utils.py b/flexmeasures/ui/utils/view_utils.py
@@ -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)
 

diff --git a/flexmeasures/utils/config_defaults.py b/flexmeasures/utils/config_defaults.py
@@ -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",