From fe7dfc974fe28dc2b12115be7b96e5e65c0cd46b Mon Sep 17 00:00:00 2001 From: wurou Date: Fri, 30 Dec 2022 10:20:26 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=AC=AC=E4=B8=80=E6=9D=A1?= =?UTF-8?q?=E9=80=9A=E7=9F=A5=E4=B8=8D=E6=98=BE=E7=A4=BA,=E9=80=9A?= =?UTF-8?q?=E7=9F=A5=E7=BB=84=E5=B1=95=E5=BC=80=E7=8A=B6=E6=80=81=E4=B8=8B?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=80=9A=E7=9F=A5=E6=B2=A1=E6=9C=89=E8=83=8C?= =?UTF-8?q?=E6=99=AF=E8=89=B2,=E5=B7=A6=E6=BB=91=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E9=94=99=E8=AF=AF=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../notification-group/notification-group.ts | 16 ++++++++++++++-- src/components/notification/notification.ts | 18 ++++++++++++++---- .../notification/notificationstyle.ts | 13 ++++++++++--- 3 files changed, 38 insertions(+), 9 deletions(-) diff --git a/src/components/notification-group/notification-group.ts b/src/components/notification-group/notification-group.ts index 3077e85..4ba9426 100644 --- a/src/components/notification-group/notification-group.ts +++ b/src/components/notification-group/notification-group.ts @@ -80,6 +80,7 @@ export class StarNotificationGroup extends LitElement { super.connectedCallback() window.addEventListener('notification-delete', this) window.addEventListener('notification-touchmove', this) + window.addEventListener('notification-touchmove-right', this) window.addEventListener('resize', this.resize) // 用于监控自身高度变化, 用于第一时间设置自身高度 @@ -143,6 +144,8 @@ export class StarNotificationGroup extends LitElement { break // 左滑通知时，对未闭合操作按钮的其它通知进行闭合 case 'notification-touchmove': + this.setAttribute('removeBackground', 'true') + this.style.setProperty('--single-noti-bgc', 'var(--notification-bgc)') let targetId = (event as any).detail.id if (this.slotElements.length > 1) { ;(this.slotElements as StarNotification[]).forEach( @@ -154,6 +157,10 @@ export class StarNotificationGroup extends LitElement { ) } break + case 'notification-touchmove-right': + this.setAttribute('removeBackground', 'false') + this.style.setProperty('--single-noti-bgc', 'transparent') + break } } @@ -180,6 +187,7 @@ export class StarNotificationGroup extends LitElement { 'group-with-one-notification' ) this.show = false + this.contentOpacity = 1 firstChild.withArrowUp = false firstChild.removeEventListener('notification-tap', allNotificationshown) } else if (slotLen > 1) { @@ -187,11 +195,13 @@ export class StarNotificationGroup extends LitElement { if (this.show) { // 展开 + this.addGroupHeight(this._singleHeight * this.slotElements.length) firstChild.setAttribute('radiusType', 'top-border-radius') firstChild.setAttribute('notificationType', 'more-notifiactions') firstChild.withArrowUp = true } else { // 折叠 + this.addGroupHeight(0) firstChild.setAttribute('radiusType', 'border-radius') firstChild.setAttribute( 'notificationType', @@ -237,7 +247,6 @@ export class StarNotificationGroup extends LitElement { } allNotificationshown(event: Event) { - console.log('allNotificationshown') let firstChild = this.slotElements[0] as StarNotification if (firstChild !== event.target || this.slotElements.length == 1) { return @@ -250,7 +259,6 @@ export class StarNotificationGroup extends LitElement { } let isShow = this.show - console.log('hellowq allNotificationshown isShow: ', isShow) if (isShow) { // 当前是展开状态，点击需折叠 let self = this @@ -358,6 +366,10 @@ export class StarNotificationGroup extends LitElement { --single-noti-bgc: transparent; } + :host([removeBackground='true']) { + background: unset !important; + } + @media (prefers-color-scheme: dark) { :host { --notification-bgc: var(--opacity-black-25); diff --git a/src/components/notification/notification.ts b/src/components/notification/notification.ts index 9a221dc..755f691 100644 --- a/src/components/notification/notification.ts +++ b/src/components/notification/notification.ts @@ -122,13 +122,11 @@ export class StarNotification extends StarBaseElement { render(): HTMLTemplateResult | typeof nothing { switch (this.notificationType) { case NotificationType.ONE: + case NotificationType.MORE: case NotificationType.GROUP_ONE: return this.getone() - case NotificationType.MORE: case NotificationType.MORE_FIRST: - return html` - ${this.getmorefirst()} ${this.getone()} - ` + return this.getmorefirst() case NotificationType.BLUETOOTH_TRANSFER: return this.getbluetoothtransfer() default: @@ -391,6 +389,7 @@ export class StarNotification extends StarBaseElement { event.preventDefault() break case 'swipeleft': + event.stopPropagation() this.touchAction.last.clientX = event.detail.endTouch.clientX let touchPosX = this.touchAction.last.clientX - this.touchAction.start.clientX @@ -456,6 +455,7 @@ export class StarNotification extends StarBaseElement { break case 'swiperight': event.preventDefault() + event.stopPropagation() this.notification.style.transform = 'translateX(' + 0 + 'px)' let tranEnd = () => { this.notification.removeEventListener('transitionend', tranEnd) @@ -467,6 +467,16 @@ export class StarNotification extends StarBaseElement { } this.notification.addEventListener('transitionend', tranEnd) this.moveDirection = 'right' + this.dispatchEvent( + new CustomEvent('notification-touchmove-right', { + detail: { + id: this.id, + direction: this.moveDirection, + }, + bubbles: true, + composed: true, + }) + ) break case 'click': event.stopPropagation() diff --git a/src/components/notification/notificationstyle.ts b/src/components/notification/notificationstyle.ts index e766bc1..91a7a54 100644 --- a/src/components/notification/notificationstyle.ts +++ b/src/components/notification/notificationstyle.ts @@ -113,6 +113,7 @@ export const sharedStyles: CSSResult = css` } .notification > div.title-container .title { + overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: none; @@ -127,6 +128,7 @@ export const sharedStyles: CSSResult = css` line-height: 1; // font-size: 2.3vw; font-size: var(--auto-28px); + max-width: var(--auto-640px); } .notification > div.title-container .timestamp { @@ -181,7 +183,7 @@ export const sharedStyles: CSSResult = css` // font-size: 2.2vw; font-size: var(--auto-26px); - max-width: var(--auro-640px); + max-width: var(--auto-640px); // width: 246px; // height: 11px; // font-size: 8px; @@ -337,12 +339,17 @@ export const sharedStyles: CSSResult = css` // line-height: 28px; // font-size: 28px; - height: 18.4%; - line-height: 1; + // height: 18.4%; + // line-height: 1; // font-size: 1.45vh; // font-size: 2.3vw; font-size: var(--auto-28px); line-height: var(--auto-38px); + height: var(--auto-38px); + max-width: 40%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } /* 打开通知组动画过程中时 */