优化notification等组件,修复点击brightnessSlider黑屏的bug

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

@@ -173,6 +173,7 @@ export class BrightnessSlider extends LitElement {
         this.progressLen =
           this.touchAction.start.clientX -
           this.sliderBar.getBoundingClientRect().left
+        this.currentDistance = this.progressLen
         break
       case 'touchmove':
         event.preventDefault()
@@ -190,18 +191,22 @@ export class BrightnessSlider extends LitElement {
         this.coverLen = this.currentDistance.toString()
         break
       case 'touchend':
+        let preValue = this.value
         this.value = Math.round(
           (this.currentDistance * this.max) / this.barWidth
         )
-        this.dispatchEvent(
+
-          new CustomEvent('brightness-slider-change', {
+        if (preValue !== this.value) {
-            detail: {
+          this.dispatchEvent(
-              value: this.value,
+            new CustomEvent('brightness-slider-change', {
-            },
+              detail: {
-            bubbles: true,
+                value: this.value,
-            composed: true,
+              },
-          })
+              bubbles: true,
-        )
+              composed: true,
+            })
+          )
+        }
         break
     }
   }

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

@@ -289,31 +289,9 @@ export class HeaderBar extends LitElement {
 
   getWeekDay() {
     var d = new Date()
-    let daynumber = d.getDay()
+    let day = d.toLocaleString(navigator.languages as string[], {
-    let day = ''
+      weekday: 'short',
-    switch (daynumber) {
+    })
-      case 0:
-        day = '周日'
-        break
-      case 1:
-        day = '周一'
-        break
-      case 2:
-        day = '周二'
-        break
-      case 3:
-        day = '周三'
-        break
-      case 4:
-        day = '周四'
-        break
-      case 5:
-        day = '周五'
-        break
-      case 6:
-        day = '周六'
-        break
-    }
     return day
   }
 
@@ -326,8 +304,8 @@ export class HeaderBar extends LitElement {
       } else {
         return d.toLocaleString(navigator.languages as string[], {
           // year: 'numeric',
-          month: 'long',
+          month: 'short',
-          day: '2-digit',
+          day: 'numeric',
         })
       }
     } else {
@@ -350,8 +328,13 @@ export class HeaderBar extends LitElement {
           hour: 'numeric',
           minute: 'numeric',
         })
