From 88ef6e4f6718c1840289b16ad82134fd2b4492a4 Mon Sep 17 00:00:00 2001 From: wurou Date: Wed, 4 Jan 2023 16:57:13 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E9=80=9A=E7=9F=A5?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9B=BE=E6=A0=87.=E9=80=82=E5=BA=94?= =?UTF-8?q?=E6=80=A7=E8=B0=83=E6=95=B4=E5=8A=A8=E6=95=88=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=90=8E=E5=88=86=E9=A1=B5=E6=B6=89=E5=8F=8A=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../notification-group/notification-group.ts | 32 +--- .../notification/notificationstyle.ts | 153 ++---------------- 2 files changed, 17 insertions(+), 168 deletions(-) diff --git a/src/components/notification-group/notification-group.ts b/src/components/notification-group/notification-group.ts index 4ba9426..8e0a519 100644 --- a/src/components/notification-group/notification-group.ts +++ b/src/components/notification-group/notification-group.ts @@ -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') diff --git a/src/components/notification/notificationstyle.ts b/src/components/notification/notificationstyle.ts index 91a7a54..bc0be5b 100644 --- a/src/components/notification/notificationstyle.ts +++ b/src/components/notification/notificationstyle.ts @@ -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; - } - } ` From 36d15e712cf8e005a7d086d8d3ae3274e4064d7c Mon Sep 17 00:00:00 2001 From: wurou Date: Thu, 12 Jan 2023 10:14:43 +0800 Subject: [PATCH 2/2] =?UTF-8?q?#155296=20-=20=E4=BF=AE=E5=A4=8D=E9=80=9A?= =?UTF-8?q?=E7=9F=A5=E7=BB=84=E5=B1=95=E5=BC=80=E6=98=BE=E7=A4=BA=E7=9B=B8?= =?UTF-8?q?=E5=85=B3bug;=E4=BF=AE=E6=94=B9=E6=8E=A7=E5=88=B6=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../brightness-slider/brightness-slider.ts | 30 ++++++++-------- .../icon-control-bar/icon-control-bar.ts | 5 +-- .../notification-group/notification-group.ts | 34 ++++++++----------- src/components/notification/notification.ts | 2 +- .../notification/notificationstyle.ts | 2 +- 5 files changed, 35 insertions(+), 38 deletions(-) diff --git a/src/components/brightness-slider/brightness-slider.ts b/src/components/brightness-slider/brightness-slider.ts index ff7ed85..ac4b858 100644 --- a/src/components/brightness-slider/brightness-slider.ts +++ b/src/components/brightness-slider/brightness-slider.ts @@ -18,8 +18,8 @@ export class BrightnessSlider extends StarBaseElement { @property({type: Number}) currentDistance = 0 @property({type: Number}) barWidth = 0 @property({type: Number}) max = 100 - @property({type: Number}) min = 1 - @property({type: Number}) _value = 1 + @property({type: Number}) min = 0 + @property({type: Number}) _value = 0 @property({type: Number}) progressLen = 0 @property() touchAction = { // 触摸开始落点 @@ -55,15 +55,15 @@ export class BrightnessSlider extends StarBaseElement { } set value(value: number) { - if (value == this.min) { - // 最低亮度限制 - this.coverLen = '0' - this._value = this.min - } else { - this._value = value - let len = Math.round((value * this.barWidth) / this.max) - this.coverLen = len.toString() - } + // if (value == this.min) { + // // 最低亮度限制 + // this.coverLen = '0' + // this._value = this.min + // } else { + this._value = value + let len = Math.round((value * this.barWidth) / this.max) + this.coverLen = len.toString() + // } } render(): HTMLTemplateResult { @@ -103,7 +103,7 @@ export class BrightnessSlider extends StarBaseElement { this.touchAction.last.clientX - this.touchAction.start.clientX this.currentDistance = this.distance + this.progressLen - if (this.currentDistance < Math.round(this.barWidth / this.max)) { + if (this.currentDistance < 0) { this.currentDistance = 0 } @@ -118,9 +118,9 @@ export class BrightnessSlider extends StarBaseElement { (this.currentDistance * this.max) / this.barWidth ) - if (this.value < this.min) { - this.value = this.min - } + // if (this.value < this.min) { + // this.value = this.min + // } if (preValue !== this.value) { this.dispatchEvent( diff --git a/src/components/icon-control-bar/icon-control-bar.ts b/src/components/icon-control-bar/icon-control-bar.ts index 7215e4d..d30c833 100644 --- a/src/components/icon-control-bar/icon-control-bar.ts +++ b/src/components/icon-control-bar/icon-control-bar.ts @@ -76,8 +76,6 @@ export class IconControlBar extends StarBaseElement { class="icon-button icon-base without-border" data-icon=${this.icon} @click=${this} - @touchstart=${this} - @touchend=${this} > ` } @@ -157,6 +155,7 @@ export class IconControlBar extends StarBaseElement { isActive = target.classList.contains('active') this.activeOrInactive(isActive, target) this.fireEvent(isActive) + return } // if (this.type == IconControlBarType.WITH_STATE) { @@ -176,6 +175,8 @@ export class IconControlBar extends StarBaseElement { this.iconBtn.classList.remove('actived') this.fireEvent() }, 200) + } else { + this.fireEvent() } } diff --git a/src/components/notification-group/notification-group.ts b/src/components/notification-group/notification-group.ts index 8e0a519..1723a04 100644 --- a/src/components/notification-group/notification-group.ts +++ b/src/components/notification-group/notification-group.ts @@ -108,11 +108,11 @@ export class StarNotificationGroup extends LitElement { } firstUpdated() { - this.show = false - let id = window.setTimeout(() => { - window.clearTimeout(id) - this.dispatchEventFurther() - }, 300) + // this.show = false + // let id = window.setTimeout(() => { + // window.clearTimeout(id) + // this.dispatchEventFurther() + // }, 300) } @eventOptions({passive: false}) @@ -188,6 +188,8 @@ export class StarNotificationGroup extends LitElement { let firstChild = slotElements[0] as StarNotification firstChild.count = slotLen + let style = window.getComputedStyle(firstChild).height + this._singleHeight = parseInt(style.split('px')[0]) if (slotLen == 1) { // group中只有一条消息，应该转为'one-notification'类型，并折叠 firstChild.setAttribute( @@ -210,6 +212,8 @@ export class StarNotificationGroup extends LitElement { } else { // 折叠 this.addGroupHeight(0) + // this.style.setProperty('--single-noti-bgc', 'var(--notification-bgc)') + // this.setAttribute('removeBackground', 'true') firstChild.setAttribute('radiusType', 'border-radius') firstChild.setAttribute( 'notificationType', @@ -270,11 +274,15 @@ export class StarNotificationGroup extends LitElement { if (isShow) { // 当前是展开状态，点击需折叠 this.show = false + // this.style.setProperty('--single-noti-bgc', 'var(--notification-bgc)') + // this.setAttribute('removeBackground', 'true') firstChild.setAttribute('radiusType', 'border-radius') firstChild.withArrowUp = false firstChild.setAttribute('notificationType', 'more-notifiactions-first') } else { this.show = true + // this.style.setProperty('--single-noti-bgc', 'transparent') + // this.setAttribute('removeBackground', 'false') firstChild.setAttribute('radiusType', 'top-border-radius') firstChild.withArrowUp = true firstChild.setAttribute('notificationType', 'more-notifiactions') @@ -310,23 +318,11 @@ export class StarNotificationGroup extends LitElement { }) 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.show = false - self.preventDefaultBehavior(true) - } - ;(element as StarNotification).classList.remove('animation-out') - element.removeEventListener('animationend', tEnd) - }) - } - }) + this.show = false + this.preventDefaultBehavior(true) } } diff --git a/src/components/notification/notification.ts b/src/components/notification/notification.ts index 755f691..547ee79 100644 --- a/src/components/notification/notification.ts +++ b/src/components/notification/notification.ts @@ -349,7 +349,7 @@ export class StarNotification extends StarBaseElement { role="link" data-id=${this.data_id} > - +
${this.title}
diff --git a/src/components/notification/notificationstyle.ts b/src/components/notification/notificationstyle.ts index bc0be5b..babb9fb 100644 --- a/src/components/notification/notificationstyle.ts +++ b/src/components/notification/notificationstyle.ts @@ -91,7 +91,7 @@ export const sharedStyles: CSSResult = css` font-family: 'OPPOSans'; font-style: normal; width: 90.2%; - height: 18.4%; + height: 22%; left: 9.8%; top: 24%; }