Skip to content

Commit

Permalink
feat: update iconfont
Browse files Browse the repository at this point in the history
mod: code review
  • Loading branch information
hetao92 committed Feb 22, 2022
1 parent a0bc229 commit 86420d8
Show file tree
Hide file tree
Showing 36 changed files with 254 additions and 615 deletions.
1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ node_modules/
.vscode
*.swp
*.lock
*.js
*.map
.github/workflows/nodejs.yml

Expand Down
55 changes: 55 additions & 0 deletions app-v2/App.less → app-v2/app.less
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,11 @@
color: @red;
border-color: @red;

svg {
width: 20px;
height: 20px;
}

&:hover {
color: @red;
border-color: @red;
Expand All @@ -76,9 +81,59 @@
.ant-btn.primary-btn {
color: @blue;
border-color: @blue;
display: inline-flex;
align-items: center;

svg {
width: 20px;
height: 20px;
}

&:hover {
color: @blue;
border-color: @blue;
}
}

.ant-btn.cancel-btn {
color: @darkGray;
border-color: @darkGray;

svg {
width: 20px;
height: 20px;
}

&:hover {
color: @darkGray;
border-color: @darkGray;
}
}

.ant-btn.studio-add-btn {
border-radius: 3px;
display: inline-flex;
align-items: center;
padding: 0 29px;

a {
display: flex;
align-items: center;
}

.studio-add-btn-icon {
display: inline-flex;
margin-right: 10px;
height: 22px;

> svg {
width: 22px;
height: 22px;
}

& ~ span {
margin-left: 0;
}
}
}

8 changes: 7 additions & 1 deletion app-v2/components/Breadcrumb/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
display: flex;
padding-left: 0;
padding-right: 0;
.arrow-icon {
.arrow-icon > svg {
width: 23px;
height: 23px;
margin-right: 15px;
Expand All @@ -18,10 +18,16 @@
align-items: center;
}
.ant-breadcrumb {
display: inline-flex;
align-items: center;
font-size: 18px;
& > span {
display: inline-flex;
align-items: center;
a, span {
font-weight: 300;
display: inline-flex;
align-items: center;
}
}
& > span:last-child {
Expand Down
3 changes: 2 additions & 1 deletion app-v2/components/Breadcrumb/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Breadcrumb, PageHeader } from 'antd';
import React from 'react';
import { Link } from 'react-router-dom';
import Icon from '@appv2/components/Icon';

import './index.less';

Expand All @@ -21,7 +22,7 @@ const itemRender = (route, _params, routes, _paths) => {
<Link to={route.path}>
{first ? (
<>
{/* <BorderVerticleOutlined className="arrow-icon" /> */}
<Icon className="arrow-icon" type="icon-btn-return" />
{route.breadcrumbName}
</>
) : (
Expand Down
13 changes: 13 additions & 0 deletions app-v2/components/CSVPreviewLink/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,19 @@
th {
text-align: center;
}
.ant-table-tbody {
tr {
background-color: #F3F6F9;
}
}
}
.noBackground {
.ant-table-thead > tr > th {
background-color: #fff;
&::before {
content: none !important;
}
}
}

> .operation {
Expand Down
13 changes: 8 additions & 5 deletions app-v2/components/CSVPreviewLink/index.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import { Button, Popover, Table } from 'antd';
import { } from 'antd/lib/button';
import React, { useState } from 'react';
import intl from 'react-intl-universal';
import './index.less';
import { v4 as uuidv4 } from 'uuid';
import './index.less';
import classNames from 'classnames';

interface IProps {
file: any;
children: string;
children: any;
onMapping?: (index) => void;
btnType?: string
}

const CSVPreviewLink = (props: IProps) => {
const { onMapping, file: { content }, children } = props;
const { onMapping, file: { content }, children, btnType } = props;
const [visible, setVisible] = useState(false);
const handleLinkClick = e => {
e.stopPropagation();
Expand Down Expand Up @@ -48,7 +51,7 @@ const CSVPreviewLink = (props: IProps) => {
onVisibleChange={visible => setVisible(visible)}
content={<div className="csv-preview">
<Table
bordered={true}
className={classNames({ 'noBackground': !!onMapping })}
dataSource={content}
columns={columns}
pagination={false}
Expand All @@ -63,7 +66,7 @@ const CSVPreviewLink = (props: IProps) => {
</div>
</div>}
>
<Button type="link" className="btn-preview" onClick={handleLinkClick}>
<Button type={btnType as any || 'link'} className={classNames('btn-preview', { 'primary-btn': btnType === 'default' })} onClick={handleLinkClick}>
{children}
</Button>
</Popover>
Expand Down
4 changes: 0 additions & 4 deletions app-v2/components/Icon/index.less

This file was deleted.

18 changes: 5 additions & 13 deletions app-v2/components/Icon/index.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
import React, { HTMLProps } from 'react';

interface IIconFontProps extends HTMLProps<HTMLElement> {
type: string;
className?: string
}

const IconFont = (props: IIconFontProps) => {
const { type, className, ...others } = props;
return (
<span className={`nebula-studio-icon ${type} ${className}`} {...others} />
);
};
import { createFromIconfontCN } from '@ant-design/icons';
import icon from '@appv2/static/fonts/iconfont.js';
const IconFont = createFromIconfontCN({
scriptUrl: icon,
});

export default IconFont;
1 change: 0 additions & 1 deletion app-v2/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import dayjs from 'dayjs';
import intl from 'react-intl-universal';
import duration from 'dayjs/plugin/duration';
import AuthorizedRoute from './AuthorizedRoute';
import '@appv2/static/fonts/iconfont.css';
import Cookie from 'js-cookie';
import { INTL_LOCALES } from '@appv2/config/constants';
import { LanguageContext } from '@appv2/context';
Expand Down
8 changes: 8 additions & 0 deletions app-v2/pages/Import/FileUpload/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,12 @@
margin-bottom: 20px;
}
}
.operation {
button {
width: 70px;
}
button:not(:last-child) {
margin-right: 15px;
}
}
}
15 changes: 8 additions & 7 deletions app-v2/pages/Import/FileUpload/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@ import { Button, Checkbox, Popconfirm, Table, Upload } from 'antd';
import _ from 'lodash';
import React, { useEffect, useState } from 'react';
import intl from 'react-intl-universal';

import Icon from '@appv2/components/Icon';
import CSVPreviewLink from '@appv2/components/CSVPreviewLink';
import { observer } from 'mobx-react-lite';

import { useStore } from '@appv2/stores';
import { getFileSize } from '@appv2/utils/file';
import { trackPageView } from '@appv2/utils/stat';
Expand Down Expand Up @@ -65,16 +64,18 @@ const FileUpload = () => {
return (
<div className="operation">
<div>
<CSVPreviewLink file={file}>
{intl.get('import.preview')}
<CSVPreviewLink file={file} btnType="default">
<Icon type="icon-btn-detail" />
</CSVPreviewLink>
<Popconfirm
onConfirm={() => asyncDeleteFile(index)}
title={intl.get('common.ask')}
okText={intl.get('common.ok')}
cancelText={intl.get('common.cancel')}
>
<Button type="link">{intl.get('common.delete')}</Button>
<Button className="warning-btn">
<Icon type="icon-btn-delete" />
</Button>
</Popconfirm>
</div>
</div>
Expand All @@ -97,8 +98,8 @@ const FileUpload = () => {
customRequest={handleUpdate}
beforeUpload={transformFile as any}
>
<Button className="upload-btn" type="primary">
+ {intl.get('import.uploadFile')}
<Button className="studio-add-btn upload-btn" type="primary">
<Icon className="studio-add-btn-icon" type="icon-btn-add" />{intl.get('import.uploadFile')}
</Button>
</Upload>
<div className="file-list">
Expand Down
6 changes: 4 additions & 2 deletions app-v2/pages/Import/TaskCreate/FileSelect/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { observer } from 'mobx-react-lite';
import { useStore } from '@appv2/stores';
import { v4 as uuidv4 } from 'uuid';
import './index.less';
import Icon from '@appv2/components/Icon';

const Option = Select.Option;

Expand Down Expand Up @@ -69,8 +70,9 @@ const FileSelect = (props: IProps) => {
</Form>}
title={intl.get('import.selectFile')}
>
<Button type="primary" className="btn-bind-source" onClick={() => setVisible(true)}>
+ {intl.get('import.bindDatasource')}
<Button type="primary" className="studio-add-btn-icon btn-bind-source" onClick={() => setVisible(true)}>
<Icon className="studio-add-btn-icon" type="icon-btn-add" />
{intl.get('import.bindDatasource')}
</Button>
</Popover>
);
Expand Down
7 changes: 5 additions & 2 deletions app-v2/pages/Import/TaskCreate/SchemaConfig/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import TagConfig from './TagConfig';
import intl from 'react-intl-universal';
import EdgeConfig from './EdgeConfig';
const { Panel } = Collapse;
import Icon from '@appv2/components/Icon';

import './index.less';

interface IProps {
Expand Down Expand Up @@ -71,8 +73,9 @@ const SchemaConfig = (props: IProps) => {
{type === 'vertices' && data.tags.map((tag, tagIndex) => <TagConfig key={tagIndex} file={data.file} tag={tag} tagIndex={tagIndex} configIndex={configIndex} />)}
{type === 'edge' && <EdgeConfig configIndex={configIndex} edge={data} />}
{type === 'vertices' && <div className="btns">
<Button type="default" onClick={() => addTag(configIndex)}>
+ {intl.get('import.addTag')}
<Button className="primary-btn studio-add-btn-icon" onClick={() => addTag(configIndex)}>
<Icon className="studio-add-btn-icon" type="icon-btn-add" />
{intl.get('import.addTag')}
</Button>
</div>}
</div>
Expand Down
12 changes: 8 additions & 4 deletions app-v2/pages/Import/TaskList/TaskItem/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import './index.less';
import { ITaskItem, ITaskStatus } from '@appv2/interfaces/import';
import dayjs from 'dayjs';
import { floor } from 'lodash';
import Icon from '@appv2/components/Icon';
interface IProps {
data: ITaskItem;
handleStop: (id: number) => void;
Expand Down Expand Up @@ -73,7 +74,10 @@ const TaskItem = (props: IProps) => {
<div className="task-item">
<div className="row">
<span>{intl.get('common.space')}: {space}</span>
<Button type="link" size="small" onClick={() => handleDownload(taskID)}>{intl.get('import.downloadConfig')}</Button>
<Button type="link" size="small" onClick={() => handleDownload(taskID)}>
<Icon type="icon-btn-download" />
{intl.get('import.downloadConfig')}
</Button>
</div>
<div className="row">
<div className="progress">
Expand Down Expand Up @@ -107,8 +111,8 @@ const TaskItem = (props: IProps) => {
strokeColor={status && COLOR_MAP[status]} />
</div>
<div className="operations">
<Button>{intl.get('import.details')}</Button>
<Button type="primary">{intl.get('import.viewLogs')}</Button>
<Button className="primary-btn">{intl.get('import.details')}</Button>
<Button className="primary-btn">{intl.get('import.viewLogs')}</Button>
{taskStatus === ITaskStatus.statusProcessing &&
<Popconfirm
placement="left"
Expand All @@ -117,7 +121,7 @@ const TaskItem = (props: IProps) => {
okText={intl.get('common.confirm')}
cancelText={intl.get('common.cancel')}
>
<Button>{intl.get('import.endImport')}</Button>
<Button className="cancel-btn">{intl.get('import.endImport')}</Button>
</Popconfirm>}
{taskStatus !== ITaskStatus.statusProcessing &&
<Popconfirm
Expand Down
1 change: 1 addition & 0 deletions app-v2/pages/Import/TaskList/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
.nebula-data-import {
.task-btns {
margin: 15px 0 20px;
display: flex;
& > button:not(:last-child) {
margin-right: 15px;
}
Expand Down
6 changes: 3 additions & 3 deletions app-v2/pages/Import/TaskList/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import TaskItem from './TaskItem';
import { useHistory } from 'react-router-dom';
import intl from 'react-intl-universal';
import { observer } from 'mobx-react-lite';

import Icon from '@appv2/components/Icon';
import { useStore } from '@appv2/stores';
import { trackPageView } from '@appv2/utils/stat';

Expand Down Expand Up @@ -56,11 +56,11 @@ const TaskList = () => {
<div className="nebula-data-import">
<div className="task-btns">
<Button
className="upload-btn"
className="studio-add-btn upload-btn"
type="primary"
onClick={() => history.push('/import/create')}
>
{intl.get('import.createTask')}
<Icon className="studio-add-btn-icon" type="icon-btn-add" />{intl.get('import.createTask')}
</Button>
<Button className="upload-btn" type="default">
{intl.get('import.uploadTemp')}
Expand Down
Loading

0 comments on commit 86420d8

Please sign in to comment.