From a9d83c8c33ff94554db333b12116fe8a02a33555 Mon Sep 17 00:00:00 2001 From: wangchangqi Date: Wed, 2 Nov 2022 15:51:45 +0800 Subject: [PATCH] =?UTF-8?q?(improve)=E5=9F=BA=E7=A1=80=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E9=80=82=E5=BA=94=E8=AE=BE=E8=AE=A1=E5=86=85?= =?UTF-8?q?=E5=AE=B9=E7=9A=84=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/auto-px-style.ts | 4 + src/components/base/star-base-element.ts | 2 + src/components/button/README.md | 15 +- src/components/button/button.css.ts | 43 +++-- src/components/button/button.ts | 198 +++++++++++------------ src/test/panels/button/button.ts | 110 +++++++------ 6 files changed, 191 insertions(+), 181 deletions(-) diff --git a/src/components/base/auto-px-style.ts b/src/components/base/auto-px-style.ts index 80a1e1c..cc7751a 100644 --- a/src/components/base/auto-px-style.ts +++ b/src/components/base/auto-px-style.ts @@ -11,6 +11,7 @@ export const autoPxStyle: CSSResult = css` --auto-18px: calc(18px / var(--hostDevicePixelRatio)); --auto-24px: calc(24px / var(--hostDevicePixelRatio)); --auto-28px: calc(28px / var(--hostDevicePixelRatio)); + --auto-30px: calc(30px / var(--hostDevicePixelRatio)); --auto-32px: calc(32px / var(--hostDevicePixelRatio)); --auto-34px: calc(34px / var(--hostDevicePixelRatio)); --auto-36px: calc(36px / var(--hostDevicePixelRatio)); @@ -19,10 +20,13 @@ export const autoPxStyle: CSSResult = css` --auto-50px: calc(50px / var(--hostDevicePixelRatio)); --auto-56px: calc(56px / var(--hostDevicePixelRatio)); --auto-64px: calc(64px / var(--hostDevicePixelRatio)); + --auto-66px: calc(66px / var(--hostDevicePixelRatio)); --auto-80px: calc(80px / var(--hostDevicePixelRatio)); + --auto-92px: calc(92px / var(--hostDevicePixelRatio)); --auto-96px: calc(96px / var(--hostDevicePixelRatio)); --auto-112px: calc(112px / var(--hostDevicePixelRatio)); --auto-152px: calc(152px / var(--hostDevicePixelRatio)); + --auto-200px: calc(200px / var(--hostDevicePixelRatio)); --auto-208px: calc(208px / var(--hostDevicePixelRatio)); --auto-260px: calc(260px / var(--hostDevicePixelRatio)); --auto-310px: calc(310px / var(--hostDevicePixelRatio)); diff --git a/src/components/base/star-base-element.ts b/src/components/base/star-base-element.ts index 037b05b..24e2c57 100644 --- a/src/components/base/star-base-element.ts +++ b/src/components/base/star-base-element.ts @@ -130,3 +130,5 @@ export class StarBaseElement extends StarMixin(LitElement) { export * from 'lit' export * from 'lit/decorators.js' +export * from 'lit/directives/if-defined.js' +export * from 'lit-html/directives/style-map.js' diff --git a/src/components/button/README.md b/src/components/button/README.md index b54b06a..c6743f0 100644 --- a/src/components/button/README.md +++ b/src/components/button/README.md @@ -12,8 +12,9 @@ | -------------- | ---------------------------------------------------- | -------- | -------------------------------- | | size | 'small'，'middle'，'large'，'extralarge' | 'small' | 不是所有按钮都拥有不同的大小类型 | | type | 'normal'，'pure'，'text'，'icon'，'ghost'，'specail' | -| variant | 'primary'，'default'，'warn' | +| variant | 'primary'，'default'，'warn'，'establish' | | label | 字符串 | +| width | 字符串 | | 用于自定义 Normal 按钮的宽度 | | special | 'corner-marker'，'hang-up'，'answer-call'，'go-back' | | icon | 对应 gaia-icons 中的图标名 | | disabled | true，false | false | @@ -45,13 +46,13 @@ - `` - `` - `` -- `` 注意： - type 必需: type="normal". -- size 可选， 默认为 "small"，可选 "small", "middle", "large", "extralarge". +- size 可选， 默认为 "small"，可选 "small", "middle", "large". - variant 可选， 默认为 "default"，可选 "default", "primary", "warn". +- width 可选, 有效值区间[200,520], 抵近对应按钮的最小宽度和最大宽度 - disabled 可选， 默认为 false. ### 2. Pure - 纯按钮 @@ -65,9 +66,10 @@ 使用格式： -- `` -- `` -- `...` +- `` +- `` +- `...` +- `...` 注意： @@ -134,6 +136,7 @@ - type 必需: type="ghost". - size 可选， 默认为 "small"，可选 "small", "middle", "large", "extralarge". +- variant 可选， 默认为 "default"，可选 "default", "primary", "establish". - disabled 可选，默认为 false. - icon 可选， 其值为 gaia-icons 中支持的图标名. - 插槽可选，其内包裹 svg. diff --git a/src/components/button/button.css.ts b/src/components/button/button.css.ts index 2de0172..b8ae741 100644 --- a/src/components/button/button.css.ts +++ b/src/components/button/button.css.ts @@ -137,28 +137,29 @@ export default css` /* normal 类型按钮 */ :host([type='normal']) button, :host([type='normal']) button.small { - width: var(--auto-200px); + min-width: var(--auto-200px); + max-width: var(--auto-520px); height: var(--auto-64px); font-size: var(--auto-28px); border-radius: var(--auto-34px); + padding-inline-start: var(--auto-30px); + padding-inline-end: var(--auto-30px); } :host([type='normal']) button.middle { - width: var(--auto-260px); + min-width: var(--auto-260px); height: var(--auto-80px); font-size: var(--auto-32px); border-radius: var(--auto-40px); + padding-inline-start: var(--auto-66px); + padding-inline-end: var(--auto-66px); } :host([type='normal']) button.large { - width: var(--auto-320px); - height: var(--auto-96px); - font-size: var(--auto-34px); - border-radius: var(--auto-50px); - } - :host([type='normal']) button.extralarge { - width: var(--auto-520px); + min-width: var(--auto-320px); height: var(--auto-96px); font-size: var(--auto-34px); border-radius: var(--auto-50px); + padding-inline-start: var(--auto-92px); + padding-inline-end: var(--auto-92px); } :host([type='normal']) button.primary { color: var(--font-main-white); @@ -172,9 +173,7 @@ export default css` color: var(--theme-red); background-color: var(--bg-gray-button); } - :host([type='normal']) button:not(.primary), - :host([type='normal']) button.primary a.mask span { - padding: 0px var(--auto-10px); + :host([type='normal']) button { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -195,6 +194,10 @@ export default css` :host([type='pure'][label]) button { padding-inline-start: var(--auto-10px); } + :host([type='pure'][label]) button.establish { + background-color: var(--theme-blue); + color: var(--font-main-white); + } :host([type='pure']) button.small { width: var(--auto-64px); height: var(--auto-64px); @@ -226,7 +229,7 @@ export default css` width: var(--auto-152px); height: var(--auto-152px); font-size: var(--auto-44_8px); - background-color: #f4f4f4; + background-color: rgba(244, 244, 244, 0.4); } :host([type='pure'][label]) button.small::before { padding-right: var(--auto-12px); @@ -400,15 +403,8 @@ export default css` transition: linear 0.1s; } /* normal 类型按钮 pressed 时的变化 */ - :host([type='normal'].pressed) button.primary a.mask { - display: flex; - height: 100%; - align-items: center; - border-radius: inherit; - background-color: rgba(0, 0, 0, 0.12); - } - :host([type='normal'].pressed) button.primary a.mask span { - flex: 1; + :host([type='normal'].pressed) button.primary { + background: linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), #1D98F0; } :host([type='normal'].pressed) button.default, :host([type='normal'].pressed) button.warn { @@ -418,6 +414,9 @@ export default css` :host([type='pure'].pressed) button:not(.extralarge) { background-color: var(--bg-pure-button-pressed); } + :host([type='pure'][label].pressed) button.establish { + background: linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), #1D98F0; + } /* text, icon 类型按钮 pressed 时的变化 */ :host([type='text'].pressed), :host([type='icon'].pressed) { diff --git a/src/components/button/button.ts b/src/components/button/button.ts index b59bc8c..05a87d7 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -1,8 +1,10 @@ import { customElement, html, + ifDefined, nothing, property, + styleMap, CSSResultArray, HTMLTemplateResult, StarBaseElement, @@ -11,6 +13,7 @@ import buttonStyles from './button.css.js' import '../asset/svg-icon.js' export enum ButtonType { + /* TBD: Deprecated */ BASE = 'base', ICONONLY = 'icononly', ICONLABEL = 'iconlabel', @@ -35,11 +38,11 @@ export enum ButtonVariant { PRIMARY = 'primary', DEFAULT = 'default', WARN = 'warn', - ACCENT = 'accent', // (to-delete) - SECONDARY = 'secondary', // (to-delete) - NEGATIVE = 'negative', // (to-delete) - WHITE = 'white', // (to-delete) - BLACK = 'black', // (to-delete) + ACCENT = 'accent' /* Deprecated */, + SECONDARY = 'secondary' /* Deprecated */, + NEGATIVE = 'negative' /* Deprecated */, + WHITE = 'white' /* Deprecated */, + BLACK = 'black' /* Deprecated */, } export enum ButtonSpecial { @@ -63,10 +66,10 @@ export class StarButton extends StarBaseElement { /** * 按钮类型： - * base - 普通按钮(默认)(to-delete) - * icononly - 只含图标的按钮(to-delete) - * iconlabel - 含图标同时含标签(to-delete) - * confirm - 确认框按钮(to-delete) + * base - 普通按钮(默认)(Deprecated) + * icononly - 只含图标的按钮(Deprecated) + * iconlabel - 含图标同时含标签(Deprecated) + * confirm - 确认框按钮(Deprecated) * normal - 普通按钮 * pure - 纯按钮 * text - 文本按钮 @@ -81,7 +84,7 @@ export class StarButton extends StarBaseElement { * small - 小(默认) * middle - 中 * large - 大 - * extralarge - 超大 + * extralarge - 超大-------电源页按钮专用 * * 和按钮类型之间应存在约束关系 */ @@ -89,9 +92,10 @@ export class StarButton extends StarBaseElement { /** * 按钮多样性: - * primary - 强调样式 - * default - 普通样式 - * warn - 警告样式 + * primary - 强调样式 + * default - 普通样式 + * warn - 警告样式 + * establish - Pure按钮强调样式 */ @property({type: String}) variant = 'default' @@ -122,16 +126,29 @@ export class StarButton extends StarBaseElement { @property({type: Boolean}) disabled = false @property({type: String}) iconcolor = '' + + /** + * 支持自定义宽度 + * + * 可以是: 250px 200% calc(100% + 50px) + * + * 未对值进行检查 + * + * 支持的按钮类型: Normal类型 + */ + @property({type: String}) width = '' + @property({type: String}) fontsize = '' - // attributeChangedCallback(name: string, _old: string, value: string): void { - // super.attributeChangedCallback(name, _old, value) + protected get hasLabel(): boolean { + return this.label !== '' + } - // if (name === 'disabled') { - // } - // } + protected get hasIcon(): boolean { + return this.icon !== '' + } - getBaseButton(): HTMLTemplateResult { + renderBaseButton(): HTMLTemplateResult { return html` ` } - getIconOnlyButton(): HTMLTemplateResult { + renderIconOnlyButton(): HTMLTemplateResult { if (this.fontsize) { return html` - ` + const styles = { + width: this.width, } return html` - + ` } @@ -197,48 +211,30 @@ export class StarButton extends StarBaseElement { * * 可能含有 slot: * + * 当前只有电源页按钮为： default + * * 注意： ::before 伪类和换行的 标签搭配时，会被解析出“空白占位” * 在此适用 prettier-ignore 跳过 */ - getPureButton(): HTMLTemplateResult { - const content = - this.label !== '' - ? this.icon !== '' + renderPureButton(): HTMLTemplateResult { + const classes = `${this.size} ${this.variant}` + return html` + - ` - } else { - return html` - - ` - } + : nothing} + + ` } - getTextButton(): HTMLTemplateResult { + renderTextButton(): HTMLTemplateResult { if (this.label === '') throw new Error("The TextButton's label text is empty!") @@ -250,42 +246,38 @@ export class StarButton extends StarBaseElement { /** * 可能含有 slot: */ - getIconButton(): HTMLTemplateResult { + renderIconButton(): HTMLTemplateResult { if (this.size !== 'small' && this.size !== 'middle') { throw new Error("The IconButton's size is wrong!") } - if (this.icon !== '') { - return html` - - ` - } else { - return html` - - ` - } + return html` + + ` } /** * 可能含有 slot: */ - getGhostButton(): HTMLTemplateResult { - if (this.icon !== '') { - return html` - - ` - } else { - return html` - - ` - } + renderGhostButton(): HTMLTemplateResult { + return html` + + ` } - getSpecialButton(): HTMLTemplateResult | typeof nothing { + renderSpecialButton(): HTMLTemplateResult | typeof nothing { if (this.special === '') throw new Error('The special value is empty!') switch (this.special) { @@ -337,34 +329,34 @@ export class StarButton extends StarBaseElement { render() { switch (this.type) { case ButtonType.BASE: - return this.getBaseButton() + return this.renderBaseButton() case ButtonType.ICONONLY: - return this.getIconOnlyButton() + return this.renderIconOnlyButton() case ButtonType.ICONLABEL: - return this.getIconLabelButton() + return this.renderIconLabelButton() case ButtonType.Confirm: - return this.getConfirmButton() + return this.renderConfirmButton() case ButtonType.NORMAL: - return this.getNormalButton() + return this.renderNormalButton() case ButtonType.PURE: - return this.getPureButton() + return this.renderPureButton() case ButtonType.TEXT: - return this.getTextButton() + return this.renderTextButton() case ButtonType.ICON: - return this.getIconButton() + return this.renderIconButton() case ButtonType.GHOST: - return this.getGhostButton() + return this.renderGhostButton() case ButtonType.SPECIAL: - return this.getSpecialButton() + return this.renderSpecialButton() default: console.error('unhanled 【star-button】 type') diff --git a/src/test/panels/button/button.ts b/src/test/panels/button/button.ts index f3d72cc..3feadc9 100644 --- a/src/test/panels/button/button.ts +++ b/src/test/panels/button/button.ts @@ -75,9 +75,19 @@ export class PanelButton extends LitElement { - - - + + + + + + + + + + + + + @@ -85,64 +95,69 @@ export class PanelButton extends LitElement { - - - + + +

使用场景:直接放在图形背景或毛玻璃背景上的按钮

- - - + + + - - - + + + - - - + + + - - - + + + - - + + - - + + - - + + - - + + - - - - - - - - - + + - - + + + + + + + + + + + + + + @@ -188,10 +203,6 @@ export class PanelButton extends LitElement { - - - - @@ -219,16 +230,16 @@ export class PanelButton extends LitElement { - ${staticSvg} - ${staticSvg} - ${staticSvg} - ${staticSvg} + ${staticSvg} + ${staticSvg} + ${staticSvg} + ${staticSvg} - ${staticPowerSvg} - ${staticPowerSvg} - ${staticPowerSvg} - ${staticPowerSvg} + ${staticPowerSvg} + ${staticPowerSvg} + ${staticPowerSvg} + ${staticPowerSvg} ${staticSvg} @@ -243,7 +254,6 @@ export class PanelButton extends LitElement { ${staticSvg} ${staticSvg} ${staticSvg} - ${staticSvg}