Merge branch 'develop' into igobranco/cache-ttl-business-logic-v2

django-cms · Jun 8, 2022 · 368a740 · 368a740
2 parents 97ed941 + 05b6d83
commit 368a740
Show file tree

Hide file tree

Showing 34 changed files with 398 additions and 122 deletions.
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
@@ -5,6 +5,10 @@ Changelog
 unreleased
 ==========
 
+* Added dark mode support to css, dark mode settings and toggle button
+* Fix publishing of static placeholders outside of CMS pages
+* Allow to override the template rendered after a plugin has been saved.
+* Revert change to the toolbar sites menu to use ``http`` protocol.
 
 3.10.0 (2022-03-26)
 ===================
@@ -72,10 +76,6 @@ With the review help of the following contributors:
 
 Thanks to all contributors for their efforts!
 
-* Added dark mode support to css
-* Fix publishing of static placeholders outside of CMS pages
-* Allow to override the template rendered after a plugin has been saved.
-
 3.9.0 (2021-06-30)
 ==================
 

diff --git a/cms/admin/settingsadmin.py b/cms/admin/settingsadmin.py
@@ -11,7 +11,7 @@
     HttpResponse, HttpResponseBadRequest, HttpResponseRedirect,
 )
 from django.http.request import QueryDict
-from django.urls import re_path
+from django.urls import Resolver404, re_path, resolve
 from django.utils.translation import override
 
 from cms.admin.forms import RequestToolbarForm
@@ -97,6 +97,10 @@ def get_toolbar(self, request):
         request = copy.copy(request)
         request.GET = data
         request.current_page = current_page
+        try:
+            request.resolver_match = resolve(origin_url.path)
+        except Resolver404:
+            pass
         request.toolbar = CMSToolbar(request, request_path=origin_url.path, _async=True)
         request.toolbar.set_object(attached_obj or current_page)
         return HttpResponse(request.toolbar.render())

diff --git a/cms/cms_toolbars.py b/cms/cms_toolbars.py
@@ -94,6 +94,22 @@ def add_wizard_button(self):
                                       disabled=disabled,
                                       on_close=REFRESH_PAGE)
 
+@toolbar_pool.register
+class AppearanceToolbar(CMSToolbar):
+    """
+    Adds appearance switches, esp. for dark and light mode
+    """
+    color_scheme_toggle = get_cms_setting('COLOR_SCHEME_TOGGLE')
+
+    def populate(self):
+        if self.color_scheme_toggle:
+            dark_mode_toggle = TemplateItem(
+                template="cms/toolbar/items/dark_mode_toggle.html",
+                side=self.toolbar.RIGHT,
+            )
+            self.toolbar.add_item(dark_mode_toggle)
+
+
 
 @toolbar_pool.register
 class BasicToolbar(CMSToolbar):
@@ -129,7 +145,7 @@ def add_admin_menu(self):
                 sites_menu.add_sideframe_item(_('Admin Sites'), url=admin_reverse('sites_site_changelist'))
                 sites_menu.add_break(ADMIN_SITES_BREAK)
                 for site in sites_queryset:
