mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
Refactor demo code box actions (#24887)
* refactor: refine the styling of actions part of demo code-box * fix: lint style
This commit is contained in:
07akioni
GitHub
parent
f37f471373
commit
2be08b883b
@ -70,22 +70,12 @@
|
||||
border-bottom: 1px solid @border-color-split;
|
||||
}
|
||||
|
||||
&-codepen {
|
||||
background: transparent
|
||||
url('https://gw.alipayobjects.com/zos/antfincdn/1B3MOCiI5F/OtZslpOjYXijshDERXwc.svg') center /
|
||||
14px no-repeat;
|
||||
}
|
||||
&-actions > &-code-action {
|
||||
color: @site-text-color-secondary;
|
||||
|
||||
&-riddle {
|
||||
background: transparent
|
||||
url('https://gw.alipayobjects.com/zos/antfincdn/NByOhhT9rO/DlHbxMCyeuyOrqOdbgik.svg') center /
|
||||
14px no-repeat;
|
||||
}
|
||||
|
||||
&-codesandbox {
|
||||
background: transparent
|
||||
url('https://gw.alipayobjects.com/zos/antfincdn/hNEf2p1ZnS/aaYmtdDyHSCkXyLZVgGK.svg') center /
|
||||
14px no-repeat;
|
||||
&:hover {
|
||||
color: @icon-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -232,8 +232,9 @@
|
||||
}
|
||||
|
||||
&-actions {
|
||||
padding-top: 12px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 12px 0;
|
||||
border-top: 1px dashed @site-border-color-split;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.3s;
|
||||
@ -241,63 +242,47 @@
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> i,
|
||||
> form,
|
||||
> span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 16px;
|
||||
vertical-align: top;
|
||||
|
||||
.ant-row-rtl & {
|
||||
margin-right: 16px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
|
||||
.ant-row-rtl & {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> form {
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
&-code-action {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
&-actions > &-code-action {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 16px;
|
||||
color: @site-text-color-secondary;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
cursor: pointer;
|
||||
transition: all 0.24s;
|
||||
|
||||
.ant-row-rtl & {
|
||||
margin-right: 16px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
|
||||
.ant-row-rtl & {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @icon-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&-code-copy {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: @site-text-color-secondary;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
background: @component-background;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.24s;
|
||||
transition: transform 0.24s;
|
||||
|
||||
&:hover {
|
||||
color: @icon-color-hover;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
&.anticon-check {
|
||||
@ -307,52 +292,27 @@
|
||||
}
|
||||
|
||||
&-codepen {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
overflow: hidden;
|
||||
text-indent: -9999px;
|
||||
background: transparent
|
||||
url('https://gw.alipayobjects.com/zos/rmsportal/OtZslpOjYXijshDERXwc.svg') center / 14px
|
||||
no-repeat;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0.65;
|
||||
transition: all 0.3s;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-riddle {
|
||||
display: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
overflow: hidden;
|
||||
text-indent: -9999px;
|
||||
background: transparent
|
||||
url('https://gw.alipayobjects.com/zos/rmsportal/DlHbxMCyeuyOrqOdbgik.svg') center / 14px
|
||||
no-repeat;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0.65;
|
||||
transition: all 0.3s;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-codesandbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
text-indent: -9999px;
|
||||
background: transparent
|
||||
url('https://gw.alipayobjects.com/zos/rmsportal/aaYmtdDyHSCkXyLZVgGK.svg') center / 14px
|
||||
no-repeat;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0.65;
|
||||
transition: all 0.3s;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -383,10 +343,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.show-riddle-button .code-box-riddle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.all-code-box-controls {
|
||||
float: right;
|
||||
|
||||
|
||||
@ -103,6 +103,7 @@ class ComponentDoc extends React.Component {
|
||||
const demoElem = (
|
||||
<Demo
|
||||
{...demoData}
|
||||
showRiddleButton={showRiddleButton}
|
||||
key={demoData.meta.filename}
|
||||
utils={utils}
|
||||
expand={expandAll}
|
||||
@ -133,14 +134,11 @@ class ComponentDoc extends React.Component {
|
||||
});
|
||||
|
||||
const { title, subtitle, filename } = meta;
|
||||
const articleClassName = classNames({
|
||||
'show-riddle-button': showRiddleButton,
|
||||
});
|
||||
const helmetTitle = `${subtitle || ''} ${title[locale] || title} - Ant Design`;
|
||||
const contentChild = getMetaDescription(getChildren(content));
|
||||
|
||||
return (
|
||||
<article className={articleClassName}>
|
||||
<article>
|
||||
<Helmet encodeSpecialCharacters={false}>
|
||||
{helmetTitle && <title>{helmetTitle}</title>}
|
||||
{helmetTitle && <meta property="og:title" content={helmetTitle} />}
|
||||
|
||||
13
site/theme/template/Content/Demo/CodePenIcon.jsx
Normal file
13
site/theme/template/Content/Demo/CodePenIcon.jsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import Icon from '@ant-design/icons';
|
||||
|
||||
const CodePenIcon = props => {
|
||||
const SVGIcon = () => (
|
||||
<svg viewBox="0 0 15 15" fill="currentColor">
|
||||
<path d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z" />
|
||||
</svg>
|
||||
);
|
||||
return <Icon component={SVGIcon} {...props} />;
|
||||
};
|
||||
|
||||
export default CodePenIcon;
|
||||
13
site/theme/template/Content/Demo/CodeSandboxIcon.jsx
Normal file
13
site/theme/template/Content/Demo/CodeSandboxIcon.jsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import Icon from '@ant-design/icons';
|
||||
|
||||
const CodeSandboxIcon = props => {
|
||||
const SVGIcon = () => (
|
||||
<svg viewBox="0 0 1024 1024" fill="currentColor">
|
||||
<path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z" />
|
||||
</svg>
|
||||
);
|
||||
return <Icon component={SVGIcon} {...props} />;
|
||||
};
|
||||
|
||||
export default CodeSandboxIcon;
|
||||
13
site/theme/template/Content/Demo/RiddleIcon.jsx
Normal file
13
site/theme/template/Content/Demo/RiddleIcon.jsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import Icon from '@ant-design/icons';
|
||||
|
||||
const RiddleIcon = props => {
|
||||
const SVGIcon = () => (
|
||||
<svg viewBox="0 0 14 14" fill="currentColor">
|
||||
<path d="M13.8875145,13.1234844 C13.8687399,13.0691875 13.8499977,13.0329687 13.8312555,12.9786562 L11.3687445,8.83296875 C12.9187468,8.05754687 13.9640694,6.49009375 13.9640694,4.68728125 C13.9624994,2.09095312 11.7968694,0 9.10938728,0 L3.86404855,0 C3.04217572,0 2.37028902,0.648703125 2.37028902,1.44223437 L2.37028902,1.82090625 L0.746871676,1.82090625 C0.33593526,1.82090625 0,2.14526562 0,2.54203125 L0,13.4478437 C0,13.7540937 0.242191908,13.9879375 0.559368786,13.9879375 C0.615627746,13.9879375 0.67187052,13.9698281 0.72812948,13.9517187 L13.440615,13.9517187 C13.7578081,13.9517187 14,13.7178906 14,13.4116406 C14,13.321125 13.9624994,13.2125 13.8875145,13.1234844 Z M3.49061272,8.0394375 L3.49061272,2.9206875 L8.71719306,2.9206875 C9.74375723,2.9206875 10.5843723,3.73232812 10.5843723,4.7235 C10.5843723,5.71465625 9.76249942,6.5081875 8.71719306,6.5081875 L6.53280462,6.5081875 L6.53280462,6.52629688 C6.45781965,6.52629688 6.3828185,6.5625 6.3093711,6.59870313 C6.04843699,6.74354688 5.95469364,7.08598438 6.10467977,7.33792188 L8.3078104,11.0325469 L3.4906289,11.0325469 L3.4906289,8.0394375 L3.49061272,8.0394375 Z M1.1203237,12.8881406 L1.1203237,2.9206875 L2.3703052,2.9206875 L2.3703052,11.5545313 C2.3703052,11.8607813 2.61249711,12.0946094 2.92969017,12.0946094 L2.94843237,12.0946094 C2.98593295,12.1127188 3.04219191,12.1127188 3.09843468,12.1127188 L9.16563006,12.1127188 C9.48280694,12.1127188 9.72499884,11.878875 9.72499884,11.572625 L9.72499884,11.5364219 C9.76249942,11.3915938 9.74375723,11.2482813 9.66875607,11.1215469 L7.5593526,7.58835938 L8.6984185,7.58835938 C10.3406104,7.58835938 11.6843514,6.29095313 11.6843514,4.703875 C11.6843514,3.1168125 10.3406104,1.81939063 8.6984185,1.81939063 L3.4906289,1.81939063 L3.4906289,1.44073437 C3.4906289,1.24310937 3.65937341,1.08017187 3.86406474,1.08017187 L9.09061272,1.08017187 C11.143741,1.08017187 12.8234173,2.7019375 12.8234173,4.68578125 C12.8234173,6.21853125 11.8343538,7.5340625 10.4343538,8.05603125 C10.378111,8.07414063 10.3406104,8.09223438 10.2843514,8.11034375 C10.0234173,8.25517188 9.92967399,8.597625 10.0796763,8.8495625 L12.5062405,12.8881563 L1.12030751,12.8881563 L1.1203237,12.8881406 Z" />
|
||||
</svg>
|
||||
);
|
||||
return <Icon component={SVGIcon} {...props} />;
|
||||
};
|
||||
|
||||
export default RiddleIcon;
|
||||
@ -11,6 +11,9 @@ import stackblitzSdk from '@stackblitz/sdk';
|
||||
import CodePreview from './CodePreview';
|
||||
import EditButton from '../EditButton';
|
||||
import BrowserFrame from '../../BrowserFrame';
|
||||
import CodeSandboxIcon from './CodeSandboxIcon';
|
||||
import CodePenIcon from './CodePenIcon';
|
||||
import RiddleIcon from './RiddleIcon';
|
||||
|
||||
const { ErrorBoundary } = Alert;
|
||||
|
||||
@ -24,6 +27,12 @@ function compress(string) {
|
||||
class Demo extends React.Component {
|
||||
iframeRef = React.createRef();
|
||||
|
||||
codeSandboxIconRef = React.createRef();
|
||||
|
||||
riddleIconRef = React.createRef();
|
||||
|
||||
codepenIconRef = React.createRef();
|
||||
|
||||
state = {
|
||||
codeExpand: false,
|
||||
copied: false,
|
||||
@ -125,6 +134,7 @@ class Demo extends React.Component {
|
||||
utils,
|
||||
intl: { locale },
|
||||
theme,
|
||||
showRiddleButton,
|
||||
} = props;
|
||||
const { copied, copyTooltipVisible } = state;
|
||||
if (!this.liveDemo) {
|
||||
@ -316,26 +326,34 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
|
||||
</div>
|
||||
<div className="code-box-description">{introChildren}</div>
|
||||
<div className="code-box-actions">
|
||||
{showRiddleButton ? (
|
||||
<form
|
||||
className="code-box-code-action"
|
||||
action="//riddle.alibaba-inc.com/riddles/define"
|
||||
method="POST"
|
||||
target="_blank"
|
||||
ref={this.riddleIconRef}
|
||||
onClick={() => {
|
||||
this.track({ type: 'riddle', demo: meta.id });
|
||||
this.riddleIconRef.current.submit();
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="data" value={JSON.stringify(riddlePrefillConfig)} />
|
||||
<Tooltip title={<FormattedMessage id="app.demo.riddle" />}>
|
||||
<RiddleIcon className="code-box-riddle" />
|
||||
</Tooltip>
|
||||
</form>
|
||||
) : null}
|
||||
<form
|
||||
action="//riddle.alibaba-inc.com/riddles/define"
|
||||
method="POST"
|
||||
target="_blank"
|
||||
onClick={() => this.track({ type: 'riddle', demo: meta.id })}
|
||||
>
|
||||
<input type="hidden" name="data" value={JSON.stringify(riddlePrefillConfig)} />
|
||||
<Tooltip title={<FormattedMessage id="app.demo.riddle" />}>
|
||||
<input
|
||||
type="submit"
|
||||
value="Create New Riddle with Prefilled Data"
|
||||
className="code-box-riddle"
|
||||
/>
|
||||
</Tooltip>
|
||||
</form>
|
||||
<form
|
||||
className="code-box-code-action"
|
||||
action="https://codesandbox.io/api/v1/sandboxes/define"
|
||||
method="POST"
|
||||
target="_blank"
|
||||
onClick={() => this.track({ type: 'codesandbox', demo: meta.id })}
|
||||
ref={this.codeSandboxIconRef}
|
||||
onClick={() => {
|
||||
this.track({ type: 'codesandbox', demo: meta.id });
|
||||
this.codeSandboxIconRef.current.submit();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
@ -343,29 +361,26 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
|
||||
value={compress(JSON.stringify(codesanboxPrefillConfig))}
|
||||
/>
|
||||
<Tooltip title={<FormattedMessage id="app.demo.codesandbox" />}>
|
||||
<input
|
||||
type="submit"
|
||||
value="Create New Sandbox with Prefilled Data"
|
||||
className="code-box-codesandbox"
|
||||
/>
|
||||
<CodeSandboxIcon className="code-box-codesandbox" />
|
||||
</Tooltip>
|
||||
</form>
|
||||
<form
|
||||
className="code-box-code-action"
|
||||
action="https://codepen.io/pen/define"
|
||||
method="POST"
|
||||
target="_blank"
|
||||
onClick={() => this.track({ type: 'codepen', demo: meta.id })}
|
||||
ref={this.codepenIconRef}
|
||||
onClick={() => {
|
||||
this.track({ type: 'codepen', demo: meta.id });
|
||||
this.codepenIconRef.current.submit();
|
||||
}}
|
||||
style={{
|
||||
display: sourceCode ? '' : 'none',
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
|
||||
<Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
|
||||
<input
|
||||
type="submit"
|
||||
value="Create New Pen with Prefilled Data"
|
||||
className="code-box-codepen"
|
||||
/>
|
||||
<CodePenIcon className="code-box-codepen" />
|
||||
</Tooltip>
|
||||
</form>
|
||||
<Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
|
||||
@ -376,7 +391,7 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
|
||||
stackblitzSdk.openProject(stackblitzPrefillConfig);
|
||||
}}
|
||||
>
|
||||
<ThunderboltOutlined />
|
||||
<ThunderboltOutlined className="code-box-stackblitz" />
|
||||
</span>
|
||||
</Tooltip>
|
||||
<CopyToClipboard text={sourceCode} onCopy={() => this.handleCodeCopied(meta.id)}>
|
||||
@ -388,7 +403,7 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
|
||||
{React.createElement(
|
||||
copied && copyTooltipVisible ? CheckOutlined : SnippetsOutlined,
|
||||
{
|
||||
className: 'code-box-code-copy',
|
||||
className: 'code-box-code-copy code-box-code-action',
|
||||
},
|
||||
)}
|
||||
</Tooltip>
|
||||
@ -396,7 +411,7 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
|
||||
<Tooltip
|
||||
title={<FormattedMessage id={`app.demo.code.${codeExpand ? 'hide' : 'show'}`} />}
|
||||
>
|
||||
<span className="code-expand-icon">
|
||||
<span className="code-expand-icon code-box-code-action">
|
||||
<img
|
||||
alt="expand code"
|
||||
src={
|
||||
|
||||
Loading…
Reference in New Issue
Block a user