openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

features - 调整lock组件的属性

This commit is contained in:
yuanchongjun 2022-12-01 02:01:34 +08:00
parent 46496e96e3
commit c1cd0db959
2 changed files with 56 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/digicipher/digicipher.ts
View File

@ -4,7 +4,13 @@ import {
CSSResultArray, CSSResultArray,
PropertyValueMap, PropertyValueMap,
} from '../base/star-base-element.js' } from '../base/star-base-element.js'
import {customElement, property, query, queryAll} from 'lit/decorators.js' import {
customElement,
property,
query,
queryAll,
state,
} from 'lit/decorators.js'
import {sharedStyles} from './digicipher-style.js' import {sharedStyles} from './digicipher-style.js'
@customElement('star-digicipher') @customElement('star-digicipher')
@ -12,6 +18,7 @@ export class StarLockNumber extends StarBaseElement {
public static override get styles(): CSSResultArray { public static override get styles(): CSSResultArray {
return [sharedStyles] return [sharedStyles]
} }
@state() svmode: boolean = false
@query('#slideUp') slideUp!: HTMLDivElement @query('#slideUp') slideUp!: HTMLDivElement
@queryAll('button') buttons!: NodeListOf<HTMLButtonElement> @queryAll('button') buttons!: NodeListOf<HTMLButtonElement>
@query('zero') zero!: HTMLButtonElement @query('zero') zero!: HTMLButtonElement
@ -24,12 +31,12 @@ export class StarLockNumber extends StarBaseElement {
@query('p') text!: HTMLParagraphElement @query('p') text!: HTMLParagraphElement
@query('.screen') screen!: HTMLDivElement @query('.screen') screen!: HTMLDivElement
@query('.bottomText') bottomText!: HTMLParagraphElement @query('.bottomText') bottomText!: HTMLParagraphElement
@property({type: Boolean}) saveMode = false @property({type: Boolean, reflect: true}) savemode = false
@property({type: String}) verifyError = '' @property({type: String}) verifyError = ''
@property({type: Number}) verifyErrorCounter = 1 @property({type: Number}) verifyErrorCounter = 1
@property({type: String}) cancelNote = '取消' @property({type: String}) cancelNote = '取消'
@property({type: String}) deleteNote = '删除' @property({type: String}) deleteNote = '删除'
@property({type: Boolean}) confirm = false @property({type: Boolean, reflect: true}) confirm = false
@property({type: Number}) tried = 0 @property({type: Number}) tried = 0
@property({type: Number}) time = 0 @property({type: Number}) time = 0
@property({type: Number}) errors = 0 @property({type: Number}) errors = 0
@ -44,10 +51,32 @@ export class StarLockNumber extends StarBaseElement {
@property({type: String}) passwd = '' @property({type: String}) passwd = ''
@property({type: String}) savewd = '' @property({type: String}) savewd = ''
// protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
// super.update(changedProperties)
// if (this.savemode) {
// this.changeText = '请输入数字锁屏密码'
// /* this.slideUp.style.setProperty('top', 'var(--auto-370px)') */
// this.spanContainer.style.setProperty(
// 'margin',
// 'var(--auto-80px) 0 var(--auto-100px) 0'
// )
// this.text.style.setProperty('font-size', 'var(--auto-32px)')
// this.bottomText.style.setProperty('margin-top', 'var(--auto-100px)')
// } else {
// this.changeText = '输入密码'
// }
// for (let i = 0; i < 6; i++) {
// this.savemode
// ? this.changeBgColor('#000000', i, 0.1)
// : this.changeBgColor('#F4F4F4', i, 0.4)
// }
// this.spanContainer.style.visibility = `visible`
// this.parent.style.visibility = `visible`
// }
protected firstUpdated( protected firstUpdated(
_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown> _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
): void { ): void {
if (this.saveMode) { if (this.savemode) {
this.changeText = this.$l('please-enter-the-digital-lockscreen-password') this.changeText = this.$l('please-enter-the-digital-lockscreen-password')
this.spanContainer.style.setProperty( this.spanContainer.style.setProperty(
'margin', 'margin',
@ -59,7 +88,7 @@ export class StarLockNumber extends StarBaseElement {
this.changeText = '输入密码' this.changeText = '输入密码'
} }
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
this.saveMode this.savemode
? this.changeBgColor('#000000', i, 0.1) ? this.changeBgColor('#000000', i, 0.1)
: this.changeBgColor('#F4F4F4', i, 0.4) : this.changeBgColor('#F4F4F4', i, 0.4)
} }
@ -134,7 +163,7 @@ export class StarLockNumber extends StarBaseElement {
this.guess = '' this.guess = ''
this.clicks = 0 this.clicks = 0
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
this.saveMode this.savemode
? this.changeBgColor('#000000', i, 0.1) ? this.changeBgColor('#000000', i, 0.1)
: this.changeBgColor('#F4F4F4', i, 0.4) : this.changeBgColor('#F4F4F4', i, 0.4)
} }
@ -159,7 +188,7 @@ export class StarLockNumber extends StarBaseElement {
} }
//清空密码且删除抖动反馈 //清空密码且删除抖动反馈
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
this.saveMode this.savemode
? this.changeBgColor('#000000', i, 0.1) ? this.changeBgColor('#000000', i, 0.1)
: this.changeBgColor('#F4F4F4', i, 0.4) : this.changeBgColor('#F4F4F4', i, 0.4)
} }
@ -170,7 +199,7 @@ export class StarLockNumber extends StarBaseElement {
this.guess = '' this.guess = ''
this.clicks = 0 this.clicks = 0
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
this.saveMode this.savemode
? this.changeBgColor('#000000', i, 0.1) ? this.changeBgColor('#000000', i, 0.1)
: this.changeBgColor('#F4F4F4', i, 0.4) : this.changeBgColor('#F4F4F4', i, 0.4)
} }
@ -190,7 +219,7 @@ export class StarLockNumber extends StarBaseElement {
this.changeNumberBgColor() this.changeNumberBgColor()
if (this.clicks < 5) { if (this.clicks < 5) {
//圆点变化 //圆点变化
this.saveMode this.savemode
? this.changeBgColor('#000000', this.clicks, 1) ? this.changeBgColor('#000000', this.clicks, 1)
: this.changeBgColor('#F4F4F4', this.clicks, 1) : this.changeBgColor('#F4F4F4', this.clicks, 1)
this.clicks += 1 this.clicks += 1
@ -200,11 +229,11 @@ export class StarLockNumber extends StarBaseElement {
this.guess += (e.target as HTMLElement).dataset.num this.guess += (e.target as HTMLElement).dataset.num
// console.log('guess', this.guess) // console.log('guess', this.guess)
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
this.saveMode this.savemode
? this.changeBgColor('#000000', i, 0.1) ? this.changeBgColor('#000000', i, 0.1)
: this.changeBgColor('#F4F4F4', i, 0.4) : this.changeBgColor('#F4F4F4', i, 0.4)
} }
if (this.saveMode) { if (this.savemode) {
if (!this.confirm) { if (!this.confirm) {
this.changePasswd() this.changePasswd()
} else { } else {
@ -219,7 +248,7 @@ export class StarLockNumber extends StarBaseElement {
} else { } else {
this.clicks -= 1 this.clicks -= 1
this.guess = this.guess.slice(0, -1) this.guess = this.guess.slice(0, -1)
this.saveMode this.savemode
? this.changeBgColor('#000000', this.clicks, 0.1) ? this.changeBgColor('#000000', this.clicks, 0.1)
: this.changeBgColor('#F4F4F4', this.clicks, 0.4) : this.changeBgColor('#F4F4F4', this.clicks, 0.4)
} }
@ -227,7 +256,7 @@ export class StarLockNumber extends StarBaseElement {
//点击取消，返回锁屏 //点击取消，返回锁屏
this.makeZero() this.makeZero()
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
this.saveMode this.savemode
? this.changeBgColor('#000000', i, 0.1) ? this.changeBgColor('#000000', i, 0.1)
: this.changeBgColor('#F4F4F4', i, 0.4) : this.changeBgColor('#F4F4F4', i, 0.4)
} }
@ -257,14 +286,14 @@ export class StarLockNumber extends StarBaseElement {
removeNumberBgColor() { removeNumberBgColor() {
if (this.clickNumber == 0) this.clickNumber = 10 if (this.clickNumber == 0) this.clickNumber = 10
this.buttons[this.clickNumber - 1].classList.remove('block') this.buttons[this.clickNumber - 1].classList.remove('block')
if (this.saveMode) { if (this.savemode) {
this.buttons[this.clickNumber - 1].classList.remove('setting') this.buttons[this.clickNumber - 1].classList.remove('setting')
} }
} }
changeNumberBgColor() { changeNumberBgColor() {
if (this.clickNumber == 0) this.clickNumber = 10 if (this.clickNumber == 0) this.clickNumber = 10
this.buttons[this.clickNumber - 1].classList.add('block') this.buttons[this.clickNumber - 1].classList.add('block')
if (this.saveMode) { if (this.savemode) {
this.buttons[this.clickNumber - 1].classList.add('setting') this.buttons[this.clickNumber - 1].classList.add('setting')
} }
} }
@ -283,7 +312,7 @@ export class StarLockNumber extends StarBaseElement {
this.guess = '' this.guess = ''
this.clicks = 0 this.clicks = 0
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
this.saveMode this.savemode
? this.changeBgColor('#000000', i, 0.1) ? this.changeBgColor('#000000', i, 0.1)
: this.changeBgColor('#F4F4F4', i, 0.4) : this.changeBgColor('#F4F4F4', i, 0.4)
} }
@ -302,7 +331,7 @@ export class StarLockNumber extends StarBaseElement {
this.savewd = this.guess this.savewd = this.guess
this.clicks = 0 this.clicks = 0
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
this.saveMode this.savemode
? this.changeBgColor('#000000', i, 0.1) ? this.changeBgColor('#000000', i, 0.1)
: this.changeBgColor('#F4F4F4', i, 0.4) : this.changeBgColor('#F4F4F4', i, 0.4)
} }
@ -317,7 +346,7 @@ export class StarLockNumber extends StarBaseElement {
this.passwd = this.savewd this.passwd = this.savewd
this.savewd = '' this.savewd = ''
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
this.saveMode this.savemode
? this.changeBgColor('#000000', i, 0.1) ? this.changeBgColor('#000000', i, 0.1)
: this.changeBgColor('#F4F4F4', i, 0.4) : this.changeBgColor('#F4F4F4', i, 0.4)
} }
@ -335,7 +364,7 @@ export class StarLockNumber extends StarBaseElement {
) )
} else { } else {
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
this.saveMode this.savemode
? this.changeBgColor('#000000', i, 0.1) ? this.changeBgColor('#000000', i, 0.1)
: this.changeBgColor('#F4F4F4', i, 0.4) : this.changeBgColor('#F4F4F4', i, 0.4)
} }

