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

BUG: #151446、#149340、#149339、#149338、#149337、#149335、#149336、#149311(调整UI,添加通知折叠、隐藏工具按钮功能)

This commit is contained in:
wurou 2022-12-06 20:08:13 +08:00
parent 538cfa5434
commit 82317fd0af
6 changed files with 167 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,7 @@ export class HeaderBar extends LitElement {
getTime(): HTMLTemplateResult {
return html`
<div class="time-outer">
<div id="time"></div>
<div id="time" @click=${this}></div>
<div class="time-icons">
<slot></slot>
</div>

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

@ -32,6 +32,7 @@ export class IconControlBar extends LitElement {
@property({type: Boolean}) active = false
@property({type: Boolean}) longPress = false
@property({type: Boolean}) isNameShown = false
@property({type: String}) section = ''
@state({}) timer!: number
@query('.more-info-icon') moreInfoIcon!: HTMLDivElement

26
src/components/icon-control-bar/iconstyle.ts
View File

@ -13,7 +13,25 @@ export const sharedStyles: CSSResult = css`
.active {
background-color: var(--background-active) !important;
color: var(--text-color-active) !important;
transform: scale(0.9);
// transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
// transform: scale(0.9);
animation: scaleAnimation 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@keyframes scaleAnimation {
0% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
.inactive {
// transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
// transform: scale(0.9);
animation: scaleAnimation 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.with-border {
@ -39,7 +57,7 @@ export const sharedStyles: CSSResult = css`
text-align: center;
vertical-align: middle;
content: attr(data-icon);
font-family: gaia-icons;
font-family: 'gaia-icons';
font-style: normal;
text-rendering: optimizelegibility;
font-weight: 500;
@ -75,9 +93,9 @@ export const sharedStyles: CSSResult = css`
font-style: normal;
mix-blend-mode: normal;
width: 8.3vw;
height: 1vh;
// height: 1vh;
font-size: 1.75vw;
line-height: 1.7vw;
// line-height: 1.7vw;
}
.icon-name-shown,

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

@ -18,6 +18,7 @@ export class StarNotificationGroup extends LitElement {
connectedCallback() {
super.connectedCallback()
window.addEventListener('notification-delete', this)
window.addEventListener('notification-touchmove', this)
}
firstUpdated() {
@ -59,6 +60,19 @@ export class StarNotificationGroup extends LitElement {
}
)
break
// 左滑通知时，对未闭合操作按钮的其它通知进行闭合
case 'notification-touchmove':
let targetId = (event as any).detail.id
if (this.slotElements.length > 1) {
;(this.slotElements as StarNotification[]).forEach(
(el: StarNotification) => {
if (el.id !== targetId && el.moveDirection == 'left') {
el.closeNotificationTools()
}
}
)
}
break
}
}
@ -199,6 +213,33 @@ export class StarNotificationGroup extends LitElement {
})
}
collapseNotifications() {
let firstChild = this.slotElements[0] as StarNotification
let isShow = this.getAttribute('show') == 'true'
;(this.slotElements as StarNotification[]).forEach((element) => {
element.closeNotificationTools()
})
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.setAttribute('show', 'false')
}
;(element as StarNotification).classList.remove('animation-out')
element.removeEventListener('animationend', tEnd)
})
}
})
}
}
static styles = css`
:host {
display: block;
@ -241,7 +282,7 @@ export class StarNotificationGroup extends LitElement {
100% {
opacity: 0;
scale(0.9);
transform: scale(0.9);
}
}

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

@ -7,7 +7,7 @@ import {
state,
} from 'lit/decorators.js'
import {sharedStyles} from './notificationstyle.js'
import {StarBaseElement} from '../base'
import {StarBaseElement} from '@star-web-components/base'
// ONE ： 单条通知，notification-group展开时第一条notification类型
// MORE ： notification-group中除第一条以外的notification类型
// MORE_FIRST: notification-group折叠时第一条notification类型
@ -54,13 +54,14 @@ export class StarNotification extends StarBaseElement {
// 消息通知toast
@property({type: Boolean}) isToast = false
@property({type: Boolean}) btnShown = false
@property({type: String}) moveDirection = ''
@property({type: Number}) notificationPosition = 0
@property({type: Number}) width = 0
@property({type: Number}) widthleft = 0
@property({type: Number}) velocityThreshold = 0.8
@query('.notification') notification!: HTMLDivElement
@query('.btn-tool') btnTool!: HTMLDivElement
@query('.arrow-up') arrowUp!: HTMLDivElement
@query('.arrow-up') arrowUp!: HTMLElement
@state() touchAction = {
// 触摸开始落点
start: {
@ -91,7 +92,11 @@ export class StarNotification extends StarBaseElement {
constructor() {
super()
this.startGestureDetector()
this.startGestureDetector({
panThreshold: 0,
velocityThreshold: 0,
holdThreshold: 150,
})
}
firstUpdated() {
@ -99,7 +104,6 @@ export class StarNotification extends StarBaseElement {
this.addEventListener('swipeleft', this)
this.addEventListener('swiperight', this)
this.addEventListener('holdstart', this)
this.addEventListener('holdmove', this)
this.addEventListener('holdend', this)
})
this.notificationPosition = this.getBoundingClientRect().right
@ -190,7 +194,7 @@ export class StarNotification extends StarBaseElement {
</div>
<div class="detail">
<div class="detail-content" dir="auto">${this.text}</div>
<span class="arrow-up" data-icon="o"></span>
<span class="arrow-up" data-icon="arrow-up"></span>
${arrowShow}
</div>
</div>
@ -227,7 +231,7 @@ export class StarNotification extends StarBaseElement {
</div>
<div class="detail">
<div class="detail-content" dir="auto">${this.text}</div>
<span class="arrow-up" data-icon="o"></span>
<span class="arrow-up" data-icon="arrow-up"></span>
${arrowShow}
</div>
</div>
@ -315,7 +319,7 @@ export class StarNotification extends StarBaseElement {
<div class="container another-container">
<div class="title" dir="auto">${this.secondTitle}</div>
<div class="detail-content" dir="auto">${this.secondText}</div>
<span class="notificaiton-counts">${this.count}</span>
<span class="notification-counts">${this.count}</span>
</div>
</div>
<div class="btn-tool">
@ -348,32 +352,8 @@ export class StarNotification extends StarBaseElement {
let time =
this.touchAction.last.timeStamp - this.touchAction.start.timeStamp
let velocityThreshold = Math.abs(touchPosX) / time
// if (Math.abs(touchPosX) > 266) {
// touchPosX = 266;
// }
// this.notification.style.transform = 'translateX(' + touchPosX + 'px)';
if (touchPosX < 0) {
// if (Math.abs(touchPosX) > 18) {
// (this.btnTool.children[1] as HTMLElement).style.visibility = "visible";
// }
// if (Math.abs(touchPosX) > 142) {
// (this.btnTool.children[0] as HTMLElement).style.visibility = "visible";
// }
// if (Math.abs(touchPosX) > 222) {
// (this.btnTool.children[1] as HTMLElement).style.opacity = "1";
// (this.btnTool.children[0] as HTMLElement).style.opacity = "1";
// }
let translateX
if (screen.width >= 900) {
translateX = 266
} else if (screen.width >= 600) {
translateX = 133
} else {
translateX = 88
}
let translateX = this.notificationPosition * 0.309
let quickRemove =
!this.btnShown &&
Math.abs(touchPosX) > 1.5 * translateX &&
@ -404,8 +384,7 @@ export class StarNotification extends StarBaseElement {
return
}
this.notification.style.transform =
'translateX(-' + translateX + 'px)'
this.notification.style.transform = 'translateX(-30.9%)'
let self = this
this.notification.addEventListener(
'transitionend',
@ -421,22 +400,8 @@ export class StarNotification extends StarBaseElement {
}
)
this.widthleft = this.width - translateX
this.moveDirection = 'left'
} else if (touchPosX > 0) {
// if (touchPosX > 44) {
// (this.btnTool.children[0] as any).style.opacity = 0.6;
// }
// if (touchPosX > 124) {
// (this.btnTool.children[0] as any).style.visibility = "hidden";
// }
// if (touchPosX > 168) {
// (this.btnTool.children[1] as any).style.opacity = 0.6;
// }
// if (touchPosX > 248) {
// (this.btnTool.children[1] as any).style.visibility = "hidden";
// }
this.notification.style.transform = 'translateX(' + 0 + 'px)'
let tranEnd = () => {
this.notification.removeEventListener('transitionend', tranEnd)
@ -447,7 +412,18 @@ export class StarNotification extends StarBaseElement {
this.btnShown = false
}
this.notification.addEventListener('transitionend', tranEnd)
this.moveDirection = 'right'
}
this.dispatchEvent(
new CustomEvent('notification-touchmove', {
detail: {
id: this.id,
direction: this.moveDirection,
},
bubbles: true,
composed: true,
})
)
break
case 'touchend':
break
@ -495,16 +471,41 @@ export class StarNotification extends StarBaseElement {
})
break
default:
this.dispatchEvent(
new CustomEvent('notification-tap', {
detail: {
id: self.id,
notification: self,
},
bubbles: true,
composed: true,
})
)
let boundary = this.getBoundingClientRect().right * 0.8
if (boundary < (event as any).clientX) {
this.dispatchEvent(
new CustomEvent('notification-tap', {
detail: {
id: self.id,
notification: self,
},
bubbles: true,
composed: true,
})
)
} else {
this.notification.classList.add('click')
this.notification.addEventListener(
'animationend',
function tranEnd() {
self.notification.removeEventListener(
'animationend',
tranEnd
)
self.notification.classList.remove('click')
self.dispatchEvent(
new CustomEvent('notification-click', {
detail: {
id: self.id,
notification: self,
},
bubbles: true,
composed: true,
})
)
}
)
}
break
}
break
@ -559,6 +560,26 @@ export class StarNotification extends StarBaseElement {
}
}
closeNotificationTools() {
if (this.moveDirection !== 'left') {
return
}
this.notification.style.transform = 'translateX(0px)'
let deleteBtn = this.btnTool.children[0] as HTMLElement
let settingsBtn = this.btnTool.children[1] as HTMLElement
// let tranEnd = () => {
// this.notification.removeEventListener('transitionend', tranEnd)
if (!this.noclear) {
deleteBtn.style.visibility = 'hidden'
}
settingsBtn.style.visibility = 'hidden'
this.btnShown = false
this.moveDirection = 'right'
// }
// this.notification.addEventListener('transitionend', tranEnd)
}
public static override get styles(): CSSResultArray {
return [sharedStyles]
}

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

@ -167,12 +167,12 @@ export const sharedStyles: CSSResult = css`
width: 90.2%;
left: 9.8%;
top: 55.3%;
top: 55%;
}
.notification > div.detail .detail-content {
height: 22.4%;
line-height: 1;
// line-height: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -397,7 +397,7 @@ export const sharedStyles: CSSResult = css`
font-size: 2vw;
}
.another-container .notificaiton-counts {
.another-container .notification-counts {
position: absolute;
text-align: center;
vertical-align: middle;
@ -473,7 +473,7 @@ export const sharedStyles: CSSResult = css`
color: var(--single-text-color-lm);
}
.another-container .notificaiton-counts {
.another-container .notification-counts {
color: var(--notification-counts-lm);
background: var(--notification-counts-background-lm);
}
@ -496,7 +496,7 @@ export const sharedStyles: CSSResult = css`
color: var(--button-color-dm);
}
.another-container .notificaiton-counts {
.another-container .notification-counts {
color: var(--notification-counts-dm);
background: var(--notification-counts-background-dm);
}
@ -544,6 +544,22 @@ export const sharedStyles: CSSResult = css`
transform: scale(1);
}
.click {
animation: click 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@keyframes click {
0% {
transform: scale(0.95);
background: var(--notification-background-active);
}
100% {
transform: scale(1);
background: var(--notification-background-lm);
}
}
:host(.animation-in) {
animation: show 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}