Add theme choosing ability

jet/settings.py

@@ -2,3 +2,4 @@ from django.conf import settings
 
 # Theme
 JET_DEFAULT_THEME = getattr(settings, 'JET_DEFAULT_THEME', 'default')
+JET_THEMES = getattr(settings, 'JET_THEMES', [])

jet/static/jet/css/_top.scss

@@ -63,6 +63,47 @@
       }
     }
 
+    &.opened &-welcome-msg-arrow {
+      color: $top-dropdown-icon-color;
+    }
+
+    &-contrast-block {
+      display: none;
+      padding: 8px 14px;
+      background: $top-dropdown-contrast-background-color;
+      color: $top-dropdown-contrast-text-color;
+
+      &-title {
+        text-transform: uppercase;
+        font-size: 10px;
+        font-weight: bold;
+        margin-bottom: 6px;
+      }
+    }
+
+    &.opened &-contrast-block {
+      display: block;
+    }
+
+    &-theme-link {
+      display: inline-block;
+      float: left;
+      margin-right: 6px;
+      margin-bottom: 6px;
+      width: 14px;
+      height: 14px;
+      border: 1px solid $top-dropdown-contrast-background-color;
+      border-radius: 3px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &.selected {
+        box-shadow: 0 0 1px 1px $selected-color-1;
+      }
+    }
+
     &-user-link {
       display: none;
       padding: 8px 14px;
@@ -78,6 +119,7 @@
       }
 
       &-icon {
+        color: $top-dropdown-icon-color;
         font-size: 15px;
         vertical-align: middle;
       }
