Improved: share to clipboard improved with animation and icon (#5295)

* share to clipboard improved with animation and icon

* fix

p/scripts/main.js

@@ -1089,6 +1089,9 @@ function init_stream(stream) {
 		el = ev.target.closest('.item.share > button[data-type="clipboard"]');
 		if (el && navigator.clipboard) {	// Clipboard
 			navigator.clipboard.writeText(el.dataset.url);
+			el.classList.remove('ok');
+			el.dataset.foo = el.offsetWidth; // it does nothing, but it is needed. See https://github.com/FreshRSS/FreshRSS/pull/5295
+			el.classList.add('ok');
 			return false;
 		}
 

p/themes/base-theme/frss.css

@@ -1891,6 +1891,46 @@ input:checked + .slide-container .properties {
 	color: var(--frss-font-color-error);
 }
 
+.item.share button {
+	position: relative;
+}
+
+.item.share button::after {
+	content: "";
+	background: var(--frss-background-color-transparent);
+	display: inline-block;
+	position: absolute;
+	padding-top: 1rem;
+	opacity: 0;
+	transition: all 0.6s;
+	left: 0px;
+	width: 100%;
+	height: 1rem;
+}
+
+.item.share button:active::after {
+	opacity: 1;
+	width: 0;
+	transition: 0s
+}
+
+.item.share button.ok::before {
+	content: "✓";
+	position: absolute;
+	left: 0.5rem;
+	animation-duration: 10s;
+	animation-fill-mode: both;
+	animation-name: easeOut;
+}
+
+@keyframes easeOut {
+	0% {opacity: 1;}
+
+	80% {opacity: 1;}
+
+	100% {opacity: 0;}
+}
+
 .deprecated {
 	font-weight: bold;
 }

p/themes/base-theme/frss.rtl.css

@@ -1891,6 +1891,46 @@ input:checked + .slide-container .properties {
 	color: var(--frss-font-color-error);
 }
 
+.item.share button {
+	position: relative;
+}
+
+.item.share button::after {
+	content: "";
+	background: var(--frss-background-color-transparent);
+	display: inline-block;
+	position: absolute;
+	padding-top: 1rem;
+	opacity: 0;
+	transition: all 0.6s;
+	right: 0px;
+	width: 100%;
+	height: 1rem;
+}
+
+.item.share button:active::after {
+	opacity: 1;
+	width: 0;
+	transition: 0s
+}
+
+.item.share button.ok::before {
+	content: "✓";
+	position: absolute;
+	right: 0.5rem;
+	animation-duration: 10s;
+	animation-fill-mode: both;
+	animation-name: easeOut;
+}
+
+@keyframes easeOut {
+	0% {opacity: 1;}
+
+	80% {opacity: 1;}
+
+	100% {opacity: 0;}
+}
+
 .deprecated {
 	font-weight: bold;
 }