From 8375d212106918b602911f6286d2e4fd172d446e Mon Sep 17 00:00:00 2001
From: Marcel Korpel <marcel.korpel@gmail.com>
Date: Thu, 9 Jul 2015 00:33:25 +0200
Subject: [PATCH] Use SVG image for comment deletion icon

This also puts the icon to the right and the timestamp in the byline
and wipes out a repeated instance of the byline.

Signed-off-by: Marcel Korpel <marcel.korpel@gmail.com>
Signed-off-by: Lukas Fleischer <lfleischer@archlinux.org>
---
 web/html/css/aurweb.css       |  16 ++++++++++++++++
 web/html/images/x.min.svg     |   3 +++
 web/html/images/x.png         | Bin 725 -> 0 bytes
 web/html/images/x.svg         |  31 +++++++++++++++++++++++++++++++
 web/html/index.php            |   4 ++++
 web/template/pkg_comments.php |  28 +++++++++++-----------------
 6 files changed, 65 insertions(+), 17 deletions(-)
 create mode 100644 web/html/images/x.min.svg
 delete mode 100644 web/html/images/x.png
 create mode 100644 web/html/images/x.svg

diff --git a/web/html/css/aurweb.css b/web/html/css/aurweb.css
index d67877a0..adc02bb1 100644
--- a/web/html/css/aurweb.css
+++ b/web/html/css/aurweb.css
@@ -96,6 +96,22 @@
 	color: #999;
 }
 
+.delete-comment-form {
+	float: right;
+}
+
+.delete-comment {
+	-webkit-filter: grayscale(100%);
+	filter: grayscale(100%);
+	opacity: 0.6;
+}
+
+.delete-comment:hover {
+	-webkit-filter: none;
+	filter: none;
+	opacity: 1;
+}
+
 legend {
 	padding: 1em 0;
 }