-                    sites_menu.add_link_item(site.name, url='https://%s' % site.domain,
+                    sites_menu.add_link_item(site.name, url='http://%s' % site.domain,
                                              active=site.pk == self.current_site.pk)
 
             # admin

diff --git a/cms/middleware/language.py b/cms/middleware/language.py
@@ -2,6 +2,8 @@
 from django.utils.deprecation import MiddlewareMixin
 from django.utils.translation import get_language
 
+from cms.utils.compat import DJANGO_3_0
+
 
 class LanguageCookieMiddleware(MiddlewareMixin):
     def __init__(self, get_response):
@@ -18,14 +20,21 @@ def __call__(self, request):
         # To ensure support of very old browsers, Django processed automatically "expires" according to max_age value.
         # https://docs.djangoproject.com/en/3.2/ref/request-response/#django.http.HttpResponse.set_cookie
 
+        cookie_kwargs = {
+            'value': language,
+            'domain': settings.LANGUAGE_COOKIE_DOMAIN,
+            'max_age': settings.LANGUAGE_COOKIE_AGE or 365 * 24 * 60 * 60,  # 1 year
+            'path': settings.LANGUAGE_COOKIE_PATH,
+        }
+        if DJANGO_3_0:
+            cookie_kwargs.update({
+                'httponly': settings.LANGUAGE_COOKIE_HTTPONLY,
+                'samesite': settings.LANGUAGE_COOKIE_SAMESITE,
+                'secure': settings.LANGUAGE_COOKIE_SECURE,
+            })
+
         response.set_cookie(
             settings.LANGUAGE_COOKIE_NAME,
-            value=language,
-            domain=settings.LANGUAGE_COOKIE_DOMAIN,
-            max_age=settings.LANGUAGE_COOKIE_AGE or 365 * 24 * 60 * 60,  # 1 year
-            httponly=settings.LANGUAGE_COOKIE_HTTPONLY,
-            path=settings.LANGUAGE_COOKIE_PATH,
-            samesite=settings.LANGUAGE_COOKIE_SAMESITE,
-            secure=settings.LANGUAGE_COOKIE_SECURE,
+            **cookie_kwargs
         )
         return response
diff --git a/cms/static/cms/fonts/src/moon.svg b/cms/static/cms/fonts/src/moon.svg
diff --git a/cms/static/cms/fonts/src/sun.svg b/cms/static/cms/fonts/src/sun.svg
diff --git a/cms/static/cms/js/modules/cms.structureboard.js b/cms/static/cms/js/modules/cms.structureboard.js
@@ -1022,26 +1022,24 @@ class StructureBoard {
         // refresh toolbar
         var currentMode = CMS.settings.mode;
 
-        this._loadToolbar()
-            .done(newToolbar => {
-                CMS.API.Toolbar._refreshMarkup($(newToolbar).find('.cms-toolbar'));
-            })
-            .fail(() => Helpers.reloadBrowser());
-
         if (currentMode === 'structure') {
             this._requestcontent = null;
 
             if (this._loadedContent && action !== 'COPY') {
                 this.updateContent();
+                return;  // Toolbar loaded
             }
-            return;
-        }
-
-        // invalidate the content mode
-        if (action !== 'COPY') {
+        } else if (action !== 'COPY') {
             this._requestcontent = null;
             this.updateContent();
+            return;  // Toolbar loaded
+
         }
+        this._loadToolbar()
+            .done(newToolbar => {
+                CMS.API.Toolbar._refreshMarkup($(newToolbar).find('.cms-toolbar'));
+            })
+            .fail(() => Helpers.reloadBrowser());
     }
 
     _propagateInvalidatedState(action, data) {

diff --git a/cms/static/cms/js/modules/cms.toolbar.js b/cms/static/cms/js/modules/cms.toolbar.js
@@ -421,6 +421,12 @@ var Toolbar = new Class({
             this._debug();
         }
 
+        if (CMS.settings.color_scheme) {
+            this.set_color_scheme (CMS.settings.color_scheme);
+        } else if (CMS.config.color_scheme) {
+            this.set_color_scheme (CMS.config.color_scheme);
+        }
+
         // check if there are messages and display them
         if (CMS.config.messages) {
             CMS.API.Messages.open({
@@ -616,6 +622,18 @@ var Toolbar = new Class({
                     onSuccess: el.data('on-success')
                 });
                 break;
+            case 'color-toggle':
+                switch (this.get_color_scheme()) {
+                    case 'light':
+                        this.set_color_scheme('dark');
+                        break;
+                    case 'dark':
+                        this.set_color_scheme('light');
+                        break;
+                    default:
+                        break;
+                }
+                break;
             default:
                 Helpers._getWindow().location.href = el.attr('href');
         }
@@ -756,6 +774,55 @@ var Toolbar = new Class({
         CMS.API.Clipboard.ui.triggers = $('.cms-clipboard-trigger a');
         CMS.API.Clipboard.ui.triggerRemove = $('.cms-clipboard-empty a');
         CMS.API.Clipboard._toolbarEvents();
+    },
+
+    /**
+     * Get color scheme either from :root[data-color-scheme] or user system setting
+     *
+     * @method get_color_scheme
+     * @public
+     * @returns {String}
+     */
+    get_color_scheme: function () {
+        let state = this.ui.body.attr('data-color-scheme');
+
+        if (!state && window.matchMedia) {
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                state = 'dark'; // dark mode
+            } else {
+                state = 'light';
+            }
+        }
+        return state;
+    },
+
+    /**
+     * Sets the color scheme for the current document and all iframes contained.
+     *
+     * @method set_color_scheme
+     * @public
+     * @param scheme {String}
+     * @retiurns {void}
+     */
+
+    set_color_scheme: function (scheme) {
+        CMS.API.Helpers.setSettings({ color_scheme: scheme });
+        if (scheme === 'auto') {
+            this.ui.body.removeAttr('data-color-scheme');
+            this.ui.body.find('div.cms iframe').each(function(i, e) {
+                delete e.contentDocument.documentElement.dataset.colorScheme;
+            });
+        } else {
+            this.ui.body.attr('data-color-scheme', scheme);
+            this.ui.body.find('div.cms iframe').each(function setFrameColorScheme(i, e) {
+                if (e.contentDocument) {
+                    e.contentDocument.documentElement.dataset.colorScheme = scheme;
+                    // ckeditor (and potentially other apps) have iframes inside their admin forms
+                    // also set color scheme there
+                    $(e.contentDocument).find('iframe').each(setFrameColorScheme);
+                }
+            });
+        }
     }
 });
 

diff --git a/cms/static/cms/sass/cms.base.scss b/cms/static/cms/sass/cms.base.scss
@@ -18,6 +18,7 @@
 @import "components/dialog";
 @import "components/content";
 @import "components/loader";
+@import "components/dark-mode-toggle";
 
 // div.cms needs to beat .cms-reset a selectors
 div.cms {
@@ -33,8 +34,6 @@ div.cms {
     @import "components/pluginpicker";
     @import "components/shortcuts";
 
-    color-scheme: light dark;
-
     *:not(.cms-modal):focus {
         outline: 2px dotted $gray-darker;
         outline-offset: -3px;

diff --git a/cms/static/cms/sass/components/_dark-mode-toggle.scss b/cms/static/cms/sass/components/_dark-mode-toggle.scss
@@ -0,0 +1,25 @@
+@use "sass:math";
+
+div.cms .cms-toolbar-item-dark-mode-toggle span.cms-icon.cms-toggle {
+    font-size: 170%;
+    line-height: 150%;
+    color: var(--dca-gray-darkest);
+}
+
+html[data-color-scheme="light"] .cms-toolbar-item-dark-mode-toggle .cms-toggle {
+    @extend .cms-icon-moon;
+}
+
+html[data-color-scheme="dark"] .cms-toolbar-item-dark-mode-toggle .cms-toggle {
+    @extend .cms-icon-sun;
+}
+
+html:not([data-color-scheme]) .cms-toolbar-item-dark-mode-toggle .cms-toggle {
+    @extend .cms-icon-moon;
+}
+
+@media (prefers-color-scheme: dark) {
+   html:not([data-color-scheme]) .cms-toolbar-item-dark-mode-toggle .cms-toggle {
+       // @extend .cms-icon-sun;
+    }
+}
diff --git a/cms/static/cms/sass/components/_dialog.scss b/cms/static/cms/sass/components/_dialog.scss
@@ -1,5 +1,6 @@
 //##############################################################################
 // DIALOG
+@use "sass:math";
 
 // used in: /cms/admin/page/tree/copy_premissions
 .cms-dialog {
@@ -9,7 +10,7 @@
     z-index: z(dialog);
     box-sizing: border-box;
     width: $dialog-width;
-    margin: -100px 0 0 (-$dialog-width/2);
+    margin: -100px 0 0  math.div(-$dialog-width, 2);
     padding: $padding-large;
     border: 1px solid $gray-lighter;
     border-radius: $dialog-border-radius;

diff --git a/cms/static/cms/sass/components/_hovertooltip.scss b/cms/static/cms/sass/components/_hovertooltip.scss
@@ -1,5 +1,6 @@
 //##############################################################################
 // TOOLTIP
+@use "sass:math";
 
 .cms-hover-tooltip {
     position: relative;
@@ -84,7 +85,7 @@
 }
 
 .cms-hover-tooltip:after {
-    margin-left: -$hover-tooltip-width / 2;
+    margin-left: math.div(-$hover-tooltip-width, 2);
 }
 
 .cms-hover-tooltip:hover:before,