+
         if ((navigator as any).mozHour12) {
-          d = d.slice(2)
+          if (d.includes('M')) {
+            d = d.slice(0, -2)
+          } else {
+            d = d.slice(2)
+          }
         }
         if (d.indexOf(':') === 1) {
           d = `0${d}`

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

@@ -336,6 +336,11 @@ export class IconControlBar extends LitElement {
       color: var(--text-color-lm);
     }
 
+    .more-info-icon {
+      display: flex;
+      align-items: center;
+    }
+
     .icon-base {
       justify-content: center;
     }

src/components/notification/notification.ts

@@ -256,6 +256,9 @@ export class StarNotification extends LitElement {
         this.btnTool.style.visibility = 'visiable'
         break
       case 'touchmove':
+        event.preventDefault()
+        let deleteBtn = this.btnTool.children[0] as HTMLElement
+        let settingsBtn = this.btnTool.children[1] as HTMLElement
         this.touchAction.last.clientX = event.touches[0].clientX
         let touchPosX =
           this.touchAction.last.clientX - this.touchAction.start.clientX
@@ -276,12 +279,6 @@ export class StarNotification extends LitElement {
           //   (this.btnTool.children[1] as HTMLElement).style.opacity = "1";
           //   (this.btnTool.children[0] as HTMLElement).style.opacity = "1";
           // }
-          ;(this.btnTool.children[0] as HTMLElement).style.visibility =
-            'visible'
-          ;(this.btnTool.children[1] as HTMLElement).style.visibility =
-            'visible'
-          ;(this.btnTool.children[0] as HTMLElement).style.opacity = '1'
-          ;(this.btnTool.children[1] as HTMLElement).style.opacity = '1'
           let translateX
           if (screen.width >= 900) {
             translateX = 266
@@ -292,6 +289,17 @@ export class StarNotification extends LitElement {
           }
           this.notification.style.transform =
             'translateX(-' + translateX + 'px)'
+          let self = this
+          this.notification.addEventListener(
+            'transitionend',
+            function tranEnd() {
+              self.notification.removeEventListener('transitionend', tranEnd)
+              deleteBtn.style.visibility = 'visible'
+              settingsBtn.style.visibility = 'visible'
+              deleteBtn.style.opacity = '1'
+              settingsBtn.style.opacity = '1'
+            }
+          )
         } else if (touchPosX > 0) {
           // if (touchPosX > 44) {
           //   (this.btnTool.children[0] as any).style.opacity = 0.6;
@@ -308,8 +316,8 @@ export class StarNotification extends LitElement {
           // if (touchPosX > 248) {
           //   (this.btnTool.children[1] as any).style.visibility = "hidden";
           // }
-          ;(this.btnTool.children[0] as any).style.visibility = 'hidden'
+          deleteBtn.style.visibility = 'hidden'
-          ;(this.btnTool.children[1] as any).style.visibility = 'hidden'
+          settingsBtn.style.visibility = 'hidden'
           this.notification.style.transform = 'translateX(' + 0 + 'px)'
         }
         break
@@ -317,49 +325,58 @@ export class StarNotification extends LitElement {
         break
       case 'click':
         event.stopPropagation()
-        switch ((event.target as HTMLElement).dataset.icon) {
+        let self = this
+        let target = event.target as HTMLElement
+        switch (target.dataset.icon) {
           case 'delete':
-            ;(event.target as HTMLElement).setAttribute('clicked', 'true')
+            target.setAttribute('clicked', 'true')
-            window.setTimeout(() => {
+            target.addEventListener('transitionend', function tranEnd() {
-              ;(event.target as HTMLElement).removeAttribute('clicked')
+              target.removeEventListener('transitionend', tranEnd)
-              this.dispatchEvent(
+              target.removeAttribute('clicked')
+              self.dispatchEvent(
                 new CustomEvent('notification-delete', {
                   detail: {
-                    id: this.id,
+                    id: self.id,
-                    notification: this,
+                    notification: self,
                   },
                   bubbles: true,
                   composed: true,
                 })
               )
-            }, 100)
+            })
             break
           case 'settings':
-            ;(event.target as HTMLElement).setAttribute('clicked', 'true')
+            target.setAttribute('clicked', 'true')
-            window.setTimeout(() => {
+            target.addEventListener('transitionend', function tranEnd() {
-              this.dispatchEvent(
+              target.removeEventListener('transitionend', tranEnd)
+              target.removeAttribute('clicked')
+              self.dispatchEvent(
                 new CustomEvent('notification-settings-configure', {
                   bubbles: true,
                   composed: true,
                 })
               )
-            }, 100)
+            })
             break
           default:
             this.notification.setAttribute('clicked', 'true')
-            window.setTimeout(() => {
+            this.notification.addEventListener(
-              this.notification.removeAttribute('clicked')
+              'transitionend',
-              this.dispatchEvent(
+              function tranEnd() {
-                new CustomEvent('notification-click', {
+                self.notification.removeEventListener('transitionend', tranEnd)
-                  detail: {
+                self.notification.removeAttribute('clicked')
-                    id: this.id,
+                self.dispatchEvent(
-                    notification: this,
+                  new CustomEvent('notification-click', {
-                  },
+                    detail: {
-                  bubbles: true,
+                      id: self.id,
-                  composed: true,
+                      notification: self,
-                })
+                    },
-              )
+                    bubbles: true,
-            }, 100)
+                    composed: true,
+                  })
+                )
+              }
+            )
             break
         }
         break
@@ -389,6 +406,7 @@ export class StarNotification extends LitElement {
     }
 
     .notification[clicked] {
+      transition: transform 0.1s;
       transform: scale(0.9);
       background: var(--notification-background-active);
     }
@@ -485,6 +503,7 @@ export class StarNotification extends LitElement {
       background: var(--button-background-color-lm);
       border-radius: 50%;
       opacity: 0.6;
+      transition: transform 0.1s;
     }
 
     .btn-tool > div[clicked] {