💄(frontend) display emoji button on hover

The emoji button is now displayed when hovering
the doc header. We reduced the size as well.
This commit is contained in:
Anthony LC
2026-06-04 16:22:47 +02:00
parent 6e60bb9cb1
commit 559b73bfc2
6 changed files with 122 additions and 91 deletions
+4
View File
@@ -6,6 +6,10 @@ and this project adheres to
## [Unreleased]
### Changed
- 💄(frontend) display emoji button on hover #2396
### Fixed
- 🐛(backend) close thread DB connections to fix test teardown
@@ -1,7 +1,24 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.9951 1.78125C13.4064 1.78126 14.7287 2.04471 15.9619 2.57227C17.2018 3.09986 18.2901 3.83207 19.2266 4.76855C20.163 5.70504 20.8953 6.79336 21.4229 8.0332C21.7574 8.80552 21.9863 9.61293 22.1113 10.4551C21.4263 10.0815 20.6721 9.81952 19.873 9.69141C19.7863 9.39337 19.6845 9.10037 19.5625 8.81445C19.1404 7.81873 18.5503 6.94828 17.792 6.20312C17.0402 5.45136 16.1698 4.86445 15.1807 4.44238C14.1914 4.01372 13.1294 3.79883 11.9951 3.79883C10.8674 3.79883 9.80541 4.01371 8.80957 4.44238C7.82042 4.86445 6.95001 5.45136 6.19824 6.20312C5.44649 6.94828 4.8564 7.81874 4.42773 8.81445C4.00566 9.80369 3.79395 10.8657 3.79395 12C3.79395 13.1343 4.00566 14.1963 4.42773 15.1855C4.8564 16.1747 5.44649 17.0451 6.19824 17.7969C6.95001 18.5486 7.82041 19.1355 8.80957 19.5576C9.80541 19.9863 10.8674 20.2012 11.9951 20.2012C12.2284 20.2012 12.4584 20.189 12.6855 20.1709C13.0874 20.8575 13.6024 21.4691 14.2051 21.9814C13.4942 22.1375 12.758 22.2187 11.9951 22.2188C10.5839 22.2188 9.26151 21.9521 8.02832 21.418C6.79507 20.8904 5.70992 20.1582 4.77344 19.2217C3.83695 18.2918 3.10157 17.2098 2.56738 15.9766C2.03986 14.7368 1.77637 13.4112 1.77637 12C1.77637 10.5887 2.03982 9.26642 2.56738 8.0332C3.10157 6.79337 3.83697 5.70503 4.77344 4.76855C5.70992 3.83207 6.79506 3.09986 8.02832 2.57227C9.26152 2.04472 10.5839 1.78125 11.9951 1.78125Z" fill="#222631"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7275 11.6094C19.3896 11.6094 20.0334 11.7355 20.6582 11.9873C21.2829 12.2298 21.8427 12.5986 22.3369 13.0928C22.8262 13.5822 23.1921 14.1391 23.4346 14.7637C23.6864 15.3886 23.8103 16.0353 23.8057 16.7021C23.8056 17.3642 23.6795 18.0081 23.4277 18.6328C23.1853 19.2574 22.8216 19.8121 22.3369 20.2969C21.8427 20.7911 21.2851 21.162 20.665 21.4092C20.0449 21.6563 19.4012 21.7781 18.7344 21.7734C18.0722 21.7734 17.4286 21.6516 16.8037 21.4092C16.1835 21.162 15.6262 20.7912 15.1318 20.2969C14.6376 19.8026 14.2667 19.2452 14.0195 18.625C13.7771 18.0002 13.6562 17.3564 13.6562 16.6943C13.6516 16.0276 13.7724 15.3838 14.0195 14.7637C14.2667 14.1437 14.6377 13.5869 15.1318 13.0928C15.6262 12.5985 16.1835 12.2276 16.8037 11.9805C17.4239 11.7333 18.0654 11.6094 18.7275 11.6094ZM20.5391 14.2041C20.362 14.2041 20.2033 14.2744 20.0635 14.4141L18.7344 15.7432L17.4053 14.4141C17.2655 14.2743 17.1068 14.2042 16.9297 14.2041C16.7573 14.1994 16.5986 14.2697 16.4541 14.4141C16.3095 14.5586 16.2373 14.7203 16.2373 14.8975C16.2421 15.0698 16.3144 15.2255 16.4541 15.3652L17.7832 16.6943L16.4541 18.0234C16.3143 18.1632 16.2443 18.322 16.2441 18.499C16.2395 18.6716 16.3095 18.831 16.4541 18.9756C16.5986 19.1199 16.7595 19.1924 16.9365 19.1924C17.109 19.1877 17.2654 19.1154 17.4053 18.9756L18.7344 17.6465L20.0635 18.9756C20.2033 19.1152 20.3598 19.1877 20.5322 19.1924C20.7092 19.1923 20.8702 19.1199 21.0146 18.9756C21.1592 18.831 21.2293 18.6716 21.2246 18.499C21.2245 18.322 21.1544 18.1632 21.0146 18.0234L19.6855 16.6943L21.0146 15.3652C21.1542 15.2255 21.2267 15.0697 21.2314 14.8975C21.2314 14.7203 21.1592 14.5586 21.0146 14.4141C20.8702 14.2696 20.7115 14.1995 20.5391 14.2041Z" fill="#222631"/>
<path d="M8.66113 14.582C8.75998 14.5293 8.86552 14.5294 8.97754 14.582C9.34026 14.7733 9.7532 14.9577 10.2148 15.1357C10.6439 15.3012 11.1838 15.3887 11.835 15.4004C11.7647 15.799 11.7266 16.2092 11.7266 16.6279C11.7266 16.706 11.7289 16.7838 11.7314 16.8613C11.1487 16.8346 10.6266 16.7145 10.165 16.501C9.6441 16.2504 9.23841 15.9637 8.94824 15.6406C8.66466 15.3175 8.52246 15.0467 8.52246 14.8291C8.5225 14.7106 8.56897 14.6282 8.66113 14.582Z" fill="#222631"/>
<path d="M9.06738 8.41895C9.37708 8.41908 9.65044 8.54774 9.8877 8.80469C10.1251 9.0553 10.2441 9.37555 10.2441 9.76465C10.2441 10.1602 10.125 10.4829 9.8877 10.7334C9.6504 10.9839 9.37715 11.1092 9.06738 11.1094C8.75742 11.1094 8.48668 10.984 8.25586 10.7334C8.03178 10.4829 7.91901 10.1601 7.91895 9.76465C7.91895 9.37555 8.03163 9.0553 8.25586 8.80469C8.48666 8.54755 8.75746 8.41895 9.06738 8.41895Z" fill="#222631"/>
<path d="M14.9033 8.41895C15.2133 8.41895 15.4872 8.54748 15.7246 8.80469C15.962 9.0553 16.0811 9.37555 16.0811 9.76465C16.081 9.90025 16.065 10.0269 16.0371 10.1455C15.4876 10.376 14.9739 10.6746 14.5059 11.0303C14.3565 10.9681 14.2177 10.87 14.0918 10.7334C13.8679 10.4829 13.7559 10.16 13.7559 9.76465C13.7559 9.37565 13.8677 9.05527 14.0918 8.80469C14.3226 8.54752 14.5934 8.41898 14.9033 8.41895Z" fill="#222631"/>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.9951 1.78125C13.4064 1.78126 14.7287 2.04471 15.9619 2.57227C17.2018 3.09986 18.2901 3.83207 19.2266 4.76855C20.163 5.70504 20.8953 6.79336 21.4229 8.0332C21.7574 8.80552 21.9863 9.61293 22.1113 10.4551C21.4263 10.0815 20.6721 9.81952 19.873 9.69141C19.7863 9.39337 19.6845 9.10037 19.5625 8.81445C19.1404 7.81873 18.5503 6.94828 17.792 6.20312C17.0402 5.45136 16.1698 4.86445 15.1807 4.44238C14.1914 4.01372 13.1294 3.79883 11.9951 3.79883C10.8674 3.79883 9.80541 4.01371 8.80957 4.44238C7.82042 4.86445 6.95001 5.45136 6.19824 6.20312C5.44649 6.94828 4.8564 7.81874 4.42773 8.81445C4.00566 9.80369 3.79395 10.8657 3.79395 12C3.79395 13.1343 4.00566 14.1963 4.42773 15.1855C4.8564 16.1747 5.44649 17.0451 6.19824 17.7969C6.95001 18.5486 7.82041 19.1355 8.80957 19.5576C9.80541 19.9863 10.8674 20.2012 11.9951 20.2012C12.2284 20.2012 12.4584 20.189 12.6855 20.1709C13.0874 20.8575 13.6024 21.4691 14.2051 21.9814C13.4942 22.1375 12.758 22.2187 11.9951 22.2188C10.5839 22.2188 9.26151 21.9521 8.02832 21.418C6.79507 20.8904 5.70992 20.1582 4.77344 19.2217C3.83695 18.2918 3.10157 17.2098 2.56738 15.9766C2.03986 14.7368 1.77637 13.4112 1.77637 12C1.77637 10.5887 2.03982 9.26642 2.56738 8.0332C3.10157 6.79337 3.83697 5.70503 4.77344 4.76855C5.70992 3.83207 6.79506 3.09986 8.02832 2.57227C9.26152 2.04472 10.5839 1.78125 11.9951 1.78125Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.7275 11.6094C19.3896 11.6094 20.0334 11.7355 20.6582 11.9873C21.2829 12.2298 21.8427 12.5986 22.3369 13.0928C22.8262 13.5822 23.1921 14.1391 23.4346 14.7637C23.6864 15.3886 23.8103 16.0353 23.8057 16.7021C23.8056 17.3642 23.6795 18.0081 23.4277 18.6328C23.1853 19.2574 22.8216 19.8121 22.3369 20.2969C21.8427 20.7911 21.2851 21.162 20.665 21.4092C20.0449 21.6563 19.4012 21.7781 18.7344 21.7734C18.0722 21.7734 17.4286 21.6516 16.8037 21.4092C16.1835 21.162 15.6262 20.7912 15.1318 20.2969C14.6376 19.8026 14.2667 19.2452 14.0195 18.625C13.7771 18.0002 13.6562 17.3564 13.6562 16.6943C13.6516 16.0276 13.7724 15.3838 14.0195 14.7637C14.2667 14.1437 14.6377 13.5869 15.1318 13.0928C15.6262 12.5985 16.1835 12.2276 16.8037 11.9805C17.4239 11.7333 18.0654 11.6094 18.7275 11.6094ZM20.5391 14.2041C20.362 14.2041 20.2033 14.2744 20.0635 14.4141L18.7344 15.7432L17.4053 14.4141C17.2655 14.2743 17.1068 14.2042 16.9297 14.2041C16.7573 14.1994 16.5986 14.2697 16.4541 14.4141C16.3095 14.5586 16.2373 14.7203 16.2373 14.8975C16.2421 15.0698 16.3144 15.2255 16.4541 15.3652L17.7832 16.6943L16.4541 18.0234C16.3143 18.1632 16.2443 18.322 16.2441 18.499C16.2395 18.6716 16.3095 18.831 16.4541 18.9756C16.5986 19.1199 16.7595 19.1924 16.9365 19.1924C17.109 19.1877 17.2654 19.1154 17.4053 18.9756L18.7344 17.6465L20.0635 18.9756C20.2033 19.1152 20.3598 19.1877 20.5322 19.1924C20.7092 19.1923 20.8702 19.1199 21.0146 18.9756C21.1592 18.831 21.2293 18.6716 21.2246 18.499C21.2245 18.322 21.1544 18.1632 21.0146 18.0234L19.6855 16.6943L21.0146 15.3652C21.1542 15.2255 21.2267 15.0697 21.2314 14.8975C21.2314 14.7203 21.1592 14.5586 21.0146 14.4141C20.8702 14.2696 20.7115 14.1995 20.5391 14.2041Z"
fill="currentColor"
/>
<path
d="M8.66113 14.582C8.75998 14.5293 8.86552 14.5294 8.97754 14.582C9.34026 14.7733 9.7532 14.9577 10.2148 15.1357C10.6439 15.3012 11.1838 15.3887 11.835 15.4004C11.7647 15.799 11.7266 16.2092 11.7266 16.6279C11.7266 16.706 11.7289 16.7838 11.7314 16.8613C11.1487 16.8346 10.6266 16.7145 10.165 16.501C9.6441 16.2504 9.23841 15.9637 8.94824 15.6406C8.66466 15.3175 8.52246 15.0467 8.52246 14.8291C8.5225 14.7106 8.56897 14.6282 8.66113 14.582Z"
fill="currentColor"
/>
<path
d="M9.06738 8.41895C9.37708 8.41908 9.65044 8.54774 9.8877 8.80469C10.1251 9.0553 10.2441 9.37555 10.2441 9.76465C10.2441 10.1602 10.125 10.4829 9.8877 10.7334C9.6504 10.9839 9.37715 11.1092 9.06738 11.1094C8.75742 11.1094 8.48668 10.984 8.25586 10.7334C8.03178 10.4829 7.91901 10.1601 7.91895 9.76465C7.91895 9.37555 8.03163 9.0553 8.25586 8.80469C8.48666 8.54755 8.75746 8.41895 9.06738 8.41895Z"
fill="currentColor"
/>
<path
d="M14.9033 8.41895C15.2133 8.41895 15.4872 8.54748 15.7246 8.80469C15.962 9.0553 16.0811 9.37555 16.0811 9.76465C16.081 9.90025 16.065 10.0269 16.0371 10.1455C15.4876 10.376 14.9739 10.6746 14.5059 11.0303C14.3565 10.9681 14.2177 10.87 14.0918 10.7334C13.8679 10.4829 13.7559 10.16 13.7559 9.76465C13.7559 9.37565 13.8677 9.05527 14.0918 8.80469C14.3226 8.54752 14.5934 8.41898 14.9033 8.41895Z"
fill="currentColor"
/>
</svg>

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

