whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat:(sidebar): compact layout

Browse Source
This commit is contained in:
kangfenmao 2024-07-14 13:28:45 +08:00
parent 750a2783bd
commit 71856a5cd5
5 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/index.ts
View File

@ -24,7 +24,7 @@ function createWindow(): void {
show: true, show: true,
autoHideMenuBar: true, autoHideMenuBar: true,
titleBarStyle: 'hiddenInset', titleBarStyle: 'hiddenInset',
trafficLightPosition: { x: 8, y: 8 }, trafficLightPosition: { x: 8, y: 12 },
...(process.platform === 'linux' ? { icon } : {}), ...(process.platform === 'linux' ? { icon } : {}),
webPreferences: { webPreferences: {
preload: join(__dirname, '../preload/index.js'), preload: join(__dirname, '../preload/index.js'),

2
src/renderer/src/assets/styles/index.scss
View File

@ -33,7 +33,7 @@
--color-border: #ffffff20; --color-border: #ffffff20;
--navbar-height: 42px; --navbar-height: 42px;
--sidebar-width: 68px; --sidebar-width: 55px;
--assistants-width: 235px; --assistants-width: 235px;
--topic-list-width: 250px; --topic-list-width: 250px;
--settings-width: var(--assistants-width); --settings-width: var(--assistants-width);

6
src/renderer/src/components/app/Navbar.tsx
View File

@ -28,12 +28,14 @@ const NavbarContainer = styled.div`
border-bottom: 0.5px solid var(--color-border); border-bottom: 0.5px solid var(--color-border);
-webkit-app-region: drag; -webkit-app-region: drag;
background-color: #1f1f1f; background-color: #1f1f1f;
margin-left: calc(var(--sidebar-width) * -1);
padding-left: var(--sidebar-width);
` `
const NavbarLeftContainer = styled.div` const NavbarLeftContainer = styled.div`
min-width: var(--assistants-width); min-width: var(--assistants-width);
border-right: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
padding: 0 16px; padding: 0 10px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -48,7 +50,7 @@ const NavbarCenterContainer = styled.div`
color: var(--color-text-1); color: var(--color-text-1);
text-align: center; text-align: center;
border-right: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
padding: 0 16px; padding: 0 20px;
` `
const NavbarRightContainer = styled.div` const NavbarRightContainer = styled.div`

16
src/renderer/src/components/app/Sidebar.tsx
View File

@ -44,20 +44,20 @@ const Container = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 16px 0; padding: 12px 0;
min-width: var(--sidebar-width); min-width: var(--sidebar-width);
min-height: 100%; min-height: 100%;
padding-top: 40px;
padding-bottom: 10px;
-webkit-app-region: drag !important; -webkit-app-region: drag !important;
background-color: #1f1f1f; background-color: #1f1f1f;
border-right: 0.5px solid var(--color-border); border-right: 0.5px solid var(--color-border);
margin-top: var(--navbar-height);
padding-bottom: calc(var(--navbar-height) + 6px);
` `
const AvatarImg = styled.img` const AvatarImg = styled.img`
border-radius: 50%; border-radius: 50%;
width: 32px; width: 28px;
height: 32px; height: 28px;
background-color: var(--color-background-soft); background-color: var(--color-background-soft);
margin: 5px 0; margin: 5px 0;
` `
@ -73,8 +73,8 @@ const Menus = styled.div`
` `
const Icon = styled.div` const Icon = styled.div`
width: 36px; width: 34px;
height: 36px; height: 34px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -84,7 +84,7 @@ const Icon = styled.div`
-webkit-app-region: none; -webkit-app-region: none;
.iconfont { .iconfont {
color: var(--color-icon); color: var(--color-icon);
font-size: 22px; font-size: 20px;
transition: color 0.2s ease; transition: color 0.2s ease;
text-decoration: none; text-decoration: none;
} }

2
src/renderer/src/pages/home/components/Navigation.tsx
View File

@ -32,7 +32,7 @@ const Navigation: FC<Props> = ({ activeAssistant }) => {
})) }))
return ( return (
<NavbarCenter style={{ border: 'none' }}> <NavbarCenter style={{ border: 'none', padding: '0 15px' }}>
{activeAssistant?.name} {activeAssistant?.name}
<DropdownMenu menu={{ items, style: { maxHeight: '80vh', overflow: 'auto' } }} trigger={['click']}> <DropdownMenu menu={{ items, style: { maxHeight: '80vh', overflow: 'auto' } }} trigger={['click']}>
<Button size="small" type="primary" ghost style={{ fontSize: '11px' }}> <Button size="small" type="primary" ghost style={{ fontSize: '11px' }}>