emoji icons and support django 5.0

alesdotio · Jul 28, 2024 · 5d614e2 · 5d614e2
1 parent 1f0fb47
commit 5d614e2
Show file tree

Hide file tree

Showing 13 changed files with 262 additions and 137 deletions.
diff --git a/README.md b/README.md
@@ -52,7 +52,7 @@ ADMIN_SHORTCUTS = [
 
 Where ...
 
-* required `url_name` is a name that will be resolved using Django's reverse url method (see Django docs https://docs.djangoproject.com/en/2.0/ref/contrib/admin/#admin-reverse-urls)
+* required `url_name` is a name that will be resolved using Django's reverse url method (see Django docs https://docs.djangoproject.com/en/5.0/ref/contrib/admin/#admin-reverse-urls)
 * optional `app_name` is the name of the admin app that will be used for URL reversal. You can safely ignore this if you have only one admin site in your ``urls.py``
 * optional `url` is a direct link that will override `url_name`
 * optional `url_extra` is extra stuff to be attached at the end of the url (like GET data for pre-filtering admin views)
@@ -63,25 +63,21 @@ Where ...
   Like above, this function can optionally take one argument `request` as well.
 * optional `has_perms` is a list of strings representing the built-in admin permissions required to display the shortcut.
 * optional `open_new_window` sets whether the link should open in a new window (default is False)
-* optional `icon` is a Font Awesome Solid https://fontawesome.com/icons?d=gallery&s=solid icon class (if you don't specify one, magical ponies will do it for you)
+* optional `icon` is an emoji (if you don't specify one, magical ponies will do it for you)
 
 4) profit!!
 
 5) optionally, also add ``ADMIN_SHORTCUTS_SETTINGS`` to your settings
 
 ```
 ADMIN_SHORTCUTS_SETTINGS = {
-    'show_on_all_pages': False,
-    'hide_app_list': False,
     'open_new_window': False,
 }
 ```
 
 
 Where ...
 
-* optional `show_on_all_pages` shows the shortcuts on all admin pages
-* optional `hide_app_list` collapses the app list
 * optional `open_new_window` makes all shortcuts open in a new window
 
 
@@ -113,7 +109,6 @@ ADMIN_SHORTCUTS = [
                 'title': 'Add user',
                 'url_name': 'admin:auth_user_add',
                 'test_func': 'example.utils.has_perms_to_users',
-           'url_name': 'admin:auth_user_add',
                 'has_perms': 'example.utils.has_perms_to_users',
             },
         ]
