A simple base template for npm

panoramix/assets/html/base.html

@@ -9,7 +9,6 @@
 
   <!-- Replace with custom bootstrap theme -->
   <link rel="stylesheet" type="text/css" href="/static/refactor/stylesheets/themes/bootswatch.paper.min.css" />
-  <!-- <link rel="stylesheet" type="text/css" href="/static/refactor/stylesheets/themes/panoramix-bootstrap-theme.css" /> -->
 {% endblock %}
 
 {% block body %}

panoramix/assets/html/explore.html

@@ -1,6 +1,6 @@
-{% extends "refactor/base.html" %}
+{% extends "panoramix/basic.html" %}
 
-{% block content_fluid %}
+{% block body %}
   {% set datasource = viz.datasource %}
   {% set form = viz.form %}
 
@@ -132,14 +132,14 @@
                     <span class="col col-sm-4">{{ form.flt_op_0(class_="form-control inc") }}</span>
                     <span class="col col-sm-6">{{ form.flt_eq_0(class_="form-control inc") }}</span>
                     <button type="button" class="btn btn-default btn-sm remove" aria-label="Delete filter">
-                      <span class="glyphicon glyphicon-minus"  aria-hidden="true"></span>
+                      <span class="fa fa-minus"  aria-hidden="true"></span>
 
                     </button>
                   </div>
                 </div>
                 <div id="filters"></div>
                 <button type="button" id="plus" class="btn btn-default btn-sm" aria-label="Add a filter">
-                  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
+                  <span class="fa fa-plus" aria-hidden="true"></span>
                   <span>Add filter</span>
                 </button>
               </div>

panoramix/assets/javascripts/base.js

@@ -1,3 +1,6 @@
 // Currently requires global app dependencies in one place. Css could go here too.
+require('select2');
+require('bootstrap');
+
 window.d3 = require('d3');
 window.px = require('./modules/panoramix.js');

