Skip to content

Commit

Permalink
improve(design): Empty image and style
Browse files Browse the repository at this point in the history
  • Loading branch information
@dengfuping
dengfuping committed Mar 8, 2024
1 parent 2c2e76a commit 243ed91
Show file tree
Hide file tree
Showing 14 changed files with 443 additions and 196 deletions.
312 changes: 312 additions & 0 deletions packages/design/src/empty/colored.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,312 @@
import React from 'react';

const ColoredEmptyImg: React.FC = props => (
<svg
width="140px"
height="160px"
viewBox="0 0 140 160"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
style={{
// to avoid extra height in div
// ref: https://www.cnblogs.com/huancheng/p/9036001.html
display: 'block',
}}
>
<defs>
<ellipse
id="path-1"
cx="62.2411374"
cy="62.0341728"
rx="62.2411374"
ry="62.0341728"
></ellipse>
<ellipse
id="path-3"
cx="34.7282761"
cy="34.6127975"
rx="34.7282761"
ry="34.6127975"
></ellipse>
</defs>
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g transform="translate(-754.6667, -323)">
<g transform="translate(691, 323)">
<g transform="translate(53, 0)">
<rect x="0" y="0" width="160" height="160"></rect>
<g transform="translate(10.6667, 0)">
<g id="Clipped" transform="translate(15.5177, 17.1889)">
<mask id="mask-2" fill="white">
<use xlinkHref="#path-1"></use>
</mask>
<g></g>
<ellipse
fill="#0181FD"
fillRule="nonzero"
mask="url(#mask-2)"
cx="62.2411374"
cy="62.0341728"
rx="62.2411374"
ry="62.0341728"
></ellipse>
<g mask="url(#mask-2)">
<g transform="translate(-8.1975, 47.8341)">
<g strokeWidth="1" fill="none" fillRule="evenodd">
<rect
fill="#FFFFFF"
fillRule="nonzero"
x="0"
y="0"
width="83.481433"
height="103.668722"
rx="4.64962635"
></rect>
<g transform="translate(9.3106, 18.2331)" fill="#E6E6E6" fillRule="nonzero">
<rect
x="0"
y="7.71348541"
width="61.167337"
height="3.34120518"
rx="0.626475972"
></rect>
<rect
x="0"
y="0"
width="25.5354971"
height="3.34120518"
rx="0.626475972"
></rect>
<rect
x="28.6521373"
y="0"
width="32.4759143"
height="3.34120518"
rx="0.626475972"
></rect>
<rect
x="0"
y="15.4008676"
width="41.4591713"
height="3.34120518"
rx="0.626475972"
></rect>
<rect
x="43.8555795"
y="15.4008676"
width="17.560565"
height="3.34120518"
rx="0.626475972"
></rect>
</g>
<g transform="translate(9.3106, 41.6476)" fill="#E6E6E6" fillRule="nonzero">
<rect
x="0"
y="7.71348541"
width="61.167337"
height="3.34120518"
rx="0.626475972"
></rect>
<rect
x="0"
y="0"
width="25.5354971"
height="3.34120518"
rx="0.626475972"
></rect>
<rect
x="28.6521373"
y="0"
width="32.4759143"
height="3.34120518"
rx="0.626475972"
></rect>
<rect
x="0"
y="15.4008676"
width="41.4591713"
height="3.34120518"
rx="0.626475972"
></rect>
<rect
x="43.8555795"
y="15.4008676"
width="17.560565"
height="3.34120518"
rx="0.626475972"
></rect>
</g>
<g transform="translate(9.3106, 65.0752)" fill="#E6E6E6" fillRule="nonzero">
<rect
x="0"
y="7.71348541"
width="61.167337"
height="3.34120518"
rx="0.626475972"
></rect>
<rect
x="0"
y="0"
width="25.5354971"
height="3.34120518"
rx="0.626475972"
></rect>
<rect
x="28.6521373"
y="0"
width="32.4759143"
height="3.34120518"
rx="0.626475972"
></rect>
<rect
x="0"
y="15.4008676"
width="41.4591713"
height="3.34120518"
rx="0.626475972"
></rect>
<rect
x="43.8555795"
y="15.4008676"
width="17.560565"
height="3.34120518"
rx="0.626475972"
></rect>
</g>
<path
d="M6.2201852,0 L77.2612478,0 C80.692171,0 83.481433,2.77998713 83.481433,6.19950181 L83.481433,10.8980716 L0,10.8980716 L0,6.19950181 C0,2.77998713 2.789262,0 6.2201852,0 Z"
fill="#132039"
fillRule="nonzero"
></path>
<ellipse
fill="#FFFFFF"
fillRule="nonzero"
cx="5.86661678"
cy="5.45556159"
rx="1.6630811"
ry="1.65755101"
></ellipse>
<ellipse
fill="#FFFFFF"
fillRule="nonzero"
cx="10.9737162"
cy="5.45556159"
rx="1.6630811"
ry="1.65755101"
></ellipse>
<ellipse
fill="#FFFFFF"
fillRule="nonzero"
cx="16.0808156"
cy="5.45556159"
rx="1.6630811"
ry="1.65755101"
></ellipse>
<ellipse
fill="#FFFFFF"
fillRule="nonzero"
cx="21.1224394"
cy="5.45556159"
rx="1.6630811"
ry="1.65755101"
></ellipse>
</g>
<polygon
fill="#132039"
fillRule="nonzero"
points="49.9579085 30.7756321 79.7493219 86.0882398 84.6992798 84.0652445 83.481433 34.782468"
></polygon>
</g>
</g>
</g>
<g transform="translate(52.3985, 38.1759)">
<polygon
fill="#E6E6E6"
fillRule="nonzero"
transform="translate(56.6371, 78.7205) rotate(-23.41) translate(-56.6371, -78.7205)"
points="52.569443 70.2798341 60.68416 70.2896774 60.7046722 87.161203 52.5899552 87.1513597"
></polygon>
<polygon
fill="#CCCCCC"
fillRule="nonzero"
transform="translate(55.1958, 75.3944) rotate(-23.41) translate(-55.1958, -75.3944)"
points="51.1325953 70.5773987 59.2473123 70.587242 59.2590131 80.2113244 51.1442961 80.2014811"
></polygon>
<path
d="M76.6147313,120.035407 L73.2623789,121.484132 C71.1409683,122.397743 68.6790845,121.405823 67.7886159,119.278415 L55.0470576,88.7768659 C54.7589648,88.085132 55.0863429,87.2889854 55.7672895,86.988799 L63.3493679,83.7128518 C64.0434096,83.4126654 64.8422124,83.7128518 65.1564954,84.4045856 L78.749237,114.54069 C79.6920861,116.641995 78.749237,119.108744 76.6147313,120.022355 L76.6147313,120.035407 Z"
fill="#FFA005"
fillRule="nonzero"
></path>
<g fillRule="nonzero">
<path
d="M39.6340934,76.5214297 C24.7973148,76.5214297 11.4140953,67.7507661 5.52128822,54.1901716 C1.57965507,45.10627 1.42251355,35.0434997 5.06295878,25.8421338 C8.71649914,16.640768 15.7485822,9.41019116 24.8496953,5.48166476 C29.5508458,3.45866943 34.5138988,2.42759439 39.594808,2.42759439 C54.4315866,2.42759439 67.8279013,11.198258 73.7076132,24.7588525 C81.852782,43.5009253 73.170713,65.3492748 54.366111,73.4673593 C49.6649605,75.4903546 44.7019074,76.5214297 39.6209983,76.5214297 L39.6209983,76.5214297 L39.6340934,76.5214297 Z"
fill="#07C846"
></path>
<path
d="M39.594808,4.8421372 C53.0173129,4.8421372 65.8112517,12.6469837 71.4814416,25.711618 C79.1028054,43.2529452 71.0100171,63.6395175 53.4101667,71.2355387 C48.9185382,73.1802245 44.2304829,74.0938353 39.6340934,74.0938353 C26.2115885,74.0938353 13.4176496,66.2889888 7.74745976,53.2243545 C0.126096001,35.6830272 8.21888433,15.296455 25.8187347,7.70043382 C30.3103631,5.75574799 34.9984185,4.8421372 39.594808,4.8421372 M39.594808,0 C34.1734255,0 28.8829943,1.09633295 23.8806559,3.26289569 C14.177167,7.45245375 6.6867545,15.1528876 2.79750186,24.9546262 C-1.09175079,34.7563649 -0.921514139,45.4847659 3.28202155,55.1559887 C9.55458726,69.6040908 23.8282754,78.9490241 39.6340934,78.9490241 C45.0554759,78.9490241 50.3459071,77.8526911 55.3482455,75.6861284 C65.0517344,71.4965703 72.5421469,63.7961365 76.4313995,53.9943978 C80.3206522,44.1926592 80.1504155,33.4642582 75.9468798,23.7930354 C69.6743141,9.34493325 55.400626,0 39.594808,0 L39.594808,0 Z"
fill="#132039"
></path>
</g>
<g id="Clipped" transform="translate(4.8927, 4.8552)">
<mask id="mask-4" fill="white">
<use xlinkHref="#path-3"></use>
</mask>
<g></g>
<g mask="url(#mask-4)" fillRule="nonzero">
<g transform="translate(-45.2175, 16.1057)">
<rect
fill="#6ADE90"
x="0"
y="0"
width="83.481433"
height="103.668722"
rx="4.64962635"
></rect>
<path
d="M6.2201852,0 L77.2612478,0 C80.692171,0 83.481433,2.77998713 83.481433,6.19950181 L83.481433,10.8980716 L0,10.8980716 L0,6.19950181 C0,2.77998713 2.789262,0 6.2201852,0 Z"
fill="#39D36B"
></path>
</g>
</g>
</g>
<g transform="translate(20.0438, 19.5643)" fillRule="nonzero">
<polygon
fill="#FFFFFF"
points="19.5772145 9.33188167 0 9.33188167 0 30.4754457 19.5772145 39.8073274"
></polygon>
<polygon
fill="#E6E6E6"
points="19.5772145 9.33188167 39.154429 9.33188167 39.154429 30.4754457 19.5772145 39.8073274"
></polygon>
<polygon
fill="#0181FD"
points="19.5772145 18.6637633 0 9.33188167 19.5772145 0 39.154429 9.33188167"
></polygon>
</g>
</g>
<g>
<g fill="#FFA005" fillRule="nonzero">
<ellipse
cx="29.2283229"
cy="29.1311327"
rx="29.2283229"
ry="29.1311327"
></ellipse>
</g>
<path
d="M29.6211767,16.0273436 C26.9497708,16.0273436 24.8545506,16.7843354 23.2962305,18.298319 C21.7117201,19.8123026 20.9522028,21.9005559 20.9522028,24.5630787 L25.0640726,24.5630787 C25.0640726,23.0490951 25.3521654,21.8614011 25.9676363,21.0391514 C26.6485829,20.0341795 27.7747638,19.5643225 29.3592742,19.5643225 C30.5902161,19.5643225 31.5592554,19.8906121 32.2532972,20.5692944 C32.9080535,21.2479767 33.2616219,22.1876907 33.2616219,23.3753847 C33.2616219,24.2759439 32.9342438,25.1373484 32.2925825,25.9334949 L31.8604434,26.4425067 C29.5164157,28.5307599 28.102142,30.0447435 27.6307174,31.0105606 C27.1200075,31.9763777 26.9104855,33.1640718 26.9104855,34.534488 L26.9104855,35.0434997 L31.0616406,35.0434997 L31.0616406,34.534488 C31.0616406,33.6730835 31.2449724,32.9160917 31.5985408,32.1982546 C31.925919,31.5456755 32.3973436,30.9322511 33.0390048,30.3971362 C34.7675615,28.8831526 35.8151716,27.9173355 36.1425498,27.5518912 C37.0068282,26.4033519 37.4782527,24.9285231 37.4782527,23.1274046 C37.4782527,20.9347387 36.7580208,19.1988782 35.3175568,17.9459263 C33.8770929,16.6538196 31.9652044,16.0403952 29.6080816,16.0403952 L29.6211767,16.0273436 Z M28.9664204,36.7924118 C28.1676176,36.7924118 27.5259564,37.0403918 26.9759611,37.5494036 C26.4390609,38.0584153 26.1771584,38.6979429 26.1771584,39.4940894 C26.1771584,40.290236 26.4259658,40.9297635 26.9759611,41.4387752 C27.5128613,41.947787 28.1676176,42.2349218 28.9664204,42.2349218 C29.7652231,42.2349218 30.4068843,41.9869417 30.9568796,41.47793 C31.4937798,40.9689183 31.7818726,40.290236 31.7818726,39.4940894 C31.7818726,38.6979429 31.4937798,38.0584153 30.9830699,37.5494036 C30.4461697,37.0403918 29.752128,36.7924118 28.9664204,36.7924118 L28.9664204,36.7924118 Z"
fill="#FFFFFF"
></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
);

