Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Branch] improve(design): Result image, style and demo #503

Merged
merged 1 commit into from
Mar 11, 2024
Merged

[Feature Branch] improve(design): Result image, style and demo #503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions packages/design/src/empty/colored.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@ const ColoredEmptyImg: React.FC = props => (
>
<defs>
<ellipse
id="path-1"
id="oceanbase-design-empty-colored-path-1"
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • add prefix for svg id to avoid conflicts.

cx="62.2411374"
cy="62.0341728"
rx="62.2411374"
ry="62.0341728"
></ellipse>
<ellipse
id="path-3"
id="oceanbase-design-empty-colored-path-3"
cx="34.7282761"
cy="34.6127975"
rx="34.7282761"
Expand All @@ -36,20 +36,20 @@ const ColoredEmptyImg: React.FC = props => (
<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 id="oceanbase-design-empty-colored-mask-2" fill="white">
<use xlinkHref="#oceanbase-design-empty-colored-path-1"></use>
</mask>
<g></g>
<ellipse
fill="#0181FD"
fillRule="nonzero"
mask="url(#mask-2)"
mask="url(#oceanbase-design-empty-colored-mask-2)"
cx="62.2411374"
cy="62.0341728"
rx="62.2411374"
ry="62.0341728"
></ellipse>
<g mask="url(#mask-2)">
<g mask="url(#oceanbase-design-empty-colored-mask-2)">
<g transform="translate(-8.1975, 47.8341)">
<g strokeWidth="1" fill="none" fillRule="evenodd">
<rect
Expand Down Expand Up @@ -247,11 +247,11 @@ const ColoredEmptyImg: React.FC = props => (
></path>
</g>
<g id="Clipped" transform="translate(4.8927, 4.8552)">
<mask id="mask-4" fill="white">
<use xlinkHref="#path-3"></use>
<mask id="oceanbase-design-empty-colored-mask-4" fill="white">
<use xlinkHref="#oceanbase-design-empty-colored-path-3"></use>
</mask>
<g></g>
<g mask="url(#mask-4)" fillRule="nonzero">
<g mask="url(#oceanbase-design-empty-colored-mask-4)" fillRule="nonzero">
<g transform="translate(-45.2175, 16.1057)">
<rect
fill="#6ADE90"
Expand Down
2 changes: 1 addition & 1 deletion packages/design/src/empty/demo/with-page-container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Empty, Button, Card } from '@oceanbase/design';
import { Button, Card, Empty } from '@oceanbase/design';
import { PageContainer } from '@oceanbase/ui';

export default () => {
Expand Down
8 changes: 4 additions & 4 deletions packages/design/src/result/404.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,15 +68,15 @@ const Svg404 = () => (
ry="32.8"
></ellipse>
<g id="Clipped">
<mask id="mask-2" fill="white">
<mask id="oceanbase-design-result-404-mask-2" fill="white">
<use transform="translate(34.8187, 24.1269) rotate(-66.22) translate(-34.8187, -24.1269)"></use>
</mask>
<g transform="translate(34.8187, 24.1269) rotate(-66.22) translate(-34.8187, -24.1269)"></g>
<path
d="M64.4080716,38.11257 C61.1330716,43.25007 46.5955716,42.33757 30.0205716,35.03757 C13.4455716,27.73757 2.79557161,17.55007 4.54557161,11.72507 C6.29557161,5.90007003 22.3330716,7.56257003 38.9080716,14.86257 C55.4830716,22.16257 68.1330716,32.28757 64.4080716,38.11257 L64.4080716,38.11257 Z"
fill="#132039"
fillRule="nonzero"
mask="url(#mask-2)"
mask="url(#oceanbase-design-result-404-mask-2)"
></path>
</g>
<ellipse
Expand All @@ -89,14 +89,14 @@ const Svg404 = () => (
ry="15.0625"
></ellipse>
<g id="Clipped" transform="translate(17.0449, 18.1949)">
<mask id="mask-4" fill="white">
<mask id="oceanbase-design-result-success-404-4" fill="white">
<use transform="translate(15.452, 9.8598) rotate(-66.22) translate(-15.452, -9.8598)"></use>
</mask>
<g transform="translate(15.452, 9.8598) rotate(-66.22) translate(-15.452, -9.8598)"></g>
<ellipse
fill="#132039"
fillRule="nonzero"
mask="url(#mask-4)"
mask="url(#oceanbase-design-result-success-404-4)"
transform="translate(15.0168, 10.8584) rotate(-66.22) translate(-15.0168, -10.8584)"
cx="15.0167984"
cy="10.8583602"
Expand Down
4 changes: 2 additions & 2 deletions packages/design/src/result/500.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,11 @@ const Svg500 = () => (
></rect>
</g>
<g id="Clipped" transform="translate(0, 0)">
<mask id="mask-2" fill="white">
<mask id="oceanbase-design-result-500-mask-2" fill="white">
<use transform="translate(80, 80) rotate(-45) translate(-80, -80)"></use>
</mask>
<g transform="translate(80, 80) rotate(-45) translate(-80, -80)"></g>
<g mask="url(#mask-2)">
<g mask="url(#oceanbase-design-result-500-mask-2)">
<g transform="translate(18.166, 42.1381)">
<path
d="M99.5820637,41.2755382 L93.0288089,32.6666047 L3.2143341,32.6666047 C1.44520448,32.6666047 0.0124586593,34.0993505 0.0124586593,35.8684801 L0.0124586593,48.1278008 L78.0659591,48.1278008 L78.0659591,56.7367344 L116.301584,56.7367344 L116.301584,44.4774137 C116.301584,42.708284 114.868839,41.2755382 113.099709,41.2755382 L99.5820637,41.2755382 L99.5820637,41.2755382 Z"
Expand Down
8 changes: 4 additions & 4 deletions packages/design/src/result/Error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const ErrorSvg = () => (
<defs>
<path
d="M33.1125,0.0125 L100.6125,0.0125 C118.8875,0.0125 133.725,14.85 133.725,33.125 L133.725,118.1 L33.1125,118.1 C14.8375,118.1 0,103.2625 0,84.9875 L0,33.1125 C0,14.8375 14.8375,0 33.1125,0 L33.1125,0.0125 Z"
id="path-1"
id="oceanbase-design-result-error-path-1"
></path>
</defs>
<g stroke="none" fill="none">
Expand Down Expand Up @@ -38,11 +38,11 @@ const ErrorSvg = () => (
></rect>
</g>
<g id="Clipped" transform="translate(14.9125, 13.75)">
<mask id="mask-2" fill="white">
<use href="#path-1"></use>
<mask id="oceanbase-design-result-error-mask-2" fill="white">
<use href="#oceanbase-design-result-error-path-1"></use>
</mask>
<g></g>
<g mask="url(#mask-2)">
<g mask="url(#oceanbase-design-result-error-mask-2)">
<g transform="translate(10.4625, 25.15)">
<path
d="M108.075,63.4125 L4.725,63.4125 L10.2125,55.3875 C10.825,54.4875 11.8375,53.9625 12.925,53.9625 L99.8625,53.9625 C100.95,53.9625 101.9625,54.5 102.575,55.3875 L108.0625,63.4125 L108.075,63.4125 Z"
Expand Down
8 changes: 4 additions & 4 deletions packages/design/src/result/Processing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const ProcessingSvg = () => (
<defs>
<path
d="M33.1125,0.0125 L100.6125,0.0125 C118.8875,0.0125 133.725,14.85 133.725,33.125 L133.725,118.1 L33.1125,118.1 C14.8375,118.1 4.4408921e-15,103.2625 4.4408921e-15,84.9875 L4.4408921e-15,33.1125 C4.4408921e-15,14.8375 14.8375,0 33.1125,0 L33.1125,0.0125 Z"
id="path-1"
id="oceanbase-design-result-processing-path-1"
></path>
</defs>
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
Expand Down Expand Up @@ -111,11 +111,11 @@ const ProcessingSvg = () => (
></polygon>
</g>
<g id="Clipped" transform="translate(14.9125, 13.75)">
<mask id="mask-2" fill="white">
<use href="#path-1"></use>
<mask id="oceanbase-design-result-processing-mask-2" fill="white">
<use href="#oceanbase-design-result-processing-path-1"></use>
</mask>
<g></g>
<g mask="url(#mask-2)">
<g mask="url(#oceanbase-design-result-processing-mask-2)">
<g transform="translate(31.5625, 35.9375)">
<rect
fill="#132039"
Expand Down
50 changes: 25 additions & 25 deletions packages/design/src/result/Success.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,23 @@ const SuccessSvg = () => (
<defs>
<path
d="M33.125,0 L100.625,0 C118.875,0 133.75,14.875 133.75,33.125 L133.75,118.125 L33.125,118.125 C14.875,118.125 0,103.25 0,85 L0,33.125 C0,14.875 14.875,0 33.125,0 Z"
id="path-1"
id="oceanbase-design-result-success-path-1"
></path>
<path
d="M1.43012646,5.5292612 L17.6801265,0.154261199 C19.1801265,-0.345738801 20.8051265,0.404261199 21.1801265,1.9042612 L21.9301265,4.1542612 C22.3051265,5.2792612 21.6801265,6.5292612 20.5551265,6.9042612 L3.80512646,12.5292612 C2.68012646,12.9042612 1.43012646,12.2792612 1.05512646,11.1542612 L0.0551264646,8.2792612 C-0.194873535,7.1542612 0.430126465,5.9042612 1.43012646,5.5292612 L1.43012646,5.5292612 Z"
id="path-3"
id="oceanbase-design-result-success-path-3"
></path>
<path
d="M1.89214041,4.7792612 L15.8921404,0.154261199 C17.3921404,-0.345738801 18.8921404,0.404261199 19.3921404,1.9042612 L20.2671404,4.4042612 C20.7671404,5.9042612 20.0171404,7.4042612 18.5171404,7.9042612 L4.51714041,12.5292612 C3.01714041,13.0292612 1.51714041,12.2792612 1.01714041,10.7792612 L0.142140412,8.2792612 C-0.357859588,6.9042612 0.517140412,5.2792612 1.89214041,4.7792612 Z"
id="path-5"
id="oceanbase-design-result-success-path-5"
></path>
<path
d="M2.02814371,4.73308102 L15.9031437,0.108081022 C17.1531437,-0.266918978 18.5281437,0.358081022 19.0281437,1.60808102 L20.0281437,4.60808102 C20.4031437,5.85808102 19.7781437,7.23308102 18.5281437,7.73308102 L4.65314371,12.358081 C3.02814371,12.858081 1.27814371,11.983081 0.778143715,10.483081 L0.153143715,8.60808102 C-0.346856285,6.98308102 0.403143715,5.23308102 2.02814371,4.73308102 Z"
id="path-7"
id="oceanbase-design-result-success-path-7"
></path>
<path
d="M2.08661279,3.86102208 L13.2116128,0.111022078 C14.0866128,-0.263977922 15.0866128,0.361022078 15.4616128,1.23602208 L16.4616128,4.36102208 C16.9616128,5.73602208 16.2116128,7.36102208 14.7116128,7.73602208 L4.46161279,11.1110221 C2.96161279,11.6110221 1.21161279,10.7360221 0.711612789,9.23602208 L0.0866127887,7.48602208 C-0.288387211,5.98602208 0.586612789,4.36102208 2.08661279,3.86102208 Z"
id="path-9"
id="oceanbase-design-result-success-path-9"
></path>
</defs>
<g stroke="none" fill="none">
Expand All @@ -32,12 +32,12 @@ const SuccessSvg = () => (
d="M33.125,0 L100.625,0 C118.875,0 133.75,14.875 133.75,33.125 L133.75,118.125 L33.125,118.125 C14.875,118.125 0,103.25 0,85 L0,33.125 C0,14.875 14.875,0 33.125,0 Z"
fill="#0181FD"
></path>
<g id="Clipped">
<mask id="mask-2" fill="white">
<use href="#path-1"></use>
<g>
<mask id="oceanbase-design-result-success-mask-2" fill="white">
<use href="#oceanbase-design-result-success-path-1"></use>
</mask>
<g></g>
<g mask="url(#mask-2)">
<g mask="url(#oceanbase-design-result-success-mask-2)">
<g transform="translate(-8.125, 9.25)">
<path
d="M6.75,0 L44,0 C47.75,0 50.75,3 50.75,6.75 L50.75,31.375 C50.75,35.125 47.75,38.125 44,38.125 L36.25,38.125 L36.25,46.25 C36.25,47.375 34.875,47.75 34.25,46.875 L28,38.125 L6.75,38.125 C3,38.125 0,35.125 0,31.375 L0,6.75 C0,3 3,0 6.75,0 Z"
Expand Down Expand Up @@ -83,45 +83,45 @@ const SuccessSvg = () => (
d="M41,53.0637085 L57.25,47.6887085 C58.75,47.1887085 60.375,47.9387085 60.75,49.4387085 L61.5,51.6887085 C61.875,52.8137085 61.25,54.0637085 60.125,54.4387085 L43.375,60.0637085 C42.25,60.4387085 41,59.8137085 40.625,58.6887085 L39.625,55.8137085 C39.375,54.6887085 40,53.4387085 41,53.0637085 L41,53.0637085 Z"
fill="#F2F2F2"
></path>
<g id="Clipped" transform="translate(39.5699, 47.5344)">
<mask id="mask-4" fill="white">
<use href="#path-3"></use>
<g transform="translate(39.5699, 47.5344)">
<mask id="oceanbase-design-result-success-mask-4" fill="white">
<use href="#oceanbase-design-result-success-path-3"></use>
</mask>
<g id="SVGID_00000136373575218028105800000015833068694952139445_"></g>
<path
d="M0.555126465,5.7792612 L11.8051265,2.0292612 C12.8051265,1.6542612 13.9301265,2.2792612 14.3051265,3.2792612 L15.5551265,7.0292612 C15.8051265,7.7792612 15.4301265,8.6542612 14.6801265,8.9042612 L2.93012646,12.7792612 C2.18012646,13.0292612 1.30512646,12.6542612 1.05512646,11.9042612 L-0.319873535,7.6542612 C-0.569873535,6.9042612 -0.194873535,6.0292612 0.555126465,5.7792612 Z"
fill="#D8D8D8"
mask="url(#mask-4)"
mask="url(#oceanbase-design-result-success-mask-4)"
></path>
</g>
<path
d="M47.25,58.6887085 L61.25,54.0637085 C62.75,53.5637085 64.25,54.3137085 64.75,55.8137085 L65.625,58.3137085 C66.125,59.8137085 65.375,61.3137085 63.875,61.8137085 L49.875,66.4387085 C48.375,66.9387085 46.875,66.1887085 46.375,64.6887085 L45.5,62.1887085 C45,60.8137085 45.875,59.1887085 47.25,58.6887085 Z"
fill="#F2F2F2"
></path>
<g id="Clipped" transform="translate(45.3579, 53.9094)">
<mask id="mask-6" fill="white">
<use href="#path-5"></use>
<g transform="translate(45.3579, 53.9094)">
<mask id="oceanbase-design-result-success-mask-6" fill="white">
<use href="#oceanbase-design-result-success-path-5"></use>
</mask>
<g id="SVGID_00000072260953934706606590000017879755367803290522_"></g>
<path
d="M-6.73285959,7.5292612 L8.76714041,2.4042612 C9.76714041,2.0292612 10.8921404,2.6542612 11.2671404,3.6542612 L12.6421404,7.7792612 C13.0171404,8.7792612 12.3921404,9.9042612 11.3921404,10.2792612 L-4.23285959,15.5292612 C-5.23285959,15.9042612 -6.35785959,15.2792612 -6.73285959,14.2792612 L-8.10785959,10.1542612 C-8.35785959,9.0292612 -7.73285959,7.9042612 -6.73285959,7.5292612 Z"
fill="#D8D8D8"
mask="url(#mask-6)"
mask="url(#oceanbase-design-result-success-mask-6)"
></path>
</g>
<path
d="M49.25,66.5637085 L63.125,61.9387085 C64.375,61.5637085 65.75,62.1887085 66.25,63.4387085 L67.25,66.4387085 C67.625,67.6887085 67,69.0637085 65.75,69.5637085 L51.875,74.1887085 C50.25,74.6887085 48.5,73.8137085 48,72.3137085 L47.375,70.4387085 C46.875,68.8137085 47.625,67.0637085 49.25,66.5637085 Z"
fill="#F2F2F2"
></path>
<g id="Clipped" transform="translate(47.2219, 61.8306)">
<mask id="mask-8" fill="white">
<use href="#path-7"></use>
<g transform="translate(47.2219, 61.8306)">
<mask id="oceanbase-design-result-success-mask-8" fill="white">
<use href="#oceanbase-design-result-success-path-7"></use>
</mask>
<g id="SVGID_00000019653314099838397220000000586077130363906990_"></g>
<path
d="M-5.09685629,7.10808102 L8.77814371,2.48308102 C10.0281437,2.10808102 11.4031437,2.73308102 11.9031437,3.98308102 L12.9031437,6.98308102 C13.2781437,8.23308102 12.6531437,9.60808102 11.4031437,10.108081 L-2.47185629,14.733081 C-4.09685629,15.233081 -5.84685629,14.358081 -6.34685629,12.858081 L-6.97185629,10.983081 C-7.59685629,9.35808102 -6.72185629,7.73308102 -5.09685629,7.10808102 Z"
fill="#D8D8D8"
mask="url(#mask-8)"
mask="url(#oceanbase-design-result-success-mask-8)"
></path>
</g>
<polygon
Expand All @@ -132,15 +132,15 @@ const SuccessSvg = () => (
d="M52.875,73.6887085 L64,69.9387085 C64.875,69.5637085 65.875,70.1887085 66.25,71.0637085 L67.25,74.1887085 C67.75,75.5637085 67,77.1887085 65.5,77.5637085 L55.25,80.9387085 C53.75,81.4387085 52,80.5637085 51.5,79.0637085 L50.875,77.3137085 C50.5,75.8137085 51.375,74.1887085 52.875,73.6887085 Z"
fill="#F2F2F2"
></path>
<g id="Clipped" transform="translate(50.7884, 69.8277)">
<mask id="mask-10" fill="white">
<use href="#path-9"></use>
<g transform="translate(50.7884, 69.8277)">
<mask id="oceanbase-design-result-success-mask-10" fill="white">
<use href="#oceanbase-design-result-success-path-9"></use>
</mask>
<g id="SVGID_00000091695442429382600100000003029485216806722220_"></g>
<path
d="M-3.66338721,5.73602208 L7.46161279,1.98602208 C8.33661279,1.61102208 9.33661279,2.23602208 9.71161279,3.11102208 L10.7116128,6.23602208 C11.2116128,7.61102208 10.4616128,9.23602208 8.96161279,9.61102208 L-1.28838721,12.9860221 C-2.78838721,13.4860221 -4.53838721,12.6110221 -5.03838721,11.1110221 L-5.53838721,9.48602208 C-6.16338721,7.86102208 -5.28838721,6.23602208 -3.66338721,5.73602208 Z"
fill="#D8D8D8"
mask="url(#mask-10)"
mask="url(#oceanbase-design-result-success-mask-10)"
></path>
</g>
<path
Expand Down
8 changes: 4 additions & 4 deletions packages/design/src/result/Warning.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const WarningSvg = () => (
<defs>
<path
d="M33.1125,0 L100.6125,0 C118.8875,0 133.725,14.8375 133.725,33.1125 L133.725,118.0875 L33.1125,118.0875 C14.8375,118.0875 -4.4408921e-15,103.25 -4.4408921e-15,84.975 L-4.4408921e-15,33.1125 C-4.4408921e-15,14.8375 14.8375,0 33.1125,0 Z"
id="path-1"
id="oceanbase-design-result-warning-path-1"
></path>
</defs>
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
Expand All @@ -24,11 +24,11 @@ const WarningSvg = () => (
fillRule="nonzero"
></path>
<g id="Clipped" transform="translate(14.9125, 13.75)">
<mask id="mask-2" fill="white">
<use href="#path-1"></use>
<mask id="oceanbase-design-result-warning-mask-2" fill="white">
<use href="#oceanbase-design-result-warning-path-1"></use>
</mask>
<g></g>
<g mask="url(#mask-2)">
<g mask="url(#oceanbase-design-result-warning-mask-2)">
<g transform="translate(-13.25, 47.0625)">
<path
d="M76.075,40.3375 C85.7625,33.55 97.6875,18.85 104.2,0"
Expand Down
Loading
Loading