feat: Update icon font and navigation buttons

- Updated icon font references and added new icon font glyphs.
- Updated icon font file for improved rendering.
- Updated icon font sizes and hover animations for navigation buttons.
- Removed border styles from styled Container component.
- Removed unused import and updated icon for '/settings/model' menu item.
This commit is contained in:
kangfenmao 2024-09-06 10:00:18 +08:00
parent f194ebbc20
commit dfbdb989db
5 changed files with 32 additions and 31 deletions

View File

@ -1,6 +1,6 @@
@font-face {
font-family: 'iconfont'; /* Project id 4563475 */
src: url('iconfont.woff2?t=1725450669049') format('woff2');
src: url('iconfont.woff2?t=1725587595482') format('woff2');
}
.iconfont {
@ -11,26 +11,22 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-ai-model:before {
content: '\e827';
}
.icon-ai-model1:before {
content: '\ec09';
}
.icon-gridlines:before {
content: '\e942';
}
.icon-grid-frame:before {
content: '\e680';
}
.icon-grid-row-2copy:before {
content: '\e681';
}
.icon-sidebar-left:before {
content: '\e6ab';
}
.icon-sidebar-right:before {
content: '\e6ac';
}
.icon-inbox:before {
content: '\e869';
}
@ -63,6 +59,14 @@
content: '\e758';
}
.icon-hide-sidebar:before {
content: '\e8eb';
}
.icon-show-sidebar:before {
content: '\e944';
}
.icon-a-addchat:before {
content: '\e658';
}

View File

@ -48,9 +48,9 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, setActiv
{showAssistants && (
<NavbarLeft style={{ justifyContent: 'space-between', borderRight: 'none', padding: '0 8px' }}>
<NewButton onClick={toggleShowAssistants} style={{ marginLeft: isMac ? 8 : 0 }}>
<i className="iconfont icon-sidebar-right" />
<i className="iconfont icon-hide-sidebar" />
</NewButton>
<NewButton onClick={onCreateAssistant} style={{ marginRight: 6 }}>
<NewButton onClick={onCreateAssistant}>
<i className="iconfont icon-a-addchat" />
</NewButton>
</NavbarLeft>
@ -66,7 +66,7 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, setActiv
<HStack alignItems="center">
{!showAssistants && (
<NewButton onClick={toggleShowAssistants} style={{ marginRight: isMac ? 8 : 25 }}>
<i className="iconfont icon-sidebar-left" />
<i className="iconfont icon-show-sidebar" />
</NewButton>
)}
{showAssistants && (
@ -80,13 +80,13 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, setActiv
</NewButton>
</NavbarCenter>
)}
<NavbarRight style={{ justifyContent: 'space-between', paddingRight: isWindows ? 130 : 12, flex: 1 }}>
<NavbarRight style={{ justifyContent: 'space-between', paddingRight: isWindows ? 136 : 12, flex: 1 }}>
<HStack alignItems="center">
{!showAssistants && (topicPosition === 'left' ? !showTopics : true) && (
<NewButton
onClick={() => toggleShowAssistants()}
style={{ marginRight: isMac ? 8 : 25, marginLeft: isMac ? 8 : 0 }}>
<i className="iconfont icon-sidebar-left" />
style={{ marginRight: isMac ? 8 : 25, marginLeft: isMac ? 4 : 0 }}>
<i className="iconfont icon-show-sidebar" />
</NewButton>
)}
<TitleText
@ -106,7 +106,7 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, setActiv
/>
{topicPosition === 'right' && (
<NewButton onClick={toggleShowTopics}>
<i className={`iconfont icon-sidebar-${showTopics ? 'left' : 'right'}`} />
<i className={`iconfont icon-${showTopics ? 'show' : 'hide'}-sidebar`} />
</NewButton>
)}
</HStack>
@ -127,7 +127,7 @@ export const NewButton = styled.div`
transition: all 0.2s ease-in-out;
cursor: pointer;
.iconfont {
font-size: 18px;
font-size: 19px;
color: var(--color-icon);
}
.icon-a-addchat {

View File

@ -117,8 +117,6 @@ const Container = styled.div`
padding-top: 10px;
min-width: var(--topic-list-width);
max-width: var(--topic-list-width);
border-right: 0.5px solid var(--color-border);
border-left: 0.5px solid var(--color-border);
overflow-y: scroll;
height: calc(100vh - var(--navbar-height));
`

View File

@ -1,10 +1,4 @@
import {
CloudOutlined,
CodeSandboxOutlined,
InfoCircleOutlined,
MessageOutlined,
SettingOutlined
} from '@ant-design/icons'
import { CloudOutlined, InfoCircleOutlined, MessageOutlined, SettingOutlined } from '@ant-design/icons'
import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
import { isLocalAi } from '@renderer/config/env'
import { FC } from 'react'
@ -41,7 +35,7 @@ const SettingsPage: FC = () => {
</MenuItemLink>
<MenuItemLink to="/settings/model">
<MenuItem className={isRoute('/settings/model')}>
<CodeSandboxOutlined />
<i className="iconfont icon-ai-model" />
{t('settings.model')}
</MenuItem>
</MenuItemLink>
@ -122,6 +116,11 @@ const MenuItem = styled.li`
font-size: 16px;
opacity: 0.8;
}
.iconfont {
font-size: 18px;
opacity: 0.7;
margin-left: -1px;
}
&:hover {
background: var(--color-background-soft);
}