From 84165c4f9875fcad7c7ab0340f0dbcc7fe667bda Mon Sep 17 00:00:00 2001 From: wangxueliang Date: Mon, 10 Feb 2020 19:37:49 +0800 Subject: [PATCH 01/11] doc: update timeline doc #1767 --- components/timeline/demo/index.vue | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/components/timeline/demo/index.vue b/components/timeline/demo/index.vue index 21b29b6b8..f180c5615 100644 --- a/components/timeline/demo/index.vue +++ b/components/timeline/demo/index.vue @@ -12,15 +12,13 @@ const md = { cn: `# 时间轴 垂直展示的时间流信息。 ## 何时使用 - 在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。 - - 当有一系列信息需按时间排列时，可正序和倒序。 - - 需要有一条时间轴进行视觉上的串联时。。 + - 需要有一条时间轴进行视觉上的串联时。 ## 代码演示`, us: `# Timeline Vertical display timeline. ## When To Use - - When a series of information needs to be ordered by time (ascend or descend). + - When a series of information needs to be ordered by time (ascending or descending). - When you need a timeline to make a visual connection. ## Examples `, From 7a40031955d520487dcaf9054a1280ae72230049 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 12 Feb 2020 10:38:15 +0800 Subject: [PATCH 02/11] fix: config-provider error when change prop --- components/config-provider/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/config-provider/index.jsx b/components/config-provider/index.jsx index 062b7bf92..b97cd77c7 100644 --- a/components/config-provider/index.jsx +++ b/components/config-provider/index.jsx @@ -7,7 +7,7 @@ import Base from '../base'; function getWatch(keys = []) { const watch = {}; keys.forEach(k => { - watch[k] = function() { + watch[k] = function(value) { this._proxyVm._data[k] = value; }; }); From f16bde4bb14371655b8e10f267d3f0ce48ce60fc Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 12 Feb 2020 11:31:27 +0800 Subject: [PATCH 03/11] bump 1.4.11 --- CHANGELOG.en-US.md | 6 ++++++ CHANGELOG.zh-CN.md | 19 +++++++++++++++++++ package.json | 4 ++-- scripts/postinstall.js | 4 +++- 4 files changed, 30 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index a25082d26..41305d201 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -10,6 +10,12 @@ --- +# 1.4.11 + +`2020-02-12` + +-🌟 DirectoryTree adds custom switcherIcon function [#1743](https://github.com/vueComponent/ant-design-vue/issues/1743) -🌟 Add draggable table column width [example](https://www.antdv.com/components/table/#components-table-demo-resizable-column) -🌟 Replace `this.$listeners` of all components to avoid repeated rendering of components [#1705](https://github.com/vueComponent/ant-design-vue/issues/1705) -🐞 Fix ConfigProvider component error report error [7a4003](https://github.com/vueComponent/ant-design-vue/commit/7a40031955d520487dcaf9054a1280ae72230049) -🐞 Fix placeholder does not disappear when custom input box of AutoComplete component [#1761](https://github.com/vueComponent/ant-design-vue/issues/1761) -🐞 Fix Statistic.Countdown does not trigger finish event [#1731](https://github.com/vueComponent/ant-design-vue/pull/1731) -🐞 Fix upload component preview image not refreshing [f74469](https://github.com/vueComponent/ant-design-vue/commit/f744690e929d9d6da03c5c513b3ac5497c6490ef) -🐞 Fix TimePicker id is not unique [#1566](https://github.com/vueComponent/ant-design-vue/pull/1566) -🐞 Fix Pagination pagination without animation [#1540](https://github.com/vueComponent/ant-design-vue/issues/1540) -🐞 Fix drop-down list does not show empty elements when Cascader's option is empty array [#1701](https://github.com/vueComponent/ant-design-vue/issues/1540) -🐞 Fix spellcheck rendering incorrect for Input component [#1707](https://github.com/vueComponent/ant-design-vue/issues/1707) -🐞 Fix Tree component cannot customize icon [#1712](https://github.com/vueComponent/ant-design-vue/pull/1712) -🐞 Fix SubMenu forceSubMenuRender property is invalid [#1668](https://github.com/vueComponent/ant-design-vue/issues/1668) -🐞 Fix style of upload button is misaligned [#1742](https://github.com/vueComponent/ant-design-vue/pull/1742) + ## 1.4.10 `2019-12-11` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 557374a1e..20fb02740 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -10,6 +10,25 @@ --- +# 1.4.11 + +`2020-02-12` + +- 🌟 DirectoryTree 新增自定义 switcherIcon 功能 [#1743](https://github.com/vueComponent/ant-design-vue/issues/1743) +- 🌟 新增可拖拽调整表格列宽[示例](https://www.antdv.com/components/table/#components-table-demo-resizable-column) +- 🌟 替换所有组件的 `this.$listeners` 避免组件重复渲染 [#1705](https://github.com/vueComponent/ant-design-vue/issues/1705) +- 🐞 修复 ConfigProvider 组件更改属性时，报错问题 [7a4003](https://github.com/vueComponent/ant-design-vue/commit/7a40031955d520487dcaf9054a1280ae72230049) +- 🐞 修复 AutoComplete 组件自定义输入框时，placeholder 不消失问题 [#1761](https://github.com/vueComponent/ant-design-vue/issues/1761) +- 🐞 修复 Statistic.Countdown 不触发 finish 事件的问题 [#1731](https://github.com/vueComponent/ant-design-vue/pull/1731) +- 🐞 修复 Upload 组件预览图片不刷新问题 [f74469](https://github.com/vueComponent/ant-design-vue/commit/f744690e929d9d6da03c5c513b3ac5497c6490ef) +- 🐞 修复 TimePicker id 不唯一问题 [#1566](https://github.com/vueComponent/ant-design-vue/pull/1566) +- 🐞 修复 Pagination 分页无动画问题 [#1540](https://github.com/vueComponent/ant-design-vue/issues/1540) +- 🐞 修复 Cascader 的 option 为空数组时,下拉列表不展示空元素问题 [#1701](https://github.com/vueComponent/ant-design-vue/issues/1540) +- 🐞 修复 Input 组件的 spellcheck 渲染不正确问题 [#1707](https://github.com/vueComponent/ant-design-vue/issues/1707) +- 🐞 修复 Tree 组件无法自定义 icon 问题 [#1712](https://github.com/vueComponent/ant-design-vue/pull/1712) +- 🐞 修复 SubMenu forceSubMenuRender 属性失效问题 [#1668](https://github.com/vueComponent/ant-design-vue/issues/1668) +- 🐞 修复 Upload 按钮样式错位问题 [#1742](https://github.com/vueComponent/ant-design-vue/pull/1742) + ## 1.4.10 `2019-12-11` diff --git a/package.json b/package.json index 3b8637814..3f788dde2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ant-design-vue", - "version": "1.4.10", + "version": "1.4.11", "title": "Ant Design Vue", "description": "An enterprise-class UI design language and Vue-based implementation", "keywords": [ @@ -215,4 +215,4 @@ "lib/**/style/*", "*.less" ] -} +} \ No newline at end of file diff --git a/scripts/postinstall.js b/scripts/postinstall.js index 9697a6d79..9b399bc43 100644 --- a/scripts/postinstall.js +++ b/scripts/postinstall.js @@ -29,9 +29,11 @@ if (!ADBLOCK && !CI && !DISABLE_OPENCOLLECTIVE && !SILENT) { log('\u001B[96m>\u001B[94m https://opencollective.com/ant-design-vue \u001B[0m'); log('\u001B[96m>\u001B[94m https://www.patreon.com/tangjinzhou \u001B[0m\n'); log( - '\u001B[96mFor china, 更多赞助方式(支付宝、微信)请查看如下链接: ' + + '\u001B[96m更多赞助方式(支付宝、微信、Paypal)请查看如下链接: ' + emoji.get('pray') + '\u001B[0m', ); log('\u001B[96m>\u001B[94m https://www.antdv.com/docs/vue/sponsor-cn \u001B[0m\n'); + log('\u001B[96mAnt Design Vue 官方网站: \u001B[0m'); + log('\u001B[96m>\u001B[94m https://www.antdv.com/ \u001B[0m\n'); } From f5902ec9544f1da4ff5ba4fe44b6b72692da5d59 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 12 Feb 2020 13:33:11 +0800 Subject: [PATCH 04/11] update site --- CHANGELOG.en-US.md | 17 +++++++++++++++-- CHANGELOG.zh-CN.md | 2 +- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 41305d201..764784715 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -10,11 +10,24 @@ --- -# 1.4.11 +## 1.4.11 `2020-02-12` --🌟 DirectoryTree adds custom switcherIcon function [#1743](https://github.com/vueComponent/ant-design-vue/issues/1743) -🌟 Add draggable table column width [example](https://www.antdv.com/components/table/#components-table-demo-resizable-column) -🌟 Replace `this.$listeners` of all components to avoid repeated rendering of components [#1705](https://github.com/vueComponent/ant-design-vue/issues/1705) -🐞 Fix ConfigProvider component error report error [7a4003](https://github.com/vueComponent/ant-design-vue/commit/7a40031955d520487dcaf9054a1280ae72230049) -🐞 Fix placeholder does not disappear when custom input box of AutoComplete component [#1761](https://github.com/vueComponent/ant-design-vue/issues/1761) -🐞 Fix Statistic.Countdown does not trigger finish event [#1731](https://github.com/vueComponent/ant-design-vue/pull/1731) -🐞 Fix upload component preview image not refreshing [f74469](https://github.com/vueComponent/ant-design-vue/commit/f744690e929d9d6da03c5c513b3ac5497c6490ef) -🐞 Fix TimePicker id is not unique [#1566](https://github.com/vueComponent/ant-design-vue/pull/1566) -🐞 Fix Pagination pagination without animation [#1540](https://github.com/vueComponent/ant-design-vue/issues/1540) -🐞 Fix drop-down list does not show empty elements when Cascader's option is empty array [#1701](https://github.com/vueComponent/ant-design-vue/issues/1540) -🐞 Fix spellcheck rendering incorrect for Input component [#1707](https://github.com/vueComponent/ant-design-vue/issues/1707) -🐞 Fix Tree component cannot customize icon [#1712](https://github.com/vueComponent/ant-design-vue/pull/1712) -🐞 Fix SubMenu forceSubMenuRender property is invalid [#1668](https://github.com/vueComponent/ant-design-vue/issues/1668) -🐞 Fix style of upload button is misaligned [#1742](https://github.com/vueComponent/ant-design-vue/pull/1742) +- 🌟 DirectoryTree adds custom switcherIcon function [#1743](https://github.com/vueComponent/ant-design-vue/issues/1743) +- 🌟 Add draggable table column width [example](https://www.antdv.com/components/table/#components-table-demo-resizable-column) +- 🌟 Replace `this.$listeners` of all components to avoid repeated rendering of components [#1705](https://github.com/vueComponent/ant-design-vue/issues/1705) +- 🐞 Fix ConfigProvider component error report error [7a4003](https://github.com/vueComponent/ant-design-vue/commit/7a40031955d520487dcaf9054a1280ae72230049) +- 🐞 Fix placeholder does not disappear when custom input box of AutoComplete component [#1761](https://github.com/vueComponent/ant-design-vue/issues/1761) +- 🐞 Fix Statistic.Countdown does not trigger finish event [#1731](https://github.com/vueComponent/ant-design-vue/pull/1731) +- 🐞 Fix upload component preview image not refreshing [f74469](https://github.com/vueComponent/ant-design-vue/commit/f744690e929d9d6da03c5c513b3ac5497c6490ef) +- 🐞 Fix TimePicker id is not unique [#1566](https://github.com/vueComponent/ant-design-vue/pull/1566) +- 🐞 Fix Pagination pagination without animation [#1540](https://github.com/vueComponent/ant-design-vue/issues/1540) +- 🐞 Fix drop-down list does not show empty elements when Cascader's option is empty array [#1701](https://github.com/vueComponent/ant-design-vue/issues/1540) +- 🐞 Fix spellcheck rendering incorrect for Input component [#1707](https://github.com/vueComponent/ant-design-vue/issues/1707) +- 🐞 Fix Tree component cannot customize icon [#1712](https://github.com/vueComponent/ant-design-vue/pull/1712) +- 🐞 Fix SubMenu forceSubMenuRender property is invalid [#1668](https://github.com/vueComponent/ant-design-vue/issues/1668) +- 🐞 Fix style of upload button is misaligned [#1742](https://github.com/vueComponent/ant-design-vue/pull/1742) ## 1.4.10 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 20fb02740..f1f665ba9 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -10,7 +10,7 @@ --- -# 1.4.11 +## 1.4.11 `2020-02-12` From ff995a744e5d839eb495acc641f7d0dff6bfe722 Mon Sep 17 00:00:00 2001 From: Simon Garner Date: Sun, 16 Feb 2020 18:11:31 +1300 Subject: [PATCH 05/11] fix: Make parentContext optional in ModalOptions type (#1784) * Make parentContext optional in ModalOptions type * Use non-primitive object type for parentContext --- types/modal.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/modal.d.ts b/types/modal.d.ts index b49ccd77b..a5bc6e151 100644 --- a/types/modal.d.ts +++ b/types/modal.d.ts @@ -128,7 +128,7 @@ export interface ModalOptions { */ onOk?: () => any; - parentContext: Object; + parentContext?: object; } export interface ModalConfirm { From 2beccb5db78ed0bf1ae6ab968a1192e2ccb35fd1 Mon Sep 17 00:00:00 2001 From: Yoshimasa Obayashi Date: Fri, 21 Feb 2020 15:49:23 +0900 Subject: [PATCH 06/11] docs: update vue-cli of en-US, syncing with zh-CN (#1799) --- docs/vue/use-with-vue-cli.en-US.md | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/docs/vue/use-with-vue-cli.en-US.md b/docs/vue/use-with-vue-cli.en-US.md index 6332ee37f..6785063ff 100644 --- a/docs/vue/use-with-vue-cli.en-US.md +++ b/docs/vue/use-with-vue-cli.en-US.md @@ -70,12 +70,9 @@ Vue.component(Button.name, Button); Vue.config.productionTip = false; -/* eslint-disable no-new */ new Vue({ - el: '#app', - components: { App }, - template: '', -}); + render: h => h(App), +}).$mount('#app'); ``` Modify `src/App.vue`。 @@ -161,12 +158,9 @@ Remove the `import 'ant-design-vue/dist/antd.css';` statement added before becau Vue.config.productionTip = false - /* eslint-disable no-new */ new Vue({ - el: '#app', - components: { App }, - template: '' - }) + render: h => h(App) + }).$mount('#app') ``` Then reboot with `npm run dev` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/docs/vue/getting-started/#Import-on-Demand). From a47b2bfc6e04cd6d667d24cb3b0721d9bb0d04e7 Mon Sep 17 00:00:00 2001 From: Yoshimasa Obayashi Date: Fri, 21 Feb 2020 15:50:06 +0900 Subject: [PATCH 07/11] docs: update faq of en-US, syncing with zh-CN (#1801) --- docs/vue/faq.en-US.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/docs/vue/faq.en-US.md b/docs/vue/faq.en-US.md index 8164ac5f4..eb90debd6 100644 --- a/docs/vue/faq.en-US.md +++ b/docs/vue/faq.en-US.md @@ -22,7 +22,7 @@ Second, if you don't use the form's automatic check/collection feature, ie you d ### How to modify the default theme of Ant Design Vue? -See [Customize Theme](/docs/vue/customize-theme/)。 +See [Customize Theme](/docs/vue/customize-theme/). ### How to optimize momentjs bundle size with webpack? @@ -42,8 +42,17 @@ Yes, ant-design-vue is designed to develop a complete background application, we Or, follow the instructions in [How to avoid modifying global styles?](docs/react/customize-theme#How-to-avoid-modifying-global-styles-?) +### `ant-design-vue` makes only poor user experience on mobile. + +`ant-design-vue` is not designed for mobile. + ### When I set `mode` to DatePicker/RangePicker, I cannot select year or month anymore? In a real world development, you may need a YearPicker, MonthRangePicker or WeekRangePicker. You are trying to add `mode` to DatePicker/RangePicker expected to implement those pickers. However, the DatePicker/RangePicker cannot be selected and the panels won't close now. That is because `` do not equal to `YearPicker`, `` do not equal to `MonthRangePicker` either. The `mode` property was added to support [showing time picker panel in DatePicker](https://github.com/ant-design/ant-design/issues/5190), which simply control the displayed panel and won't change the original date picking behavior of `DatePicker/RangePicker` (for instance you still need to click date cell to finish selection in a DatePicker, whatever the `mode` is). + +##### Solution + +The following articles are the implementation articles of the react version, the ideas are the same. +In [one article](https://juejin.im/post/5cf65c366fb9a07eca6968f9) or [another article](https://www.cnblogs.com/zyl-Tara/p/10197177.html) approach, using methods `mode` and `panelChange` to encapsulate a component such as `YearPicker`. We plan to add more date related components directly in ant-design-vue@2.0 to support these needs. From f564f6d0dcd3cdcfcee393ba65ae6c1c2c899fc6 Mon Sep 17 00:00:00 2001 From: Morphling <283893159@qq.com> Date: Sun, 23 Feb 2020 10:40:39 +0800 Subject: [PATCH 08/11] fix: nativeEvent is not a complete Event object (#1811) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: nativeEvent is not a complete Event object The Spread syntax is only get own property of a Object，but many properties of Event is on it's prototypes chains, so the result is that the passed nativeEvent only has two property: isTrutsed and shiftKey * fix semicolon --- components/vc-checkbox/src/Checkbox.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/vc-checkbox/src/Checkbox.jsx b/components/vc-checkbox/src/Checkbox.jsx index ecbcff88c..adb692651 100644 --- a/components/vc-checkbox/src/Checkbox.jsx +++ b/components/vc-checkbox/src/Checkbox.jsx @@ -77,6 +77,7 @@ export default { this.sChecked = e.target.checked; } this.$forceUpdate(); // change前，维持现有状态 + e.shiftKey = this.eventShiftKey; this.__emit('change', { target: { ...props, @@ -88,7 +89,7 @@ export default { preventDefault() { e.preventDefault(); }, - nativeEvent: { ...e, shiftKey: this.eventShiftKey }, + nativeEvent: e, }); this.eventShiftKey = false; }, From 51812566baa8e66cf33556583ac6631d41bf9caa Mon Sep 17 00:00:00 2001 From: Yoshimasa Obayashi Date: Tue, 3 Mar 2020 14:30:41 +0900 Subject: [PATCH 09/11] docs: update introduce of en-US, syncing with zh-CN (#1802) --- docs/vue/introduce.en-US.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/vue/introduce.en-US.md b/docs/vue/introduce.en-US.md index b70156edb..fc80b2d9a 100644 --- a/docs/vue/introduce.en-US.md +++ b/docs/vue/introduce.en-US.md @@ -127,6 +127,14 @@ If you'd like to help us improve antd, just create a [Pull Request](https://gith > If you're new to posting issues, we ask that you read [_How To Ask Questions The Smart Way_](http://www.catb.org/~esr/faqs/smart-questions.html) and [How to Ask a Question in Open Source Community](https://github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/~sgtatham/bugs.html) prior to posting. Well written bug reports help us help you! +## About ant-design-vue + +As we all know, Ant Design, as a design language, has gone through many years of iteration and accumulation. Its UI design ideas have become a set of de facto standards and are sought after and loved by many front-end developers and enterprises, and it is also a magic weapon in the hands of React developers. I hope that ant-design-vue will allow Vue developers to enjoy the excellent design of Ant Design. + +The ant-design-vue is the Vue implementation of Ant Design. The style of the component is kept in sync with Ant Design. The html structure and css style of the component are also consistent. The style 0 modification is really achieved, and the component API is kept as consistent as possible. + +Ant Design Vue is committed to providing programmers with a ** pleasant ** development experience. + ## THANK YOU [Ant Design Team](https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt) From b2b500f70e7e4bfed21d5ce68f29ef300e440572 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 3 Mar 2020 13:39:34 +0800 Subject: [PATCH 10/11] bump 1.4.12 --- CHANGELOG.en-US.md | 6 ++++++ CHANGELOG.zh-CN.md | 6 ++++++ package.json | 2 +- 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 764784715..cff07f329 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -10,6 +10,12 @@ --- +## 1.4.12 + +`2020-03-03` + +- 🐞 Fix ts type error of `Modal` component [#1809](https://github.com/vueComponent/ant-design-vue/issues/1809) + ## 1.4.11 `2020-02-12` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index f1f665ba9..e0c3e0ef8 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -10,6 +10,12 @@ --- +## 1.4.12 + +`2020-03-03` + +- 🐞 修复 `Modal` 组件 ts 类型报错问题 [#1809](https://github.com/vueComponent/ant-design-vue/issues/1809) + ## 1.4.11 `2020-02-12` diff --git a/package.json b/package.json index 3f788dde2..83558d51b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ant-design-vue", - "version": "1.4.11", + "version": "1.4.12", "title": "Ant Design Vue", "description": "An enterprise-class UI design language and Vue-based implementation", "keywords": [ From e7ff6d6602df50c55e7adb33580fce9552ef8490 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 3 Mar 2020 21:49:34 +0800 Subject: [PATCH 11/11] docs: update doc --- site/components/demoBox.vue | 46 ++++++++++---------- site/index.less | 9 +--- site/theme/static/demo.less | 83 +++++++++++++++++++++++-------------- 3 files changed, 77 insertions(+), 61 deletions(-) diff --git a/site/components/demoBox.vue b/site/components/demoBox.vue index 095cf4d5d..9c7a4dd4e 100644 --- a/site/components/demoBox.vue +++ b/site/components/demoBox.vue @@ -13,29 +13,9 @@
- - - expand code - expand code - - -
- -
+
@@ -46,6 +26,28 @@ class="code-box-code-copy" /> + + + expand code + expand code + + +
+
+ +
diff --git a/site/index.less b/site/index.less index 2268bd325..4d5402b5e 100644 --- a/site/index.less +++ b/site/index.less @@ -56,19 +56,14 @@ pre > code[class*='language-'] { position: absolute; top: -14px; padding: 1px 8px; - margin-left: -8px; + margin-left: 16px; color: #777; border-radius: 2px 2px 0 0; background: #fff; font-size: 14px; width: auto; } -.code-box-code-copy { - opacity: 1; - position: absolute; - right: 15px; - top: 10px; -} + #search-box { .ant-select-focused, .ant-select-selection, diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less index 3c318755c..ccfe79c52 100644 --- a/site/theme/static/demo.less +++ b/site/theme/static/demo.less @@ -73,11 +73,10 @@ &-meta { &.markdown { position: relative; - padding: 18px 32px; - border-radius: 0 0 @border-radius-sm @border-radius-sm; - transition: background-color 0.4s; width: 100%; font-size: @font-size-base; + border-radius: 0 0 @border-radius-sm @border-radius-sm; + transition: background-color 0.4s; } blockquote { @@ -93,7 +92,7 @@ > p { font-size: 12px; margin: 0.5em 0; - padding-right: 25px; + padding: 18px 24px 12px; width: 100%; word-break: break-word; } @@ -105,28 +104,20 @@ } .code-expand-icon { - position: absolute; - right: 16px; - bottom: 23px; cursor: pointer; - width: 16px; - height: 16px; - line-height: 16px; - text-align: center; } .code-expand-icon-show, .code-expand-icon-hide { + position: absolute; + top: 0; + left: 0; + width: 100%; + max-width: 100%; + margin: 0; + box-shadow: none; transition: all 0.4s; user-select: none; - position: absolute; - left: 0; - top: 0; - margin: 0; - max-width: 100%; - width: 100%; - vertical-align: baseline; - box-shadow: none; } .code-expand-icon-show { @@ -169,29 +160,57 @@ } &-actions { - position: absolute; - top: 10px; - right: 12px; - text-align: right; + padding-top: 12px; + text-align: center; + border-top: 1px dashed @site-border-color-split; + opacity: 0.7; + transition: opacity 0.3s; + + &:hover { + opacity: 1; + } + > i, - > form { + > form, + > span { + position: relative; display: inline-block; - margin-left: 8px; + width: 16px; + height: 16px; + margin-left: 16px; + vertical-align: top; + + &:first-child { + margin-left: 0; + } + } + + > form { + top: -2px; } } - &-code-copy { - font-size: 14px; - cursor: pointer; - color: @site-text-color-secondary; - transition: all 0.24s; - background: #fff; + &-code-action { width: 20px; height: 20px; + color: @site-text-color-secondary; + font-size: 16px; + line-height: 18px; + cursor: pointer; + transition: all 0.24s; + } + + &-code-copy { + width: 20px; + height: 20px; + color: @site-text-color-secondary; + font-size: 14px; line-height: 20px; text-align: center; + background: #fff; border-radius: 20px; - opacity: 0; + cursor: pointer; + transition: all 0.24s; &:hover { color: @site-text-color-secondary;