#155296 - 修复通知组展开显示相关bug;修改控制图标点击事件

src/components/brightness-slider/brightness-slider.ts

@@ -18,8 +18,8 @@ export class BrightnessSlider extends StarBaseElement {
   @property({type: Number}) currentDistance = 0
   @property({type: Number}) barWidth = 0
   @property({type: Number}) max = 100
-  @property({type: Number}) min = 1
-  @property({type: Number}) _value = 1
+  @property({type: Number}) min = 0
+  @property({type: Number}) _value = 0
   @property({type: Number}) progressLen = 0
   @property() touchAction = {
     // 触摸开始落点
@@ -55,15 +55,15 @@ export class BrightnessSlider extends StarBaseElement {
   }
 
   set value(value: number) {
-    if (value == this.min) {
-      // 最低亮度限制
-      this.coverLen = '0'
-      this._value = this.min
-    } else {
-      this._value = value
-      let len = Math.round((value * this.barWidth) / this.max)
-      this.coverLen = len.toString()
-    }
+    // if (value == this.min) {
+    //   // 最低亮度限制
+    //   this.coverLen = '0'
+    //   this._value = this.min
+    // } else {
+    this._value = value
+    let len = Math.round((value * this.barWidth) / this.max)
+    this.coverLen = len.toString()
+    // }
   }
 
   render(): HTMLTemplateResult {
@@ -103,7 +103,7 @@ export class BrightnessSlider extends StarBaseElement {
           this.touchAction.last.clientX - this.touchAction.start.clientX
         this.currentDistance = this.distance + this.progressLen
 
-        if (this.currentDistance < Math.round(this.barWidth / this.max)) {
+        if (this.currentDistance < 0) {
           this.currentDistance = 0
         }
 
@@ -118,9 +118,9 @@ export class BrightnessSlider extends StarBaseElement {
           (this.currentDistance * this.max) / this.barWidth
         )
 
-        if (this.value < this.min) {
-          this.value = this.min
-        }
+        // if (this.value < this.min) {
+        //   this.value = this.min
+        // }
 
         if (preValue !== this.value) {
           this.dispatchEvent(

src/components/icon-control-bar/icon-control-bar.ts

@@ -76,8 +76,6 @@ export class IconControlBar extends StarBaseElement {
         class="icon-button icon-base without-border"
         data-icon=${this.icon}
         @click=${this}
-        @touchstart=${this}
-        @touchend=${this}
       ></div>
     `
   }
@@ -157,6 +155,7 @@ export class IconControlBar extends StarBaseElement {
       isActive = target.classList.contains('active')
       this.activeOrInactive(isActive, target)
       this.fireEvent(isActive)
+      return
     }
 
     // if (this.type == IconControlBarType.WITH_STATE) {
@@ -176,6 +175,8 @@ export class IconControlBar extends StarBaseElement {
         this.iconBtn.classList.remove('actived')
         this.fireEvent()
       }, 200)
+    } else {
+      this.fireEvent()
     }
   }
 

src/components/notification-group/notification-group.ts

@@ -108,11 +108,11 @@ export class StarNotificationGroup extends LitElement {
   }
 
   firstUpdated() {
-    this.show = false
-    let id = window.setTimeout(() => {
-      window.clearTimeout(id)
-      this.dispatchEventFurther()
-    }, 300)
+    // this.show = false
+    // let id = window.setTimeout(() => {
+    //   window.clearTimeout(id)
+    //   this.dispatchEventFurther()
+    // }, 300)
   }
 
   @eventOptions({passive: false})
@@ -188,6 +188,8 @@ export class StarNotificationGroup extends LitElement {
       let firstChild = slotElements[0] as StarNotification
       firstChild.count = slotLen
 
+      let style = window.getComputedStyle(firstChild).height
+      this._singleHeight = parseInt(style.split('px')[0])
       if (slotLen == 1) {
         // group中只有一条消息，应该转为'one-notification'类型，并折叠
         firstChild.setAttribute(
@@ -210,6 +212,8 @@ export class StarNotificationGroup extends LitElement {
         } else {
           // 折叠
           this.addGroupHeight(0)
+          // this.style.setProperty('--single-noti-bgc', 'var(--notification-bgc)')
+          // this.setAttribute('removeBackground', 'true')
           firstChild.setAttribute('radiusType', 'border-radius')
           firstChild.setAttribute(
             'notificationType',
@@ -270,11 +274,15 @@ export class StarNotificationGroup extends LitElement {
     if (isShow) {
       // 当前是展开状态，点击需折叠
       this.show = false
+      // this.style.setProperty('--single-noti-bgc', 'var(--notification-bgc)')
+      // this.setAttribute('removeBackground', 'true')
       firstChild.setAttribute('radiusType', 'border-radius')
       firstChild.withArrowUp = false
       firstChild.setAttribute('notificationType', 'more-notifiactions-first')
     } else {
       this.show = true
+      // this.style.setProperty('--single-noti-bgc', 'transparent')
+      // this.setAttribute('removeBackground', 'false')
       firstChild.setAttribute('radiusType', 'top-border-radius')
       firstChild.withArrowUp = true
       firstChild.setAttribute('notificationType', 'more-notifiactions')
@@ -310,23 +318,11 @@ export class StarNotificationGroup extends LitElement {
     })
     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.show = false
-              self.preventDefaultBehavior(true)
-            }
-            ;(element as StarNotification).classList.remove('animation-out')
-            element.removeEventListener('animationend', tEnd)
-          })
-        }
-      })
+      this.show = false
+      this.preventDefaultBehavior(true)
     }
   }
 

src/components/notification/notification.ts

@@ -349,7 +349,7 @@ export class StarNotification extends StarBaseElement {
           role="link"
           data-id=${this.data_id}
         >
-          <div data-icon="bluetooth-transfer-circle" aria-hidden="true"></div>
+          <div data-icon="bluetooth-transfer" aria-hidden="true"></div>
           <div class="bluetooth-title">${this.title}</div>
           <progress value="${this.value}" max="1"></progress>
           <div class="transfer-detail">

src/components/notification/notificationstyle.ts

@@ -91,7 +91,7 @@ export const sharedStyles: CSSResult = css`
     font-family: 'OPPOSans';
     font-style: normal;
     width: 90.2%;
-    height: 18.4%;
+    height: 22%;
     left: 9.8%;
     top: 24%;
   }