Theme switcher including some bad typo in the css file name

hellifiknow · Oct 1, 2013 · 595c21c · 595c21c
1 parent f0be397
commit 595c21c
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/lib/PhpReports/PhpReports.php b/lib/PhpReports/PhpReports.php
@@ -225,6 +225,7 @@ public static function listReports() {
 
 		$template_vars['reports'] = $reports;
 		$template_vars['report_errors'] = $errors;
+        $template_vars['theme'] = $_COOKIE['reports-theme'] != '' ? $_COOKIE['reports-theme'] : self::$config['bootstrap_theme'];
 
 		$start = microtime(true);
 		echo self::render('html/report_list',$template_vars);

diff --git a/public/css/bootstrap.defualt.min.css → public/css/bootstrap.default.min.css b/public/css/bootstrap.defualt.min.css → public/css/bootstrap.default.min.css
diff --git a/templates/default/html/page.twig b/templates/default/html/page.twig
@@ -7,7 +7,7 @@
 
     <!-- Le styles -->
     {% block stylesheets %}
-    <link href="{{base}}/public/css/bootstrap.defualt.min.css" rel="stylesheet">
+    <link id="bootstrap" href="{{base}}/public/css/bootstrap.{{theme}}.min.css" rel="stylesheet">
     <link href="{{ base }}/public/css/typeahead.js-bootstrap.css" rel="stylesheet">
     <style>
       body {
@@ -90,7 +90,7 @@
 
                 {% block environment_chooser %}
                     {% if config.environments|length > 1 %}
-                    <script>
+                    <script type="text/javascript">
                     function change_environment(environment) {
                         $.getJSON('{{ base }}/set-environment', {
                             environment: environment
@@ -123,6 +123,35 @@
                     </ul>
                     {% endif %}
             {% endblock %}
+            {% block theme_switcher %}
+                {% if config.bootstrap_themelist|length > 1 %}
+                    <script type="text/javascript">
+                        function changeTheme(theme) {
+                            $('#bootstrap').attr('href', '{{ base }}/public/css/bootstrap.' + theme + '.min.css');
+                            $.cookie('reports-theme', theme);
+                            $('#theme-swtich > strong').text(theme);
+                            $('ul#themes-list li').each(function(){
+                                if ($(this).hasClass('active') && $(this).children().text() != theme) {
+                                    $(this).removeClass('active');
+                                }
+                                if ($(this).children().text() == theme) {
+                                    $(this).addClass('active');
+                                }
+                            });
+                        }
+                    </script>
+                    <ul class="nav navbar-nav navbar-right">
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="theme-swtich">Theme: <strong>{{ theme }}</strong> <b class="caret"></b></a>
+                            <ul class="dropdown-menu" id="themes-list">
+                                {% for option in config.bootstrap_themelist %}
+                                    <li{% if option == theme %} class="active"{% endif %}><a href="#" onclick="changeTheme('{{option}}')">{{option}}</a></li>
+                                {% endfor %}
+                            </ul>
+                        </li>
+                    </ul>
+                {% endif %}
+            {% endblock %}
         </div>
       </div>
     </div>
@@ -166,6 +195,7 @@
     {% block javascripts %}
     <script src="{{base}}/public/js/jquery-2.0.3.min.js"></script>
     <script src="{{base}}/public/js/bootstrap-3.0.min.js"></script>
+    <script src="{{base}}/public/js/jquery.cookie.js"></script>
     <script src="{{base}}/public/js/typeahead.min.js"></script>
 	<script src="{{base}}/public/js/scripts.js"></script>
     <script>