if (process.env.NODE_ENV !== 'production') {
ColoredEmptyImg.displayName = 'ColoredEmptyImg';
}

export default ColoredEmptyImg;
6 changes: 3 additions & 3 deletions packages/design/src/empty/simple.tsx → packages/design/src/empty/default.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

const Empty: React.FC = props => (
const DefaultEmptyImg: React.FC = props => (
<svg
width="46.25775px"
height="46.36575px"
Expand Down Expand Up @@ -52,7 +52,7 @@ const Empty: React.FC = props => (
);

if (process.env.NODE_ENV !== 'production') {
Empty.displayName = 'SimpleImage';
DefaultEmptyImg.displayName = 'DefaultEmptyImg';
}

export default Empty;
export default DefaultEmptyImg;
54 changes: 54 additions & 0 deletions packages/design/src/empty/demo/complete-debug.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React, { useState } from 'react';
import { Button, Empty, Form, Switch } from '@oceanbase/design';

export default () => {
const [title, setTitle] = useState(true);
const [description, setDescription] = useState(true);
const [children, setChildren] = useState(true);

return (
<>
<Form
layout="inline"
style={{
marginBottom: 48,
}}
>
<Form.Item label="title" required={true}>
<Switch
size="small"
value={title}
onChange={value => {
setTitle(value);
}}
/>
</Form.Item>
<Form.Item label="description" required={true}>
<Switch
size="small"
value={description}
onChange={value => {
setDescription(value);
}}
/>
</Form.Item>
<Form.Item label="children" required={true}>
<Switch
size="small"
value={children}
onChange={value => {
setChildren(value);
}}
/>
</Form.Item>
</Form>
<Empty
image={Empty.PRESENTED_IMAGE_COLORED}
title={title && 'Create Your Cluster'}
description={description ? 'There is no cluster, welcome to create one!' : ''}
>
{children && <Button type="primary">Create</Button>}
</Empty>
</>
);
};
6 changes: 5 additions & 1 deletion packages/design/src/empty/demo/complete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ import { Button, Empty } from '@oceanbase/design';

export default () => {
return (
<Empty title="Create Your Cluster" description="There is no cluster, welcome to create one!">
<Empty
image={Empty.PRESENTED_IMAGE_COLORED}
title="Create Your Cluster"
description="There is no cluster, welcome to create one!"
>
<Button type="primary">Create</Button>
</Empty>
);
Expand Down
Loading

0 comments on commit 243ed91

Please sign in to comment.