Merge pull request #34 from Freeplayg/main

Improvements to the modal menu

src/content_styles.css

@@ -2,6 +2,20 @@
     Normal stylings
 */
 
+:root { /* Modal Vars */
+    --bg: #eee;
+    --fg: #494949;
+    --border: rgba(120,120,130,0.3);
+    --hover: rgba(100,100,130,0.2);
+    --confirmation: rgb(38, 133, 0);
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: #24262d;
+        --fg: white;
+    }
+}
+
 /* Styles for the mute/block modal popup */
 
 .fediactmodal {
@@ -15,42 +29,60 @@
     background-color: rgba(0,0,0,0.4);
     margin: 0;
     padding: 0;
+    display: flex;
+    font-size: 1rem;
+    animation: fadeIn .2s;
 }
 
 .fediactmodalinner {
-    background-color: #494949;
-	border: 1px solid #888;
-	width: 50%;
+    background-color: var(--bg);
+    border: 1px solid var(--border);
+	width: 80%;
 	max-width: 300px;
-	left: 50%;
-	top: 50%;
-	-webkit-transform: translate(-50%, -50%);
-	    -ms-transform: translate(-50%, -50%);
-	        transform: translate(-50%, -50%);
-	position: absolute;
-	margin: 0;
-	padding: 0;
+	margin: auto;
+	padding: .4em;
+    border-radius: 8px;
+    animation: scaleInSmall .2s;
 }
-
-.fediactmodallist {
-    width: 100%;
-	margin: 0;
-	padding: 0;
-}
-
 .fediactmodalitem {
+    position: relative;
+    display: block;
+	padding: .7em;
+    border-radius: 6px;
     cursor: pointer;
-	width: 100%;
-	padding: 5px 10px;
 	-webkit-box-sizing: border-box;
 	        box-sizing: border-box;
+    transition: background-color .4s;
+}
+.fediactmodalitem:hover, .fediactmodalitem:focus-within {
+    background-color: var(--hover);
 }
-
 .fediactmodallink {
-    font-size: 16px;
-	cursor: pointer;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
 	text-decoration: none;
-	color: white;
+	color: var(--fg);
+    margin: -.7em;
+    padding: .7em;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 var(--confirmation);
+    transition: padding .2s, color .2s, box-shadow .2s cubic-bezier(.2,.2,0,1);
+}
+.fediactmodallink span:not(:first-of-type) {
+    position: absolute;
+    right: .7em;
+    font-size: .8em;
+    padding: .2em .4em;
+    border-radius: 4px;
+    background-color: white;
+    color: var(--confirmation);
+    animation: scaleInFadeSmall .2s;
+}
+.fediactmodallink.activated {
+    box-shadow: inset 300px 0 0 var(--confirmation);
+    color: white;
+    font-weight: 600;
 }
 
 /* Styles for "resolving..." indicator */
@@ -122,6 +154,31 @@
     color: blue !important;
 }
 
+/* Keyframes */
+
+@keyframes fadeIn {
+    from {
+        filter: opacity(0);
+    }
+}
+@keyframes fadeOut {
+    to {
+        filter: opacity(0);
+    }
+}
+@keyframes scaleInSmall {
+    from {
+        transform: scale(.98);
+    }
+}
+@keyframes scaleInFadeSmall {
+    from {
+        transform: scale(.98);
+        filter: opacity(0);
+    }
+}
+
+
 /*  
     We insert these styles for the DOMNodeAppeared function as separate stylesheet (see manifest) to fix
     Firefox blocking script-inserted <style> elements due to the site's CSP (long time bug)

src/inject.js

@@ -527,7 +527,7 @@ function showModal(settings) {
 	var baseEl = $(modalHtml)
 	var appendTo = $(baseEl).find("ul")
 	for (const entry of settings) {
-		var append = "<li class='fediactmodalitem'><a class='fediactmodallink' fediactaction='" + entry[0] + "' fediactdata='" + entry[1] + "'>" + entry[2] + "</a></li>"
+		var append = "<li class='fediactmodalitem'><a class='fediactmodallink' fediactaction='" + entry[0] + "' fediactdata='" + entry[1] + "'><span>" + entry[2] + "</span></a></li>"
 		$(appendTo).append($(append))
 	}
 	$("body").append($(baseEl))
@@ -541,7 +541,10 @@ function showModal(settings) {
 				var data = $(e.target).attr("fediactdata")
 				var done = executeAction(data, action, null)
 				if (done) {
-					$(e.target).append(document.createTextNode(" - Done!"))
+					$(e.target).addClass("activated")
+					$(e.target).append("<span>Done!</span>")
+					$(baseEl).css("animation", "fadeOut .2s .7s forwards")
+					$(baseEl).find(".fediactmodalinner").css("animation", "scaleInFade .2s .7s forwards reverse")
 					await new Promise(resolve => {
 						setTimeout(function() {
 							resolve()
@@ -550,7 +553,11 @@ function showModal(settings) {
 					$(baseEl).remove()
 					$("body").off("click", handleModalEvent)
 				} else {
-					$(e.target).append(document.createTextNode(" - Failed!"))
+					$(e.target).css("--confirmation", "red")
+					$(e.target).addClass("activated")
+					$(e.target).append("<span>Failed</span>")
+					$(baseEl).css("animation", "fadeOut .2s .7s forwards")
+					$(baseEl).find(".fediactmodalinner").css("animation", "scaleInFade .2s .7s forwards reverse")
 					await new Promise(resolve => {
 						setTimeout(function() {
 							resolve()