WEBDIENSTE/lasuite-docs
1
0
Fork 0
mirror of https://github.com/suitenumerique/docs.git synced 2026-08-17 21:25:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

💄(frontend) fix some UI/UX in the left panel

Browse Source 
- 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
This commit is contained in:
Anthony LC
2026-07-09 17:46:12 +02:00
parent 8f53e4b068
commit 5a705b045b
7 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1
View File
@@ -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
src/backend/impress/configuration/theme/default.json
+6
View File
@@ -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"
src/frontend/apps/impress/public/assets/icon-docs-dsfr-v3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

src/frontend/apps/impress/src/features/docs/doc-header/components/DocLeftPanelCollapseButton.tsx
+2 -2
View File
@@ -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();
src/frontend/apps/impress/src/features/left-panel/assets/left-panel.svg
+5 -2
View File
@@ -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="M4.04601 20.3381C3.04306 20.3381 2.28465 20.0812 1.77079 19.5673C1.25693 19.0597 1 18.3105 1 17.32V6.01815C1 5.02139 1.25693 4.26917 1.77079 3.7615C2.28465 3.25383 3.04306 3 4.04601 3H19.9447C20.9538 3 21.7154 3.25383 22.2292 3.7615C22.7431 4.26917 23 5.02139 23 6.01815V17.32C23 18.3105 22.7431 19.0597 22.2292 19.5673C21.7154 20.0812 20.9538 20.3381 19.9447 20.3381H4.04601ZM4.15745 18.5087H19.8425C20.2697 18.5087 20.5979 18.3972 20.8269 18.1743C21.056 17.9515 21.1705 17.614 21.1705 17.1621V6.16674C21.1705 5.72098 21.056 5.38666 20.8269 5.16378C20.5979 4.9409 20.2697 4.82946 19.8425 4.82946H4.15745C3.72407 4.82946 3.39285 4.9409 3.16378 5.16378C2.9409 5.38666 2.82946 5.72098 2.82946 6.16674V17.1621C2.82946 17.614 2.9409 17.9515 3.16378 18.1743C3.39285 18.3972 3.72407 18.5087 4.15745 18.5087ZM8.38286 18.8058V4.51372H10.1195V18.8058H8.38286ZM6.56268 8.22837H4.65893C4.49796 8.22837 4.35556 8.16646 4.23174 8.04263C4.11411 7.91881 4.0553 7.78261 4.0553 7.63402C4.0553 7.47305 4.11411 7.33376 4.23174 7.21613C4.35556 7.09849 4.49796 7.03968 4.65893 7.03968H6.56268C6.72984 7.03968 6.87224 7.09849 6.98987 7.21613C7.11369 7.33376 7.1756 7.47305 7.1756 7.63402C7.1756 7.78261 7.11369 7.91881 6.98987 8.04263C6.87224 8.16646 6.72984 8.22837 6.56268 8.22837ZM6.56268 10.7172H4.65893C4.49796 10.7172 4.35556 10.6584 4.23174 10.5407C4.11411 10.4169 4.0553 10.2745 4.0553 10.1136C4.0553 9.95877 4.11411 9.82257 4.23174 9.70494C4.35556 9.58731 4.49796 9.52849 4.65893 9.52849H6.56268C6.72984 9.52849 6.87224 9.58731 6.98987 9.70494C7.11369 9.82257 7.1756 9.95877 7.1756 10.1136C7.1756 10.2745 7.11369 10.4169 6.98987 10.5407C6.87224 10.6584 6.72984 10.7172 6.56268 10.7172ZM6.56268 13.1967H4.65893C4.49796 13.1967 4.35556 13.1379 4.23174 13.0203C4.11411 12.9026 4.0553 12.7664 4.0553 12.6117C4.0553 12.4507 4.11411 12.3114 4.23174 12.1938C4.35556 12.0761 4.49796 12.0173 4.65893 12.0173H6.56268C6.72984 12.0173 6.87224 12.0761 6.98987 12.1938C7.11369 12.3114 7.1756 12.4507 7.1756 12.6117C7.1756 12.7664 7.11369 12.9026 6.98987 13.0203C6.87224 13.1379 6.72984 13.1967 6.56268 13.1967Z" fill="#626A80"/>
<svg viewBox="0 -0.331 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.04601 20.3381C3.04306 20.3381 2.28465 20.0812 1.77079 19.5673C1.25693 19.0597 1 18.3105 1 17.32V6.01815C1 5.02139 1.25693 4.26917 1.77079 3.7615C2.28465 3.25383 3.04306 3 4.04601 3H19.9447C20.9538 3 21.7154 3.25383 22.2292 3.7615C22.7431 4.26917 23 5.02139 23 6.01815V17.32C23 18.3105 22.7431 19.0597 22.2292 19.5673C21.7154 20.0812 20.9538 20.3381 19.9447 20.3381H4.04601ZM4.15745 18.5087H19.8425C20.2697 18.5087 20.5979 18.3972 20.8269 18.1743C21.056 17.9515 21.1705 17.614 21.1705 17.1621V6.16674C21.1705 5.72098 21.056 5.38666 20.8269 5.16378C20.5979 4.9409 20.2697 4.82946 19.8425 4.82946H4.15745C3.72407 4.82946 3.39285 4.9409 3.16378 5.16378C2.9409 5.38666 2.82946 5.72098 2.82946 6.16674V17.1621C2.82946 17.614 2.9409 17.9515 3.16378 18.1743C3.39285 18.3972 3.72407 18.5087 4.15745 18.5087ZM8.38286 18.8058V4.51372H10.1195V18.8058H8.38286ZM6.56268 8.22837H4.65893C4.49796 8.22837 4.35556 8.16646 4.23174 8.04263C4.11411 7.91881 4.0553 7.78261 4.0553 7.63402C4.0553 7.47305 4.11411 7.33376 4.23174 7.21613C4.35556 7.09849 4.49796 7.03968 4.65893 7.03968H6.56268C6.72984 7.03968 6.87224 7.09849 6.98987 7.21613C7.11369 7.33376 7.1756 7.47305 7.1756 7.63402C7.1756 7.78261 7.11369 7.91881 6.98987 8.04263C6.87224 8.16646 6.72984 8.22837 6.56268 8.22837ZM6.56268 10.7172H4.65893C4.49796 10.7172 4.35556 10.6584 4.23174 10.5407C4.11411 10.4169 4.0553 10.2745 4.0553 10.1136C4.0553 9.95877 4.11411 9.82257 4.23174 9.70494C4.35556 9.58731 4.49796 9.52849 4.65893 9.52849H6.56268C6.72984 9.52849 6.87224 9.58731 6.98987 9.70494C7.11369 9.82257 7.1756 9.95877 7.1756 10.1136C7.1756 10.2745 7.11369 10.4169 6.98987 10.5407C6.87224 10.6584 6.72984 10.7172 6.56268 10.7172ZM6.56268 13.1967H4.65893C4.49796 13.1967 4.35556 13.1379 4.23174 13.0203C4.11411 12.9026 4.0553 12.7664 4.0553 12.6117C4.0553 12.4507 4.11411 12.3114 4.23174 12.1938C4.35556 12.0761 4.49796 12.0173 4.65893 12.0173H6.56268C6.72984 12.0173 6.87224 12.0761 6.98987 12.1938C7.11369 12.3114 7.1756 12.4507 7.1756 12.6117C7.1756 12.7664 7.11369 12.9026 6.98987 13.0203C6.87224 13.1379 6.72984 13.1967 6.56268 13.1967Z"
fill="currentColor"
/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelCollapseButton.tsx
+16 -11
View File
@@ -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 (
<CardFloatingBar className="--docs--left-panel-collapse-button">
@@ -27,17 +29,20 @@ export const LeftPanelCollapseButton = ({
variant="tertiary"
icon={<LeftPanelIcon width={24} height={24} aria-hidden="true" />}
data-testid="floating-bar-toggle-left-panel"
></Button>
<FadeComponent isVisible={!!buttonTitle}>
<Text
$size="sm"
$weight={700}
$color="var(--c--globals--colors--gray-1000)"
$padding={{ right: '2xs' }}
>
{buttonTitle}
</Text>
</FadeComponent>
>
{!isSmallMobile && !!buttonTitle && (
<FadeComponent isVisible={!!buttonTitle}>
<Text
$size="sm"
$weight={700}
$color="var(--c--globals--colors--gray-1000)"
title={buttonTitle}
>
{buttonTitle}
</Text>
</FadeComponent>
)}
</Button>
</CardFloatingBar>
);
};
src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFooter.tsx
+1 -3
View File
@@ -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}
/>
<Waffle />
{!isLargeScreen && <ButtonLogin />}
<ButtonLogin />
</Box>
<HelpMenu />
</Box>