From 5e685199966d6e4f5037d566b9308d6f160f1963 Mon Sep 17 00:00:00 2001
From: Jacob Rief <jacob.rief@gmail.com>
Date: Mon, 20 Jan 2025 16:19:18 +0100
Subject: [PATCH 1/2] improve styling of dropbox for file upload

---
 client/django-formset/_dropbox.scss           | 20 +++++++++----------
 client/django-formset/helpers.ts              |  1 -
 .../formset/bootstrap/widgets/file.html       |  6 ++++--
 .../formset/default/widgets/file.html         |  2 +-
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/client/django-formset/_dropbox.scss b/client/django-formset/_dropbox.scss
index b083a14e..f1fb70d4 100644
--- a/client/django-formset/_dropbox.scss
+++ b/client/django-formset/_dropbox.scss
@@ -3,11 +3,10 @@
 		all: unset;
 		display: inline-flex;
 		align-items: center;
-		justify-content: space-between;
+		justify-content: flex-start;
 		background-color: color-mix(in srgb, var(--django-formset-background-color), currentcolor 5%);
 		margin: 0 0 0.25rem 0.25rem;
 		padding: 0.125rem;
-		list-style: none;
 		height: auto;
 		min-height: 8rem;
 		min-width: 8rem;
@@ -25,18 +24,20 @@
 
 		> img {
 			all: unset;
-			flex-grow: 1;
 			display: block;
-			height: 100%;
-			max-width: calc(100% - 12rem);
+			min-width: inherit;
+			min-height: 100%;
+			max-width: calc(100% - 18rem);
 		}
 
 		> figcaption {
 			all: unset;
-			padding: 0;
-			margin: 0 0.5rem;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-around;
 			overflow-x: hidden;
-			min-width: 12rem;
+			margin: 0 0.5rem;
+			height: 100%;
 
 			dl {
 				font-size: small;
@@ -59,8 +60,7 @@
 			}
 
 			.dj-download-file {
-				margin-left: 1rem;
-				float: right;
+				margin-left: 2rem;
 			}
 
 		}
diff --git a/client/django-formset/helpers.ts b/client/django-formset/helpers.ts
index e434277a..d1096a76 100644
--- a/client/django-formset/helpers.ts
+++ b/client/django-formset/helpers.ts
@@ -7,7 +7,6 @@ export namespace StyleHelpers {
 	observer.observe(document.body, {attributes: true});
 	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', stylesHaveChanged);
 
-
 	export function extractStyles(element: Element, properties: Array<string>|{[key: string]: string}): string {
 		let styles = Array<string>();
 		const style = window.getComputedStyle(element);
diff --git a/formset/templates/formset/bootstrap/widgets/file.html b/formset/templates/formset/bootstrap/widgets/file.html
index 01742a7c..3084562c 100644
--- a/formset/templates/formset/bootstrap/widgets/file.html
+++ b/formset/templates/formset/bootstrap/widgets/file.html
@@ -15,7 +15,9 @@
 		<dt>{% trans 'Content-Type (Size)' %}:</dt>
 		<dd>${content_type} (${size})</dd>
 	</dl>
-	<a class="dj-delete-file btn btn-warning btn-sm">{% trans "Delete" %}</a>
-	<a class="dj-download-file btn btn-light btn-sm" href="${download_url}" download="${name}">{% trans "Download" %}</a>
+	<div>
+		<a class="dj-delete-file btn btn-warning btn-sm">{% trans "Delete" %}</a>
+		<a class="dj-download-file btn btn-light btn-sm" href="${download_url}" download="${name}">{% trans "Download" %}</a>
+	</div>
 </figcaption>
 {% endblock %}
diff --git a/formset/templates/formset/default/widgets/file.html b/formset/templates/formset/default/widgets/file.html
index b66ed27c..1712c7be 100644
--- a/formset/templates/formset/default/widgets/file.html
+++ b/formset/templates/formset/default/widgets/file.html
@@ -15,7 +15,7 @@
 		<button type="button" class="dj-choose-file">{% trans "Choose file" %}</button>
 		{% endblock %}
 		{% block "progress-bar" %}
-		<progress max="1" value="0"></progress>
+		<progress max="1" value="0" style="visibility: hidden;"></progress>
 		{% endblock %}
 	</div>
 	{% endblock %}

From 2db20e88eb3c3ad68ac8a064adf0369c810c462c Mon Sep 17 00:00:00 2001
From: Jacob Rief <jacob.rief@gmail.com>
Date: Mon, 20 Jan 2025 16:20:40 +0100
Subject: [PATCH 2/2] fix #188 prevent flickering of submenus in RTA

---
 client/django-formset/RichtextArea.ts                       | 2 ++
 formset/templates/formset/default/widgets/richtextarea.html | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/django-formset/RichtextArea.ts b/client/django-formset/RichtextArea.ts
index 5f64fd14..8b2b5325 100644
--- a/client/django-formset/RichtextArea.ts
+++ b/client/django-formset/RichtextArea.ts
@@ -1057,6 +1057,8 @@ class RichtextArea {
 				this.installEventHandlers();
 				this.attributesObserver.observe(this.textAreaElement, {attributes: true});
 				if (this.menubarElement) {
+					// to prevent flickering when loading the page, the visibility of the menubar is hidden
+					this.menubarElement.style.visibility = '';
 					this.resizeObserver.observe(this.menubarElement);
 					this.wrapMenubar();
 				}
diff --git a/formset/templates/formset/default/widgets/richtextarea.html b/formset/templates/formset/default/widgets/richtextarea.html
index 513cbae9..2dae55d9 100644
--- a/formset/templates/formset/default/widgets/richtextarea.html
+++ b/formset/templates/formset/default/widgets/richtextarea.html
@@ -1,6 +1,6 @@
 {% spaceless %}
 <div class="{% block wrapper_classes %}dj-richtext-wrapper{% endblock %}">
-	<div role="menubar">{{ control_panel }}</div>
+	<div role="menubar" style="visibility: hidden;">{{ control_panel }}</div>
 	{% for dialog_form in dialog_forms %}{{ dialog_form }}{% endfor %}
 </div>
 <textarea is="django-richtext" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{{ widget.value }}</textarea>