@@ -1,3 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.9951 22.2189C10.5838 22.2189 9.26146 21.9518 8.02821 21.4176C6.79495 20.89 5.71008 20.158 4.77359 19.2215C3.83711 18.2916 3.10177 17.21 2.56758 15.9768C2.03998 14.7369 1.77618 13.4113 1.77618 12C1.77618 10.5887 2.03998 9.26641 2.56758 8.03315C3.10177 6.7933 3.83711 5.70513 4.77359 4.76865C5.71008 3.83216 6.79495 3.10012 8.02821 2.57252C9.26146 2.04493 10.5838 1.78113 11.9951 1.78113C13.4064 1.78113 14.7287 2.04493 15.9619 2.57252C17.2018 3.10012 18.29 3.83216 19.2264 4.76865C20.1629 5.70513 20.895 6.7933 21.4226 8.03315C21.9568 9.26641 22.2239 10.5887 22.2239 12C22.2239 13.4113 21.9568 14.7369 21.4226 15.9768C20.895 17.21 20.1629 18.2916 19.2264 19.2215C18.29 20.158 17.2018 20.89 15.9619 21.4176C14.7287 21.9518 13.4064 22.2189 11.9951 22.2189ZM11.9951 20.2009C13.1294 20.2009 14.1912 19.9865 15.1804 19.5578C16.1697 19.1358 17.0402 18.5488 17.792 17.797C18.5505 17.0452 19.1407 16.1746 19.5628 15.1854C19.9849 14.1961 20.1959 13.1344 20.1959 12C20.1959 10.8657 19.9849 9.8039 19.5628 8.81465C19.1407 7.81881 18.5505 6.94828 17.792 6.20305C17.0402 5.45122 16.1697 4.86427 15.1804 4.44219C14.1912 4.01352 13.1294 3.79919 11.9951 3.79919C10.8673 3.79919 9.80555 4.01352 8.80971 4.44219C7.82047 4.86427 6.94993 5.45122 6.19811 6.20305C5.44628 6.94828 4.85603 7.81881 4.42736 8.81465C4.00528 9.8039 3.79424 10.8657 3.79424 12C3.79424 13.1344 4.00528 14.1961 4.42736 15.1854C4.85603 16.1746 5.44628 17.0452 6.19811 17.797C6.94993 18.5488 7.82047 19.1358 8.80971 19.5578C9.80555 19.9865 10.8673 20.2009 11.9951 20.2009ZM11.9852 16.8671C11.2993 16.8671 10.6926 16.7451 10.165 16.5011C9.64397 16.2505 9.23838 15.9636 8.9482 15.6404C8.66462 15.3173 8.52283 15.0469 8.52283 14.8293C8.52283 14.7105 8.56899 14.6281 8.66132 14.5819C8.76025 14.5292 8.86577 14.5292 8.97788 14.5819C9.3406 14.7732 9.75279 14.9579 10.2144 15.1359C10.6761 15.314 11.2663 15.403 11.9852 15.403C12.704 15.403 13.2943 15.314 13.7559 15.1359C14.2242 14.9579 14.6364 14.7732 14.9925 14.5819C15.1046 14.5292 15.2101 14.5292 15.309 14.5819C15.408 14.6281 15.4574 14.7105 15.4574 14.8293C15.4574 15.0469 15.3123 15.3173 15.0222 15.6404C14.732 15.9636 14.3264 16.2505 13.8054 16.5011C13.2844 16.7451 12.6777 16.8671 11.9852 16.8671ZM9.06691 11.1097C8.75695 11.1097 8.48656 10.9844 8.25573 10.7338C8.0315 10.4832 7.91939 10.16 7.91939 9.76433C7.91939 9.37523 8.0315 9.05537 8.25573 8.80476C8.48656 8.54756 8.75695 8.41896 9.06691 8.41896C9.37688 8.41896 9.65057 8.54756 9.88799 8.80476C10.1254 9.05537 10.2441 9.37523 10.2441 9.76433C10.2441 10.16 10.1254 10.4832 9.88799 10.7338C9.65057 10.9844 9.37688 11.1097 9.06691 11.1097ZM14.9035 11.1097C14.5935 11.1097 14.3231 10.9844 14.0923 10.7338C13.868 10.4832 13.7559 10.16 13.7559 9.76433C13.7559 9.37523 13.868 9.05537 14.0923 8.80476C14.3231 8.54756 14.5935 8.41896 14.9035 8.41896C15.2134 8.41896 15.4871 8.54756 15.7245 8.80476C15.9619 9.05537 16.0807 9.37523 16.0807 9.76433C16.0807 10.16 15.9619 10.4832 15.7245 10.7338C15.4871 10.9844 15.2134 11.1097 14.9035 11.1097Z" fill="#222631"/>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.9951 22.2189C10.5838 22.2189 9.26146 21.9518 8.02821 21.4176C6.79495 20.89 5.71008 20.158 4.77359 19.2215C3.83711 18.2916 3.10177 17.21 2.56758 15.9768C2.03998 14.7369 1.77618 13.4113 1.77618 12C1.77618 10.5887 2.03998 9.26641 2.56758 8.03315C3.10177 6.7933 3.83711 5.70513 4.77359 4.76865C5.71008 3.83216 6.79495 3.10012 8.02821 2.57252C9.26146 2.04493 10.5838 1.78113 11.9951 1.78113C13.4064 1.78113 14.7287 2.04493 15.9619 2.57252C17.2018 3.10012 18.29 3.83216 19.2264 4.76865C20.1629 5.70513 20.895 6.7933 21.4226 8.03315C21.9568 9.26641 22.2239 10.5887 22.2239 12C22.2239 13.4113 21.9568 14.7369 21.4226 15.9768C20.895 17.21 20.1629 18.2916 19.2264 19.2215C18.29 20.158 17.2018 20.89 15.9619 21.4176C14.7287 21.9518 13.4064 22.2189 11.9951 22.2189ZM11.9951 20.2009C13.1294 20.2009 14.1912 19.9865 15.1804 19.5578C16.1697 19.1358 17.0402 18.5488 17.792 17.797C18.5505 17.0452 19.1407 16.1746 19.5628 15.1854C19.9849 14.1961 20.1959 13.1344 20.1959 12C20.1959 10.8657 19.9849 9.8039 19.5628 8.81465C19.1407 7.81881 18.5505 6.94828 17.792 6.20305C17.0402 5.45122 16.1697 4.86427 15.1804 4.44219C14.1912 4.01352 13.1294 3.79919 11.9951 3.79919C10.8673 3.79919 9.80555 4.01352 8.80971 4.44219C7.82047 4.86427 6.94993 5.45122 6.19811 6.20305C5.44628 6.94828 4.85603 7.81881 4.42736 8.81465C4.00528 9.8039 3.79424 10.8657 3.79424 12C3.79424 13.1344 4.00528 14.1961 4.42736 15.1854C4.85603 16.1746 5.44628 17.0452 6.19811 17.797C6.94993 18.5488 7.82047 19.1358 8.80971 19.5578C9.80555 19.9865 10.8673 20.2009 11.9951 20.2009ZM11.9852 16.8671C11.2993 16.8671 10.6926 16.7451 10.165 16.5011C9.64397 16.2505 9.23838 15.9636 8.9482 15.6404C8.66462 15.3173 8.52283 15.0469 8.52283 14.8293C8.52283 14.7105 8.56899 14.6281 8.66132 14.5819C8.76025 14.5292 8.86577 14.5292 8.97788 14.5819C9.3406 14.7732 9.75279 14.9579 10.2144 15.1359C10.6761 15.314 11.2663 15.403 11.9852 15.403C12.704 15.403 13.2943 15.314 13.7559 15.1359C14.2242 14.9579 14.6364 14.7732 14.9925 14.5819C15.1046 14.5292 15.2101 14.5292 15.309 14.5819C15.408 14.6281 15.4574 14.7105 15.4574 14.8293C15.4574 15.0469 15.3123 15.3173 15.0222 15.6404C14.732 15.9636 14.3264 16.2505 13.8054 16.5011C13.2844 16.7451 12.6777 16.8671 11.9852 16.8671ZM9.06691 11.1097C8.75695 11.1097 8.48656 10.9844 8.25573 10.7338C8.0315 10.4832 7.91939 10.16 7.91939 9.76433C7.91939 9.37523 8.0315 9.05537 8.25573 8.80476C8.48656 8.54756 8.75695 8.41896 9.06691 8.41896C9.37688 8.41896 9.65057 8.54756 9.88799 8.80476C10.1254 9.05537 10.2441 9.37523 10.2441 9.76433C10.2441 10.16 10.1254 10.4832 9.88799 10.7338C9.65057 10.9844 9.37688 11.1097 9.06691 11.1097ZM14.9035 11.1097C14.5935 11.1097 14.3231 10.9844 14.0923 10.7338C13.868 10.4832 13.7559 10.16 13.7559 9.76433C13.7559 9.37523 13.868 9.05537 14.0923 8.80476C14.3231 8.54756 14.5935 8.41896 14.9035 8.41896C15.2134 8.41896 15.4871 8.54756 15.7245 8.80476C15.9619 9.05537 16.0807 9.37523 16.0807 9.76433C16.0807 10.16 15.9619 10.4832 15.7245 10.7338C15.4871 10.9844 15.2134 11.1097 14.9035 11.1097Z"
fill="currentColor"
/>
</svg>

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

