(improve) update button
This commit is contained in:
wangchangqi
parent
758831ab40
commit
1dd9167254
26
index.html
26
index.html
|
|
@ -34,32 +34,6 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
|
||||||
--left-transform: -100vw;
|
|
||||||
--right-transform: +100vw;
|
|
||||||
--li-base-height: 43px;
|
|
||||||
--li-left-padding: 10px;
|
|
||||||
--li-right-padding: 10px;
|
|
||||||
--blur-image: '';
|
|
||||||
--blur-radius-factor: 20;
|
|
||||||
--blur-radius: calc(1px * var(--blur-radius-factor));
|
|
||||||
--blur-scale-base-factor: 1.05;
|
|
||||||
--blur-scale-factor: calc(
|
|
||||||
var(--blur-scale-base-factor) + (var(--blur-radius-factor) - 20) *
|
|
||||||
0.0025
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* for nanopcT4 */
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
:root {
|
|
||||||
--blur-radius-factor: 5;
|
|
||||||
--blur-scale-factor: calc(
|
|
||||||
var(--blur-scale-base-factor) + (var(--blur-radius-factor)) * 0.005
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,247 @@
|
||||||
|
import {html} from 'lit'
|
||||||
|
|
||||||
|
// 主题
|
||||||
|
export const store = html`
|
||||||
|
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_1201_77537)">
|
||||||
|
<path
|
||||||
|
opacity="0.3"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10 14C10 11.7909 11.7909 10 14 10H34C36.2091 10 38 11.7909 38 14C38 16.2091 36.2091 18 34 18H14C11.7909 18 10 16.2091 10 14ZM16 14C16 12.9 15.1 12 14 12C12.9 12 12 12.9 12 14C12 15.1 12.9 16 14 16C15.1 16 16 15.1 16 14ZM10 24C10 21.7909 11.7909 20 14 20H34C36.2091 20 38 21.7909 38 24C38 26.2091 36.2091 28 34 28H14C11.7909 28 10 26.2091 10 24ZM16 24C16 22.9 15.1 22 14 22C12.9 22 12 22.9 12 24C12 25.1 12.9 26 14 26C15.1 26 16 25.1 16 24ZM14 30C11.7909 30 10 31.7909 10 34C10 36.2091 11.7909 38 14 38H34C36.2091 38 38 36.2091 38 34C38 31.7909 36.2091 30 34 30H14ZM14 32C15.1 32 16 32.9 16 34C16 35.1 15.1 36 14 36C12.9 36 12 35.1 12 34C12 32.9 12.9 32 14 32Z"
|
||||||
|
fill="#00B32F"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10 14C10 11.7909 11.7909 10 14 10H34C36.2091 10 38 11.7909 38 14C38 16.2091 36.2091 18 34 18H14C11.7909 18 10 16.2091 10 14ZM16 14C16 12.9 15.1 12 14 12C12.9 12 12 12.9 12 14C12 15.1 12.9 16 14 16C15.1 16 16 15.1 16 14ZM10 24C10 21.7909 11.7909 20 14 20H31C33.2091 20 35 21.7909 35 24C35 26.2091 33.2091 28 31 28H14C11.7909 28 10 26.2091 10 24ZM16 24C16 22.9 15.1 22 14 22C12.9 22 12 22.9 12 24C12 25.1 12.9 26 14 26C15.1 26 16 25.1 16 24ZM14 30C11.7909 30 10 31.7909 10 34C10 36.2091 11.7909 38 14 38H28C30.2091 38 32 36.2091 32 34C32 31.7909 30.2091 30 28 30H14ZM14 32C15.1 32 16 32.9 16 34C16 35.1 15.1 36 14 36C12.9 36 12 35.1 12 34C12 32.9 12.9 32 14 32Z"
|
||||||
|
fill="#00B32F"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_1201_77537">
|
||||||
|
<rect width="48" height="48" fill="white" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
`
|
||||||
|
|
||||||
|
// 图标
|
||||||
|
export const app = html`
|
||||||
|
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_1201_77538)">
|
||||||
|
<path
|
||||||
|
opacity="0.3"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M25.636 18.1213C24.4644 16.9497 24.4644 15.0503 25.636 13.8787L29.8786 9.63604C31.0502 8.46447 32.9497 8.46447 34.1212 9.63604L38.3639 13.8787C39.5355 15.0503 39.5355 16.9497 38.3639 18.1213L34.1212 22.364C32.9497 23.5355 31.0502 23.5355 29.8786 22.364L25.636 18.1213Z"
|
||||||
|
fill="url(#paint0_linear_1201_77538)"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10 13C10 11.3431 11.3431 10 13 10H19C20.6569 10 22 11.3431 22 13V19C22 20.6569 20.6569 22 19 22H13C11.3431 22 10 20.6569 10 19V13ZM10 29C10 27.3431 11.3431 26 13 26H19C20.6569 26 22 27.3431 22 29V35C22 36.6569 20.6569 38 19 38H13C11.3431 38 10 36.6569 10 35V29ZM29 26C27.3431 26 26 27.3431 26 29V35C26 36.6569 27.3431 38 29 38H35C36.6569 38 38 36.6569 38 35V29C38 27.3431 36.6569 26 35 26H29Z"
|
||||||
|
fill="url(#paint1_linear_1201_77538)"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id="paint0_linear_1201_77538"
|
||||||
|
x1="28.0069"
|
||||||
|
y1="11.7574"
|
||||||
|
x2="36.3674"
|
||||||
|
y2="20.1179"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#F5987B" />
|
||||||
|
<stop offset="1" stop-color="#E24E3D" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint1_linear_1201_77538"
|
||||||
|
x1="24.4118"
|
||||||
|
y1="10.4118"
|
||||||
|
x2="24.4118"
|
||||||
|
y2="38"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#F5987B" />
|
||||||
|
<stop offset="1" stop-color="#E24E3D" />
|
||||||
|
</linearGradient>
|
||||||
|
<clipPath id="clip0_1201_77538">
|
||||||
|
<rect width="48" height="48" fill="white" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
`
|
||||||
|
|
||||||
|
// 桌面壁纸
|
||||||
|
export const desktopWallpaper = html`
|
||||||
|
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_1201_77536)">
|
||||||
|
<circle
|
||||||
|
opacity="0.3"
|
||||||
|
cx="18"
|
||||||
|
cy="20"
|
||||||
|
r="4"
|
||||||
|
fill="url(#paint0_linear_1201_77536)"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
opacity="0.3"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M23.8606 33.6647V31.6213L19.4646 28.4921C18.458 27.774 17.0309 27.8499 16.1198 28.6672L9.04797 35.0017C8.86321 35.1651 9.26503 35.2781 9.3606 35.5C9.45616 35.716 9.2391 36 9.49394 36H21.3122C22.7202 36 23.8606 34.955 23.8606 33.6647Z"
|
||||||
|
fill="url(#paint1_linear_1201_77536)"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M8 16C8 12.6863 10.6863 10 14 10H35C38.3137 10 41 12.6863 41 16V33C41 36.3137 38.3137 39 35 39H14C10.6863 39 8 36.3137 8 33V16ZM14 13C12 13 11 14.5 11 16V33C11 34.5 12.5 36 14 36H16.415L28.1308 24.251C29.5277 22.7185 31.716 22.5762 33.2595 23.9226L38 28.7679V16C38 14.5 37 13 35 13H14ZM18 17C19.66 17 21 18.34 21 20C21 21.66 19.66 23 18 23C16.34 23 15 21.66 15 20C15 18.34 16.34 17 18 17Z"
|
||||||
|
fill="url(#paint2_linear_1201_77536)"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id="paint0_linear_1201_77536"
|
||||||
|
x1="18.0377"
|
||||||
|
y1="16"
|
||||||
|
x2="18.0377"
|
||||||
|
y2="24"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#A6C0FF" />
|
||||||
|
<stop offset="1" stop-color="#5546DE" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint1_linear_1201_77536"
|
||||||
|
x1="16.5003"
|
||||||
|
y1="28"
|
||||||
|
x2="16.5003"
|
||||||
|
y2="36"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#A6C0FF" />
|
||||||
|
<stop offset="1" stop-color="#5546DE" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint2_linear_1201_77536"
|
||||||
|
x1="24.5"
|
||||||
|
y1="0.333333"
|
||||||
|
x2="24.5"
|
||||||
|
y2="46.7333"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#A6C0FF" />
|
||||||
|
<stop offset="1" stop-color="#5546DE" />
|
||||||
|
</linearGradient>
|
||||||
|
<clipPath id="clip0_1201_77536">
|
||||||
|
<rect width="48" height="48" fill="white" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
`
|
||||||
|
|
||||||
|
// 锁屏
|
||||||
|
export const lockscreen = html`
|
||||||
|
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_1201_77532)">
|
||||||
|
<path
|
||||||
|
opacity="0.3"
|
||||||
|
d="M19.5 18C19.5 15.5147 21.5147 13.5 24 13.5C26.4853 13.5 28.5 15.5147 28.5 18V24.5H19.5V18Z"
|
||||||
|
stroke="url(#paint0_linear_1201_77532)"
|
||||||
|
stroke-width="3"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M17 20H31V18C31 14.134 27.866 11 24 11C20.134 11 17 14.134 17 18V20ZM14 20H13C10.7909 20 9 21.7909 9 24V35C9 37.2091 10.7909 39 13 39H35C37.2091 39 39 37.2091 39 35V24C39 21.7909 37.2091 20 35 20H34V18C34 12.4772 29.5228 8 24 8C18.4772 8 14 12.4772 14 18V20ZM25 29.7324C25.5978 29.3866 26 28.7403 26 28C26 26.8954 25.1046 26 24 26C22.8954 26 22 26.8954 22 28C22 28.7403 22.4022 29.3866 23 29.7324V32C23 32.5523 23.4477 33 24 33C24.5523 33 25 32.5523 25 32V29.7324Z"
|
||||||
|
fill="url(#paint1_linear_1201_77532)"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id="paint0_linear_1201_77532"
|
||||||
|
x1="24"
|
||||||
|
y1="12"
|
||||||
|
x2="24"
|
||||||
|
y2="26"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#F79F84" />
|
||||||
|
<stop offset="1" stop-color="#E96A56" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint1_linear_1201_77532"
|
||||||
|
x1="24.4412"
|
||||||
|
y1="7.47059"
|
||||||
|
x2="24.4412"
|
||||||
|
y2="39"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#F8A287" />
|
||||||
|
<stop offset="1" stop-color="#E24E3D" />
|
||||||
|
</linearGradient>
|
||||||
|
<clipPath id="clip0_1201_77532">
|
||||||
|
<rect width="48" height="48" fill="white" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
`
|
||||||
|
|
||||||
|
// 隐私
|
||||||
|
export const privacy = html`
|
||||||
|
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_1201_77539)">
|
||||||
|
<path
|
||||||
|
opacity="0.3"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M23.3984 40.8793C23.1856 40.7897 18.6128 38.8644 15.9 36.78C12.15 33.89 10 29.7 10 25.28V15.67C10 14.36 10.73 13.19 11.9 12.61L22.48 7.36C23.43 6.88 24.57 6.88 25.52 7.36L36.1 12.61C37.27 13.19 38 14.36 38 15.67V25.28C38 29.7 35.85 33.89 32.1 36.78C29.3872 38.8644 24.8144 40.7897 24.6016 40.8793L24.6 40.88C24.41 40.96 24.2 41 24 41C23.8 41 23.59 40.96 23.4 40.88L23.3984 40.8793ZM22.4 23.45C20.99 22.85 20 21.48 20 19.89C20 17.74 21.79 16 24 16C26.21 16 28 17.74 28 19.89C28 21.49 27.01 22.85 25.6 23.45V28.44C25.6 29.3 24.88 30 24 30C23.12 30 22.4 29.3 22.4 28.44V23.45Z"
|
||||||
|
fill="url(#paint0_linear_1201_77539)"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M23.3984 37.8793C23.186 37.7899 18.6129 35.8645 15.9 33.78C12.15 30.89 10 23.7 10 19.28V15.67C10 14.36 10.73 13.19 11.9 12.61L22.48 7.36C23.43 6.88 24.57 6.88 25.52 7.36L36.1 12.61C37.27 13.19 38 14.36 38 15.67V19.28C38 23.7 35.85 30.89 32.1 33.78C29.3871 35.8645 24.814 37.7899 24.6016 37.8793L24.6 37.88C24.41 37.96 24.2 38 24 38C23.8 38 23.59 37.96 23.4 37.88L23.3984 37.8793ZM22.4 23.45C20.99 22.85 20 21.48 20 19.89C20 17.74 21.79 16 24 16C26.21 16 28 17.74 28 19.89C28 21.49 27.01 22.85 25.6 23.45V28.44C25.6 29.3 24.88 30 24 30C23.12 30 22.4 29.3 22.4 28.44V23.45Z"
|
||||||
|
fill="url(#paint1_linear_1201_77539)"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id="paint0_linear_1201_77539"
|
||||||
|
x1="23.9993"
|
||||||
|
y1="6.97134"
|
||||||
|
x2="24.8586"
|
||||||
|
y2="44.0158"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#68C9F9" />
|
||||||
|
<stop offset="1" stop-color="#1466D0" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint1_linear_1201_77539"
|
||||||
|
x1="23.9993"
|
||||||
|
y1="6.97387"
|
||||||
|
x2="24"
|
||||||
|
y2="43"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#68C9F9" />
|
||||||
|
<stop offset="1" stop-color="#1466D0" />
|
||||||
|
</linearGradient>
|
||||||
|
<clipPath id="clip0_1201_77539">
|
||||||
|
<rect width="48" height="48" fill="white" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
`
|
||||||
|
export type stackInstances = typeof store
|
||||||
|
|
||||||
|
export default {
|
||||||
|
store,
|
||||||
|
app,
|
||||||
|
desktopWallpaper,
|
||||||
|
lockscreen,
|
||||||
|
privacy,
|
||||||
|
} as {
|
||||||
|
[key: string]: stackInstances
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
import {html, LitElement, css} from 'lit'
|
||||||
|
import {customElement, property} from 'lit/decorators.js'
|
||||||
|
import icons from './icons/index'
|
||||||
|
|
||||||
|
@customElement('star-svg-icon')
|
||||||
|
export class StarSvgIcon extends LitElement {
|
||||||
|
@property({type: Number}) width = 24
|
||||||
|
@property({type: Number}) height = 24
|
||||||
|
@property({type: String}) symbol = 'privacy'
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const iconpath = icons[this.symbol]
|
||||||
|
return html`
|
||||||
|
<svg
|
||||||
|
width=${this.width}
|
||||||
|
height=${this.height}
|
||||||
|
class="svg-icon"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
${iconpath}
|
||||||
|
</svg>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = css`
|
||||||
|
:host {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'star-svg-icon': StarSvgIcon
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
import {css, CSSResult} from 'lit'
|
||||||
|
|
||||||
|
export const baseStyles: CSSResult = css`
|
||||||
|
:host {
|
||||||
|
/* 文字/正文黑 */
|
||||||
|
--font-main-black: #292929;
|
||||||
|
/* 文字/辅助字-黑 */
|
||||||
|
--font-auxiliary-black: rgba(38, 38, 38, 0.5);
|
||||||
|
/* 文字/标题黑 */
|
||||||
|
--font-heading-black: #4d4d4d;
|
||||||
|
|
||||||
|
/* 文字/正文白 */
|
||||||
|
--font-main-white: #f0f0f0;
|
||||||
|
/* 文字/高亮白 */
|
||||||
|
--font-highlight-white: #fafafa;
|
||||||
|
/* 文字/辅助字-白 */
|
||||||
|
--font-auxiliary-white: rgba(245, 245, 245, 0.5);
|
||||||
|
|
||||||
|
/* 倒角 */
|
||||||
|
--base-menu-radius: 16px;
|
||||||
|
--base-dialog-radius: 20px;
|
||||||
|
--base-border-radius: 34px;
|
||||||
|
|
||||||
|
/* 线性图标/32及以下-常规黑 */
|
||||||
|
--icon-regular: #333333;
|
||||||
|
|
||||||
|
/* 分隔符 */
|
||||||
|
--split-line: #cfd8e8;
|
||||||
|
|
||||||
|
/* 主题色/蓝 */
|
||||||
|
--theme-blue: #1d98f0;
|
||||||
|
/* 主题色/红 */
|
||||||
|
--theme-red: #ec4949;
|
||||||
|
|
||||||
|
--pure-white: #ffffff;
|
||||||
|
|
||||||
|
--font-main-size: 14px;
|
||||||
|
/* --font-main-weight: 400; */
|
||||||
|
--font-main-weight: bold;
|
||||||
|
|
||||||
|
--line-height: calc(3 * var(--font-main-size));
|
||||||
|
|
||||||
|
--li-left-padding: 10px;
|
||||||
|
--li-right-padding: 10px;
|
||||||
|
--li-base-height: 43px;
|
||||||
|
|
||||||
|
/***********默认浅色**************/
|
||||||
|
/* 商务/组件浅/白调-斜线渐变 */
|
||||||
|
--bg-dialog-gradient: linear-gradient(
|
||||||
|
137.64deg,
|
||||||
|
#f5f0f5 0%,
|
||||||
|
#fafafa 20.46%,
|
||||||
|
#d5daf2 90.45%
|
||||||
|
);
|
||||||
|
/* 底色/弹窗浅 */
|
||||||
|
--bg-dialog: linear-gradient(
|
||||||
|
134.78deg,
|
||||||
|
#f7f5f7 2.34%,
|
||||||
|
#fafafa 34.11%,
|
||||||
|
#e1e4f2 100%
|
||||||
|
);
|
||||||
|
/* 全/ hover_lm */
|
||||||
|
--bg-hover: rgba(0, 0, 0, 0.06);
|
||||||
|
--bg-gray-button: rgba(51, 51, 51, 0.06);
|
||||||
|
--bg-icon-button: rgba(255, 255, 255, 0.68);
|
||||||
|
|
||||||
|
--bg-button: rgba(247, 247, 247, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:host {
|
||||||
|
/* 底色/弹窗浅 */
|
||||||
|
--bg-dialog: linear-gradient(
|
||||||
|
134.78deg,
|
||||||
|
#f7f5f7 2.34%,
|
||||||
|
#fafafa 34.11%,
|
||||||
|
#e1e4f2 100%
|
||||||
|
);
|
||||||
|
/* 商务/组件浅/白调-斜线渐变 */
|
||||||
|
--bg-dialog-gradient: linear-gradient(
|
||||||
|
137.64deg,
|
||||||
|
#f5f0f5 0%,
|
||||||
|
#fafafa 20.46%,
|
||||||
|
#d5daf2 90.45%
|
||||||
|
);
|
||||||
|
|
||||||
|
/* 全/ hover_lm */
|
||||||
|
--bg-hover: rgba(0, 0, 0, 0.06);
|
||||||
|
--bg-button: rgba(247, 247, 247, 0.75);
|
||||||
|
--bg-gray-button: rgba(51, 51, 51, 0.06);
|
||||||
|
--bg-icon-button: rgba(255, 255, 255, 0.68);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:host {
|
||||||
|
/* 底色/弹窗深 */
|
||||||
|
--bg-dialog: linear-gradient(101.98deg, #4e5161 1.12%, #363a47 96.75%);
|
||||||
|
|
||||||
|
/* 全/ hover_dm */
|
||||||
|
--bg-hover: rgba(255, 255, 255, 0.09);
|
||||||
|
--bg-button: rgba(64, 64, 64, 0.7);
|
||||||
|
--bg-gray-button: rgba(228, 228, 228, 0.1);
|
||||||
|
--bg-icon-button: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
@ -12,7 +12,7 @@ export class StarBlur extends LitElement {
|
||||||
|
|
||||||
if (name === 'imagesrc') {
|
if (name === 'imagesrc') {
|
||||||
if (!this.imagesrc) console.error('StarBlur has no imagesrc')
|
if (!this.imagesrc) console.error('StarBlur has no imagesrc')
|
||||||
document.documentElement.style.setProperty('--blur-image', this.imagesrc)
|
this.style.setProperty('--blur-image', this.imagesrc)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -28,6 +28,15 @@ export class StarBlur extends LitElement {
|
||||||
|
|
||||||
static styles = css`
|
static styles = css`
|
||||||
:host {
|
:host {
|
||||||
|
--blur-image: '';
|
||||||
|
--blur-radius-factor: 20;
|
||||||
|
--blur-radius: calc(1px * var(--blur-radius-factor));
|
||||||
|
--blur-scale-base-factor: 1.05;
|
||||||
|
--blur-scale-factor: calc(
|
||||||
|
var(--blur-scale-base-factor) + (var(--blur-radius-factor) - 20) *
|
||||||
|
0.0025
|
||||||
|
);
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
@ -35,6 +44,15 @@ export class StarBlur extends LitElement {
|
||||||
top: 0;
|
top: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
/* for nanopcT4 */
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
:host {
|
||||||
|
--blur-radius-factor: 5;
|
||||||
|
--blur-scale-factor: calc(
|
||||||
|
var(--blur-scale-base-factor) + (var(--blur-radius-factor)) * 0.005
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
#blur-mask {
|
#blur-mask {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: inherit;
|
width: inherit;
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,8 @@ export class StarBubble extends LitElement {
|
||||||
|
|
||||||
static styles = css`
|
static styles = css`
|
||||||
:host {
|
:host {
|
||||||
|
--li-base-height: 43px;
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: calc(var(--li-base-height) - 16px); /* 尽量节省宽度 */
|
width: calc(var(--li-base-height) - 16px); /* 尽量节省宽度 */
|
||||||
height: var(--li-base-height);
|
height: var(--li-base-height);
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,25 @@
|
||||||
# star-button
|
# star-button
|
||||||
|
|
||||||
星光 Web 组件——按钮组件：本组件样式及代码风格依然在完善阶段，现阶段介绍如下（8 月 27 日）
|
星光按钮组件：本组件样式及代码风格依然在完善阶段，现阶段介绍如下（8 月 27 日）
|
||||||
|
|
||||||
|
## 参照设计稿
|
||||||
|
|
||||||
|
基础原则：
|
||||||
|
|
||||||
|
1. 按钮的
|
||||||
|
2. 按钮具备大小属性(small,medium,large,extralarge)
|
||||||
|
3. 按钮中的图标位于左侧，图标应是可选的；如果存在图标，则文字是可选的，对应图标按钮。
|
||||||
|
|
||||||
|
默认值：
|
||||||
|
|
||||||
|
1. 按钮底色：无色
|
||||||
|
2. 按钮文字颜色：正文黑
|
||||||
|
3. 按钮文字：确定
|
||||||
|
|
||||||
|
按钮类型 1：（无底色 + 文字(带颜色 白|黑|蓝|红|灰)）的自适应矩形块, 用于弹窗按钮、菜单按钮
|
||||||
|
按钮类型 2：（给定底色 + 图标）的圆形块, 用于工具按钮（如通知栏左滑处，任务管理器关闭处）
|
||||||
|
按钮类型 3：（给定底色 + 文字）的倒角矩形块, 用于强调按钮（如主题选择）
|
||||||
|
按钮类型 4：（图标 + 文字）的矩形块, 用于菜单按钮、主题选择处
|
||||||
|
|
||||||
## 介绍
|
## 介绍
|
||||||
|
|
||||||
|
|
@ -8,7 +27,7 @@ star-button 属性：
|
||||||
|
|
||||||
1. type：按钮类型，包括文本按钮 base、图标文本按钮 iconlabel 和图标按钮 icononly。
|
1. type：按钮类型，包括文本按钮 base、图标文本按钮 iconlabel 和图标按钮 icononly。
|
||||||
|
|
||||||
```html demo
|
```html
|
||||||
<star-button type="base" label="文本按钮"></star-button>
|
<star-button type="base" label="文本按钮"></star-button>
|
||||||
<star-button type="iconlabel" label="图标文本按钮"></star-button>
|
<star-button type="iconlabel" label="图标文本按钮"></star-button>
|
||||||
<star-button type="icononly" label="图标按钮"></star-button>
|
<star-button type="icononly" label="图标按钮"></star-button>
|
||||||
|
|
@ -16,14 +35,14 @@ star-button 属性：
|
||||||
|
|
||||||
2. variant：按钮样式，包括 accent、primary、secondary、negative、black 和 white，默认为 accent。
|
2. variant：按钮样式，包括 accent、primary、secondary、negative、black 和 white，默认为 accent。
|
||||||
|
|
||||||
```html demo
|
```html
|
||||||
<star-button type="base" variant="accent" label="accent"></star-button>
|
<star-button type="base" variant="accent" label="accent"></star-button>
|
||||||
<star-button type="base" variant="primary" label="primary"></star-button>
|
<star-button type="base" variant="primary" label="primary"></star-button>
|
||||||
```
|
```
|
||||||
|
|
||||||
3. size：控制按钮大小，包括 small、medium、large 和 extralarge 四种，默认为 medium。
|
3. size：控制按钮大小，包括 small、medium、large 和 extralarge 四种，默认为 medium。
|
||||||
|
|
||||||
```html demo
|
```html
|
||||||
<star-button
|
<star-button
|
||||||
type="base"
|
type="base"
|
||||||
variant="accent"
|
variant="accent"
|
||||||
|
|
@ -40,19 +59,19 @@ star-button 属性：
|
||||||
|
|
||||||
4. label：显示按钮名，如省略则显示为“默认”。
|
4. label：显示按钮名，如省略则显示为“默认”。
|
||||||
|
|
||||||
```html demo
|
```html
|
||||||
<star-button type="base" variant="accent" label="按钮名"></star-button>
|
<star-button type="base" variant="accent" label="按钮名"></star-button>
|
||||||
```
|
```
|
||||||
|
|
||||||
5. disabled：控制按钮禁用状态，默认为：false。
|
5. disabled：控制按钮禁用状态，默认为：false。
|
||||||
|
|
||||||
```html demo
|
```html
|
||||||
<star-button type="base" variant="accent" label="禁用" disabled></star-button>
|
<star-button type="base" variant="accent" label="禁用" disabled></star-button>
|
||||||
```
|
```
|
||||||
|
|
||||||
6. treatment：控制按钮填充状态，包括 fill 和 outline，默认为：fill。
|
6. treatment：控制按钮填充状态，包括 fill 和 outline，默认为：fill。
|
||||||
|
|
||||||
```html demo
|
```html
|
||||||
<star-button
|
<star-button
|
||||||
type="base"
|
type="base"
|
||||||
variant="accent"
|
variant="accent"
|
||||||
|
|
@ -69,7 +88,7 @@ star-button 属性：
|
||||||
|
|
||||||
7. icon 和 iconcolor：控制图标样式和其颜色。
|
7. icon 和 iconcolor：控制图标样式和其颜色。
|
||||||
|
|
||||||
```html demo
|
```html
|
||||||
<star-button
|
<star-button
|
||||||
type="base"
|
type="base"
|
||||||
variant="accent"
|
variant="accent"
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,13 @@
|
||||||
import {
|
import {
|
||||||
html,
|
html,
|
||||||
LitElement,
|
LitElement,
|
||||||
|
css,
|
||||||
CSSResultArray,
|
CSSResultArray,
|
||||||
HTMLTemplateResult,
|
HTMLTemplateResult,
|
||||||
nothing,
|
nothing,
|
||||||
} from 'lit'
|
} from 'lit'
|
||||||
import {customElement, property} from 'lit/decorators.js'
|
import {customElement, property} from 'lit/decorators.js'
|
||||||
import {sharedStyles} from './button-styles'
|
import {baseStyles} from '../base/base-style'
|
||||||
|
|
||||||
export enum ButtonType {
|
export enum ButtonType {
|
||||||
BASE = 'base',
|
BASE = 'base',
|
||||||
|
|
@ -34,7 +35,100 @@ export enum ButtonVariants {
|
||||||
@customElement('star-button')
|
@customElement('star-button')
|
||||||
export class StarButton extends LitElement {
|
export class StarButton extends LitElement {
|
||||||
public static override get styles(): CSSResultArray {
|
public static override get styles(): CSSResultArray {
|
||||||
return [sharedStyles]
|
return [
|
||||||
|
baseStyles,
|
||||||
|
css`
|
||||||
|
:host {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
:host([type='icononly']) {
|
||||||
|
width: var(--line-height);
|
||||||
|
height: var(--line-height);
|
||||||
|
background-color: var(--bg-gray-button);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
:host(.confirm),
|
||||||
|
:host(.cancel) {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--font-main-black);
|
||||||
|
font-size: var(--font-main-size);
|
||||||
|
font-family: 'OPPOSans';
|
||||||
|
background-color: unset;
|
||||||
|
padding: unset;
|
||||||
|
border: none;
|
||||||
|
line-height: var(--line-height);
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
:host([type='icononly']) button {
|
||||||
|
padding: unset;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
:host([type='iconlabel']) button {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
:host(.left) button {
|
||||||
|
text-align: left;
|
||||||
|
padding-inline-start: var(--li-left-padding);
|
||||||
|
}
|
||||||
|
:host(.normal) button,
|
||||||
|
:host(.ok) button,
|
||||||
|
:host(.warning) button,
|
||||||
|
:host(.cancel) button,
|
||||||
|
:host(.confirm) button,
|
||||||
|
:host(.auxiliary) button {
|
||||||
|
font-weight: var(--font-main-weight);
|
||||||
|
}
|
||||||
|
:host(.ok) button {
|
||||||
|
color: var(--theme-blue);
|
||||||
|
}
|
||||||
|
:host(.warning) button {
|
||||||
|
color: var(--theme-red);
|
||||||
|
}
|
||||||
|
:host(.chamfer) button {
|
||||||
|
border-radius: var(--base-border-radius);
|
||||||
|
}
|
||||||
|
:host(.cancel) button {
|
||||||
|
color: var(--font-heading-black);
|
||||||
|
background-color: var(--bg-gray-button);
|
||||||
|
}
|
||||||
|
:host(.confirm) button {
|
||||||
|
color: var(--font-main-white);
|
||||||
|
background-color: var(--theme-blue);
|
||||||
|
}
|
||||||
|
:host(.auxiliary) button {
|
||||||
|
display: flex;
|
||||||
|
color: var(--font-auxiliary-black);
|
||||||
|
}
|
||||||
|
:host(.floatright) button {
|
||||||
|
min-width: 50px;
|
||||||
|
color: var(--font-heading-black);
|
||||||
|
background-color: var(--bg-gray-button);
|
||||||
|
}
|
||||||
|
:host([type='icononly']) button::before,
|
||||||
|
:host([type='iconlabel']) button::before {
|
||||||
|
font-family: 'gaia-icons';
|
||||||
|
content: attr(data-icon);
|
||||||
|
text-align: center;
|
||||||
|
color: var(--icon-regular);
|
||||||
|
}
|
||||||
|
:host([type='iconlabel']) button::before {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
:host(.auxiliary) button a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
]
|
||||||
}
|
}
|
||||||
@property({type: String}) type = 'base'
|
@property({type: String}) type = 'base'
|
||||||
@property({type: String}) variant = 'accent'
|
@property({type: String}) variant = 'accent'
|
||||||
|
|
@ -46,83 +140,26 @@ export class StarButton extends LitElement {
|
||||||
@property({type: String}) iconcolor = ''
|
@property({type: String}) iconcolor = ''
|
||||||
|
|
||||||
getBaseButton(): HTMLTemplateResult {
|
getBaseButton(): HTMLTemplateResult {
|
||||||
if (this.hasAttribute('disabled')) {
|
|
||||||
return html`
|
return html`
|
||||||
<button class="disabled ${this.variant} ${this.size} ${this.treatment}">
|
<button>
|
||||||
|
<a>
|
||||||
|
<slot name="asset"></slot>
|
||||||
${this.label}
|
${this.label}
|
||||||
|
</a>
|
||||||
</button>
|
</button>
|
||||||
`
|
`
|
||||||
} else {
|
|
||||||
return html`
|
|
||||||
<button class="${this.variant} ${this.size} ${this.treatment}">
|
|
||||||
${this.label}
|
|
||||||
</button>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getIconLabelButton(): HTMLTemplateResult {
|
getIconLabelButton(): HTMLTemplateResult {
|
||||||
const colorstyle = this.iconcolor
|
|
||||||
? html`
|
|
||||||
<style>
|
|
||||||
button::before {
|
|
||||||
color: ${this.iconcolor} !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
`
|
|
||||||
: nothing
|
|
||||||
if (this.hasAttribute('disabled')) {
|
|
||||||
return html`
|
return html`
|
||||||
<button
|
<button data-icon=${this.icon}>${this.label}</button>
|
||||||
class="disabled hasicon ${this.variant} ${this.size} ${this
|
|
||||||
.treatment}"
|
|
||||||
data-icon=${this.icon}
|
|
||||||
>
|
|
||||||
${colorstyle} ${this.label}
|
|
||||||
</button>
|
|
||||||
`
|
`
|
||||||
} else {
|
|
||||||
return html`
|
|
||||||
<button
|
|
||||||
class="hasicon ${this.variant} ${this.size} ${this.treatment}"
|
|
||||||
data-icon=${this.icon}
|
|
||||||
>
|
|
||||||
${colorstyle} ${this.label}
|
|
||||||
</button>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getIconOnlyButton(): HTMLTemplateResult {
|
getIconOnlyButton(): HTMLTemplateResult {
|
||||||
const colorstyle = this.iconcolor
|
|
||||||
? html`
|
|
||||||
<style>
|
|
||||||
button::before {
|
|
||||||
color: ${this.iconcolor} !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
`
|
|
||||||
: nothing
|
|
||||||
if (this.hasAttribute('disabled')) {
|
|
||||||
return html`
|
return html`
|
||||||
<button
|
<button data-icon=${this.icon}></button>
|
||||||
class="icononly disabled ${this.variant} ${this.size} ${this
|
|
||||||
.treatment}"
|
|
||||||
data-icon=${this.icon}
|
|
||||||
>
|
|
||||||
${colorstyle}
|
|
||||||
</button>
|
|
||||||
`
|
`
|
||||||
} else {
|
|
||||||
return html`
|
|
||||||
<button
|
|
||||||
class="icononly ${this.variant} ${this.size} ${this.treatment}"
|
|
||||||
data-icon=${this.icon}
|
|
||||||
>
|
|
||||||
${colorstyle}
|
|
||||||
</button>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
getConfirmButton(): HTMLTemplateResult {
|
getConfirmButton(): HTMLTemplateResult {
|
||||||
return html`
|
return html`
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,13 @@
|
||||||
import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
|
import {
|
||||||
|
html,
|
||||||
|
css,
|
||||||
|
CSSResultArray,
|
||||||
|
LitElement,
|
||||||
|
HTMLTemplateResult,
|
||||||
|
nothing,
|
||||||
|
} from 'lit'
|
||||||
import {customElement, property} from 'lit/decorators.js'
|
import {customElement, property} from 'lit/decorators.js'
|
||||||
|
import {baseStyles} from '../base/base-style'
|
||||||
import '../bubble/bubble'
|
import '../bubble/bubble'
|
||||||
import '../switch/switch'
|
import '../switch/switch'
|
||||||
|
|
||||||
|
|
@ -277,14 +285,18 @@ export class StarLi extends LitElement {
|
||||||
return nothing
|
return nothing
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
public static override get styles(): CSSResultArray {
|
||||||
static styles = css`
|
return [
|
||||||
|
baseStyles,
|
||||||
|
css`
|
||||||
:host {
|
:host {
|
||||||
width: inherit;
|
width: inherit;
|
||||||
|
border-radius: var(--base-border-radius);
|
||||||
}
|
}
|
||||||
li {
|
li {
|
||||||
width: inherit;
|
width: inherit;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
border-radius: var(--base-border-radius);
|
||||||
min-height: var(--li-base-height);
|
min-height: var(--li-base-height);
|
||||||
line-height: var(--li-base-height);
|
line-height: var(--li-base-height);
|
||||||
padding-inline-start: var(--li-left-padding);
|
padding-inline-start: var(--li-left-padding);
|
||||||
|
|
@ -362,7 +374,9 @@ export class StarLi extends LitElement {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
}
|
}
|
||||||
`
|
`,
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,12 @@
|
||||||
import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
|
import {
|
||||||
|
html,
|
||||||
|
css,
|
||||||
|
CSSResultArray,
|
||||||
|
LitElement,
|
||||||
|
HTMLTemplateResult,
|
||||||
|
nothing,
|
||||||
|
} from 'lit'
|
||||||
|
import {baseStyles} from '../base/base-style'
|
||||||
import {customElement, property} from 'lit/decorators.js'
|
import {customElement, property} from 'lit/decorators.js'
|
||||||
import {unsafeHTML} from 'lit/directives/unsafe-html.js'
|
import {unsafeHTML} from 'lit/directives/unsafe-html.js'
|
||||||
|
|
||||||
|
|
@ -14,6 +22,7 @@ export class StarUl extends LitElement {
|
||||||
@property({type: String}) type = ''
|
@property({type: String}) type = ''
|
||||||
@property({type: String}) title = ''
|
@property({type: String}) title = ''
|
||||||
@property({type: String}) text = ''
|
@property({type: String}) text = ''
|
||||||
|
@property({type: String}) background = ''
|
||||||
|
|
||||||
getbase(): HTMLTemplateResult {
|
getbase(): HTMLTemplateResult {
|
||||||
return html`
|
return html`
|
||||||
|
|
@ -77,6 +86,10 @@ export class StarUl extends LitElement {
|
||||||
return nothing
|
return nothing
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.background) {
|
||||||
|
this.style.setProperty('--bg-ul', this.background)
|
||||||
|
}
|
||||||
|
|
||||||
switch (this.type) {
|
switch (this.type) {
|
||||||
case UlType.BASE:
|
case UlType.BASE:
|
||||||
return this.getbase()
|
return this.getbase()
|
||||||
|
|
@ -92,7 +105,10 @@ export class StarUl extends LitElement {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static styles = css`
|
public static override get styles(): CSSResultArray {
|
||||||
|
return [
|
||||||
|
baseStyles,
|
||||||
|
css`
|
||||||
:host {
|
:host {
|
||||||
width: inherit;
|
width: inherit;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -104,13 +120,13 @@ export class StarUl extends LitElement {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 88vw;
|
width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
max-width: 88vw;
|
max-width: 88vw;
|
||||||
background: #fff;
|
background: var(--bg-ul, var(--pure-white));
|
||||||
box-shadow: rgb(64 60 67 / 16%) 1px 1px 5px 1px;
|
box-shadow: rgb(64 60 67 / 16%) 1px 1px 5px 1px;
|
||||||
border-radius: 10px;
|
border-radius: inherit; /* 外部传入 */
|
||||||
}
|
}
|
||||||
|
|
||||||
header,
|
header,
|
||||||
|
|
@ -131,7 +147,9 @@ export class StarUl extends LitElement {
|
||||||
footer a:visited {
|
footer a:visited {
|
||||||
color: blue;
|
color: blue;
|
||||||
}
|
}
|
||||||
`
|
`,
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
|
|
|
||||||
|
|
@ -144,6 +144,9 @@ export class SettingsApp extends LitElement {
|
||||||
|
|
||||||
static styles = css`
|
static styles = css`
|
||||||
:host {
|
:host {
|
||||||
|
--left-transform: -100vw;
|
||||||
|
--right-transform: +100vw;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import {html, css, LitElement, TemplateResult} from 'lit'
|
import {html, css, LitElement, TemplateResult} from 'lit'
|
||||||
import {customElement, state} from 'lit/decorators.js'
|
import {customElement, query, state} from 'lit/decorators.js'
|
||||||
import '../../../components/blur/blur'
|
import '../../../components/blur/blur'
|
||||||
|
import {StarBlur} from '../../../components/blur/blur'
|
||||||
|
|
||||||
@customElement('panel-blur')
|
@customElement('panel-blur')
|
||||||
export class PanelBlur extends LitElement {
|
export class PanelBlur extends LitElement {
|
||||||
|
|
@ -8,6 +9,8 @@ export class PanelBlur extends LitElement {
|
||||||
|
|
||||||
@state() backgroundImage = ''
|
@state() backgroundImage = ''
|
||||||
|
|
||||||
|
@query('star-blur') myblur!: StarBlur
|
||||||
|
|
||||||
handleInputFile(evt: Event) {
|
handleInputFile(evt: Event) {
|
||||||
const imgfile = (evt.target as HTMLInputElement).files?.[0]
|
const imgfile = (evt.target as HTMLInputElement).files?.[0]
|
||||||
if (imgfile) {
|
if (imgfile) {
|
||||||
|
|
@ -16,7 +19,7 @@ export class PanelBlur extends LitElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleInputRange(evt: Event) {
|
handleInputRange(evt: Event) {
|
||||||
document.documentElement.style.setProperty(
|
this.myblur.style.setProperty(
|
||||||
'--blur-radius-factor',
|
'--blur-radius-factor',
|
||||||
(evt.target as HTMLInputElement).value
|
(evt.target as HTMLInputElement).value
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -1,191 +1,162 @@
|
||||||
import {html, LitElement} from 'lit'
|
import {html, css, CSSResultArray, LitElement} from 'lit'
|
||||||
import {customElement, eventOptions} from 'lit/decorators.js'
|
import {customElement} from 'lit/decorators.js'
|
||||||
import {StarButton} from '../../../components/button/button'
|
import {baseStyles} from '../../../components/base/base-style'
|
||||||
import '../../../components/button-group/buttongroup'
|
import '../../../components/button-group/buttongroup'
|
||||||
|
import '../../../components/asset/svg-icon'
|
||||||
|
|
||||||
@customElement('panel-button')
|
@customElement('panel-button')
|
||||||
export class PanelButton extends LitElement {
|
export class PanelButton extends LitElement {
|
||||||
@eventOptions({passive: false})
|
|
||||||
handleEvent(evt: Event) {
|
|
||||||
switch (evt.type) {
|
|
||||||
case 'click':
|
|
||||||
if ((evt.target as StarButton).label === 'Click') {
|
|
||||||
alert('这是一次点击事件测试')
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<div>
|
<star-ul type="onlyheader" title="图标按钮">
|
||||||
<h4>按钮类型属性展示</h4>
|
<star-li type="base">
|
||||||
<star-button></star-button>
|
<star-button type="icononly" icon="delete"></star-button>
|
||||||
<star-button type="base" variant="accent" label="accent"></star-button>
|
<star-button type="icononly" icon="settings"></star-button>
|
||||||
<star-button
|
</star-li>
|
||||||
type="base"
|
</star-ul>
|
||||||
variant="primary"
|
|
||||||
label="primary"
|
<star-ul
|
||||||
></star-button>
|
type="onlyheader"
|
||||||
<star-button
|
title="弹窗内联按钮"
|
||||||
type="base"
|
id="dialog"
|
||||||
variant="secondary"
|
background="var(--bg-dialog)"
|
||||||
label="secondary"
|
>
|
||||||
></star-button>
|
<star-li type="base">
|
||||||
<star-button
|
<star-button class="normal" label="取消"></star-button>
|
||||||
type="base"
|
<span class="split">|</span>
|
||||||
variant="negative"
|
<star-button class="ok" label="确定"></star-button>
|
||||||
label="negative"
|
</star-li>
|
||||||
></star-button>
|
</star-ul>
|
||||||
<star-button type="base" variant="black" label="black"></star-button>
|
|
||||||
<star-button type="base" variant="white" label="white"></star-button>
|
<star-ul type="base" id="dialog" background="var(--bg-dialog)">
|
||||||
</div>
|
<star-li type="base">
|
||||||
<div>
|
<star-button class="ok" label="好的"></star-button>
|
||||||
<h4>按钮大小属性展示</h4>
|
</star-li>
|
||||||
<star-button
|
</star-ul>
|
||||||
type="base"
|
|
||||||
variant="accent"
|
<star-ul type="base" id="dialog" background="var(--bg-dialog)">
|
||||||
label="small"
|
<star-li type="base">
|
||||||
size="small"
|
<star-button class="normal" label="取消"></star-button>
|
||||||
></star-button>
|
<span class="split">|</span>
|
||||||
<star-button
|
<star-button class="warning" label="卸载"></star-button>
|
||||||
type="base"
|
</star-li>
|
||||||
variant="accent"
|
</star-ul>
|
||||||
label="medium"
|
|
||||||
size="medium"
|
<star-ul
|
||||||
></star-button>
|
type="onlyheader"
|
||||||
<star-button
|
title="菜单"
|
||||||
type="base"
|
id="menu"
|
||||||
variant="accent"
|
background="var(--bg-dialog-gradient)"
|
||||||
label="large"
|
>
|
||||||
size="large"
|
<star-button label="锁屏壁纸"></star-button>
|
||||||
></star-button>
|
<star-button label="桌面壁纸"></star-button>
|
||||||
<star-button
|
<star-button label="锁屏和桌面壁纸"></star-button>
|
||||||
type="base"
|
<star-button label="取消"></star-button>
|
||||||
variant="accent"
|
</star-ul>
|
||||||
label="extralarge"
|
|
||||||
size="extralarge"
|
<star-ul
|
||||||
></star-button>
|
type="onlyheader"
|
||||||
</div>
|
title="主题"
|
||||||
<div>
|
id="menu"
|
||||||
<h4>按钮填充状态展示</h4>
|
background="rgba(250, 250, 250, 0.78);"
|
||||||
<star-button
|
>
|
||||||
type="base"
|
<star-li type="base">
|
||||||
treatment="fill"
|
<star-button class="auxiliary" label="主题">
|
||||||
variant="primary"
|
<star-svg-icon slot="asset" symbol="store"></star-svg-icon>
|
||||||
label="fill"
|
</star-button>
|
||||||
></star-button>
|
<star-button class="auxiliary" label="图标">
|
||||||
<star-button
|
<star-svg-icon slot="asset" symbol="app"></star-svg-icon>
|
||||||
type="base"
|
</star-button>
|
||||||
treatment="outline"
|
<star-button class="auxiliary" label="壁纸">
|
||||||
variant="primary"
|
<star-svg-icon
|
||||||
label="outline"
|
slot="asset"
|
||||||
></star-button>
|
symbol="desktopWallpaper"
|
||||||
</div>
|
></star-svg-icon>
|
||||||
<div>
|
</star-button>
|
||||||
<h4>按钮点击事件展示</h4>
|
<star-button class="auxiliary" label="颜色">
|
||||||
<star-button
|
<star-svg-icon slot="asset" symbol="lockscreen"></star-svg-icon>
|
||||||
@click=${this}
|
</star-button>
|
||||||
type="base"
|
</star-li>
|
||||||
variant="accent"
|
</star-ul>
|
||||||
label="Click"
|
|
||||||
></star-button>
|
<star-ul
|
||||||
</div>
|
type="onlyheader"
|
||||||
<div>
|
title="菜单"
|
||||||
<h4>图标按钮展示</h4>
|
id="iconmenu"
|
||||||
|
background="var(--bg-dialog)"
|
||||||
|
>
|
||||||
<star-button
|
<star-button
|
||||||
type="iconlabel"
|
type="iconlabel"
|
||||||
variant="accent"
|
icon="info"
|
||||||
label="Icon+Label"
|
label="应用详情"
|
||||||
icon="alarm"
|
|
||||||
iconcolor="white"
|
|
||||||
></star-button>
|
|
||||||
<star-button
|
|
||||||
type="icononly"
|
|
||||||
variant="accent"
|
|
||||||
label="IconOnly"
|
|
||||||
icon="delete"
|
|
||||||
iconcolor="#f9f9f9"
|
|
||||||
></star-button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4>各类按钮属性在禁用状态下的展示</h4>
|
|
||||||
<star-button type="base" variant="accent" label="正常"></star-button>
|
|
||||||
<star-button
|
|
||||||
type="base"
|
|
||||||
variant="accent"
|
|
||||||
label="禁用"
|
|
||||||
disabled
|
|
||||||
></star-button>
|
></star-button>
|
||||||
|
<star-button type="iconlabel" icon="delete" label="卸载"></star-button>
|
||||||
<star-button
|
<star-button
|
||||||
type="iconlabel"
|
type="iconlabel"
|
||||||
variant="accent"
|
icon="download-circle"
|
||||||
label="Icon禁用"
|
label="固定至Dock"
|
||||||
icon="alarm"
|
|
||||||
iconcolor="silver"
|
|
||||||
disabled
|
|
||||||
></star-button>
|
></star-button>
|
||||||
|
</star-ul>
|
||||||
|
<star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
|
||||||
<star-button
|
<star-button
|
||||||
type="base"
|
type="iconlabel"
|
||||||
treatment="fill"
|
icon="keyboard-circle"
|
||||||
variant="primary"
|
label="编辑屏幕"
|
||||||
label="fill禁用"
|
|
||||||
disabled
|
|
||||||
></star-button>
|
></star-button>
|
||||||
<star-button
|
</star-ul>
|
||||||
type="base"
|
|
||||||
variant="accent"
|
<star-ul
|
||||||
label="large"
|
type="onlyheader"
|
||||||
size="large"
|
title="一对内联按钮"
|
||||||
disabled
|
id="dialog"
|
||||||
></star-button>
|
background="var(--bg-dialog)"
|
||||||
</div>
|
>
|
||||||
<div>
|
<star-li type="base">
|
||||||
<h4>按钮组</h4>
|
<star-button class="chamfer cancel" label="取消"></star-button>
|
||||||
<star-buttongroup class="bg">
|
<star-button class="chamfer confirm" label="连接"></star-button>
|
||||||
<star-button
|
</star-li>
|
||||||
type="base"
|
</star-ul>
|
||||||
variant="accent"
|
|
||||||
label="按钮1"
|
<star-ul type="onlyheader" id="dialog" title="独占一行" type="base">
|
||||||
class="bg"
|
<star-li type="base">
|
||||||
></star-button>
|
<star-button class="chamfer confirm" label="应用"></star-button>
|
||||||
<star-button
|
</star-li>
|
||||||
type="base"
|
</star-ul>
|
||||||
variant="accent"
|
|
||||||
label="按钮2"
|
<!-- TODO -->
|
||||||
class="bg"
|
<!-- <star-ul type="onlyheader" id="dialog" title="通知下的按钮" type="base">
|
||||||
></star-button>
|
<star-li type="base">
|
||||||
<star-button
|
<star-button class="chamfer normal floatright" label="稍后提醒"></star-button>
|
||||||
type="base"
|
<star-button class="chamfer normal floatright" label="关闭"></star-button>
|
||||||
variant="accent"
|
</star-li>
|
||||||
label="按钮3"
|
</star-ul> -->
|
||||||
class="bg"
|
|
||||||
></star-button>
|
|
||||||
</star-buttongroup>
|
|
||||||
<hr />
|
|
||||||
<star-buttongroup vertical class="bg">
|
|
||||||
<star-button
|
|
||||||
type="base"
|
|
||||||
variant="accent"
|
|
||||||
label="按钮1"
|
|
||||||
class="bg"
|
|
||||||
></star-button>
|
|
||||||
<star-button
|
|
||||||
type="base"
|
|
||||||
variant="accent"
|
|
||||||
label="按钮2"
|
|
||||||
class="bg"
|
|
||||||
></star-button>
|
|
||||||
<star-button
|
|
||||||
type="base"
|
|
||||||
variant="accent"
|
|
||||||
label="按钮3"
|
|
||||||
class="bg"
|
|
||||||
></star-button>
|
|
||||||
</star-buttongroup>
|
|
||||||
</div>
|
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static get styles(): CSSResultArray {
|
||||||
|
return [
|
||||||
|
baseStyles,
|
||||||
|
css`
|
||||||
|
star-ul#dialog {
|
||||||
|
border-radius: var(--base-dialog-radius);
|
||||||
|
}
|
||||||
|
star-ul#menu {
|
||||||
|
max-width: 300px;
|
||||||
|
border-radius: var(--base-menu-radius);
|
||||||
|
}
|
||||||
|
star-ul#iconmenu {
|
||||||
|
max-width: 150px;
|
||||||
|
border-radius: var(--base-menu-radius);
|
||||||
|
}
|
||||||
|
star-ul#dialog {
|
||||||
|
border-radius: var(--base-menu-radius);
|
||||||
|
}
|
||||||
|
star-li span.split {
|
||||||
|
color: var(--split-line);
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
|
|
|
||||||
|
|
@ -14,12 +14,4 @@ export const switchStyles: CSSResult = css`
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: #f0f0f0;
|
background: #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
|
||||||
--left-transform: -100vw;
|
|
||||||
--right-transform: +100vw;
|
|
||||||
--li-base-height: 43px;
|
|
||||||
--li-left-padding: 10px;
|
|
||||||
--li-right-padding: 10px;
|
|
||||||
}
|
|
||||||
`
|
`
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue