WIP Cascade theme

.gitignore

@@ -23,3 +23,4 @@ workdir/
 filer_public/
 filer_public_thumbnails/
 examples/bs3demo/private_settings.py
+examples/bs4demo/static/bs4demo/css/main__presass.scss

cmsplugin_cascade/bootstrap4/buttons.py

@@ -1,5 +1,6 @@
 from django import VERSION as DJANGO_VERSION
 from django.forms import widgets
+from django.conf import settings
 from django.forms.fields import BooleanField, CharField, ChoiceField, MultipleChoiceField
 from django.utils.html import format_html
 from django.utils.translation import ugettext_lazy as _
@@ -119,7 +120,13 @@ class BootstrapButtonMixin(IconPluginMixin):
     ring_plugin = 'ButtonMixin'
 
     class Media:
-        css = {'all': ['cascade/css/admin/bootstrap4-buttons.css', 'cascade/css/admin/iconplugin.css']}
+        if getattr(settings, 'CASCADE_THEME', None):
+            from sass_processor.processor import sass_processor
+            css = {
+                'all': [sass_processor('cascade/css/admin/bootstrap4-buttons.scss'), 'cascade/css/admin/iconplugin.css'],
+            }
+        else:
+            css = {'all': ['cascade/css/admin/bootstrap4-buttons.css', 'cascade/css/admin/iconplugin.css']}
         js = ['admin/js/jquery.init.js', 'cascade/js/admin/buttonmixin.js']
 
     def render(self, context, instance, placeholder):

cmsplugin_cascade/cms_toolbars.py

@@ -1,9 +1,12 @@
 from django.conf import settings
 from django.utils.translation import ugettext_lazy as _
+from django.conf import settings
+from django.urls import reverse
 from cms.extensions.toolbar import ExtensionToolbar
 from cms.toolbar_pool import toolbar_pool
 from cms.toolbar.items import Break
-from cms.cms_toolbars import PAGE_MENU_SECOND_BREAK
+from cms.toolbar_base import CMSToolbar
+from cms.cms_toolbars import PAGE_MENU_SECOND_BREAK, ADMIN_MENU_IDENTIFIER, USER_SETTINGS_BREAK
 from cmsplugin_cascade.models import CascadePage
 
 
@@ -19,6 +22,23 @@ def populate(self):
                 position = current_page_menu.find_first(Break, identifier=PAGE_MENU_SECOND_BREAK)
                 disabled = not self.toolbar.edit_mode_active
                 current_page_menu.add_modal_item(_("Extra Page Fields"), position=position, url=url, disabled=disabled)
+
+@toolbar_pool.register
+class CascadeToolbar(CMSToolbar):
+
+    def populate(self):
+        if getattr(settings, 'CASCADE_THEME', None):
+            admin_menu = self.toolbar.get_or_create_menu(
+                ADMIN_MENU_IDENTIFIER, _('Site'))
+            position_user_set = admin_menu.find_first(Break, identifier=USER_SETTINGS_BREAK)
+            position_theme = admin_menu.add_break('THEME', position_user_set)
+            position_theme = admin_menu.find_first(Break, identifier=USER_SETTINGS_BREAK)
+
+            admin_menu.add_modal_item(
+                name='Theme',
+                url="/theme/",
+                position=position_theme,
+                )
 
 if settings.CMSPLUGIN_CASCADE['register_page_editor']:
     toolbar_pool.register(CascadePageToolbar)

cmsplugin_cascade/dynamic_preferences_registry.py

