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 #61 in YR/star-web-components from modify-notificaton to master 

* commit 'ed6bcc28f25a036a6f272b10fe8e6cd96d6881b6':
  修复一些语法错误,添加通知和图标点击时的对应UI
This commit is contained in:
汪昌棋 2022-10-05 17:16:33 +08:00
parent 88e1d6e631 ed6bcc28f2
commit 53b57289df
3 changed files with 100 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,7 @@ export class BrightnessSlider extends LitElement {
@property({type: Number}) currentDistance = 0
@property({type: Number}) barWidth = 0
@property({type: Number}) max = 100
@property({type: Number}) value = 1
@property({type: Number}) _value = 1
@property() touchAction = {
// 触摸开始落点
start: {
@ -36,10 +36,21 @@ export class BrightnessSlider extends LitElement {
}
set coverLen(value: string) {
this.style.setProperty('--cover-length', value)
this.style.setProperty('--cover-length', value + 'px')
this._coverLen = value
}
@property({type: Number})
get value() {
return this._value
}
set value(value: number) {
this._value = value
let len = Math.floor((value * this.sliderBar.offsetWidth) / this.max)
this.coverLen = len.toString()
}
render(): HTMLTemplateResult {
return html`
<div
@ -61,9 +72,11 @@ export class BrightnessSlider extends LitElement {
width: inherit;
height: inherit;
dislay: block;
--cover-length: 3.78px; // 亮度为1
--cover-length: 3.78px;
--background-lm: rgba(255, 255, 255, 0.5);
--background-dm: rgba(0, 0, 0, 0.15);
--icon-color-lm: #4d4d4d;
--icon-color-dm: #d1d1d1;
--progress-background-lm: rgba(255, 255, 255, 0.8);
--progress-background-dm: rgba(255, 255, 255, 0.7);
}
@ -93,6 +106,7 @@ export class BrightnessSlider extends LitElement {
font-style: normal;
text-rendering: optimizelegibility;
font-weight: 500;
color: var(--icon-color-lm);
}
@media screen and (min-width: 900px) {
@ -132,13 +146,6 @@ export class BrightnessSlider extends LitElement {
}
`
firstUpdated() {
if (this.value) {
let len = Math.floor((this.value * this.sliderBar.offsetWidth) / this.max)
this.coverLen = len.toString()
}
}
handleEvent(event: TouchEvent) {
switch (event.type) {
case 'touchstart':
@ -151,7 +158,7 @@ export class BrightnessSlider extends LitElement {
this.touchAction.last.clientX - this.touchAction.start.clientX
this.currentDistance = this.distance + this.progress.offsetWidth
if (this.currentDistance < 0) {
if (this.currentDistance < this.barWidth / this.max) {
// this.currentDistance = 0;
this.currentDistance = this.barWidth / this.max
}
@ -177,12 +184,6 @@ export class BrightnessSlider extends LitElement {
break
}
}
setValue(value: number) {
this.value = value
let len = Math.floor((value * this.sliderBar.offsetWidth) / this.max)
this.coverLen = len.toString()
}
}
declare global {

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

@ -118,7 +118,7 @@ export class IconControlBar extends LitElement {
<div
class="more-info-icon"
@click=${this.handleInfo}
data-icon="expand-left"
data-icon="expand"
></div>
${iconstyle}
</div>
@ -305,20 +305,12 @@ export class IconControlBar extends LitElement {
background: var(--background-lm);
}
.icon-button::before {
text-align: center;
vertical-align: middle;
content: attr(data-icon);
font-family: gaia-icons;
font-style: normal;
text-rendering: optimizelegibility;
font-weight: 500;
}
.icon-base {
justify-content: center;
.active::before,
.active > .more-info-icon::after {
color: var(--text-color-active) !important;
}
.icon-button::before,
.more-info-icon::after {
text-align: center;
vertical-align: middle;
@ -327,6 +319,11 @@ export class IconControlBar extends LitElement {
font-style: normal;
text-rendering: optimizelegibility;
font-weight: 500;
color: var(--text-color-lm);
}
.icon-base {
justify-content: center;
}
p {
@ -348,16 +345,10 @@ export class IconControlBar extends LitElement {
background: var(--background-dm);
}
:host([deep-mode]) p {
position: relative;
:host([deep-mode]) p,
:host([deep-mode]) .icon-button::before,
:host([deep-mode]) .more-info-icon::after {
color: var(--text-color-dm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: OPPOSans;
font-style: normal;
font-weight: 400;
mix-blend-mode: normal;
}
@media screen and (min-width: 600px) {

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

@ -28,7 +28,7 @@ export enum RadiusType {
export class StarNotification extends LitElement {
// 公共属性
@property({type: String}) id = ''
@property({type: String}) timestamp = ''
@property({type: String}) _timestamp = ''
@property({type: String}) src = ''
@property({type: String}) type = ''
@property({type: NotificationType}) notificationType = 'one-notification'
@ -67,11 +67,11 @@ export class StarNotification extends LitElement {
}
@property({type: String})
get _timestamp() {
return this.timestamp
get timestamp() {
return this._timestamp
}
set _timestamp(value: string) {
this.timestamp = value
set timestamp(value: string) {
this._timestamp = value
}
render(): HTMLTemplateResult | typeof nothing {
@ -145,6 +145,7 @@ export class StarNotification extends LitElement {
@touchstart=${this}
@touchmove=${this}
@touchend=${this}
@click=${this}
>
<img src=${this.src} role="presentation" />
<div class="title-container">
@ -223,6 +224,7 @@ export class StarNotification extends LitElement {
@touchstart=${this}
@touchmove=${this}
@touchend=${this}
@click=${this}
>
<img src=${this.src} role="presentation" />
<div class="container one-container">
@ -288,7 +290,7 @@ export class StarNotification extends LitElement {
}
this.notification.style.transform =
'translateX(-' + translateX + 'px)'
} else {
} else if (touchPosX > 0) {
// if (touchPosX > 44) {
// (this.btnTool.children[0] as any).style.opacity = 0.6;
// }
@ -315,24 +317,47 @@ export class StarNotification extends LitElement {
event.stopPropagation()
switch ((event.target as HTMLElement).dataset.icon) {
case 'delete':
this.dispatchEvent(
new CustomEvent('notification-delete', {
detail: {
id: this.id,
notification: this,
},
bubbles: true,
composed: true,
})
)
;(event.target as HTMLElement).setAttribute('clicked', 'true')
window.setTimeout(() => {
;(event.target as HTMLElement).removeAttribute('clicked')
this.dispatchEvent(
new CustomEvent('notification-delete', {
detail: {
id: this.id,
notification: this,
},
bubbles: true,
composed: true,
})
)
}, 100)
break
case 'settings':
this.dispatchEvent(
new CustomEvent('notification-settings-configure', {
bubbles: true,
composed: true,
})
)
;(event.target as HTMLElement).setAttribute('clicked', 'true')
window.setTimeout(() => {
this.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)
break
}
break
@ -343,6 +368,7 @@ export class StarNotification extends LitElement {
:host {
--notification-background-lm: rgba(255, 255, 255, 0.55);
--notification-background-dm: rgba(0, 0, 0, 0.25);
--notification-background-active: rgba(255, 255, 255, 0.75);
--border-lm: rgba(0, 0, 0, 0.09);
--border-dm: rgba(0, 0, 0, 0.09);
--button-background-color-lm: rgba(255, 255, 255, 0.68);
@ -357,11 +383,19 @@ export class StarNotification extends LitElement {
.notification {
background: var(--notification-background-lm);
transition: transform 0.6s;
}
.notification[clicked] {
transform: scale(0.9);
background: var(--notification-background-active);
}
.notification > div.title-container {
display: flex;
position: absolute;
color: #404040;
opacity: 0.65;
}
.notification > div.title-container .title {
@ -370,7 +404,6 @@ export class StarNotification extends LitElement {
flex: none;
order: 0;
flex-grow: 0;
color: #404040;
}
.notification > div.title-container .timestamp {
@ -378,7 +411,6 @@ export class StarNotification extends LitElement {
position: absolute;
text-align: right;
mix-blend-mode: normal;
opacity: 0.65;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -452,6 +484,10 @@ export class StarNotification extends LitElement {
opacity: 0.6;
}
.btn-tool > div[clicked] {
transform: scale(0.9);
}
.btn-tool > div::after {
text-align: center;
vertical-align: middle;
@ -460,6 +496,7 @@ export class StarNotification extends LitElement {
font-style: normal;
text-rendering: optimizelegibility;
font-weight: 500;
color: #4d4d4d;
}
.container {
@ -490,10 +527,13 @@ export class StarNotification extends LitElement {
flex-grow: 0;
}
.one-container {
color: #404040;
}
.one-container .timestamp {
position: absolute;
text-align: right;
color: #404040;
mix-blend-mode: normal;
opacity: 0.65;
}
@ -514,6 +554,10 @@ export class StarNotification extends LitElement {
background: var(--button-background-color-dm);
}
:host([dark-mode]) .btn-tool > div::after {
color: #f4f4f4;
}
@media screen and (min-width: 900px) {
:host([notificationType='one-notification']) {
margin: 16px 0 0 0;