Merge pull request #216 in YR/star-web-components from modify-some-css to master
* commit 'd5e0aeebdae8396032500bf6f61c1b68652e2eec': 调整部分组件css
This commit is contained in:
汪昌棋
commit
4eb6007799
|
|
@ -1,7 +1,15 @@
|
|||
import {html, css, LitElement, HTMLTemplateResult} from 'lit'
|
||||
import {customElement, property, query} from 'lit/decorators.js'
|
||||
import {
|
||||
html,
|
||||
CSSResultArray,
|
||||
HTMLTemplateResult,
|
||||
customElement,
|
||||
property,
|
||||
query,
|
||||
StarBaseElement,
|
||||
} from '@star-web-components/base'
|
||||
import {sharedStyles} from './style.js'
|
||||
@customElement('brightness-slider')
|
||||
export class BrightnessSlider extends LitElement {
|
||||
export class BrightnessSlider extends StarBaseElement {
|
||||
@query('.progress') progress!: HTMLDivElement
|
||||
@query('.sliderBar') sliderBar!: HTMLDivElement
|
||||
@property({type: String}) id = ''
|
||||
|
|
@ -75,83 +83,10 @@ export class BrightnessSlider extends LitElement {
|
|||
`
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
dislay: block;
|
||||
--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);
|
||||
static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
|
||||
.sliderBar {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
border-radius: 1.3vw;
|
||||
}
|
||||
|
||||
.progress {
|
||||
width: var(--cover-length);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
border-radius: 1.3vw;
|
||||
}
|
||||
|
||||
.sliderBar::before {
|
||||
width: 4vw;
|
||||
height: 4vw;
|
||||
left: 2.4vw;
|
||||
top: 2.4vw;
|
||||
font-size: 4vw;
|
||||
position: absolute;
|
||||
content: attr(data-icon);
|
||||
font-family: gaia-icons;
|
||||
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) {
|
||||
switch (event.type) {
|
||||
case 'touchstart':
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
|
||||
export const sharedStyles: CSSResult = css`
|
||||
:host {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
dislay: block;
|
||||
--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);
|
||||
}
|
||||
|
||||
.sliderBar {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
border-radius: var(--auto-16px);
|
||||
}
|
||||
|
||||
.progress {
|
||||
width: var(--cover-length);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
border-radius: var(--auto-16px);
|
||||
}
|
||||
|
||||
.sliderBar::before {
|
||||
width: var(--auto-48px);
|
||||
height: var(--auto-48px);
|
||||
left: calc(29px / var(--hostDevicePixelRatio));
|
||||
top: calc(29px / var(--hostDevicePixelRatio));
|
||||
font-size: var(--auto-48px);
|
||||
|
||||
position: absolute;
|
||||
content: attr(data-icon);
|
||||
font-family: gaia-icons;
|
||||
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;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
@ -1,21 +1,25 @@
|
|||
import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
|
||||
import {
|
||||
html,
|
||||
CSSResultArray,
|
||||
HTMLTemplateResult,
|
||||
nothing,
|
||||
customElement,
|
||||
property,
|
||||
query,
|
||||
queryAssignedElements,
|
||||
} from 'lit/decorators.js'
|
||||
import {HeaderBar, HeaderBarType} from '../header-bar/header-bar.js'
|
||||
import {IconControlBarType} from '../icon-control-bar/icon-control-bar.js'
|
||||
import '../icon-control-bar/icon-control-bar.js'
|
||||
import '../header-bar/header-bar.js'
|
||||
StarBaseElement,
|
||||
} from '@star-web-components/base'
|
||||
import {sharedStyles} from './style.js'
|
||||
import {HeaderBar, HeaderBarType} from '@star-web-components/header-bar'
|
||||
import {IconControlBarType} from '@star-web-components/icon-control-bar'
|
||||
|
||||
export enum DropDownMenuType {
|
||||
HEADER_WITH_TIME = 'header-with-time',
|
||||
HEADER_WITH_DATE_TIME = 'header-with-date-time',
|
||||
}
|
||||
|
||||
@customElement('drop-down-menu')
|
||||
export class DropDownMenu extends LitElement {
|
||||
export class DropDownMenu extends StarBaseElement {
|
||||
@property({type: DropDownMenuType}) type = ''
|
||||
@queryAssignedElements({flatten: true}) slotElements!: HTMLSlotElement[]
|
||||
@query('header-bar') headerBar!: HeaderBar
|
||||
|
|
@ -75,54 +79,9 @@ export class DropDownMenu extends LitElement {
|
|||
this.headerBar.autoUpdateDateTime()
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
|
||||
:host([open]) {
|
||||
transform: translateY(0);
|
||||
transition: transform 300ms ease, visibility 300ms;
|
||||
will-change: transform;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header-bar[type='only-time'] {
|
||||
dispaly: flex;
|
||||
width: 42.7vw;
|
||||
height: 4.3vw;
|
||||
height: 2.7vh;
|
||||
}
|
||||
|
||||
header-bar[type='date-time'] {
|
||||
dispaly: flex;
|
||||
width: 71.7vw;
|
||||
height: 3.3vh;
|
||||
}
|
||||
|
||||
.all-quick-icons {
|
||||
width: 100%;
|
||||
height: 97.6%;
|
||||
position: relative;
|
||||
top: 2.4%;
|
||||
}
|
||||
|
||||
.others {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 5.2vh;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
|
||||
export const sharedStyles: CSSResult = css`
|
||||
:host {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
:host([open]) {
|
||||
transform: translateY(0);
|
||||
transition: transform 300ms ease, visibility 300ms;
|
||||
will-change: transform;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header-bar[type='only-time'] {
|
||||
dispaly: flex;
|
||||
width: calc(512px / var(--hostDevicePixelRatio));
|
||||
height: var(--auto-52px);
|
||||
}
|
||||
|
||||
header-bar[type='date-time'] {
|
||||
dispaly: flex;
|
||||
width: calc(860px / var(--hostDevicePixelRatio));
|
||||
height: var(--auto-64px);
|
||||
}
|
||||
|
||||
.all-quick-icons {
|
||||
width: 100%;
|
||||
height: 97.6%;
|
||||
position: relative;
|
||||
top: 2.4%;
|
||||
}
|
||||
|
||||
.others {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: var(--auto-100px);
|
||||
}
|
||||
`
|
||||
|
|
@ -1,13 +1,22 @@
|
|||
import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
|
||||
import {customElement, property, query, state} from 'lit/decorators.js'
|
||||
|
||||
import {
|
||||
html,
|
||||
CSSResultArray,
|
||||
HTMLTemplateResult,
|
||||
nothing,
|
||||
customElement,
|
||||
property,
|
||||
query,
|
||||
state,
|
||||
StarBaseElement,
|
||||
} from '@star-web-components/base'
|
||||
import {sharedStyles} from './style.js'
|
||||
export enum HeaderBarType {
|
||||
ONLY_TIME = 'only-time',
|
||||
DATE_TIME = 'date-time',
|
||||
}
|
||||
|
||||
@customElement('header-bar')
|
||||
export class HeaderBar extends LitElement {
|
||||
export class HeaderBar extends StarBaseElement {
|
||||
@state() updateTimeTimeout!: number
|
||||
@state() updateDateTimeout!: number
|
||||
@property({type: HeaderBarType}) type = ''
|
||||
|
|
@ -52,129 +61,10 @@ export class HeaderBar extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
--only-time-color-lm: #292929;
|
||||
--only-time-color-dm: #f0f0f0;
|
||||
--time-date-time-color-lm: #404040;
|
||||
--time-date-date-color-lm: #000000;
|
||||
--time-date-time-color-dm: #e0e0e0;
|
||||
--time-date-date-color-dm: #e0e0e0;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
|
||||
.time-outer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.time-outer > #time {
|
||||
font-family: OPPOSans;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.time-icons > ::slotted(*) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.time-date-outer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.time-date {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
vertical-align: middle;
|
||||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#date {
|
||||
position: relative;
|
||||
opacity: 0.6;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
.time-outer > #time {
|
||||
height: 2.7vh;
|
||||
line-height: 2.7vh;
|
||||
font-size: 2.7vh;
|
||||
}
|
||||
|
||||
.time-icons {
|
||||
display: flex;
|
||||
width: 11.3vw;
|
||||
position: relative;
|
||||
right: 0.3vw;
|
||||
}
|
||||
|
||||
.time-icons > ::slotted(:last-child) {
|
||||
position: relative;
|
||||
left: 3.3vw;
|
||||
}
|
||||
|
||||
.time-date {
|
||||
line-height: 3.3vh;
|
||||
left: 0.8vw;
|
||||
}
|
||||
|
||||
.time-date > #time {
|
||||
font-size: 5.3vw;
|
||||
}
|
||||
|
||||
#date {
|
||||
height: 1.8vh;
|
||||
line-height: 1.8vh;
|
||||
left: 1.8vw;
|
||||
font-size: 2.2vw;
|
||||
}
|
||||
|
||||
.time-date-icons {
|
||||
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() {
|
||||
this.autoUpdateDateTime()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,124 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
|
||||
export const sharedStyles: CSSResult = css`
|
||||
:host {
|
||||
--only-time-color-lm: #292929;
|
||||
--only-time-color-dm: #f0f0f0;
|
||||
--time-date-time-color-lm: #404040;
|
||||
--time-date-date-color-lm: #000000;
|
||||
--time-date-time-color-dm: #e0e0e0;
|
||||
--time-date-date-color-dm: #e0e0e0;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.time-outer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.time-outer > #time {
|
||||
font-family: OPPOSans;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.time-icons > ::slotted(*) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.time-date-outer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.time-date {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
vertical-align: middle;
|
||||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#date {
|
||||
position: relative;
|
||||
opacity: 0.6;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
.time-outer > #time {
|
||||
height: var(--auto-52px);
|
||||
line-height: var(--auto-52px);
|
||||
font-size: var(--auto-52px);
|
||||
}
|
||||
|
||||
.time-icons {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: calc(136px / var(--hostDevicePixelRatio));
|
||||
right: var(--auto-4px);
|
||||
}
|
||||
|
||||
.time-icons > ::slotted(:last-child) {
|
||||
position: relative;
|
||||
left: var(--auto-40px);
|
||||
}
|
||||
|
||||
.time-date {
|
||||
line-height: var(--auto-64px);
|
||||
left: var(--auto-10px);
|
||||
}
|
||||
|
||||
.time-date > #time {
|
||||
font-size: var(--auto-64px);
|
||||
}
|
||||
|
||||
#date {
|
||||
height: var(--auto-34px);
|
||||
line-height: var(--auto-34px);
|
||||
left: var(--auto-22px);
|
||||
font-size: var(--auto-26px);
|
||||
}
|
||||
|
||||
.time-date-icons {
|
||||
position: relative;
|
||||
right: var(--auto-11px);
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
@ -1,13 +1,21 @@
|
|||
import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
|
||||
import {customElement, property, queryAssignedElements} from 'lit/decorators.js'
|
||||
|
||||
import {
|
||||
html,
|
||||
CSSResultArray,
|
||||
HTMLTemplateResult,
|
||||
nothing,
|
||||
customElement,
|
||||
property,
|
||||
queryAssignedElements,
|
||||
StarBaseElement,
|
||||
} from '@star-web-components/base'
|
||||
import {sharedStyles} from './style.js'
|
||||
export enum IconControlBarGroupType {
|
||||
BASE = 'base',
|
||||
WITH_STATE = 'with-state',
|
||||
}
|
||||
|
||||
@customElement('icon-control-bar-group')
|
||||
export class IconControlBarGroup extends LitElement {
|
||||
export class IconControlBarGroup extends StarBaseElement {
|
||||
@property({type: IconControlBarGroupType}) type = ''
|
||||
@property({type: Number}) count = 2
|
||||
@queryAssignedElements({flatten: true}) slotElements!: HTMLSlotElement[]
|
||||
|
|
@ -57,78 +65,9 @@ export class IconControlBarGroup extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
--background-lm: #ffffff;
|
||||
// --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);
|
||||
--line-border-dm: rgba(255, 255, 255, 0.07);
|
||||
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
mix-blend-mode: normal;
|
||||
// opacity: var(--opacity-lm);
|
||||
border-radius: 1.3vw;
|
||||
static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
|
||||
.icon-with-state {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.icon-only {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
background: inherit;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.icon-only > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon-only > div > ::slotted(*) {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 2.5vw;
|
||||
border-radius: 0.17vw;
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
.icon-only > div > ::slotted(:first-child) {
|
||||
border-left-style: none;
|
||||
}
|
||||
|
||||
:host {
|
||||
background: var(--background-dm);
|
||||
}
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
|
||||
export const sharedStyles: CSSResult = css`
|
||||
:host {
|
||||
--background-lm: #ffffff;
|
||||
// --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);
|
||||
--line-border-dm: rgba(255, 255, 255, 0.07);
|
||||
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
mix-blend-mode: normal;
|
||||
// opacity: var(--opacity-lm);
|
||||
border-radius: var(--auto-16px);
|
||||
}
|
||||
|
||||
.icon-with-state {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.icon-only {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
background: inherit;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.icon-only > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon-only > div > ::slotted(*) {
|
||||
width: 25%;
|
||||
height: var(--auto-30px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--auto-2px);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:host {
|
||||
background: var(--background-lm);
|
||||
opacity: var(--opacity-lm);
|
||||
}
|
||||
|
||||
.icon-only > div > ::slotted(*) {
|
||||
border-left: var(--auto-2px) solid var(--line-border-lm);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.icon-only > div > ::slotted(*) {
|
||||
border-left: var(--auto-2px) solid var(--line-border-dm);
|
||||
}
|
||||
|
||||
.icon-only > div > ::slotted(:first-child) {
|
||||
border-left-style: none;
|
||||
}
|
||||
|
||||
:host {
|
||||
background: var(--background-dm);
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
@ -1,27 +1,25 @@
|
|||
import {
|
||||
html,
|
||||
LitElement,
|
||||
HTMLTemplateResult,
|
||||
nothing,
|
||||
CSSResultArray,
|
||||
} from 'lit'
|
||||
import {
|
||||
customElement,
|
||||
property,
|
||||
eventOptions,
|
||||
query,
|
||||
state,
|
||||
} from 'lit/decorators.js'
|
||||
StarBaseElement,
|
||||
} from '@star-web-components/base'
|
||||
import {sharedStyles} from './iconstyle.js'
|
||||
|
||||
export enum IconControlBarType {
|
||||
BASE = 'base',
|
||||
BASE_WITHOUT_BORDER = 'base-without-border',
|
||||
WITH_STATE = 'with-state',
|
||||
GROUP_WITHOUT_BORDER = 'group-without-border',
|
||||
}
|
||||
|
||||
@customElement('icon-control-bar')
|
||||
export class IconControlBar extends LitElement {
|
||||
export class IconControlBar extends StarBaseElement {
|
||||
@property({type: IconControlBarType}) type = ''
|
||||
@property({type: String}) icon = ''
|
||||
@property({type: String}) stateDesc = ''
|
||||
|
|
@ -50,35 +48,6 @@ export class IconControlBar extends LitElement {
|
|||
// return nothing
|
||||
// }
|
||||
|
||||
const iconstyle = html`
|
||||
<style>
|
||||
.icon-button {
|
||||
width: 8.67vw;
|
||||
height: 8.67vw;
|
||||
}
|
||||
// @media screen and (min-width: 300px) {
|
||||
// .icon-button {
|
||||
// width: 34px;
|
||||
// height: 34px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @media screen and (min-width: 600px) {
|
||||
// .icon-button {
|
||||
// width: 52px;
|
||||
// height: 52px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @media screen and (min-width: 900px) {
|
||||
// .icon-button {
|
||||
// width: 104px;
|
||||
// height: 104px;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
`
|
||||
|
||||
const iconNamestyle = this.isNameShown ? 'icon-name-shown' : 'icon-name'
|
||||
return html`
|
||||
<div class="inner">
|
||||
|
|
@ -88,9 +57,7 @@ export class IconControlBar extends LitElement {
|
|||
@click=${this}
|
||||
@touchstart=${this}
|
||||
@touchend=${this}
|
||||
>
|
||||
${iconstyle}
|
||||
</div>
|
||||
></div>
|
||||
<div class=${iconNamestyle}>
|
||||
<span>${this.name}</span>
|
||||
</div>
|
||||
|
|
@ -121,35 +88,6 @@ export class IconControlBar extends LitElement {
|
|||
return nothing
|
||||
}
|
||||
|
||||
const iconstyle = html`
|
||||
<style>
|
||||
:host {
|
||||
width: 20vw;
|
||||
height: 9vw;
|
||||
}
|
||||
// @media screen and (min-width: 300px) {
|
||||
// :host {
|
||||
// width: 80px;
|
||||
// height: 36px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @media screen and (min-width: 600px) {
|
||||
// :host {
|
||||
// width: 120px;
|
||||
// height: 54px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @media screen and (min-width: 900px) {
|
||||
// :host {
|
||||
// width: 240px;
|
||||
// height: 108px;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
`
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="icon-button icon-with-state with-border config-activity"
|
||||
|
|
@ -164,11 +102,27 @@ export class IconControlBar extends LitElement {
|
|||
@click=${this.handleInfo}
|
||||
data-icon="drop-down"
|
||||
></div>
|
||||
${iconstyle}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
getGroupWithOutBorder(): HTMLTemplateResult | typeof nothing {
|
||||
if (!this.icon) {
|
||||
console.error('【icon-control-bar】缺少 icon 参数')
|
||||
return nothing
|
||||
}
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="icon-button icon-base group-without-border"
|
||||
data-icon=${this.icon}
|
||||
@click=${this}
|
||||
@touchstart=${this}
|
||||
@touchend=${this}
|
||||
></div>
|
||||
`
|
||||
}
|
||||
|
||||
@eventOptions({passive: false})
|
||||
handleEvent(event: Event) {
|
||||
switch (event.type) {
|
||||
|
|
@ -202,6 +156,7 @@ export class IconControlBar extends LitElement {
|
|||
|
||||
isActive = target.classList.contains('active')
|
||||
this.activeOrInactive(isActive, target)
|
||||
this.fireEvent(isActive)
|
||||
}
|
||||
|
||||
// if (this.type == IconControlBarType.WITH_STATE) {
|
||||
|
|
@ -214,7 +169,17 @@ export class IconControlBar extends LitElement {
|
|||
// this.moreInfoIcon.dataset.icon = "";
|
||||
// }
|
||||
// }
|
||||
if (this.type == IconControlBarType.GROUP_WITHOUT_BORDER) {
|
||||
this.iconBtn.classList.add('actived')
|
||||
let timeoutId = window.setTimeout(() => {
|
||||
clearTimeout(timeoutId)
|
||||
this.iconBtn.classList.remove('actived')
|
||||
this.fireEvent()
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
|
||||
fireEvent(isActive?: boolean) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('icon-control-bar-click', {
|
||||
detail: {
|
||||
|
|
@ -307,6 +272,8 @@ export class IconControlBar extends LitElement {
|
|||
return this.getbaseWithOutBorder()
|
||||
case IconControlBarType.WITH_STATE:
|
||||
return this.getwithstate()
|
||||
case IconControlBarType.GROUP_WITHOUT_BORDER:
|
||||
return this.getGroupWithOutBorder()
|
||||
default:
|
||||
console.error('unhandled 【icon-control-bar】 type')
|
||||
return nothing
|
||||
|
|
@ -333,7 +300,7 @@ export class IconControlBar extends LitElement {
|
|||
return this.iconBtn.classList
|
||||
}
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,21 @@ export const sharedStyles: CSSResult = css`
|
|||
--text-color-active: #ffffff;
|
||||
}
|
||||
|
||||
.icon-with-state {
|
||||
width: calc(240px / var(--hostDevicePixelRatio));
|
||||
height: var(--auto-108px);
|
||||
}
|
||||
|
||||
.icon-base.with-border {
|
||||
width: var(--auto-104px);
|
||||
height: var(--auto-104px);
|
||||
}
|
||||
|
||||
.icon-base.group-without-border {
|
||||
height: calc(110px / var(--hostDevicePixelRatio));
|
||||
width: calc(126px / var(--hostDevicePixelRatio));
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: var(--background-active) !important;
|
||||
color: var(--text-color-active) !important;
|
||||
|
|
@ -39,12 +54,8 @@ export const sharedStyles: CSSResult = css`
|
|||
// height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 1.3vw;
|
||||
}
|
||||
|
||||
.icon-with-state {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--auto-16px);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.active::before,
|
||||
|
|
@ -63,20 +74,25 @@ export const sharedStyles: CSSResult = css`
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
.icon-button.icon-base.group-without-border::before {
|
||||
position: relative;
|
||||
left: calc(50% - var(--auto-24px));
|
||||
top: calc(50% - var(--auto-24px));
|
||||
}
|
||||
|
||||
.more-info-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 1.3vw;
|
||||
height: 1.3vw;
|
||||
position: relative;
|
||||
left: 4.8vw;
|
||||
width: var(--auto-16px);
|
||||
height: var(--auto-16px);
|
||||
padding-inline-end: var(--auto-18px);
|
||||
}
|
||||
|
||||
.more-info-icon::after {
|
||||
width: 1.3vw;
|
||||
height: 1.3vw;
|
||||
line-height: 1.3vw;
|
||||
font-size: 1.3vw;
|
||||
width: var(--auto-16px);
|
||||
height: var(--auto-16px);
|
||||
line-height: var(--auto-16px);
|
||||
font-size: var(--auto-16px);
|
||||
}
|
||||
|
||||
.icon-base {
|
||||
|
|
@ -92,23 +108,18 @@ export const sharedStyles: CSSResult = css`
|
|||
font-family: OPPOSans;
|
||||
font-style: normal;
|
||||
mix-blend-mode: normal;
|
||||
width: 8.3vw;
|
||||
// height: 1vh;
|
||||
font-size: 1.75vw;
|
||||
// line-height: 1.7vw;
|
||||
width: var(--auto-100px);
|
||||
font-size: calc(21px / var(--hostDevicePixelRatio));
|
||||
}
|
||||
|
||||
.icon-name-shown,
|
||||
.icon-name {
|
||||
// font-size: 20px;
|
||||
// height: 48px;
|
||||
|
||||
font-size: 1.7vw;
|
||||
height: 4vw;
|
||||
font-size: var(--auto-20px);
|
||||
height: var(--auto-48px);
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 8.67vw;
|
||||
width: var(--auto-104px);
|
||||
}
|
||||
|
||||
.active > p {
|
||||
|
|
@ -125,7 +136,7 @@ export const sharedStyles: CSSResult = css`
|
|||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 1.75vw;
|
||||
font-size: calc(21px / var(--hostDevicePixelRatio));
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -147,19 +158,14 @@ export const sharedStyles: CSSResult = css`
|
|||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 1.75vw;
|
||||
font-size: calc(21px / var(--hostDevicePixelRatio));
|
||||
}
|
||||
|
||||
.icon-button::before {
|
||||
// width: 48px;
|
||||
// height: 48px;
|
||||
// line-height: 48px;
|
||||
// font-size: 48px;
|
||||
|
||||
width: 4vw;
|
||||
height: 4vw;
|
||||
line-height: 4vw;
|
||||
font-size: 4vw;
|
||||
width: var(--auto-48px);
|
||||
height: var(--auto-48px);
|
||||
line-height: var(--auto-48px);
|
||||
font-size: var(--auto-48px);
|
||||
}
|
||||
|
||||
:host([disabled='true']) {
|
||||
|
|
@ -188,6 +194,11 @@ export const sharedStyles: CSSResult = css`
|
|||
.icon-name-shown {
|
||||
color: var(--text-color-lm);
|
||||
}
|
||||
|
||||
.icon-base.group-without-border.actived {
|
||||
background: rgba(255, 255, 255, 1) !important;
|
||||
border-radius: var(--auto-16px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -202,5 +213,10 @@ export const sharedStyles: CSSResult = css`
|
|||
.icon-name-shown {
|
||||
color: var(--text-color-dm);
|
||||
}
|
||||
|
||||
.icon-base.group-without-border.actived {
|
||||
background: rgba(0, 0, 0, 0.13) !important;
|
||||
border-radius: var(--auto-16px);
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
|||
Loading…
Reference in New Issue