BUG: #151446、#149340、#149339、#149338、#149337、#149335、#149336、#149311(调整UI,添加通知折叠、隐藏工具按钮功能)

src/components/header-bar/header-bar.ts

@@ -18,7 +18,7 @@ export class HeaderBar extends LitElement {
   getTime(): HTMLTemplateResult {
     return html`
       <div class="time-outer">
-        <div id="time"></div>
+        <div id="time" @click=${this}></div>
         <div class="time-icons">
           <slot></slot>
         </div>

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

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,

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);
       }
     }
 

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 {
             </div>
             <div class="detail">
               <div class="detail-content" dir="auto">${this.text}</div>
-              <span class="arrow-up" data-icon="o"></span>
+              <span class="arrow-up" data-icon="arrow-up"></span>
               ${arrowShow}
             </div>
           </div>
@@ -227,7 +231,7 @@ export class StarNotification extends StarBaseElement {
             </div>
             <div class="detail">
               <div class="detail-content" dir="auto">${this.text}</div>
-              <span class="arrow-up" data-icon="o"></span>
+              <span class="arrow-up" data-icon="arrow-up"></span>
               ${arrowShow}
             </div>
           </div>
@@ -315,7 +319,7 @@ export class StarNotification extends StarBaseElement {
           <div class="container another-container">
             <div class="title" dir="auto">${this.secondTitle}</div>
             <div class="detail-content" dir="auto">${this.secondText}</div>
-            <span class="notificaiton-counts">${this.count}</span>
+            <span class="notification-counts">${this.count}</span>
           </div>
         </div>
         <div class="btn-tool">
@@ -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) {
+            let translateX = this.notificationPosition * 0.309
-            //   (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 quickRemove =
               !this.btnShown &&
               Math.abs(touchPosX) > 1.5 * translateX &&
@@ -404,8 +384,7 @@ export class StarNotification extends StarBaseElement {
               return
             }
 
-            this.notification.style.transform =
+            this.notification.style.transform = 'translateX(-30.9%)'
-              'translateX(-' + translateX + 'px)'
             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(
+              let boundary = this.getBoundingClientRect().right * 0.8
-                new CustomEvent('notification-tap', {
+              if (boundary < (event as any).clientX) {
-                  detail: {
+                this.dispatchEvent(
-                    id: self.id,
+                  new CustomEvent('notification-tap', {
-                    notification: self,
+                    detail: {
-                  },
+                      id: self.id,
-                  bubbles: true,
+                      notification: self,
-                  composed: true,
+                    },
-                })
+                    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]
   }

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);
   }