fix: django shortcuts styling (#481)

* Fix: Shortcut positioning
* Add: CSS with shortcuts support
* Bump version to 3.2.2
* add info to changelog and reademe.md
* Update readme

Co-authored-by: Mark Walker <[email protected]>

Author: fsbraun

CHANGELOG.rst

@@ -2,6 +2,11 @@
 Changelog
 =========
 
+3.2.2 (2023-01-06)
+==================
+
+* Fix support of django-shortcuts with original icons from django-shortcuts
+
 3.2.1 (2022-12-15)
 ==================
 

README.rst

@@ -4,7 +4,8 @@ django CMS Admin Style
 
 |pypi| |build| |coverage|
 
-Adds pretty CSS styles for the django CMS admin interface.
+Adds pretty CSS styles for the django CMS admin interface. Supports optional
+``django-admin-shortcuts`` package.
 
 
 .. note::
@@ -85,6 +86,57 @@ To **compile CSS** run the following commands using **node 16**:
 
 For further options have a look at the ``gulpfile.js``.
 
+Dark mode support
+-----------------
+
+Django supports a dark mode admin since version 3.1. djangocms-admin-style
+introduces css variables that contain color codes and change with the selected
+mode:
+
++-------------------------------+-----------+---------------------------+-----------+
+| **CMS variable name**         | **Color** | **Django admin fallback** | **Color** |
++-------------------------------+-----------+---------------------------+-----------+
+| ``--dca-white``               | #ffffff   | ``--body-bg``             | #ffffff   |
++-------------------------------+-----------+---------------------------+-----------+
+| ``--dca-black``               | #000000   | ``--body-fg``             | #303030   |
++-------------------------------+-----------+---------------------------+-----------+
+| ``--dca-gray``                | #666      | ``--body-quiet-color``    | #666      |
++-------------------------------+-----------+---------------------------+-----------+
+| ``--dca-gray-lightest``       | #f2f2f2   | ``--darkened-bg``         | #f8f8f8   |
++-------------------------------+-----------+---------------------------+-----------+
+| ``--dca-gray-lighter``        | #ddd      | ``--border-color``        | #ccc      |
++-------------------------------+-----------+---------------------------+-----------+
+| ``--dca-gray-light``          | #999      | ``--close-button-bg``     | #888      |
++-------------------------------+-----------+---------------------------+-----------+
+| ``--dca-gray-darker``         | #454545   |                           |           |
++-------------------------------+-----------+---------------------------+-----------+
+| ``--dca-gray-darkest``        | #333      |                           |           |
++-------------------------------+-----------+---------------------------+-----------+
+| ``--dca-gray-super-lightest`` | #f7f7f7   |                           |           |
++-------------------------------+-----------+---------------------------+-----------+
+| ``--dca-primary``             | #00bbff   | ``--primary``             | #79aec8   |
++-------------------------------+-----------+---------------------------+-----------+
+
+
+Extending styles in your own app
+---------------------------------
+
+If your project or app requires specific styles if djangocms-admin-style is
+installed (e.g., to better adjust to the django CMS style) you can add selective
+styling by adding the ``.djangocms-admin-style`` selector::
+
+    // Show widget in CMS colors if djangocms-admin-style is installed
+    .djangocms-admin-style #my-widget {
+        color:  var(--dca-primary, black);
+    }
+
+We recommend to following rules for your app's admin css:
+
+- Try avoid using ``color``, ``background`` etc. styles where possible and meaningful
+- If necessary use as few as possible standard django CMS colors (preferably
+  from see above list with fallback colors)
+- Usage: ``var(--dca-color-var, var(--fallback-color-var, #xxxxxx))`` where
+  ``#xxxxxx`` represents the light version of the color.
 
 Running Tests
 -------------

djangocms_admin_style/__init__.py

@@ -1 +1,19 @@
-__version__ = '3.2.1'
+"""
+See PEP 440 (https://www.python.org/dev/peps/pep-0440/)
+
+Release logic:
+ 1. Increase version number (change __version__ below).
+ 2. Ensure the static bundle is upto date with ``nvm use && gulp icons && gulp sass bundle``
+ 3. Assure that all changes have been documented in CHANGELOG.rst.
+ 4. In setup.py check that
+   - versions from all third party packages are pinned in ``REQUIREMENTS``.
+   - the list of ``CLASSIFIERS`` is up-to-date.
+ 5. git add djangocms_admin_style/__init__.py CHANGELOG.rst setup.py
+ 6. git commit -m 'Bump to {new version}'
+ 7. git push
+ 8. Assure that all tests pass on https://github.com/django-cms/djangocms-admin-style/actions
+ 9. Create a new release on https://github.com/django-cms/djangocms-admin-style/releases/new
+10. Publish the release when ready
+11. Github actions will publish the new package to pypi
+"""
+__version__ = '3.2.2'

djangocms_admin_style/sass/components/_shortcuts.scss

@@ -55,181 +55,6 @@
                 font-size: 30px;
                 margin-right: 0;
             }
-            // replaces shortcut link images with icon font #199
-            .archive {
-                @include icon(archive);
-            }
-            .back {
-                @include icon(reply);
-            }
-            .basket {
-                @include icon(shopping-cart);
-            }
-            .blog {
-                @include icon(comment);
-            }
-            .camera {
-                @include icon(camera);
-            }
-            .card {
-                @include icon(credit-card);
-            }
-            .cash {
-                @include icon(money);
-            }
-            .certificate {
-                @include icon(certificate);
-            }
-            .clock {
-                @include icon(clock);
-            }
-            .cloud1 {
-                @include icon(cloud);
-            }
-            .cloud2 {
-                @include icon(cloud-upload);
-            }
-            .cloud3 {
-                @include icon(cloud-download);
-            }
-            .cloud4 {
-                @include icon(refresh);
-            }
-            .config {
-                @include icon(cog);
-            }
-            .config2 {
-                @include icon(cog);
-            }
-            .date {
-                @include icon(calendar);
-            }
-            .delivery1 {
-                @include icon(envelope-square);
-            }
-            .delivery2 {
-                @include icon(envelope);
-            }
-            .diskette {
-                @include icon(floppy-o);
-            }
-            .file1 {
-                @include icon(file);
-            }
-            .file2 {
-                @include icon(files-o);
-            }
-            .film {
-                @include icon(film);
-            }
-            .flag {
-                @include icon(flag);
-            }
-            .folder {
-                @include icon(folder-open);
-            }
-            .gamepad {
-                @include icon(gamepad);
-            }
-            .garbage {
-                @include icon(trash);
-            }
-            .gift {
-                @include icon(gift);
-            }
-            .help {
-                @include icon(life-ring);
-            }
-            .home {
-                @include icon(home);
-            }
-            .key {
-                @include icon(key);
-            }
-            .less {
-                @include icon(minus-circle);
-            }
-            .letter {
-                @include icon(file-text);
-            }
-            .letters {
-                @include icon(newspaper-o);
-            }
-            .light {
-                @include icon(lightbulb-o);
-            }
-            .lock {
-                @include icon(lock);
-            }
-            .love {
-                @include icon(heart);
-            }
-            .mail {
-                @include icon(envelope);
-            }
-            .monitor {
-                @include icon(desktop);
-            }
-            .music {
-                @include icon(music);
-            }
-            .note {
-                @include icon(file-text);
-            }
-            .notepad {
-                @include icon(file-text);
-            }
-            .ok {
-                @include icon(check);
-            }
-            .package {
-                @include icon(cube);
-            }
-            .pencil {
-                @include icon(pencil);
-            }
-            .phone {
-                @include icon(mobile);
-            }
-            .picture {
-                @include icon(picture-o);
-            }
-            .pin {
-                @include icon(map-marker);
-            }
-            .plus {
-                @include icon(plus-circle);
-            }
-            .print {
-                @include icon(print);
-            }
-            .sound {
-                @include icon(volume-up);
-            }
-            .suitcase {
-                @include icon(suitcase);
-            }
-            .tag {
-                @include icon(tag);
-            }
-            .ticket {
-                @include icon(ticket);
-            }
-            .tool {
-                @include icon(wrench);
-            }
-            .unlock {
-                @include icon(unlock-alt);
-            }
-            .user {
-                @include icon(user);
-            }
-            .warning {
-                @include icon(exclamation-triangle);
-            }
-            .zoom {
-                @include icon(search-plus);
-            }
         }
     }
 }

djangocms_admin_style/sass/djangocms-admin.scss

@@ -28,7 +28,7 @@
 @import "components/header";
 // @import "components/filer";
 @import "components/footer";
-// @import "components/shortcuts";
+@import "components/shortcuts";
 @import "components/drag-and-drop";
 @import "components/cms-update";
 @import "components/django-nested-admin";

djangocms_admin_style/static/djangocms_admin_style/css/djangocms-admin.css

@@ -3,6 +3,8 @@
 
 from setuptools import find_packages, setup
 
+from djangocms_admin_style import __version__
+
 
 REQUIREMENTS = []
 
@@ -35,6 +37,7 @@
     'Framework :: Django CMS :: 3.10',
     'Framework :: Django CMS :: 3.11',
     'Framework :: Django CMS :: 4.0',
+    'Framework :: Django CMS :: 4.1',
     'Topic :: Internet :: WWW/HTTP',
     'Topic :: Internet :: WWW/HTTP :: Dynamic Content',
     'Topic :: Software Development',
@@ -46,7 +49,7 @@
 
 setup(
     name='djangocms-admin-style',
-    version='3.2.1',
+    version=__version__,
     author='Divio AG',
     author_email='[email protected]',
     maintainer='Django CMS Association and contributors',