From 5a705b045b512d6e0cf7fe11154a40a9781185bf Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Thu, 9 Jul 2026 17:33:00 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20fix=20some=20UI/UX=20i?= =?UTF-8?q?n=20the=20left=20panel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Collapse panel button is now: - fully clickable, - the title is hidden - when the doc title is visible - when small mobile the title is hidden - Add button login when logout whatever the device - Fix flickering logo - New icon name to avoid cache --- CHANGELOG.md | 1 + .../impress/configuration/theme/default.json | 6 ++++ .../public/assets/icon-docs-dsfr-v3.png | Bin 0 -> 6800 bytes .../components/DocLeftPanelCollapseButton.tsx | 4 +-- .../features/left-panel/assets/left-panel.svg | 7 +++-- .../components/LeftPanelCollapseButton.tsx | 27 +++++++++++------- .../left-panel/components/LeftPanelFooter.tsx | 4 +-- 7 files changed, 31 insertions(+), 18 deletions(-) create mode 100644 src/frontend/apps/impress/public/assets/icon-docs-dsfr-v3.png diff --git a/CHANGELOG.md b/CHANGELOG.md index cae849931..30c3f98c1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ and this project adheres to ### Fixed +- 💄(frontend) fix some UI/UX in the left panel #2516 - 🐛(frontend) fix tree dnd firefox #2516 diff --git a/src/backend/impress/configuration/theme/default.json b/src/backend/impress/configuration/theme/default.json index 4c752dd48..d21444014 100644 --- a/src/backend/impress/configuration/theme/default.json +++ b/src/backend/impress/configuration/theme/default.json @@ -4,6 +4,8 @@ "logo": { "src": "/assets/icon-docs.svg", "alt": "Docs Logo", + "width": 54, + "height": 63, "style": { "width": "54px", "height": "auto" }, "withTitle": true }, @@ -130,6 +132,8 @@ "with-proconnect": false, "icon-banner": { "src": "/assets/icon-docs.svg", + "width": 64, + "height": 74, "style": { "width": "64px", "height": "auto" @@ -141,6 +145,8 @@ "logo": {}, "icon": { "src": "/assets/icon-docs.svg", + "width": 36, + "height": 42, "style": { "width": "36px", "height": "auto" diff --git a/src/frontend/apps/impress/public/assets/icon-docs-dsfr-v3.png b/src/frontend/apps/impress/public/assets/icon-docs-dsfr-v3.png new file mode 100644 index 0000000000000000000000000000000000000000..a11c7a63ce04ea32d75b3bbef4aa7011cdc8f997 GIT binary patch literal 6800 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

}wkU4dyp zIn6b~lv6Ae=&=G(I9aomVaq(AU2*eGHv*?w-lQ0&{w=TnnNjH)y|ikpM6 z?g+cVtEBgoJl^U2=llgNxkrs#;~Gax12960>#61~DuAOn23o~aS33~|4a(gbupIy> zMJRp_KL!IuZP7_LLR9|c87%L1K}f*2+#mHT+N!YAd&;!#^y5|iWvv6Z)O5bkar?zP zl0#ifyaoR?v?}C_qssPq8@@VY!`5aMgm+YW<@3+F13^jst^fNBD+LtsntNqy*{HklPgY0ul za6oZd>P1b@ufKWb&B0Z>;b=PLK|yT8qoJcY&uD>s&2!{Qt5DxSPEnV&&Otg?1C2_c z!uQqb9Fy}xluUU?i=y)%USlHJCl4s=-h)>x17Ec?|6`KCM0Z#xz`MXZEZKH%vS#hX zeBylV6d+pNjB4qeB3R!?9dS9K-EBy7sphnhTT7@-#WJ~atNl!euaap%cp3aWmsO!r zfIC5vsDMPX9!NDs2QV(9S;$K&qeGtZo}88Z>ByBdp2w_*ml-eB*N2G@NkShR^vk@M zi9)%StX>3h*Vgg5_PLD{A{}rJGgd~n%@*2BC`&z_{af7vf-9?i;p2&Dh`b>NQOq~qoq0= z$D@(7^a5e&UCDQ|v~~#NOMAD|XcsM$JD{P_CPCMsG_A<)DB8(zA_RfPMrw+&S+ZrU zJeaqN1`IV$cs{(P021c6{l*iC<)g#)ysYMjuk3kD(5XY;5EX-0w(VL6CU<6r?=!07 z<-vG6N{V_qk+KnyF4>Y&8%OP+@-nNlcRJ>6zLPC&&4H1$lP^c{$i+nYACA8wY)Pe$ z)GK_K+*_0F3%1SFW2Osttn*afi1yS)Dn13Wv3<7l9cCTTt`^_+g`GyTdeWV{!n$PA zFUYnda*iK*{^;UxF%vR0DTt4nso74tycoNj-5~fYJU`F8euQ*Y{Wg9IQ71!fci??V z4z@N$+20EAG`IRrKC8K_`+;$vfZ6YwZfgKrON)xTd%X;V8Pkz^V;H^vWn*$lqej=> z*Pk*Rj#DEASboVzU$=4~nbh%^fexZjb&<6v8PDWoKLhZBP)9KeL+ z*41qWOP^E`t;B6wwXaU>Owlmw#wilf-Y%#jvm4FNE%-BIQx`k#F|+)Dvh||mXYWYb zIkP$x|E6QhIc?U=s<^J5Zi=^#1r+pn%%&k{~?z>QlMkIqUG-RIP;oHoxXkOA4=grM`@j zU4KmO$vGGd_YFvj8;>KIC34M8yXUc8qz?o6n3@dHw_ZqH@1o>=#Uddm*Yjt|yI)#F SF~Gk_ARSG8jVg6``2PXscs&*X literal 0 HcmV?d00001 diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocLeftPanelCollapseButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocLeftPanelCollapseButton.tsx index 79b9aa534..6f8af2285 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocLeftPanelCollapseButton.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocLeftPanelCollapseButton.tsx @@ -50,7 +50,7 @@ export const DocLeftPanelCollapseButton = () => { * visibility to show or hide the collapse button accordingly */ useEffect(() => { - if (!isDocTitleInDom) { + if (!isDocTitleInDom || isPanelOpen) { return; } @@ -77,7 +77,7 @@ export const DocLeftPanelCollapseButton = () => { observer.disconnect(); setIsDocTitleVisible(true); }; - }, [isDocTitleInDom]); + }, [isDocTitleInDom, isPanelOpen]); const { untitledDocument } = useTrans(); diff --git a/src/frontend/apps/impress/src/features/left-panel/assets/left-panel.svg b/src/frontend/apps/impress/src/features/left-panel/assets/left-panel.svg index 45b99f7e5..7d4b6a4a2 100644 --- a/src/frontend/apps/impress/src/features/left-panel/assets/left-panel.svg +++ b/src/frontend/apps/impress/src/features/left-panel/assets/left-panel.svg @@ -1,3 +1,6 @@ - - + + diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelCollapseButton.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelCollapseButton.tsx index 7ca7dea0f..b55d91877 100644 --- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelCollapseButton.tsx +++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelCollapseButton.tsx @@ -3,6 +3,7 @@ import { Button } from '@gouvfr-lasuite/cunningham-react'; import { Text } from '@/components'; import { FadeComponent } from '@/components/Effect'; import { CardFloatingBar } from '@/components/FloatingBar'; +import { useResponsiveStore } from '@/stores'; import LeftPanelIcon from '../assets/left-panel.svg'; import { useLeftPanelStore } from '../stores'; @@ -15,6 +16,7 @@ export const LeftPanelCollapseButton = ({ buttonTitle?: string; }) => { const { isPanelOpen, togglePanel } = useLeftPanelStore(); + const { isSmallMobile } = useResponsiveStore(); return ( @@ -27,17 +29,20 @@ export const LeftPanelCollapseButton = ({ variant="tertiary" icon={} data-testid="floating-bar-toggle-left-panel" - > - - - {buttonTitle} - - + > + {!isSmallMobile && !!buttonTitle && ( + + + {buttonTitle} + + + )} + ); }; diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFooter.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFooter.tsx index c26266183..3cd62b0b6 100644 --- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFooter.tsx +++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFooter.tsx @@ -8,10 +8,8 @@ import { useAuth } from '@/features/auth/hooks/useAuth'; import { gotoLogout } from '@/features/auth/utils'; import { HelpMenu } from '@/features/help'; import { LanguagePicker } from '@/features/language/components/LanguagePicker'; -import { useResponsiveStore } from '@/stores'; export const LeftPanelFooter = () => { - const { isLargeScreen } = useResponsiveStore(); const { t } = useTranslation(); const { user } = useAuth(); @@ -35,7 +33,7 @@ export const LeftPanelFooter = () => { withMobileView={false} /> - {!isLargeScreen && } +