diff --git a/web/html/images/x.min.svg b/web/html/images/x.min.svg
new file mode 100644
index 00000000..833d4f22
--- /dev/null
+++ b/web/html/images/x.min.svg
@@ -0,0 +1,3 @@
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" height="8" width="8" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+<path fill="#36a" d="m1.41 0l-1.41 1.41 0.72 0.72 1.78 1.81-1.78 1.78-0.72 0.69 1.41 1.44 0.72-0.72 1.81-1.81 1.78 1.81 0.69 0.72 1.44-1.44-0.72-0.69-1.81-1.78 1.81-1.81 0.72-0.72-1.44-1.41-0.69 0.72-1.78 1.78-1.81-1.78-0.72-0.72z"/>
+</svg>
diff --git a/web/html/images/x.png b/web/html/images/x.png
deleted file mode 100644
index a85e169237108fc532c15c7b90e497b1f6a12649..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 725
zcmV;`0xJE9P)<h;3K|Lk000e1NJLTq000vJ000sQ1^@s6xeVoL00009a7bBm000d-
z000e%0nEzd{r~^~2XskIMF-Ub6AdRemW&ZH0007XNkl<Zc-pO$%S%*I9LGQBKAmwK
z&9|9~F4UE_sC8}n3tU)Hi!x{tZltXRLHz-4f<g!cOQ`5U<tl>Q7YGt$v<UMx59f|^
z@0okfo!de&Gj%n;&H4S{oG;(UIY;DjIjU6#RjjIlS^I}Lmx;>@9|^M=wAO@LqqIh;
z-F06dDvi_B%;3c<q`SHWfY|R@@Omz87-}NXnnrkK@FcM(srUgpC=p4YC@2vHK3e*$
zW_^Cdjhwr4PyEMB=d&bQd&zuQAn;85#jjA7n2w8Knme0po5b)Latm*%ZAp>e@(-7(
zlty@E{4GKE?K^}kzu1_10AYw>Sr~2&jbr1uef?N<^=!VHMaAaf0fbtECkd7oQNLGk
zPxa6~ahGIg7m2oZnr}|v_Vp7L@<czs<J6{6N*@lUv?lf>$bj{!`>6F*?Dms1T)Rd3
z@(t|nUMkxKw&$iXLWz?~q4ZH;N>lLzOvi<C8E@txQFa5fxecqchuAM7=bs@|2|Jm@
zN+kaQvko%TK?%b&F)Rxa$HY?py*fI?bOdq2r6Luk;~XzDk~`@bZVh##*ReXgiTxrK
zFNcwC!ahHOs7-+(K#1dIMnMT|o5r#6J&%I-v#3um_5j@rqu?Z{D239|G0Xy=#Obqp
zsTF4*qu1BanJjYtDV2N%v#|whU<l>=gz7lYq)+bi8|?ZM=;d!1p~OxmsYnHd65;G4
ztbt*+-n}F&7LE?UtZ!f~w?VR{mW}5#IH@#FDuoULOveEscBCyW5f%$97d+}aIt~XL
zymXZ>Po^mpd=wTcuTYzt2OfJwxZ9`O+ZdUg+&eF-`8oapyPjt9#lg;Q00000NkvXX
Hu0mjf<Q+uq

diff --git a/web/html/images/x.svg b/web/html/images/x.svg
new file mode 100644
index 00000000..e323fe19
--- /dev/null
+++ b/web/html/images/x.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg2"
+   viewBox="0 0 8 8"
+   height="8"
+   width="8">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <path
+     style="fill:#3366aa;fill-opacity:1"
+     id="path4"
+     d="M1.41 0l-1.41 1.41.72.72 1.78 1.81-1.78 1.78-.72.69 1.41 1.44.72-.72 1.81-1.81 1.78 1.81.69.72 1.44-1.44-.72-.69-1.81-1.78 1.81-1.81.72-.72-1.44-1.41-.69.72-1.78 1.78-1.81-1.78-.72-.72z" />
+</svg>
diff --git a/web/html/index.php b/web/html/index.php
index 27d897c7..2d5f2a97 100644
--- a/web/html/index.php
+++ b/web/html/index.php
@@ -173,6 +173,10 @@ if (!empty($tokens[1]) && '/' . $tokens[1] == get_pkg_route()) {
 		header("Content-Type: image/png");
 		readfile("./$path");
 		break;
+	case "/images/x.min.svg":
+		header("Content-Type: image/svg+xml");
+		readfile("./$path");
+		break;
 	case "/js/bootstrap-typeahead.min.js":
 		header("Content-Type: application/javascript");
 		readfile("./$path");
diff --git a/web/template/pkg_comments.php b/web/template/pkg_comments.php
index 3e99d9b3..03a65817 100644
--- a/web/template/pkg_comments.php
+++ b/web/template/pkg_comments.php
@@ -20,32 +20,26 @@ $count = pkgbase_comments_count($base_id, $include_deleted);
 			$row['UserName'] = "<a href=\"" . get_user_uri($row['UserName']) . "\">{$row['UserName']}</a>";
 		endif; ?>
 		<h4<?php if ($row['DelUsersID']): ?> class="comment-deleted"<?php endif; ?>>
+			<?php if ($row['UserName']): ?>
+			<?= __('%s commented', $row['UserName']) ?>
+			<?php else: ?>
+			<?= __('Anonymous comment') ?>
+			<?php endif; ?>
+			<?= __('on %s', gmdate('Y-m-d H:i', $row['CommentTS'])) ?>
+			<?php if ($row['DelUsersID']): ?>
+			(<?= __('deleted') ?>)
+			<?php endif; ?>
 			<?php if (!$row['DelUsersID'] && can_delete_comment_array($row)): ?>
-				<form method="post" action="<?= htmlspecialchars(get_pkgbase_uri($pkgbase_name), ENT_QUOTES); ?>">
+				<form class="delete-comment-form" method="post" action="<?= htmlspecialchars(get_pkgbase_uri($pkgbase_name), ENT_QUOTES); ?>">
 					<fieldset style="display:inline;">
 						<input type="hidden" name="action" value="do_DeleteComment" />
 						<input type="hidden" name="comment_id" value="<?= $row['ID'] ?>" />
 						<input type="hidden" name="token" value="<?= htmlspecialchars($_COOKIE['AURSID']) ?>" />
-						<input type="image" src="/images/x.png" alt="<?= __('Delete comment') ?>" name="submit" value="1" />
+						<input type="image" class="delete-comment" src="/images/x.min.svg" width="11" height="11" alt="<?= __('Delete comment') ?>" title="<?= __('Delete comment') ?>" name="submit" value="1" />
 					</fieldset>
-					<?php if ($row['UserName']): ?>
-					<?= __('Comment by %s', $row['UserName']) ?>
-					<?php else: ?>
-					<?= __('Anonymous comment') ?>
-					<?php endif; ?>
 				</form>
-			<?php else: ?>
-			<?php if ($row['UserName']): ?>
-			<?= __('Comment by %s', $row['UserName']) ?>
-			<?php else: ?>
-			<?= __('Anonymous comment') ?>
-			<?php endif; ?>
-			<?php if ($row['DelUsersID']): ?>
-			(<?= __('deleted') ?>)
-			<?php endif; ?>
 			<?php endif; ?>
 		</h4>
-		<p class="timestamp"><?= gmdate('Y-m-d H:i', $row['CommentTS']) ?></p>
 		<div class="article-content<?php if ($row['DelUsersID']): ?> comment-deleted<?php endif; ?>">
 			<p>
 				<?= parse_comment($row['Comments']) ?>