pengjunjie/server
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/server.git synced 2026-02-10 18:05:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

[feature] Redesign admin menu icons

Browse Source
This commit is contained in:
Sergey Konovalov
2025-11-20 17:18:16 +03:00
parent dfd6423c9c
commit 9084c44e50
6 changed files with 41 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
AdminPanel/client/src/assets/AppMenuSprite.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

7
AdminPanel/client/src/assets/File.svg
View File

@ -1,7 +0,0 @@
<svg width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 19H14V5.88965L9.08717 1H1L1 19ZM14 20C14.5523 20 15 19.5523 15 19V5.88965C15 5.62361 14.894 5.36854 14.7054 5.18087L9.7926 0.291223C9.6052 0.104709 9.35157 0 9.08717 0H1C0.447715 0 0 0.447716 0 1V19C0 19.5523 0.447715 20 1 20H14Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 2C8.77614 2 9 2.22386 9 2.5V6H12.5C12.7761 6 13 6.22386 13 6.5C13 6.77614 12.7761 7 12.5 7H8.5C8.22386 7 8 6.77614 8 6.5V2.5C8 2.22386 8.22386 2 8.5 2Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 9.5C4 9.22386 4.22386 9 4.5 9H10.5C10.7761 9 11 9.22386 11 9.5C11 9.77614 10.7761 10 10.5 10H4.5C4.22386 10 4 9.77614 4 9.5Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 12.5C4 12.2239 4.22386 12 4.5 12H10.5C10.7761 12 11 12.2239 11 12.5C11 12.7761 10.7761 13 10.5 13H4.5C4.22386 13 4 12.7761 4 12.5Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 15.5C4 15.2239 4.22386 15 4.5 15H10.5C10.7761 15 11 15.2239 11 15.5C11 15.7761 10.7761 16 10.5 16H4.5C4.22386 16 4 15.7761 4 15.5Z" fill="#333333"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

4
AdminPanel/client/src/components/Menu/Menu.js
View File

@ -6,7 +6,6 @@ import MenuItem from './MenuItem/MenuItem';
import AppMenuLogo from '../../assets/AppMenuLogo.svg'; import AppMenuLogo from '../../assets/AppMenuLogo.svg';
import {menuItems} from '../../config/menuItems'; import {menuItems} from '../../config/menuItems';
import styles from './Menu.module.scss'; import styles from './Menu.module.scss';
import FileIcon from '../../assets/File.svg';
function Menu({isOpen, onClose}) { function Menu({isOpen, onClose}) {
const location = useLocation(); const location = useLocation();
@ -55,7 +54,7 @@ function Menu({isOpen, onClose}) {
label={item.label} label={item.label}
isActive={isActiveItem(item.path)} isActive={isActiveItem(item.path)}
onClick={() => handleMenuItemClick(item)} onClick={() => handleMenuItemClick(item)}
icon={FileIcon} iconIndex={item.iconIndex}
/> />
))} ))}
<MenuItem <MenuItem
@ -67,6 +66,7 @@ function Menu({isOpen, onClose}) {
} }
await handleLogout(); await handleLogout();
}} }}
iconIndex={15}
/> />
</div> </div>
</div> </div>

23
AdminPanel/client/src/components/Menu/MenuItem/MenuItem.js
View File

