From 4edd88ccb80863503b4fc678c7f490f737dfd033 Mon Sep 17 00:00:00 2001
From: Georgi Mateev <gmateev@exactag.com>
Date: Fri, 9 Sep 2022 14:51:46 +0300
Subject: [PATCH] [TASK] #205 Changed fingerprint icon

---
 .../Service/StaticFileGenerationService.php   |   1 +
 .../tx_sgcookieoptin_domain_model_optin.php   |  16 ++-
 .../Private/Language/de.locallang_db.xlf      |   4 +
 Resources/Private/Language/locallang_db.xlf   |   3 +
 Resources/Public/JavaScript/cookieOptin.js    | 114 +++++++++++++++---
 .../Mustache/Fingerprint/Default.css          |   3 +
 ext_tables.sql                                |   1 +
 7 files changed, 122 insertions(+), 20 deletions(-)

diff --git a/Classes/Service/StaticFileGenerationService.php b/Classes/Service/StaticFileGenerationService.php
index 7fea5a50..b1064091 100644
--- a/Classes/Service/StaticFileGenerationService.php
+++ b/Classes/Service/StaticFileGenerationService.php
@@ -193,6 +193,7 @@ class StaticFileGenerationService implements SingletonInterface {
 			'banner_color_button_accept_text' => $fullData['banner_color_button_accept_text'],
 			'color_fingerprint_image' => $fullData['color_fingerprint_image'],
 			'color_fingerprint_background' => $fullData['color_fingerprint_background'],
+			'color_fingerprint_border' => $fullData['color_fingerprint_border'],
 		];
 		$this->createCSSFile($fullData, $folderName, $cssData, $minifyFiles);
 
diff --git a/Configuration/TCA/tx_sgcookieoptin_domain_model_optin.php b/Configuration/TCA/tx_sgcookieoptin_domain_model_optin.php
index 2fd070b7..5d7d8ded 100644
--- a/Configuration/TCA/tx_sgcookieoptin_domain_model_optin.php
+++ b/Configuration/TCA/tx_sgcookieoptin_domain_model_optin.php
@@ -116,7 +116,7 @@ $configuration = [
 		],
 		'fingerprint' => [
 			'label' => 'LLL:EXT:sg_cookie_optin/Resources/Private/Language/locallang_db.xlf:tx_sgcookieoptin_domain_model_optin.fingerprint',
-			'showitem' => 'fingerprint_position, --linebreak--,
+			'showitem' => 'fingerprint_position, color_fingerprint_border, --linebreak--,
 			color_fingerprint_background, color_fingerprint_image'
 		],
 		'color_table' => [
@@ -1727,6 +1727,18 @@ $configuration = [
 				'eval' => 'trim, required'
 			]
 		],
+		'color_fingerprint_border' => [
+			'exclude' => TRUE,
+			'l10n_mode' => 'exclude',
+			'label' => 'LLL:EXT:sg_cookie_optin/Resources/Private/Language/locallang_db.xlf:tx_sgcookieoptin_domain_model_optin.color_fingerprint_border',
+			'config' => [
+				'type' => 'input',
+				'renderType' => 'colorpicker',
+				'default' => '#000000',
+				'placeholder' => '#208A20',
+				'eval' => 'trim, required'
+			]
+		],
 	],
 ];
 
