diff --git a/src/components/battery/battery-styles.ts b/src/components/battery/battery-styles.ts index 75fadac..b94a4aa 100644 --- a/src/components/battery/battery-styles.ts +++ b/src/components/battery/battery-styles.ts @@ -18,8 +18,8 @@ export const sharedStyles: CSSResult = css` #fafafa 20.46%, #d5daf2 90.45% ); - box-shadow: 0px 0.92vw 2.3vw rgba(0, 0, 0, 0.08); - border-radius: 4.6vw; + box-shadow: 0px var(--shadow-one) var(--shadow-two) rgba(0, 0, 0, 0.08); + border-radius: var(--container-radius); justify-content: space-between; align-items: center; overflow: hidden; @@ -32,7 +32,6 @@ export const sharedStyles: CSSResult = css` top: 0%; bottom: 0%; background: linear-gradient(152.36deg, #6be4d0 8.74%, #10a775 82.29%); - border-radius: 4.6vw 0px 0px 4.6vw; display: flex; } @@ -41,8 +40,7 @@ export const sharedStyles: CSSResult = css` left: 12%; font-style: normal; font-weight: 400; - font-size: 11.5vw; - line-height: 15.18vw; + font-size: var(--number-size); color: #ebc883; } @@ -50,8 +48,7 @@ export const sharedStyles: CSSResult = css` position: absolute; left: var(--percent-left); font-weight: 400; - font-size: 5.98vw; - line-height: 5.98vw; + font-size: var(--percent-size); color: #ebc883; padding-block-start: 4.5%; } @@ -71,8 +68,8 @@ export const sharedStyles: CSSResult = css` rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100% ); - width: 5.52vw; - height: 5.52vw; + width: var(--bubbles); + height: var(--bubbles); border-radius: 50%; opacity: 0.5; animation: flying 10s ease-in infinite; @@ -80,24 +77,24 @@ export const sharedStyles: CSSResult = css` @keyframes flying { 0% { - top: 90%; + bottom: -10%; transform: translateX(0vw); } 25% { - transform: translateX(5.75vw); + transform: translateX(var(--first)); } 50% { - transform: translateX(17.25vw); + transform: translateX(var(--second)); } 75% { - transform: translateX(-5.75vw); + transform: translateX(var(--third)); } 88% { - transform: translateX(-8.74vw); + transform: translateX(var(--forth)); } 100% { - top: 0%; - transform: translateX(-11.5vw); + bottom: 90%; + transform: translateX(var(--fifth)); } } @@ -106,8 +103,8 @@ export const sharedStyles: CSSResult = css` animation-delay: 0s; } .bubbles:nth-child(2) { - width: 4.14vw; - height: 4.14vw; + width: var(--one); + height: var(--one); left: 10%; animation-duration: 8s; animation-delay: 1s; @@ -118,8 +115,8 @@ export const sharedStyles: CSSResult = css` animation-delay: 2s; } .bubbles:nth-child(4) { - width: 2.3vw; - height: 2.3vw; + width: var(--two); + height: var(--two); animation-duration: 6s; animation-delay: 0s; } @@ -130,8 +127,8 @@ export const sharedStyles: CSSResult = css` } .bubbles:nth-child(6) { left: 80%; - width: 4.14vw; - height: 4.14vw; + width: var(--one); + height: var(--one); animation-duration: 6s; animation-delay: 1s; } @@ -142,8 +139,8 @@ export const sharedStyles: CSSResult = css` } .bubbles:nth-child(8) { right: 90%; - width: 2.3vw; - height: 2.3vw; + width: var(--two); + height: var(--two); animation-duration: 9s; animation-delay: 0s; } @@ -182,8 +179,8 @@ export const sharedStyles: CSSResult = css` rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100% ); - width: 5.52vw; - height: 5.52vw; + width: var(--bubbles); + height: var(--bubbles); border-radius: 50%; opacity: 0.5; animation: flying-vertical 10s ease-in infinite; @@ -194,20 +191,20 @@ export const sharedStyles: CSSResult = css` transform: translateY(0vw); } 25% { - transform: translateY(5.75vw); + transform: translateY(var(--first)); } 50% { - transform: translateY(17.25vw); + transform: translateY(var(--second)); } 75% { - transform: translateY(-5.75vw); + transform: translateY(var(--third)); } 88% { - transform: translateY(-8.74vw); + transform: translateY(var(--forth)); } 100% { left: 90%; - transform: translateY(-11.5vw); + transform: translateY(var(--fifth)); } } @@ -216,8 +213,8 @@ export const sharedStyles: CSSResult = css` animation-delay: 0s; } .bubbles_vertical:nth-child(2) { - width: 4.14vw; - height: 4.14vw; + width: var(--one); + height: var(--one); top: 10%; animation-duration: 8s; animation-delay: 1s; @@ -228,8 +225,8 @@ export const sharedStyles: CSSResult = css` animation-delay: 2s; } .bubbles_vertical:nth-child(4) { - width: 2.3vw; - height: 2.3vw; + width: var(--two); + height: var(--two); animation-duration: 6s; animation-delay: 0s; } @@ -240,8 +237,8 @@ export const sharedStyles: CSSResult = css` } .bubbles_vertical:nth-child(6) { top: 80%; - width: 4.14vw; - height: 4.14vw; + width: var(--one); + height: var(--one); animation-duration: 6s; animation-delay: 1s; } @@ -252,8 +249,8 @@ export const sharedStyles: CSSResult = css` } .bubbles_vertical:nth-child(8) { bottom: 90%; - width: 2.3vw; - height: 2.3vw; + width: var(--two); + height: var(--two); animation-duration: 9s; animation-delay: 0s; } diff --git a/src/components/battery/battery.ts b/src/components/battery/battery.ts index bf4d095..99fe8c5 100644 --- a/src/components/battery/battery.ts +++ b/src/components/battery/battery.ts @@ -1,6 +1,7 @@ import {html, LitElement, CSSResultArray} from 'lit' import {customElement, property, query} from 'lit/decorators.js' import {sharedStyles} from './battery-styles' +import lightning from './svg/lightning.svg' @customElement('star-battery') export class StarBattery extends LitElement { @@ -12,6 +13,8 @@ export class StarBattery extends LitElement { @property({type: Boolean, reflect: true}) charge = false + @query('.container') _container: any + @query('.power') _power: any @query('.percent') _percent: any @@ -31,20 +34,18 @@ export class StarBattery extends LitElement { if (newValue !== null) { for (var i = 0; i < 20; i++) { const bubbles = document.createElement('span') - if (this.vertical == true) { - bubbles.className = 'bubbles_vertical' - this._power.append(bubbles) - } else { - bubbles.className = 'bubbles' - this._power.append(bubbles) - } + bubbles.className = 'bubbles' + this._container.append(bubbles) } } else { - this._power.innerHTML = '' + this.shadowRoot + ?.querySelectorAll('.bubbles') + .forEach((span) => span.remove()) } break case 'percent': if (newValue !== null) { + this.percent = newValue this.style.setProperty('--power-right', 100 - this.percent + '%') if (this.percent == 0) { this.style.setProperty('--percent-left', '19.5%') @@ -64,8 +65,29 @@ export class StarBattery extends LitElement { } } - protected firstUpdated(): void { - this.charge = true + protected resize() { + var width = this._container.clientWidth + this.style.setProperty('--number-size', width / 9 + 'px') + this.style.setProperty('--percent-size', width / 17.4 + 'px') + this.style.setProperty('--container-radius', width / 22.6 + 'px') + this.style.setProperty('--shadow-one', width / 113 + 'px') + this.style.setProperty('--shadow-two', width / 45.2 + 'px') + this.style.setProperty('--bubbles', width / 18.8 + 'px') + this.style.setProperty('--power-other', width / 18.8 + 'px') + this.style.setProperty('--one', width / 25 + 'px') + this.style.setProperty('--two', width / 45.2 + 'px') + this.style.setProperty('--first', width / 18.08 + 'px') + this.style.setProperty('--second', width / 6.03 + 'px') + this.style.setProperty('--third', -(width / 18.08) + 'px') + this.style.setProperty('--forth', -(width / 11.9) + 'px') + this.style.setProperty('--fifth', -(width / 9.04) + 'px') + } + + protected firstUpdated() { + this.resize() + window.addEventListener('resize', () => { + this.resize() + }) } render() { @@ -75,7 +97,7 @@ export class StarBattery extends LitElement {
${Math.round(this.percent)} % - + ` diff --git a/src/components/battery/svg/lightning.svg b/src/components/battery/svg/lightning.svg new file mode 100644 index 0000000..3502edc --- /dev/null +++ b/src/components/battery/svg/lightning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 6b145da..21a791d 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -40,6 +40,7 @@ export class StarButton extends StarBaseElement { @property({type: String}) treatment = '' @property({type: String}) icon = 'bug' @property({type: String}) iconcolor = '' + @property({type: String}) fontsize = '' getBaseButton(): HTMLTemplateResult { return html` @@ -59,9 +60,16 @@ export class StarButton extends StarBaseElement { } getIconOnlyButton(): HTMLTemplateResult { - return html` + if(this.fontsize){ + return html` + + ` + }else { + return html` ` + } + } getConfirmButton(): HTMLTemplateResult { diff --git a/src/components/digicipher/README.md b/src/components/digicipher/README.md index c98032f..a9e8f11 100644 --- a/src/components/digicipher/README.md +++ b/src/components/digicipher/README.md @@ -14,14 +14,17 @@ ``` ``` - -1. `saveMode` 属性代表存储模式，更改密码、确认密码后存储新密码 - +2. `saveMode` 属性代表存储模式，更改密码、确认密码后存储新密码 ``` ``` -## 发送事件 + + + + + + 解锁成功：`star-digicipher-unlocksuccess` **value:** `this.passwd`
解锁 5 次失败，跳转已锁定：`star-digicipher-locked` **value:** `false`
diff --git a/src/components/notification/notification.ts b/src/components/notification/notification.ts index 747b31a..222e0a4 100644 --- a/src/components/notification/notification.ts +++ b/src/components/notification/notification.ts @@ -44,7 +44,7 @@ export class StarNotification extends LitElement { // 仅more-notifiactions-first有 @property({type: String}) secondTitle = '' @property({type: String}) secondText = '' - + @property({type: Boolean}) isToast = false @query('.notification') notification!: HTMLDivElement @query('.btn-tool') btnTool!: HTMLDivElement @query('.arrow-up') arrowUp!: HTMLDivElement @@ -130,42 +130,75 @@ export class StarNotification extends LitElement { this.notificationType == 'more-notifiactions' ? this.radiusType : 'border-radius' - - return html` -
-
- -
-
${this.title}
- - ${this.timestamp} - + if (!this.isToast) { + return html` +
+
+ +
+
${this.title}
+ + ${this.timestamp} + +
+
+
${this.text}
+ + ${arrowShow} +
-
-
${this.text}
- - ${arrowShow} +
+
+
-
-
-
+ ` + } else { + return html` +
+
+ +
+
${this.title}
+ + ${this.timestamp} + +
+
+
${this.text}
+ + ${arrowShow} +
+
-
- ` + ` + } } getmorefirst(): HTMLTemplateResult | typeof nothing { @@ -250,123 +283,92 @@ export class StarNotification extends LitElement { @eventOptions({passive: false}) handleEvent(event: TouchEvent) { - switch (event.type) { - case 'touchstart': - this.touchAction.start.clientX = event.touches[0].clientX - this.btnTool.style.visibility = 'visiable' - break - case 'touchmove': - event.preventDefault() - let deleteBtn = this.btnTool.children[0] as HTMLElement - let settingsBtn = this.btnTool.children[1] as HTMLElement - this.touchAction.last.clientX = event.touches[0].clientX - let touchPosX = - this.touchAction.last.clientX - this.touchAction.start.clientX - // if (Math.abs(touchPosX) > 266) { - // touchPosX = 266; - // } - - // this.notification.style.transform = 'translateX(' + touchPosX + 'px)'; - if (touchPosX < 0) { - // if (Math.abs(touchPosX) > 18) { - // (this.btnTool.children[1] as HTMLElement).style.visibility = "visible"; - // } - // if (Math.abs(touchPosX) > 142) { - // (this.btnTool.children[0] as HTMLElement).style.visibility = "visible"; + if (!this.isToast) { + switch (event.type) { + case 'touchstart': + this.touchAction.start.clientX = event.touches[0].clientX + this.btnTool.style.visibility = 'visiable' + break + case 'touchmove': + event.preventDefault() + let deleteBtn = this.btnTool.children[0] as HTMLElement + let settingsBtn = this.btnTool.children[1] as HTMLElement + this.touchAction.last.clientX = event.touches[0].clientX + let touchPosX = + this.touchAction.last.clientX - this.touchAction.start.clientX + // if (Math.abs(touchPosX) > 266) { + // touchPosX = 266; // } - // if (Math.abs(touchPosX) > 222) { - // (this.btnTool.children[1] as HTMLElement).style.opacity = "1"; - // (this.btnTool.children[0] as HTMLElement).style.opacity = "1"; - // } - let translateX - if (screen.width >= 900) { - translateX = 266 - } else if (screen.width >= 600) { - translateX = 133 - } else { - translateX = 88 - } - this.notification.style.transform = - 'translateX(-' + translateX + 'px)' - let self = this - this.notification.addEventListener( - 'transitionend', - function tranEnd() { - self.notification.removeEventListener('transitionend', tranEnd) - deleteBtn.style.visibility = 'visible' - settingsBtn.style.visibility = 'visible' - deleteBtn.style.opacity = '1' - settingsBtn.style.opacity = '1' + // this.notification.style.transform = 'translateX(' + touchPosX + 'px)'; + if (touchPosX < 0) { + // if (Math.abs(touchPosX) > 18) { + // (this.btnTool.children[1] as HTMLElement).style.visibility = "visible"; + // } + // if (Math.abs(touchPosX) > 142) { + // (this.btnTool.children[0] as HTMLElement).style.visibility = "visible"; + // } + + // if (Math.abs(touchPosX) > 222) { + // (this.btnTool.children[1] as HTMLElement).style.opacity = "1"; + // (this.btnTool.children[0] as HTMLElement).style.opacity = "1"; + // } + let translateX + if (screen.width >= 900) { + translateX = 266 + } else if (screen.width >= 600) { + translateX = 133 + } else { + translateX = 88 } - ) - } else if (touchPosX > 0) { - // if (touchPosX > 44) { - // (this.btnTool.children[0] as any).style.opacity = 0.6; - // } - - // if (touchPosX > 124) { - // (this.btnTool.children[0] as any).style.visibility = "hidden"; - // } - - // if (touchPosX > 168) { - // (this.btnTool.children[1] as any).style.opacity = 0.6; - // } - - // if (touchPosX > 248) { - // (this.btnTool.children[1] as any).style.visibility = "hidden"; - // } - deleteBtn.style.visibility = 'hidden' - settingsBtn.style.visibility = 'hidden' - this.notification.style.transform = 'translateX(' + 0 + 'px)' - } - break - case 'touchend': - break - case 'click': - event.stopPropagation() - let self = this - let target = event.target as HTMLElement - switch (target.dataset.icon) { - case 'delete': - target.setAttribute('clicked', 'true') - target.addEventListener('transitionend', function tranEnd() { - target.removeEventListener('transitionend', tranEnd) - target.removeAttribute('clicked') - self.dispatchEvent( - new CustomEvent('notification-delete', { - detail: { - id: self.id, - notification: self, - }, - bubbles: true, - composed: true, - }) - ) - }) - break - case 'settings': - target.setAttribute('clicked', 'true') - target.addEventListener('transitionend', function tranEnd() { - target.removeEventListener('transitionend', tranEnd) - target.removeAttribute('clicked') - self.dispatchEvent( - new CustomEvent('notification-settings-configure', { - bubbles: true, - composed: true, - }) - ) - }) - break - default: - this.notification.setAttribute('clicked', 'true') + this.notification.style.transform = + 'translateX(-' + translateX + 'px)' + let self = this this.notification.addEventListener( 'transitionend', function tranEnd() { self.notification.removeEventListener('transitionend', tranEnd) - self.notification.removeAttribute('clicked') + deleteBtn.style.visibility = 'visible' + settingsBtn.style.visibility = 'visible' + deleteBtn.style.opacity = '1' + settingsBtn.style.opacity = '1' + } + ) + } else if (touchPosX > 0) { + // if (touchPosX > 44) { + // (this.btnTool.children[0] as any).style.opacity = 0.6; + // } + + // if (touchPosX > 124) { + // (this.btnTool.children[0] as any).style.visibility = "hidden"; + // } + + // if (touchPosX > 168) { + // (this.btnTool.children[1] as any).style.opacity = 0.6; + // } + + // if (touchPosX > 248) { + // (this.btnTool.children[1] as any).style.visibility = "hidden"; + // } + deleteBtn.style.visibility = 'hidden' + settingsBtn.style.visibility = 'hidden' + this.notification.style.transform = 'translateX(' + 0 + 'px)' + } + break + case 'touchend': + break + case 'click': + event.stopPropagation() + let self = this + let target = event.target as HTMLElement + switch (target.dataset.icon) { + case 'delete': + target.setAttribute('clicked', 'true') + target.addEventListener('transitionend', function tranEnd() { + target.removeEventListener('transitionend', tranEnd) + target.removeAttribute('clicked') self.dispatchEvent( - new CustomEvent('notification-click', { + new CustomEvent('notification-delete', { detail: { id: self.id, notification: self, @@ -375,11 +377,47 @@ export class StarNotification extends LitElement { composed: true, }) ) - } - ) - break - } - break + }) + break + case 'settings': + target.setAttribute('clicked', 'true') + target.addEventListener('transitionend', function tranEnd() { + target.removeEventListener('transitionend', tranEnd) + target.removeAttribute('clicked') + self.dispatchEvent( + new CustomEvent('notification-settings-configure', { + bubbles: true, + composed: true, + }) + ) + }) + break + default: + this.notification.setAttribute('clicked', 'true') + this.notification.addEventListener( + 'transitionend', + function tranEnd() { + self.notification.removeEventListener( + 'transitionend', + tranEnd + ) + self.notification.removeAttribute('clicked') + self.dispatchEvent( + new CustomEvent('notification-click', { + detail: { + id: self.id, + notification: self, + }, + bubbles: true, + composed: true, + }) + ) + } + ) + break + } + break + } } } diff --git a/src/components/pattern-view/README.md b/src/components/pattern-view/README.md index 9048422..6f89780 100644 --- a/src/components/pattern-view/README.md +++ b/src/components/pattern-view/README.md @@ -23,14 +23,20 @@ ### 默认 -``` +```js ``` +### `saveMode` 属性代表存储模式，绘制图案、确认图案后存储新图案密码 + +```js + +``` ### 距离顶部的位置 `topDir` 默认`217.5px` -``` +```js ``` + diff --git a/src/components/pattern-view/pattern-view.ts b/src/components/pattern-view/pattern-view.ts index 3446e03..bd926d5 100644 --- a/src/components/pattern-view/pattern-view.ts +++ b/src/components/pattern-view/pattern-view.ts @@ -1,4 +1,4 @@ -import {html, LitElement, css, PropertyValueMap} from 'lit' +import {html, LitElement, css, CSSResultArray, PropertyValueMap} from 'lit' import {customElement, property, query} from 'lit/decorators.js' // import {sharedStyles} from './pattern-view-style' @@ -13,6 +13,24 @@ export class StarPatternView extends LitElement { canvas { margin-top: var(--top-dir); } + p { + position: absolute; + font-family: 'OPPOSans'; + font-style: normal; + font-weight: 400; + color: #292929; + font-family: 'OPPOSans'; + margin-top: 0; + color: #292929; + font-size: 20px; + height: 26.5px; + line-height: 26.5px; + width: 150px; + left: 50%; + top: 31%; + transform: translateX(-50%); + text-align: center; + } ` // public static override get styles(): CSSResultArray { // return [sharedStyles] @@ -29,6 +47,8 @@ export class StarPatternView extends LitElement { this.Draw() } } + @property({type: Boolean}) saveMode = false + @property({type: Boolean}) confirm = false @property({type: Number}) top = 0 @property({type: Number}) R = 35 @property({type: Number}) X = 0 @@ -38,8 +58,11 @@ export class StarPatternView extends LitElement { @property({type: Number}) OffsetX = document.body.offsetWidth / 3.5 @property({type: Number}) OffsetY = document.body.offsetWidth / 3.5 @property({type: Array}) circleArr: {X: number; Y: number}[] = [] - @property({type: Array}) pwdArr: number[] = [] - @property({type: Array}) passwdArr = [0, 1, 2, 5, 4, 3] + @property({type: Array}) passwd: number[] = [] + @property({type: Array}) savewd: number[] = [] + @property({type: Array}) passwdArr = [] + @property({type: String}) mode = '' + @property({type: String}) changeText = '' @property({type: String}) get topDir() { return this._topDir @@ -52,7 +75,7 @@ export class StarPatternView extends LitElement { render() { return html` - +

${this.changeText}

1) { + if (this.passwd.length > 1) { this.cxt.beginPath() - for (var i = 0; i < this.pwdArr.length; i++) { - var pointIndex = this.pwdArr[i] + for (var i = 0; i < this.passwd.length; i++) { + var pointIndex = this.passwd[i] this.cxt.lineTo( this.circleArr[pointIndex].X, this.circleArr[pointIndex].Y @@ -106,7 +160,7 @@ export class StarPatternView extends LitElement { this.cxt.stroke() this.cxt.closePath() if (touchPoint != null) { - var lastPointIndex = this.pwdArr[this.pwdArr.length - 1] + var lastPointIndex = this.passwd[this.passwd.length - 1] var lastPoint = this.circleArr[lastPointIndex] this.cxt.beginPath() this.cxt.moveTo(lastPoint.X, lastPoint.Y) @@ -130,7 +184,7 @@ export class StarPatternView extends LitElement { this.cxt.closePath() this.cxt.fill() //滑动后小圆的颜色 - if (this.pwdArr.indexOf(i) >= 0) { + if (this.passwd.indexOf(i) >= 0) { this.cxt.fillStyle = this.getRed ? '#FF4040' : '#333333' this.cxt.beginPath() this.cxt.arc(Point.X, Point.Y, this.R - 26, 0, Math.PI * 2, true) @@ -140,26 +194,61 @@ export class StarPatternView extends LitElement { } } - getSelectPwd(touches: any, pwdArr: number[]) { + getSelectPwd(touches: any, passwd: number[]) { for (var i = 0; i < this.circleArr.length; i++) { var currentPoint = this.circleArr[i] var xdiff = Math.abs(currentPoint.X - touches.pageX) /******** this.top = canvas向下移动的距离 **********/ var ydiff = Math.abs(currentPoint.Y - touches.pageY + this.top) var dir = Math.pow(xdiff * xdiff + ydiff * ydiff, 0.5) - if (dir > this.R || pwdArr.indexOf(i) >= 0) continue - pwdArr.push(i) + if (dir > this.R || passwd.indexOf(i) >= 0) continue + passwd.push(i) break } } - touchStart(e: TouchEvent) { + changePasswd() { + this.savewd = this.passwd + console.log('请确认密码', this.savewd.toString()) + this.confirm = true + this.changeText = '请确认图案' + console.log('###', this.passwd) + + this.dispatchEvent( + new CustomEvent('star-pattern-view-settings-change', { + detail: { + value: this.passwd, + }, + bubbles: true, + composed: true, + }) + ) + } + confirmPasswd() { + if (this.savewd.toString() == this.passwd.toString()) { + console.log('###', this.passwd) + this.dispatchEvent( + new CustomEvent('star-pattern-view-settings-confirm', { + detail: { + value: this.passwd, + }, + bubbles: true, + composed: true, + }) + ) + } else { + this.changeText = '请重新绘制图案' + console.log('###', this.passwd) + this.confirm = false + this.passwd = [] + } + } + touchStart(_e: TouchEvent) { this.getRed = false - this.getSelectPwd(e.touches[0], this.pwdArr) } touchMove(e: TouchEvent) { e.preventDefault() var touches = e.touches[0] - this.getSelectPwd(touches, this.pwdArr) + this.getSelectPwd(touches, this.passwd) // 清除画布,0,0代表从什么位置开始,canvasWidth,canvasHeight代表清除的宽度和高度 this.cxt = this.canvas.getContext('2d')! this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) @@ -171,21 +260,29 @@ export class StarPatternView extends LitElement { } touchEnd(_e: TouchEvent) { this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) - this.Draw() - // if (this.pwdArr.toString() == this.passwdArr.toString()) { - // console.log('密码正确', this.passwdArr.toString()) - // } else { - // this.getRed = true - // console.log('密码错误', this.pwdArr.toString()) - // this.Draw() - // } - this.getRed = true - this.pwdArr = [] - this.dispatchEvent( - new TouchEvent('end', { - composed: true, - }) - ) - return this.passwdArr + //进入存储模式 + if (this.saveMode) { + this.getRed = false + if (!this.confirm) { + this.changePasswd() + } else { + this.confirmPasswd() + } + this.passwd = [] + this.Draw() + } else { + console.log('$$$', this.passwd) + this.dispatchEvent( + new CustomEvent('star-pattern-view-passwd', { + detail: { + value: this.passwd, + }, + bubbles: true, + composed: true, + }) + ) + this.passwd = [] + this.Draw() + } } } diff --git a/src/components/weather/README.md b/src/components/weather/README.md new file mode 100644 index 0000000..a4aa96e --- /dev/null +++ b/src/components/weather/README.md @@ -0,0 +1,39 @@ +# star-weather + +星光 Web 组件——天气组件：weather组件介绍（10 月 08 日) + +## 介绍 + +star-weather 组件主要是用来显示当前天气状况和预测1周内天气详情的组件 +star-weather 属性： + +### 1、type 属性 +天气风格样式类型,type一共包含6种类型，分别为type11、type12、type21、type22、type23和type32，其中 +type="type11"的内容排布为只包含天气图标的样式， +type="type12"的内容排布(从左向右)为包含地理位置信息、温度和对应的天气图标， +type="type21"的内容排布(从上至下)为包含天气图标，地理位置和温度信息， +type="type22"的内容排布(从上至下)为包含地理位置、温度、天气图标、空气质量、体感温度、湿度、风级、能见度、紫外线等详细信息。 +`html demo ` + +### 2、data 属性 + +天气详细信息，其中包含地理位置、温度、日期、天气情况、风级、湿度、空气质量、体感温度、能见度、紫外线等具体信息 +`html demo ` +### 3、自适应布局 +天气组件整体布局设计为自适应布局,可自适应缩放显示天气组件。 +### 4、weatherData数据格式说明 +weatherData = { + location: "", //位置信息 + weatherInfo: [ //天气详情信息，包含天气情况、风级、湿度、空气质量、体感温度、能见度、紫外线等详情信息 + { + date: new Date(), 日期 + …… + }, + { + date: new Date(), + } + ] + } + + + diff --git a/src/components/weather/package.json b/src/components/weather/package.json new file mode 100644 index 0000000..f6868a1 --- /dev/null +++ b/src/components/weather/package.json @@ -0,0 +1,22 @@ +{ + "name": "@star-web-components/weather", + "version": "0.0.1", + "description": "", + "type": "module", + "main": "./index.js", + "module": "./index.js", + "exports": { + ".": { + "default": "./index.js" + }, + "./index": { + "default": "./index.js" + }, + "./weather.js": { + "default": "./weather.js" + }, + "./package.json": "./package.json" + }, + "author": "", + "license": "ISC" +} diff --git a/src/components/weather/svg/Cloudy.svg b/src/components/weather/svg/Cloudy.svg new file mode 100644 index 0000000..0724e45 --- /dev/null +++ b/src/components/weather/svg/Cloudy.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/weather/svg/Noload.svg b/src/components/weather/svg/Noload.svg new file mode 100644 index 0000000..c7f5495 --- /dev/null +++ b/src/components/weather/svg/Noload.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/weather/svg/Overcast48.svg b/src/components/weather/svg/Overcast48.svg new file mode 100644 index 0000000..b8c61b0 --- /dev/null +++ b/src/components/weather/svg/Overcast48.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/weather/svg/Partly Cloudy.svg b/src/components/weather/svg/Partly Cloudy.svg new file mode 100644 index 0000000..74310e6 --- /dev/null +++ b/src/components/weather/svg/Partly Cloudy.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/weather/svg/Partly Cloudy48.svg b/src/components/weather/svg/Partly Cloudy48.svg new file mode 100644 index 0000000..296d8a0 --- /dev/null +++ b/src/components/weather/svg/Partly Cloudy48.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/weather/svg/Sunny.svg b/src/components/weather/svg/Sunny.svg new file mode 100644 index 0000000..73264d5 --- /dev/null +++ b/src/components/weather/svg/Sunny.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/weather/weather-style.ts b/src/components/weather/weather-style.ts new file mode 100644 index 0000000..ff2a73b --- /dev/null +++ b/src/components/weather/weather-style.ts @@ -0,0 +1,148 @@ +import {css, CSSResult} from 'lit' +export const sharedStyles: CSSResult = css` + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + .star-weather-main { + width: 100%; + height: 100%; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + } + /* 背景框 */ + .star-weather { + width: var(--autoWidth--); + min-width: var(--autoWidth--); + height: var(--autoHeight--); + min-height: var(--autoHeight--); + transform: scale(var(--autoScale--)); + border-radius: 20px; + overflow: hidden; + background: linear-gradient( + 137.64deg, + #f5f0f5 0%, + #fafafa 20.46%, + #d5daf2 90.45% + ); + display: flex; + flex-direction: column; + } + .star-weather * { + white-space: nowrap; + } + /* .star-weather-top */ + .star-weather-top { + display: flex; + align-items: center; + justify-content: space-between; + } + .type12 .star-weather-top { + width: 100%; + height: 100%; + } + .type21 .star-weather-top { + width: 100%; + height: 100%; + flex-direction: column-reverse; + align-items: center; + } + .type22 .star-weather-top { + width: 100%; + height: 45%; + /* border:1px solid red; */ + } + /* .star-weather-bottom */ + .star-weather-bottom { + display: flex; + flex-wrap: wrap; + } + .type22 .star-weather-bottom { + height: 50%; + } + /* 天气图标 */ + .star-weather-img { + display: flex; + justify-content: center; + align-items: center; + transform: scale(0.7); + } + .type11 .star-weather-img { + height: 100%; + width: 100%; + } + .type12 .star-weather-img { + height: 100%; + margin-right: 30px; + } + .type21 .star-weather-img { + width: 100%; + } + .type22 .star-weather-img { + height: 90%; + margin-right: 30px; + /* border:1px solid red; */ + } + .weather-img { + width: 100%; + height: 100%; + } + /* 位置温度()*/ + .star-weather-location-temperature { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + .type12 .star-weather-location-temperature { + height: 100%; + margin-left: 47px; + } + .type21 .star-weather-location-temperature { + width: 100%; + margin-bottom: 40px; + } + .type22 .star-weather-location-temperature { + height: 100%; + /* margin-top:10%; */ + margin-left: 47px; + } + .star-weather-location { + text-align: left; + margin-bottom: 10px; + font-size: 22px; + color: rgba(38, 38, 38, 0.45); + } + .type21 .star-weather-location { + text-align: center; + } + .star-weather-temperature { + font-size: 40px; + font-weight: bold; + position: relative; + display: flex; + align-items: center; + } + /* detailType() */ + .detail-today-item { + height: 50%; + width: 31%; + display: flex; + flex-direction: column; + justify-content: center; + padding-left: 47px; + } + .detail-today-item-top { + font-size: 16px; + color: rgba(38, 38, 38, 0.45); + margin-bottom: 5px; + } + .detail-today-item-bottom { + font-size: 26px; + text-align: left; + color: #4d4d4d; + } +` \ No newline at end of file diff --git a/src/components/weather/weather.ts b/src/components/weather/weather.ts new file mode 100644 index 0000000..05c12a3 --- /dev/null +++ b/src/components/weather/weather.ts @@ -0,0 +1,169 @@ +import {html, LitElement, CSSResultArray} from 'lit' +import {customElement, property, query} from 'lit/decorators.js' +import {sharedStyles} from './weather-style' +import Sunny from './svg/Sunny.svg' +import Cloudy from './svg/Cloudy.svg' +import Noload from './svg/Noload.svg' +import PartlyCloudy from './svg/Partly Cloudy.svg' +const weatherMy: Record = { + Sunny: Sunny, + Cloudy: Cloudy, + PartlyCloudy: PartlyCloudy, +} +const typeMy: Record = { + // height / width + type11: '1', + type12: '0.4', + type21: '1.9', + type22: '0.8', + type23: '0.7', + type32: '1.6', +} +const minAll: Record = { + // width + type11: '100', + type12: '400', + type21: '200', + type22: '500', + type23: '600', + type32: '600', +} +@customElement('star-weather') +export class StarWeather extends LitElement { + public static override get styles(): CSSResultArray { + return [sharedStyles] + } + @property({type: String}) type = 'type11' + @property({type: Object}) data = Object() + + @query('.star-weather-main') + starWeather: HTMLDivElement | undefined + + dataBoo() { + return !!Object.keys(this.data).length + } + render() { + return html` +
+
+
+ ${this.locationType()} ${this.weatherType()} +
+
${this.detailType()}
+
+
+ ` + } + weatherType() { + return html` +
+ +
+ ` + } + locationType() { + if (this.type !== 'type11' && typeMy[this.type]) { + return html` +
+
+
+ ${(this.dataBoo() && this.data.location) || ''} +
+
+ ${(this.dataBoo() && this.data.weatherInfo[0]?.temperature?.max) || ''} +
+
+
+ ` + } else { + return '' + } + } + detailType() { + if (this.type === 'type22') { + return html` + + 空气质量 + + ${this.dataBoo() && (this.data.weatherInfo[0]?.airQuality?.value + + this.data.weatherInfo[0]?.airQuality?.type) || ''} + + + + 体感温度 + + ${(this.dataBoo() && + this.data.weatherInfo[0].somatosensoryTemperature) || ''} + + + + 湿度 + + ${(this.dataBoo() && this.data.weatherInfo[0]?.humidity) || ''} + + + + + ${(this.dataBoo() && this.data.weatherInfo[0]?.wind?.label) || '风向'} + + + ${(this.dataBoo() && this.data.weatherInfo[0]?.wind?.value) || ''} + + + + 能见度 + + ${(this.dataBoo() && this.data.weatherInfo[0]?.visibility) || ''} + + + + 紫外线 + + ${(this.dataBoo() && this.data.weatherInfo[0]?.ultravioletRys) || ''} + + + ` + } else { + return '' + } + } + protected firstUpdated() { + this.resize() + window.addEventListener('resize', () => { + this.resize() + }) + } + protected resize() { + let parentHeight, parentWidth + if (this.parentElement){ + parentHeight = this.parentElement.offsetHeight + parentWidth = this.parentElement.offsetWidth + }else if(this.parentNode instanceof ShadowRoot){ + parentHeight=(this.parentNode.host as HTMLElement).offsetHeight + parentWidth=(this.parentNode.host as HTMLElement).offsetWidth + } + let height = parentHeight || 10 + let width = parentWidth || 10 + // console.log(height,width,'111111111') + // this.style.setProperty('--autoWidth2--', width + 'px') + // this.style.setProperty('--autoHeight2--', height + 'px') + let proportion: any = typeMy[this.type] + let minOne: any = minAll[this.type] + this.style.setProperty('--autoWidth--', minOne + 'px') + this.style.setProperty('--autoHeight--', minOne * proportion + 'px') + if (height / width >= proportion) { + this.style.setProperty('--autoScale--', width / minOne + '') + } else { + this.style.setProperty('--autoScale--', height / (minOne * proportion) + '') + } + } +} +declare global { + interface HTMLElementTagNameMap { + 'star-weather': StarWeather + } +} \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 5f18aec..7b7eb9e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -12,6 +12,7 @@ import './components/radio/radio-group' import './components/radio/radio' import './components/confirm/confirm' import './components/clock/clock' +import './components/weather/weather' import './components/toast/toast' import './components/picker/picker' import './components/overflowmenu/overflowmenu' diff --git a/src/test/panels/battery/battery.ts b/src/test/panels/battery/battery.ts index 680d98d..f02dae4 100644 --- a/src/test/panels/battery/battery.ts +++ b/src/test/panels/battery/battery.ts @@ -1,20 +1,25 @@ -import {html, LitElement, CSSResultArray, css} from 'lit' +import {html, LitElement, CSSResultArray, css, PropertyValueMap} from 'lit' import {customElement, query} from 'lit/decorators.js' import {sharedStyles} from '../../../components/battery/battery-styles' @customElement('panel-battery') export class PanelBattery extends LitElement { @query('#container') container!: HTMLElement + @query('star-battery') battery!: HTMLElement render() { return html` -
- -
+ ` } + protected firstUpdated( + _changedProperties: PropertyValueMap | Map + ): void { + ;(window as any).battery = this.battery + } + public static override get styles(): CSSResultArray { return [ sharedStyles, diff --git a/src/test/panels/button/button.ts b/src/test/panels/button/button.ts index b99e107..a2bd6ec 100644 --- a/src/test/panels/button/button.ts +++ b/src/test/panels/button/button.ts @@ -10,7 +10,7 @@ export class PanelButton extends LitElement { return html` - + diff --git a/src/test/panels/pattern-view/pattern-view.ts b/src/test/panels/pattern-view/pattern-view.ts index 19b1be3..8b87344 100644 --- a/src/test/panels/pattern-view/pattern-view.ts +++ b/src/test/panels/pattern-view/pattern-view.ts @@ -14,7 +14,7 @@ export class PanelPatternView extends LitElement { ` render() { return html` - + ` } diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts index 59e7730..8de14da 100644 --- a/src/test/panels/root.ts +++ b/src/test/panels/root.ts @@ -21,6 +21,7 @@ import './container/container' import './radio/radio' import './confirm/confirm' import './clock/clock' +import './weather/weather' import './overflowmenu/overflowmenu' import './switch/switch' import './slider/slider' @@ -317,6 +318,14 @@ export class PanelRoot extends LitElement { iconcolor="green" href="#clock" > +
+ diff --git a/src/test/panels/weather/weather.ts b/src/test/panels/weather/weather.ts new file mode 100644 index 0000000..10bc3e2 --- /dev/null +++ b/src/test/panels/weather/weather.ts @@ -0,0 +1,53 @@ +import {html, css, LitElement} from 'lit' +import {customElement, query, state} from 'lit/decorators.js' +import {StarWeather} from '../../../components/weather/weather.js' +import {weatherData} from './weatherData.js' +@customElement('panel-weather') +export class PanelWeather extends LitElement { + @state() + foo = '' + @state() + data = Array() + @query('#type11') weatherDemo1!: StarWeather + @query('#type12') weatherDemo2!: StarWeather + @query('#type21') weatherDemo3!: StarWeather + @query('#type22') weatherDemo4!: StarWeather + render() { + return html` +
+ + + + +
+ ` + } + static styles = css` + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + ` + protected firstUpdated() { + // this.weatherDemo1.data = weatherData + // this.weatherDemo2.data = weatherData + // this.weatherDemo3.data = weatherData + this.weatherDemo4.data = weatherData + } +} +declare global { + interface HTMLElementTagNameMap { + 'panel-weather': PanelWeather + } +} diff --git a/src/test/panels/weather/weatherData.ts b/src/test/panels/weather/weatherData.ts new file mode 100644 index 0000000..6b33b75 --- /dev/null +++ b/src/test/panels/weather/weatherData.ts @@ -0,0 +1,30 @@ +export const weatherData = { + location: '长沙市', + weatherInfo: [ + { + date: new Date(), + temperature: { + min: '22℃', + max: '29℃', + }, + weather: { + labelZh: '多云', + labelEn: 'PartlyCloudy', + }, + wind: { + label: '南风', + value: '6级', + }, + humidity: '40%', + airQuality: { + label: '空气质量', + value: '28', + type: '优', + }, + somatosensoryTemperature: '32°C', + visibility: '33km', + ultravioletRys: '强', + }, + {}, + ], +} diff --git a/src/widgets/gaia-widget.ts b/src/widgets/gaia-widget.ts index 33fe0d2..0b8b05e 100644 --- a/src/widgets/gaia-widget.ts +++ b/src/widgets/gaia-widget.ts @@ -1,6 +1,8 @@ // import {html, LitElement, css} from 'lit' // import {customElement} from 'lit/decorators.js' +import {StarBaseElement} from '../components/base' + /** * 主屏小组件: * @@ -27,7 +29,12 @@ * 写法（没有