diff --git a/src/components/header-bar/header-bar.ts b/src/components/header-bar/header-bar.ts
index c7572b8..d476d9d 100644
--- a/src/components/header-bar/header-bar.ts
+++ b/src/components/header-bar/header-bar.ts
@@ -18,7 +18,7 @@ export class HeaderBar extends LitElement {
getTime(): HTMLTemplateResult {
return html`
-
+
diff --git a/src/components/icon-control-bar/icon-control-bar.ts b/src/components/icon-control-bar/icon-control-bar.ts
index 68d4ab7..bdf63d6 100644
--- a/src/components/icon-control-bar/icon-control-bar.ts
+++ b/src/components/icon-control-bar/icon-control-bar.ts
@@ -32,6 +32,7 @@ export class IconControlBar extends LitElement {
@property({type: Boolean}) active = false
@property({type: Boolean}) longPress = false
@property({type: Boolean}) isNameShown = false
+ @property({type: String}) section = ''
@state({}) timer!: number
@query('.more-info-icon') moreInfoIcon!: HTMLDivElement
diff --git a/src/components/icon-control-bar/iconstyle.ts b/src/components/icon-control-bar/iconstyle.ts
index f2f2403..8543095 100644
--- a/src/components/icon-control-bar/iconstyle.ts
+++ b/src/components/icon-control-bar/iconstyle.ts
@@ -13,7 +13,25 @@ export const sharedStyles: CSSResult = css`
.active {
background-color: var(--background-active) !important;
color: var(--text-color-active) !important;
- transform: scale(0.9);
+ // transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+ // transform: scale(0.9);
+ animation: scaleAnimation 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+ }
+
+ @keyframes scaleAnimation {
+ 0% {
+ transform: scale(0.9);
+ }
+
+ 100% {
+ transform: scale(1);
+ }
+ }
+
+ .inactive {
+ // transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+ // transform: scale(0.9);
+ animation: scaleAnimation 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.with-border {
@@ -39,7 +57,7 @@ export const sharedStyles: CSSResult = css`
text-align: center;
vertical-align: middle;
content: attr(data-icon);
- font-family: gaia-icons;
+ font-family: 'gaia-icons';
font-style: normal;
text-rendering: optimizelegibility;
font-weight: 500;
@@ -75,9 +93,9 @@ export const sharedStyles: CSSResult = css`
font-style: normal;
mix-blend-mode: normal;
width: 8.3vw;
- height: 1vh;
+ // height: 1vh;
font-size: 1.75vw;
- line-height: 1.7vw;
+ // line-height: 1.7vw;
}
.icon-name-shown,
diff --git a/src/components/notification-group/notification-group.ts b/src/components/notification-group/notification-group.ts
index 7fbf13f..febe22a 100644
--- a/src/components/notification-group/notification-group.ts
+++ b/src/components/notification-group/notification-group.ts
@@ -18,6 +18,7 @@ export class StarNotificationGroup extends LitElement {
connectedCallback() {
super.connectedCallback()
window.addEventListener('notification-delete', this)
+ window.addEventListener('notification-touchmove', this)
}
firstUpdated() {
@@ -59,6 +60,19 @@ export class StarNotificationGroup extends LitElement {
}
)
break
+ // 左滑通知时，对未闭合操作按钮的其它通知进行闭合
+ case 'notification-touchmove':
+ let targetId = (event as any).detail.id
+ if (this.slotElements.length > 1) {
+ ;(this.slotElements as StarNotification[]).forEach(
+ (el: StarNotification) => {
+ if (el.id !== targetId && el.moveDirection == 'left') {
+ el.closeNotificationTools()
+ }
+ }
+ )
+ }
+ break
}
}
@@ -199,6 +213,33 @@ export class StarNotificationGroup extends LitElement {
})
}
+ collapseNotifications() {
+ let firstChild = this.slotElements[0] as StarNotification
+ let isShow = this.getAttribute('show') == 'true'
+ ;(this.slotElements as StarNotification[]).forEach((element) => {
+ element.closeNotificationTools()
+ })
+ if (isShow) {
+ // 当前是展开状态，点击需折叠
+ let self = this
+ firstChild.setAttribute('radiusType', 'border-radius')
+ firstChild.withArrowUp = false
+ firstChild.setAttribute('notificationType', 'more-notifiactions-first')
+ this.slotElements.forEach((element, index) => {
+ if (element !== firstChild) {
+ ;(element as StarNotification).classList.add('animation-out')
+ element.addEventListener('animationend', function tEnd() {
+ if (index == self.slotElements.length - 1) {
+ self.setAttribute('show', 'false')
+ }
+ ;(element as StarNotification).classList.remove('animation-out')
+ element.removeEventListener('animationend', tEnd)
+ })
+ }
+ })
+ }
+ }
+
static styles = css`
:host {
display: block;
@@ -241,7 +282,7 @@ export class StarNotificationGroup extends LitElement {
100% {
opacity: 0;
- scale(0.9);
+ transform: scale(0.9);
}
}
diff --git a/src/components/notification/notification.ts b/src/components/notification/notification.ts
index 3e1ea4d..9b57c09 100644
--- a/src/components/notification/notification.ts
+++ b/src/components/notification/notification.ts
@@ -7,7 +7,7 @@ import {
state,
} from 'lit/decorators.js'
import {sharedStyles} from './notificationstyle.js'
-import {StarBaseElement} from '../base'
+import {StarBaseElement} from '@star-web-components/base'
// ONE ： 单条通知，notification-group展开时第一条notification类型
// MORE ： notification-group中除第一条以外的notification类型
// MORE_FIRST: notification-group折叠时第一条notification类型
@@ -54,13 +54,14 @@ export class StarNotification extends StarBaseElement {
// 消息通知toast
@property({type: Boolean}) isToast = false
@property({type: Boolean}) btnShown = false
+ @property({type: String}) moveDirection = ''
@property({type: Number}) notificationPosition = 0
@property({type: Number}) width = 0
@property({type: Number}) widthleft = 0
@property({type: Number}) velocityThreshold = 0.8
@query('.notification') notification!: HTMLDivElement
@query('.btn-tool') btnTool!: HTMLDivElement
- @query('.arrow-up') arrowUp!: HTMLDivElement
+ @query('.arrow-up') arrowUp!: HTMLElement
@state() touchAction = {
// 触摸开始落点
start: {
@@ -91,7 +92,11 @@ export class StarNotification extends StarBaseElement {
constructor() {
super()
- this.startGestureDetector()
+ this.startGestureDetector({
+ panThreshold: 0,
+ velocityThreshold: 0,
+ holdThreshold: 150,
+ })
}
firstUpdated() {
@@ -99,7 +104,6 @@ export class StarNotification extends StarBaseElement {
this.addEventListener('swipeleft', this)
this.addEventListener('swiperight', this)
this.addEventListener('holdstart', this)
- this.addEventListener('holdmove', this)
this.addEventListener('holdend', this)
})
this.notificationPosition = this.getBoundingClientRect().right
@@ -190,7 +194,7 @@ export class StarNotification extends StarBaseElement {
${this.text}
-
+
${arrowShow}
@@ -227,7 +231,7 @@ export class StarNotification extends StarBaseElement {
${this.text}
-
+
${arrowShow}
@@ -315,7 +319,7 @@ export class StarNotification extends StarBaseElement {
${this.secondTitle}
${this.secondText}
-
${this.count}
+
${this.count}
@@ -348,32 +352,8 @@ export class StarNotification extends StarBaseElement {
let time =
this.touchAction.last.timeStamp - this.touchAction.start.timeStamp
let velocityThreshold = Math.abs(touchPosX) / time
- // if (Math.abs(touchPosX) > 266) {
- // touchPosX = 266;
- // }
-
- // this.notification.style.transform = 'translateX(' + touchPosX + 'px)';
if (touchPosX < 0) {
- // if (Math.abs(touchPosX) > 18) {
- // (this.btnTool.children[1] as HTMLElement).style.visibility = "visible";
- // }
- // if (Math.abs(touchPosX) > 142) {
- // (this.btnTool.children[0] as HTMLElement).style.visibility = "visible";
- // }
-
- // if (Math.abs(touchPosX) > 222) {
- // (this.btnTool.children[1] as HTMLElement).style.opacity = "1";
- // (this.btnTool.children[0] as HTMLElement).style.opacity = "1";
- // }
- let translateX
- if (screen.width >= 900) {
- translateX = 266
- } else if (screen.width >= 600) {
- translateX = 133
- } else {
- translateX = 88
- }
-
+ let translateX = this.notificationPosition * 0.309
let quickRemove =
!this.btnShown &&
Math.abs(touchPosX) > 1.5 * translateX &&
@@ -404,8 +384,7 @@ export class StarNotification extends StarBaseElement {
return
}
- this.notification.style.transform =
- 'translateX(-' + translateX + 'px)'
+ this.notification.style.transform = 'translateX(-30.9%)'
let self = this
this.notification.addEventListener(
'transitionend',
@@ -421,22 +400,8 @@ export class StarNotification extends StarBaseElement {
}
)
this.widthleft = this.width - translateX
+ this.moveDirection = 'left'
} else if (touchPosX > 0) {
- // if (touchPosX > 44) {
- // (this.btnTool.children[0] as any).style.opacity = 0.6;
- // }
-
- // if (touchPosX > 124) {
- // (this.btnTool.children[0] as any).style.visibility = "hidden";
- // }
-
- // if (touchPosX > 168) {
- // (this.btnTool.children[1] as any).style.opacity = 0.6;
- // }
-
- // if (touchPosX > 248) {
- // (this.btnTool.children[1] as any).style.visibility = "hidden";
- // }
this.notification.style.transform = 'translateX(' + 0 + 'px)'
let tranEnd = () => {
this.notification.removeEventListener('transitionend', tranEnd)
@@ -447,7 +412,18 @@ export class StarNotification extends StarBaseElement {
this.btnShown = false
}
this.notification.addEventListener('transitionend', tranEnd)
+ this.moveDirection = 'right'
}
+ this.dispatchEvent(
+ new CustomEvent('notification-touchmove', {
+ detail: {
+ id: this.id,
+ direction: this.moveDirection,
+ },
+ bubbles: true,
+ composed: true,
+ })
+ )
break
case 'touchend':
break
@@ -495,16 +471,41 @@ export class StarNotification extends StarBaseElement {
})
break
default:
- this.dispatchEvent(
- new CustomEvent('notification-tap', {
- detail: {
- id: self.id,
- notification: self,
- },
- bubbles: true,
- composed: true,
- })
- )
+ let boundary = this.getBoundingClientRect().right * 0.8
+ if (boundary < (event as any).clientX) {
+ this.dispatchEvent(
+ new CustomEvent('notification-tap', {
+ detail: {
+ id: self.id,
+ notification: self,
+ },
+ bubbles: true,
+ composed: true,
+ })
+ )
+ } else {
+ this.notification.classList.add('click')
+ this.notification.addEventListener(
+ 'animationend',
+ function tranEnd() {
+ self.notification.removeEventListener(
+ 'animationend',
+ tranEnd
+ )
+ self.notification.classList.remove('click')
+ self.dispatchEvent(
+ new CustomEvent('notification-click', {
+ detail: {
+ id: self.id,
+ notification: self,
+ },
+ bubbles: true,
+ composed: true,
+ })
+ )
+ }
+ )
+ }
break
}
break
@@ -559,6 +560,26 @@ export class StarNotification extends StarBaseElement {
}
}
+ closeNotificationTools() {
+ if (this.moveDirection !== 'left') {
+ return
+ }
+
+ this.notification.style.transform = 'translateX(0px)'
+ let deleteBtn = this.btnTool.children[0] as HTMLElement
+ let settingsBtn = this.btnTool.children[1] as HTMLElement
+ // let tranEnd = () => {
+ // this.notification.removeEventListener('transitionend', tranEnd)
+ if (!this.noclear) {
+ deleteBtn.style.visibility = 'hidden'
+ }
+ settingsBtn.style.visibility = 'hidden'
+ this.btnShown = false
+ this.moveDirection = 'right'
+ // }
+ // this.notification.addEventListener('transitionend', tranEnd)
+ }
+
public static override get styles(): CSSResultArray {
return [sharedStyles]
}
diff --git a/src/components/notification/notificationstyle.ts b/src/components/notification/notificationstyle.ts
index 1e17761..33e06ac 100644
--- a/src/components/notification/notificationstyle.ts
+++ b/src/components/notification/notificationstyle.ts
@@ -167,12 +167,12 @@ export const sharedStyles: CSSResult = css`
width: 90.2%;
left: 9.8%;
- top: 55.3%;
+ top: 55%;
}
.notification > div.detail .detail-content {
height: 22.4%;
- line-height: 1;
+ // line-height: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@@ -397,7 +397,7 @@ export const sharedStyles: CSSResult = css`
font-size: 2vw;
}
- .another-container .notificaiton-counts {
+ .another-container .notification-counts {
position: absolute;
text-align: center;
vertical-align: middle;
@@ -473,7 +473,7 @@ export const sharedStyles: CSSResult = css`
color: var(--single-text-color-lm);
}
- .another-container .notificaiton-counts {
+ .another-container .notification-counts {
color: var(--notification-counts-lm);
background: var(--notification-counts-background-lm);
}
@@ -496,7 +496,7 @@ export const sharedStyles: CSSResult = css`
color: var(--button-color-dm);
}
- .another-container .notificaiton-counts {
+ .another-container .notification-counts {
color: var(--notification-counts-dm);
background: var(--notification-counts-background-dm);
}
@@ -544,6 +544,22 @@ export const sharedStyles: CSSResult = css`
transform: scale(1);
}
+ .click {
+ animation: click 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
+ }
+
+ @keyframes click {
+ 0% {
+ transform: scale(0.95);
+ background: var(--notification-background-active);
+ }
+
+ 100% {
+ transform: scale(1);
+ background: var(--notification-background-lm);
+ }
+ }
+
:host(.animation-in) {
animation: show 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}