[AIRFLOW-2874] Enables FAB's theme support (apache#3719)

MDrakos · Aug 8, 2018 · cbe7955 · cbe7955
1 parent acca61c
commit cbe7955
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git a/airflow/config_templates/default_webserver_config.py b/airflow/config_templates/default_webserver_config.py
@@ -89,3 +89,13 @@
 #    { 'name': 'AOL', 'url': 'http://openid.aol.com/<username>' },
 #    { 'name': 'Flickr', 'url': 'http://www.flickr.com/<username>' },
 #    { 'name': 'MyOpenID', 'url': 'https://www.myopenid.com' }]
+
+# ----------------------------------------------------
+# Theme CONFIG
+# ----------------------------------------------------
+# Flask App Builder comes up with a number of predefined themes
+# that you can use for Apache Airflow.
+# http://flask-appbuilder.readthedocs.io/en/latest/customizing.html#changing-themes
+# Please make sure to remove "navbar_color" configuration from airflow.cfg
+# in order to fully utilize the theme. (or use that property in conjunction with theme)
+# APP_THEME = "bootstrap-theme.css"  # default bootstrap
diff --git a/airflow/www_rbac/templates/appbuilder/baselayout.html b/airflow/www_rbac/templates/appbuilder/baselayout.html
@@ -20,8 +20,14 @@
 
 {% block head_css %}
   {{ super() }}
-  {# styleBundle.css file contains the styles from main.css and bootstrap-theme.css #}
-  <link href="{{ url_for_asset('styleBundle.css') }}" rel="stylesheet">
+
+  <link href="{{ url_for_asset('main.css') }}" rel="stylesheet">
+
+  {% if not appbuilder.app_theme %}
+    {# airflowDefaultTheme.css file contains the styles from local bootstrap-theme.css #}
+    <link href="{{ url_for_asset('airflowDefaultTheme.css') }}" rel="stylesheet">
+  {% endif %}
+
   <link rel="icon" type="image/png" href="{{ url_for('static', filename='pin_30.png') }}">
 {% endblock %}
 

diff --git a/airflow/www_rbac/webpack.config.js b/airflow/www_rbac/webpack.config.js
@@ -38,10 +38,8 @@ const config = {
     clock: `${STATIC_DIR}/js/clock.js`,
     graph: `${STATIC_DIR}/js/graph.js`,
     ganttChartD3v2: `${STATIC_DIR}/js/gantt-chart-d3v2.js`,
-    styleBundle: [
-      `${STATIC_DIR}/css/bootstrap-theme.css`,
-      `${STATIC_DIR}/css/main.css`,
-    ],
+    main: `${STATIC_DIR}/css/main.css`,
+    airflowDefaultTheme : `${STATIC_DIR}/css/bootstrap-theme.css`,
   },
   output: {
     path: BUILD_DIR,