WEBDIENSTE/openswarm
1
0
Fork 0
mirror of https://github.com/openswarm-ai/openswarm.git synced 2026-09-13 05:07:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

[eric] ui: per-glyph hover animations (gear spins, palette tilts, plus rotates, arrows slide) + toolbar/settings icons to lucide

Browse Source
This commit is contained in:
ciregenz
2026-06-10 22:51:09 -07:00
parent 7ca46e55bc
commit 583c39e65c
2 changed files with 31 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/components/Layout/AppShell.tsx
+28 -11
View File
@@ -21,12 +21,9 @@ import BuildIcon from '@mui/icons-material/BuildOutlined';
import TuneIcon from '@mui/icons-material/TuneOutlined';
import { LayoutGrid } from 'lucide-react';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import AddIcon from '@mui/icons-material/Add';
import { Settings as LucideSettings } from 'lucide-react';
import { Palette } from 'lucide-react';
import { PanelLeft } from 'lucide-react';
import ArrowBackOutlinedIcon from '@mui/icons-material/ArrowBackOutlined';
import ArrowForwardOutlinedIcon from '@mui/icons-material/ArrowForwardOutlined';
import { PanelLeft, ArrowLeft, ArrowRight, Plus } from 'lucide-react';
import RestartAltIcon from '@mui/icons-material/RestartAlt';
import SystemUpdateAltIcon from '@mui/icons-material/SystemUpdateAlt';
import CloseIcon from '@mui/icons-material/Close';
@@ -395,7 +392,9 @@ const AppShell: React.FC = () => {
color: c.text.tertiary,
p: 0.5,
borderRadius: 1,
'& svg': { transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)' },
'&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` },
'&:hover svg': { transform: 'translateX(-1.5px) scale(1.08)' },
}}
>
<PanelLeft size={18} />
@@ -410,10 +409,12 @@ const AppShell: React.FC = () => {
color: c.text.tertiary,
p: 0.5,
borderRadius: 1,
'& svg': { transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)' },
'&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` },
'&:hover svg': { transform: 'translateX(-2px)' },
}}
>
<ArrowBackOutlinedIcon sx={{ fontSize: 18 }} />
<ArrowLeft size={18} />
</IconButton>
</Tooltip>
<Tooltip title="Forward">
@@ -425,10 +426,12 @@ const AppShell: React.FC = () => {
color: c.text.tertiary,
p: 0.5,
borderRadius: 1,
'& svg': { transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)' },
'&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` },
'&:hover svg': { transform: 'translateX(2px)' },
}}
>
<ArrowForwardOutlinedIcon sx={{ fontSize: 18 }} />
<ArrowRight size={18} />
</IconButton>
</Tooltip>
@@ -625,10 +628,18 @@ const AppShell: React.FC = () => {
// Tactile hover: the leading section icon springs once on row-hover, then settles.
// Interaction-only, never ambient. Scoped to ListItemIcon so the +/chevron stay put.
'& .MuiListItemIcon-root svg': {
transition: 'transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1)',
transition: 'transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1)',
},
'& .MuiListItemButton-root:hover .MuiListItemIcon-root svg': {
transform: 'scale(1.15)',
// Per-glyph hover choreography: each section icon reacts in its own way,
// springy then settles. Interaction-only, never ambient.
'& [data-onboarding="sidebar-dashboards"]:hover .MuiListItemIcon-root svg': {
transform: 'scale(1.14)',
},
'& [data-onboarding="sidebar-customization"]:hover .MuiListItemIcon-root svg': {
transform: 'rotate(-14deg) scale(1.06)',
},
'& [data-onboarding="sidebar-apps"]:hover .MuiListItemIcon-root svg': {
transform: 'rotate(8deg) scale(1.08)',
},
}}>
<Box sx={{ px: 1, mb: 0.25 }}>
@@ -669,10 +680,12 @@ const AppShell: React.FC = () => {
p: 0.25,
mr: 0.25,
borderRadius: 1,
'& svg': { transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)' },
'&:hover': { color: c.accent.primary, bgcolor: `${c.accent.primary}14` },
'&:hover svg': { transform: 'rotate(90deg)' },
}}
>
<AddIcon sx={{ fontSize: 15 }} />
<Plus size={15} />
</IconButton>
</Tooltip>
{dashboardList.length > 0 && (
@@ -926,10 +939,12 @@ const AppShell: React.FC = () => {
p: 0.25,
mr: 0.25,
borderRadius: 1,
'& svg': { transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)' },
'&:hover': { color: c.accent.primary, bgcolor: `${c.accent.primary}14` },
'&:hover svg': { transform: 'rotate(90deg)' },
}}
>
<AddIcon sx={{ fontSize: 15 }} />
<Plus size={15} />
</IconButton>
</Tooltip>
{appsList.length > 0 && (
@@ -1016,7 +1031,9 @@ const AppShell: React.FC = () => {
borderRadius: 1.5,
py: 0.6,
px: 1.25,
'& .MuiListItemIcon-root svg': { transition: 'transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)' },
'&:hover': { bgcolor: `${c.text.tertiary}0A` },
'&:hover .MuiListItemIcon-root svg': { transform: 'rotate(90deg)' },
transition: 'background-color 0.15s',
}}
>
frontend/src/app/pages/Settings/sections/SettingsHeader.tsx
+3 -3
View File
@@ -5,7 +5,7 @@ import IconButton from '@mui/material/IconButton';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import DialogTitle from '@mui/material/DialogTitle';
import CloseIcon from '@mui/icons-material/Close';
import { X } from 'lucide-react';
import { useClaudeTokens } from '@/shared/styles/ThemeContext';
const SettingsHeader: React.FC<{
@@ -25,8 +25,8 @@ const SettingsHeader: React.FC<{
<Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}>
Settings
</Typography>
<IconButton onClick={onClose} size="small" data-onboarding="settings-close-button" sx={{ color: c.text.tertiary, '&:hover': { color: c.text.primary } }}>
<CloseIcon sx={{ fontSize: 18 }} />
<IconButton onClick={onClose} size="small" data-onboarding="settings-close-button" sx={{ color: c.text.tertiary, '& svg': { transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)' }, '&:hover': { color: c.text.primary }, '&:hover svg': { transform: 'rotate(90deg)' } }}>
<X size={18} />
</IconButton>
</Box>
<Tabs