[TASK] Replace legend.png with CSS/HTML

Replace legend.png from Access module with
a CSS/HTML replacement.
follow up for #63245

Resolves: #63245
Releases: master
Change-Id: I64575469ab03e4278d4c26c1427c8c14e1e60d7e
Reviewed-on: http://review.typo3.org/34713


Reviewed-by: Frans Saris <franssaris@gmail.com>
Tested-by: Frans Saris <franssaris@gmail.com>
Reviewed-by: Benjamin Mack <benni@typo3.org>
Tested-by: Benjamin Mack <benni@typo3.org>

typo3/sysext/beuser/Resources/Private/Templates/Permission/Index.html

@@ -83,16 +83,53 @@
 
 	<h3><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:Legend" />:</h3>
 	<div class="legend">
-		<div class="pull-left">
-			<f:image src="{f:uri.resource(path:'Images/legend.png')}" alt="" />
-		</div>
-		<small>
-			<strong><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:1" /></strong>: <f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:1_t" /><br/>
-			<strong><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:16" /></strong>: <f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:16_t" /><br/>
-			<strong><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:2" /></strong>: <f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:2_t" /><br/>
-			<strong><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:4" /></strong>: <f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:4_t" /><br/>
-			<strong><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:8" /></strong>: <f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:8_t" />
-		</small>
+		<table>
+			<tr>
+				<td nowrap="nowrap" class="edge"><span><span></span></span></td>
+				<td nowrap="nowrap" class="hr"><span></span></td>
+				<td nowrap="nowrap" class="hr"><span></span></td>
+				<td nowrap="nowrap" class="hr"><span></span></td>
+				<td nowrap="nowrap" class="hr"><span></span></td>
+				<td nowrap="nowrap"><span class="number">1</span></td>
+				<td nowrap="nowrap"><strong><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:1" /></strong>: <f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:1_t" /></td>
+			</tr>
+			<tr>
+				<td nowrap="nowrap" class="vr"><span></span></td>
+				<td nowrap="nowrap" class="edge"><span><span></span></span></td>
+				<td nowrap="nowrap" class="hr"><span></span></td>
+				<td nowrap="nowrap" class="hr"><span></span></td>
+				<td nowrap="nowrap" class="hr"><span></span></td>
+				<td nowrap="nowrap"><span class="number">2</span></td>
+				<td nowrap="nowrap"><strong><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:16" /></strong>: <f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:16_t" /></td>
+			</tr>
+			<tr>
+				<td nowrap="nowrap" class="vr"><span></span></td>
+				<td nowrap="nowrap" class="vr"><span></span></td>
+				<td nowrap="nowrap" class="edge"><span><span></span></span></td>
+				<td nowrap="nowrap" class="hr"><span></span></td>
+				<td nowrap="nowrap" class="hr"><span></span></td>
+				<td nowrap="nowrap"><span class="number">3</span></td>
+				<td nowrap="nowrap"><strong><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:2" /></strong>: <f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:2_t" /></td>
+			</tr>
+			<tr>
+				<td nowrap="nowrap" class="vr"><span></span></td>
+				<td nowrap="nowrap" class="vr"><span></span></td>
+				<td nowrap="nowrap" class="vr"><span></span></td>
+				<td nowrap="nowrap" class="edge"><span><span></span></span></td>
+				<td nowrap="nowrap" class="hr"><span></span></td>
+				<td nowrap="nowrap"><span class="number">4</span></td>
+				<td nowrap="nowrap"><strong><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:4" /></strong>: <f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:4_t" /></td>
+			</tr>
+			<tr>
+				<td nowrap="nowrap"><bu:spriteManagerIcon iconName="status-status-permission-granted" /></td>
+				<td nowrap="nowrap"><bu:spriteManagerIcon iconName="status-status-permission-denied" /></td>
+				<td nowrap="nowrap"><bu:spriteManagerIcon iconName="status-status-permission-granted" /></td>
+				<td nowrap="nowrap"><bu:spriteManagerIcon iconName="status-status-permission-denied" /></td>
+				<td nowrap="nowrap"><bu:spriteManagerIcon iconName="status-status-permission-denied" /></td>
+				<td nowrap="nowrap"><span class="number">5</span></td>
+				<td nowrap="nowrap"><strong><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:8" /></strong>: <f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:8_t" /></td>
+			</tr>
+		</table>
 	</div>
 	<p><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:def" /></p>
 	<p>

typo3/sysext/beuser/Resources/Public/Css/style.css

@@ -27,3 +27,56 @@ div.collapsibleSection { background-color: #ededed; border-top: 1px solid #cdcdc
 .legend .pull-left {
     margin-right: 0.5em;
 }
+
+.legend td {
+    overflow:hidden;
+}
+
+.legend span.t3-icon {
+    margin-right: 0;
+}
+
+.number {
+	border: 1px solid #000000;
+	border-radius: 2px;
+	width: 16px;
+	height: 16px;
+	display: inline-block;
+	text-align: center;
+	margin-right: 5px;
+	margin-left: 10px;
+	line-height: 14px;
+	font-weight: bold;
+}
+
+.edge span {
+	width: 1px;
+	height: 10px;
+	background: #000000;
+	display: block;
+	margin-top: 8px;
+	margin-left: 6px;
+}
+.edge span span {
+	width: 10px;
+	height: 1px;
+	background: #000000;
+	display: block;
+	margin-left: 1px;
+}
+.hr span {
+	width: 20px;
+	height: 1px;
+	background: #000000;
+	display: block;
+	margin-top: -1px;
+	margin-left: -4px;
+}
+.vr span {
+	width: 1px;
+	height: 20px;
+	background: #000000;
+	margin-top: -2px;
+	margin-left: 6px;
+	display: block;
+}