From 7c474c1a793435aa5ee6884bf8ad712ab73ff021 Mon Sep 17 00:00:00 2001
From: "Guillaume (gdi)" <gdi@odoo.com>
Date: Thu, 23 Mar 2023 15:18:06 +0000
Subject: [PATCH] [IMP] web, website: add TikTok icon

This commit patches the font awesome library to add an icon for the
TikTok social network. Users are now able to add these icons with the
media dialog. Now, the TikTok icon works like all other font awesome
icons, with the new class introduced by this commit: `fa-tiktok`.
Moreover, the social media block in the website application can detect a
tiktok link and automatically integrate its icon with its color.

Technical note:
In order to add this new icon, a new font that contains only the TikTok
logo has been created.

task-3235451

closes odoo/odoo#118542

X-original-commit: dc926d56a286eebd3e7c10343824a6e2c1a76adc
Signed-off-by: Vray Benjamin (bvr) <bvr@odoo.com>
---
 addons/web/static/fonts/tiktok_only.woff        | Bin 0 -> 1220 bytes
 .../src/legacy/scss/fontawesome_overridden.scss |  16 ++++++++++++++++
 .../static/src/scss/primary_variables.scss      |   1 +
 .../static/src/snippets/s_social_media/000.scss |   5 +++++
 4 files changed, 22 insertions(+)
 create mode 100644 addons/web/static/fonts/tiktok_only.woff

diff --git a/addons/web/static/fonts/tiktok_only.woff b/addons/web/static/fonts/tiktok_only.woff
new file mode 100644
index 0000000000000000000000000000000000000000..c589fe0ae6543941ab7bb0198ce46819c1cb4cb4
GIT binary patch
literal 1220
zcmXT-cXMN4WB>w|BMf{Xnr#Y%4`QPNH@6U9pt==6Q5g`P^+;`ryNjzEP^<?krof=i
zAmJaZZ^XdBxCJQY2gC`6$9-=l=Oz{~FffS#`F21#CkFl}YRP3K3P7<Cpco4n3o^Q-
zCl&+Mv9tjB93cGvKLc}mPGuTUT?&wY1BjnEa)!RlNKFLt8C`&Upj`}RinV7oGk}6X
zu?iqx3W!yh>lj-za!Y`GCKe!H0EAf`8F+K@lY#1(B7l4@FrLE@lABlow3l%TkS`C!
z3Je|$ae0ZksSFIvHb8Mjpn5Kb<4d9o@{3D=?n?lwQ2}D3WfOf4R?JCGNJ&UwcqEr^
zIJcs1_IjRAK0FE^4%`i8aoT<U|NrOz{f;sBus6i;v28G6kUh%{3_++Kn-BjPX8d7R
zl59}YXkcZSEx`tKDO4^Y@j_}s5(A^a$rB7h#R(UfIf3CJ$FLkMpJ;QyqOoymW8=kk
z!`{ZmgR)-rsS{E%5)%@V5}u|sFf+1DR#Z4^+WPQ7^DFkNJ?#JF8D7~Rc)%c%#&Xgy
z%1Dnjh>NF(p~#U>6zIDH41z$vfM_88{|97$LPA<Yf+U+8o4^LfPZ9@f#MoFB&N8()
z{A+&o|G(mr8uk!XW@TySo|6You&B(C2w+q`yn&rzZxIL3JO*Gq0!b|}ECTsQ_MBta
zAp;542mkYzdoB#(^qtIgYC#{{%vHII%Pv2Sag<=$9(Pc?g7y4^RX5MBWB<ri#S}RE
zVXoZ$M;{L`vN5FJY2p?UGd;A)=nHe6tM8ud)R^UK19nfdJ>4c$6T-GOd)drOIcNNi
zA7<Qsp4<8Ex`(en{yNMi?ZK#~EL!ZP5g0tXC^#?0W~)H4=8_E?(thpt&Z#@)Xn%Th
zj*Uv(CGY1}f{UcvVl{;%+xGi?`1`XoJk4~r>zd1ft4@d)Yo6%)HRZF*F~P63_FYvw
z_?c`U+_+cC9L=GbTQR4#?|jxF2Z<x;rcp&3A1vLzX?jyr<h8SoA1-tY-Iim1yHfmO
zE>DZgwTKUw++Q_+$^6AJ_sCIiezs}vr~mwShC$+iG}H6<e780`bd;Z$z4PF5u{i&a
zk1`4(jnC!sT0h-cKCdW<Me%>g?yDOP2>8#l{_^+3oul0QY}n`g{Cel`UWtl#$r^GS
z9a?Su3QkN+Y?l&J&M`<cJ(DMp>=c*SnVt~%)?e>@*;bj{W0x|7{hwr=Jf`jS?pY11
z&bAprTCex$y_q&6=yX9!zOVWcGi$MIC#Uae>sR&(Zz~P`GIhr1zx%7M@uqdm(AkyZ
z5;V0mXy+NP#arf_?zX;pW|2kKp}5mO-OfHdP&e88)3#?VS*z1-?{bct8uWVQrKtFw
z-`LF``m_QQ0VpjcF*N@#msDvKQD(MEVC*(BG}<`*S?VsS8P<#pF-urLX@wD(&zYd<
u{sChWBO5218Zf;bQJ5vz#K@Y<-~dts#0<BBXMO<D58PcrWeJdWpAP_>GqPy_

literal 0
HcmV?d00001

diff --git a/addons/web/static/src/legacy/scss/fontawesome_overridden.scss b/addons/web/static/src/legacy/scss/fontawesome_overridden.scss
index a234dbc9f81..985095de693 100644
--- a/addons/web/static/src/legacy/scss/fontawesome_overridden.scss
+++ b/addons/web/static/src/legacy/scss/fontawesome_overridden.scss
@@ -1,3 +1,19 @@
+// This is a patch of the font awesome library to add the TikTok icon.
+@font-face {
+    font-family: 'FontAwesome-tiktok-only';
+    src: url('../../../fonts/tiktok_only.woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
+}
+.fa.fa-tiktok {
+    font-family: 'FontAwesome-tiktok-only' !important;
+
+    &:before {
+        content: '\e07b';
+    }
+}
+
 // This is rtl language specific fix
 // It will override the font awesome symbols and flip them 180 degree
 .o_rtl {
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 93811fb0cee..e2b8d593917 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -40,6 +40,7 @@ $o-social-colors: (
     'instagram': #cf2872,
     'whatsapp': #25d366,
     'pinterest': #C8232C,
+    'tiktok': #000000,
 );
 
 $o-theme-figcaption-opacity: 0.6;
diff --git a/addons/website/static/src/snippets/s_social_media/000.scss b/addons/website/static/src/snippets/s_social_media/000.scss
index 1bba940de5a..b5b1d34e3b0 100644
--- a/addons/website/static/src/snippets/s_social_media/000.scss
+++ b/addons/website/static/src/snippets/s_social_media/000.scss
@@ -61,5 +61,10 @@
                 @extend .text-youtube;
             }
         }
+        .s_social_media_tiktok {
+            &, &:hover, &:focus {
+                @extend .text-tiktok;
+            }
+        }
     }
 }