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

Merge pull request #211 in YR/star-web-components from add-bluetooth-transfer-notification to master 

* commit '5e75262ed111e0f5116c7ffb4bf569531c531020':
  添加蓝牙传输通知类型;修改通知组件部分事件类型以适应页面滚动
This commit is contained in:
汪昌棋 2022-12-22 16:03:24 +08:00
parent cd1efe5713 5e75262ed1
commit 6ca0c2beaa
4 changed files with 355 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -95,7 +95,10 @@ export class StarNotificationGroup extends LitElement {
if (slotLen == 1) { if (slotLen == 1) {
// group中只有一条消息，应该转为'one-notification'类型，并折叠 // group中只有一条消息，应该转为'one-notification'类型，并折叠
this.setAttribute('show', 'false') this.setAttribute('show', 'false')
firstChild.setAttribute('notificationType', 'one-notification') firstChild.setAttribute(
'notificationType',
'group-with-one-notification'
)
firstChild.withArrowUp = false firstChild.withArrowUp = false
firstChild.removeEventListener('notification-tap', allNotificationshown) firstChild.removeEventListener('notification-tap', allNotificationshown)
} else if (slotLen > 1) { } else if (slotLen > 1) {
@ -165,7 +168,6 @@ export class StarNotificationGroup extends LitElement {
} }
let isShow = this.getAttribute('show') == 'true' let isShow = this.getAttribute('show') == 'true'
console.log('hellowq allNotificationshown isShow: ', isShow)
if (isShow) { if (isShow) {
// 当前是展开状态，点击需折叠 // 当前是展开状态，点击需折叠
let self = this let self = this
@ -178,6 +180,7 @@ export class StarNotificationGroup extends LitElement {
element.addEventListener('animationend', function tEnd() { element.addEventListener('animationend', function tEnd() {
if (index == self.slotElements.length - 1) { if (index == self.slotElements.length - 1) {
self.setAttribute('show', 'false') self.setAttribute('show', 'false')
self.dispatchEventFurther()
} }
;(element as StarNotification).classList.remove('animation-out') ;(element as StarNotification).classList.remove('animation-out')
element.removeEventListener('animationend', tEnd) element.removeEventListener('animationend', tEnd)
@ -186,6 +189,7 @@ export class StarNotificationGroup extends LitElement {
}) })
} else { } else {
this.setAttribute('show', 'true') this.setAttribute('show', 'true')
this.dispatchEventFurther()
this.slotElements.forEach((element) => { this.slotElements.forEach((element) => {
if (element !== firstChild) { if (element !== firstChild) {
;(element as StarNotification).classList.add('animation-in') ;(element as StarNotification).classList.add('animation-in')
@ -201,6 +205,15 @@ export class StarNotificationGroup extends LitElement {
} }
} }
dispatchEventFurther() {
this.dispatchEvent(
new CustomEvent('notification-group-tap', {
bubbles: true,
composed: true,
})
)
}
disappearing(callback?: Function) { disappearing(callback?: Function) {
this.classList.add('disappearing') this.classList.add('disappearing')
let self = this let self = this
@ -231,6 +244,7 @@ export class StarNotificationGroup extends LitElement {
element.addEventListener('animationend', function tEnd() { element.addEventListener('animationend', function tEnd() {
if (index == self.slotElements.length - 1) { if (index == self.slotElements.length - 1) {
self.setAttribute('show', 'false') self.setAttribute('show', 'false')
self.preventDefaultBehavior(true)
} }
;(element as StarNotification).classList.remove('animation-out') ;(element as StarNotification).classList.remove('animation-out')
element.removeEventListener('animationend', tEnd) element.removeEventListener('animationend', tEnd)
@ -240,11 +254,17 @@ export class StarNotificationGroup extends LitElement {
} }
} }
preventDefaultBehavior(isPrevent: boolean) {
;(this.slotElements as StarNotification[]).forEach((element) => {
element.isPrevent = isPrevent
})
}
static styles = css` static styles = css`
:host { :host {
display: block; display: block;
margin-top: 0.83vh; margin-top: var(--auto-16px);
border-radius: 1.7vw; border-radius: var(--auto-20px);
} }
:host([show='false']) ::slotted(*) { :host([show='false']) ::slotted(*) {

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

@ -8,13 +8,17 @@ import {
} from 'lit/decorators.js' } from 'lit/decorators.js'
import {sharedStyles} from './notificationstyle.js' import {sharedStyles} from './notificationstyle.js'
import {StarBaseElement} from '@star-web-components/base' import {StarBaseElement} from '@star-web-components/base'
// ONE ： 单条通知，notification-group展开时第一条notification类型 // ONE ： 单条通知
// MORE ： notification-group中除第一条以外的notification类型 // MORE ： notification-group中除第一条以外的notification类型
// MORE_FIRST: notification-group折叠时第一条notification类型 // MORE_FIRST: notification-group折叠时第一条notification类型
// GROUP_ONE: notification-group展开时第一条notification类型
// BLUETOOTH_TRANSFER: 蓝牙文件传输(进度条)
export enum NotificationType { export enum NotificationType {
ONE = 'one-notification', ONE = 'one-notification',
MORE = 'more-notifiactions', MORE = 'more-notifiactions',
MORE_FIRST = 'more-notifiactions-first', MORE_FIRST = 'more-notifiactions-first',
GROUP_ONE = 'group-with-one-notification',
BLUETOOTH_TRANSFER = 'bluetooth-transfer',
} }
// TOP_BORDER_RADIUS 对应notification-group展开时第一条notification，仅上边有圆角 // TOP_BORDER_RADIUS 对应notification-group展开时第一条notification，仅上边有圆角
@ -54,13 +58,18 @@ export class StarNotification extends StarBaseElement {
// 消息通知toast // 消息通知toast
@property({type: Boolean}) isToast = false @property({type: Boolean}) isToast = false
@property({type: Boolean}) btnShown = false @property({type: Boolean}) btnShown = false
@property({type: Boolean}) isPrevent = true
@property({type: String}) moveDirection = '' @property({type: String}) moveDirection = ''
@property({type: Number}) notificationPosition = 0 @property({type: Number}) notificationPosition = 0
@property({type: Number}) width = 0 @property({type: Number}) width = 0
@property({type: Number}) widthleft = 0 @property({type: Number}) widthleft = 0
@property({type: Number}) velocityThreshold = 0.8 @property({type: Number}) velocityThreshold = 0.8
@property({type: String}) transferMode = ''
@property({type: Number}) value = 0
@property({type: String}) data_id = ''
@property({type: String}) transferDescription = ''
@query('.notification') notification!: HTMLDivElement @query('.notification') notification!: HTMLDivElement
@query('.btn-tool') btnTool!: HTMLDivElement @query('.btn-tool-wrapper') btnTool!: HTMLDivElement
@query('.arrow-up') arrowUp!: HTMLElement @query('.arrow-up') arrowUp!: HTMLElement
@state() touchAction = { @state() touchAction = {
// 触摸开始落点 // 触摸开始落点
@ -114,9 +123,12 @@ export class StarNotification extends StarBaseElement {
switch (this.notificationType) { switch (this.notificationType) {
case NotificationType.ONE: case NotificationType.ONE:
case NotificationType.MORE: case NotificationType.MORE:
case NotificationType.GROUP_ONE:
return this.getone() return this.getone()
case NotificationType.MORE_FIRST: case NotificationType.MORE_FIRST:
return this.getmorefirst() return this.getmorefirst()
case NotificationType.BLUETOOTH_TRANSFER:
return this.getbluetoothtransfer()
default: default:
console.error('unhandled 【star-notification】 type') console.error('unhandled 【star-notification】 type')
return nothing return nothing
@ -151,16 +163,19 @@ export class StarNotification extends StarBaseElement {
` `
: nothing : nothing
const deleteShow = this.noclear const deleteShow =
this.noclear == true
? html` ? html`
<style> <div class="btn-tool-wrapper btn-tool-only-settings">
[data-icon='delete'] { <div data-icon="settings" @click=${this}></div>
visibility: hidden; </div>
display: none; `
} : html`
</style> <div class="btn-tool-wrapper btn-tool">
<div data-icon="delete" @click=${this}></div>
<div data-icon="settings" @click=${this}></div>
</div>
` `
: nothing
// "more-notifiactions"用于notification-group中的第二条及以后的notification, // "more-notifiactions"用于notification-group中的第二条及以后的notification,
// 中间位置notification没有圆角(radiusType为"")，最底部的radiusType为bottom-border-radius. // 中间位置notification没有圆角(radiusType为"")，最底部的radiusType为bottom-border-radius.
@ -198,12 +213,8 @@ export class StarNotification extends StarBaseElement {
${arrowShow} ${arrowShow}
</div> </div>
</div> </div>
<div class="btn-tool">
<div data-icon="delete" @click=${this}></div>
<div data-icon="settings" @click=${this}></div>
${deleteShow} ${deleteShow}
</div> </div>
</div>
` `
} else { } else {
return html` return html`
@ -282,16 +293,19 @@ export class StarNotification extends StarBaseElement {
// } // }
this.timestamp ? new Date(this.timestamp) : new Date() this.timestamp ? new Date(this.timestamp) : new Date()
const deleteShow = this.noclear const deleteShow =
this.noclear == true
? html` ? html`
<style> <div class="btn-tool-wrapper btn-tool-only-settings
[data-icon='delete'] { <div data-icon="settings" @click=${this}></div>
visibility: hidden; </div>
display: none; `
} : html`
</style> <div class="btn-tool-wrapper btn-tool">
<div data-icon="delete" @click=${this}></div>
<div data-icon="settings" @click=${this}></div>
</div>
` `
: nothing
return html` return html`
<div class="more"> <div class="more">
<div <div
@ -322,19 +336,46 @@ export class StarNotification extends StarBaseElement {
<span class="notification-counts">${this.count}</span> <span class="notification-counts">${this.count}</span>
</div> </div>
</div> </div>
<div class="btn-tool">
<div data-icon="delete" @click=${this}></div>
<div data-icon="settings" @click=${this}></div>
${deleteShow} ${deleteShow}
</div> </div>
`
}
getbluetoothtransfer(): HTMLTemplateResult | typeof nothing {
return html`
<div class="one">
<div
class="notification border-radius"
role="link"
data-id=${this.data_id}
>
<div data-icon="bluetooth-transfer-circle" aria-hidden="true"></div>
<div class="bluetooth-title">${this.title}</div>
<progress value="${this.value}" max="1"></progress>
<div class="transfer-detail">
<span id="description">${this.transferDescription}</span>
<span id="transfer-precentage">
${Math.round(this.value * 100)}%
</span>
</div>
</div>
</div> </div>
` `
} }
@eventOptions({passive: false}) @eventOptions({passive: false})
handleEvent(event: TouchEvent) { handleEvent(event: any) {
let self = this let self = this
let deleteBtn: HTMLElement
let settingsBtn: HTMLElement
if (!this.isToast) { if (!this.isToast) {
if (this.noclear == false) {
deleteBtn = this.btnTool.children[0] as HTMLElement
settingsBtn = this.btnTool.children[1] as HTMLElement
} else {
settingsBtn = this.btnTool.children[0] as HTMLElement
}
switch (event.type) { switch (event.type) {
case 'touchstart': case 'touchstart':
this.touchAction.start.clientX = event.touches[0].clientX this.touchAction.start.clientX = event.touches[0].clientX
@ -342,17 +383,17 @@ export class StarNotification extends StarBaseElement {
this.btnTool.style.visibility = 'visiable' this.btnTool.style.visibility = 'visiable'
break break
case 'touchmove': case 'touchmove':
if (!this.isPrevent) {
return
}
event.preventDefault() event.preventDefault()
let deleteBtn = this.btnTool.children[0] as HTMLElement break
let settingsBtn = this.btnTool.children[1] as HTMLElement case 'swipeleft':
this.touchAction.last.clientX = event.touches[0].clientX this.touchAction.last.clientX = event.detail.endTouch.clientX
this.touchAction.last.timeStamp = event.timeStamp
let touchPosX = let touchPosX =
this.touchAction.last.clientX - this.touchAction.start.clientX this.touchAction.last.clientX - this.touchAction.start.clientX
let time = let velocityThreshold = event.detail.velocity
this.touchAction.last.timeStamp - this.touchAction.start.timeStamp // if (touchPosX < 0) {
let velocityThreshold = Math.abs(touchPosX) / time
if (touchPosX < 0) {
let translateX = this.notificationPosition * 0.309 let translateX = this.notificationPosition * 0.309
let quickRemove = let quickRemove =
!this.btnShown && !this.btnShown &&
@ -369,7 +410,7 @@ export class StarNotification extends StarBaseElement {
this.btnShown = false this.btnShown = false
} }
if (!this.noclear) { if (this.noclear == false) {
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('notification-delete', { new CustomEvent('notification-delete', {
detail: { detail: {
@ -385,12 +426,11 @@ export class StarNotification extends StarBaseElement {
} }
this.notification.style.transform = 'translateX(-30.9%)' this.notification.style.transform = 'translateX(-30.9%)'
let self = this
this.notification.addEventListener( this.notification.addEventListener(
'transitionend', 'transitionend',
function tranEnd() { function tranEnd() {
self.notification.removeEventListener('transitionend', tranEnd) self.notification.removeEventListener('transitionend', tranEnd)
if (!self.noclear) { if (self.noclear == false) {
deleteBtn.style.visibility = 'visible' deleteBtn.style.visibility = 'visible'
deleteBtn.style.opacity = '1' deleteBtn.style.opacity = '1'
} }
@ -401,19 +441,6 @@ export class StarNotification extends StarBaseElement {
) )
this.widthleft = this.width - translateX this.widthleft = this.width - translateX
this.moveDirection = 'left' this.moveDirection = 'left'
} else if (touchPosX > 0) {
this.notification.style.transform = 'translateX(' + 0 + 'px)'
let tranEnd = () => {
this.notification.removeEventListener('transitionend', tranEnd)
if (!this.noclear) {
deleteBtn.style.visibility = 'hidden'
}
settingsBtn.style.visibility = 'hidden'
this.btnShown = false
}
this.notification.addEventListener('transitionend', tranEnd)
this.moveDirection = 'right'
}
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('notification-touchmove', { new CustomEvent('notification-touchmove', {
detail: { detail: {
@ -425,7 +452,19 @@ export class StarNotification extends StarBaseElement {
}) })
) )
break break
case 'touchend': case 'swiperight':
event.preventDefault()
this.notification.style.transform = 'translateX(' + 0 + 'px)'
let tranEnd = () => {
this.notification.removeEventListener('transitionend', tranEnd)
if (this.noclear == false) {
deleteBtn.style.visibility = 'hidden'
}
settingsBtn.style.visibility = 'hidden'
this.btnShown = false
}
this.notification.addEventListener('transitionend', tranEnd)
this.moveDirection = 'right'
break break
case 'click': case 'click':
event.stopPropagation() event.stopPropagation()
@ -443,7 +482,7 @@ export class StarNotification extends StarBaseElement {
target.addEventListener('transitionend', function tranEnd() { target.addEventListener('transitionend', function tranEnd() {
target.removeEventListener('transitionend', tranEnd) target.removeEventListener('transitionend', tranEnd)
target.removeAttribute('clicked') target.removeAttribute('clicked')
if (!self.noclear) { if (self.noclear == false) {
self.dispatchEvent( self.dispatchEvent(
new CustomEvent('notification-delete', { new CustomEvent('notification-delete', {
detail: { detail: {
@ -566,12 +605,16 @@ export class StarNotification extends StarBaseElement {
} }
this.notification.style.transform = 'translateX(0px)' this.notification.style.transform = 'translateX(0px)'
let deleteBtn = this.btnTool.children[0] as HTMLElement let deleteBtn
let settingsBtn = this.btnTool.children[1] as HTMLElement let settingsBtn
// let tranEnd = () => { // let tranEnd = () => {
// this.notification.removeEventListener('transitionend', tranEnd) // this.notification.removeEventListener('transitionend', tranEnd)
if (!this.noclear) { if (this.noclear == false) {
deleteBtn = this.btnTool.children[0] as HTMLElement
settingsBtn = this.btnTool.children[1] as HTMLElement
deleteBtn.style.visibility = 'hidden' deleteBtn.style.visibility = 'hidden'
} else {
settingsBtn = this.btnTool.children[0] as HTMLElement
} }
settingsBtn.style.visibility = 'hidden' settingsBtn.style.visibility = 'hidden'
this.btnShown = false this.btnShown = false
@ -580,7 +623,7 @@ export class StarNotification extends StarBaseElement {
// this.notification.addEventListener('transitionend', tranEnd) // this.notification.addEventListener('transitionend', tranEnd)
} }
public static override get styles(): CSSResultArray { static override get styles(): CSSResultArray {
return [sharedStyles] return [sharedStyles]
} }
} }

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

@ -22,19 +22,24 @@ export const sharedStyles: CSSResult = css`
--more-text-color-lm: rgba(64, 64, 64, 0.65); --more-text-color-lm: rgba(64, 64, 64, 0.65);
--more-text-color-dm: rgba(224, 224, 224, 1); --more-text-color-dm: rgba(224, 224, 224, 1);
width: 71.7vw; // width: 71.7vw;
height: 7.9vh; // height: 7.9vh;
width: calc(860px / var(--hostDevicePixelRatio));
height: var(--auto-152px);
display: block; display: block;
position: relative; position: relative;
left: 0; left: 0;
top: 0; top: 0;
} }
:host([notificationType='one-notification']) { :host([notificationType='bluetooth-transfer']) {
// margin: 5px 0 0 0; height: calc(194px / var(--hostDevicePixelRatio));
margin: var(--auto-16px);
}
// margin: 16px 0 0 0; :host([notificationType='one-notification']) {
margin: 0.8vh 0 0 0; margin: 0.8vh 0 0 0;
margin-top: var(--auto-16px);
} }
.notification { .notification {
@ -61,25 +66,23 @@ export const sharedStyles: CSSResult = css`
} }
.top-border-radius { .top-border-radius {
// border-top-left-radius: 20px; // border-top-left-radius: 1.7vw;
// border-top-right-radius: 20px; // border-top-right-radius: 1.7vw;
border-top-left-radius: 1.7vw; border-top-left-radius: var(--auto-20px);
border-top-right-radius: 1.7vw; border-top-right-radius: var(--auto-20px);
} }
.bottom-border-radius { .bottom-border-radius {
// border-bottom-left-radius: 20px; // border-bottom-left-radius: 1.7vw;
// border-bottom-right-radius: 20px; // border-bottom-right-radius: 1.7vw;
border-bottom-left-radius: var(--auto-20px);
border-bottom-left-radius: 1.7vw; border-bottom-right-radius: var(--auto-20px);
border-bottom-right-radius: 1.7vw;
} }
.border-radius { .border-radius {
// border-radius: 20px; // border-radius: 1.7vw;
border-radius: var(--auto-20px);
border-radius: 1.7vw;
} }
.notification > img { .notification > img {
@ -88,8 +91,10 @@ export const sharedStyles: CSSResult = css`
// pointer-events: none; // pointer-events: none;
// margin: 26px 10px 78px 26px; // margin: 26px 10px 78px 26px;
width: 4vw; // width: 4vw;
height: 4vw; // height: 4vw;
width: var(--auto-48px);
height: var(--auto-48px);
position: absolute; position: absolute;
top: 17.1%; top: 17.1%;
left: 3%; left: 3%;
@ -99,11 +104,6 @@ export const sharedStyles: CSSResult = css`
.notification > div.title-container { .notification > div.title-container {
display: flex; display: flex;
position: absolute; position: absolute;
// width: calc(100% - 28px);
// left: 28px;
// top: 23.7%;
font-family: 'OPPOSans'; font-family: 'OPPOSans';
font-style: normal; font-style: normal;
width: 90.2%; width: 90.2%;
@ -125,7 +125,8 @@ export const sharedStyles: CSSResult = css`
// font-size: 28px; // font-size: 28px;
line-height: 1; line-height: 1;
font-size: 2.3vw; // font-size: 2.3vw;
font-size: var(--auto-28px);
} }
.notification > div.title-container .timestamp { .notification > div.title-container .timestamp {
@ -147,24 +148,19 @@ export const sharedStyles: CSSResult = css`
// font-size: 24px; // font-size: 24px;
// line-height: 32px; // line-height: 32px;
right: 10.67px; // right: 10.67px;
top: -1.33px; // top: -1.33px;
font-size: 2vw; // font-size: 2vw;
line-height: 1; line-height: 1;
right: 3.7%; // right: 3.7%;
top: -2.6%; top: -2.6%;
top: -0.2vh; font-size: var(--auto-24px);
right: 2.6vw; right: var(--auto-32px);
} }
.notification > div.detail { .notification > div.detail {
display: flex; display: flex;
position: absolute; position: absolute;
// width: calc(100% - 84px);
// left: 84px;
// top: 84px;
width: 90.2%; width: 90.2%;
left: 9.8%; left: 9.8%;
top: 55%; top: 55%;
@ -182,8 +178,10 @@ export const sharedStyles: CSSResult = css`
font-weight: 400; font-weight: 400;
mix-blend-mode: normal; mix-blend-mode: normal;
opacity: 0.65; opacity: 0.65;
font-size: 2.2vw; // font-size: 2.2vw;
font-size: var(--auto-26px);
max-width: var(--auro-640px);
// width: 246px; // width: 246px;
// height: 11px; // height: 11px;
// font-size: 8px; // font-size: 8px;
@ -204,15 +202,19 @@ export const sharedStyles: CSSResult = css`
// line-height: 34px; // line-height: 34px;
// border-radius: 189px; // border-radius: 189px;
height: 1.8vh; // height: 1.8vh;
width: 4.7vw; // width: 4.7vw;
right: 3%; right: 3%;
bottom: 19.7%; bottom: 19.7%;
border-radius: 15.75vw; // border-radius: 15.75vw;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
line-height: 1; line-height: 1;
height: var(--auto-34px);
width: var(--auto-56px);
border-radius: calc(189px / var(--hostDevicePixelRatio));
} }
.notification > div.detail .arrow-up::after { .notification > div.detail .arrow-up::after {
@ -228,6 +230,10 @@ export const sharedStyles: CSSResult = css`
width: 1.33vw; width: 1.33vw;
height: 1.33vw; height: 1.33vw;
width: var(--auto-16px);
height: var(--auto-16px);
font-size: var(--auto-16px);
} }
.one, .one,
@ -239,7 +245,8 @@ export const sharedStyles: CSSResult = css`
overflow: hidden; overflow: hidden;
} }
.btn-tool { .btn-tool,
.btn-tool-only-settings {
display: flex; display: flex;
align-items: center; align-items: center;
position: absolute; position: absolute;
@ -247,48 +254,46 @@ export const sharedStyles: CSSResult = css`
visibility: hidden; visibility: hidden;
// right: 18px; // right: 18px;
// right: 6px;
right: 2.1%; right: 2.1%;
} }
.btn-tool > div { .btn-tool-only-settings {
right: var(--auto-140px);
}
.btn-tool > div,
.btn-tool-only-settings > div {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
opacity: 0.6; opacity: 0.6;
transition: transform 0.1s; transition: transform 0.1s;
// width: 80px;
// height: 80px;
width: 6.7vw; width: 6.7vw;
height: 6.7vw; height: 6.7vw;
width: var(--auto-80px);
height: var(--auto-80px);
} }
.btn-tool > div:first-child { .btn-tool > div:first-child {
// margin-right: 15px; // margin-right: 3.7vw;
// visibility: hidden; margin-right: calc(44px / var(--hostDevicePixelRatio));
// margin-right: 44px;
// visibility: hidden;
margin-right: 5.1%;
margin-right: 3.7vw;
visibility: hidden; visibility: hidden;
} }
.btn-tool > div:last-child { .btn-tool > div:last-child,
.btn-tool-only-settings > div {
visibility: hidden; visibility: hidden;
} }
.btn-tool > div[clicked] { .btn-tool > div[clicked],
.btn-tool-only-settings > div[clicked] {
transform: scale(0.9); transform: scale(0.9);
} }
.btn-tool > div::after { .btn-tool > div::after,
.btn-tool-only-settings > div::after {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
content: attr(data-icon); content: attr(data-icon);
@ -304,7 +309,8 @@ export const sharedStyles: CSSResult = css`
width: 40%; width: 40%;
height: 40%; height: 40%;
font-size: 2.7vw; // font-size: 2.7vw;
font-size: var(--auto-32px);
} }
.container { .container {
@ -331,8 +337,9 @@ export const sharedStyles: CSSResult = css`
height: 18.4%; height: 18.4%;
line-height: 1; line-height: 1;
font-size: 1.45vh; // font-size: 1.45vh;
font-size: 2.3vw; // font-size: 2.3vw;
font-size: var(--auto-28px);
} }
.container .detail-content { .container .detail-content {
@ -354,10 +361,11 @@ export const sharedStyles: CSSResult = css`
// font-size: 26px; // font-size: 26px;
left: 0.93%; left: 0.93%;
top: -3px; // top: -3px;
top: -2%; top: -2%;
top: -0.16vh; // top: -0.16vh;
font-size: 1.35vh; // font-size: 1.35vh;
font-size: var(--auto-26px);
} }
.one-container { .one-container {
@ -390,11 +398,13 @@ export const sharedStyles: CSSResult = css`
// font-size: 8px; // font-size: 8px;
// line-height: 11px; // line-height: 11px;
height: 1.8vh; // height: 1.8vh;
height: var(--auto-34px);
right: 4%; right: 4%;
top: -0.2vh; top: -0.2vh;
line-height: 1.7vh; line-height: 1.7vh;
font-size: 2vw; // font-size: 2vw;
font-size: var(--auto-24px);
} }
.another-container .notification-counts { .another-container .notification-counts {
@ -412,26 +422,104 @@ export const sharedStyles: CSSResult = css`
// font-size: 20px; // font-size: 20px;
// border-radius: 189px; // border-radius: 189px;
// width: 18px; // width: 4.7vw;
// height: 11px; // height: 1.8vh;
// right: 8px; // right: 3%;
// bottom: 10px; // bottom: 19.7%;
// top: -1px; // border-radius: 15.75vw;
// line-height: 11px; // top: -0.08vw;
// font-size: 7px; // font-size: 1.7vw;
// border-radius: 63px; // line-height: 1.8vh;
width: 4.7vw; width: var(--auto-56px);
height: 1.8vh; height: var(--auto-34px);
right: 3%; right: 3%;
bottom: 19.7%; bottom: 19.7%;
border-radius: 15.75vw; border-radius: calc(189px / var(--hostDevicePixelRatio));
top: -0.08vw; top: -0.08vw;
font-size: 1.7vw; font-size: var(--auto-20px);
line-height: 1.8vh; line-height: var(--auto-34px);
vertical-align: middle; vertical-align: middle;
} }
.bluetooth-title {
height: var(--auto-28px);
position: absolute;
left: calc(84px / var(--hostDevicePixelRatio));
top: var(--auto-36px);
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
font-size: var(--auto-28px);
line-height: var(--auto-28px);
color: var(--title-color-lm);
}
[data-icon='bluetooth-transfer-circle'] {
width: var(--auto-48px);
height: var(--auto-48px);
position: absolute;
left: var(--auto-26px);
top: var(--auto-26px);
}
[data-icon='bluetooth-transfer-circle']::after {
text-align: center;
vertical-align: middle;
content: attr(data-icon);
font-family: 'gaia-icons';
font-style: normal;
font-size: var(--auto-48px);
text-rendering: optimizelegibility;
font-weight: 500;
}
progress {
width: calc(700px / var(--hostDevicePixelRatio));
height: var(--auto-12px);
position: absolute;
left: calc(84px / var(--hostDevicePixelRatio));
top: var(--auto-100px);
background: rgba(38, 38, 38, 0.04);
border-radius: var(--auto-10px);
}
progress::-moz-progress-bar,
progress::-webkit-progress-bar {
background-color: #0e92f0;
border-radius: var(--auto-10px);
}
.transfer-detail > #description {
height: var(--auto-34px);
position: absolute;
left: calc(84px / var(--hostDevicePixelRatio));
top: calc(127px / var(--hostDevicePixelRatio));
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
font-size: var(--auto-26px);
line-height: var(--auto-34px);
mix-blend-mode: normal;
}
#transfer-precentage {
height: var(--auto-32px);
right: var(--auto-76px);
position: absolute;
top: var(--auto-129px);
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
font-size: var(--auto-24px);
line-height: var(--auto-32px);
text-align: right;
mix-blend-mode: normal;
opacity: 0.65;
}
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
.notification { .notification {
background: var(--notification-background-lm); background: var(--notification-background-lm);
@ -453,19 +541,22 @@ export const sharedStyles: CSSResult = css`
background: var(--arrow-background-lm); background: var(--arrow-background-lm);
} }
.btn-tool > div { .btn-tool-wrapper > div {
background: var(--button-background-color-lm); background: var(--button-background-color-lm);
} }
.btn-tool > div::after { .btn-tool-wrapper > div::after {
color: var(--button-color-lm); color: var(--button-color-lm);
} }
.container .title { .container .title,
.bluetooth-title,
#transfer-precentage {
color: var(--title-color-lm); color: var(--title-color-lm);
} }
.container .detail-content { .container .detail-content,
.transfer-detail > #description {
color: var(--more-text-color-lm); color: var(--more-text-color-lm);
} }
@ -488,11 +579,11 @@ export const sharedStyles: CSSResult = css`
background: var(--arrow-background-dm); background: var(--arrow-background-dm);
} }
.btn-tool > div { .btn-tool-wrapper > div {
background: var(--button-background-color-dm); background: var(--button-background-color-dm);
} }
.btn-tool > div::after { .btn-tool-wrapper > div::after {
color: var(--button-color-dm); color: var(--button-color-dm);
} }
@ -502,7 +593,9 @@ export const sharedStyles: CSSResult = css`
} }
.container .title, .container .title,
.notification > div.title-container .title { .notification > div.title-container .title,
.bluetooth-title,
#transfer-precentage {
color: var(--title-color-dm); color: var(--title-color-dm);
} }
@ -514,7 +607,8 @@ export const sharedStyles: CSSResult = css`
color: var(--single-text-color-dm); color: var(--single-text-color-dm);
} }
.container .detail-content { .container .detail-content,
.transfer-detail > #description {
color: var(--more-text-color-dm); color: var(--more-text-color-dm);
} }

3
src/test/panels/notification/notification.ts
View File

@ -52,6 +52,9 @@ export class PanelNotifiaciton extends LitElement {
render() { render() {
return html` return html`
<div class="outer"> <div class="outer">
<star-notification
notificationType="bluetooth-transfer"
></star-notification>
<star-notification <star-notification
id="0020017" id="0020017"
notificationType=${NotificationType.ONE} notificationType=${NotificationType.ONE}