@@ -0,0 +1,88 @@
+# cmsplugin_cascade/dynamic_preferences_registry.py
+
+from dynamic_preferences.types import BooleanPreference, StringPreference, IntPreference,LongStringPreference, ChoicePreference
+from dynamic_preferences.preferences import Section
+from dynamic_preferences.registries import global_preferences_registry
+from dynamic_preferences.users.registries import user_preferences_registry
+from django import forms
+# we create some section objects to link related preferences together
+
+
+#general = Section('general')
+#discussion = Section('discussion')
+
+
+@global_preferences_registry.register
+class FavouriteColour(StringPreference):
+    """
+    What's your favourite colour ?
+    """
+    section = "primary"
+    name = "color"
+    default = "#007bff"
+
+@global_preferences_registry.register
+class FavouriteColour(StringPreference):
+    """
+    What's your favourite colour ?
+    """
+    section = "secondary"
+    name = "color"
+    default = "#6c757d"
+
+@global_preferences_registry.register
+class FavouriteColour(StringPreference):
+    """
+    What's your favourite colour ?
+    """
+    section = "success"
+    name = "color"
+    default = "#28a745"
+
+
+@global_preferences_registry.register
+class FavouriteColour(StringPreference):
+    """
+    What's your favourite colour ?
+    """
+    section = "warning"
+    name = "color"
+    default = "#ffc107"
+
+@global_preferences_registry.register
+class FavouriteColour(StringPreference):
+    """
+    What's your favourite colour ?
+    """
+    section = "danger"
+    name = "color"
+    default = "#dc3545"
+
+
+@global_preferences_registry.register
+class FavouriteColour(StringPreference):
+    """
+    What's your favourite colour ?
+    """
+    section = "info"
+    name = "color"
+    default = "#17a2b8"
+
+@global_preferences_registry.register
+class FavouriteColour(StringPreference):
+    """
+    What's your favourite colour ?
+    """
+    section = "light"
+    name = "color"
+    default = "#f8f9fa"
+
+@global_preferences_registry.register
+class FavouriteColour(StringPreference):
+    """
+    What's your favourite colour ?
+    """
+    section = "dark"
+    name = "color"
+    default = "#343a40"
+

cmsplugin_cascade/static/cascade/css/admin/bootstrap4-buttons-theme.css

@@ -0,0 +1,21 @@
+@import get-path-file-variables-scss-presass();
+
+$theme-colors: (
+  primary: get-color-primary-presass(),
+  secondary: get-color-secondary-presass(),
+  success: get-color-success-presass(),
+  warning: get-color-warning-presass(),
+  danger: get-color-danger-presass(),
+  info: get-color-info-presass(),
+  light: get-color-light-presass(),
+  dark: get-color-dark-presass(),
+);
+
+@import "bootstrap/scss/vendor/rfs";
+@import "bootstrap/scss/mixins/border-radius";
+@import "bootstrap/scss/mixins/transition";
+@import "bootstrap/scss/mixins/hover";
+@import "bootstrap/scss/mixins/box-shadow";
+@import "bootstrap/scss/mixins/gradients";
+@import "bootstrap/scss/mixins/buttons";
+@import "bootstrap/scss/buttons";

cmsplugin_cascade/templates/cascade/admin/theme/base.html

@@ -0,0 +1,52 @@
+{% load static cms_tags bootstrap_tags sekizai_tags sass_tags %}
+<!DOCTYPE html>
+<html>
+<head>
+	<title>{% block title %}Page Title{% endblock %}</title>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<meta name="description" content="{% block meta-description %}{% endblock %}" />
+	{% block head %}{% endblock %}
+	{% render_block "css" %}
+</head>
+
+<body style="margin-bottom: 0px;">
+	<div class="sidebar">
+	</div>
+	<div class="main_content">
+	{% block content %}{% endblock %}
+	</div>
+	<script src="{% static 'node_modules/jquery/dist/jquery.min.js' %}" type="text/javascript"></script>
+	<script src="{% static 'node_modules/popper.js/dist/umd/popper.js' %}" type="text/javascript"></script>
+	<script src="{% static 'node_modules/bootstrap/dist/js/bootstrap.min.js' %}" type="text/javascript"></script>
+	<script src="{% static 'node_modules/a-color-picker/dist/acolorpicker.js' %}" type="text/javascript"></script>
+	<script type="text/javascript">
+	var picker = null, AColorPicker = window.AColorPicker;
+	if (AColorPicker) {
+	$("[id*='__color']").on('click', function(evt) {
+		var $this = $(this);
+		var $colorInput = $this.parent();
+		console.log($colorInput.val( ));
+		var options = {color: $this.val(), showAlpha: true};
+			if (picker) {
+				picker.destroy();
+			}
+			picker = AColorPicker.createPicker($this.parent(), options);
+			 	$('.a-color-picker').css("cssText", "position:absolute;padding: 2px 0 !important; z-index:1; left:33px;top:100px;");
+			picker.on('change', function(picker, color) {
+				$colorInput.css("cssText", "background-color:"+ AColorPicker.parseColor(color, 'hex') + "!important");
+				$this.val(color);
+				});
+		evt.preventDefault();
+	})}
+	$("html").mouseup(function(e) 
+	{
+	var container = $(".a-color-picker");
+	if (!container.is(e.target) && container.has(e.target).length === 0) 
+	{
+	container.hide();
+	}
+});
+	</script>
+</body>
+</html>

cmsplugin_cascade/templates/cascade/admin/theme/form.html