@@ -93,7 +93,7 @@
* Tooltip
*/
.c__tooltip {
padding: var(--c--globals--font--sizes--t) var(--c--globals--spacings--xxs);
padding: var(--c--globals--spacings--t) var(--c--globals--spacings--xxs);
}
.c__tooltip .react-aria-OverlayArrow svg {
@@ -1,5 +1,6 @@
import { Button } from '@gouvfr-lasuite/cunningham-react';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import RemoveEmojiSVG from '@/assets/icons/ui-kit/face-remove.svg';
import AddEmojiSVG from '@/assets/icons/ui-kit/face.svg';
@@ -38,6 +39,20 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
aria-label={t('It is the card information about the document.')}
className="--docs--doc-header"
$minHeight="125px"
$css={css`
.--docs--doc-header-emoji-button {
opacity: 0;
&:focus {
opacity: 1;
}
}
&:hover {
.--docs--doc-header-emoji-button {
opacity: 1;
}
}
`}
>
<Box
$gap="base"
@@ -49,10 +64,11 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
{!isEditable && <AlertNetwork />}
</Box>
<Box $gap="sm">
<Box $minHeight="32px">
<Box>
{displayEmojiButton && (
<Button
size="small"
className="--docs--doc-header-emoji-button"
size="nano"
onClick={() => {
const today = new Date();
const isAprilFools =
@@ -70,9 +86,9 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
variant="tertiary"
icon={
emoji ? (
<RemoveEmojiSVG width={24} height={24} aria-hidden="true" />
<RemoveEmojiSVG width={16} height={16} aria-hidden="true" />
) : (
<AddEmojiSVG width={24} height={24} aria-hidden="true" />
<AddEmojiSVG width={16} height={16} aria-hidden="true" />
)
}
style={{ width: 'fit-content' }}
@@ -1,4 +1,3 @@
import { Tooltip } from '@gouvfr-lasuite/cunningham-react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
@@ -59,49 +58,43 @@ const DocTitleEmojiPicker = ({ doc }: DocTitleProps) => {
}
return (
<Tooltip
content={t('Edit document emoji')}
aria-hidden={true}
placement="top"
<Box
className={CLASS_DOC_TITLE}
$css={css`
padding: 4px;
padding-top: 3px;
cursor: pointer;
&:hover {
background-color: ${colorsTokens['gray-100']};
border-radius: var(--c--globals--spacings--st);
}
transition: background-color var(--c--globals--transitions--duration)
var(--c--globals--transitions--ease-out);
`}
>
<Box
className={CLASS_DOC_TITLE}
$css={css`
padding: 4px;
padding-top: 3px;
cursor: pointer;
&:hover {
background-color: ${colorsTokens['gray-100']};
border-radius: var(--c--globals--spacings--st);
}
transition: background-color var(--c--globals--transitions--duration)
var(--c--globals--transitions--ease-out);
`}
>
<DocIcon
buttonProps={{
$width: '32px',
$height: '32px',
$justify: 'space-between',
$align: 'center',
}}
withEmojiPicker={doc.abilities.partial_update}
docId={doc.id}
title={doc.title}
emoji={emoji}
$size="23px"
defaultIcon={
<SimpleFileIcon
width="25px"
height="25px"
aria-hidden="true"
aria-label={t('Simple document icon')}
color={colorsTokens['brand-500']}
/>
}
/>
</Box>
</Tooltip>
<DocIcon
buttonProps={{
$width: '32px',
$height: '32px',
$justify: 'space-between',
$align: 'center',
}}
withEmojiPicker={doc.abilities.partial_update}
docId={doc.id}
title={doc.title}
emoji={emoji}
$size="23px"
defaultIcon={
<SimpleFileIcon
width="25px"
height="25px"
aria-hidden="true"
aria-label={t('Simple document icon')}
color={colorsTokens['brand-500']}
/>
}
/>
</Box>
);
};
@@ -226,42 +219,40 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
}}
$width="100%"
>
<Tooltip content={t('Rename')} aria-hidden={true} placement="top">
<Box
as="span"
role="textbox"
className="--docs--doc-title-input"
contentEditable
defaultValue={titleDisplay || undefined}
onKeyDownCapture={handleKeyDown}
suppressContentEditableWarning={true}
aria-label={`${t('Document title')}`}
aria-multiline={false}
onBlurCapture={(event) =>
handleTitleSubmit(event.target.textContent || '')
<Box
as="span"
role="textbox"
className="--docs--doc-title-input"
contentEditable
defaultValue={titleDisplay || undefined}
onKeyDownCapture={handleKeyDown}
suppressContentEditableWarning={true}
aria-label={`${t('Document title')}`}
aria-multiline={false}
onBlurCapture={(event) =>
handleTitleSubmit(event.target.textContent || '')
}
onPasteCapture={handlePaste}
onDropCapture={handleDrop}
$css={css`
&[contenteditable='true']:empty:not(:focus):before {
content: '${untitledDocument}';
color: var(
--c--contextuals--content--semantic--neutral--tertiary
);
pointer-events: none;
font-style: italic;
}
onPasteCapture={handlePaste}
onDropCapture={handleDrop}
$css={css`
&[contenteditable='true']:empty:not(:focus):before {
content: '${untitledDocument}';
color: var(
--c--contextuals--content--semantic--neutral--tertiary
);
pointer-events: none;
font-style: italic;
}
font-size: ${isSmallMobile
? 'var(--c--globals--font--sizes--h4)'
: 'var(--c--globals--font--sizes--h2)'};
font-weight: 700;
outline: none;
`}
$width="fit-content"
>
{titleDisplay}
</Box>
</Tooltip>
font-size: ${isSmallMobile
? 'var(--c--globals--font--sizes--h4)'
: 'var(--c--globals--font--sizes--h2)'};
font-weight: 700;
outline: none;
`}
$width="fit-content"
>
{titleDisplay}
</Box>
</Box>
</Box>
);