Skip to content

Commit

Permalink
feat: configurable font colors (#718)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukasvinclav
lukasvinclav authored Sep 5, 2024
1 parent 5d35bb5 commit e5ddb30
Show file tree
Hide file tree
Showing 50 changed files with 172 additions and 139 deletions.
2 changes: 1 addition & 1 deletion src/unfold/contrib/filters/templates/unfold/filters/filters_date_range.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

{% with choices.0 as choice %}
<div class="flex flex-col mb-6">
<h3 class="font-semibold mb-2 text-gray-900 dark:text-gray-100">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>
<h3 class="font-semibold mb-2 text-font-important-light dark:text-font-important-dark">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>

<div class="flex flex-col space-y-4">
{% for field in choice.form %}
Expand Down
2 changes: 1 addition & 1 deletion src/unfold/contrib/filters/templates/unfold/filters/filters_datetime_range.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

{% with choices.0 as choice %}
<div class="flex flex-col mb-6">
<h3 class="font-semibold mb-2 text-gray-900 dark:text-gray-100">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>
<h3 class="font-semibold mb-2 text-font-important-light dark:text-font-important-dark">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>

<div class="flex flex-col space-y-4">
{% for field in choice.form %}
Expand Down
2 changes: 1 addition & 1 deletion src/unfold/contrib/filters/templates/unfold/filters/filters_numeric_range.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

{% with choices.0 as choice %}
<div class="flex flex-col mb-6">
<h3 class="font-semibold mb-2 text-gray-900 dark:text-gray-100">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>
<h3 class="font-semibold mb-2 text-font-important-light dark:text-font-important-dark">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>

<div class="flex flex-row gap-4">
{% for field in choice.form %}
Expand Down
2 changes: 1 addition & 1 deletion src/unfold/contrib/filters/templates/unfold/filters/filters_numeric_single.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

{% with choices.0 as choice %}
<div class="flex flex-col mb-6">
<h3 class="font-semibold mb-2 text-gray-900 dark:text-gray-100">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>
<h3 class="font-semibold mb-2 text-font-important-light dark:text-font-important-dark">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>

{% for field in choice.form %}
<div class="flex flex-row flex-wrap group relative{% if field.errors %} errors{% endif %}">
Expand Down
8 changes: 4 additions & 4 deletions src/unfold/contrib/filters/templates/unfold/filters/filters_numeric_slider.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@

{% with choices.0 as choice %}
<div class="admin-numeric-filter-wrapper mb-6">
<h3 class="font-semibold mb-2 text-gray-900 dark:text-gray-100">
<h3 class="font-semibold mb-2 text-font-important-light dark:text-font-important-dark">
{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}
</h3>

{% if choice.min is not None and choice.max is not None and choice.step %}
<div class="admin-numeric-filter-slider-tooltips">
<span class="admin-numeric-filter-slider-tooltip-from border cursor-not-allowed flex flex-grow flex-row items-center mr-auto rounded-md shadow-sm px-3 py-2 w-full dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300">
<span class="admin-numeric-filter-slider-tooltip-from border cursor-not-allowed flex flex-grow flex-row items-center mr-auto rounded-md shadow-sm px-3 py-2 w-full dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark">
{{ choice.value_from }}
</span>

<span class="admin-numeric-filter-slider-tooltip-to border cursor-not-allowed flex flex-grow flex-row items-center rounded-md shadow-sm px-3 py-2 w-full dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300">
<span class="admin-numeric-filter-slider-tooltip-to border cursor-not-allowed flex flex-grow flex-row items-center rounded-md shadow-sm px-3 py-2 w-full dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark">
{{ choice.value_to }}
</span>
</div>
Expand All @@ -25,7 +25,7 @@ <h3 class="font-semibold mb-2 text-gray-900 dark:text-gray-100">
{{ choice.form.as_p }}
</div>
{% else %}
<div class="admin-numeric-filter-slider-error dark:text-gray-300">
<div class="admin-numeric-filter-slider-error dark:text-font-default-dark">
<p>
{% trans 'Not enough data.' %}
</p>
Expand Down
12 changes: 6 additions & 6 deletions src/unfold/contrib/forms/templates/unfold/forms/helpers/toolbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<template id="trix-toolbar">
<div class="bg-gray-50 flex flex-row flex-wrap border group-[.errors]:border-t-red-600 gap-4 group-[.errors]:border-x-red-600 px-3 py-2 relative rounded-t-md shadow-sm w-full dark:bg-white/[.02] dark:border-gray-700 dark:group-[.errors]:border-t-red-500 dark:group-[.errors]:border-x-red-500">
<div data-trix-button-group="text-tools" class="bg-white border border-md flex flex-row rounded-md shadow-sm shrink-0 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300">
<div data-trix-button-group="text-tools" class="bg-white border border-md flex flex-row rounded-md shadow-sm shrink-0 dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark">
{% spaceless %}
<button type="button" data-trix-attribute="p" data-trix-key="p" title="{% trans "Paragraph" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
<span class="material-symbols-outlined">format_paragraph</span>
Expand Down Expand Up @@ -30,7 +30,7 @@
{% endspaceless %}
</div>

<div data-trix-button-group="block-headings" class="bg-white border border-md flex flex-row rounded-md shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300">
<div data-trix-button-group="block-headings" class="bg-white border border-md flex flex-row rounded-md shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark">
{% spaceless %}
<button type="button" data-trix-attribute="heading1" title="{% trans "Heading" %} 1" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
<span class="material-symbols-outlined">format_h1</span>
Expand All @@ -50,7 +50,7 @@
{% endspaceless %}
</div>

<div data-trix-button-group="block-tools" class="bg-white border border-md flex flex-row rounded-md shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300">
<div data-trix-button-group="block-tools" class="bg-white border border-md flex flex-row rounded-md shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark">
{% spaceless %}
<button type="button" data-trix-attribute="quote" title="{% trans "Quote" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
<span class="material-symbols-outlined">format_quote</span>
Expand Down Expand Up @@ -79,7 +79,7 @@
</div>

<div class="lg:ml-auto">
<div data-trix-button-group="history-tools" class="bg-white border border-md flex flex-row rounded-md shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300">
<div data-trix-button-group="history-tools" class="bg-white border border-md flex flex-row rounded-md shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark">
<button type="button" data-trix-action="undo" data-trix-key="z" title="{% trans "Undo" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
<span class="material-symbols-outlined">undo</span>
</button>
Expand All @@ -92,9 +92,9 @@
<div data-trix-dialogs>
<div class="absolute bg-white border-b -bottom-px left-0 px-4 py-2 right-0 shadow-sm translate-y-full dark:bg-gray-900 dark:border-gray-700" data-trix-dialog="href" data-trix-dialog-attribute="href">
<div class="flex flex-row">
<input type="url" name="href" class="border bg-white font-medium px-3 rounded-md shadow-sm text-gray-500 text-sm focus:ring focus:ring-primary-300 focus:border-primary-600 focus:outline-none group-[.errors]:border-red-600 group-[.errors]:focus:ring-red-200 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300 dark:focus:ring-primary-600/30 dark:group-[.errors]:border-red-500 dark:group-[.errors]:focus:ring-red-600/40" placeholder="{% trans "Enter an URL" %}" required data-trix-input>
<input type="url" name="href" class="border bg-white font-medium px-3 rounded-md shadow-sm text-gray-500 text-sm focus:ring focus:ring-primary-300 focus:border-primary-600 focus:outline-none group-[.errors]:border-red-600 group-[.errors]:focus:ring-red-200 dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark dark:focus:ring-primary-600/30 dark:group-[.errors]:border-red-500 dark:group-[.errors]:focus:ring-red-600/40" placeholder="{% trans "Enter an URL" %}" required data-trix-input>

<div class="bg-white border border-md flex flex-row ml-4 rounded-md shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300">
<div class="bg-white border border-md flex flex-row ml-4 rounded-md shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark">
<button type="button" data-trix-method="setAttribute" title="{% trans "Link" %}" class="border-r cursor-pointer flex items-center h-8 justify-center text-gray-400 transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
<span class="material-symbols-outlined">link</span>
</button>
Expand Down
10 changes: 5 additions & 5 deletions src/unfold/contrib/guardian/templates/unfold/guardian/group_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,25 @@
<form method="post">
{% csrf_token %}

<h2 class="font-semibold mb-3 text-gray-900 dark:text-gray-100">
<h2 class="font-semibold mb-3 text-font-important-light dark:text-font-important-dark">
{% trans "Group permissions" %}
</h2>

{% if groups_perms.items %}
<table id="group-permissions" class="border-gray-200 border-spacing-none border-separate mb-6 w-full lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
<thead class="hidden lg:table-header-group text-gray-900 dark:text-gray-100">
<thead class="hidden lg:table-header-group text-font-important-light dark:text-font-important-dark">
<tr>
<th class="align-middle font-medium px-3 py-2 text-left">
<th class="align-middle font-semibold px-3 py-2 text-left">
{% trans "Group" %}
</th>

{% for perm in model_perms %}
<th class="align-middle font-medium px-3 py-2 text-left">
<th class="align-middle font-semibold px-3 py-2 text-left">
{{ perm.name }}
</th>
{% endfor %}

<th class="align-middle font-medium px-3 py-2 text-right">
<th class="align-middle font-semibold px-3 py-2 text-right">
{% trans "Action" %}
</th>
</tr>
Expand Down
10 changes: 5 additions & 5 deletions src/unfold/contrib/guardian/templates/unfold/guardian/user_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,25 @@
<form method="post">
{% csrf_token %}

<h2 class="font-medium mb-3 text-gray-700 dark:text-gray-200">
<h2 class="font-semibold mb-3 text-font-important-light dark:text-font-important-dark">
{% trans "User permissions" %}
</h2>

{% if users_perms.items %}
<table id="user-permissions" class="border-gray-200 border-spacing-none border-separate mb-6 w-full lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
<thead class="hidden lg:table-header-group text-gray-900 dark:text-gray-100">
<thead class="hidden lg:table-header-group text-font-important-light dark:text-font-important-dark">
<tr>
<th class="align-middle font-medium px-3 py-2 text-left">
<th class="align-middle font-semibold px-3 py-2 text-left">
{% trans "User" %}
</th>

{% for perm in model_perms %}
<th class="align-middle font-medium px-3 py-2 text-left">
<th class="align-middle font-semibold px-3 py-2 text-left">
{{ perm.name }}
</th>
{% endfor %}

<th class="align-middle font-medium px-3 py-2 text-right">
<th class="align-middle font-semibold px-3 py-2 text-right">
{% trans "Action" %}
</th>
</tr>
Expand Down
2 changes: 1 addition & 1 deletion src/unfold/contrib/import_export/templates/admin/import_export/change_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@
{{ block.super }}

{% if show_change_form_export %}
<input type="submit" value="{% translate 'Export' %}" name="_export-item" class="bg-white text-gray-500 border cursor-pointer flex font-medium items-center px-3 py-2 mr-3 rounded-md shadow-sm text-sm dark:bg-gray-900 dark:border dark:border-gray-700 dark:text-gray-300">
<input type="submit" value="{% translate 'Export' %}" name="_export-item" class="bg-white text-gray-500 border cursor-pointer flex font-medium items-center px-3 py-2 mr-3 rounded-md shadow-sm text-sm dark:bg-gray-900 dark:border dark:border-gray-700 dark:text-font-default-dark">
{% endif %}
{% endblock %}
2 changes: 1 addition & 1 deletion src/unfold/contrib/import_export/templates/admin/import_export/import_errors.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
</div>
</div>

<div class="block border leading-relaxed mb-4 rounded p-4 traceback dark:border-gray-800 dark:text-gray-300 " x-show="open">
<div class="block border leading-relaxed mb-4 rounded p-4 traceback dark:border-gray-800 dark:text-font-default-dark " x-show="open">
{{ error.traceback|linebreaks }}
</div>
</li>
Expand Down
2 changes: 1 addition & 1 deletion src/unfold/contrib/simple_history/templates/simple_history/object_history.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

{% block content %}
{% if not revert_disabled %}
<p class="px-3 py-3 rounded-md text-sm last:mb-8 er-amber-600/10 bg-blue-50 mb-8 text-blue-500 dark:bg-blue-500/20 dark:border-blue-500/10">
<p class="px-3 py-3 rounded-md text-sm last:mb-8 mb-8 bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400">
{% blocktrans %}Choose a date from the list below to revert to a previous version of this object.{% endblocktrans %}
</p>
{% endif %}
Expand Down
16 changes: 8 additions & 8 deletions src/unfold/contrib/simple_history/templates/simple_history/object_history_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,35 @@
{% load getattribute from getattributes %}

<table id="change-history" class="border-gray-200 border-spacing-none border-separate mb-6 w-full lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
<thead class="hidden text-gray-900 lg:table-header-group dark:text-gray-100">
<thead class="hidden text-font-important-light lg:table-header-group dark:text-font-important-dark">
<tr>
<th class="align-middle font-medium px-3 py-2 text-left ">
<th class="align-middle font-semibold px-3 py-2 text-left ">
{% trans 'Object' %}
</th>

{% for column in history_list_display %}
<th class="align-middle font-medium px-3 py-2 text-left ">
<th class="align-middle font-semibold px-3 py-2 text-left ">
{% trans column %}
</th>
{% endfor %}

<th class="align-middle font-medium px-3 py-2 text-left">
<th class="align-middle font-semibold px-3 py-2 text-left">
{% trans 'Date/time' %}
</th>

<th class="align-middle font-medium px-3 py-2 text-left">
<th class="align-middle font-semibold px-3 py-2 text-left">
{% trans 'Comment' %}
</th>

<th class="align-middle font-medium px-3 py-2 text-left">
<th class="align-middle font-semibold px-3 py-2 text-left">
{% trans 'Changed by' %}
</th>

<th class="align-middle font-medium px-3 py-2 text-left">
<th class="align-middle font-semibold px-3 py-2 text-left">
{% trans 'Change reason' %}
</th>

<th class="align-middle font-medium px-3 py-2 text-left">
<th class="align-middle font-semibold px-3 py-2 text-left">
{% trans 'Changes' %}
</th>
</tr>
Expand Down
2 changes: 1 addition & 1 deletion src/unfold/contrib/simple_history/templates/simple_history/submit_line.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
</button>
{% endif %}

<a href="{{ history_url }}" class="border font-medium mr-auto px-3 py-2 rounded-md text-sm text-gray-500 text-center transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700 dark:text-gray-300 dark:hover:text-gray-200 dark:hover:bg-gray-900">
<a href="{{ history_url }}" class="border font-medium mr-auto px-3 py-2 rounded-md text-sm text-gray-500 text-center transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700 dark:text-font-default-dark dark:hover:text-gray-200 dark:hover:bg-gray-900">
{% trans 'Close' %}
</a>
</div>
Expand Down
27 changes: 26 additions & 1 deletion src/unfold/settings.py
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
from typing import Any, Dict

from django.conf import settings

CONFIG_DEFAULTS = {
Expand All @@ -11,6 +13,14 @@
"SHOW_HISTORY": True,
"SHOW_VIEW_ON_SITE": True,
"COLORS": {
"font": {
"subtle-light": "107 114 128", # text-gray-500
"subtle-dark": "156 163 175", # text-gray-400
"default-light": "75 85 99", # text-gray-600
"default-dark": "209 213 219", # text-gray-300
"important-light": "17 24 39", # text-gray-900
"important-dark": "243 244 246", # text-gray-100
},
"primary": {
"50": "250 245 255",
"100": "243 232 255",
Expand Down Expand Up @@ -47,4 +57,19 @@ def get_config(settings_name=None):
if settings_name is None:
settings_name = "UNFOLD"

return {**CONFIG_DEFAULTS, **getattr(settings, settings_name, {})}
def merge_dicts(dict1: Dict[str, Any], dict2: Dict[str, Any]) -> Dict[str, Any]:
result = dict1.copy()

for key, value in dict2.items():
if (
key in result
and isinstance(result[key], dict)
and isinstance(value, dict)
):
result[key] = merge_dicts(result[key], value)
else:
result[key] = value

return result

return merge_dicts(CONFIG_DEFAULTS, getattr(settings, settings_name, {}))
2 changes: 1 addition & 1 deletion src/unfold/static/unfold/css/styles.css
View file

Large diffs are not rendered by default.

4 changes: 1 addition & 3 deletions src/unfold/static/unfold/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,9 +124,7 @@ const fileInputUpdatePath = () => {
input.addEventListener("change", (e) => {
const parts = e.target.value.split("\\");
const placeholder =
input.parentNode.parentNode.parentNode.querySelector(
"input[type=text]"
);
input.parentNode.parentNode.querySelector("input[type=text]");
placeholder.setAttribute("value", parts[parts.length - 1]);
});
});
Expand Down
Loading

0 comments on commit e5ddb30

Please sign in to comment.