Merge branch 'master' into feature-improve-dialog

This commit is contained in:
lvxiangcong 2022-11-12 17:10:46 +08:00
commit fe6aa0b4a7
27 changed files with 503 additions and 727 deletions

View File

@ -262,16 +262,34 @@ export const goback = html`
</svg>
`
// '', 返回按中使用
export const add = html`
<svg viewBox="0 0 48 48" fill="#4D4D4D" xmlns="http://www.w3.org/2000/svg">
<path d="M23 26V37H26V26H37V23H26V11H23V23H11V26H23Z" />
</svg>
`
// '', 返回按中使用
export const personalization = html`
<svg viewBox="0 0 48 48" fill="#4D4D4D" xmlns="http://www.w3.org/2000/svg">
<path
d="M37.6219 13.5813L27.5 7.80625C25.5448 6.73125 23.254 6.73125 21.2988 7.80625L10.3746 13.5813C8.30461 14.7155 7.01044 16.8864 7 19.2521V30.3813C7.01392 32.74 8.30809 34.9074 10.3746 36.0416L20.5 42C21.4776 42.5392 22.925 43 24 43C25.0715 43 26.5224 42.5392 27.5 42L38 36C40.0665 34.8659 40.9896 32.74 41 30.3743V19.2416C40.9861 16.8829 39.6919 14.712 37.6219 13.5813ZM22.5 10.5C23.1019 10.1695 23.839 10 24.5 10C25.161 10 25.8981 10.1695 26.5 10.5L34.5 15.5C34.7505 15.6357 35.7913 16.3156 36 16.5L24.5 23L12 16.5C12.2087 16.3191 13.2495 15.6392 13.5 15.5L22.5 10.5ZM12 33.5C10.7232 32.8007 10.007 31.9473 10 30.5V20C10 19.6973 9.9339 19.2888 10 19L23 26V39C22.7704 38.9235 21.7192 38.6183 21.5 38.5L12 33.5ZM38 30.5C37.993 31.9542 37.7733 32.8007 36.5 33.5L27.5 38.5C27.2773 38.6218 26.2366 38.9235 26 39V26L38 19C38.0661 19.2853 37.9965 19.7008 38 20V30.5Z"
/>
</svg>
`
export type stackInstances = typeof store
export default {
store,
add,
app,
desktopWallpaper,
lockscreen,
privacy,
deletecorner,
desktopWallpaper,
goback,
lockscreen,
personalization,
privacy,
store,
} as {
[key: string]: stackInstances
}

View File