@ -1,9 +1,28 @@
import AppMenuSprite from '../../../assets/AppMenuSprite.svg';
import styles from './MenuItem.module.scss'; import styles from './MenuItem.module.scss';
function MenuItem({label, isActive, onClick, icon}) { const SPRITE_ICON_SIZE = 24;
const SPRITE_TOTAL_HEIGHT = 384;
function MenuItem({label, isActive, onClick, iconIndex}) {
const renderIcon = () => {
const yOffset = -iconIndex * SPRITE_ICON_SIZE;
return (
<div
className={styles['menuItem__icon']}
style={{
backgroundImage: `url(${AppMenuSprite})`,
backgroundPosition: `0 ${yOffset}px`,
backgroundRepeat: 'no-repeat',
backgroundSize: `${SPRITE_ICON_SIZE}px ${SPRITE_TOTAL_HEIGHT}px`
}}
/>
);
};
return ( return (
<div className={`${styles.menuItem} ${isActive ? styles['menuItem--active'] : ''}`} onClick={onClick}> <div className={`${styles.menuItem} ${isActive ? styles['menuItem--active'] : ''}`} onClick={onClick}>
{icon ? <img src={icon} alt='' className={styles['menuItem__icon']} /> : <div className={styles['menuItem__icon']} />} {renderIcon()}
<span className={styles['menuItem__label']}>{label}</span> <span className={styles['menuItem__label']}>{label}</span>
</div> </div>
); );

6
AdminPanel/client/src/components/Menu/MenuItem/MenuItem.module.scss
View File

@ -16,9 +16,9 @@
} }
&__icon { &__icon {
width: 15px; width: 24px;
height: 20px; height: 24px;
margin-right: 17px; margin-right: 12px;
} }
&__label { &__label {

28
AdminPanel/client/src/config/menuItems.js
View File

@ -14,18 +14,18 @@ import Example from '../pages/Example/Example';
import Forgotten from '../pages/Forgotten/Forgotten'; import Forgotten from '../pages/Forgotten/Forgotten';
export const menuItems = [ export const menuItems = [
{key: 'statistics', label: 'Statistics', path: '/statistics', component: Statistics}, {key: 'statistics', label: 'Statistics', path: '/statistics', component: Statistics, iconIndex: 1},
{key: 'ai-integration', label: 'AI Integration', path: '/ai-integration', component: AiIntegration}, {key: 'ai-integration', label: 'AI Integration', path: '/ai-integration', component: AiIntegration, iconIndex: 2},
{key: 'example', label: 'Example', path: '/example', component: Example}, {key: 'example', label: 'Example', path: '/example', component: Example, iconIndex: 3},
{key: 'file-limits', label: 'File Limits', path: '/file-limits', component: FileLimits}, {key: 'file-limits', label: 'File Limits', path: '/file-limits', component: FileLimits, iconIndex: 4},
{key: 'ip-filtering', label: 'IP Filtering', path: '/ip-filtering', component: SecuritySettings}, {key: 'ip-filtering', label: 'IP Filtering', path: '/ip-filtering', component: SecuritySettings, iconIndex: 5},
{key: 'expiration', label: 'Expiration', path: '/expiration', component: Expiration}, {key: 'expiration', label: 'Expiration', path: '/expiration', component: Expiration, iconIndex: 6},
{key: 'request-filtering', label: 'Request Filtering', path: '/request-filtering', component: RequestFiltering}, {key: 'request-filtering', label: 'Request Filtering', path: '/request-filtering', component: RequestFiltering, iconIndex: 7},
{key: 'wopi-settings', label: 'WOPI Settings', path: '/wopi-settings', component: WOPISettings}, {key: 'wopi-settings', label: 'WOPI Settings', path: '/wopi-settings', component: WOPISettings, iconIndex: 8},
{key: 'notifications', label: 'Notifications', path: '/notifications', component: EmailConfig}, {key: 'notifications', label: 'Notifications', path: '/notifications', component: EmailConfig, iconIndex: 9},
{key: 'logger-config', label: 'Logger Config', path: '/logger-config', component: LoggerConfig}, {key: 'logger-config', label: 'Logger Config', path: '/logger-config', component: LoggerConfig, iconIndex: 10},
{key: 'settings', label: 'Settings', path: '/settings', component: Settings}, {key: 'settings', label: 'Settings', path: '/settings', component: Settings, iconIndex: 11},
{key: 'forgotten', label: 'Forgotten Files', path: '/forgotten', component: Forgotten}, {key: 'forgotten', label: 'Forgotten Files', path: '/forgotten', component: Forgotten, iconIndex: 12},
{key: 'healthcheck', label: 'Health Check', path: '/healthcheck', component: HealthCheck}, {key: 'healthcheck', label: 'Health Check', path: '/healthcheck', component: HealthCheck, iconIndex: 13},
{key: 'change-password', label: 'Change Password', path: '/change-password', component: ChangePassword} {key: 'change-password', label: 'Change Password', path: '/change-password', component: ChangePassword, iconIndex: 14}
]; ];