@@ -91,7 +133,6 @@
 
     &.opened &-welcome-msg {
       border-bottom: 1px solid $top-dropdown-border-color;
-      margin-bottom: 6px;
     }
 
     &.opened &-user-link {

jet/static/jet/css/_variables.scss

@@ -99,11 +99,15 @@ $top-link-color: $blue-color-11 !default;
 $top-hover-link-color: $contrast2-color !default;
 $top-border-color: $blue-color-11 !default;
 $top-icon-color: $contrast-color !default;
+
 $top-dropdown-background-color: $blue-color-4 !default;
-$top-dropdown-border-color: $blue-color-5 !default;
 $top-dropdown-text-color: $blue-color-9 !default;
+$top-dropdown-contrast-background-color: $blue-color-5 !default;
+$top-dropdown-contrast-text-color: $blue-color-9 !default;
+$top-dropdown-border-color: $blue-color-5 !default;
 $top-dropdown-link-color: $blue-color-9 !default;
 $top-dropdown-hover-link-color: $blue-color-9 !default;
+$top-dropdown-icon-color: $blue-color-9 !default;
 
 /*
  * Content

jet/static/jet/css/themes/green/_variables.scss

@@ -97,11 +97,15 @@ $top-link-color: $green-color-11;
 $top-hover-link-color: $contrast2-color;
 $top-border-color: $green-color-11;
 $top-icon-color: $contrast-color;
+
 $top-dropdown-background-color: $green-color-4;
-$top-dropdown-border-color: $green-color-5;
 $top-dropdown-text-color: $green-color-9;
+$top-dropdown-contrast-background-color: $green-color-2;
+$top-dropdown-contrast-text-color: $green-color-9;
+$top-dropdown-border-color: $green-color-5;
 $top-dropdown-link-color: $green-color-9;
 $top-dropdown-hover-link-color: $green-color-9;
+$top-dropdown-icon-color: $green-color-9;
 
 /*
  * Content

jet/static/jet/css/themes/light-green/_variables.scss

@@ -71,11 +71,15 @@ $top-link-color: #C6D8E4;
 $top-hover-link-color: #1cacfc;
 $top-border-color: #dce0e6;
 $top-icon-color: $contrast-color;
+
 $top-dropdown-background-color: #03ad86;
-$top-dropdown-border-color: #02996e;
 $top-dropdown-text-color: #fff;
-$top-dropdown-link-color: #beebdb;
+$top-dropdown-contrast-background-color: #02996e;
+$top-dropdown-contrast-text-color: #beebdb;
+$top-dropdown-border-color: #02996e;
+$top-dropdown-link-color: #fff;
 $top-dropdown-hover-link-color: #fff;
+$top-dropdown-icon-color: #beebdb;
 
 /*
  * Content

jet/static/jet/css/themes/light-violet/_variables.scss

@@ -71,11 +71,15 @@ $top-link-color: #C6D8E4;
 $top-hover-link-color: #1cacfc;
 $top-border-color: #dce0e6;
 $top-icon-color: $link-color;
+
 $top-dropdown-background-color: #5e4d99;
-$top-dropdown-border-color: #594585;
 $top-dropdown-text-color: #fff;
-$top-dropdown-link-color: #c8beeb;
+$top-dropdown-contrast-background-color: #4d3b73;
+$top-dropdown-contrast-text-color: #c8beeb;
+$top-dropdown-border-color: #594585;
+$top-dropdown-link-color: #fff;
 $top-dropdown-hover-link-color: #fff;
+$top-dropdown-icon-color: #c8beeb;
 
 /*
  * Content

jet/static/jet/js/main.js

@@ -915,6 +915,21 @@
             $('.sidebar-menu-wrapper').perfectScrollbar();
         };
 
+        var initThemeChoosing = function() {
+            $('.choose-theme').on('click', function () {
+                var $link = $(this);
+
+                $.cookie('JET_THEME', $link.data('theme'), { expires: 365 });
+
+                $('#base-stylesheet').attr('href', $link.data('base-stylesheet'));
+                $('#select2-stylesheet').attr('href', $link.data('select2-stylesheet'));
+                $('#jquery-ui-stylesheet').attr('href', $link.data('jquery-ui-stylesheet'));
+
+                $('.choose-theme').removeClass('selected');
+                $link.addClass('selected');
+            });
+        };
+
         initjQueryCaseInsensitiveSelector();
         initjQuerySlideFadeToggle();
         initFilters();
@@ -930,5 +945,6 @@
         initDashboard();
         initUnsavedChangesWarning();
         initScrollbars();
+        initThemeChoosing();
     });
 })(jet.jQuery);

jet/static/jet/vendor/jquery-cookie/jquery.cookie-1.4.1.min.js

@@ -0,0 +1,2 @@
+/*! jquery.cookie v1.4.1 | MIT */
+!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?a(require("jquery")):a(jQuery)}(function(a){function b(a){return h.raw?a:encodeURIComponent(a)}function c(a){return h.raw?a:decodeURIComponent(a)}function d(a){return b(h.json?JSON.stringify(a):String(a))}function e(a){0===a.indexOf('"')&&(a=a.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\"));try{return a=decodeURIComponent(a.replace(g," ")),h.json?JSON.parse(a):a}catch(b){}}function f(b,c){var d=h.raw?b:e(b);return a.isFunction(c)?c(d):d}var g=/\+/g,h=a.cookie=function(e,g,i){if(void 0!==g&&!a.isFunction(g)){if(i=a.extend({},h.defaults,i),"number"==typeof i.expires){var j=i.expires,k=i.expires=new Date;k.setTime(+k+864e5*j)}return document.cookie=[b(e),"=",d(g),i.expires?"; expires="+i.expires.toUTCString():"",i.path?"; path="+i.path:"",i.domain?"; domain="+i.domain:"",i.secure?"; secure":""].join("")}for(var l=e?void 0:{},m=document.cookie?document.cookie.split("; "):[],n=0,o=m.length;o>n;n++){var p=m[n].split("="),q=c(p.shift()),r=p.join("=");if(e&&e===q){l=f(r,g);break}e||void 0===(r=f(r))||(l[q]=r)}return l};h.defaults={},a.removeCookie=function(b,c){return void 0===a.cookie(b)?!1:(a.cookie(b,"",a.extend({},c,{expires:-1})),!a.cookie(b))}});

jet/templates/admin/base.html

@@ -1,5 +1,5 @@
 {% load i18n admin_static jet_tags %}
-{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}{% format_current_language LANGUAGE_CODE as LANGUAGE_CODE %}{% get_current_theme as THEME %}{% get_current_jet_version as JET_VERSION %}
+{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}{% format_current_language LANGUAGE_CODE as LANGUAGE_CODE %}{% get_themes as THEMES %}{% get_current_theme as THEME %}{% get_current_jet_version as JET_VERSION %}
 {% block html %}<!DOCTYPE html>
 <html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
 <head>
@@ -12,9 +12,9 @@
     <link href="{% static "jet/vendor/jquery-ui-timepicker/jquery.ui.timepicker.css" %}" rel="stylesheet" />
     <link href="{% static "jet/vendor/perfect-scrollbar/css/perfect-scrollbar.css" %}" rel="stylesheet" />
     <link href="{% static "jet/css/icons/style.css" %}?v={{ JET_VERSION }}" rel="stylesheet" />
-    <link href="{% static "jet/css/themes/"|add:THEME|add:"/base.css" %}?v={{ JET_VERSION }}" rel="stylesheet" />
-    <link href="{% static "jet/css/themes/"|add:THEME|add:"/select2.theme.css" %}?v={{ JET_VERSION }}" rel="stylesheet" />
-    <link href="{% static "jet/css/themes/"|add:THEME|add:"/jquery-ui.theme.css" %}?v={{ JET_VERSION }}" rel="stylesheet" />
+    <link href="{% static "jet/css/themes/"|add:THEME|add:"/base.css" %}?v={{ JET_VERSION }}" rel="stylesheet" id="base-stylesheet" />
+    <link href="{% static "jet/css/themes/"|add:THEME|add:"/select2.theme.css" %}?v={{ JET_VERSION }}" rel="stylesheet" id="select2-stylesheet" />
+    <link href="{% static "jet/css/themes/"|add:THEME|add:"/jquery-ui.theme.css" %}?v={{ JET_VERSION }}" rel="stylesheet" id="jquery-ui-stylesheet" />
     <!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="{% block stylesheet_ie %}{% static "admin/css/ie.css" %}{% endblock %}" /><![endif]-->
     {% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}" />{% endif %}
     {% block extrastyle %}{% endblock %}
@@ -33,6 +33,7 @@
     <script src="{% static "jet/vendor/select2/js/select2.full.min.js" %}"></script>
     <script src="{% static "jet/vendor/perfect-scrollbar/js/perfect-scrollbar.min.js" %}"></script>
     <script src="{% static "jet/vendor/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js" %}"></script>
+    <script src="{% static "jet/vendor/jquery-cookie/jquery.cookie-1.4.1.min.js" %}"></script>
     {% if LANGUAGE_CODE|slice:":2" != 'en' %}
         {% with "jet/vendor/jquery-ui/i18n/datepicker-"|add:LANGUAGE_CODE|add:".js" as url %}
             <script src="{% static url %}"></script>
@@ -74,6 +75,27 @@
                                                 {% endblock %}
                                             </li>
 
+                                            {% if THEMES %}
+                                                <li class="top-user-tools-contrast-block">
+                                                    <div class="top-user-tools-contrast-block-title">{% trans "current theme" %}</div>
+                                                    <div class="top-user-tools-theme-link-container cf">
+                                                        {% for conf_theme in THEMES %}
+                                                            {% if conf_theme.theme %}
+                                                                <a href="#"
+                                                                   class="top-user-tools-theme-link choose-theme{% if conf_theme.theme == THEME %} selected{% endif %}"
+                                                                   data-theme="{{ conf_theme.theme }}"
+                                                                   data-base-stylesheet="{% static "jet/css/themes/"|add:conf_theme.theme|add:"/base.css" %}?v={{ JET_VERSION }}"
+                                                                   data-select2-stylesheet="{% static "jet/css/themes/"|add:conf_theme.theme|add:"/select2.theme.css" %}?v={{ JET_VERSION }}"
+                                                                   data-jquery-ui-stylesheet="{% static "jet/css/themes/"|add:conf_theme.theme|add:"/jquery-ui.theme.css" %}?v={{ JET_VERSION }}"
+                                                                   {% if conf_theme.title %} title="{{ conf_theme.title }}"{% endif %}
+                                                                   style="background-color: {{ conf_theme.color|default:'white' }};"
+                                                                        ></a>
+                                                            {% endif %}
+                                                        {% endfor %}
+                                                    </div>
+                                                </li>
+                                            {% endif %}
+
                                             {% block userlinks %}
                                                 {% if user.has_usable_password %}
                                                     <li class="top-user-tools-user-link">

jet/templatetags/jet_tags.py

@@ -244,9 +244,20 @@ def format_current_language(language):
 
 @register.assignment_tag(takes_context=True)
 def get_current_theme(context):
+    if 'request' in context and 'JET_THEME' in context['request'].COOKIES:
+        theme = context['request'].COOKIES['JET_THEME']
+        if isinstance(settings.JET_THEMES, list) and len(settings.JET_THEMES) > 0:
+            for conf_theme in settings.JET_THEMES:
+                if isinstance(conf_theme, dict) and conf_theme.get('theme') == theme:
+                    return theme
     return settings.JET_DEFAULT_THEME
 
 
+@register.assignment_tag
+def get_themes():
+    return settings.JET_THEMES
+
+
 @register.assignment_tag
 def get_current_jet_version():
     return VERSION