16
src/components/pattern-view/pattern-view.ts
View File

@ -32,9 +32,9 @@ export class StarPatternView extends StarBaseElement {
this.Draw() this.Draw()
} }
} }
@property({type: Boolean}) saveMode = false @property({type: Boolean, reflect: true}) savemode = false
@property({type: Boolean}) lessfour = false @property({type: Boolean}) lessfour = false
@property({type: Boolean}) confirm = false @property({type: Boolean, reflect: true}) confirm = false
@property({type: Number}) errors = 0 @property({type: Number}) errors = 0
@property({type: Number}) top = 0 @property({type: Number}) top = 0
@property({type: Number}) R = (35 / 600) * document.body.offsetWidth @property({type: Number}) R = (35 / 600) * document.body.offsetWidth
@ -53,7 +53,7 @@ export class StarPatternView extends StarBaseElement {
@property({type: String}) cancel = '取消' @property({type: String}) cancel = '取消'
@property({type: String}) lessfourinfo = '' @property({type: String}) lessfourinfo = ''
render() { render() {
if (!this.saveMode) { if (!this.savemode) {
return html` return html`
<div id="content"> <div id="content">
<p class="textTop">${this.changeText}</p> <p class="textTop">${this.changeText}</p>
@ -92,7 +92,7 @@ export class StarPatternView extends StarBaseElement {
_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown> _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
): void { ): void {
//settings中，图形密码上下的文字以及图形密码的位置都有所变化 //settings中，图形密码上下的文字以及图形密码的位置都有所变化
if (this.saveMode) { if (this.savemode) {
this.textTop.style.setProperty('margin-bottom', 'var(--auto-100px)') this.textTop.style.setProperty('margin-bottom', 'var(--auto-100px)')
this.text.style.setProperty('font-size', 'var(--auto-32px)') this.text.style.setProperty('font-size', 'var(--auto-32px)')
this.errorinfo.style.setProperty('margin-top', 'var(--auto-100px)') this.errorinfo.style.setProperty('margin-top', 'var(--auto-100px)')
@ -106,7 +106,7 @@ export class StarPatternView extends StarBaseElement {
this.Y = (this.canvasHeight - 2 * this.OffsetY - this.R * 2 * 3) / 2 this.Y = (this.canvasHeight - 2 * this.OffsetY - this.R * 2 * 3) / 2
this.createCirclePoint(this.X, this.Y) this.createCirclePoint(this.X, this.Y)
this.Draw() this.Draw()
this.changeText = this.saveMode this.changeText = this.savemode
? this.$l('please-draw-a-pattern') ? this.$l('please-draw-a-pattern')
: this.$l('draw-a-pattern') : this.$l('draw-a-pattern')
this.addEventListener('passcode-create-success', this) this.addEventListener('passcode-create-success', this)
@ -185,14 +185,14 @@ export class StarPatternView extends StarBaseElement {
}) })
} }
touchEnd(_e: TouchEvent) { touchEnd(_e: TouchEvent) {
if (this.saveMode && this.passwd.length < 4) { if (this.savemode && this.passwd.length < 4) {
this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
this.getRed = true this.getRed = true
this.lessfourinfo = this.$l('connect-at-least-four-points') this.lessfourinfo = this.$l('connect-at-least-four-points')
} else { } else {
this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
//进入存储模式 //进入存储模式
if (this.saveMode) { if (this.savemode) {
this.getRed = false this.getRed = false
if (!this.confirm) { if (!this.confirm) {
this.changePasswd() this.changePasswd()
@ -248,7 +248,7 @@ export class StarPatternView extends StarBaseElement {
//大圆 //大圆
this.cxt.beginPath() this.cxt.beginPath()
this.cxt.arc(Point.X, Point.Y, this.R, 0, Math.PI * 2, true) this.cxt.arc(Point.X, Point.Y, this.R, 0, Math.PI * 2, true)
this.cxt.fillStyle = this.saveMode this.cxt.fillStyle = this.savemode
? 'rgba(0,0,0,0.04)' ? 'rgba(0,0,0,0.04)'
: 'rgba(244,244,244,0.2)' : 'rgba(244,244,244,0.2)'
this.cxt.fill() this.cxt.fill()