root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: custom srcoll bar style

Browse Source
This commit is contained in:
jialin
2024-08-19 14:34:29 +08:00
parent 5b050265c1
commit 5d1d8773ec
8 changed files with 190 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/column-wrapper.tsx
+14 -2
View File
@@ -1,16 +1,28 @@
import React from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import '../style/column-wrapper.less';
const ColumnWrapper: React.FC<any> = ({ children, footer }) => {
if (footer) {
return (
<div className="column-wrapper-footer">
<div className="column-wrapper">{children}</div>
<div className="column-wrapper">
<SimpleBar
style={{ height: 'calc(100vh - 89px)', paddingBottom: '50px' }}
>
{children}
</SimpleBar>
</div>
{<div className="footer">{footer}</div>}
</div>
);
}
return <div className="column-wrapper">{children}</div>;
return (
<div className="column-wrapper">
<SimpleBar style={{ height: 'calc(100vh - 89px)' }}>{children}</SimpleBar>
</div>
);
};
export default ColumnWrapper;
src/pages/llmodels/components/deploy-modal.tsx
+89 -84
View File
@@ -302,21 +302,22 @@ const AddModal: React.FC<AddModalProps> = (props) => {
styles={{
body: {
height: 'calc(100vh - 57px)',
padding: '16px 0'
padding: '16px 0',
overflowX: 'hidden'
},
content: {
borderRadius: '8px 0 0 8px'
}
}}
width={
modelSource === modelSourceMap.huggingface_value
props.source === modelSourceMap.huggingface_value
? 'calc(100vw - 220px)'
: 600
}
footer={false}
>
<div style={{ display: 'flex' }}>
{modelSource === modelSourceMap.huggingface_value && (
{props.source === modelSourceMap.huggingface_value && (
<ColumnWrapper>
<SearchModel
modelSource={modelSource}
@@ -324,7 +325,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
></SearchModel>
</ColumnWrapper>
)}
{modelSource === modelSourceMap.huggingface_value && (
{props.source === modelSourceMap.huggingface_value && (
<ColumnWrapper>
<ModelCard repo={huggingfaceRepoId}></ModelCard>
<HFModelFile
@@ -346,92 +347,96 @@ const AddModal: React.FC<AddModalProps> = (props) => {
></ModalFooter>
}
>
<TitleWrapper>Configuration</TitleWrapper>
<Form
name="deployModel"
form={form}
onFinish={onOk}
preserve={false}
style={{ padding: '16px 24px' }}
>
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'common.table.name' }) }
)
}
]}
<>
<TitleWrapper>Configuration</TitleWrapper>
<Form
name="deployModel"
form={form}
onFinish={onOk}
preserve={false}
style={{ padding: '16px 24px' }}
>
<SealInput.Input
label={intl.formatMessage({
id: 'common.table.name'
})}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="source"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{ name: intl.formatMessage({ id: 'models.form.source' }) }
)
}
]}
>
{
<SealSelect
disabled={true}
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'common.table.name' }) }
)
}
]}
>
<SealInput.Input
label={intl.formatMessage({
id: 'models.form.source'
id: 'common.table.name'
})}
options={sourceOptions}
required
></SealSelect>
}
</Form.Item>
{renderFieldsBySource()}
<Form.Item<FormData>
name="replicas"
rules={[
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="source"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{ name: intl.formatMessage({ id: 'models.form.source' }) }
)
}
]}
>
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.form.replicas' }) }
)
<SealSelect
disabled={true}
label={intl.formatMessage({
id: 'models.form.source'
})}
options={sourceOptions}
required
></SealSelect>
}
]}
>
<SealInput.Number
style={{ width: '100%' }}
label={intl.formatMessage({
id: 'models.form.replicas'
})}
required
min={0}
></SealInput.Number>
</Form.Item>
<Form.Item<FormData> name="description">
<SealInput.TextArea
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
</Form.Item>
</Form>
</Form.Item>
{renderFieldsBySource()}
<Form.Item<FormData>
name="replicas"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{
name: intl.formatMessage({ id: 'models.form.replicas' })
}
)
}
]}
>
<SealInput.Number
style={{ width: '100%' }}
label={intl.formatMessage({
id: 'models.form.replicas'
})}
required
min={0}
></SealInput.Number>
</Form.Item>
<Form.Item<FormData> name="description">
<SealInput.TextArea
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
</Form.Item>
</Form>
</>
</ColumnWrapper>
</div>
</Drawer>
src/pages/llmodels/components/search-result.tsx
+47 -43
View File
@@ -1,6 +1,8 @@
import { SearchOutlined } from '@ant-design/icons';
import { Col, Empty, Row, Spin } from 'antd';
import React from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import '../style/search-result.less';
import HFModelItem from './hf-model-item';
@@ -28,49 +30,51 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
}
};
return (
<div style={{ ...props.style }} className="search-result-wrap">
<Spin spinning={props.loading}>
<div style={{ minHeight: 200 }}>
{resultList.length ? (
<Row gutter={[16, 24]}>
{resultList.map((item, index) => (
<Col span={24} key={item.name}>
<div
onClick={(e) => handleSelect(e, item)}
onKeyDown={(e) => handleOnEnter(e, item)}
>
<HFModelItem
source={source}
tags={item.tags}
key={index}
title={item.name}
downloads={item.downloads}
likes={item.likes}
task={item.task}
updatedAt={item.updatedAt}
active={item.id === props.current}
/>
</div>
</Col>
))}
</Row>
) : (
!props.loading && (
<Empty
imageStyle={{ height: 'auto', marginTop: '20px' }}
image={
<SearchOutlined
className="font-size-16"
style={{ color: 'var(--ant-color-text-tertiary)' }}
></SearchOutlined>
}
description="No models found"
/>
)
)}
</div>
</Spin>
</div>
<SimpleBar style={{ height: 'calc(100vh - 194px)' }}>
<div style={{ ...props.style }} className="search-result-wrap">
<Spin spinning={props.loading}>
<div style={{ minHeight: 200 }}>
{resultList.length ? (
<Row gutter={[16, 24]}>
{resultList.map((item, index) => (
<Col span={24} key={item.name}>
<div
onClick={(e) => handleSelect(e, item)}
onKeyDown={(e) => handleOnEnter(e, item)}
>
<HFModelItem
source={source}
tags={item.tags}
key={index}
title={item.name}
downloads={item.downloads}
likes={item.likes}
task={item.task}
updatedAt={item.updatedAt}
active={item.id === props.current}
/>
</div>
</Col>
))}
</Row>
) : (
!props.loading && (
<Empty
imageStyle={{ height: 'auto', marginTop: '20px' }}
image={
<SearchOutlined
className="font-size-16"
style={{ color: 'var(--ant-color-text-tertiary)' }}
></SearchOutlined>
}
description="No models found"
/>
)
)}
</div>
</Spin>
</div>
</SimpleBar>
);
};
src/pages/llmodels/style/column-wrapper.less
+4 -23
View File
@@ -1,38 +1,19 @@
.column-wrapper {
flex: 1;
height: calc(100vh - 89px);
overflow-y: auto;
overflow-x: hidden;
border-left: 1px solid var(--ant-color-split);
// custom scrollbar
&::-webkit-scrollbar {
width: 8px;
}
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 4px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
&:hover {
&::-webkit-scrollbar-thumb {
background-color: var(--ant-color-fill);
border-radius: 4px;
}
}
.simplebar-scrollbar::before {
background: rgba(0, 0, 0, 50%);
}
.column-wrapper-footer {
flex: 1;
display: flex;
position: relative;
border-left: 1px solid var(--ant-color-split);
.column-wrapper {
padding-bottom: 50px;
border-left: none;
}
src/pages/llmodels/style/search-result.less
+5 -20
View File
@@ -4,27 +4,12 @@
background-color: rgba(255, 255, 255, 100%);
padding: 16px @padding;
border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
overflow-y: auto;
height: calc(100vh - 194px);
// custom scrollbar
&::-webkit-scrollbar {
width: 8px;
}
// overflow-y: auto;
// height: calc(100vh - 194px);
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 4px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
&:hover {
&::-webkit-scrollbar-thumb {
background-color: var(--ant-color-fill);
}
}
.simplebar-scrollbar::before {
background: rgba(0, 0, 0, 50%);
}
.search-bar {
src/pages/playground/components/chat-footer.tsx
-9
View File
@@ -88,15 +88,6 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
style={{ textAlign: 'right' }}
>
<Space size={20}>
{/* <Button
icon={
<IconFont type="icon-code" className="font-size-16"></IconFont>
}
onClick={onView}
disabled={disabled}
>
{intl.formatMessage({ id: 'playground.viewcode' })}
</Button> */}
{!disabled ? (
<Button
type="primary"