diff --git a/site/theme/static/dark.less b/site/theme/static/dark.less index 91a227000d..cf5d558ae8 100644 --- a/site/theme/static/dark.less +++ b/site/theme/static/dark.less @@ -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; + } } } diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less index 81d82cf33a..704ad17599 100644 --- a/site/theme/static/demo.less +++ b/site/theme/static/demo.less @@ -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; diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx index a99ec327fe..5460479edd 100644 --- a/site/theme/template/Content/ComponentDoc.jsx +++ b/site/theme/template/Content/ComponentDoc.jsx @@ -103,6 +103,7 @@ class ComponentDoc extends React.Component { const demoElem = ( +
{helmetTitle && {helmetTitle}} {helmetTitle && } diff --git a/site/theme/template/Content/Demo/CodePenIcon.jsx b/site/theme/template/Content/Demo/CodePenIcon.jsx new file mode 100644 index 0000000000..7a26b5809d --- /dev/null +++ b/site/theme/template/Content/Demo/CodePenIcon.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import Icon from '@ant-design/icons'; + +const CodePenIcon = props => { + const SVGIcon = () => ( + + + + ); + return ; +}; + +export default CodePenIcon; diff --git a/site/theme/template/Content/Demo/CodeSandboxIcon.jsx b/site/theme/template/Content/Demo/CodeSandboxIcon.jsx new file mode 100644 index 0000000000..7857f98109 --- /dev/null +++ b/site/theme/template/Content/Demo/CodeSandboxIcon.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import Icon from '@ant-design/icons'; + +const CodeSandboxIcon = props => { + const SVGIcon = () => ( + + + + ); + return ; +}; + +export default CodeSandboxIcon; diff --git a/site/theme/template/Content/Demo/RiddleIcon.jsx b/site/theme/template/Content/Demo/RiddleIcon.jsx new file mode 100644 index 0000000000..044e7d5ea2 --- /dev/null +++ b/site/theme/template/Content/Demo/RiddleIcon.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import Icon from '@ant-design/icons'; + +const RiddleIcon = props => { + const SVGIcon = () => ( + + + + ); + return ; +}; + +export default RiddleIcon; diff --git a/site/theme/template/Content/Demo/index.jsx b/site/theme/template/Content/Demo/index.jsx index f6e6ad4c0a..5c54b1ff48 100644 --- a/site/theme/template/Content/Demo/index.jsx +++ b/site/theme/template/Content/Demo/index.jsx @@ -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')")}
{introChildren}
+ {showRiddleButton ? ( +
{ + this.track({ type: 'riddle', demo: meta.id }); + this.riddleIconRef.current.submit(); + }} + > + + }> + + +
+ ) : null}
this.track({ type: 'riddle', demo: meta.id })} - > - - }> - - -
-
this.track({ type: 'codesandbox', demo: meta.id })} + ref={this.codeSandboxIconRef} + onClick={() => { + this.track({ type: 'codesandbox', demo: meta.id }); + this.codeSandboxIconRef.current.submit(); + }} > }> - +
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', }} > }> - +
}> @@ -376,7 +391,7 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")} stackblitzSdk.openProject(stackblitzPrefillConfig); }} > - + 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', }, )} @@ -396,7 +411,7 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")} } > - +