@ -31,25 +31,34 @@ export const autoPxStyle: CSSResult = css`
--auto-46_67px: calc(46.67px / var(--hostDevicePixelRatio));
--auto-48px: calc(48px / var(--hostDevicePixelRatio));
--auto-50px: calc(50px / var(--hostDevicePixelRatio));
--auto-53px: calc(53px / var(--hostDevicePixelRatio));
--auto-56px: calc(56px / var(--hostDevicePixelRatio));
--auto-57_6px: calc(57.6px / var(--hostDevicePixelRatio));
--auto-58px: calc(58px / var(--hostDevicePixelRatio));
--auto-64px: calc(64px / var(--hostDevicePixelRatio));
--auto-66px: calc(66px / var(--hostDevicePixelRatio));
--auto-74px: calc(66px / var(--hostDevicePixelRatio));
--auto-76px: calc(76px / var(--hostDevicePixelRatio));
--auto-80px: calc(80px / var(--hostDevicePixelRatio));
--auto-82px: calc(80px / var(--hostDevicePixelRatio));
--auto-72px: calc(72px / var(--hostDevicePixelRatio));
--auto-76px: calc(76px / var(--hostDevicePixelRatio));
--auto-80px: calc(80px / var(--hostDevicePixelRatio));
--auto-85px: calc(85px / var(--hostDevicePixelRatio));
--auto-88px: calc(88px / var(--hostDevicePixelRatio));
--auto-92px: calc(92px / var(--hostDevicePixelRatio));
--auto-96px: calc(96px / var(--hostDevicePixelRatio));
--auto-112px: calc(112px / var(--hostDevicePixelRatio));
--auto-116px: calc(116px / var(--hostDevicePixelRatio));
--auto-128px: calc(128px / var(--hostDevicePixelRatio));
--auto-152px: calc(152px / var(--hostDevicePixelRatio));
--auto-160px: calc(160px / var(--hostDevicePixelRatio));
--auto-176px: calc(176px / var(--hostDevicePixelRatio));
--auto-200px: calc(200px / var(--hostDevicePixelRatio));
--auto-201px: calc(201px / var(--hostDevicePixelRatio));
--auto-206px: calc(206px / var(--hostDevicePixelRatio));
--auto-208px: calc(208px / var(--hostDevicePixelRatio));
--auto-222px: calc(222px / var(--hostDevicePixelRatio));
--auto-260px: calc(260px / var(--hostDevicePixelRatio));
--auto-310px: calc(310px / var(--hostDevicePixelRatio));
--auto-312px: calc(312px / var(--hostDevicePixelRatio));
@ -59,9 +68,11 @@ export const autoPxStyle: CSSResult = css`
--auto-418px: calc(418px / var(--hostDevicePixelRatio));
--auto-440px: calc(440px / var(--hostDevicePixelRatio));
--auto-472px: calc(440px / var(--hostDevicePixelRatio));
--auto-500px: calc(500px / var(--hostDevicePixelRatio));
--auto-520px: calc(520px / var(--hostDevicePixelRatio));
--auto-524px: calc(520px / var(--hostDevicePixelRatio));
--auto-607px: calc(607px / var(--hostDevicePixelRatio));
--auto-620px: calc(607px / var(--hostDevicePixelRatio));
--auto-815px: calc(815px / var(--hostDevicePixelRatio));
}
`

View File

@ -227,6 +227,9 @@ const baseStyle = css`
/*******************************基础色**************************************/
/* 底色/base白 */
--base-white: #fafafa;
/* 底色/侧栏黑 */
--base-slider-black: #2e2e2e;
--base-normal-bgc: var(--base-white);
/* 底色/base黑 */
--base-black: #1a1a1a;
/****************************主题色汇总*************************************/
@ -284,6 +287,7 @@ const baseStyle = css`
--font-main-white: #f0f0f0;
/* 文字/正文黑 */
--font-main-black: #262626;
--font-normal-color: var(--font-main-black);
/* 文字/底色黑 */
--font-base-black: var(--pure-black);
/* 文字/底色白 */
@ -374,6 +378,16 @@ const baseStyle = css`
}
`
const baseDarkStyle = css`
@media (prefers-color-scheme: light) {
:root {
/****************************文字颜色*************************************/
--font-normal-color: var(--font-secondary-white);
/*****************************基础色**************************************/
--base-normal-bgc: var(--base-slider-black);
}
}
`
/**
*
*/
@ -795,6 +809,7 @@ const darkStyle = css`
export const globalStyles: CSSResultArray = [
baseStyle,
baseDarkStyle,
baseComponentStyle,
homeWidgetStyle,
themeStyle,

View File

@ -62,6 +62,37 @@ function handleContextMenu(e: Event) {
}
}
/**
* 2560:1600=1920:1200=1280:800=16:10
*
* 将以1920:1200devicePixelRatio=1
*
* --devicePixelRatio
*/
function computeNeededDevicePixelRatio(): string {
const defaultRatio = Number(window.devicePixelRatio)
let ratio = 1
const {width, height} = window.screen
const [realWidth, realHeight] = [
width * devicePixelRatio,
height * devicePixelRatio,
]
const currentWidthHeightRatio = Math.max(
realWidth / realHeight,
realHeight / realWidth
)
switch (currentWidthHeightRatio) {
case 1.6: // 16:10
ratio = 1920 / Math.max(realWidth, realHeight)
break
default:
console.log(new Error('The current pixel ratio is not matched'))
}
return (defaultRatio * ratio).toFixed(2)
}
export function StarMixin<T extends Constructor<ReactiveElement>>(
constructor: T
): T & Constructor<StarInterface> {
@ -84,7 +115,7 @@ export function StarMixin<T extends Constructor<ReactiveElement>>(
.toString()
.replace(/(--devicePixelRatio: )\d+/, (_, s1) => {
// 替换 devicepixelRatio
return s1 + String(devicePixelRatio)
return s1 + computeNeededDevicePixelRatio()
})
const autoPxStyleString = autoPxStyle.toString()
style.innerHTML = globalStylesString + autoPxStyleString

View File

@ -88,7 +88,6 @@ export class BrightnessSlider extends LitElement {
position: absolute;
left: 0px;
right: 0px;
background: var(--background-lm);
border-radius: 1.3vw;
}
@ -98,7 +97,6 @@ export class BrightnessSlider extends LitElement {
position: absolute;
left: 0px;
right: 0px;
background: var(--progress-background-lm);
border-radius: 1.3vw;
}
@ -114,9 +112,37 @@ export class BrightnessSlider extends LitElement {
font-style: normal;
text-rendering: optimizelegibility;
font-weight: 500;
}
@media (prefers-color-scheme: light) {
.sliderBar {
background: var(--background-lm);
}
.progress {
background: var(--progress-background-lm);
}
.sliderBar::before {
color: var(--icon-color-lm);
z-index: 1;
}
}
@media (prefers-color-scheme: dark) {
.sliderBar {
background: var(--background-dm);
}
.progress {
background: var(--progress-background-dm);
}
.sliderBar::before {
color: var(--icon-color-dm);
z-index: auto;
}
}
`
handleEvent(event: TouchEvent) {

View File

@ -122,7 +122,7 @@ export class StarButton extends StarBaseElement {
/**
* GaiaIcons
*/
@property({type: String}) icon = ''
@property({type: String}) icon!: string
/**
*
@ -151,7 +151,7 @@ export class StarButton extends StarBaseElement {
}
protected get hasIcon(): boolean {
return this.icon !== ''
return this.icon !== undefined && this.icon !== ''
}
renderBaseButton(): HTMLTemplateResult {

View File

@ -4,8 +4,9 @@ export default css`
clock-time {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
line-height: var(--auto-96px);
line-height: var(--auto-128px);
width: 100%;
}
clock-date {

View File

@ -6,8 +6,11 @@ import './time/time.js'
@customElement('clock-widget')
class ClockContainer extends LitElement {
@property({type: String}) name = 'clock-widget'
@property({type: String}) minute = 0
@property({type: String}) hour = 0
@property({type: String}) type = 3
@property({type: String}) hourFirst = 0
@property({type: String}) hourSecond = 0
@property({type: String}) minuteFirst = 0
@property({type: String}) minuteSecond = 0
@property({type: String}) date = 0
public static override get styles(): CSSResultArray {
@ -16,7 +19,13 @@ class ClockContainer extends LitElement {
render() {
return html`
<clock-time minute=${this.minute} hour=${this.hour}></clock-time>
<clock-time
hourFirst=${this.hourFirst}
hourSecond=${this.hourSecond}
minuteFirst=${this.minuteFirst}
minuteSecond=${this.minuteSecond}
type=${this.type}
></clock-time>
<clock-date date=${this.date}></clock-date>
`
}

View File

@ -4,6 +4,8 @@ export default css`
#clock-date {
text-align: center;
margin: auto;
font-size: var(--auto-48px);
line-height: var(--auto-58px);
}
@media screen and (max-width: 640px) {
@ -11,8 +13,6 @@ export default css`
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
font-size: var(--auto-48px);
line-height: 29px;
}
}

View File

@ -1,62 +1,40 @@
import {css} from 'lit'
export default css`
#clock-time-minute {
.clock-time {
flex: 1;
text-align: right;
padding-inline-end: var(--auto-10px);
width: var(--auto-85px);
text-align: center;
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
}
.clock-time[type='3'] {
font-weight: 600;
font-size: var(--auto-128px);
line-height: var(--auto-128px);
}
#clock-minute,
#clock-hour {
display: flex;
}
#clock-hour div[type='3'] {
opacity: 0.67;
padding-inline-end: var(--auto-10px);
}
#clock-time-hour {
flex: 1;
text-align: left;
#clock-minute div[type='3'] {
padding-inline-start: var(--auto-10px);
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
font-size: var(--auto-128px);
/* identical to box height, or 100% */
text-align: left;
/* 主题色/黄金渐变 */
background: linear-gradient(180deg, #ebc965 0%, #d9aa38 100%);
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* @media screen and (max-width: 640px) {
#clock-time-minute {
font-weight: 600;
font-size: 64px;
line-height: 64px;
height: 64px;
/* 默认 */
#clock-line .clock-time[type='4'] {
font-weight: 400;
font-size: var(--auto-116px);
line-height: var(--auto-116px);
color: #f0f0f0;
}
#clock-time-hour {
font-weight: 600;
font-size: 64px;
line-height: 64px;
height: 64px;
}
}
@media screen and (max-width: 400px) {
#clock-time-minute {
font-weight: 600;
font-size: 43px;
line-height: 43px;
height: 43px;
}
#clock-time-hour {
font-weight: 600;
font-size: 43px;
line-height: 43px;
height: 43px;
}
} */
`

View File

@ -4,16 +4,37 @@ import timeStyles from './time-style.js'
@customElement('clock-time')
class LockScreenClockTimeContainer extends LitElement {
@property({type: String}) type = 3
@property({type: String}) name = 'clock-time'
@property({type: String}) minute = 0
@property({type: String}) hour = 0
@property({type: String}) hourFirst = 0
@property({type: String}) hourSecond = 0
@property({type: String}) minuteFirst = 0
@property({type: String}) minuteSecond = 0
@property({type: String}) line = ':'
public static override get styles(): CSSResultArray {
return [timeStyles]
}
render() {
return html`
<div id="clock-time-minute">${this.minute}</div>
<div id="clock-time-hour">${this.hour}</div>
<div id="clock-hour">
<div class="clock-time" id="clock-time-hourFirst" type=${this.type}>
${this.hourFirst}
</div>
<div class="clock-time" id="clock-time-hourSecond" type=${this.type}>
${this.hourSecond}
</div>
</div>
<div id="clock-line" type=${this.type}>
${this.type == 4 ? this.line : ''}
</div>
<div id="clock-minute">
<div class="clock-time" id="clock-time-minuteFirst" type=${this.type}>
${this.minuteFirst}
</div>
<div class="clock-time" id="clock-time-minuteSecond" type=${this.type}>
${this.minuteSecond}
</div>
</div>
`
}
}

View File

@ -17,11 +17,11 @@ export const sharedStyles: CSSResult = css`
}
span {
position: relative;
width: 12px;
height: 12px;
width: var(--auto-24px);
margin-right: var(--auto-40px);
height: var(--auto-24px);
border-radius: 50%;
display: inline-block;
margin-right: 20px;
background: #f4f4f4;
opacity: 0.3;
}
@ -30,8 +30,8 @@ export const sharedStyles: CSSResult = css`
}
#parent {
position: relative;
height: 250px;
width: 250px;
height: var(--auto-500px);
width: var(--auto-500px);
left: 50%;
top: 53%;
transform: translate(-50%, -50%);
@ -40,7 +40,7 @@ export const sharedStyles: CSSResult = css`
position: absolute;
display: grid;
grid-template-areas: '1 2 3 ' '4 5 6' '7 8 9';
gap: 20px;
gap: var(--auto-40px);
}
p {
@ -54,18 +54,18 @@ export const sharedStyles: CSSResult = css`
#zero {
position: absolute;
left: 36%;
top: 270px;
top: 109%;
}
button {
position: relative;
width: 70px;
height: 70px;
font-size: var(--auto-36px);
border-radius: 50%;
border: none;
/*button背景无色*/
background: rgba(0, 0, 0, 0);
display: inline-block;
font-size: 35px;
}
/*按钮点击的效果*/
@ -75,8 +75,8 @@ export const sharedStyles: CSSResult = css`
position: absolute;
top: 0px;
left: 0px;
width: 70px;
height: 70px;
width: var(--auto-140px);
height: var(--auto-140px);
border-radius: 50%;
background-color: #ffffff;
opacity: 0;
@ -97,10 +97,10 @@ export const sharedStyles: CSSResult = css`
}
.topText {
font-size: 20px;
height: 26.5px;
line-height: 26.5px;
width: 160px;
left: calc(50% - 160px / 2);
height: var(--auto-53px);
line-height: var(--auto-53px);
width: var(--auto-160px);
left: calc(50% - var(--auto-160px) / 2);
top: 31%;
}
.spanContainer {
@ -117,10 +117,10 @@ export const sharedStyles: CSSResult = css`
font-style: normal;
font-weight: 400;
color: #292929;
width: 36px;
height: 23.5px;
line-height: 23.5px;
font-size: 18px;
width: var(--auto-72px);
height: var(--auto-47px);
line-height: var(--auto-47px);
font-size: var(--auto-36px);
top: 118.5%;
}
.cancel {

View File

@ -1,9 +1,14 @@
import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit'
import {
html,
StarBaseElement,
CSSResultArray,
PropertyValueMap,
} from '../base/star-base-element.js'
import {customElement, property, query, queryAll} from 'lit/decorators.js'
import {sharedStyles} from './digicipher-style.js'
@customElement('star-digicipher')
export class StarLockNumber extends LitElement {
export class StarLockNumber extends StarBaseElement {
public static override get styles(): CSSResultArray {
return [sharedStyles]
}
@ -122,6 +127,20 @@ export class StarLockNumber extends LitElement {
}
break
case 'passcode-verify-error':
this.errors = event.detail.value
//当密码失败三次后
if (this.errors == 3) {
console.log('进入已锁定页面')
this.dispatchEvent(
new CustomEvent('star-digicipher-passcode-error-third', {
detail: {
value: true,
},
bubbles: true,
composed: true,
})
)
}
// 抖动反馈
for (let i = 0; i < 10; i++) {
this.buttons[i].style.setProperty('animation', 'errtips .5s')
@ -164,6 +183,7 @@ export class StarLockNumber extends LitElement {
this.clicks += 1
this.guess += (e.target as HTMLElement).dataset.num
} else if (this.clicks == 5) {
// console.log('guess', this.guess)
this.changeBgColor('#F4F4F4', this.clicks, 1)
if (this.mode == 'create') {
if (!this.confirm) {
@ -194,8 +214,6 @@ export class StarLockNumber extends LitElement {
}
touchEnd(e: TouchEvent) {
if ((e.target as Element).tagName === 'BUTTON') {
console.log('this.guess', this.guess)
this.removeNumberBgColor()
}
}
@ -221,6 +239,7 @@ export class StarLockNumber extends LitElement {
//发送密码
dispatchPasswd() {
this.passwd = this.guess
// console.log('passwd', this.passwd)
this.guess = ''
this.clicks = 0
this.dispatchEvent(
@ -236,6 +255,7 @@ export class StarLockNumber extends LitElement {
//更改密码
changePasswd() {
this.savewd = this.guess
// console.log('更改密码', this.savewd)
this.clicks = 0
for (let i = 0; i < 6; i++) {
this.changeBgColor('#F4F4F4', i, 0.4)
@ -257,6 +277,7 @@ export class StarLockNumber extends LitElement {
this.guess = ''
this.clicks = 0
this.changeText = '新建密码'
// console.log('确认密码', this.passwd)
this.dispatchEvent(
new CustomEvent('star-digicipher-passcode-create', {
detail: {

View File

@ -110,7 +110,7 @@ export class DropDownMenu extends LitElement {
.all-quick-icons {
width: 100%;
height: calc(100% - 31px);
height: 97.6%;
position: relative;
top: 2.4%;
}

View File

@ -522,7 +522,7 @@ export class GaiaContainer extends StarBaseElement {
set sortMode(value) {
if (value) {
this.status |= STATUS.SORT
this.gestureDetector.setOption('holdThreshold', 100)
this.gestureDetector.setOption('holdThreshold', 120)
this.setAttribute('sort-mode', '')
this.updateComplete.then(this.addTailPage)
this.setAttribute('sort-mode', '')
@ -905,6 +905,7 @@ export class GaiaContainer extends StarBaseElement {
* @param {Object} options
*/
appendContainerChild(element: HTMLElement, options?: ChildElementInfo) {
let child
if (element.tagName.split('-').length > 1 || options?.isWidget) {
let obj: ChildElementInfo = options
? {...options}
@ -913,10 +914,21 @@ export class GaiaContainer extends StarBaseElement {
obj.row = (element as any).size[0]
obj.column = (element as any).size[1]
}
this.insertContainerBefore(element, null, obj)
child = this.insertContainerBefore(element, null, obj)
} else {
this.insertContainerBefore(element, null, options)
child = this.insertContainerBefore(element, null, options)
}
if (child.breakout) {
this.dispatchEvent(
new CustomEvent('cross-field', {
detail: child,
composed: true,
})
)
}
return child
}
removeContainerChild(element: HTMLElement, callback?: Function) {
@ -1197,6 +1209,7 @@ export class GaiaContainer extends StarBaseElement {
} else {
this.updateComplete.then(setGridId)
}
return childToInsert
}
/**
@ -1253,7 +1266,7 @@ export class GaiaContainer extends StarBaseElement {
child.container.addEventListener('animationstart', animStart)
child.container.classList.add(state)
child[state] = window.window.setTimeout(() => {
child[state] = window.setTimeout(() => {
delete child[state]
child.container.removeEventListener('animationstart', animStart)
child.container.classList.remove(state)
@ -1851,9 +1864,10 @@ export class GaiaContainer extends StarBaseElement {
this._children.add(this._dnd.child)
this._dnd.child.container.classList.add('dragging')
}
let containerX = centerX - this.gridWidth / 2 - this.left
let containerY = centerY - this.gridHeight / 2 - this.top
let containerX =
centerX - (dragInfo?.gridWidth || this.gridWidth) / 2 - this.left
let containerY =
centerY - (dragInfo?.gridHeight || this.gridWidth) / 2 - this.top
gridX = containerX + this.gridWidth / 2
gridY = containerY + this.gridHeight / 2
@ -1868,6 +1882,7 @@ export class GaiaContainer extends StarBaseElement {
pagination: number,
gridId: number
) {
if (pagination >= this.pages.length) return false
let resolve!: Function
let promise = new Promise((res) => {
resolve = res
@ -1876,6 +1891,9 @@ export class GaiaContainer extends StarBaseElement {
for (let row = 0; row < child.row; row++) {
for (let column = 0; column < child.column; column++) {
const targetId = gridId + column + row * this.column
if (!this.childCoordinate[pagination]) {
this.childCoordinate[pagination] = {}
}
if (
this.childCoordinate[pagination][targetId] != undefined &&
this.childCoordinate[pagination][targetId] != child
@ -2405,7 +2423,7 @@ export class GaiaContainer extends StarBaseElement {
} else if (
child.element === target ||
child.master === target ||
child.container === target ||
// child.container === target ||
child.element.compareDocumentPosition(target) & 16
) {
this._dnd.child = child

View File

@ -76,7 +76,7 @@ export default class GaiaContainerChild {
manager: GaiaContainer,
isWidget: boolean = false
) {
this._element = element
this.element = element
this.isWidget = isWidget
this.row = row
this.column = column
@ -179,6 +179,8 @@ export default class GaiaContainerChild {
if (this._element) {
this.container.replaceChild(node, this._element)
}
node.classList.add('child-element')
this._element = node
}
@ -247,8 +249,8 @@ export default class GaiaContainerChild {
const offsetLeft = Math.abs(
this.master.offsetLeft - this.pagination * this.manager.pageHeight
)
const rowStart = Math.floor(offsetTop / this.manager.gridHeight) + 1
const columnStart = Math.floor(offsetLeft / this.manager.gridWidth) + 1
const rowStart = Math.round(offsetTop / this.manager.gridHeight) + 1
const columnStart = Math.round(offsetLeft / this.manager.gridWidth) + 1
return [rowStart, columnStart]
}
@ -266,7 +268,7 @@ export default class GaiaContainerChild {
grid = Math.min(...grid)
}
const rowStart = Math.floor(grid / this.manager.column) + 1
const rowStart = Math.round(grid / this.manager.column) + 1
const columnStart = (grid % this.manager.column) + 1
return [rowStart, columnStart]
}
@ -324,6 +326,8 @@ export default class GaiaContainerChild {
const container = document.createElement('div')
container.style.gridRowStart = `span ${this.row}`
container.style.gridColumnStart = `span ${this.column}`
// 为了保证影子页面进行越界检测时, 能先放置大组件再放置小组件
container.style.order = `${24 - this.column * this.row}`
this._shadowContainer = container
}
return this._shadowContainer
@ -434,6 +438,11 @@ export default class GaiaContainerChild {
return true
}
if (position == 'page' && gridId !== this.curGridId) {
const crossResult = this.manager.exchangeStratege.handleCrossField(
gridId,
this
)
this.breakout = crossResult.bottom || crossResult.right
// this.manager.recordCoordinate(this, this.pagination, gridId)
if (!this.manager.recordCoordinate(this, this.pagination, gridId)) {
/* 未能成功记录,记录位置已有其他子节点,需要清空位置记录并重新归位 */
@ -455,13 +464,6 @@ export default class GaiaContainerChild {
this._lastElementHeight = this.element?.offsetHeight!
}
const crossResult = this.manager.exchangeStratege.handleCrossField(
this.curGridId,
this
)
this.breakout = crossResult.bottom || crossResult.right
!isActive &&
!this.breakout &&
!this.container.classList.contains('dragging') &&

View File

@ -76,7 +76,6 @@ export class HeaderBar extends LitElement {
font-family: OPPOSans;
font-style: normal;
font-weight: 400;
color: var(--only-time-color-lm);
}
.time-icons > ::slotted(*) {
@ -102,25 +101,12 @@ export class HeaderBar extends LitElement {
position: relative;
}
.time-date > #time {
color: var(--time-date-time-color-lm);
}
#date {
position: relative;
opacity: 0.6;
color: var(--time-date-date-color-lm);
mix-blend-mode: normal;
}
.host([deep-mode]) .time-outer > #time {
color: var(--only-time-color-dm);
}
.host([deep-mode]) #date {
color: var(--time-date-date-color-dm);
}
.time-outer > #time {
height: 2.7vh;
line-height: 2.7vh;
@ -159,6 +145,34 @@ export class HeaderBar extends LitElement {
position: relative;
right: 0.9vw;
}
@media (prefers-color-scheme: light) {
.time-outer > #time {
color: var(--only-time-color-lm);
}
.time-date > #time {
color: var(--time-date-time-color-lm);
}
#date {
color: var(--time-date-date-color-lm);
}
}
@media (prefers-color-scheme: dark) {
.time-outer > #time {
color: var(--only-time-color-dm);
}
.time-date > #time {
color: var(--time-date-time-color-dm);
}
#date {
color: var(--time-date-date-color-dm);
}
}
`
firstUpdated() {

View File

@ -60,7 +60,8 @@ export class IconControlBarGroup extends LitElement {
static styles = css`
:host {
--background-lm: #ffffff;
--background-dm: #000000;
// --background-dm: #000000;
--background-dm: rgba(0, 0, 0, 0.15);
--opacity-lm: 0.75;
--opacity-dm: 0.25;
--line-border-lm: rgba(0, 0, 0, 0.07);
@ -68,9 +69,8 @@ export class IconControlBarGroup extends LitElement {
width: inherit;
height: inherit;
background: var(--background-lm);
mix-blend-mode: normal;
opacity: var(--opacity-lm);
// opacity: var(--opacity-lm);
border-radius: 1.3vw;
}
@ -101,11 +101,22 @@ export class IconControlBarGroup extends LitElement {
align-items: center;
justify-content: center;
height: 2.5vw;
border-left: 0.17vw solid var(--line-border-lm);
border-radius: 0.17vw;
}
:host([deep-mode]) .icon-only > div > ::slotted(*) {
@media (prefers-color-scheme: light) {
:host {
background: var(--background-lm);
opacity: var(--opacity-lm);
}
.icon-only > div > ::slotted(*) {
border-left: 0.17vw solid var(--line-border-lm);
}
}
@media (prefers-color-scheme: dark) {
.icon-only > div > ::slotted(*) {
border-left: 0.17vw solid var(--line-border-dm);
}
@ -113,9 +124,10 @@ export class IconControlBarGroup extends LitElement {
border-left-style: none;
}
:host([deep-mode]) {
:host {
background: var(--background-dm);
}
}
`
}

View File

@ -21,7 +21,6 @@ export const sharedStyles: CSSResult = css`
// height: 100%;
display: flex;
align-items: center;
background: var(--background-lm);
border-radius: 1.3vw;
}
@ -44,7 +43,6 @@ export const sharedStyles: CSSResult = css`
font-style: normal;
text-rendering: optimizelegibility;
font-weight: 500;
color: var(--text-color-lm);
}
.more-info-icon {
@ -70,7 +68,6 @@ export const sharedStyles: CSSResult = css`
p {
position: relative;
left: 13.1%;
color: var(--text-color-lm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -85,9 +82,6 @@ export const sharedStyles: CSSResult = css`
.icon-name-shown,
.icon-name {
// font-size: 7px;
// height: 16px;
// font-size: 20px;
// height: 48px;
@ -103,17 +97,6 @@ export const sharedStyles: CSSResult = css`
color: var(--text-color-active);
}
:host([deep-mode]) .with-border {
background: var(--background-dm);
}
:host([deep-mode]) p,
:host([deep-mode]) .icon-button::before,
:host([deep-mode]) .more-info-icon::after,
:host([dark-mode]) .icon-name {
color: var(--text-color-dm);
}
.icon-with-state::before {
position: relative;
left: 9.2%;
@ -124,8 +107,7 @@ export const sharedStyles: CSSResult = css`
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
font-size: 7px;
color: var(--text-color-lm);
font-size: 1.75vw;
display: none;
}
@ -147,8 +129,7 @@ export const sharedStyles: CSSResult = css`
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
font-size: 7px;
color: var(--text-color-lm);
font-size: 1.75vw;
}
.icon-button::before {
@ -157,14 +138,51 @@ export const sharedStyles: CSSResult = css`
// line-height: 48px;
// font-size: 48px;
// width: 16px;
// height: 16px;
// line-height: 16px;
// font-size: 16px;
width: 4vw;
height: 4vw;
line-height: 4vw;
font-size: 4vw;
}
:host([disabled='true']) {
pointer-events: none;
opacity: 0.5;
}
@media (prefers-color-scheme: light) {
.with-border {
background: var(--background-lm);
}
.icon-button::before,
.more-info-icon::after {
color: var(--text-color-lm);
}
p {
color: var(--text-color-lm);
}
.icon-name {
color: var(--text-color-lm);
}
.icon-name-shown {
color: var(--text-color-lm);
}
}
@media (prefers-color-scheme: dark) {
.with-border {
background: var(--background-dm);
}
p,
.icon-button::before,
.more-info-icon::after,
.icon-name,
.icon-name-shown {
color: var(--text-color-dm);
}
}
`

View File

@ -14,6 +14,7 @@ export const sharedStyles: CSSResult = css`
--notification-counts-lm: #000000;
--notification-counts-dm: #ffffff;
--arrow-background-lm: rgba(0, 0, 0, 0.06);
--arrow-background-dm: rgba(255, 255, 255, 0.08);
--title-color-lm: #404040;
--title-color-dm: #f0f0f0;
--single-text-color-lm: #404040;
@ -37,7 +38,6 @@ export const sharedStyles: CSSResult = css`
}
.notification {
background: var(--notification-background-lm);
transition: transform 0.6s;
height: inherit;
width: inherit;
@ -57,9 +57,6 @@ export const sharedStyles: CSSResult = css`
// border-top-left-radius: 20px;
// border-top-right-radius: 20px;
// border-top-left-radius: 6px;
// border-top-right-radius: 6px;
border-top-left-radius: 1.7vw;
border-top-right-radius: 1.7vw;
}
@ -68,9 +65,6 @@ export const sharedStyles: CSSResult = css`
// border-bottom-left-radius: 20px;
// border-bottom-right-radius: 20px;
// border-bottom-left-radius: 6px;
// border-bottom-right-radius: 6px;
border-bottom-left-radius: 1.7vw;
border-bottom-right-radius: 1.7vw;
}
@ -78,8 +72,6 @@ export const sharedStyles: CSSResult = css`
.border-radius {
// border-radius: 20px;
// border-radius: 6px;
border-radius: 1.7vw;
}
@ -89,11 +81,6 @@ export const sharedStyles: CSSResult = css`
// pointer-events: none;
// margin: 26px 10px 78px 26px;
// width: 16px;
// height: 16px;
// pointer-events: none;
// margin: 9px 3px 26px 9px;
width: 4vw;
height: 4vw;
position: absolute;
@ -110,10 +97,6 @@ export const sharedStyles: CSSResult = css`
// left: 28px;
// top: 23.7%;
// width: calc(100% - 84px);
// left: 84px;
// top: 36px;
// top: 23.7%;
font-family: 'OPPOSans';
font-style: normal;
width: 90.2%;
@ -129,16 +112,11 @@ export const sharedStyles: CSSResult = css`
order: 0;
flex-grow: 0;
font-weight: 400;
color: var(--title-color-lm);
// height: 28px;
// line-height: 28px;
// font-size: 28px;
// height: 9px;
// line-height: 9px;
// font-size: 9px;
line-height: 1;
font-size: 2.3vw;
}
@ -155,7 +133,6 @@ export const sharedStyles: CSSResult = css`
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0.65;
color: var(--title-color-lm);
// height: 32px;
// right: 32px;
@ -163,12 +140,6 @@ export const sharedStyles: CSSResult = css`
// font-size: 24px;
// line-height: 32px;
// height: 10px;
// right: 10px;
// top: -1px;
// font-size: 8px;
// line-height: 10px;
right: 10.67px;
top: -1.33px;
font-size: 2vw;
@ -187,12 +158,6 @@ export const sharedStyles: CSSResult = css`
// left: 84px;
// top: 84px;
// top: 55.3%;
// width: calc(100% - 28px);
// left: 28px;
// top: 55.3%;
width: 90.2%;
left: 9.8%;
top: 55.3%;
@ -208,7 +173,6 @@ export const sharedStyles: CSSResult = css`
font-style: normal;
// font-weight: 300;
font-weight: 400;
color: var(--single-text-color-lm);
mix-blend-mode: normal;
opacity: 0.65;
font-size: 2.2vw;
@ -217,11 +181,6 @@ export const sharedStyles: CSSResult = css`
// height: 11px;
// font-size: 8px;
// line-height: 11px;
// width: 740px;
// height: 34px;
// font-size: 26px;
// line-height: 34px;
}
.notification > div.detail .arrow-up {
@ -230,7 +189,6 @@ export const sharedStyles: CSSResult = css`
text-align: center;
vertical-align: middle;
display: none;
background: var(--arrow-background-lm);
// width: 56px;
// height: 34px;
@ -239,13 +197,6 @@ export const sharedStyles: CSSResult = css`
// line-height: 34px;
// border-radius: 189px;
// width: 18px;
// height: 11px;
// right: 9px;
// bottom: 10px;
// line-height: 11px;
// border-radius: 63px;
height: 1.8vh;
width: 4.7vw;
right: 3%;
@ -299,7 +250,6 @@ export const sharedStyles: CSSResult = css`
display: flex;
align-items: center;
justify-content: center;
background: var(--button-background-color-lm);
border-radius: 50%;
opacity: 0.6;
transition: transform 0.1s;
@ -307,9 +257,6 @@ export const sharedStyles: CSSResult = css`
// width: 80px;
// height: 80px;
// width: 26px;
// height: 26px;
width: 6.7vw;
height: 6.7vw;
}
@ -342,18 +289,12 @@ export const sharedStyles: CSSResult = css`
font-style: normal;
text-rendering: optimizelegibility;
font-weight: 500;
color: var(--button-color-lm);
// width: 32px;
// height: 32px;
// line-height: 32px;
// font-size: 32px;
// width: 10px;
// height: 10px;
// line-height: 10px;
// font-size: 10px;
width: 40%;
height: 40%;
font-size: 2.7vw;
@ -368,15 +309,11 @@ export const sharedStyles: CSSResult = css`
// width: calc(100% - 28px);
// left: 28px;
// width: calc(100% - 84px);
// left: 84px;
width: 90.2%;
left: 9.8%;
}
.container .title {
color: var(--title-color-lm);
flex: none;
order: 0;
flex-grow: 0;
@ -385,10 +322,6 @@ export const sharedStyles: CSSResult = css`
// line-height: 28px;
// font-size: 28px;
// height: 9.3px;
// line-height: 9.3px;
// font-size: 9.3px;
height: 18.4%;
line-height: 1;
font-size: 1.45vh;
@ -397,7 +330,6 @@ export const sharedStyles: CSSResult = css`
.container .detail-content {
position: relative;
color: var(--more-text-color-lm);
mix-blend-mode: normal;
opacity: 0.65;
flex: none;
@ -414,12 +346,6 @@ export const sharedStyles: CSSResult = css`
// top: -3px;
// font-size: 26px;
// height: 11px;
// line-height: 11px;
// left: 8px;
// top: -1px;
// font-size: 9px;
left: 0.93%;
top: -3px;
top: -2%;
@ -444,7 +370,6 @@ export const sharedStyles: CSSResult = css`
text-align: right;
mix-blend-mode: normal;
opacity: 0.65;
color: var(--single-text-color-lm);
// height: 34px;
// right: 34px;
@ -469,8 +394,6 @@ export const sharedStyles: CSSResult = css`
position: absolute;
text-align: center;
vertical-align: middle;
color: var(--notification-counts-lm);
background: var(--notification-counts-background-lm);
opacity: 0.55;
// width: 56px;
@ -502,463 +425,94 @@ export const sharedStyles: CSSResult = css`
vertical-align: middle;
}
:host([dark-mode]) .notification {
@media (prefers-color-scheme: light) {
.notification {
background: var(--notification-background-lm);
}
.notification > div.title-container .title {
color: var(--title-color-lm);
}
.notification > div.title-container .timestamp {
color: var(--title-color-lm);
}
.notification > div.detail .detail-content {
color: var(--single-text-color-lm);
}
.notification > div.detail .arrow-up {
background: var(--arrow-background-lm);
}
.btn-tool > div {
background: var(--button-background-color-lm);
}
.btn-tool > div::after {
color: var(--button-color-lm);
}
.container .title {
color: var(--title-color-lm);
}
.container .detail-content {
color: var(--more-text-color-lm);
}
.one-container .timestamp {
color: var(--single-text-color-lm);
}
.another-container .notificaiton-counts {
color: var(--notification-counts-lm);
background: var(--notification-counts-background-lm);
}
}
@media (prefers-color-scheme: dark) {
.notification {
background: var(--notification-background-dm);
}
:host([dark-mode]) .btn-tool > div {
.notification > div.detail .arrow-up {
background: var(--arrow-background-dm);
}
.btn-tool > div {
background: var(--button-background-color-dm);
}
:host([dark-mode]) .btn-tool > div::after {
.btn-tool > div::after {
color: var(--button-color-dm);
}
:host([dark-mode]) .another-container .notificaiton-counts {
.another-container .notificaiton-counts {
color: var(--notification-counts-dm);
background: var(--notification-counts-background-dm);
}
:host([dark-mode]) .container .title,
:host([dark-mode]) .notification > div.title-container .title {
.container .title,
.notification > div.title-container .title {
color: var(--title-color-dm);
}
:host([dark-mode]) .notification > div.title-container .timestamp {
.notification > div.title-container .timestamp {
color: var(--single-text-color-dm);
}
:host([dark-mode]) .notification > div.detail .detail-content {
.notification > div.detail .detail-content {
color: var(--single-text-color-dm);
}
:host([dark-mode]) .container .detail-content {
.container .detail-content {
color: var(--more-text-color-dm);
}
:host([dark-mode]) .one-container .timestamp {
.one-container .timestamp {
color: var(--single-text-color-dm);
}
// @media screen and (min-width: 300px) {
// // :host([notificationType='one-notification']) {
// // margin: 5px 0 0 0;
// // }
// // .notification {
// // height: 50px;
// // width: 286px;
// // }
// // .top-border-radius {
// // border-top-left-radius: 6px;
// // border-top-right-radius: 6px;
// // }
// // .bottom-border-radius {
// // border-bottom-left-radius: 6px;
// // border-bottom-right-radius: 6px;
// // }
// // .border-radius {
// // border-radius: 6px;
// // }
// // .notification > img {
// // width: 16px;
// // height: 16px;
// // pointer-events: none;
// // margin: 9px 3px 26px 9px;
// // }
// // .notification > div.title-container {
// // width: calc(100% - 28px);
// // left: 28px;
// // top: 23.7%;
// // }
// .notification > div.title-container .title {
// // height: 9px;
// // line-height: 9px;
// // font-size: 9px;
// }
// // .notification > div.title-container .timestamp {
// // height: 10px;
// // right: 10px;
// // top: -1px;
// // font-size: 8px;
// // line-height: 10px;
// // }
// // .notification > div.detail {
// // width: calc(100% - 28px);
// // left: 28px;
// // top: 55.3%;
// // }
// // .notification > div.detail .detail-content {
// // // width: 246px;
// // // height: 11px;
// // // font-size: 8px;
// // // line-height: 11px;
// // }
// // .notification > div.detail .arrow-up {
// // // width: 18px;
// // // height: 11px;
// // // right: 9px;
// // // bottom: 10px;
// // // line-height: 11px;
// // // border-radius: 63px;
// // }
// // .notification > div.detail .arrow-up::after {
// // font-size: 12px;
// // }
// // .btn-tool {
// // right: 6px;
// // }
// // .btn-tool > div:first-child {
// // margin-right: 15px;
// // visibility: hidden;
// // }
// // .btn-tool > div {
// // width: 26px;
// // height: 26px;
// // }
// // .btn-tool > div::after {
// // width: 10px;
// // height: 10px;
// // line-height: 10px;
// // font-size: 10px;
// // }
// // .container .detail-content {
// // height: 11px;
// // line-height: 11px;
// // left: 8px;
// // top: -1px;
// // font-size: 9px;
// // }
// // .one-container .timestamp {
// // height: 11px;
// // right: 11px;
// // top: -1px;
// // font-size: 8px;
// // line-height: 11px;
// // }
// // .another-container .notificaiton-counts {
// // width: 18px;
// // height: 11px;
// // right: 8px;
// // bottom: 10px;
// // top: -1px;
// // line-height: 11px;
// // font-size: 7px;
// // border-radius: 63px;
// // }
// }
// @media screen and (min-width: 600px) {
// // :host([notificationType='one-notification']) {
// // margin: 8px 0 0 0;
// // }
// // .notification {
// // height: 76px;
// // width: 430px;
// // }
// // .top-border-radius {
// // border-top-left-radius: 10px;
// // border-top-right-radius: 10px;
// // }
// // .bottom-border-radius {
// // border-bottom-left-radius: 10px;
// // border-bottom-right-radius: 10px;
// // }
// // .border-radius {
// // border-radius: 10px;
// // }
// // .notification > img {
// // width: 24px;
// // height: 24px;
// // pointer-events: none;
// // margin: 13px 5px 39px 13px;
// // }
// // .notification > div.title-container {
// // width: calc(100% - 42px);
// // left: 42px;
// // top: 18px;
// // top: 23.7%;
// // }
// // .notification > div.title-container .title {
// // height: 14px;
// // line-height: 14px;
// // font-size: 14px;
// // }
// // .notification > div.title-container .timestamp {
// // height: 16px;
// // right: 16px;
// // top: -2px;
// // font-size: 12px;
// // line-height: 16px;
// // }
// // .notification > div.detail {
// // width: calc(100% - 42px);
// // left: 42px;
// // top: 42px;
// // top: 55.3%;
// // }
// // .notification > div.detail .detail-content {
// // width: 370px;
// // height: 17px;
// // font-size: 13px;
// // line-height: 17px;
// // }
// // .notification > div.detail .arrow-up {
// // width: 28px;
// // height: 17px;
// // right: 13px;
// // bottom: 15px;
// // line-height: 17px;
// // border-radius: 94.5px;
// // }
// // .notification > div.detail .arrow-up::after {
// // font-size: 17.5px;
// // }
// // .btn-tool {
// // right: 9px;
// // }
// // .btn-tool > div:first-child {
// // margin-right: 22px;
// // visibility: hidden;
// // }
// // .btn-tool > div {
// // width: 40px;
// // height: 40px;
// // }
// // .btn-tool > div::after {
// // width: 16px;
// // height: 16px;
// // line-height: 16px;
// // font-size: 16px;
// // }
// // .container {
// // width: calc(100% - 42px);
// // left: 42px;
// // }
// // .one-container {
// // top: 18px;
// // }
// // .another-container {
// // top: 44.5px;
// // }
// // .container .title {
// // height: 14px;
// // line-height: 14px;
// // font-size: 14px;
// // }
// // .container .detail-content {
// // height: 17px;
// // line-height: 17px;
// // left: 12px;
// // top: -1.5px;
// // font-size: 13px;
// // }
// // .one-container .timestamp {
// // height: 17px;
// // right: 17px;
// // top: -2px;
// // font-size: 12px;
// // line-height: 16px;
// // }
// // .another-container .notificaiton-counts {
// // width: 28px;
// // height: 17px;
// // right: 13px;
// // bottom: 15px;
// // top: -0.5px;
// // line-height: 17px;
// // font-size: 10px;
// // border-radius: 94.5px;
// // }
// }
// @media screen and (min-width: 900px) {
// // :host([notificationType='one-notification']) {
// // margin: 16px 0 0 0;
// // }
// // .notification {
// // height: 152px;
// // width: 860px;
// // }
// // .top-border-radius {
// // border-top-left-radius: 20px;
// // border-top-right-radius: 20px;
// // }
// // .bottom-border-radius {
// // border-bottom-left-radius: 20px;
// // border-bottom-right-radius: 20px;
// // }
// // .border-radius {
// // border-radius: 20px;
// // }
// // .notification > img {
// // width: 48px;
// // height: 48px;
// // pointer-events: none;
// // margin: 26px 10px 78px 26px;
// // }
// // .notification > div.title-container {
// // width: calc(100% - 84px);
// // left: 84px;
// // top: 36px;
// // top: 23.7%;
// // }
// // .notification > div.title-container .title {
// // height: 28px;
// // line-height: 28px;
// // font-size: 28px;
// // }
// // .notification > div.title-container .timestamp {
// // height: 32px;
// // right: 32px;
// // top: -4px;
// // font-size: 24px;
// // line-height: 32px;
// // }
// // .notification > div.detail {
// // width: calc(100% - 84px);
// // left: 84px;
// // top: 84px;
// // top: 55.3%;
// // }
// // .notification > div.detail .detail-content {
// // width: 740px;
// // height: 34px;
// // font-size: 26px;
// // line-height: 34px;
// // }
// // .notification > div.detail .arrow-up {
// // width: 56px;
// // height: 34px;
// // right: 26px;
// // bottom: 30px;
// // line-height: 34px;
// // border-radius: 189px;
// // }
// // .notification > div.detail .arrow-up::after {
// // font-size: 35px;
// // }
// // .btn-tool {
// // right: 18px;
// // }
// // .btn-tool > div:first-child {
// // margin-right: 44px;
// // visibility: hidden;
// // }
// // .btn-tool > div {
// // width: 80px;
// // height: 80px;
// // }
// // .btn-tool > div::after {
// // width: 32px;
// // height: 32px;
// // line-height: 32px;
// // font-size: 32px;
// // }
// // .container {
// // width: calc(100% - 84px);
// // left: 84px;
// // }
// // .one-container {
// // top: 36px;
// // }
// // .another-container {
// // top: 89px;
// // }
// // .container .title {
// // height: 28px;
// // line-height: 28px;
// // font-size: 28px;
// // }
// // .container .detail-content {
// // height: 34px;
// // line-height: 34px;
// // left: 24px;
// // top: -3px;
// // font-size: 26px;
// // }
// // .one-container .timestamp {
// // height: 34px;
// // right: 34px;
// // top: -4px;
// // font-size: 24px;
// // line-height: 32px;
// // }
// // .another-container .notificaiton-counts {
// // width: 56px;
// // height: 34px;
// // right: 26px;
// // bottom: 30px;
// // top: -1px;
// // line-height: 34px;
// // font-size: 20px;
// // border-radius: 189px;
// // }
// }
}
`

View File

@ -1,7 +1,7 @@
import {css, CSSResult} from 'lit'
export const sharedStyles: CSSResult = css`
:host {
--top-dir: 42.4%;
--top-dir: 40%;
}
canvas {
display: block;
@ -15,17 +15,17 @@ export const sharedStyles: CSSResult = css`
}
p {
position: absolute;
width: var(--auto-160px);
line-height: var(--auto-53px);
font-size: var(--auto-40px);
height: var(--auto-53px);
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
color: #292929;
font-family: 'OPPOSans';
color: #292929;
font-size: 16px;
height: 26.5px;
line-height: 26.5px;
left: 50%;
width: 150px;
transform: translateX(-50%);
margin-top: 0;
text-align: center;
@ -38,7 +38,7 @@ export const sharedStyles: CSSResult = css`
top: 31%;
}
.cancel {
bottom: 13.5%;
bottom: 23.5%;
}
.errorinfo {
top: 66%;

View File

@ -1,9 +1,14 @@
import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit'
import {
html,
StarBaseElement,
CSSResultArray,
PropertyValueMap,
} from '../base/star-base-element.js'
import {customElement, property, query} from 'lit/decorators.js'
import {sharedStyles} from './pattern-view-style'
import {sharedStyles} from './pattern-view-style.js'
@customElement('star-pattern-view')
export class StarPatternView extends LitElement {
export class StarPatternView extends StarBaseElement {
_topDir: string = ''
_getRed: boolean = false
@ -26,6 +31,7 @@ export class StarPatternView extends LitElement {
@property({type: Boolean}) saveMode = false
@property({type: Boolean}) lessfour = false
@property({type: Boolean}) confirm = false
@property({type: Number}) errors = 0
@property({type: Number}) top = 0
@property({type: Number}) R = (35 / 600) * document.body.offsetWidth
@property({type: Number}) X = 0
@ -93,7 +99,7 @@ export class StarPatternView extends LitElement {
): void {
//settings中图形密码上下的文字以及图形密码的位置都有所变化
if (this.saveMode) {
this.topDir = '34.7%'
this.topDir = '34%'
this.saveP.style.setProperty('top', '27.8%')
}
//canvas的高度和宽度都是
@ -117,18 +123,45 @@ export class StarPatternView extends LitElement {
this.changeText = '密码设置成功'
break
case 'passcode-verify-success':
console.log('图案正确')
this.getRed = false
this.changeText = '绘制图案'
break
case 'passcode-verify-error':
this.passwd = event.detail.passwd
this.getRed = true
this.changeText = '绘制图案错误'
//当密码失败三次后
this.errors = event.detail.value
if (this.errors == 3) {
console.log('进入已锁定页面')
this.initialState()
this.dispatchEvent(
new CustomEvent('star-pattern-view-passwd-error-third', {
detail: {
value: true,
},
bubbles: true,
composed: true,
})
)
}
break
default:
break
}
}
/* 擦除线条,恢复初始状态 */
initialState() {
this.changeText = '绘制图案'
this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
this.passwd = []
this.getRed = false
this.Draw()
}
touchStart(e: TouchEvent) {
// this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
this.lessfourinfo = ''
this.passwd = []
this.getRed = false
@ -156,10 +189,8 @@ export class StarPatternView extends LitElement {
})
}
touchEnd(_e: TouchEvent) {
console.log('###', this.passwd.length)
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.lessfourinfo = '至少连接四个点'
} else {
@ -190,6 +221,8 @@ export class StarPatternView extends LitElement {
}
}
touchStartCancel() {
/* 点击取消,擦除绘制图案 */
this.initialState()
this.dispatchEvent(
new CustomEvent('star-pattern-view-cancel', {
detail: {
@ -282,7 +315,7 @@ export class StarPatternView extends LitElement {
var dir = Math.pow(xdiff * xdiff + ydiff * ydiff, 0.5)
if (dir > this.R || passwd.indexOf(i) >= 0) continue
passwd.push(i)
console.log(this.passwd)
// console.log(this.passwd)
break
}
}
@ -291,7 +324,6 @@ export class StarPatternView extends LitElement {
console.log('请确认密码', this.savewd.toString())
this.confirm = true
this.changeText = '请确认图案'
console.log('###', this.passwd)
this.dispatchEvent(
new CustomEvent('star-pattern-view-settings-change', {
@ -305,7 +337,6 @@ export class StarPatternView extends LitElement {
}
confirmPasswd() {
if (this.savewd.toString() == this.passwd.toString()) {
console.log('###', this.passwd)
this.dispatchEvent(
new CustomEvent('star-pattern-view-settings-confirm', {
detail: {
@ -317,7 +348,6 @@ export class StarPatternView extends LitElement {
)
} else {
this.changeText = '请重新绘制图案'
console.log('###', this.passwd)
this.confirm = false
this.passwd = []
}

View File

@ -264,7 +264,7 @@ export class StarWeather extends LitElement {
}
return airQualityType
}
protected resize() {
resize() {
let width = this.starWeather?.clientWidth || 10
let height = this.starWeather?.clientHeight || 10
let proportion: any = height / width

View File

@ -36,7 +36,7 @@ class BatteryWidget extends GaiaWidget {
@query('star-battery') battery!: StarBattery
_battery: any
async init() {
init = async () => {
// @ts-ignore
this._battery = await navigator.getBattery()
this.percent = this._battery.level * 100
@ -44,14 +44,12 @@ class BatteryWidget extends GaiaWidget {
this._battery.addEventListener('levelchange', this)
this._battery.addEventListener('chargingchange', this)
this.lifeCycle = 'initialized'
this.percent = this._battery.level * 100
this.charge = this._battery.charging
}
firstUpdated = async () => {
if (this.lifeCycle == 'initializing') {
await this.init()
}
this.percent = this._battery.level * 100
this.charge = this._battery.charging
this.init()
}
handleEvent(event: Event): void {

View File

@ -92,7 +92,7 @@ class ClockWidget extends GaiaWidget {
return html`
<style>
:host {
height: 100%;
height: 102% !important;
width: 100%;
}
</style>

View File

@ -52,8 +52,9 @@ export default class MozElement extends LitElement {
height: 100%;
width: 100%;
background: -moz-element(#${this._id});
background-size: cover;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
</style>
`

View File

@ -2,7 +2,7 @@ import GaiaWidget from '../gaia-widget'
import '../../components/weather/weather'
import {StarWeather} from '../../components/weather/weather'
import {customElement, query} from 'lit/decorators.js'
import {css, html} from 'lit'
import {html} from 'lit'
@customElement('gaia-weather')
class WeatherWidget extends GaiaWidget {
@ -64,7 +64,10 @@ class WeatherWidget extends GaiaWidget {
}
// @ts-ignore
init() {}
init = () => {}
protected firstUpdated() {
this.widget.resize()
}
static get observedAttributes() {
return ['type']
@ -81,18 +84,13 @@ class WeatherWidget extends GaiaWidget {
render() {
return html`
<star-weather type="${this.type}"></star-weather>
`
}
static override get styles() {
return [
css`
<style>
:host {
height: 100%;
width: 100%;
}
`,
]
</style>
`
}
}