@@ -0,0 +1,34 @@
+{% extends "cascade/admin/theme/base.html" %}
+{% load  i18n  static cms_tags bootstrap_tags sekizai_tags sass_tags %}
+{% block head %}
+{% addtoblock "css" %}<link rel="stylesheet" href="{% sass_src 'bs4demo/css/main.scss' %}" type="text/css" />{% endaddtoblock %}
+{% endblock head %}
+{% block content %}
+    {# we continue to pass the sections key in case someone subclassed the template and use these #}
+    {# include "cascade/admin/theme/sections.html" with registry=registry sections=registry.sections #} 
+    <form action="" enctype="multipart/form-data" method="post">
+        {% csrf_token %}
+            <div class="text-center">
+    {% for field in form %}
+        {% if '__color' in field.name  %}
+        <div class="text-center fieldWrapper custom-control custom-radio custom-control-inline">
+            <div class="picker">
+            {{ field.label_tag }} 
+                <div class="preview  p-3 mb-3 bg-{{ field.name|cut:'__color' }}"> 
+                  {{ field }}
+                </div>
+             </div>
+         </div>
+       {% else %}
+       <div class="fieldWrapper p2">
+           {{ field.label_tag }} : {{ field }}
+       </div>
+       {% endif %}
+       {{ field.errors }}
+    {% endfor %}
+       </div>
+           <div class="text-center">
+              <input class="btn btn-secondary btn-lg" type="submit" value="{% trans 'Submit' %}" />
+           </div>
+    </form>
+{% endblock %}

cmsplugin_cascade/templates/cascade/admin/theme/sections.html

@@ -0,0 +1,8 @@
+<ul class="sections">
+    {% for section in registry.section_objects.values %}
+        <li>
+            <a href="{% if registry.section_url_namespace %}{% url registry.section_url_namespace section=section.name %}{% else %}./{{ section.name }}{% endif %}">{{ section.verbose_name }}</a>
+        </li>
+    {% endfor %}
+</ul>
+

cmsplugin_cascade/theme/urls.py

@@ -0,0 +1,10 @@
+from django.conf.urls import include, url
+from django.conf import settings
+from cmsplugin_cascade.theme.views import myview, CascadePreferenceFormView
+
+if getattr(settings, 'CASCADE_THEME', None):
+    extra_cascade_theme_patterns = [
+    url(r'^theme/',CascadePreferenceFormView.as_view()),
+    ]
+else:
+    extra_cascade_theme_patterns = []

cmsplugin_cascade/theme/utils.py

@@ -0,0 +1,36 @@
+from django.conf import settings
+from dynamic_preferences.registries import global_preferences_registry
+# We instantiate a manager for our global preferences
+global_preferences = global_preferences_registry.manager()
+
+def get_color_primary():
+    return global_preferences['primary__color']
+
+def get_color_secondary():
+    return global_preferences['secondary__color']
+
+def get_color_success():
+    return global_preferences['success__color']
+
+def get_color_warning():
+    return global_preferences['warning__color']
+
+def get_color_danger():
+    return global_preferences['danger__color']
+
+def get_color_info():
+    return global_preferences['info__color']
+
+def get_color_light():
+    return global_preferences['light__color']
+
+def get_color_dark():
+    return global_preferences['dark__color']
+
+def get_path_file_variables_scss():
+    if getattr(settings, 'CASCADE_SCSS_VARIABLES', None):
+        path_variables_scss = '"../{}"'.format( settings.CASCADE_SCSS_VARIABLES)
+    else:
+        project_name =  settings.ROOT_URLCONF.split('.')[0]
+        path_variables_scss  = '"../{0}/static/{0}/css/variables.scss"'.format(project_name)
+    return path_variables_scss 

cmsplugin_cascade/theme/views.py

@@ -0,0 +1,24 @@
+from dynamic_preferences.registries import global_preferences_registry
+from django.shortcuts import render
+from dynamic_preferences.views import PreferenceFormView
+
+# We instantiate a manager for our global preferences
+global_preferences = global_preferences_registry.manager()
+
+# Now, we can use it to retrieve our preferences
+# the lookup for a preference has the following form: <section>__<name>
+from dynamic_preferences.forms import GlobalPreferenceForm
+
+class CascadePreferenceFormView( PreferenceFormView):
+    template_name = "cascade/admin/theme/form.html"
+    registry = None
+    form_class = None
+    registry = global_preferences_registry
+    form_class = GlobalPreferenceForm 
+
+def myview(request):
+    presentation = global_preferences['general__presentation']
+
+    return render(request, 'example.html', {
+        'presentation': presentation,
+    })