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

Merge branch 'master' into dock

This commit is contained in:
luojiahao 2022-10-07 11:27:52 +08:00
parent 5dcd706712 7f1b7091a1
commit 144ee92347
9 changed files with 139 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/brightness-slider/brightness-slider.ts
View File

@ -11,7 +11,7 @@ export class BrightnessSlider extends LitElement {
@property({type: Number}) currentDistance = 0
@property({type: Number}) barWidth = 0
@property({type: Number}) max = 100
@property({type: Number}) value = 1
@property({type: Number}) _value = 1
@property() touchAction = {
// 触摸开始落点
start: {
@ -36,10 +36,21 @@ export class BrightnessSlider extends LitElement {
}
set coverLen(value: string) {
this.style.setProperty('--cover-length', value)
this.style.setProperty('--cover-length', value + 'px')
this._coverLen = value
}
@property({type: Number})
get value() {
return this._value
}
set value(value: number) {
this._value = value
let len = Math.floor((value * this.sliderBar.offsetWidth) / this.max)
this.coverLen = len.toString()
}
render(): HTMLTemplateResult {
return html`
<div
@ -61,9 +72,11 @@ export class BrightnessSlider extends LitElement {
width: inherit;
height: inherit;
dislay: block;
--cover-length: 3.78px; // 亮度为1
--cover-length: 3.78px;
--background-lm: rgba(255, 255, 255, 0.5);
--background-dm: rgba(0, 0, 0, 0.15);
--icon-color-lm: #4d4d4d;
--icon-color-dm: #d1d1d1;
--progress-background-lm: rgba(255, 255, 255, 0.8);
--progress-background-dm: rgba(255, 255, 255, 0.7);
}
@ -93,6 +106,7 @@ export class BrightnessSlider extends LitElement {
font-style: normal;
text-rendering: optimizelegibility;
font-weight: 500;
color: var(--icon-color-lm);
}
@media screen and (min-width: 900px) {
@ -132,13 +146,6 @@ export class BrightnessSlider extends LitElement {
}
`
firstUpdated() {
if (this.value) {
let len = Math.floor((this.value * this.sliderBar.offsetWidth) / this.max)
this.coverLen = len.toString()
}
}
handleEvent(event: TouchEvent) {
switch (event.type) {
case 'touchstart':
@ -151,7 +158,7 @@ export class BrightnessSlider extends LitElement {
this.touchAction.last.clientX - this.touchAction.start.clientX
this.currentDistance = this.distance + this.progress.offsetWidth
if (this.currentDistance < 0) {
if (this.currentDistance < this.barWidth / this.max) {
// this.currentDistance = 0;
this.currentDistance = this.barWidth / this.max
}
@ -177,12 +184,6 @@ export class BrightnessSlider extends LitElement {
break
}
}
setValue(value: number) {
this.value = value
let len = Math.floor((value * this.sliderBar.offsetWidth) / this.max)
this.coverLen = len.toString()
}
}
declare global {

28
src/components/clock/clock.ts
View File

@ -21,15 +21,19 @@ export class StarClock extends LitElement {
@state() rotateHour = 0
@state() rotateMinute = 0
@state() rotateSecond = 0
private _date = 0
set date(val: number) {
this._date = val
val && this.dateUpdated(val)
}
@property({type: Number})
private _date: String = '0'
@property({type: String})
get date() {
return this._date
}
set date(val: String) {
console.log(val, 'val')
// 1664942295167 (长度13) // Wed Oct 05 2022 11:58:40 GMT+0800 (中国标准时间)
let dateMy = val.length <= 13 ? Number(val) : String(val)
val && this.dateUpdated(dateMy)
}
@query('.star-clock')
starClock: HTMLDivElement | undefined
getTransparentClock() {
@ -110,8 +114,8 @@ export class StarClock extends LitElement {
}
}
}
protected dateUpdated(date: any) {
let timeMy = new Date(Number(date))
dateUpdated(date: any) {
let timeMy = new Date(date)
let hour = timeMy.getHours()
let minute = timeMy.getMinutes()
let second = timeMy.getSeconds()
@ -134,12 +138,14 @@ export class StarClock extends LitElement {
this.rotateMinute + 360 + 'deg'
)
this.style.setProperty('--rotateHourAfter', this.rotateHour + 360 + 'deg')
this.resizeFun()
}
protected firstUpdated() {
this.resize()
window.addEventListener('resize', () => {
this.resizeFun()
this.resize()
})
}
protected resizeFun() {
protected resize() {
let min = Math.min(
this.starClock?.clientHeight || 100,
this.starClock?.clientWidth || 100

35
src/components/icon-control-bar/icon-control-bar.ts
View File

@ -118,7 +118,7 @@ export class IconControlBar extends LitElement {
<div
class="more-info-icon"
@click=${this.handleInfo}
data-icon="expand-left"
data-icon="expand"
></div>
${iconstyle}
</div>
@ -305,20 +305,12 @@ export class IconControlBar extends LitElement {
background: var(--background-lm);
}
.icon-button::before {
text-align: center;
vertical-align: middle;
content: attr(data-icon);
font-family: gaia-icons;
font-style: normal;
text-rendering: optimizelegibility;
font-weight: 500;
}
.icon-base {
justify-content: center;
.active::before,
.active > .more-info-icon::after {
color: var(--text-color-active) !important;
}
.icon-button::before,
.more-info-icon::after {
text-align: center;
vertical-align: middle;
@ -327,6 +319,11 @@ export class IconControlBar extends LitElement {
font-style: normal;
text-rendering: optimizelegibility;
font-weight: 500;
color: var(--text-color-lm);
}
.icon-base {
justify-content: center;
}
p {
@ -348,16 +345,10 @@ export class IconControlBar extends LitElement {
background: var(--background-dm);
}
:host([deep-mode]) p {
position: relative;
:host([deep-mode]) p,
:host([deep-mode]) .icon-button::before,
:host([deep-mode]) .more-info-icon::after {
color: var(--text-color-dm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: OPPOSans;
font-style: normal;
font-weight: 400;
mix-blend-mode: normal;
}
@media screen and (min-width: 600px) {

94
src/components/notification/notification.ts
View File

@ -28,7 +28,7 @@ export enum RadiusType {
export class StarNotification extends LitElement {
// 公共属性
@property({type: String}) id = ''
@property({type: String}) timestamp = ''
@property({type: String}) _timestamp = ''
@property({type: String}) src = ''
@property({type: String}) type = ''
@property({type: NotificationType}) notificationType = 'one-notification'
@ -67,11 +67,11 @@ export class StarNotification extends LitElement {
}
@property({type: String})
get _timestamp() {
return this.timestamp
get timestamp() {
return this._timestamp
}
set _timestamp(value: string) {
this.timestamp = value
set timestamp(value: string) {
this._timestamp = value
}
render(): HTMLTemplateResult | typeof nothing {
@ -145,6 +145,7 @@ export class StarNotification extends LitElement {
@touchstart=${this}
@touchmove=${this}
@touchend=${this}
@click=${this}
>
<img src=${this.src} role="presentation" />
<div class="title-container">
@ -223,6 +224,7 @@ export class StarNotification extends LitElement {
@touchstart=${this}
@touchmove=${this}
@touchend=${this}
@click=${this}
>
<img src=${this.src} role="presentation" />
<div class="container one-container">
@ -288,7 +290,7 @@ export class StarNotification extends LitElement {
}
this.notification.style.transform =
'translateX(-' + translateX + 'px)'
} else {
} else if (touchPosX > 0) {
// if (touchPosX > 44) {
// (this.btnTool.children[0] as any).style.opacity = 0.6;
// }
@ -315,24 +317,47 @@ export class StarNotification extends LitElement {
event.stopPropagation()
switch ((event.target as HTMLElement).dataset.icon) {
case 'delete':
this.dispatchEvent(
new CustomEvent('notification-delete', {
detail: {
id: this.id,
notification: this,
},
bubbles: true,
composed: true,
})
)
;(event.target as HTMLElement).setAttribute('clicked', 'true')
window.setTimeout(() => {
;(event.target as HTMLElement).removeAttribute('clicked')
this.dispatchEvent(
new CustomEvent('notification-delete', {
detail: {
id: this.id,
notification: this,
},
bubbles: true,
composed: true,
})
)
}, 100)
break
case 'settings':
this.dispatchEvent(
new CustomEvent('notification-settings-configure', {
bubbles: true,
composed: true,
})
)
;(event.target as HTMLElement).setAttribute('clicked', 'true')
window.setTimeout(() => {
this.dispatchEvent(
new CustomEvent('notification-settings-configure', {
bubbles: true,
composed: true,
})
)
}, 100)
break
default:
this.notification.setAttribute('clicked', 'true')
window.setTimeout(() => {
this.notification.removeAttribute('clicked')
this.dispatchEvent(
new CustomEvent('notification-click', {
detail: {
id: this.id,
notification: this,
},
bubbles: true,
composed: true,
})
)
}, 100)
break
}
break
@ -343,6 +368,7 @@ export class StarNotification extends LitElement {
:host {
--notification-background-lm: rgba(255, 255, 255, 0.55);
--notification-background-dm: rgba(0, 0, 0, 0.25);
--notification-background-active: rgba(255, 255, 255, 0.75);
--border-lm: rgba(0, 0, 0, 0.09);
--border-dm: rgba(0, 0, 0, 0.09);
--button-background-color-lm: rgba(255, 255, 255, 0.68);
@ -357,11 +383,19 @@ export class StarNotification extends LitElement {
.notification {
background: var(--notification-background-lm);
transition: transform 0.6s;
}
.notification[clicked] {
transform: scale(0.9);
background: var(--notification-background-active);
}
.notification > div.title-container {
display: flex;
position: absolute;
color: #404040;
opacity: 0.65;
}
.notification > div.title-container .title {
@ -370,7 +404,6 @@ export class StarNotification extends LitElement {
flex: none;
order: 0;
flex-grow: 0;
color: #404040;
}
.notification > div.title-container .timestamp {
@ -378,7 +411,6 @@ export class StarNotification extends LitElement {
position: absolute;
text-align: right;
mix-blend-mode: normal;
opacity: 0.65;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -452,6 +484,10 @@ export class StarNotification extends LitElement {
opacity: 0.6;
}
.btn-tool > div[clicked] {
transform: scale(0.9);
}
.btn-tool > div::after {
text-align: center;
vertical-align: middle;
@ -460,6 +496,7 @@ export class StarNotification extends LitElement {
font-style: normal;
text-rendering: optimizelegibility;
font-weight: 500;
color: #4d4d4d;
}
.container {
@ -490,10 +527,13 @@ export class StarNotification extends LitElement {
flex-grow: 0;
}
.one-container {
color: #404040;
}
.one-container .timestamp {
position: absolute;
text-align: right;
color: #404040;
mix-blend-mode: normal;
opacity: 0.65;
}
@ -514,6 +554,10 @@ export class StarNotification extends LitElement {
background: var(--button-background-color-dm);
}
:host([dark-mode]) .btn-tool > div::after {
color: #f4f4f4;
}
@media screen and (min-width: 900px) {
:host([notificationType='one-notification']) {
margin: 16px 0 0 0;

2
src/lib/gesture/gesture-detector.ts
View File

@ -479,7 +479,7 @@ const getTouchFromTouches = (
export default class GestureDector {
// 进入长按状态的阈值
static HOLD_THRESHOLD = 500
static HOLD_THRESHOLD = 300
// 进入滑动状态的阈值
static PAN_THRESHOLD = 20

7
src/test/panels/activeoverlay/activeoverlay.ts
View File

@ -25,7 +25,12 @@ export class PanelActiveOverlay extends LitElement {
const content = targetNode?.nextElementSibling as HTMLElement
if (!content) return
// 调用overlayStack中的openOverlay方法创建节点
this.overlayStack.openOverlay(originalNode, targetNode, content)
this.overlayStack.openOverlay(
originalNode,
targetNode,
content,
'overflowmenu'
)
} else {
this.overlayStack.closeOverlay()
}

14
src/test/panels/clock/clock.ts
View File

@ -5,7 +5,7 @@ export class PanelClock extends LitElement {
@property()
foo = ''
@state()
date = 0
date: any = '0'
render() {
return html`
<h3
@ -50,12 +50,12 @@ export class PanelClock extends LitElement {
}
static styles = css``
protected firstUpdated() {
this.date = new Date().getTime()
let timeMy = new Date(Number(this.date))
let hour = timeMy.getHours()
let minute = timeMy.getMinutes()
let second = timeMy.getSeconds()
console.log('传的值和类型:000', hour, minute, second)
this.date = new Date() //.getTime()
// let timeMy = new Date(Number(this.date))
// let hour = timeMy.getHours()
// let minute = timeMy.getMinutes()
// let second = timeMy.getSeconds()
// console.log('传的值和类型:000', hour, minute, second)
}
}
declare global {

2
src/test/panels/overflowmenu/overflowmenu.ts
View File

@ -1,4 +1,4 @@
import {html, LitElement, css, CSSResultArray} from 'lit'
import {html, LitElement, CSSResultArray} from 'lit'
import {customElement} from 'lit/decorators.js'
import '../../../components/button/button'
import '../../../components/ul/ul'

7
src/test/panels/shared-styles.ts
View File

@ -4,4 +4,11 @@ export const sharedStyles: CSSResult = css`
.location {
margin-left: 40px;
}
hr {
margin: 0;
padding: 0;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #ccc;
}
`