From ed6bcc28f25a036a6f272b10fe8e6cd96d6881b6 Mon Sep 17 00:00:00 2001 From: wurou Date: Wed, 5 Oct 2022 14:51:29 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=B8=80=E4=BA=9B=E8=AF=AD?= =?UTF-8?q?=E6=B3=95=E9=94=99=E8=AF=AF,=E6=B7=BB=E5=8A=A0=E9=80=9A?= =?UTF-8?q?=E7=9F=A5=E5=92=8C=E5=9B=BE=E6=A0=87=E7=82=B9=E5=87=BB=E6=97=B6?= =?UTF-8?q?=E7=9A=84=E5=AF=B9=E5=BA=94UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../brightness-slider/brightness-slider.ts | 35 +++---- .../icon-control-bar/icon-control-bar.ts | 35 +++---- src/components/notification/notification.ts | 94 ++++++++++++++----- 3 files changed, 100 insertions(+), 64 deletions(-) diff --git a/src/components/brightness-slider/brightness-slider.ts b/src/components/brightness-slider/brightness-slider.ts index bb7d073..cec4bbc 100644 --- a/src/components/brightness-slider/brightness-slider.ts +++ b/src/components/brightness-slider/brightness-slider.ts @@ -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`
${iconstyle} @@ -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) { diff --git a/src/components/notification/notification.ts b/src/components/notification/notification.ts index fd31a44..34b2e95 100644 --- a/src/components/notification/notification.ts +++ b/src/components/notification/notification.ts @@ -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} >
@@ -223,6 +224,7 @@ export class StarNotification extends LitElement { @touchstart=${this} @touchmove=${this} @touchend=${this} + @click=${this} >
@@ -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;