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

替换通知组件图标.适应性调整动效添加后分页涉及事件

This commit is contained in:
wurou 2023-01-04 16:57:13 +08:00
parent d3327c5809
commit 88ef6e4f67
2 changed files with 17 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/notification-group/notification-group.ts
View File

@ -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
@ -105,6 +109,10 @@ export class StarNotificationGroup extends LitElement {
firstUpdated() {
this.show = false
let id = window.setTimeout(() => {
window.clearTimeout(id)
this.dispatchEventFurther()
}, 300)
}
@eventOptions({passive: false})
@ -261,36 +269,12 @@ export class StarNotificationGroup extends LitElement {
let isShow = this.show
if (isShow) {
// 当前是展开状态，点击需折叠
let self = this
this.show = false
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')
})
}
})
firstChild.setAttribute('radiusType', 'top-border-radius')
firstChild.withArrowUp = true
firstChild.setAttribute('notificationType', 'more-notifiactions')

153
src/components/notification/notificationstyle.ts
View File

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