Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

feat: Implement new Django CMS design language for Django CMS 5.1#8320

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
fsbraun wants to merge26 commits intomain
base:main
Choose a base branch
Loading
fromfeat/new-design

Conversation

fsbraun
Copy link
Member

@fsbraunfsbraun commentedAug 25, 2025
edited by sourcery-aibot
Loading

Description

This PR implements thenew design language for Django CMS.

Related resources

image

Checklist

Summary by Sourcery

Implement the new Django CMS 5.1 design language by migrating to CSS variable–driven theming, updating the color palette, spacing, border radii, shadows and typography, and adjusting all core UI components to match the new spec. Also refine Sass code with modern module imports and functions, add an external-placeholder icon, and fix sticky header toolbar height logic.

New Features:

  • Add external-placeholder icon and support in toolbar and dragbar templates.

Bug Fixes:

  • Ensure toolbarHeight falls back to zero in PageTreeStickyHeader and update tests to expect the new default.

Enhancements:

  • Migrate theme variables to CSS custom properties and dynamic light/dark palettes using color-mix and light-dark functions.
  • Revamp global design tokens (colors, border-radii, spacing, shadows, typography) and apply them across buttons, modals, dialogs, dropdowns, tooltips, pagetree, toolbar, sideframe, structureboard, plugin picker and other components.
  • Refactor Sass to use@use imports and modern module APIs for mixins, z-index utilities and iconography mappings.

@sourcery-aiSourcery AI
Copy link
Contributor

sourcery-aibot commentedAug 25, 2025
edited
Loading

Reviewer's Guide

This PR implements the new Django CMS design language by introducing design tokens and theme variables, refactoring Sass to modern modules and mixins, and updating component styles, templates, and JS logic throughout the admin UI to align with the new visual system.

Class diagram for updated icon mapping and new icon addition

classDiagram    class IconMap {        +getIconChar(filename)    }    class ExternalPlaceholderIcon {        +char = "E017"    }    IconMap <|-- ExternalPlaceholderIcon
Loading

File-Level Changes

ChangeDetailsFiles
Introduce new design tokens and theming variables
  • Add CSS variables for colors, radii, spacing with light/dark support
  • Implement light-dark mixing and data-cms-theme overrides
  • Define border-radius and default spacing variables
cms/static/cms/sass/settings/_cms.scss
Refactor Sass to use modern modules and mixins
  • Replace manual unquote with string.unquote, use sass:list and sass:color
  • Update z-index helper to use sass:map and sass:meta
  • Clean up button-variant mixin logic and remove legacy filters
cms/static/cms/sass/mixins/_buttons.scss
cms/static/cms/sass/mixins/_zindex.scss
cms/static/cms/sass/components/_dropdown.scss
Revamp component styles across admin UI
  • Adjust button, modal, dialog, tooltip, dropdown, and sideframe border-radius, shadows, and backgrounds
  • Update typography sizes, spacing, and icon sizes for consistent rhythm
  • Apply new color variables for caution, success, warning states
cms/static/cms/sass/components/_button.scss
cms/static/cms/sass/components/_modal.scss
cms/static/cms/sass/components/_toolbar.scss
cms/static/cms/sass/components/_tooltip.scss
cms/static/cms/sass/components/_structureboard.scss
Update iconography
  • Increase icon font size from 16px to 18px
  • Reorder and add glyph mappings including external-placeholder
  • Add .cms-icon-external-placeholder helper class
cms/static/cms/sass/components/_iconography.scss
cms/static/cms/sass/libs/_iconfont.scss
Adjust pagetree layout and styling
  • Reduce cell heights and tweak paddings and spacings
  • Update background, border and dropdown styling
  • Refactor header, legend and jstree theme to new color tokens
cms/static/cms/sass/components/pagetree/_tree.scss
cms/static/cms/sass/settings/_pagetree.scss
Enhance sticky header JS logic and tests
  • Wrap branding selector search in .djangocms-admin-style
  • Fallback toolbar height to 0 when missing
  • Update unit tests to reflect new selector and default behavior
cms/static/cms/js/modules/cms.pagetree.stickyheader.js
cms/tests/frontend/unit/cms.pagetree.stickyheader.test.js
Update templates for legend and dragbar
  • Remove condensed legend class, adjust section wrapper and padding
  • Add tabindex and external-placeholder tooltip icon in dragbar
  • Clean up HTML structure to match new design language
cms/templates/admin/cms/page/tree/legend.html
cms/templates/cms/toolbar/dragbar.html

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment@sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with@sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write@sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write@sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment@sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment@sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment@sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment@sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access yourdashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@codecovCodecov
Copy link

codecovbot commentedAug 25, 2025
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.71%. Comparing base (f5d2f0a) to head (69d8259).

Additional details and impacted files
@@           Coverage Diff           @@##             main    #8320   +/-   ##=======================================  Coverage   89.71%   89.71%           =======================================  Files         129      129             Lines       12750    12750           =======================================  Hits        11439    11439             Misses       1311     1311

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report?Share it here.

🚀 New features to boost your workflow:
  • ❄️Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@fsbraunfsbraun reopened thisSep 10, 2025
@fsbraunfsbraun marked this pull request as ready for reviewSeptember 30, 2025 07:40
Copy link
Contributor

@sourcery-aisourcery-aibot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Hey there - I've reviewed your changes and they look great!