panoramix/assets/javascripts/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { Jumbotron } from 'react-bootstrap';
+require('bootstrap');
 
 class App extends React.Component {
   render () {

panoramix/assets/package.json

@@ -46,6 +46,7 @@
     "d3-tip": "^0.6.7",
     "d3.layout.cloud": "^1.2.0",
     "exports-loader": "^0.6.3",
+    "font-awesome": "^4.5.0",
     "gridster": "^0.5.6",
     "imports-loader": "^0.6.5",
     "jquery": "^2.2.1",

panoramix/config.py

@@ -97,16 +97,7 @@
 # The allowed translation for you app
 LANGUAGES = {
     'en': {'flag': 'us', 'name': 'English'},
-    'fr': {'flag': 'fr', 'name': 'French'},
 }
-"""
-'pt': {'flag':'pt', 'name':'Portuguese'},
-'pt_BR': {'flag':'br', 'name': 'Pt Brazil'},
-'es': {'flag':'es', 'name':'Spanish'},
-'de': {'flag':'de', 'name':'German'},
-'zh': {'flag':'cn', 'name':'Chinese'},
-'ru': {'flag':'ru', 'name':'Russian'}
-"""
 # ---------------------------------------------------
 # Image and file configuration
 # ---------------------------------------------------

panoramix/templates/appbuilder/navbar_right.html

@@ -0,0 +1,43 @@
+
+{% macro locale_menu(languages) %}
+{% set locale = session['locale'] %}
+{% if not locale %}
+    {% set locale = 'en' %}
+{% endif %}
+<li class="dropdown">
+    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
+       <div class="f16"><i class="flag {{languages[locale].get('flag')}}"></i><b class="caret"></b>
+       </div>
+    </a>
+    {% if languages.keys()|length > 1 %}
+    <ul class="dropdown-menu">
+    <li class="dropdown">
+        {% for lang in languages %}
+            {% if lang != locale %}
+                <a tabindex="-1" href="{{appbuilder.get_url_for_locale(lang)}}">
+                  <div class="f16"><i class="flag {{languages[lang].get('flag')}}"></i> - {{languages[lang].get('name')}}
+                </div></a>
+                {% endif %}
+            {% endfor %}
+        </li>
+        </ul>
+    {% endif %}
+</li>
+{% endmacro %}
+
+
+
+{% if not current_user.is_anonymous() %}
+    <li class="dropdown">
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+           <span class="fa fa-user"></span> {{g.user.get_full_name()}}<b class="caret"></b>
+        </a>
+        <ul class="dropdown-menu">
+            <li><a href="{{appbuilder.get_url_for_userinfo}}"><span class="fa fa-fw fa-user"></span>{{_("Profile")}}</a></li>
+            <li><a href="{{appbuilder.get_url_for_logout}}"><span class="fa fa-fw fa-sign-out"></span>{{_("Logout")}}</a></li>
+        </ul>
+    </li>
+{% else %}
+    <li><a href="{{appbuilder.get_url_for_login}}">
+    <i class="fa fa-fw fa-sign-in"></i>{{_("Login")}}</a></li>
+{% endif %}

panoramix/templates/panoramix/basic.html

@@ -0,0 +1,38 @@
+<html>
+  <head>
+    <title>{% block title %}{{ app_name }}{% endblock %}</title>
+    {% block head_meta %}{% endblock %}
+    {% block head_css %}
+        <link rel="stylesheet" type="text/css" href="/static/refactor/node_modules/font-awesome/css/font-awesome.min.css" />
+        <link rel="stylesheet" type="text/css" href="/static/refactor/node_modules/select2/dist/css/select2.min.css" />
+        <link rel="stylesheet" type="text/css" href="/static/refactor/stylesheets/themes/bootswatch.paper.min.css" />
+        <link rel="stylesheet" type="text/css" href="/static/refactor/stylesheets/panoramix.css" />
+    {% endblock %}
+    {% block head_js %}
+        <script src="/static/refactor/node_modules/jquery/dist/jquery.min.js"></script>
+        <script src="/static/refactor/node_modules/select2/dist/js/select2.full.min.js"></script>
+        <script src="/static/refactor/javascripts/vendor/jquery-ui.min.js"></script>
+        <script src="/static/refactor/javascripts/vendor/select2.sortable.js"></script>
+    {% endblock %}
+  </head>
+
+  <body>
+    {% block navbar %}
+      {% if not viz or viz.request.args.get("standalone") != "true" %}
+        <header class="top" role="header">
+          {% include 'appbuilder/navbar.html' %}
+        </header>
+      {% endif %}
+    {% endblock %}
+
+    {% block body %}
+      <div id="app">
+        Oops! React.js is not working properly.
+      </div>
+    {% endblock %}
+
+    {% block tail_js %}
+        <script src="/static/refactor/javascripts/dist/base.entry.js"></script>
+    {% endblock %}
+  </body>
+</html>

panoramix/templates/panoramix/explore.html

@@ -1,9 +1,8 @@
-{% extends "panoramix/base.html" %}
+{% extends "panoramix/basic.html" %}
 
 {% block head_css %}
 {{super()}}
 <link rel="stylesheet" type="text/css" href="/static/lib/pygments.css" />
-<link href="/static/lib/bootstrap-toggle.min.css" rel="stylesheet">
 {% endblock %}
 
 {% block content_fluid %}
@@ -124,13 +123,13 @@
                   <span class="col col-sm-4">{{ form.flt_op_0(class_="form-control inc") }}</span>
                   <span class="col col-sm-6">{{ form.flt_eq_0(class_="form-control inc") }}</span>
                   <button type="button" class="btn btn-sm remove" aria-label="Delete filter">
-                    <span class="glyphicon glyphicon-minus"  aria-hidden="true"></span>
+                    <span class="fa fa-minus"  aria-hidden="true"></span>
                   </button>
                 </div>
               </div>
               <div id="filters"></div>
               <button type="button" id="plus" class="btn btn-sm" aria-label="Add a filter">
-                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
+                <span class="fa fa-plus" aria-hidden="true"></span>
               </button>
             </div>
           </fieldset>