Merge pull request #219 in YR/star-web-components from fix-notification-bug to master
* commit '36d15e712cf8e005a7d086d8d3ae3274e4064d7c': #155296 - 修复通知组展开显示相关bug;修改控制图标点击事件 替换通知组件图标.适应性调整动效添加后分页涉及事件
This commit is contained in:
汪昌棋
commit
84df6ed401
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -73,6 +73,10 @@ export class StarNotificationGroup extends LitElement {
|
|||
ratio = ratio < 0 ? 0 : ratio
|
||||
this.contentOpacity = ratio
|
||||
this.containerHeight = value
|
||||
let id = window.setTimeout(() => {
|
||||
window.clearTimeout(id)
|
||||
this.dispatchEventFurther()
|
||||
}, 300)
|
||||
}
|
||||
|
||||
_singleHeight!: number
|
||||
|
|
@ -104,7 +108,11 @@ export class StarNotificationGroup extends LitElement {
|
|||
}
|
||||
|
||||
firstUpdated() {
|
||||
this.show = false
|
||||
// this.show = false
|
||||
// let id = window.setTimeout(() => {
|
||||
// window.clearTimeout(id)
|
||||
// this.dispatchEventFurther()
|
||||
// }, 300)
|
||||
}
|
||||
|
||||
@eventOptions({passive: false})
|
||||
|
|
@ -180,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(
|
||||
|
|
@ -202,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',
|
||||
|
|
@ -261,36 +273,16 @@ export class StarNotificationGroup extends LitElement {
|
|||
let isShow = this.show
|
||||
if (isShow) {
|
||||
// 当前是展开状态，点击需折叠
|
||||
let self = this
|
||||
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')
|
||||
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.dispatchEventFurther()
|
||||
}
|
||||
;(element as StarNotification).classList.remove('animation-out')
|
||||
element.removeEventListener('animationend', tEnd)
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.show = true
|
||||
this.dispatchEventFurther()
|
||||
this.slotElements.forEach((element) => {
|
||||
if (element !== firstChild) {
|
||||
;(element as StarNotification).classList.add('animation-in')
|
||||
element.addEventListener('animationend', function tEnd() {
|
||||
element.removeEventListener('animationend', tEnd)
|
||||
;(element as StarNotification).classList.remove('animation-in')
|
||||
})
|
||||
}
|
||||
})
|
||||
// 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')
|
||||
|
|
@ -326,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)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -22,8 +22,6 @@ export const sharedStyles: CSSResult = css`
|
|||
--more-text-color-lm: rgba(64, 64, 64, 0.65);
|
||||
--more-text-color-dm: rgba(224, 224, 224, 1);
|
||||
|
||||
// width: 71.7vw;
|
||||
// height: 7.9vh;
|
||||
width: calc(860px / var(--hostDevicePixelRatio));
|
||||
height: var(--auto-152px);
|
||||
display: block;
|
||||
|
|
@ -51,8 +49,7 @@ export const sharedStyles: CSSResult = css`
|
|||
|
||||
.deletebybtn {
|
||||
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
transform: opacity translateX(-2.5vw);
|
||||
// animation: notification-disappear 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
transform: opacity translateX(-2.5vmin);
|
||||
}
|
||||
|
||||
.notification[clicked] {
|
||||
|
|
@ -66,33 +63,20 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
|
||||
.top-border-radius {
|
||||
// border-top-left-radius: 1.7vw;
|
||||
// border-top-right-radius: 1.7vw;
|
||||
|
||||
border-top-left-radius: var(--auto-20px);
|
||||
border-top-right-radius: var(--auto-20px);
|
||||
}
|
||||
|
||||
.bottom-border-radius {
|
||||
// border-bottom-left-radius: 1.7vw;
|
||||
// border-bottom-right-radius: 1.7vw;
|
||||
border-bottom-left-radius: var(--auto-20px);
|
||||
border-bottom-right-radius: var(--auto-20px);
|
||||
}
|
||||
|
||||
.border-radius {
|
||||
// border-radius: 1.7vw;
|
||||
border-radius: var(--auto-20px);
|
||||
}
|
||||
|
||||
.notification > img {
|
||||
// width: 48px;
|
||||
// height: 48px;
|
||||
// pointer-events: none;
|
||||
// margin: 26px 10px 78px 26px;
|
||||
|
||||
// width: 4vw;
|
||||
// height: 4vw;
|
||||
width: var(--auto-48px);
|
||||
height: var(--auto-48px);
|
||||
position: absolute;
|
||||
|
|
@ -107,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%;
|
||||
}
|
||||
|
|
@ -123,10 +107,8 @@ export const sharedStyles: CSSResult = css`
|
|||
|
||||
// height: 28px;
|
||||
// line-height: 28px;
|
||||
// font-size: 28px;
|
||||
|
||||
line-height: 1;
|
||||
// font-size: 2.3vw;
|
||||
font-size: var(--auto-28px);
|
||||
max-width: var(--auto-640px);
|
||||
}
|
||||
|
|
@ -145,16 +127,8 @@ export const sharedStyles: CSSResult = css`
|
|||
opacity: 0.65;
|
||||
|
||||
// height: 32px;
|
||||
// right: 32px;
|
||||
// top: -4px;
|
||||
// font-size: 24px;
|
||||
// line-height: 32px;
|
||||
|
||||
// right: 10.67px;
|
||||
// top: -1.33px;
|
||||
// font-size: 2vw;
|
||||
line-height: 1;
|
||||
// right: 3.7%;
|
||||
font-size: var(--auto-24px);
|
||||
right: var(--auto-32px);
|
||||
line-height: var(--auto-24px);
|
||||
|
|
@ -180,14 +154,8 @@ export const sharedStyles: CSSResult = css`
|
|||
font-weight: 400;
|
||||
mix-blend-mode: normal;
|
||||
opacity: 0.65;
|
||||
// font-size: 2.2vw;
|
||||
|
||||
font-size: var(--auto-26px);
|
||||
max-width: var(--auto-640px);
|
||||
// width: 246px;
|
||||
// height: 11px;
|
||||
// font-size: 8px;
|
||||
// line-height: 11px;
|
||||
}
|
||||
|
||||
.notification > div.detail .arrow-up {
|
||||
|
|
@ -197,18 +165,8 @@ export const sharedStyles: CSSResult = css`
|
|||
vertical-align: middle;
|
||||
display: none;
|
||||
|
||||
// width: 56px;
|
||||
// height: 34px;
|
||||
// right: 26px;
|
||||
// bottom: 30px;
|
||||
// line-height: 34px;
|
||||
// border-radius: 189px;
|
||||
|
||||
// height: 1.8vh;
|
||||
// width: 4.7vw;
|
||||
right: 3%;
|
||||
bottom: 19.7%;
|
||||
// border-radius: 15.75vw;
|
||||
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
|
@ -220,22 +178,18 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
|
||||
.notification > div.detail .arrow-up::after {
|
||||
font-family: 'gaia-icons';
|
||||
font-family: 'star-icons';
|
||||
content: attr(data-icon);
|
||||
font-style: normal;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-weight: 500;
|
||||
font-size: 1.33vw;
|
||||
|
||||
// font-size: 35px;
|
||||
// font-size: 12px;
|
||||
|
||||
width: 1.33vw;
|
||||
height: 1.33vw;
|
||||
|
||||
width: var(--auto-16px);
|
||||
height: var(--auto-16px);
|
||||
font-size: var(--auto-16px);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.one,
|
||||
|
|
@ -271,15 +225,11 @@ export const sharedStyles: CSSResult = css`
|
|||
border-radius: 50%;
|
||||
opacity: 0.6;
|
||||
transition: transform 0.1s;
|
||||
width: 6.7vw;
|
||||
height: 6.7vw;
|
||||
|
||||
width: var(--auto-80px);
|
||||
height: var(--auto-80px);
|
||||
}
|
||||
|
||||
.btn-tool > div:first-child {
|
||||
// margin-right: 3.7vw;
|
||||
margin-right: calc(44px / var(--hostDevicePixelRatio));
|
||||
visibility: hidden;
|
||||
}
|
||||
|
|
@ -299,7 +249,7 @@ export const sharedStyles: CSSResult = css`
|
|||
text-align: center;
|
||||
vertical-align: middle;
|
||||
content: attr(data-icon);
|
||||
font-family: gaia-icons;
|
||||
font-family: 'star-icons';
|
||||
font-style: normal;
|
||||
text-rendering: optimizelegibility;
|
||||
font-weight: 500;
|
||||
|
|
@ -307,11 +257,7 @@ export const sharedStyles: CSSResult = css`
|
|||
// width: 32px;
|
||||
// height: 32px;
|
||||
// line-height: 32px;
|
||||
// font-size: 32px;
|
||||
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
// font-size: 2.7vw;
|
||||
font-size: var(--auto-32px);
|
||||
}
|
||||
|
||||
|
|
@ -334,15 +280,6 @@ export const sharedStyles: CSSResult = css`
|
|||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
// height: 28px;
|
||||
// line-height: 28px;
|
||||
// font-size: 28px;
|
||||
|
||||
// height: 18.4%;
|
||||
// line-height: 1;
|
||||
// font-size: 1.45vh;
|
||||
// font-size: 2.3vw;
|
||||
font-size: var(--auto-28px);
|
||||
line-height: var(--auto-38px);
|
||||
height: var(--auto-38px);
|
||||
|
|
@ -377,17 +314,7 @@ export const sharedStyles: CSSResult = css`
|
|||
text-overflow: ellipsis;
|
||||
max-width: 40%;
|
||||
|
||||
// height: 34px;
|
||||
// line-height: 34px;
|
||||
// left: 24px;
|
||||
// top: -3px;
|
||||
// font-size: 26px;
|
||||
|
||||
left: 0.93%;
|
||||
// top: -3px;
|
||||
// top: -2%;
|
||||
// top: -0.16vh;
|
||||
// font-size: 1.35vh;
|
||||
font-size: var(--auto-26px);
|
||||
}
|
||||
|
||||
|
|
@ -404,24 +331,9 @@ export const sharedStyles: CSSResult = css`
|
|||
text-align: right;
|
||||
mix-blend-mode: normal;
|
||||
opacity: 0.65;
|
||||
|
||||
// height: 34px;
|
||||
// right: 34px;
|
||||
// top: -4px;
|
||||
// font-size: 24px;
|
||||
// line-height: 32px;
|
||||
|
||||
// height: 11px;
|
||||
// right: 11px;
|
||||
// top: -1px;
|
||||
// font-size: 8px;
|
||||
// line-height: 11px;
|
||||
|
||||
// height: 1.8vh;
|
||||
height: var(--auto-34px);
|
||||
right: var(--auto-32px);
|
||||
line-height: var(--auto-34px);
|
||||
// font-size: 2vw;
|
||||
font-size: var(--auto-24px);
|
||||
}
|
||||
|
||||
|
|
@ -430,31 +342,12 @@ export const sharedStyles: CSSResult = css`
|
|||
text-align: center;
|
||||
vertical-align: middle;
|
||||
opacity: 0.55;
|
||||
|
||||
// width: 56px;
|
||||
// height: 34px;
|
||||
// right: 26px;
|
||||
// bottom: 30px;
|
||||
// top: -1px;
|
||||
// line-height: 34px;
|
||||
// font-size: 20px;
|
||||
// border-radius: 189px;
|
||||
|
||||
// width: 4.7vw;
|
||||
// height: 1.8vh;
|
||||
// right: 3%;
|
||||
// bottom: 19.7%;
|
||||
// border-radius: 15.75vw;
|
||||
// top: -0.08vw;
|
||||
// font-size: 1.7vw;
|
||||
// line-height: 1.8vh;
|
||||
|
||||
width: var(--auto-56px);
|
||||
height: var(--auto-34px);
|
||||
right: 3%;
|
||||
bottom: 19.7%;
|
||||
border-radius: calc(189px / var(--hostDevicePixelRatio));
|
||||
top: -0.08vw;
|
||||
top: -0.08vmin;
|
||||
font-size: var(--auto-20px);
|
||||
line-height: var(--auto-34px);
|
||||
vertical-align: middle;
|
||||
|
|
@ -486,7 +379,7 @@ export const sharedStyles: CSSResult = css`
|
|||
text-align: center;
|
||||
vertical-align: middle;
|
||||
content: attr(data-icon);
|
||||
font-family: 'gaia-icons';
|
||||
font-family: 'star-icons';
|
||||
font-style: normal;
|
||||
font-size: var(--auto-48px);
|
||||
text-rendering: optimizelegibility;
|
||||
|
|
@ -638,16 +531,6 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes notification-disappear {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.click-start {
|
||||
transition: transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
transform: scale(0.95);
|
||||
|
|
@ -674,22 +557,4 @@ export const sharedStyles: CSSResult = css`
|
|||
background: var(--notification-background-lm);
|
||||
}
|
||||
}
|
||||
|
||||
:host(.animation-in) {
|
||||
animation: show 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
:host(.animation-out) {
|
||||
animation: notification-disappear 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
|||
Loading…
Reference in New Issue