@@ -128,10 +123,10 @@ ADMIN_SHORTCUTS = [
             {
                 'title': 'Files',
                 'url_name': 'admin:index',
+                'icon': '❤️'
             },
             {
                 'title': 'Contact forms',
-                'icon': 'columns',
                 'url_name': 'admin:index',
                 'count_new': '3',
             },
@@ -148,8 +143,6 @@ ADMIN_SHORTCUTS = [
     },
 ]
 ADMIN_SHORTCUTS_SETTINGS = {
-    'show_on_all_pages': True,
-    'hide_app_list': True,
     'open_new_window': False,
 }
 ```
@@ -158,5 +151,5 @@ ADMIN_SHORTCUTS_SETTINGS = {
 ## I want to change how stuff looks
 
 * to change the CSS overwrite the ``templates/admin_shortcuts/base.css`` template
-* to change the which icons are magically selected specify the mappings in ``ADMIN_SHORTCUTS_CLASS_MAPPINGS``
+* to change the which icons are magically selected specify the mappings in ``ADMIN_SHORTCUTS_ICON_MAPPINGS``
 
diff --git a/admin_shortcuts/templates/admin/base_site.html b/admin_shortcuts/templates/admin/base_site.html
diff --git a/admin_shortcuts/templates/admin/index.html b/admin_shortcuts/templates/admin/index.html
@@ -0,0 +1,15 @@
+{% extends "admin/index.html" %}
+{% load admin_shortcuts_tags %}
+
+{% block nav-breadcrumbs %}
+    <div class="admin_shortcuts">
+        {% admin_shortcuts %}
+    </div>
+    {{ block.super }}
+{% endblock %}
+
+
+{% block extrastyle %}
+	{{ block.super }}
+	<style type="text/css">{% admin_shortcuts_css %}</style>
+{% endblock %}
diff --git a/admin_shortcuts/templates/admin_shortcuts/base.css b/admin_shortcuts/templates/admin_shortcuts/base.css
@@ -1,5 +1,5 @@
 {% block main %}{% endblock %}
 {% block count %}{% endblock %}
-{% block advanced %}{% endblock %}
 {% block icons %}{% endblock %}
+{% block dark_mode %}{% endblock %}
 {% block extra %}{% endblock %}
diff --git a/admin_shortcuts/templates/admin_shortcuts/base.html b/admin_shortcuts/templates/admin_shortcuts/base.html
@@ -1,7 +1,6 @@
 {% load i18n %}
 
 {% if enable_admin_shortcuts %}
-
 	{% if admin_shortcuts %}
 		<ul class="shortcuts">
 		{% for group in admin_shortcuts %}
@@ -14,9 +13,4 @@
 		{% endfor %}
 		</ul>
 	{% endif %}
-
-	{% if enable_hide_app_list %}
-		<a href="#" id="toggle_app_list"><span class="open">&uarr;</span><span class="closed">&darr;</span>&nbsp;&nbsp;{% trans 'Advanced' %}&nbsp;&nbsp;</a>
-	{% endif %}
-
 {% endif %}
diff --git a/admin_shortcuts/templates/admin_shortcuts/js.html b/admin_shortcuts/templates/admin_shortcuts/js.html
diff --git a/admin_shortcuts/templates/admin_shortcuts/shortcut.html b/admin_shortcuts/templates/admin_shortcuts/shortcut.html
@@ -1,5 +1,5 @@
 <a href="{{ shortcut.url }}" {% if settings.open_new_window or shortcut.open_new_window %} target="_blank"{% endif %}>
-	{% if shortcut.icon %}<span class="icon"><i class="fas fa-{{ shortcut.icon }}"></i></span>{% endif %}
+	{% if shortcut.icon %}<span class="icon">{{ shortcut.icon }}</span>{% endif %}
 	{% if shortcut.title %}<span class="title">{{ shortcut.title }}</span>{% endif %}
 	{% if shortcut.count != None %}<span class="count">{{ shortcut.count }}</span>{% endif %}
 	{% if shortcut.count_new %}<span class="count_new">{{ shortcut.count_new }}</span>{% endif %}

diff --git a/admin_shortcuts/templates/admin_shortcuts/style.css b/admin_shortcuts/templates/admin_shortcuts/style.css
@@ -3,43 +3,165 @@
 
 {% block main %}
 /* shortcuts */
-.admin_shortcuts .shortcuts { background: #50839e; padding: 10px 40px 20px; margin: 0; list-style: none;
-	box-shadow: 0 2px 5px rgba(0,0,0,0.2) inset; }
-@media (max-width: 1024px) { .admin_shortcuts .shortcuts { padding-left: 30px; padding-right: 30px; } }
-.admin_shortcuts .shortcuts ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0;
-	height: 0; }
-.admin_shortcuts .shortcuts ul { padding: 0; margin: 5px 0 0 0; list-style: none; }
-.admin_shortcuts .shortcuts h2 { color: #fff; border-bottom: 1px solid #6093ae; line-height: 24px; margin: 10px 0 5px; }
-.admin_shortcuts .shortcuts li { padding: 0; margin: 0; float: left; list-style: none; }
-.admin_shortcuts .shortcuts li a { padding: 20px 0px 20px 55px; margin: 5px 10px 5px 0; display: block; float: left;
-	color: #fff; border: 1px solid #6b9db9; background: #6093ae 10px 50% no-repeat; font-size: 14px; line-height: 14px;
-	border-radius: 3px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); position: relative; min-height: 14px; }
-.admin_shortcuts .shortcuts li a .title { text-shadow: 0 0 1px rgba(0,0,0,0.5); padding-right: 25px; }
-.admin_shortcuts .shortcuts li a:hover, .admin_shortcuts .shortcuts li a:focus { background-color: #6b9db9; }
-.admin_shortcuts .shortcuts li a:active { background-color: #50839e; border-color: #6093ae; }
+.admin_shortcuts .shortcuts {
+    padding: 10px 40px 10px 40px;
+    margin: 0;
+    list-style: none;
+}
+
+@media (max-width: 1024px) {
+    .admin_shortcuts .shortcuts {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+}
+
+.admin_shortcuts .shortcuts ul:after {
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+}
+
+.admin_shortcuts .shortcuts ul {
+    padding: 0;
+    margin: 5px 0 0 0;
+    list-style: none;
+}
+
+.admin_shortcuts .shortcuts h2 {
+	font-weight: normal;
+    color: #666;
+    line-height: 24px;
+    margin: 10px 0 5px;
+}
+
+.admin_shortcuts .shortcuts li {
+    padding: 0;
+    margin: 0;
+    float: left;
+    list-style: none;
+}
+
+.admin_shortcuts .shortcuts li a {
+    padding: 20px 0px 20px 55px;
+    margin: 5px 10px 5px 0;
+    display: block;
+    float: left;
+    color: #666;
+    border: 1px solid #ddd;
+    background: #fff;
+    font-size: 14px;
+    line-height: 14px;
+    border-radius: 4px;
+    position: relative;
+    min-height: 14px;
+	transition: none;
+}
+
+.admin_shortcuts .shortcuts li a .title {
+    padding-right: 25px;
+}
+
+.admin_shortcuts .shortcuts li a:hover, .admin_shortcuts .shortcuts li a:focus, .admin_shortcuts .shortcuts li a:active {
+    border-color: #888;
+	color: #333;
+    text-decoration: none;
+}
 {% endblock %}
 
+
 {% block count %}
 /* count */
-.admin_shortcuts .shortcuts li a .count { position: absolute; right: 3px; bottom: 2px; color: #96c9e5; font-size: 10px; }
-.admin_shortcuts .shortcuts li a .count_new { position: absolute; right: -7px; top: -7px; color: #fff; font-size: 11px;
-	line-height: 14px; border-radius: 30px; display: block; overflow: hidden; max-width: 60px; min-width: 15px;
-	height: 20px; padding: 5px 5px 0 5px; background: #940f3a; text-align: center; font-weight: bold;
-	box-shadow: 0 0 3px rgba(0,0,0,0.2); }
-{% endblock %}
+.admin_shortcuts .shortcuts li a .count {
+    position: absolute;
+    right: 3px;
+    bottom: 2px;
+    color: #aaa;
+    font-size: 10px;
+}
 
-{% block advanced %}
-/* advanced button */
-.admin_shortcuts #toggle_app_list { display: block; text-align: center; padding: 2px 0; color: #fff; font-size: 11px;
-	font-weight: bold; background: #79aec8; }
-.admin_shortcuts #toggle_app_list:hover { text-decoration: none; }
-.admin_shortcuts #toggle_app_list .closed { display: inline; }
-.admin_shortcuts #toggle_app_list .open { display: none; }
-.admin_shortcuts #toggle_app_list.open .open { display: inline; }
-.admin_shortcuts #toggle_app_list.open .closed { display: none; }
+.admin_shortcuts .shortcuts li a .count_new {
+    position: absolute;
+    right: -7px;
+    top: -7px;
+    color: #fff;
+    font-size: 11px;
+    line-height: 14px;
+    border-radius: 30px;
+    display: block;
+    overflow: hidden;
+    max-width: 60px;
+    min-width: 15px;
+    height: 20px;
+    padding: 5px 5px 0 5px;
+    background: #940f3a;
+    text-align: center;
+    font-weight: bold;
+}
 {% endblock %}
 
+
 {% block icons %}
 /* icons */
-.admin_shortcuts .shortcuts li a .icon { width: 34px; height: 32px; text-align: center; font-size: 24px; line-height: 32px; position: absolute; left: 10px; top: 10px; color: rgba(255,255,255,0.8); }
+.admin_shortcuts .shortcuts li a .icon {
+    width: 34px;
+    height: 32px;
+    text-align: center;
+    font-size: 24px;
+    line-height: 32px;
+    position: absolute;
+    left: 10px;
+    top: 10px;
+}
+{% endblock %}
+
+
+{% block dark_mode %}
+@media (prefers-color-scheme: dark) {
+	.admin_shortcuts .shortcuts li a {
+		background: #333;
+		color: #ccc;
+		border-color: #444;
+	}
+	.admin_shortcuts .shortcuts li a:hover, .admin_shortcuts .shortcuts li a:focus, .admin_shortcuts .shortcuts li a:active {
+		border-color: #888;
+		color: #fff;
+	}
+}
+@media (prefers-color-scheme: light) {
+	.admin_shortcuts .shortcuts li a {
+		background: #fff;
+		color: #666;
+		border-color: #ddd;
+	}
+	.admin_shortcuts .shortcuts li a:hover, .admin_shortcuts .shortcuts li a:focus, .admin_shortcuts .shortcuts li a:active {
+		border-color: #888;
+		color: #333;
+	}
+}
+html[data-theme="dark"] {
+	.admin_shortcuts .shortcuts li a {
+		background: #333;
+		color: #ccc;
+		border-color: #444;
+	}
+	.admin_shortcuts .shortcuts li a:hover, .admin_shortcuts .shortcuts li a:focus, .admin_shortcuts .shortcuts li a:active {
+		border-color: #888;
+		color: #fff;
+	}
+}
+html[data-theme="light"] {
+	.admin_shortcuts .shortcuts li a {
+		background: #fff;
+		color: #666;
+		border-color: #ddd;
+	}
+	.admin_shortcuts .shortcuts li a:hover, .admin_shortcuts .shortcuts li a:focus, .admin_shortcuts .shortcuts li a:active {
+		border-color: #888;
+		color: #333;
+	}
+}
 {% endblock %}