From cab5894c15a8a550dd40b71b1eb07c9aa524a28c Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Fri, 5 Mar 2021 13:34:10 +0800
Subject: [PATCH] feat(notification): close & width & padding customization
---
src/notification/src/Notification.tsx | 15 +++++++++++-
src/notification/src/styles/index.cssr.ts | 28 +++++++++++++++--------
src/notification/styles/_common.ts | 6 +++++
src/notification/styles/dark.ts | 2 ++
src/notification/styles/light.ts | 2 ++
src/upload/demos/enUS/drag.demo.md | 2 +-
src/upload/demos/zhCN/drag.demo.md | 2 +-
7 files changed, 44 insertions(+), 13 deletions(-)
create mode 100644 src/notification/styles/_common.ts
diff --git a/src/notification/src/Notification.tsx b/src/notification/src/Notification.tsx
index defa0d895..06ef8771d 100644
--- a/src/notification/src/Notification.tsx
+++ b/src/notification/src/Notification.tsx
@@ -7,6 +7,7 @@ import {
VNodeChild,
CSSProperties
} from 'vue'
+import { getPadding } from 'seemly'
import { createKey, keysOf, render as Render } from '../../_utils'
import { NBaseIcon, NBaseClose } from '../../_internal'
import {
@@ -83,6 +84,10 @@ export default defineComponent({
boxShadow,
lineHeight,
fontSize,
+ closeMargin,
+ closeSize,
+ width,
+ padding,
[createKey('iconColor', type)]: iconColor
},
common: {
@@ -91,6 +96,7 @@ export default defineComponent({
cubicBezierEaseInOut
}
} = NNotificationProvider.mergedTheme
+ const { left, right, top, bottom } = getPadding(padding)
return {
'--color': color,
'--font-size': fontSize,
@@ -108,7 +114,14 @@ export default defineComponent({
'--close-color-hover': closeColorHover,
'--close-color-pressed': closeColorPressed,
'--line-height': lineHeight,
- '--icon-color': iconColor
+ '--icon-color': iconColor,
+ '--close-margin': closeMargin,
+ '--close-size': closeSize,
+ '--width': width,
+ '--padding-left': left,
+ '--padding-right': right,
+ '--padding-top': top,
+ '--padding-bottom': bottom
}
})
}
diff --git a/src/notification/src/styles/index.cssr.ts b/src/notification/src/styles/index.cssr.ts
index ae34a9178..f0739fb86 100644
--- a/src/notification/src/styles/index.cssr.ts
+++ b/src/notification/src/styles/index.cssr.ts
@@ -12,11 +12,18 @@ import { c, cB, cE, cM } from '../../../_utils/cssr'
// --bezier-ease-in
// --border-radius
// --box-shadow
+// --close-margin
+// --close-size
// --close-color
// --close-color-hover
// --close-color-pressed
// --line-height
// --icon-color
+// --width
+// --padding-top
+// --padding-bottom
+// --padding-left
+// --padding-right
export default c([
cB('notification-container', `
z-index: 4000;
@@ -96,9 +103,9 @@ export default c([
margin-bottom: 12px;
margin-left: 28px;
margin-right: 16px;
- padding-left: 16px;
- padding-right: 16px;
- width: 365px;
+ padding-left: var(--padding-left);
+ padding-right: var(--padding-right);
+ width: var(--width);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
box-sizing: border-box;
@@ -127,16 +134,17 @@ export default c([
]),
cE('close', `
position: absolute;
- top: 16px;
- right: 12px;
- font-size: 14px;
+ top: 0;
+ right: 0;
+ margin: var(--close-margin);
+ font-size: var(--close-size);
transition: color .3s var(--bezier);
`)
]),
cE('avatar', `
position: absolute;
- top: 16px;
- left: 16px;
+ top: var(--padding-top);
+ left: var(--padding-left);
width: 28px;
height: 28px;
font-size: 28px;
@@ -146,8 +154,8 @@ export default c([
})
]),
cB('notification-main', `
- padding-top: 16px;
- padding-bottom: 16px;
+ padding-top: var(--padding-top);
+ padding-bottom: var(--padding-bottom);
box-sizing: border-box;
display: flex;
flex-direction: column;
diff --git a/src/notification/styles/_common.ts b/src/notification/styles/_common.ts
new file mode 100644
index 000000000..0bbf9f230
--- /dev/null
+++ b/src/notification/styles/_common.ts
@@ -0,0 +1,6 @@
+export default {
+ closeMargin: '18px 14px',
+ closeSize: '16px',
+ width: '365px',
+ padding: '16px'
+}
diff --git a/src/notification/styles/dark.ts b/src/notification/styles/dark.ts
index 1cc411470..fc51f5627 100644
--- a/src/notification/styles/dark.ts
+++ b/src/notification/styles/dark.ts
@@ -1,5 +1,6 @@
import { scrollbarDark } from '../../scrollbar/styles'
import { commonDark } from '../../_styles/common'
+import commonVars from './_common'
import type { NotificationTheme } from './light'
const notificationDark: NotificationTheme = {
@@ -27,6 +28,7 @@ const notificationDark: NotificationTheme = {
fontSize
} = vars
return {
+ ...commonVars,
borderRadius,
lineHeight,
fontSize,
diff --git a/src/notification/styles/light.ts b/src/notification/styles/light.ts
index 0054029c4..bc1b47630 100644
--- a/src/notification/styles/light.ts
+++ b/src/notification/styles/light.ts
@@ -2,6 +2,7 @@ import { scrollbarLight } from '../../scrollbar/styles'
import { commonLight } from '../../_styles/common'
import type { ThemeCommonVars } from '../../_styles/common'
import { createTheme } from '../../_mixins'
+import commonVars from './_common'
const self = (vars: ThemeCommonVars) => {
const {
@@ -22,6 +23,7 @@ const self = (vars: ThemeCommonVars) => {
fontSize
} = vars
return {
+ ...commonVars,
borderRadius,
lineHeight,
fontSize,
diff --git a/src/upload/demos/enUS/drag.demo.md b/src/upload/demos/enUS/drag.demo.md
index 85e98f9fc..e4b9d43c5 100644
--- a/src/upload/demos/enUS/drag.demo.md
+++ b/src/upload/demos/enUS/drag.demo.md
@@ -11,7 +11,7 @@
Click or drag file to this area to upload
- Strictly prohibit from uploading sensitive information. For example, your
deposit card's password or your credit card's expiration date and security
code.
点击或者拖动文件到该区域来上传
- 请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码