style: custom srcoll bar style
This commit is contained in:
jialin
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user