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 4ba9426..1723a04 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
@@ -104,7 +108,11 @@ export class StarNotificationGroup extends LitElement {
}
firstUpdated() {
- this.show = false
+ // this.show = false
+ // let id = window.setTimeout(() => {
+ // window.clearTimeout(id)
+ // this.dispatchEventFurther()
+ // }, 300)
}
@eventOptions({passive: false})
@@ -180,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(
@@ -202,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',
@@ -261,36 +273,16 @@ export class StarNotificationGroup extends LitElement {
let isShow = this.show
if (isShow) {
// 当前是展开状态，点击需折叠
- let self = this
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')
- 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')
- })
- }
- })
+ // 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')
@@ -326,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 91a7a54..babb9fb 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;
@@ -107,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%;
}
@@ -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;
- }
- }
`