Prompt for AI Agents
Please address the comments from this code review:##Individual Comments###Comment 1<location>`cms/static/cms/sass/components/_modal.scss:271-272` </location><code_context>     .cancel-link {         display: none;     }+    float: inline-end;+    &:has(.deletelink) {+   float: inline-start;+    }</code_context><issue_to_address>**issue:** Float logic for modal item buttons now uses inline-end and inline-start based on content.Confirm that all target browsers support the:has() selector, or implement a fallback for those that do not.</issue_to_address>###Comment 2<location>`cms/static/cms/sass/components/pagetree/_tree.scss:215-216` </location><code_context>         display: table-cell;         vertical-align: middle;         position: relative;-   outline: none;-   color: $white !important;-   padding-block: 8px !important;-   padding-inline: 10px !important;</code_context><issue_to_address>**issue:** Removed outline and forced color from pagetree header button.Please ensure a visible focus indicator remains for keyboard users to maintain accessibility standards.</issue_to_address>###Comment 3<location>`cms/static/cms/sass/settings/_cms.scss:16` </location><code_context>+    --dca-light: #defcb9;+    --dca-white: light-dark(#FFF,#000);+    --dca-black: light-dark(#2a2c2e, rgb(from white calc(r - 45) calc(g - 44) calc(b - 46)));+    --dca-primary: light-dark(var(--dca-dark), rgb(from var(--dca-light) calc(r - 45) calc(g - 44) calc(b - 46)));+    --dca-secondary: light-dark(var(--dca-light), var(--dca-dark));+    --dca-red: #d44848;</code_context><issue_to_address>**issue:** Primary color now uses dynamic calculation based on theme.Please verify that the dynamic color calculation works consistently across all supported browsers, especially in those without rgb(from ...) support.</issue_to_address>###Comment 4<location>`cms/tests/frontend/unit/cms.pagetree.stickyheader.test.js:84-91` </location><code_context>             spyOn(sticky, '_isInSideframe').and.returnValue(false);-       $('<div></div>').prependTo(sticky.ui.container);-       expect(sticky.toolbarHeight).toEqual(null);+       $('<div><div></div></div>')+           .prependTo(sticky.ui.container);+       expect(sticky.toolbarHeight).toEqual(0);</code_context><issue_to_address>**suggestion (testing):** Consider adding a test for when the branding element is missing.Adding this test will verify that the fallback logic for toolbarHeight functions correctly when the branding element is not present.```suggestion        it('saves toolbar height if in admin', function() {            spyOn(sticky, '_isInSideframe').and.returnValue(false);            $('<div><div></div></div>')                .prependTo(sticky.ui.container);            expect(sticky.toolbarHeight).toEqual(0);            sticky._saveSizes();            expect(sticky.toolbarHeight).toEqual(200);        });        it('sets toolbarHeight to 0 when branding element is missing', function() {            spyOn(sticky, '_isInSideframe').and.returnValue(false);            // Only add the admin style container, no branding element            $('<div></div>').prependTo(sticky.ui.container);            expect(sticky.toolbarHeight).toEqual(0);            sticky._saveSizes();            // Expect toolbarHeight to remain 0 (fallback logic)            expect(sticky.toolbarHeight).toEqual(0);        });```</issue_to_address>###Comment 5<location>`cms/tests/frontend/unit/cms.pagetree.stickyheader.test.js:88` </location><code_context>-       expect(sticky.toolbarHeight).toEqual(null);+       $('<div><div></div></div>')+           .prependTo(sticky.ui.container);+       expect(sticky.toolbarHeight).toEqual(0);       sticky._saveSizes();       expect(sticky.toolbarHeight).toEqual(200);</code_context><issue_to_address>**nitpick (testing):** Update test description to clarify the expected initial value of toolbarHeight.Update the test description and related comments to reflect that toolbarHeight now defaults to 0 instead of null.</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

sourcery-ai[bot] reacted with thumbs up emojisourcery-ai[bot] reacted with thumbs down emoji
Comment on lines +271 to +272
float:inline-end;
&:has(.deletelink) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

issue: Float logic for modal item buttons now uses inline-end and inline-start based on content.

Confirm that all target browsers support the :has() selector, or implement a fallback for those that do not.

sourcery-ai[bot] and fsbraun reacted with thumbs up emojisourcery-ai[bot] reacted with thumbs down emoji
--dca-light:#defcb9;
--dca-white:light-dark(#FFF,#000);
--dca-black:light-dark(#2a2c2e,rgb(fromwhitecalc(r-45)calc(g-44)calc(b-46)));
--dca-primary:light-dark(var(--dca-dark),rgb(fromvar(--dca-light)calc(r-45)calc(g-44)calc(b-46)));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

issue: Primary color now uses dynamic calculation based on theme.

Please verify that the dynamic color calculation works consistently across all supported browsers, especially in those without rgb(from ...) support.

sourcery-ai[bot] reacted with thumbs up emojisourcery-ai[bot] reacted with thumbs down emoji
expect(sticky.toolbarHeight).toEqual(null);
$('<div class="djangocms-admin-style"><div id="branding" style="height: 200px"></div></div>')
.prependTo(sticky.ui.container);
expect(sticky.toolbarHeight).toEqual(0);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

nitpick (testing): Update test description to clarify the expected initial value of toolbarHeight.

Update the test description and related comments to reflect that toolbarHeight now defaults to 0 instead of null.

sourcery-ai[bot] reacted with thumbs up emojisourcery-ai[bot] reacted with thumbs down emoji
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Reviewers

@sourcery-aisourcery-ai[bot]sourcery-ai[bot] left review comments

+1 more reviewer

@PeterW-LWLPeterW-LWLPeterW-LWL left review comments

Reviewers whose approvals may not affect merge requirements

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

2 participants
@fsbraun@PeterW-LWL

[8]ページ先頭

©2009-2025 Movatter.jp