From 559b73bfc258baf2b3c87c671cbcd788a11d917f Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Thu, 4 Jun 2026 16:22:35 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20display=20emoji=20butt?= =?UTF-8?q?on=20on=20hover?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The emoji button is now displayed when hovering the doc header. We reduced the size as well. --- CHANGELOG.md | 4 + .../src/assets/icons/ui-kit/face-remove.svg | 29 +++- .../impress/src/assets/icons/ui-kit/face.svg | 7 +- .../src/cunningham/cunningham-style.css | 2 +- .../docs/doc-header/components/DocHeader.tsx | 24 ++- .../docs/doc-header/components/DocTitle.tsx | 147 ++++++++---------- 6 files changed, 122 insertions(+), 91 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 111cbfd65..5e3c426be 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/face-remove.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/face-remove.svg index 3c73f765a..ff683fd6b 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/face-remove.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/face-remove.svg @@ -1,7 +1,24 @@ - - - - - - + + + + + + diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/face.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/face.svg index 7a8449185..d3aa2e422 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/face.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/face.svg @@ -1,3 +1,6 @@ - - + + diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css index 673c0668c..6cf92de88 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css @@ -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 { diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx index 2a71202ed..6e24e17fb 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx @@ -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; + } + } + `} > { {!isEditable && } - + {displayEmojiButton && ( ); }; @@ -226,42 +219,40 @@ const DocTitleInput = ({ doc }: DocTitleProps) => { }} $width="100%" > - - - handleTitleSubmit(event.target.textContent || '') + + 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} - - + font-size: ${isSmallMobile + ? 'var(--c--globals--font--sizes--h4)' + : 'var(--c--globals--font--sizes--h2)'}; + font-weight: 700; + outline: none; + `} + $width="fit-content" + > + {titleDisplay} + );