Merge pull request #144 in YR/star-web-components from feature-star-icons-font to master
* commit '1be5b8c8c5f1cac3c491d99f550e66eea434bc0e': (feature)引入star-icons.ttf,按钮示例作适应性修改
This commit is contained in:
汪昌棋
commit
bc62437fc4
Binary file not shown.
|
|
@ -4,6 +4,8 @@ export const autoPxStyle: CSSResult = css`
|
|||
:root {
|
||||
--hostDevicePixelRatio: var(--devicePixelRatio, 1);
|
||||
--auto-1px: calc(1px / var(--hostDevicePixelRatio));
|
||||
--auto-2px: calc(2px / var(--hostDevicePixelRatio));
|
||||
--auto-4px: calc(4px / var(--hostDevicePixelRatio));
|
||||
--auto-6px: calc(6px / var(--hostDevicePixelRatio));
|
||||
--auto-8px: calc(9px / var(--hostDevicePixelRatio));
|
||||
--auto-9px: calc(9px / var(--hostDevicePixelRatio));
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import GestureDetector, {
|
|||
import {autoPxStyle} from './auto-px-style.js'
|
||||
import {globalStyles} from './global-style.js'
|
||||
import {l10nHelper} from './custome_element_l10n.js'
|
||||
import starIcons from '../fonts/star-icons.css.js'
|
||||
|
||||
declare global {
|
||||
var loadStarMixin: boolean
|
||||
|
|
@ -110,6 +111,7 @@ export function StarMixin<T extends Constructor<ReactiveElement>>(
|
|||
|
||||
// 填充全局所需基础样式变量, 只添加一次
|
||||
const style = document.createElement('style')
|
||||
const starIconsString = starIcons.toString()
|
||||
const globalStylesString = globalStyles
|
||||
.join(' ')
|
||||
.toString()
|
||||
|
|
@ -118,7 +120,7 @@ export function StarMixin<T extends Constructor<ReactiveElement>>(
|
|||
return s1 + computeNeededDevicePixelRatio()
|
||||
})
|
||||
const autoPxStyleString = autoPxStyle.toString()
|
||||
style.innerHTML = globalStylesString + autoPxStyleString
|
||||
style.innerHTML = starIconsString + globalStylesString + autoPxStyleString
|
||||
document.head.appendChild(style)
|
||||
|
||||
window.loadStarMixin = true
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
},
|
||||
"include": [
|
||||
"*.ts",
|
||||
"../fonts/*.ts",
|
||||
"../../lib/gesture/gesture-detector.ts",
|
||||
"../../../../typings/"
|
||||
]
|
||||
|
|
|
|||
|
|
@ -158,6 +158,23 @@ export default [
|
|||
padding-inline-start: var(--auto-48px);
|
||||
padding-inline-end: var(--auto-48px);
|
||||
}
|
||||
:host([type='pure']) button::before,
|
||||
:host([type='icon']) button::before,
|
||||
:host([type='ghost']) button[data-icon]::before,
|
||||
:host([type='special']) button[data-icon]::before {
|
||||
font-family: 'star-icons';
|
||||
content: attr(data-icon);
|
||||
text-align: center;
|
||||
}
|
||||
:host([type='pure'][label]) button,
|
||||
:host([type='icon']) button,
|
||||
:host([type='ghost']) button,
|
||||
:host([type='special'][special='corner-marker']) button {
|
||||
/* 使得::before和文字保持垂直居中 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* normal 类型按钮 */
|
||||
:host([type='normal']),
|
||||
|
|
@ -196,10 +213,31 @@ export default [
|
|||
/* pure 类型按钮 */
|
||||
:host([type='pure']) {
|
||||
border-radius: 50%;
|
||||
font-size: var(--auto-28px);
|
||||
font-size: var(--auto-26px);
|
||||
color: var(--color-btn-pure);
|
||||
background-color: var(--bgc-btn-pure);
|
||||
}
|
||||
:host([type='pure'][label]) button div {
|
||||
/* 包裹带省略符的文本的标签必须使用 display: block */
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
/* pure中的图标大小 */
|
||||
:host([type='pure']) button::before,
|
||||
:host([type='pure'][size='middle']) button::before {
|
||||
font-size: var(--auto-36px);
|
||||
}
|
||||
:host([type='pure'][size='middle']) button::before {
|
||||
font-size: var(--auto-48px);
|
||||
}
|
||||
:host([type='pure'][size='large']) button::before {
|
||||
font-size: var(--auto-56px);
|
||||
}
|
||||
:host([type='pure'][size='extralarge']) button::before {
|
||||
font-size: var(--auto-80px);
|
||||
}
|
||||
/* 只针对label */
|
||||
:host([type='pure'][label]:not([icon])) button {
|
||||
display: inline-flex;
|
||||
|
|
@ -217,12 +255,14 @@ export default [
|
|||
min-width: var(--auto-260px);
|
||||
min-height: var(--auto-80px);
|
||||
max-height: var(--auto-80px);
|
||||
font-size: var(--auto-32px);
|
||||
border-radius: var(--auto-40px);
|
||||
}
|
||||
:host([type='pure'][label][size='large']) {
|
||||
min-width: var(--auto-320px);
|
||||
min-height: var(--auto-96px);
|
||||
max-height: var(--auto-96px);
|
||||
font-size: var(--auto-38px);
|
||||
border-radius: var(--auto-48px);
|
||||
}
|
||||
:host([type='pure'][variant='establish']) {
|
||||
|
|
@ -230,37 +270,33 @@ export default [
|
|||
background-color: var(--theme-blue);
|
||||
}
|
||||
/* 只针对icon */
|
||||
:host([type='pure']:not([label])[size='small']) {
|
||||
:host([type='pure']:not([label])) {
|
||||
width: var(--auto-64px);
|
||||
height: var(--auto-64px);
|
||||
font-size: var(--auto-25_6px);
|
||||
}
|
||||
:host([type='pure']:not([label])[size='middle']) {
|
||||
width: var(--auto-80px);
|
||||
height: var(--auto-80px);
|
||||
font-size: var(--auto-32px);
|
||||
}
|
||||
:host([type='pure']:not([label])[size='large']) {
|
||||
width: var(--auto-96px);
|
||||
height: var(--auto-96px);
|
||||
font-size: var(--auto-38_4px);
|
||||
}
|
||||
:host([type='pure']:not([label])[size='extralarge']) {
|
||||
width: var(--auto-152px);
|
||||
height: var(--auto-152px);
|
||||
font-size: var(--auto-44_8px);
|
||||
color: var(--color-btn-pure-default);
|
||||
background-color: var(--bgc-btn-pure-default);
|
||||
}
|
||||
/* 图标与文字之间的间隙 */
|
||||
:host([type='pure'][label]) button::before {
|
||||
padding-right: var(--auto-9px);
|
||||
padding-right: var(--auto-2px);
|
||||
}
|
||||
:host([type='pure'][label]) button.middle::before {
|
||||
padding-right: var(--auto-14px);
|
||||
padding-right: var(--auto-4px);
|
||||
}
|
||||
:host([type='pure'][label]) button.large::before {
|
||||
padding-right: var(--auto-16px);
|
||||
padding-right: var(--auto-6px);
|
||||
}
|
||||
|
||||
/* text 类型按钮 */
|
||||
|
|
@ -332,6 +368,7 @@ export default [
|
|||
width: var(--auto-48px);
|
||||
height: var(--auto-48px);
|
||||
border-radius: 50%;
|
||||
font-size: var(--auto-48px);
|
||||
color: var(--bgc-btn-special-delete-icon);
|
||||
background-color: var(--bgc-btn-special-delete);
|
||||
}
|
||||
|
|
@ -367,10 +404,9 @@ export default [
|
|||
font-size: var(--auto-36px);
|
||||
color: var(--color-btn-special-go-back);
|
||||
}
|
||||
:host([type='special']) button.go-back #goback {
|
||||
max-width: var(--auto-48px);
|
||||
max-height: var(--auto-48px);
|
||||
margin: auto var(--auto-6px) auto 0;
|
||||
:host([type='special']) button.go-back::before {
|
||||
font-size: var(--auto-48px);
|
||||
margin-right: var(--auto-6px);
|
||||
}
|
||||
:host([type='special']) button.go-back span {
|
||||
margin: auto;
|
||||
|
|
@ -416,18 +452,6 @@ export default [
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
/* 共性-icon */
|
||||
:host([type='pure']) button[data-icon]::before,
|
||||
:host([type='icon']) button[data-icon]::before,
|
||||
:host([type='ghost']) button[data-icon]::before,
|
||||
:host([type='special'])
|
||||
button[data-icon]:not(.go-back, .corner-marker)::before {
|
||||
font-family: 'gaia-icons';
|
||||
font-size: inherit;
|
||||
content: attr(data-icon);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/***********************dark theme*****************************/
|
||||
:host([type='normal'][variant='default'][theme='dark']) {
|
||||
color: var(--color-btn-normal-default-dm);
|
||||
|
|
|
|||
|
|
@ -221,7 +221,7 @@ export class StarButton extends StarBaseElement {
|
|||
? nothing
|
||||
: html`<slot name="asset"></slot>`}${this.hasLabel
|
||||
// ? html`<span>${this.label}</span>`
|
||||
? html`${this.label}`
|
||||
? html`<div>${this.label}</div>`
|
||||
: nothing}`
|
||||
/* prettier-ignore */
|
||||
return html`
|
||||
|
|
@ -278,11 +278,11 @@ export class StarButton extends StarBaseElement {
|
|||
switch (this.special) {
|
||||
case ButtonSpecial.CORNERMARKER:
|
||||
return html`
|
||||
<button class="${this.special}">
|
||||
<star-svg-icon
|
||||
<button class="${this.special}" data-icon="delete-corner">
|
||||
<!-- <star-svg-icon
|
||||
id="deletecorner"
|
||||
symbol="deletecorner"
|
||||
></star-svg-icon>
|
||||
></star-svg-icon> -->
|
||||
</button>
|
||||
`
|
||||
case ButtonSpecial.HANGUP:
|
||||
|
|
@ -311,8 +311,8 @@ export class StarButton extends StarBaseElement {
|
|||
`
|
||||
case ButtonSpecial.GOBACK:
|
||||
return html`
|
||||
<button class="${this.special}">
|
||||
<star-svg-icon id="goback" symbol="goback"></star-svg-icon>
|
||||
<button class="${this.special}" data-icon="left-arrow">
|
||||
<!-- <star-svg-icon id="goback" symbol="goback"></star-svg-icon> -->
|
||||
<span>返回</span>
|
||||
</button>
|
||||
`
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
import {css, unsafeCSS} from 'lit'
|
||||
|
||||
const ttfUrl = unsafeCSS(new URL('./star-icons.ttf', import.meta.url).href)
|
||||
|
||||
export default css`
|
||||
@font-face {
|
||||
font-family: 'star-icons';
|
||||
src: url(${ttfUrl}) format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[data-icon]:before {
|
||||
font-family: 'star-icons';
|
||||
content: attr(data-icon);
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
text-decoration: inherit;
|
||||
text-transform: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 30px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
`
|
||||
Binary file not shown.
|
|
@ -147,36 +147,36 @@ export class PanelButton extends LitElement {
|
|||
<star-button type="pure" variant="primary" size="small" icon="bug" label="添加" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" variant="primary" size="small" icon="bug" label="添加组件"></star-button>
|
||||
<star-button type="pure" variant="primary" size="small" icon="bug" label="添加组件" disabled></star-button>
|
||||
<star-button type="pure" variant="primary" size="small" icon="add" label="添加组件"></star-button>
|
||||
<star-button type="pure" variant="primary" size="small" icon="add" label="添加组件" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" variant="establish" size="small" icon="bug" label="添加组件"></star-button>
|
||||
<star-button type="pure" variant="establish" size="small" icon="bug" label="添加组件" disabled></star-button>
|
||||
<star-button type="pure" variant="establish" size="small" icon="add" label="添加组件"></star-button>
|
||||
<star-button type="pure" variant="establish" size="small" icon="add" label="添加组件" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" variant="primary" size="small" icon="bug" label="很长名字的组件"></star-button>
|
||||
<star-button type="pure" variant="primary" size="small" icon="bug" label="很长名字的组件" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" variant="primary" size="middle" icon="bug" label="添加组件"></star-button>
|
||||
<star-button type="pure" variant="primary" size="middle" icon="bug" label="添加组件" disabled></star-button>
|
||||
<star-button type="pure" variant="primary" size="middle" icon="add" label="添加组件"></star-button>
|
||||
<star-button type="pure" variant="primary" size="middle" icon="add" label="添加组件" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" variant="establish" size="middle" icon="bug" label="添加组件"></star-button>
|
||||
<star-button type="pure" variant="establish" size="middle" icon="bug" label="添加组件" disabled></star-button>
|
||||
<star-button type="pure" variant="establish" size="middle" icon="add" label="添加组件"></star-button>
|
||||
<star-button type="pure" variant="establish" size="middle" icon="add" label="添加组件" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" variant="primary" size="large" icon="bug" label="添加组件"></star-button>
|
||||
<star-button type="pure" variant="primary" size="large" icon="bug" label="添加组件" disabled></star-button>
|
||||
<star-button type="pure" variant="primary" size="large" icon="add" label="添加组件"></star-button>
|
||||
<star-button type="pure" variant="primary" size="large" icon="add" label="添加组件" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" variant="establish" size="large" icon="bug" label="添加组件"></star-button>
|
||||
<star-button type="pure" variant="establish" size="large" icon="bug" label="添加组件" disabled></star-button>
|
||||
<star-button type="pure" variant="establish" size="large" icon="add" label="添加组件"></star-button>
|
||||
<star-button type="pure" variant="establish" size="large" icon="add" label="添加组件" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" theme="dark" variant="primary" size="large" icon="bug" label="添加组件"></star-button>
|
||||
<star-button type="pure" theme="dark" variant="primary" size="large" icon="bug" label="添加组件" disabled></star-button>
|
||||
<star-button type="pure" theme="dark" variant="primary" size="large" icon="add" label="添加组件"></star-button>
|
||||
<star-button type="pure" theme="dark" variant="primary" size="large" icon="add" label="添加组件" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" icon="bug" size="small" label="最短"></star-button>
|
||||
|
|
@ -193,6 +193,23 @@ export class PanelButton extends LitElement {
|
|||
<star-button type="pure" icon="bug" style="width:400px" size="middle" label="自定义长度400px"></star-button>
|
||||
<star-button type="pure" icon="bug" style="width:600px" size="large" label="自定义长度600px(最长为520px)"></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" icon="reboot" variant="primary" size="small"></star-button>
|
||||
<star-button type="pure" icon="reboot" variant="primary" size="middle"></star-button>
|
||||
<star-button type="pure" icon="reboot" variant="primary" size="large"></star-button>
|
||||
<star-button type="pure" icon="reboot" variant="default" size="extralarge"></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" icon="shutdown" variant="primary" size="small"></star-button>
|
||||
<star-button type="pure" icon="shutdown" variant="primary" size="middle"></star-button>
|
||||
<star-button type="pure" icon="shutdown" variant="primary" size="large"></star-button>
|
||||
<star-button type="pure" icon="shutdown" variant="default" size="extralarge"></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" icon="add" size="small" label="添加组件"></star-button>
|
||||
<star-button type="pure" icon="add" size="middle" label="添加组件"></star-button>
|
||||
<star-button type="pure" icon="add" size="large" label="添加组件"></star-button>
|
||||
</star-li>
|
||||
</star-ul>
|
||||
|
||||
<h3>使用场景:对话框底部按钮</h3>
|
||||
|
|
@ -232,12 +249,12 @@ export class PanelButton extends LitElement {
|
|||
<h3>Icon类型按钮使用场景:在base色纯背景上的裸图标按钮</h3>
|
||||
<star-ul type="onlyheader" title="Icon类型2种大小的按钮及禁用按钮">
|
||||
<star-li type="base">
|
||||
<star-button type="icon" icon="bug" size="small"></star-button>
|
||||
<star-button type="icon" icon="bug" size="small" disabled></star-button>
|
||||
<star-button type="icon" icon="add" size="small"></star-button>
|
||||
<star-button type="icon" icon="add" size="small" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="icon" icon="bug" size="middle"></star-button>
|
||||
<star-button type="icon" icon="bug" size="middle" disabled></star-button>
|
||||
<star-button type="icon" icon="minus" size="middle"></star-button>
|
||||
<star-button type="icon" icon="minus" size="middle" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="icon" theme="dark" icon="bug" size="middle"></star-button>
|
||||
|
|
@ -248,20 +265,20 @@ export class PanelButton extends LitElement {
|
|||
<h3>Ghost类型按钮使用场景:拍照、摄像应用，多端协同拍照控制界面</h3>
|
||||
<star-ul type="onlyheader" title="Ghost类型提供3种大小的按钮">
|
||||
<star-li type="base">
|
||||
<star-button type="ghost" icon="bug" size="small"></star-button>
|
||||
<star-button type="ghost" icon="bug" size="small" disabled></star-button>
|
||||
<star-button type="ghost" icon="switch-camera" size="small"></star-button>
|
||||
<star-button type="ghost" icon="switch-camera" size="small" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="ghost" icon="bug" size="middle"></star-button>
|
||||
<star-button type="ghost" icon="bug" size="middle" disabled></star-button>
|
||||
<star-button type="ghost" icon="switch-camera" size="middle"></star-button>
|
||||
<star-button type="ghost" icon="switch-camera" size="middle" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="ghost" icon="bug" size="large"></star-button>
|
||||
<star-button type="ghost" icon="bug" size="large" disabled></star-button>
|
||||
<star-button type="ghost" icon="switch-camera" size="large"></star-button>
|
||||
<star-button type="ghost" icon="switch-camera" size="large" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="ghost" theme="dark" icon="bug" size="large"></star-button>
|
||||
<star-button type="ghost" theme="dark" icon="bug" size="large" disabled></star-button>
|
||||
<star-button type="ghost" theme="dark" icon="switch-camera" size="large"></star-button>
|
||||
<star-button type="ghost" theme="dark" icon="switch-camera" size="large" disabled></star-button>
|
||||
</star-li>
|
||||
</star-ul>
|
||||
|
||||
|
|
@ -298,16 +315,16 @@ export class PanelButton extends LitElement {
|
|||
|
||||
<star-ul type="onlyheader" title="插入静态图标的Pure、Icon、Ghost按钮">
|
||||
<star-li type="base">
|
||||
<star-button type="pure" variant="default" size="small">${staticSvg}</star-button>
|
||||
<star-button type="pure" variant="default" size="middle">${staticSvg}</star-button>
|
||||
<star-button type="pure" variant="default" size="large">${staticSvg}</star-button>
|
||||
<star-button type="pure" variant="default" size="extralarge">${staticSvg}</star-button>
|
||||
<star-button type="pure" icon="reboot" variant="primary" size="small"></star-button>
|
||||
<star-button type="pure" icon="reboot" variant="primary" size="middle"></star-button>
|
||||
<star-button type="pure" icon="reboot" variant="primary" size="large"></star-button>
|
||||
<star-button type="pure" icon="reboot" variant="default" size="extralarge"></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" variant="default" size="small">${staticPowerSvg}</star-button>
|
||||
<star-button type="pure" variant="default" size="middle">${staticPowerSvg}</star-button>
|
||||
<star-button type="pure" variant="default" size="large">${staticPowerSvg}</star-button>
|
||||
<star-button type="pure" variant="default" size="extralarge">${staticPowerSvg}</star-button>
|
||||
<star-button type="pure" icon="shutdown" variant="primary" size="small"></star-button>
|
||||
<star-button type="pure" icon="shutdown" variant="primary" size="middle"></star-button>
|
||||
<star-button type="pure" icon="shutdown" variant="primary" size="large"></star-button>
|
||||
<star-button type="pure" icon="shutdown" variant="default" size="extralarge"></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" size="small" label="添加组件">${staticSvg}</star-button>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,299 @@
|
|||
import {css, html, LitElement} from 'lit'
|
||||
import {customElement} from 'lit/decorators.js'
|
||||
import {map} from 'lit/directives/map.js'
|
||||
|
||||
@customElement('panel-fonts-gaia-icons')
|
||||
export class PanelFontsGaiaIcons extends LitElement {
|
||||
icons = [
|
||||
'2g',
|
||||
'3g',
|
||||
'4g',
|
||||
|
||||
'accessibility',
|
||||
'achievement',
|
||||
'add-contact',
|
||||
'add',
|
||||
'addons',
|
||||
|
||||
'airplane',
|
||||
'alarm-clock',
|
||||
'alarm-stop',
|
||||
'alarm',
|
||||
|
||||
'album',
|
||||
'all-day',
|
||||
'arrow-left',
|
||||
'arrow-right',
|
||||
'artist',
|
||||
'attachment',
|
||||
'battery-0',
|
||||
'battery-1',
|
||||
'battery-2',
|
||||
'battery-3',
|
||||
'battery-4',
|
||||
'battery-5',
|
||||
'battery-6',
|
||||
'battery-7',
|
||||
'battery-8',
|
||||
'battery-9',
|
||||
'battery-10',
|
||||
'battery-charging',
|
||||
'battery-unknown',
|
||||
|
||||
'bluetooth-a2dp',
|
||||
'bluetooth-circle',
|
||||
'bluetooth-transfer-circle',
|
||||
'bluetooth-transfer',
|
||||
'bluetooth',
|
||||
|
||||
'brightness',
|
||||
'browsing',
|
||||
'bug',
|
||||
|
||||
'calendar',
|
||||
'call-bluetooth',
|
||||
'call-emergency',
|
||||
'call-forwarding',
|
||||
'call-hang-up',
|
||||
'call-hold',
|
||||
'call-incoming',
|
||||
'call-merge',
|
||||
'call-missed',
|
||||
'call-outgoing',
|
||||
'call-reversed',
|
||||
'call-ringing',
|
||||
'call',
|
||||
'callback-emergency',
|
||||
|
||||
'camera',
|
||||
'change-wallpaper',
|
||||
'clear-input-left',
|
||||
'clear-input-right',
|
||||
|
||||
'close',
|
||||
'compose',
|
||||
'contact-find',
|
||||
'contacts',
|
||||
'crashed',
|
||||
'crop',
|
||||
|
||||
'data',
|
||||
'delete',
|
||||
'developer',
|
||||
'device-info',
|
||||
'dismiss-keyboard',
|
||||
'do-not-track',
|
||||
'download-circle',
|
||||
'download',
|
||||
|
||||
'edge',
|
||||
'edit-contact',
|
||||
'edit-image',
|
||||
'edit',
|
||||
'effects',
|
||||
'email-forward',
|
||||
'email-mark-read',
|
||||
'email-mark-unread',
|
||||
'email-move',
|
||||
'email-reply',
|
||||
'email',
|
||||
|
||||
'exclamation',
|
||||
'expand-left',
|
||||
'expand-right',
|
||||
'facebook',
|
||||
'feedback',
|
||||
'find',
|
||||
'firefox',
|
||||
'flag',
|
||||
'flash-auto',
|
||||
'flash-off',
|
||||
'flash-on',
|
||||
'focus-locked',
|
||||
'focus-locking',
|
||||
|
||||
'gesture',
|
||||
'gmail',
|
||||
'grid-circular',
|
||||
'grid',
|
||||
'gsm',
|
||||
|
||||
'hdr-boxed',
|
||||
'hdr',
|
||||
'headphones',
|
||||
'help',
|
||||
'homescreen',
|
||||
'hspa-plus',
|
||||
'hspa',
|
||||
|
||||
'import-memorycard-circle',
|
||||
'incoming-sms',
|
||||
'info',
|
||||
|
||||
'keyboard-circle',
|
||||
'keyboard',
|
||||
|
||||
'languages',
|
||||
'left-light',
|
||||
'left',
|
||||
'link',
|
||||
'location',
|
||||
'lock',
|
||||
|
||||
'media-storage',
|
||||
'menu',
|
||||
'messages',
|
||||
'mic',
|
||||
'minus',
|
||||
'moon',
|
||||
'more',
|
||||
'mute',
|
||||
|
||||
'nfc',
|
||||
'no-sim',
|
||||
'notifications',
|
||||
|
||||
'o',
|
||||
'outgoing-sms',
|
||||
'outlook',
|
||||
|
||||
'pause',
|
||||
'picture-size',
|
||||
'play',
|
||||
'play-circle',
|
||||
'playlist',
|
||||
'privacy',
|
||||
|
||||
'recent-calls',
|
||||
'reload',
|
||||
'repeat-once',
|
||||
'repeat',
|
||||
'reply-all',
|
||||
'right-light',
|
||||
'right',
|
||||
'rocket',
|
||||
'rotate',
|
||||
|
||||
'scene',
|
||||
'sd-card',
|
||||
'search',
|
||||
'seek-back',
|
||||
'seek-forward',
|
||||
'select',
|
||||
'self-timer',
|
||||
'send-left',
|
||||
'send-right',
|
||||
'settings',
|
||||
'share',
|
||||
'shuffle',
|
||||
|
||||
'signal-0',
|
||||
'signal-1',
|
||||
'signal-2',
|
||||
'signal-3',
|
||||
'signal-4',
|
||||
'signal-5',
|
||||
'signal-roaming',
|
||||
|
||||
'sim-toolkit',
|
||||
'sim',
|
||||
|
||||
'skip-back',
|
||||
'skip-forward',
|
||||
|
||||
'songs',
|
||||
'sound-max',
|
||||
'sound-min',
|
||||
'star-empty',
|
||||
'star-full',
|
||||
|
||||
'stop',
|
||||
'storage-circle',
|
||||
'storage',
|
||||
'switch',
|
||||
'sync',
|
||||
|
||||
'tethering',
|
||||
'themes',
|
||||
'tick-circle',
|
||||
'tick',
|
||||
'time',
|
||||
'toggle-camera-front',
|
||||
'toggle-camera-rear',
|
||||
'topup-with-code',
|
||||
'topup',
|
||||
'twitter',
|
||||
|
||||
'undo-circular',
|
||||
'undo',
|
||||
'unlock',
|
||||
'update-balance',
|
||||
'usb',
|
||||
'user',
|
||||
|
||||
'vibrate',
|
||||
'video-mic',
|
||||
'video-size',
|
||||
'video',
|
||||
'voicemail',
|
||||
|
||||
'wallpaper',
|
||||
'wifi-1',
|
||||
'wifi-2',
|
||||
'wifi-3',
|
||||
'wifi-4',
|
||||
'wifi-permissions',
|
||||
]
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<star-li type="base">
|
||||
${map(
|
||||
this.icons,
|
||||
(iconname, _) => html`
|
||||
<star-button
|
||||
type="icon"
|
||||
icon=${iconname}
|
||||
size="small"
|
||||
></star-button>
|
||||
`
|
||||
)}
|
||||
</star-li>
|
||||
`
|
||||
}
|
||||
|
||||
styles = css`
|
||||
a {
|
||||
box-sizing: content-box;
|
||||
display: inline-block;
|
||||
color: #222;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
text-decoration: none;
|
||||
border: solid 1px #eee;
|
||||
text-align: center;
|
||||
margin: -1px;
|
||||
background: #fff;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
[data-icon]:before {
|
||||
font-family: 'star-icons';
|
||||
content: attr(data-icon);
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
text-decoration: inherit;
|
||||
text-transform: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 30px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'panel-fonts-gaia-icons': PanelFontsGaiaIcons
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,489 @@
|
|||
import {css, html, LitElement} from 'lit'
|
||||
import {customElement} from 'lit/decorators.js'
|
||||
import {map} from 'lit/directives/map.js'
|
||||
|
||||
@customElement('panel-fonts-star-icons')
|
||||
export class PanelFontsStarIcons extends LitElement {
|
||||
icons = [
|
||||
'2g',
|
||||
'3g',
|
||||
'4g',
|
||||
'IP_lm',
|
||||
'accessibility',
|
||||
'achievement',
|
||||
'add-contact',
|
||||
'add',
|
||||
'addons',
|
||||
'address-list',
|
||||
'airplane',
|
||||
'alarm-clock-stop',
|
||||
'alarm-clock',
|
||||
'alarm-song-shock',
|
||||
'alarm-stop-shock',
|
||||
'alarm-stop',
|
||||
'alarm',
|
||||
'album',
|
||||
'all-day',
|
||||
'all',
|
||||
'app-double-open',
|
||||
'app-hide',
|
||||
'app-lock',
|
||||
'app-management',
|
||||
'arrow-left',
|
||||
'arrow-right',
|
||||
'artist',
|
||||
'attachment',
|
||||
'authorization-management',
|
||||
'auto-brightness-1',
|
||||
'auto-brightness-2',
|
||||
'auto-rotate',
|
||||
'battery-0',
|
||||
'battery-1',
|
||||
'battery-10',
|
||||
'battery-2',
|
||||
'battery-3',
|
||||
'battery-4',
|
||||
'battery-5',
|
||||
'battery-6',
|
||||
'battery-7',
|
||||
'battery-8',
|
||||
'battery-9',
|
||||
'battery-charging',
|
||||
'battery-gray-1',
|
||||
'battery-gray',
|
||||
'battery-green',
|
||||
'battery-red-low',
|
||||
'battery-red',
|
||||
'battery-unknown',
|
||||
'battery-yellow',
|
||||
'battery',
|
||||
'bluetooth-a2dp',
|
||||
'bluetooth-circle',
|
||||
'bluetooth-transfer-circle',
|
||||
'bluetooth-transfer',
|
||||
'bluetooth',
|
||||
'brightness',
|
||||
'broadcast',
|
||||
'browsing',
|
||||
'bug',
|
||||
'calendar',
|
||||
'call-bluetooth',
|
||||
'call-db',
|
||||
'call-emergency',
|
||||
'call-forwarding',
|
||||
'call-hang-up',
|
||||
'call-hold',
|
||||
'call-incoming',
|
||||
'call-merge',
|
||||
'call-missed',
|
||||
'call-on',
|
||||
'call-outgoing',
|
||||
'call-reversed',
|
||||
'call-ringing',
|
||||
'call',
|
||||
'callback-emergency',
|
||||
'camera-db',
|
||||
'camera',
|
||||
'change-wallpaper',
|
||||
'clear-input-left',
|
||||
'clear-input-right',
|
||||
'close',
|
||||
'compose',
|
||||
'computer',
|
||||
'contact-find',
|
||||
'contacts',
|
||||
'crashed',
|
||||
'crop',
|
||||
'data',
|
||||
'delete-corner',
|
||||
'delete',
|
||||
'developer',
|
||||
'device-info',
|
||||
'dialpad',
|
||||
'dismiss-keyboard',
|
||||
'do-not-track',
|
||||
'download-circle',
|
||||
'download',
|
||||
'edge',
|
||||
'edit-contact',
|
||||
'edit-image',
|
||||
'edit-left',
|
||||
'edit-right',
|
||||
'edit',
|
||||
'effects',
|
||||
'email-forward',
|
||||
'email-mark-read',
|
||||
'email-mark-unread',
|
||||
'email-move',
|
||||
'email-reply',
|
||||
'email',
|
||||
'exclamation',
|
||||
'expand-left',
|
||||
'expand-right',
|
||||
'facebook',
|
||||
'feedback',
|
||||
'find',
|
||||
'firefox',
|
||||
'fix-to-dock',
|
||||
'flag',
|
||||
'flash-auto',
|
||||
'flash-off',
|
||||
'flash-on',
|
||||
'flashlight',
|
||||
'flow-down',
|
||||
'flow-none',
|
||||
'flow-up',
|
||||
'flow-updown',
|
||||
'focus-locked',
|
||||
'focus-locking',
|
||||
'font',
|
||||
'gesture',
|
||||
'gmail',
|
||||
'grid-circular',
|
||||
'grid',
|
||||
'gsm',
|
||||
'hdr-boxed',
|
||||
'hdr',
|
||||
'headphones',
|
||||
'help',
|
||||
'homescreen',
|
||||
'hot-spot',
|
||||
'hspa-plus',
|
||||
'hspa',
|
||||
'import-memorycard-circle',
|
||||
'incoming-sms',
|
||||
'info',
|
||||
'invisible',
|
||||
'keyboard-circle',
|
||||
'keyboard',
|
||||
'languages',
|
||||
'left-arrow',
|
||||
'left-db',
|
||||
'left-light',
|
||||
'left',
|
||||
'light-effect',
|
||||
'link',
|
||||
'location',
|
||||
'lock-lm',
|
||||
'lock',
|
||||
'manual',
|
||||
'media-mute',
|
||||
'media-sound',
|
||||
'media-storage',
|
||||
'menu',
|
||||
'message-voice',
|
||||
'message',
|
||||
'messages',
|
||||
'mic',
|
||||
'minus',
|
||||
'mobile-data',
|
||||
'mobile-devices',
|
||||
'mode-dark',
|
||||
'mode-do-not-disturb',
|
||||
'mode-energy-saving',
|
||||
'mode-eye-protection',
|
||||
'mode-landscape',
|
||||
'mode-pure',
|
||||
'moon',
|
||||
'more',
|
||||
'mute',
|
||||
'nfc',
|
||||
'no-see',
|
||||
'no-sim',
|
||||
'notifications',
|
||||
'oo',
|
||||
'outgoing-sms',
|
||||
'outlook',
|
||||
'password',
|
||||
'pause-db',
|
||||
'pause',
|
||||
'personalization',
|
||||
'picture-size',
|
||||
'pin',
|
||||
'play-circle',
|
||||
'play-db',
|
||||
'play',
|
||||
'playlist',
|
||||
'power',
|
||||
'privacy',
|
||||
'qq',
|
||||
'reboot',
|
||||
'recent-calls',
|
||||
'reduce-db',
|
||||
'reference-value',
|
||||
'reload',
|
||||
'repeat-once',
|
||||
'repeat',
|
||||
'reply-all',
|
||||
'right-light',
|
||||
'right',
|
||||
'rocket',
|
||||
'rotate',
|
||||
'safe',
|
||||
'scene',
|
||||
'screen-projection',
|
||||
'screen-recording',
|
||||
'screen',
|
||||
'sd-card',
|
||||
'search',
|
||||
'see',
|
||||
'seek-back',
|
||||
'seek-forward',
|
||||
'select',
|
||||
'self-timer',
|
||||
'send-left',
|
||||
'send-right',
|
||||
'settings',
|
||||
'share',
|
||||
'shuffle',
|
||||
'shutdown',
|
||||
'sign-out',
|
||||
'signal-0',
|
||||
'signal-1',
|
||||
'signal-2',
|
||||
'signal-2g-0-d',
|
||||
'signal-2g-0-no',
|
||||
'signal-2g-0-u',
|
||||
'signal-2g-0-ud',
|
||||
'signal-2g-0',
|
||||
'signal-2g-1-d',
|
||||
'signal-2g-1-no',
|
||||
'signal-2g-1-u',
|
||||
'signal-2g-1-ud',
|
||||
'signal-2g-1',
|
||||
'signal-2g-2-d',
|
||||
'signal-2g-2-no',
|
||||
'signal-2g-2-u',
|
||||
'signal-2g-2-ud',
|
||||
'signal-2g-2',
|
||||
'signal-2g-3-d',
|
||||
'signal-2g-3-no',
|
||||
'signal-2g-3-u',
|
||||
'signal-2g-3-ud',
|
||||
'signal-2g-3',
|
||||
'signal-2g-4-d',
|
||||
'signal-2g-4-no',
|
||||
'signal-2g-4-u',
|
||||
'signal-2g-4-ud',
|
||||
'signal-2g-4',
|
||||
'signal-3',
|
||||
'signal-3g-0-d',
|
||||
'signal-3g-0-no',
|
||||
'signal-3g-0-u',
|
||||
'signal-3g-0-ud',
|
||||
'signal-3g-0',
|
||||
'signal-3g-1-d',
|
||||
'signal-3g-1-no',
|
||||
'signal-3g-1-u',
|
||||
'signal-3g-1-ud',
|
||||
'signal-3g-1',
|
||||
'signal-3g-2-d',
|
||||
'signal-3g-2-no',
|
||||
'signal-3g-2-u',
|
||||
'signal-3g-2-ud',
|
||||
'signal-3g-2',
|
||||
'signal-3g-3-d',
|
||||
'signal-3g-3-no',
|
||||
'signal-3g-3-u',
|
||||
'signal-3g-3-ud',
|
||||
'signal-3g-3',
|
||||
'signal-3g-4-d',
|
||||
'signal-3g-4-no',
|
||||
'signal-3g-4-u',
|
||||
'signal-3g-4-ud',
|
||||
'signal-3g-4',
|
||||
'signal-4',
|
||||
'signal-4g-0-d',
|
||||
'signal-4g-0-no',
|
||||
'signal-4g-0-u',
|
||||
'signal-4g-0-ud',
|
||||
'signal-4g-0',
|
||||
'signal-4g-1-d',
|
||||
'signal-4g-1-no',
|
||||
'signal-4g-1-u',
|
||||
'signal-4g-1-ud',
|
||||
'signal-4g-1',
|
||||
'signal-4g-2-d',
|
||||
'signal-4g-2-no',
|
||||
'signal-4g-2-u',
|
||||
'signal-4g-2-ud',
|
||||
'signal-4g-2',
|
||||
'signal-4g-3-d',
|
||||
'signal-4g-3-no',
|
||||
'signal-4g-3-u',
|
||||
'signal-4g-3-ud',
|
||||
'signal-4g-3',
|
||||
'signal-4g-4-d',
|
||||
'signal-4g-4-no',
|
||||
'signal-4g-4-u',
|
||||
'signal-4g-4-ud',
|
||||
'signal-4g-4',
|
||||
'signal-5',
|
||||
'signal-5g-0-d',
|
||||
'signal-5g-0-no',
|
||||
'signal-5g-0-u',
|
||||
'signal-5g-0-ud',
|
||||
'signal-5g-0',
|
||||
'signal-5g-1-d',
|
||||
'signal-5g-1-no',
|
||||
'signal-5g-1-u',
|
||||
'signal-5g-1-ud',
|
||||
'signal-5g-1',
|
||||
'signal-5g-2-d',
|
||||
'signal-5g-2-no',
|
||||
'signal-5g-2-u',
|
||||
'signal-5g-2-ud',
|
||||
'signal-5g-2',
|
||||
'signal-5g-3-d',
|
||||
'signal-5g-3-no',
|
||||
'signal-5g-3-u',
|
||||
'signal-5g-3-ud',
|
||||
'signal-5g-3',
|
||||
'signal-5g-4-d',
|
||||
'signal-5g-4-no',
|
||||
'signal-5g-4-u',
|
||||
'signal-5g-4-ud',
|
||||
'signal-5g-4',
|
||||
'signal-e-0-d',
|
||||
'signal-e-0-no',
|
||||
'signal-e-0-u',
|
||||
'signal-e-0-ud',
|
||||
'signal-e-0',
|
||||
'signal-e-1-d',
|
||||
'signal-e-1-no',
|
||||
'signal-e-1-u',
|
||||
'signal-e-1-ud',
|
||||
'signal-e-1',
|
||||
'signal-e-2-d',
|
||||
'signal-e-2-no',
|
||||
'signal-e-2-u',
|
||||
'signal-e-2-ud',
|
||||
'signal-e-2',
|
||||
'signal-e-3-d',
|
||||
'signal-e-3-no',
|
||||
'signal-e-3-u',
|
||||
'signal-e-3-ud',
|
||||
'signal-e-3',
|
||||
'signal-e-4-d',
|
||||
'signal-e-4-no',
|
||||
'signal-e-4-u',
|
||||
'signal-e-4-ud',
|
||||
'signal-e-4',
|
||||
'signal-open-card',
|
||||
'signal-roaming',
|
||||
'sim-1',
|
||||
'sim-2',
|
||||
'sim-toolkit',
|
||||
'sim',
|
||||
'skip-back',
|
||||
'skip-forward',
|
||||
'songs',
|
||||
'sound-max',
|
||||
'sound-min',
|
||||
'speed',
|
||||
'star-empty',
|
||||
'star-full',
|
||||
'start-loading',
|
||||
'stop',
|
||||
'storage-circle',
|
||||
'storage',
|
||||
'switch-camera',
|
||||
'switch',
|
||||
'sync',
|
||||
'system',
|
||||
'tethering',
|
||||
'themes',
|
||||
'tick-circle',
|
||||
'tick',
|
||||
'time',
|
||||
'toggle-camera-front',
|
||||
'toggle-camera-rear',
|
||||
'topup-with-code',
|
||||
'topup',
|
||||
'trusted-os',
|
||||
'trusted-root',
|
||||
'trusted-startup-and-trustchain',
|
||||
'twitter',
|
||||
'undo-circular',
|
||||
'undo',
|
||||
'unlock',
|
||||
'unpin',
|
||||
'update-balance',
|
||||
'usb',
|
||||
'user',
|
||||
'vibrate',
|
||||
'video-mic',
|
||||
'video-size',
|
||||
'video',
|
||||
'voicemail',
|
||||
'wallpaper',
|
||||
'wechat',
|
||||
'wifi-0',
|
||||
'wifi-1',
|
||||
'wifi-2',
|
||||
'wifi-3',
|
||||
'wifi-4',
|
||||
'wifi-lock-0',
|
||||
'wifi-lock-1',
|
||||
'wifi-lock-2',
|
||||
'wifi-lock-3',
|
||||
'wifi-lock-4',
|
||||
'wifi-nonet-0',
|
||||
'wifi-nonet-1',
|
||||
'wifi-nonet-2',
|
||||
'wifi-nonet-3',
|
||||
'wifi-permissions',
|
||||
]
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<star-li type="base">
|
||||
${map(
|
||||
this.icons,
|
||||
(iconname, _) => html`
|
||||
<star-button
|
||||
type="icon"
|
||||
icon=${iconname}
|
||||
size="small"
|
||||
></star-button>
|
||||
`
|
||||
)}
|
||||
</star-li>
|
||||
`
|
||||
}
|
||||
|
||||
styles = css`
|
||||
a {
|
||||
box-sizing: content-box;
|
||||
display: inline-block;
|
||||
color: #222;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
text-decoration: none;
|
||||
border: solid 1px #eee;
|
||||
text-align: center;
|
||||
margin: -1px;
|
||||
background: #fff;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
[data-icon]:before {
|
||||
font-family: 'star-icons';
|
||||
content: attr(data-icon);
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
text-decoration: inherit;
|
||||
text-transform: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 30px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'panel-fonts-star-icons': PanelFontsStarIcons
|
||||
}
|
||||
}
|
||||
|
|
@ -21,6 +21,8 @@ import './container/homescreen-container'
|
|||
import './control-center/control-center'
|
||||
import './dialog/dialog'
|
||||
import './digicipher/digicipher'
|
||||
import './fonts/gaia-icons.ts'
|
||||
import './fonts/star-icons'
|
||||
import './gauss_canvas/gauss-blur'
|
||||
import './general/general'
|
||||
import './gesture/gesture'
|
||||
|
|
@ -414,6 +416,24 @@ export class PanelRoot extends LitElement {
|
|||
></star-li>
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.ONLY_HEADER} title="生产用图标字体">
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="原gaia-icons图标字体库"
|
||||
icon="play-circle"
|
||||
iconcolor="red"
|
||||
href="#fonts-gaia-icons"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="新star-icons图标字体库"
|
||||
icon="play-circle"
|
||||
iconcolor="red"
|
||||
href="#fonts-star-icons"
|
||||
></star-li>
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.BASE}>
|
||||
<star-li
|
||||
type=${LiType.ONLY_EDIT}
|
||||
|
|
|
|||
Loading…
Reference in New Issue