From 57644c4378293c9e67092606d121be521936c1f2 Mon Sep 17 00:00:00 2001
From: Eragon <eragon@eragon.re>
Date: Tue, 6 Jun 2023 20:57:05 +0200
Subject: [PATCH] editor: fix modal not closing when openning an other one

---
 app/static/css/editor.css         | 10 ++++++++--
 app/static/less/editor.less       | 11 +++++++++--
 app/static/scripts/editor.js      |  7 ++++---
 app/templates/widgets/editor.html |  5 +++--
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/app/static/css/editor.css b/app/static/css/editor.css
index aa9e410..efb5ab9 100644
--- a/app/static/css/editor.css
+++ b/app/static/css/editor.css
@@ -51,14 +51,14 @@
   position: absolute;
   left: 0px;
   width: auto;
-  min-width: 30vw;
+  min-width: min-content;
   text-align: left;
   right: inherit;
   background: var(--background-hover);
   border: var(--border);
   color: var(--text);
   padding: .2rem;
-  top: 3.2rem;
+  top: 2.3rem;
   z-index: 100;
   list-style-position: initial;
   list-style-type: none;
@@ -67,10 +67,16 @@
   margin: 0.8rem;
   margin-top: 0.4rem;
   margin-bottom: 1rem;
+  min-width: 30vw;
 }
 .editor .modal > div label {
   margin-top: 0.4rem;
 }
+.editor .modal a.editor-emoji-close-btn {
+  display: inline-block;
+  margin: 0.3rem;
+  margin-top: 0.5rem;
+}
 @media screen and (max-width:849px) {
   .editor .modal {
     width: 80vw;
diff --git a/app/static/less/editor.less b/app/static/less/editor.less
index 46d0a3b..3f3a5c4 100644
--- a/app/static/less/editor.less
+++ b/app/static/less/editor.less
@@ -63,7 +63,7 @@
 		position: absolute;
 		left: 0px;
 		width: auto;
-		min-width: 30vw;
+		min-width: min-content;
 		text-align: left;
 		right: inherit;
 
@@ -79,7 +79,7 @@
 		border: var(--border);
 		color: var(--text);
 		padding: .2rem;
-		top: 3.2rem;
+		top: 2.3rem;
 		z-index: 100;
 		list-style-position: initial;
 		list-style-type: none;
@@ -88,11 +88,18 @@
 			margin: 0.8rem;
 			margin-top: 0.4rem;
 			margin-bottom: 1rem;
+			min-width: 30vw;
 
 			label {
 				margin-top: 0.4rem;
 			}
 		}
+
+		a.editor-emoji-close-btn {
+			display: inline-block;
+			margin: 0.3rem;
+			margin-top: 0.5rem;
+		}
 	}
 }
 
diff --git a/app/static/scripts/editor.js b/app/static/scripts/editor.js
index 930b223..436543c 100644
--- a/app/static/scripts/editor.js
+++ b/app/static/scripts/editor.js
@@ -114,7 +114,7 @@ function editor_clear_modals(event, close = true)
 	document.getElementById('media-alt-input').value = '';
 	document.getElementById('media-link-input').value = '';
 	document.getElementById('link-desc-input').value = '';
-	document.getElementById('link-desc-input').value = '';
+	document.getElementById('link-link-input').value = '';
 	const media_type = document.getElementsByName("media-type");
 	for(i = 0; i < media_type.length; i++) {
 		media_type[i].checked = false;
@@ -162,7 +162,7 @@ function editor_display_link_modal(event) {
 		event.currentTarget.querySelector("#link-desc-input").value = selection;	
 	}
 
-	event.currentTarget.children[1].style = {'display': 'block'};
+	editor_display_child_modal(event);
 }
 
 function editor_insert_link(event, link_id, text_id, media = false)
@@ -284,7 +284,8 @@ function editor_separator(event) {
 	editor_insert_around(event, "", "\n---\n");
 }
 
-function editor_display_emoji_modal(event) {
+function editor_display_child_modal(event) {
+	editor_clear_modals(event);
 	event.currentTarget.children[1].style = {'display': 'block'};
 }
 
diff --git a/app/templates/widgets/editor.html b/app/templates/widgets/editor.html
index 2d30dc7..3f51e33 100644
--- a/app/templates/widgets/editor.html
+++ b/app/templates/widgets/editor.html
@@ -92,13 +92,14 @@
 				</svg>
 			</button>
 			<!-- Emojis -->
-			<button type="button" onclick="editor_display_emoji_modal(event)" title="Emoji">
+			<button type="button" onclick="editor_display_child_modal(event)" title="Emoji">
 				<svg viewBox="0 0 24 24">
 					<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
 				</svg>
 
 				<div class="modal" style=display:none>
 					<emoji-picker data-source={{url_for('static', filename='scripts/emoji-picker-element/data.json')}}></emoji-picker>
+					<a type="button" class="button bg-error editor-emoji-close-btn" onclick="editor_clear_modals(event)">Annuler</a>
 				</div>
 			</button>
 			<!-- Links -->
@@ -120,7 +121,7 @@
 				</div>
 			</button>
 			<!-- Images -->
-			<button type="button" onclick="event.currentTarget.children[1].style = {'display': 'block'}" title="Image">
+			<button type="button" onclick="editor_display_child_modal(event)" title="Image">
 				<svg viewBox="0 0 24 24">
 					<path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
 				</svg>