openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
wurou 2022-10-10 16:43:54 +08:00
parent aff29b1d8b
commit 20de4e176c
4 changed files with 82 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/brightness-slider/brightness-slider.ts
View File

@ -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', {
detail: {
value: this.value,
},
bubbles: true,
composed: true,
})
)
if (preValue !== this.value) {
this.dispatchEvent(
new CustomEvent('brightness-slider-change', {
detail: {
value: this.value,
},
bubbles: true,
composed: true,
})
)
}
break
}
}

39
src/components/header-bar/header-bar.ts
View File

@ -289,31 +289,9 @@ export class HeaderBar extends LitElement {
getWeekDay() {
var d = new Date()
let daynumber = d.getDay()
let day = ''
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
}
let day = d.toLocaleString(navigator.languages as string[], {
weekday: 'short',
})
return day
}
@ -326,8 +304,8 @@ export class HeaderBar extends LitElement {
} else {
return d.toLocaleString(navigator.languages as string[], {
// year: 'numeric',
month: 'long',
day: '2-digit',
month: 'short',
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}`

5
src/components/icon-control-bar/icon-control-bar.ts
View File

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

85
src/components/notification/notification.ts
View File

@ -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'
;(this.btnTool.children[1] as any).style.visibility = 'hidden'
deleteBtn.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')
window.setTimeout(() => {
;(event.target as HTMLElement).removeAttribute('clicked')
this.dispatchEvent(
target.setAttribute('clicked', 'true')
target.addEventListener('transitionend', function tranEnd() {
target.removeEventListener('transitionend', tranEnd)
target.removeAttribute('clicked')
self.dispatchEvent(
new CustomEvent('notification-delete', {
detail: {
id: this.id,
notification: this,
id: self.id,
notification: self,
},
bubbles: true,
composed: true,
})
)
}, 100)
})
break
case 'settings':
;(event.target as HTMLElement).setAttribute('clicked', 'true')
window.setTimeout(() => {
this.dispatchEvent(
target.setAttribute('clicked', 'true')
target.addEventListener('transitionend', function tranEnd() {
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.removeAttribute('clicked')
this.dispatchEvent(
new CustomEvent('notification-click', {
detail: {
id: this.id,
notification: this,
},
bubbles: true,
composed: true,
})
)
}, 100)
this.notification.addEventListener(
'transitionend',
function tranEnd() {
self.notification.removeEventListener('transitionend', tranEnd)
self.notification.removeAttribute('clicked')
self.dispatchEvent(
new CustomEvent('notification-click', {
detail: {
id: self.id,
notification: self,
},
bubbles: true,
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] {