From 699f3ce1b6ec452e4c3ef86ea508a95f554be573 Mon Sep 17 00:00:00 2001
From: Zlatin Balevsky <zlatinb@gmail.com>
Date: Sun, 29 Mar 2020 19:15:34 +0100
Subject: [PATCH] convert the Mark (Dis)Trusted links on search results page to
 hover menu

---
 webui/src/main/css/muwire.css  | 42 +++++++++++++++++++++++++++++++---
 webui/src/main/js/search.js    | 17 ++++++++++----
 webui/src/main/webapp/Home.jsp |  4 ++--
 3 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/webui/src/main/css/muwire.css b/webui/src/main/css/muwire.css
index 56a216de..ad718755 100644
--- a/webui/src/main/css/muwire.css
+++ b/webui/src/main/css/muwire.css
@@ -57,7 +57,7 @@ div#activeSearches table td:nth-child(2) {
 }
 
 div#topTableSender table thead th:nth-child(1) {
-  width: 35%;
+  width: 45%;
 }
 div#topTableSender table thead th:nth-child(2) {
   width: 100px;
@@ -69,7 +69,7 @@ div#topTableSender table thead th:nth-child(4) {
   width: 100px;
 }
 div#topTableSender table thead th:nth-child(5) {
-  width: 35%;
+  width: 20%;
 }
 div#topTableSender table tbody td:nth-child(1) {
   text-overflow: ellipsis;
@@ -81,6 +81,11 @@ div#topTableSender table tbody td:nth-child(3) {
   padding-right: 40px;
   text-align: right;
 }
+div#topTableSender table tbody td:nth-child(5) {
+	text-overflow: ellipsis;
+	overflow: auto;
+	text-align: center;
+}
 
 div#bottomTableSender table thead th:nth-child(2) {
   width: 100px;
@@ -130,7 +135,7 @@ div#bottomTableFile table thead th:nth-child(3) {
   width: 100px;
 }
 div#bottomTableFile table thead th:nth-child(4) {
-  width: 340px;
+  width: 20%;
 }
 div#bottomTableFile table tbody td:nth-child(1) {
   text-overflow: ellipsis;
@@ -138,6 +143,10 @@ div#bottomTableFile table tbody td:nth-child(1) {
 div#bottomTableFile table tbody td:nth-child(2) {
   text-align: center;
 }
+div#bottomTableFile table tbody td:nth-child(4) {
+	text-overflow:ellipsis;
+	overflow:auto;
+}
 
 div#activeBrowses table thead th:nth-child(2) {
   width: 100px;
@@ -492,6 +501,11 @@ span.right {
   float: right;
 }
 
+span.center {
+	display : inline-block;
+	text-align : center;
+}
+
 input.right {
   text-align: right;
 }
@@ -593,19 +607,41 @@ li.fileTree {
 	width: max-content;
 }
 
+.dropdown-content-right {
+	display: none;
+	position: absolute;
+	z-index:1;
+	background: var(--hover-menu-bg);
+	background-color: var(--hover-menu-bg);
+	padding: 3px 14px 3px 14px;
+	width: max-content;
+	right: 0;
+}
+
 .dropdown-content a {
 	color: black;
 	display: block;
 }
 
+.dropdown-content-right a {
+	color: black;
+	display: block;
+}
+
 /* Change color of dropdown links on hover */
 .dropdown-content a:hover {
 	background: var(--hover-menu-link-bg);
 	background-color: var(--hover-menu-link-bg);
 }
 
+.dropdown-content-right a:hover {
+	background: var(--hover-menu-link-bg);
+	background-color: var(--hover-menu-link-bg);
+}
+
 /* Show the dropdown menu on hover */
 .dropdown:hover .dropdown-content {display: block;}
+.dropdown:hover .dropdown-content-right {display: block;}
 
 textarea.copypaste {
 	opacity: 0;
diff --git a/webui/src/main/js/search.js b/webui/src/main/js/search.js
index c5aaea74..000e539a 100644
--- a/webui/src/main/js/search.js
+++ b/webui/src/main/js/search.js
@@ -44,7 +44,10 @@ class Sender {
 		mapping.set("Sender", this.getSenderLink())
 		mapping.set("Results", this.results)
 		
-		var trustHtml = this.trust + "<span class='right'>" + this.getTrustLinks() + "</span>"
+		var trustActionHtml = "<span class='dropdown'><a class='droplink'>" + _t("Actions") + "</a><div class='dropdown-content-right'>" +
+			this.getTrustLinks() +
+			"</div></span>"
+		var trustHtml = "<span class='center'>" + this.trust + "   " + trustActionHtml + "</span>" 
 		trustHtml += "<div class='centercomment' id='trusted-" + this.b64 + "'></div>"
 		trustHtml += "<div class='centercomment' id='distrusted-" + this.b64 + "'></div>"
 		mapping.set("Trust", trustHtml)
@@ -61,11 +64,11 @@ class Sender {
 	
 	getTrustLinks() {
 		if (this.trust == "NEUTRAL")
-			return "  " + this.getTrustLink() + "  " + this.getDistrustLink()
+			return  this.getTrustLink() + this.getDistrustLink()
 		else if (this.trust == "TRUSTED")
-			return "  " + this.getNeutralLink() + "  " + this.getDistrustLink()
+			return this.getNeutralLink() + this.getDistrustLink()
 		else
-			return "  " + this.getTrustLink() + "  " + this.getNeutralLink()
+			return this.getTrustLink() + this.getNeutralLink()
 	}
 	
 	getTrustLink() {
@@ -377,7 +380,11 @@ class SenderForResult {
 	}
 	
 	getTrustBlock() {
-		return this.trust +"<span class='right'>" + this.getTrustLinks() + "</span>" +
+		var dropdownBlock = "<span class='dropdown'><a class='droplink'>" + _t("Actions") + "</a><div class='dropdown-content-right'>" +
+			this.getTrustLinks() +
+			"</div></span>"
+		
+		return "<span class='center'>"+ this.trust + "   "+ dropdownBlock + "</span>" +
 			"<div class='centercomment' id='trusted-" + this.b64 + "'></div>" +
 			"<div class='centercomment' id='distrusted-" + this.b64 + "'></div>"
 	}
diff --git a/webui/src/main/webapp/Home.jsp b/webui/src/main/webapp/Home.jsp
index b34d8fad..6e17a09b 100644
--- a/webui/src/main/webapp/Home.jsp
+++ b/webui/src/main/webapp/Home.jsp
@@ -69,13 +69,13 @@
 		<section class="main foldermain">
 			<h3><span id="currentSearch"><%=Util._t("Results")%></span></h3>
 									<div id="table-wrapper">
-										<div id="table-scroll">
+										<div id="table-scroll" class="paddedTable">
 											<div id="<%=topTableId%>"></div>
 										</div>
 									</div>
 			<h3><span id="resultsFrom"></span></h3>
 													<div id="table-wrapper">
-														<div id="table-scroll">
+														<div id="table-scroll" class="paddedTable">
 															<div id="<%=bottomTableId%>">
 															</div>
 														</div>