@@ -1809,7 +1821,7 @@ if (version_compare(\TYPO3\CMS\Core\Utility\VersionNumberUtility::getCurrentTypo
 		. 'subdomain_support, set_cookie_for_domain, domains_to_delete_cookies_for, cookiebanner_whitelist_regex,'
 		. 'disable_powered_by, disable_for_this_language, render_assets_inline, consider_do_not_track,'
 		. 'banner_show_again_interval, version, unified_cookie_name, disable_usage_statistics, fingerprint_position,'
-		. 'color_fingerprint_background, color_fingerprint_image';
+		. 'color_fingerprint_background, color_fingerprint_image, color_fingerprint_border';
 }
 
 return $configuration;
diff --git a/Resources/Private/Language/de.locallang_db.xlf b/Resources/Private/Language/de.locallang_db.xlf
index 4257459b..90f5c82b 100644
--- a/Resources/Private/Language/de.locallang_db.xlf
+++ b/Resources/Private/Language/de.locallang_db.xlf
@@ -845,6 +845,10 @@ Ohne diese Einstellung gilt diese Konfiguration nur für die Domäne, in der sie
 				<source><![CDATA[Fingerprint Image Color]]></source>
 				<target><![CDATA[Fingerabdruck Bildfarbe]]></target>
 			</trans-unit>
+			<trans-unit id="tx_sgcookieoptin_domain_model_optin.color_fingerprint_border" approved="yes">
+				<source><![CDATA[Fingerprint Border Color]]></source>
+				<target><![CDATA[Fingerabdruck Randfarbe]]></target>
+			</trans-unit>
 			<trans-unit id="tx_sgcookieoptin_domain_model_optin.fingerprint" approved="yes">
 				<source><![CDATA[Fingerprint]]></source>
 				<target><![CDATA[Fingerabdruck]]></target>
diff --git a/Resources/Private/Language/locallang_db.xlf b/Resources/Private/Language/locallang_db.xlf
index d7699110..b26f5b0c 100644
--- a/Resources/Private/Language/locallang_db.xlf
+++ b/Resources/Private/Language/locallang_db.xlf
@@ -623,6 +623,9 @@ Without this setting, this configuration only applies to the domain where it is
 			<trans-unit id="tx_sgcookieoptin_domain_model_optin.color_fingerprint_image" approved="yes">
 				<source><![CDATA[Fingerprint Image Color]]></source>
 			</trans-unit>
+			<trans-unit id="tx_sgcookieoptin_domain_model_optin.color_fingerprint_border" approved="yes">
+				<source><![CDATA[Fingerprint Border Color]]></source>
+			</trans-unit>
 			<trans-unit id="tx_sgcookieoptin_domain_model_optin.fingerprint" approved="yes">
 				<source><![CDATA[Fingerprint]]></source>
 			</trans-unit>
diff --git a/Resources/Public/JavaScript/cookieOptin.js b/Resources/Public/JavaScript/cookieOptin.js
index f4194071..5076e593 100644
--- a/Resources/Public/JavaScript/cookieOptin.js
+++ b/Resources/Public/JavaScript/cookieOptin.js
@@ -2066,29 +2066,107 @@ var SgCookieOptin = {
 		fingerprintContainer.classList.add('sg-cookie-optin-fingerprint');
 		fingerprintContainer.classList.add('sg-cookie-optin-fingerprint-' + iconPositionClass);
 
-		var iconSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-		var iconPath = document.createElementNS(
-		    'http://www.w3.org/2000/svg',
-		    'path'
-		  );
-
-		iconSvg.setAttribute('fill', 'currentColor');
-		iconSvg.setAttribute('viewBox', '0 0 24 24');
-		iconSvg.setAttribute('aria-hidden', 'true');
-		iconSvg.classList.add('sg-cookie-optin-fingerprint-icon');
-
-
-		iconPath.setAttribute(
-		    'd',
-			'M17.81 4.47c-.08 0-.16-.02-.23-.06C15.66 3.42 14 3 12.01 3c-1.98 0-3.86.47-5.57 1.41-.24.13-.54.04-.68-.2-.13-.24-.04-.55.2-.68C7.82 2.52 9.86 2 12.01 2c2.13 0 3.99.47 6.03 1.52.25.13.34.43.21.67-.09.18-.26.28-.44.28zM3.5 9.72c-.1 0-.2-.03-.29-.09-.23-.16-.28-.47-.12-.7.99-1.4 2.25-2.5 3.75-3.27C9.98 4.04 14 4.03 17.15 5.65c1.5.77 2.76 1.86 3.75 3.25.16.22.11.54-.12.7-.23.16-.54.11-.7-.12-.9-1.26-2.04-2.25-3.39-2.94-2.87-1.47-6.54-1.47-9.4.01-1.36.7-2.5 1.7-3.4 2.96-.08.14-.23.21-.39.21zm6.25 12.07c-.13 0-.26-.05-.35-.15-.87-.87-1.34-1.43-2.01-2.64-.69-1.23-1.05-2.73-1.05-4.34 0-2.97 2.54-5.39 5.66-5.39s5.66 2.42 5.66 5.39c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-2.42-2.09-4.39-4.66-4.39s-4.66 1.97-4.66 4.39c0 1.44.32 2.77.93 3.85.64 1.15 1.08 1.64 1.85 2.42.19.2.19.51 0 .71-.11.1-.24.15-.37.15zm7.17-1.85c-1.19 0-2.24-.3-3.1-.89-1.49-1.01-2.38-2.65-2.38-4.39 0-.28.22-.5.5-.5s.5.22.5.5c0 1.41.72 2.74 1.94 3.56.71.48 1.54.71 2.54.71.24 0 .64-.03 1.04-.1.27-.05.53.13.58.41.05.27-.13.53-.41.58-.57.11-1.07.12-1.21.12zM14.91 22c-.04 0-.09-.01-.13-.02-1.59-.44-2.63-1.03-3.72-2.1-1.4-1.39-2.17-3.24-2.17-5.22 0-1.62 1.38-2.94 3.08-2.94s3.08 1.32 3.08 2.94c0 1.07.93 1.94 2.08 1.94s2.08-.87 2.08-1.94c0-3.77-3.25-6.83-7.25-6.83-2.84 0-5.44 1.58-6.61 4.03-.39.81-.59 1.76-.59 2.8 0 .78.07 2.01.67 3.61.1.26-.03.55-.29.64-.26.1-.55-.04-.64-.29-.49-1.31-.73-2.61-.73-3.96 0-1.2.23-2.29.68-3.24 1.33-2.79 4.28-4.6 7.51-4.6 4.55 0 8.25 3.51 8.25 7.83 0 1.62-1.38 2.94-3.08 2.94s-3.08-1.32-3.08-2.94c0-1.07-.93-1.94-2.08-1.94s-2.08.87-2.08 1.94c0 1.71.66 3.31 1.87 4.51.95.94 1.86 1.46 3.27 1.85.27.07.42.35.35.61-.05.23-.26.38-.47.38z'
-	  	);
+		fingerprintContainer.innerHTML = '<svg\n' +
+			'   class="sg-cookie-optin-fingerprint-icon"\n' +
+			'   xmlns:dc="http://purl.org/dc/elements/1.1/"\n' +
+			'   xmlns:cc="http://creativecommons.org/ns#"\n' +
+			'   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"\n' +
+			'   xmlns:svg="http://www.w3.org/2000/svg"\n' +
+			'   xmlns="http://www.w3.org/2000/svg"\n' +
+			'   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"\n' +
+			'   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"\n' +
+			'   version="1.1"\n' +
+			'   id="Layer_3"\n' +
+			'   x="0px"\n' +
+			'   y="0px"\n' +
+			'   viewBox="0 0 496.1 496"\n' +
+			'   style="enable-background:new 0 0 496.1 496;"\n' +
+			'   xml:space="preserve"\n' +
+			'   sodipodi:docname="cookie_table-icon.svg"\n' +
+			'   inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata\n' +
+			'   id="metadata37"><rdf:RDF><cc:Work\n' +
+			'       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type\n' +
+			'         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs\n' +
+			'   id="defs35" /><sodipodi:namedview\n' +
+			'   pagecolor="#ffffff"\n' +
+			'   bordercolor="#666666"\n' +
+			'   borderopacity="1"\n' +
+			'   objecttolerance="10"\n' +
+			'   gridtolerance="10"\n' +
+			'   guidetolerance="10"\n' +
+			'   inkscape:pageopacity="0"\n' +
+			'   inkscape:pageshadow="2"\n' +
+			'   inkscape:window-width="2560"\n' +
+			'   inkscape:window-height="991"\n' +
+			'   id="namedview33"\n' +
+			'   showgrid="false"\n' +
+			'   inkscape:zoom="0.33644597"\n' +
+			'   inkscape:cx="-287.44236"\n' +
+			'   inkscape:cy="417.13792"\n' +
+			'   inkscape:window-x="2560"\n' +
+			'   inkscape:window-y="0"\n' +
+			'   inkscape:window-maximized="1"\n' +
+			'   inkscape:current-layer="Layer_3" />\n' +
+			'<style\n' +
+			'   type="text/css"\n' +
+			'   id="style2">\n' +
+			'\t.st0{fill:none;stroke:' + SgCookieOptin.jsonData.cssData.color_fingerprint_border + ';stroke-width:33;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}\n' +
+			'</style>\n' +
+			'<g\n' +
+			'   id="g6">\n' +
+			'\t<circle\n' +
+			'   cx="101"\n' +
+			'   cy="273.6"\n' +
+			'   r="36.7"\n' +
+			'   id="circle4" />\n' +
+			'</g>\n' +
+			'<g\n' +
+			'   id="g10">\n' +
+			'\t<path\n' +
+			'   d="M243.9,285.2c-1.5,19-18.1,33.2-37.1,31.7c-19-1.5-33.2-18.1-31.7-37.1c1.5-19,18.1-33.2,37.1-31.7   C231.2,249.6,245.4,266.2,243.9,285.2z"\n' +
+			'   id="path8" />\n' +
+			'</g>\n' +
+			'<g\n' +
+			'   id="g14">\n' +
+			'\t<path\n' +
+			'   d="M350.7,240.6c-1.7,21.2-20.2,37.1-41.5,35.4c-21.2-1.7-37.1-20.2-35.4-41.5c1.7-21.2,20.2-37.1,41.5-35.4   C336.5,200.8,352.3,219.3,350.7,240.6z"\n' +
+			'   id="path12" />\n' +
+			'</g>\n' +
+			'<g\n' +
+			'   id="g18">\n' +
+			'\t<path\n' +
+			'   d="M209.4,379.2c-1.7,21.2-20.2,37.1-41.5,35.4c-21.2-1.7-37.1-20.2-35.4-41.5c1.7-21.2,20.2-37.1,41.5-35.4   C195.2,339.4,211.1,357.9,209.4,379.2z"\n' +
+			'   id="path16" />\n' +
+			'</g>\n' +
+			'<g\n' +
+			'   id="g22">\n' +
+			'\t<path\n' +
+			'   d="M345.5,370.9c-2.1,26.2-25,45.7-51.1,43.7c-26.2-2.1-45.7-25-43.7-51.1c2.1-26.2,25-45.7,51.1-43.7   C328,321.8,347.6,344.7,345.5,370.9z"\n' +
+			'   id="path20" />\n' +
+			'</g>\n' +
+			'<g\n' +
+			'   id="g26">\n' +
+			'\t<path\n' +
+			'   d="M232.2,165.7c0.2,28.4-22.7,51.5-51.1,51.7c-28.4,0.2-51.5-22.7-51.7-51.1c-0.2-28.4,22.7-51.5,51.1-51.7   C208.9,114.5,232,137.3,232.2,165.7z"\n' +
+			'   id="path24" />\n' +
+			'</g>\n' +
+			'<path\n' +
+			'   class="st0"\n' +
+			'   d="M407.3,258.9c-0.1-18,8.1-34.1,21-44.7c-33.7-7.1-59.7-34.9-64.2-69.6c-8.3,3.1-17.3,4.8-26.6,4.8  c-43.2,0.3-78.4-34.5-78.7-77.7c-0.1-9.8,1.7-19.1,4.9-27.7c-9.6-1.2-19.3-1.9-29.3-1.8C114.6,43,17.9,140.8,18.6,260.8  c0.7,119.9,98.5,216.6,218.5,215.9c101-0.6,185.5-70.1,209.2-163.7C423.8,305.3,407.4,284.1,407.3,258.9z"\n' +
+			'   id="path28" />\n' +
+			'\n' +
+			'<path\n' +
+			'   style="fill:currentColor;fill-opacity:1;fill-rule:evenodd;stroke:currentColor;stroke-width:1.56191504;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"\n' +
+			'   d="M 225.45617,459.64044 C 159.95942,455.75161 101.25194,421.32661 66.414519,366.38132 49.50561,339.71273 39.455674,310.08211 36.261607,277.48031 c -1.068105,-10.90214 -0.424896,-36.48736 1.168453,-46.47807 5.710872,-35.80867 18.319841,-65.6428 39.552029,-93.58421 6.96466,-9.16545 26.427521,-28.87029 35.157221,-35.59435 35.14026,-27.066782 73.42117,-40.836496 118.73281,-42.708408 l 11.67446,-0.482294 -0.24578,10.272429 c -0.409,17.093648 2.71993,30.893359 10.39069,45.826763 13.54112,26.36174 38.67206,44.8372 68.05574,50.03236 5.56484,0.98388 22.30125,1.48728 29.02027,0.87286 1.48556,-0.13584 2.07236,0.7088 4.53764,6.53154 8.69574,20.5384 23.60243,37.07627 44.20488,49.04205 1.17794,0.68413 1.09956,1.13877 -0.98838,5.7334 -1.24728,2.74468 -3.17286,7.92753 -4.27906,11.51745 -1.87177,6.07432 -2.0108,7.45493 -2.00418,19.90221 0.006,11.40876 0.24301,14.22542 1.61169,19.15893 4.44199,16.01149 14.68824,31.04138 27.77601,40.74375 5.97388,4.42862 5.87527,3.55285 1.62185,14.40346 -9.73316,24.82963 -25.15676,48.31092 -44.44889,67.67011 -16.89264,16.95136 -31.25226,27.4099 -52.02961,37.89472 -20.34103,10.26466 -40.3152,16.54582 -62.17024,19.55032 -10.52153,1.44644 -29.48906,2.36894 -38.14304,1.85511 z m -44.61456,-45.99975 c 13.13238,-3.42055 23.51915,-13.65386 27.45328,-27.04766 1.4587,-4.96619 1.53592,-15.38735 0.15251,-20.58288 -3.42132,-12.84912 -13.95299,-23.44756 -27.15248,-27.32461 -5.13308,-1.50772 -14.78951,-1.52316 -20.51142,-0.0328 -13.26232,3.45439 -24.96226,15.74575 -27.76039,29.16365 -2.78163,13.3388 0.98984,25.92156 10.62775,35.45731 8.32609,8.23784 15.65317,11.3642 26.84842,11.45584 3.28578,0.0269 7.93982,-0.4631 10.34233,-1.08887 z m 128.61014,0.0216 c 14.96464,-3.77142 28.02704,-15.34526 33.37865,-29.57489 9.4766,-25.19776 -3.83558,-53.45507 -29.32146,-62.2396 -6.6123,-2.27914 -19.96016,-2.85229 -26.76937,-1.14946 -8.36958,2.09305 -15.29382,6.09969 -21.96181,12.70798 -6.57439,6.51551 -9.67484,11.37765 -12.32399,19.32649 -2.3167,6.95128 -2.49549,21.53942 -0.34151,27.8648 5.66877,16.64686 18.74318,29.22452 34.28402,32.98142 5.9404,1.43605 17.52178,1.47788 23.05547,0.0833 z m -93.13466,-97.04605 c 18.21741,-3.799 30.51387,-21.467 27.48399,-39.48993 -3.2093,-19.09013 -21.02798,-32.07388 -39.70792,-28.93354 -15.17888,2.55177 -26.59488,14.11462 -28.91902,29.29099 -2.70756,17.68017 9.08981,35.08401 26.31916,38.8268 5.83763,1.26813 9.81523,1.35015 14.82379,0.30568 z m -107.32816,-6.98513 c 14.96159,-3.52755 25.95045,-15.3248 28.54707,-30.64714 4.01401,-23.68611 -18.2437,-45.94382 -41.929804,-41.92981 -16.26022,2.75556 -28.399854,14.8952 -31.155422,31.15542 -4.217708,24.8881 19.824876,47.24827 44.538156,41.42153 z M 320.38766,275.4792 c 11.08907,-2.34987 22.01711,-10.8915 26.67843,-20.85253 7.16438,-15.30992 4.62169,-31.48309 -6.88325,-43.7819 -14.94863,-15.98014 -40.20835,-16.18229 -55.65329,-0.44541 -14.89605,15.17761 -14.7546,39.72051 0.31449,54.56869 9.58985,9.44926 22.51595,13.27184 35.54362,10.51115 z M 193.91822,216.0011 c 21.4835,-5.55564 37.01407,-24.50363 38.3843,-46.83056 1.40478,-22.88978 -12.90284,-44.45059 -34.50988,-52.00451 -4.63929,-1.62192 -7.52684,-2.08839 -14.69097,-2.37327 -10.79905,-0.42942 -16.44695,0.69686 -25.63561,5.11213 -8.44875,4.05974 -18.30904,13.77754 -22.49509,22.17002 -7.46131,14.95895 -7.68382,31.81791 -0.61171,46.34596 9.15116,18.79894 27.89471,30.07096 48.41304,29.11468 3.497,-0.16298 8.51266,-0.85348 11.14592,-1.53445 z"\n' +
+			'   id="path844"\n' +
+			'   inkscape:connector-curvature="0" /></svg>';
 
 		fingerprintContainer.addEventListener('click', function (e) {
 			SgCookieOptin.openCookieOptin();
 		});
 
-		iconSvg.appendChild(iconPath);
-		fingerprintContainer.appendChild(iconSvg);
+		// iconSvg.appendChild(iconPath);
+		// fingerprintContainer.appendChild(iconSvg);
 		document.body.appendChild(fingerprintContainer);
 
 		// Emit event
diff --git a/Resources/Public/StyleSheets/Mustache/Fingerprint/Default.css b/Resources/Public/StyleSheets/Mustache/Fingerprint/Default.css
index a9681cfc..95c1867f 100644
--- a/Resources/Public/StyleSheets/Mustache/Fingerprint/Default.css
+++ b/Resources/Public/StyleSheets/Mustache/Fingerprint/Default.css
@@ -19,11 +19,14 @@
 	position: fixed;
 	background-color: ###color_fingerprint_background###;
 	color: ###color_fingerprint_image###;
+	box-shadow: 0 0 10px #848484;
 }
 
 .sg-cookie-optin-fingerprint-icon {
 	height: inherit;
 	padding: 12px;
+	margin-left: 1px;
+	margin-top: -1px;
 }
 
 .sg-cookie-optin-fingerprint.sg-cookie-optin-fingerprint-top-left {
diff --git a/ext_tables.sql b/ext_tables.sql
index f7af673e..be354931 100644
--- a/ext_tables.sql
+++ b/ext_tables.sql
@@ -98,6 +98,7 @@ CREATE TABLE tx_sgcookieoptin_domain_model_optin (
 	-- Fingerpring settings
 	color_fingerprint_background varchar(10) DEFAULT '#143D59' NOT NULL,
 	color_fingerprint_image varchar(10) DEFAULT '#FFFFFF' NOT NULL,
+	color_fingerprint_border varchar(10) DEFAULT '#000000' NOT NULL,
 	fingerprint_position int(6) DEFAULT 0 NOT NULL,
 
 	-- Essential group specific columns
-- 
GitLab