Implement themes

jet/static/jet/css/_header.scss

@@ -60,6 +60,7 @@
       right: 0;
       z-index: 4;
       width: auto;
+      max-width: 200px;
       color: $sidebar-link-color;
       border: 0;
       border-left: 1px solid $sidebar-contrast-background-color;
@@ -156,5 +157,49 @@
     &.opened li.user-tools-link {
       display: block;
     }
+
+    li.user-tools-contrast-block {
+      display: none;
+      padding: 8px 14px;
+      background: $top-dropdown-contrast-background-color;
+      color: $top-dropdown-contrast-text-color;
+      white-space: normal;
+    }
+
+    &.opened li.user-tools-contrast-block {
+      display: block;
+    }
+  }
+
+  &-contrast-block {
+    &-title {
+      text-transform: uppercase;
+      font-size: 10px;
+      font-weight: bold;
+      margin-bottom: 6px;
+    }
+  }
+
+  &-theme-link {
+    display: inline-block;
+    margin: 0 5px 5px 0;
+    width: 14px;
+    height: 14px;
+    border: 1px solid $top-dropdown-contrast-background-color;
+    border-radius: 3px;
+
+    @include for-mobile {
+      width: 24px;
+      height: 24px;
+      margin: 0 8px 8px 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &.selected {
+      box-shadow: 0 0 1px 1px $top-dropdown-selected-color;
+    }
   }
 }

jet/static/jet/js/src/features/themes.js

@@ -2,45 +2,61 @@ require('jquery.cookie');
 
 var $ = require('jquery');
 
-var initThemeChoosing = function() {
-    $('.choose-theme').on('click', function () {
-        var $link = $(this);
-
-        $.cookie('JET_THEME', $link.data('theme'), { expires: 365, path: '/' });
-
-        var cssToLoad = [
-            { url: $link.data('base-stylesheet'), class: 'base-stylesheet' },
-            { url: $link.data('select2-stylesheet'), class: 'select2-stylesheet' },
-            { url: $link.data('jquery-ui-stylesheet'), class: 'jquery-ui-stylesheet' }
-        ];
-
-        var loadedCss = 0;
-
-        var onCssLoaded = function() {
-            ++loadedCss;
-
-            if (loadedCss == cssToLoad.length) {
-                $(document).trigger('theme:changed');
-            }
-        };
-
-        cssToLoad.forEach(function(css) {
-            $('<link>')
-                .attr('rel', 'stylesheet')
-                .addClass(css['class'])
-                .attr('href', css['url'])
-                .load(onCssLoaded)
-                .appendTo('head');
-            $('.' + css['class'])
-                .slice(0, -2)
-                .remove();
+var Themes = function() { };
+
+Themes.prototype = {
+    moveChooser: function() {
+        var $chooser = $('.theme-chooser').detach();
+        $('.user-tools-welcome-msg').after($chooser);
+    },
+    initChooser: function() {
+        $('.choose-theme').on('click', function () {
+            var $link = $(this);
+
+            $.cookie('JET_THEME', $link.data('theme'), { expires: 365, path: '/' });
+
+            var cssToLoad = [
+                { url: $link.data('base-stylesheet'), class: 'base-stylesheet' },
+                { url: $link.data('select2-stylesheet'), class: 'select2-stylesheet' },
+                { url: $link.data('jquery-ui-stylesheet'), class: 'jquery-ui-stylesheet' }
+            ];
+
+            var loadedCss = 0;
+
+            var onCssLoaded = function() {
+                ++loadedCss;
+
+                if (loadedCss == cssToLoad.length) {
+                    $(document).trigger('theme:changed');
+                }
+            };
+
+            cssToLoad.forEach(function(css) {
+                $('<link>')
+                    .attr('rel', 'stylesheet')
+                    .addClass(css['class'])
+                    .attr('href', css['url'])
+                    .load(onCssLoaded)
+                    .appendTo('head');
+                $('.' + css['class'])
+                    .slice(0, -2)
+                    .remove();
+            });
+
+            $('.choose-theme').removeClass('selected');
+            $link.addClass('selected');
         });
-
-        $('.choose-theme').removeClass('selected');
-        $link.addClass('selected');
-    });
+    },
+    run: function() {
+        try {
+            this.moveChooser();
+            this.initChooser();
+        } catch (e) {
+            console.error(e, e.stack);
+        }
+    }
 };
 
 $(document).ready(function() {
-    initThemeChoosing();
+    new Themes().run();
 });

jet/templates/admin/base.html

@@ -3,12 +3,13 @@
 
 {% block extrastyle %}
     {{ block.super }}
+    {% get_current_theme as THEME %}
     {% get_current_jet_version as JET_VERSION %}
     <link rel="stylesheet" type="text/css" href="{% static "jet/css/vendor.css" %}?v={{ JET_VERSION }}" />
     <link rel="stylesheet" type="text/css" href="{% static "jet/css/icons/style.css" %}?v={{ JET_VERSION }}" />
-    <link rel="stylesheet" type="text/css" href="{% static "jet/css/themes/default/base.css" %}?v={{ JET_VERSION }}" />
-    <link rel="stylesheet" type="text/css" href="{% static "jet/css/themes/default/jquery-ui.theme.css" %}?v={{ JET_VERSION }}" />
-    <link rel="stylesheet" type="text/css" href="{% static "jet/css/themes/default/select2.theme.css" %}?v={{ JET_VERSION }}" />
+    <link rel="stylesheet" type="text/css" href="{% static "jet/css/themes/"|add:THEME|add:"/base.css" %}?v={{ JET_VERSION }}" class="base-stylesheet" />
+    <link rel="stylesheet" type="text/css" href="{% static "jet/css/themes/"|add:THEME|add:"/select2.theme.css" %}?v={{ JET_VERSION }}" class="select2-stylesheet" />
+    <link rel="stylesheet" type="text/css" href="{% static "jet/css/themes/"|add:THEME|add:"/jquery-ui.theme.css" %}?v={{ JET_VERSION }}" class="jquery-ui-stylesheet" />
 {% endblock %}
 
 {% block extrahead %}
@@ -277,4 +278,30 @@
             {% endif %}
         </div>
     {% endif %}
+
+    {% get_themes as THEMES %}
+    {% if THEMES %}
+        {% get_current_theme as THEME %}
+        {% get_current_jet_version as JET_VERSION %}
+        <li class="user-tools-contrast-block theme-chooser">
+            <div class="user-tools-contrast-block-title">{% trans "current theme" %}</div>
+            <div class="user-tools-theme-link-container">
+                {% spaceless %}
+                    {% for conf_theme in THEMES %}
+                        {% if conf_theme.theme %}
+                            <a href="#"
+                               class="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 %}
+                {% endspaceless %}
+            </div>
+        </li>
+    {% endif %}
 {% endblock %}