Merge branch 'master' of ssh://172.20.184.160:7999/yr/star-web-components into star-iconfont
This commit is contained in:
yajun
commit
38dea4db1f
|
|
@ -0,0 +1,6 @@
|
|||
#!/usr/bin/env sh
|
||||
. "$(dirname -- "$0")/_/husky.sh"
|
||||
|
||||
yarn lint-staged
|
||||
yarn build
|
||||
yarn build:vite
|
||||
17
package.json
17
package.json
|
|
@ -17,18 +17,27 @@
|
|||
"build:widgets": "node ./tasks/build-widgets.js",
|
||||
"esbuild:ts": "node ./tasks/esbuild-packages.js",
|
||||
"format": "npm run format:prettier",
|
||||
"format:prettier": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --write"
|
||||
"format:prettier": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --write",
|
||||
"postinstall": "husky install"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{cjs,html,js,json,md,ts}": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"lit": "^2.2.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^2.7.1",
|
||||
"vite": "^3.0.0",
|
||||
"esbuild": "^0.15.8",
|
||||
"fast-glob": "^3.2.12",
|
||||
"husky": "^8.0.1",
|
||||
"lint-staged": "^13.0.3",
|
||||
"prettier": "^2.7.1",
|
||||
"tslib": "^2.4.0",
|
||||
"typescript": "^4.8.3"
|
||||
"typescript": "^4.8.3",
|
||||
"vite": "^3.0.0"
|
||||
},
|
||||
"workspaces": [
|
||||
"src/components/*",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,405 @@
|
|||
# 目录
|
||||
|
||||
* [<font size=4>**命名规则**</font>](#命名规则)</br>
|
||||
* [<font size=4>**介绍**</font>](#介绍)
|
||||
* [<font size=3>**基础控件库**</font>](#基础控件库)
|
||||
* [<font size=3>**应用窗口**</font>](#应用窗口)
|
||||
* [<font size=3>**桌面**</font>](#桌面)
|
||||
* [<font size=3>**多任务视图**</font>](#多任务视图)
|
||||
* [<font size=3>**控制中心**</font>](#控制中心)
|
||||
* [<font size=3>**音量条**</font>](#音量条)
|
||||
* [<font size=3>**通知中心**</font>](#通知中心)
|
||||
* [<font size=3>**锁屏及解锁**</font>](#锁屏及解锁)
|
||||
* [<font size=3>**组件编辑**</font>](#组件编辑)
|
||||
* [<font size=3>**个性化配置**</font>](#个性化配置)
|
||||
# 命名规则
|
||||
|
||||
| 名称 | 动作 |
|
||||
| ---------------- | ---------------------------------------------- |
|
||||
| star_press | 缩小、背景颜色加深 |
|
||||
| star_free | 放大、背景颜色变浅 |
|
||||
| star_contraction | 缩小 |
|
||||
| star_expansion | 放大 |
|
||||
| star_fadeIn | 逐渐出现(透明度变化) |
|
||||
| star_fadeOut | 逐渐消失(透明度变化) |
|
||||
| star_open | 出现(透明度变化)、背景颜色变化、尺寸变化、位移 |
|
||||
| star_close | 消失(透明度变化)、背景颜色变化、尺寸变化、位移 |
|
||||
| star_moveX | X 方向位移 |
|
||||
| star_moveY | Y 方向位移 |
|
||||
| star_background | 背景颜色变化 |
|
||||
| star_appear | 出现(透明度 0-100)、位移、缩放 |
|
||||
| star_disappear | 消失(透明度 100-0)、位移、缩放 |
|
||||
| star_size | 尺寸变化 |
|
||||
| v_x | v_x 代表 version_x，由数据不同而定义不同的版本 |
|
||||
|
||||
# 介绍
|
||||
|
||||
## 基础控件库
|
||||
|
||||
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
|
||||
| :---------------------- | :-----------------------------: | :------------------: | :--------------------: | :-----------------------------------------------------------------------------------------------------: | :------: | :---------------: | --------------------: |
|
||||
| primary button | 按下 | 按钮整体 | star_press | scale(1-0.9)、#0098f7-#0086d9 | 150ms | (0,0.35,0.2,1) | .star_press |
|
||||
| | 释放 | 按钮整体 | star_free | scale(0.9-1)、#0086d9-#0098f7 | 200ms | (0,0.35,0.2,1) | .star_free |
|
||||
| default button | 按下 | 按钮整体 | star_contraction_v1 | scale(1-0.9) | 150ms | (0,0.35,0.2,1) | .star_contraction_v1 |
|
||||
| | | 底板 | star_fadeIn_v1 | opacity(6-15) | 150ms | (0,0.35,0.2,1) | .star_fadeIn_v1 |
|
||||
| | 释放 | 按钮整体 | star_expansion_v1 | scale(0.9-1) | 200ms | (0,0.35,0.2,1) | .star_expansion_v1 |
|
||||
| | | 底板 | star_fadeOut_v1 | opacity(15-6) | 200ms | (0,0.35,0.2,1) | .star_fadeOut_v1 |
|
||||
| pure button | 按下 | 按钮整体 | star_contraction_v1 | | 150ms | (0,0.35,0.2,1) | .star_contraction_v1 |
|
||||
| | | 底板 | star_fadeIn_v2 | opacity(78-96) | 150ms | (0,0.35,0.2,1) | .star_fadeIn_v2 |
|
||||
| | 释放 | 按钮整体 | star_expansion_v1 | scale(0.9-1) | 200ms | (0,0.35,0.2,1) | .star_expansion_v1 |
|
||||
| | | 底板 | star_fadeOut_v2 | opacity(96-78) | 200ms | (0,0.35,0.2,1) | .star_fadeOut_v2 |
|
||||
| icon button | 按下 | 圆底 | star_open_v1 | scale(1-2)、opacity(0-6) | 200ms | (0.25,0.1,0.25,1) | .star_open_v1 |
|
||||
| | 释放 | 圆底 | star_fadeOut_v2 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v2a |
|
||||
| text button | 按下 | 按钮底 | star_fadeIn_v3 | opacity(0-6) | 200ms | (0.25,0.1,0.25,1) | .star_fadeIn_v3 |
|
||||
| | 释放 | 按钮底 | star_fadeOut_v3 | opacity(6-0) | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v3 |
|
||||
| multi buttons | 按下 | 按钮底 | star_fadeIn_v4 | opacity(0-50) | 200ms | (0.25,0.1,0.25,1) | .star_fadeIn_v4 |
|
||||
| | 释放 | 按钮底 | star_fadeOut_v4 | opacity(50-0) | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v4 |
|
||||
| switch | 开 | 按钮整体 | star_open_v2 | scale(1-0.9)、scale(0.9-1)、</br>rgba(29,152,240,1)-rgba(0,0,0,0.35) | 300ms | (0.25,0.1,0.25,1) | .star_open_v2 |
|
||||
| | 关 | 按钮整体 | star_close_v1 | scale(1-0.9)、scale(0.9-1)、</br>rgba(0,0,0,0.35)-rgba(29,152,240,1) | 300ms | (0.25,0.1,0.25,1) | .star_close_v1 |
|
||||
| radio | 开 | 按钮整体 | star_open_v3 | rgba(41,41,41,1)-rgba(29,152,240,10)、</br>border(4px rgba(38, 38, 38, 0.25)-9px rgba(29, 152, 240, 1)) | 200ms | (0.25,0.1,0.25,1) | .star_open_v3 |
|
||||
| | 关 | 按钮整体 | star_close_v2 | rgba(29,152,240,10)-rgba(41,41,41,1)、</br>border(9px rgba(29, 152, 240, 1)-4px rgba(38, 38, 38, 0.25)) | 200ms | (0.25,0.1,0.25,1) | .star_close_v2 |
|
||||
| checkbox | 开 | 对勾图标 | star_open_v4 | opacity(0-100)、scale(0-1） | 250ms | (0.25,0.1,0.25,1) | .star_open_v4 |
|
||||
| | | 方框 | star_open_v5 | border-width(3px-0)、opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_open_v5 |
|
||||
| checkbox | 关 | 对勾图标 | star_close_v3 | opacity(100-0)、scale(0-1） | 250ms | (0.25,0.1,0.25,1) | .star_close_v3 |
|
||||
| | | 方框 | star_close_v4 | border-width(0-3px)、opacity(100-0) | 250ms | (0.25,0.1,0.25,1) | .star_close_v4 |
|
||||
| toggle | 开 | 圆块 | star_moveX_v1 | 32px | 200ms | (0.25,0.1,0.25,1) | .star_moveX_v1 |
|
||||
| | | 底盘 | star_background_v1 | rgba(0,0,0,12)-rgba(29,152,240,1) | 200ms | (0.25,0.1,0.25,1) | .star_background_v1 |
|
||||
| toggle | 关 | 圆块 | star_moveX_v2 | -32px | 200ms | (0.25,0.1,0.25,1) | .star_moveX_v2 |
|
||||
| | | 底盘 | star_background_v2 | rgba(29,152,240,1)-rgba(0,0,0,12) | 200ms | (0.25,0.1,0.25,1) | .star_background_v2 |
|
||||
| toast | 出现 | 整体 | star_appear_v1 | Y:90px opacity(0-100) | - | | .star_appear_v1 |
|
||||
| | 消失 | 整体 | star_disappear_v1 | scale(1-0.85) opacity(100-0) | 150ms | (0.25,0.1,0.25,1) | .star_disappear_v1 |
|
||||
| dialog | 出现 | 弹窗整体 | star_appear_v2 | scale(0.85-1) opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_appear_v2 |
|
||||
| | | 遮罩 | star_fadeIn_v5 | opacity(0-30) | 250ms | | .star_fadeIn_v5 |
|
||||
| | 消失 | 弹窗整体 | star_disappear_v1 | scale(1-0.85) opacity(100-0) | 250ms | (0,0.35,0.25,1) | .star_disappear_v1a |
|
||||
| | | 遮罩 | star_fadeOut_v5 | opacity(30-0) | 250ms | 0,0.35,0.25,1) | .star_fadeOut_v5 |
|
||||
| notification | 出现 | 整体 | star_moveY_v1 | 230px | 250ms | (0.3,0.2,0.1,1) | .star_moveY_v1 |
|
||||
| | 自动消失 | 整体 | star_moveY_v2 | -230px | 250ms | (0.3,0.2,0.1,1) | .star_moveY_v2 |
|
||||
| | 划出面板 | 整体 | star_moveY | 位移参数无法确定 | 250ms | (0.3,0.2,0.1,1) |
|
||||
| | 划出面板 | 整体 | star_moveY | 位移参数无法确定 | 250ms | (0.3,0.2,0.1,1) |
|
||||
| | 点击面板</br>打开应用-按下 | 面板整体 | star_contraction_v2 | scale(1-0.95) | 150ms | (0.25,0.1,0.25,1) | .star_contraction_v2 |
|
||||
| | 点击面板</br>打开应用-释放 | 面板整体 | star_disappear_v2 | scale(0.95-1) opacity(100-0) | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v2 |
|
||||
| | | 应用界面 | star_appear_v3 | scale(0.5-1) opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v3a |
|
||||
| | 执行按钮</b>操作-按下 | 按钮 | star_contraction_v1 | | 150ms | (0,0.35,0.2,1) | .star_contraction_v1 |
|
||||
| | 执行按钮</b>操作-释放 | 按钮 | star_expansion_v1 | | 150ms | (0,0.35,0.2,1) | .star_expansion_v1a |
|
||||
| | 执行按钮</b>操作-释放 | 通知面板 | star_moveY_v2 | | 150ms | (0,0.35,0.2,1) | .star_moveY_v2a |
|
||||
| DatePicker、TimePicker | 滑动选择 | 对应列 | star_moveY | 位移参数无法确定 | | |
|
||||
| | | 进入中间选中态的选项 | star_open_v6 | font-star_size(28pt-36pt)</br>color(rgba(38,38,38,0.45)-rgba(29,152,240,1)) | | | .star_open_v6 |
|
||||
| | | 离开中间选中态的选项 | star_close_v5 | font-star_size(36pt-28pt)</br>color(rgba(29,152,240,1)-rgba(38,38,38,0.45)) | | | .star_close_v5 |
|
||||
| | 拖拽选择 | 对应列 | star_moveX、star_moveY | 位移参数无法确定 | |
|
||||
| | 点击选择</br>时间动效 | 对应列 | star_moveX、star_moveY | 位移参数无法确定 | |
|
||||
| | | 进入中间选中态的选项 | star_open_v6 | | 200ms | (0,0.35,0.2,1) | .star_open_v6 |
|
||||
| | | 离开中间选中态的选项 | star_close_v5 | | 200ms | (0,0.35,0.2,1) | .star_close_v5 |
|
||||
| | 点击切换</br>上下午 | 被点击项 | star_open_v6 | | 200ms | (0,0.35,0.2,1) | .star_open_v6 |
|
||||
| | | 未被点击项 | star_close_v5 | | 200ms | (0,0.35,0.2,1) | .star_close_v5 |
|
||||
| 底部菜单 | 出现 | 整体 | star_moveY_v3 | -50px | 300ms | (0.25,0.1,0.25,1) | .star_moveY_v3 |
|
||||
| | 消失 | 整体 | star_moveY_v4 | 50px | 300ms | (0.25,0.1,0.25,1) | .star_moveY_v4 |
|
||||
| 长按菜单 | 出现-长按桌面</br>图标/桌面组件 | 图标 | star_contraction_v3 | scale(1-0.85) | 150ms | (0.25,0.1,0.25,1) | .star_contraction_v3 |
|
||||
| | | 组件 | star_contraction_v1 | | 200ms | (0.25,0.1,0.25,1) | .star_contraction_v1a |
|
||||
| | 出现-按下第 0.4s | 图标 | star_expansion_v2 | | - | | .star_expansion_v2 |
|
||||
| | | 组件 | star_expansion_v1 | | - | | .star_expansion_v1 |
|
||||
| | | 菜单 | star_appear_v2 | | 250ms | (0.25,0.1,0.25,1) | .star_appear_v2 |
|
||||
| | 消失 | 菜单 | star_disappear_v1 | | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v1b |
|
||||
| 时间日期</br>及桌面组件 | 按下 | 整体 | star_contraction_v1 | | 200ms | (0,0.35,0.2,1) | .star_contraction_v1b |
|
||||
| | 释放 | 整体 | star_expansion_v1 | | 250ms | (0,0.35,0.2,1) | .star_expansion_v1b |
|
||||
| 控制中心吊件 | 按下 | 整体 | star_contraction_v1 | | 150ms | (0,0.35,0.2,1) | .star_contraction_v1 |
|
||||
| | 释放 | 整体 | star_expansion_v1 | | 200ms | (0,0.35,0.2,1) | .star_expansion_v1 |
|
||||
| 可点击列表项 | 按下 | 底板 | star_fadeIn_v3 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeIn_v3 |
|
||||
| | 释放 | 底板 | star_fadeOut_v3 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v3 |
|
||||
| 控件列表项 | 按下 | 底板 | star_fadeIn_v3 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeIn_v3 |
|
||||
| | 释放 | 底板 | star_fadeOut_v3 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v3 |
|
||||
|
||||
## 应用窗口
|
||||
|
||||
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
|
||||
| :------- | :------------------------------------: | :------: | :-----------------: | :-------------------------: | :------: | :---------------: | -------------------: |
|
||||
| 应用窗口 | 从桌面图标打开</br>-按下图标 | 应用图标 | star_contraction_v3 | | 150ms | (0.25,0.1,0.25,1) | .star_contraction_v3 |
|
||||
| | 从桌面图标打开</br>-松手 | 应用图标 | star_expansion_v3 | scale(0.85-1.3) | 150ms | (0.25,0.1,0.25,1) | .star_expansion_v3 |
|
||||
| | | 高斯遮罩 | star_fadeIn_v6 | opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6 |
|
||||
| | | 应用界面 | star_appear_v4 | scale(0.1-1) opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_appear_v4 |
|
||||
| | 退出到桌面图标</br>-从底部上划 | 应用界面 | star_contraction_v4 | scale(1-0.5) | - | | .star_contraction_v4 |
|
||||
| | 从桌面图标打开</br>-松手 | 应用界面 | star_disappear_v3 | scale(-0.1) opacity(100-0) | 250ms | (0,0.35,0.2,1) | .star_disappear_v3 |
|
||||
| | | 高斯遮罩 | star_fadeOut_v6 | opacity(100-0) | 250ms | (0,0.35,0.2,1) | .star_fadeOut_v6 |
|
||||
| | | 应用图标 | star_contraction_v5 | scale(1.3-1) | 150ms | (0,0.35,0.2,1) | .star_contraction_v5 |
|
||||
| | 从他处打开 | 高斯遮罩 | star_fadeIn_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6 |
|
||||
| | | 应用界面 | star_appear_v3 | | 250ms | (0.25,0.1,0.25,1) | .star_appear_v3 |
|
||||
| | 退出到无对应应用</br>的界面-从底部上划 | 应用界面 | star_contraction_v4 | | - | | .star_contraction_v4 |
|
||||
| | 退出到无对应应用</br>的界面-松手 | 应用界面 | star_disappear_v3 | | 250ms | (0,0.35,0.2,1) | .star_disappear_v3 |
|
||||
| | | 高斯遮罩 | star_fadeOut_v6 | | 250ms | (0,0.35,0.2,1) | .star_fadeOut_v6 |
|
||||
|
||||
## 桌面
|
||||
|
||||
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
|
||||
| :-------------------------------- | :------------------------------------------: | :-----------------------------: | :-------------------: | :----------------------------------------------------: | :------: | :---------------: | --------------------: |
|
||||
| 应用组 | 应用组展开 | 容器底 | star_fadeOut_v7 | opacity(25-0) | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v7 |
|
||||
| | | 应用组名称(小) | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
|
||||
| | | 桌面上除应用组</br>的所有内容 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
|
||||
| | | 组内各应用图标</br>(包括其名称) | star_expansion_v4 | scale(0.148-1) | 300ms | (0.3,0.2,0.1,1) | .star_expansion_v4 |
|
||||
| | | 各自应用名称 | star_fadeIn_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6a |
|
||||
| | | 应用组名称(大) | star_fadeIn_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6a |
|
||||
| | 应用组收缩 | 应用组名称(大) | star_fadeOut_v6 | | 100ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6b |
|
||||
| | | 组内各应用图标</br>(包括其名称) | star_contraction_v6 | scale(1-0.148) | 300ms | (0.3,0.2,0.1,1) | .star_contraction_v6 |
|
||||
| | | 各自应用名称 | star_fadeOut_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6c |
|
||||
| | | 桌面上除应用组</br>的所有内容 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
|
||||
| | | 应用组名称(小) | star_fadeIn_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6b |
|
||||
| | | 容器底 | star_fadeIn_v7 | opacity(0-25) | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v7 |
|
||||
| 屏幕编辑模式 | 唤起屏幕编辑 | 卸载角标按钮</br>(整体) | star_fadeIn_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6b |
|
||||
| | | 顶部三按钮</br>(整体) | star_appear_v5 | Y:70px opacity(0-100) | 250ms | (0.3,0.2,0.1,1) | .star_appear_v5 |
|
||||
| | | 时间天气组件</br>(整体) | star_contraction_v2 | | 250ms | (0.3,0.2,0.1,1) | .star_contraction_v2a |
|
||||
| | | 时间天气组件</br>(底板) | star_fadeIn_v8 | opacity(0-12) | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v8 |
|
||||
| | 退出屏幕编辑 | 卸载角标按钮</br>(整体) | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
|
||||
| | | 顶部三按钮</br>(整体) | star_disappear_v4 | Y:-70px opacity(100-0) | 250ms | (0.3,0.2,0.1,1) | .star_disappear_v4 |
|
||||
| | | 时间天气组件</br>(整体) | star_expansion_v5 | scale(0.95-1) | 250ms | (0.3,0.2,0.1,1) | .star_expansion_v5 |
|
||||
| | | 时间天气组件</br>(底板) | star_fadeOut_v8 | opacity(12-0) | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v8 |
|
||||
| | 移除桌面组件 | 卸载角标 | star_fadeOut_v6 | | 50ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6d |
|
||||
| | | 对应桌面组件 | star_disappear_v5 | scale(1-0.7) opacity(100-0) | 250ms | (0.3,0.2,0.1,1) | .star_disappear_v5 |
|
||||
| dock 栏 | 移出图标 | 其他图标 | star_moveX/star_moveY | 位移参数无法确定 | 200ms | (0.3,0.2,0.1,1) |
|
||||
| | 移入图标 | 其他图标 | star_moveX/star_moveY | 位移参数无法确定 | 200ms | (0.3,0.2,0.1,1) |
|
||||
| | 移入图标-松手 | 被拖拽图标 | star_moveX/star_moveY | 位移参数无法确定 | 250ms | (0.3,0.2,0.1,1) |
|
||||
| | 内部移动图标 | 其他图标 | star_moveX/star_moveY | 位移参数无法确定 | 200ms | (0.3,0.2,0.1,1) |
|
||||
| | 内部移动图标-松手 | 被拖拽图标 | star_moveX/star_moveY | 位移参数无法确定 | 250ms | (0.3,0.2,0.1,1) |
|
||||
| 创建应用组、增加</br>应用(不展开) | 创建应用组(未展开)-</br>长按 A 并拖动 | A 应用名称 | star_fadeOut_v6 | | 50ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6f |
|
||||
| | 创建应用组(未展开)-</br>A 覆盖 B 一半 | B 图标下的</br>容器底 | star_fadeIn_v5 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeIn_v5 |
|
||||
| | 创建应用组(未展开)-</br>覆盖 0.6s 内松手 | B 应用名称 | | | 50ms | (0.25,0.1,0.25,1) |
|
||||
| | | B 图标 | star_contraction_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_contraction_v6a |
|
||||
| | | A 图标 | star_contraction_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_contraction_v6a |
|
||||
| | | 应用组容器 | star_size_v1 | 114×114-92×92</br>border-radius(28px-20px) | 300ms | (0.25,0.1,0.25,1) | .star_size_v1 |
|
||||
| | 增加应用-</br>C 覆盖 B 一半时 | 应用组容器 | star_size_v2 | 92×92-114×114</br>border-radius(20px-28px) | 250ms | (0.25,0.1,0.25,1) | .star_size_v2 |
|
||||
| | 增加应用-</br>C 覆盖 0.6 内松手 | 应用组容器 | star_size_v1 | | 300ms | (0.25,0.1,0.25,1) | .star_size_v1 |
|
||||
| | 增加应用-</br>C 覆盖 0.6 内松手 | C 图标 | star_contraction_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_contraction_v6a |
|
||||
| 创建应用组(展开) | A 覆盖 B 一半 | B 图标下的</br>容器底 | star_fadeIn_v5 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeIn_v5 |
|
||||
| | 覆盖到第 0.6 内松手 | B 图标下的</br>容器底 | star_fadeOut_v5 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeOut_v5a |
|
||||
| | | 桌面上除应用组</br>的所有内容 | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
|
||||
| | | B 图标 | star_moveX/star_moveY | 位移参数无法确定 | 300ms | (0.25,0.1,0.25,1) |
|
||||
| | | 应用组名称(大) | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
|
||||
| | | 容器白线框 | star_fadeIn_v9 | opacity(0-35) | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v9 |
|
||||
| | 释放 A 图标 | A 图标 | star_moveX/star_moveY | 位移参数无法确定 | 300ms | (0.25,0.1,0.25,1) |
|
||||
| | | 容器白线框 | star_fadeOut_v9 | opacity(35-0) | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v9 |
|
||||
| 组内跨页移动 | 开始拖动 | 容器白线框 | star_fadeIn_v5 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeIn_v5a |
|
||||
| | A 距右边框 30px 以内</br>且停留到第 0.3 秒时 | 组内应用组/分页符 | | | 300ms | (0.25,0.1,0.25,1) |
|
||||
| | 释放 A 图标 | A 图标 | star_moveX | 位移参数无法确定 | 300ms | (0.25,0.1,0.25,1) |
|
||||
| | | A 应用名称 | star_fadeIn_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6c |
|
||||
| | | 容器白线框 | star_fadeOut_v9 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v9 |
|
||||
| 移出应用组 | 开始拖动 | 容器白线框 | star_fadeIn_v9 | | 200ms | (0.3,0.2,0.1,1) | .star_fadeIn_v9a |
|
||||
| | A 中线超过边框</br>且停留到 0.2s 时 | 分页符 | star_fadeOut_v6 | | 100ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6b |
|
||||
| | | 容器白线框 | star_fadeOut_v6 | | 100ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6b |
|
||||
| | | 应用组名称(大) | star_fadeIn_v6 | 位移参数无法确定 | 100ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6d |
|
||||
| | | 组内各应用图标</br>(包括其名称) | star_contraction_v6 | 位移参数无法确定 | 300ms | (0.3,0.2,0.1,1) | .star_contraction_v6 |
|
||||
| | | 各自应用名称 | star_fadeOut_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6c |
|
||||
| | | 桌面上除应用组</br>的所有内容 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
|
||||
| | | 应用组名称(小) | star_fadeIn_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6b |
|
||||
| | | 容器底 | star_fadeIn_v5 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v5b |
|
||||
| | 释放 A 图标 | A 图标 | star_moveX/star_moveY | 位移参数无法确定 | 300ms | (0.25,0.1,0.25,1 |
|
||||
| | | A 应用名称 | star_fadeIn_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6e |
|
||||
| | | 应用组内图标 | | | 300ms | (0.25,0.1,0.25,1 |
|
||||
| 父子级页面跳转 | 进入子页面 | 当前页面 | star_moveX_v11 | -600px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v11 |
|
||||
| | | 本页面上</br>的遮罩 | star_open_v10 | X:-600px</br>rgba(24, 24, 24, 0)-rgba(24, 24, 24, 0.3) | 300ms | (0.25,0.1,0.25,1) | .star_open_v10 |
|
||||
| | | 子页面 | star_moveX_v12 | -1200px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v12 |
|
||||
| | 返回到上级页面 | 当前页面 | star_moveX_v10 | 1200px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v10 |
|
||||
| | | 本页面上</br>的遮罩 | star_close_v9 | X:1200px</br>rgba(24, 24, 24, 0.3)-rgba(24, 24, 24, 0) | 300ms | (0.25,0.1,0.25,1) | .star_close_v9 |
|
||||
| | | 上级页面 | star_moveX_v13 | 600px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v13 |
|
||||
| 侧边栏结构父子级页面跳转 | 进入子页面 | 当前页面 | star_moveX_v14 | -368px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v14 |
|
||||
| | | 本页面上</br>的遮罩 | star_open_v11 | X:-368px</br>rgba(24, 24, 24, 0)-rgba(24, 24, 24, 0.3) | 300ms | (0.25,0.1,0.25,1) | .star_open_v11 |
|
||||
| | | 子页面 | star_moveX_v15 | -736px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v15 |
|
||||
| | 返回到上级页面 | 当前页面 | star_moveX_v16 | 736px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v16 |
|
||||
| | | 本页面上</br>的遮罩 | star_close_v10 | X:736px</br>rgba(24, 24, 24, 0.3)-rgba(24, 24, 24, 0) | 300ms | (0.25,0.1,0.25,1) | .star_close_v10 |
|
||||
| | | 上级页面 | star_moveX_v17 | 368px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v17 |
|
||||
|
||||
## 多任务视图
|
||||
|
||||
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
|
||||
| :---------------------------- | :---------------------------------: | :-----------------------------------: | :-------------------: | :----------------------------------: | :------: | :---------------: | -------------------: |
|
||||
| 从桌面唤起</br>多任务视图 | 开始滑动 | 桌面上所有内容 | star_contraction_v2 | | | | .star_contraction_v2 |
|
||||
| | 应用界面冒出 | 应用界面 | star_moveX_v3 | 596px | 400ms | (0.25,0.1,0.25,1) | .star_moveX_v3 |
|
||||
| | | 高斯遮罩 | star_fadeIn_v6 | | 400ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6f |
|
||||
| | 应用界面跟随手指</br>滑动的联动效果 | 应用界面阵列 | star_contraction_v7 | scale(0.7-0.4) | | | .star_contraction_v7 |
|
||||
| | 排列为矩阵 | 各应用界面 | star_contraction_v8 | scale(-0.275)、位移参数无法确定 | 300ms | (0,0.35,0.2,1) | .star_contraction_v8 |
|
||||
| | | 清除按钮 | star_fadeIn_v6 | | 100ms | (0,0.35,0.2,1) | .star_fadeIn_v6g |
|
||||
| | | 应用图标及名称</br>(整体) | star_fadeIn_v6 | | 100ms | (0,0.35,0.2,1) | .star_fadeIn_v6g |
|
||||
| 退出多任务视图 | 退出多任务 | 所有应用界面</br>(整体) | star_moveX_v4 | -100px | 350ms | (0.25,0.1,0.25,1) | .star_moveX_v4 |
|
||||
| | | 所有应用图标</br>和名称 | star_moveX_v4 | | 350ms | (0.25,0.1,0.25,1) | .star_moveX_v4 |
|
||||
| | | 高斯遮罩 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
|
||||
| | | 桌面内容(整体) | star_expansion_v5 | | 300ms | (0.25,0.1,0.25,1) | .star_expansion_v5a |
|
||||
| 从应用界面启动</br>多任务视图 | 开始滑动 | 桌面上所有内容 | star_contraction_v9 | scale(1-0.3) | | | .star_contraction_v9 |
|
||||
| | 其他界面出现 | 应用界面 | star_moveX | 位移参数无法确定 | 150ms | (0,0.35,0.2,1) |
|
||||
| | 继续滑动的联动效果 | 应用界面 | star_moveX | 位移参数无法确定 | | |
|
||||
| | | | star_contraction_v9 | | | | .star_contraction_v9 |
|
||||
| | 排列为矩阵 | 各应用界面 | star_contraction_v8 | scale(-0.275)、位移参数无法确定 | 300ms | (0,0.35,0.2,1) | .star_contraction_v8 |
|
||||
| | | 清除按钮 | star_fadeIn_v6 | | 100ms | (0,0.35,0.2,1) | .star_fadeIn_v6g |
|
||||
| | | 应用图标及名称</br>(整体) | star_fadeIn_v6 | | 100ms | (0,0.35,0.2,1) | .star_fadeIn_v6g |
|
||||
| 关闭应用进程 | 划掉应用 | 被滑动应用面板</br>(包括其图标和名称) | star_disappear_v6 | scale(1-0.5) opacity(100-0) | 250ms | (0.25,0.1,0.25,1) | .star_disappear_v6 |
|
||||
| | | 其他应用面板</br>(包括其图标和名称) | star_moveX/star_moveY | 位移参数无法确定 | 300ms | (0.25,0.1,0.25,1) |
|
||||
| | 未划掉应用 | 被拖拽应用面板</br>(包括其图标和名称) | star_moveY | 位移参数无法确定 | 250ms | (0.25,0.1,0.25,1) |
|
||||
| 清除应用 | 清除应用 | 被清除应用面板</br>(包括其图标和名称) | star_disappear_v7 | scale(1-0.7) Y:-144px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v7 |
|
||||
| | | 被锁定应用面板</br>(包括其图标和名称) | star_moveX/star_moveY | 位移参数无法确定 | 300ms | (0,0.35,0.2,1) |
|
||||
| | 自动回到桌面 | 被锁定应用面板</br>(包括其图标和名称 | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
|
||||
| | | 清除按钮 | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
|
||||
| | | 高斯遮罩 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
|
||||
| | | 桌面内容(整体) | star_expansion_v5 | | 300ms | (0.25,0.1,0.25,1) | .star_expansion_v5a |
|
||||
|
||||
## 控制中心
|
||||
|
||||
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
|
||||
| :-------------- | :---------------------------: | :------------: | :----------------: | :----------------------------------: | :------: | :---------------: | ------------------: |
|
||||
| 唤起/退出 | 跟随手指下滑动</br>的联动效果 | 毛玻璃遮罩层 | star_fadeIn_v10 | blur(0-60) opacity(0-0.65) | | | .star_fadeIn_v10 |
|
||||
| | | 控制中心内容 | star_moveY_v5 | 250px | | | .star_moveY_v5 |
|
||||
| | 控制中心出现 | 控制中心内容 | star_fadeIn_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6 |
|
||||
| | 控制中心回弹 | 控制中心内容 | star_moveY | 位移参数无法确定 | | |
|
||||
| | 退出控制中心 | 控制中心内容 | star_disappear_v8 | Y:-40px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v8 |
|
||||
| | | 毛玻璃遮罩层 | star_fadeOut_v10 | blur(60-0) opacity(0.65-0) | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v10 |
|
||||
| 编辑模式 | 进入 | 控制中心内容 | star_disappear_v9 | X:-30px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v9 |
|
||||
| | | 编辑模式内容 | star_appear_v6 | X:-30px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v6 |
|
||||
| | | 右上状态图标 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
|
||||
| | 退出 | 编辑模式内容 | star_disappear_v10 | X:30px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v10 |
|
||||
| | | 控制中心内容 | star_appear_v7 | X:30px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v7 |
|
||||
| | | 右上状态图标 | star_fadeIn_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6e |
|
||||
| editable-switch | 进入列表页 | 控制中心标题栏 | star_fadeOut_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6c |
|
||||
| | | 列表页标题栏 | star_fadeIn_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6a |
|
||||
| | | 长按钮内容 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
|
||||
| | | 控制中心内容 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
|
||||
| | | 容器 | star_size_v3 | 240×108-512×700 background(浅白渐变) | 300ms | (0.3,0.2,0.1,1) | .star_size_v3 |
|
||||
| | | 列表页内容 | star_fadeIn_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6b |
|
||||
| | 退出列表页 | 控制中心标题栏 | star_fadeIn_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6b |
|
||||
| | | 列表页标题栏 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
|
||||
| | | 长按钮内容 | star_fadeIn_v6 | | 200ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6h |
|
||||
| | | 控制中心内容 | star_fadeIn_v6 | | 200ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6h |
|
||||
| | | 容器 | star_size_v4 | 512×700-240×108 background(状态色) | 250ms | (0.3,0.2,0.1,1) | .star_size_v4 |
|
||||
| | | 列表页内容 | star_fadeOut_v6 | | 200ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6i |
|
||||
| | 进入密码页 | 列表页内容 | star_fadeOut_v6 | | 200ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6i |
|
||||
| | | 密码页 | star_appear_v8 | scale(0.9-1) opacity(0-100) | 300ms | (0.3,0.2,0.1,1) | .star_appear_v8 |
|
||||
| | 退出密码页 | 密码页 | star_disappear_v11 | scale(1-0.9) opacity(100-0) | 250ms | (0.3,0.2,0.1,1) | .star_disappear_v11 |
|
||||
| | | 列表页内容 | star_fadeIn_v6 | | 150ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6i |
|
||||
|
||||
## 音量条
|
||||
|
||||
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
|
||||
| :------------- | :-----------: | :------------: | :-------------: | :-------------------: | :------: | :---------------: | ---------------: |
|
||||
| 出现、消失 | 出现 | 音量条 | star_moveX_v5 | 40px | 250ms | (0.25,0.1,0.25,1) | .star_moveX_v5 |
|
||||
| | 消失 | 音量条 | star_moveX_v6 | -40px | 250ms | (0.25,0.1,0.25,1) | .star_moveX_v6 |
|
||||
| | 调节音量-接触 | 值槽 | star_size_v5 | 16px-32px | 250ms | (0.25,0.1,0.25,1) | .star_size_v5 |
|
||||
| | 调节音量-松手 | 值槽 | star_size_v6 | 32px-16px | 250ms | (0.25,0.1,0.25,1) | .star_size_v6 |
|
||||
| 静音、取消静音 | 静音 | | | | 300ms | (0.25,0.1,0.25,1) |
|
||||
| | 取消静音 | | | | 300ms | (0.25,0.1,0.25,1) |
|
||||
| 展开音量条 | 展开 | 容器 | star_size_v7 | 96px-388px | 300ms | (0.25,0.1,0.25,1) | .star_size_v7 |
|
||||
| | | 铃声音量内容组 | star_moveX_v7 | 26px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v7 |
|
||||
| | | 媒体音量内容组 | star_appear_v9 | X:36px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v9 |
|
||||
| | | 闹钟音量内容组 | star_appear_v10 | X:46px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v10 |
|
||||
| | 消失 | 整体面板 | star_moveX | 位移参数无法确定 | 250ms | (0.25,0.1,0.25,1) |
|
||||
|
||||
## 通知中心
|
||||
|
||||
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
|
||||
| :------------------------ | :---------------------------: | :------------------: | :-----------------: | :-------------------------: | :------: | :---------------: | -------------------: |
|
||||
| 唤起/退出</br>通知中心 | 跟随手指下滑动</br>的联动效果 | 毛玻璃遮罩层 | star_fadeIn_v10 | blur(0-60) opacity(0-0.65) | | | .star_fadeIn_v10 |
|
||||
| | | 通知中心内容 | star_appear_v11 | Y:250px opacity(0-100) | | | .star_appear_v11 |
|
||||
| | 通知中心回弹 | 控制中心内容 | star_moveY | 位移参数无法确定 | | |
|
||||
| | | 清除按钮 | star_fadeIn_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6c |
|
||||
| | 退出通知中心 | 通知中心内容 | star_disappear_v12 | Y:-60px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v12 |
|
||||
| | | 清除按钮 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
|
||||
| | | 毛玻璃遮罩层 | star_fadeOut_v10 | | | (0.25,0.1,0.25,1) | .star_fadeOut_v10 |
|
||||
| 唤起/退出</br>通知选项 | 唤出通知选项 | 对应通知条 | star_moveX | 无法确定位移参数 | 250ms | (0.25,0.1,0.25,1) |
|
||||
| | | 删除及设置按钮 | star_fadeOut_v6 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6j |
|
||||
| | 收起通知选项 | 对应通知条 | star_moveX | 无法确定位移参数 | 250ms | (0.25,0.1,0.25,1) |
|
||||
| | | 删除及设置按钮 | star_fadeIn_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6c |
|
||||
| 删除通知 | 点击按钮删除 | 对应通知条 | star_moveX_v8 | -860px | 200ms | (0.25,0.1,0.25,1) | .star_moveX_v8 |
|
||||
| | | 删除按钮 | star_disappear_v9 | | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v9a |
|
||||
| | | 设置按钮 | star_disappear_v13 | X:-15px opacity(100-0) | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v13 |
|
||||
| | | 下方所有通知条 | star_moveY_v6 | -150px | 250ms | (0.25,0.1,0.25,1) | .star_moveY_v6 |
|
||||
| | 继续左滑删除 | 对应通知条 | star_moveX_v9 | -50px | 200ms | (0.25,0.1,0.25,1) | .star_moveX_v9 |
|
||||
| | | 删除按钮 | star_disappear_v9 | | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v9a |
|
||||
| | | 设置按钮 | star_disappear_v13 | | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v13 |
|
||||
| | | 下方所有通知条 | star_moveY_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_moveY_v6 |
|
||||
| 清除通知 | 清除通知 | 所有通知条 | star_disappear_v14 | scale(1-0.9) opacity(100-0) | 250ms | (0.25,0.1,0.25,1) | .star_disappear_v14 |
|
||||
| | | "暂无通知"文字 | star_fadeIn_v6 | | 50ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6j |
|
||||
| | 自动进入桌面 | 毛玻璃遮罩 | star_fadeOut_v10 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v10a |
|
||||
| | | 标题栏 | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
|
||||
| | | "暂无通知"文字 | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
|
||||
| 同应用多通知<br>展开/收起 | 多通知展开 | 展开前的多通知内容 | star_fadeOut_v6 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6j |
|
||||
| | | 展开后的首个通知内容 | star_fadeIn_v6 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6k |
|
||||
| | | 多通知容器 | star_size_v8 | height: 304px | 300ms | (0.25,0.1,0.25,1) | .star_size_v8 |
|
||||
| | | 各子通知内容 | star_appear_v12 | Y:52px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v12 |
|
||||
| | | 下方其他通知 | star_moveY_v7 | 152px | 300ms | (0.25,0.1,0.25,1) | .star_moveY_v7 |
|
||||
| | 多通知收缩 | 多通知容器 | star_size_v9 | height: 152px | 300ms | (0.25,0.1,0.25,1) | .star_size_v9 |
|
||||
| | | 各子通知内容 | star_disappear_v15 | Y:-52px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v15 |
|
||||
| | | 下方其他通知 | star_moveY_v8 | -152px | 300ms | (0.25,0.1,0.25,1) | .star_moveY_v8 |
|
||||
| | | 首个子通知内容 | star_fadeOut_v6 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6j |
|
||||
| | | 收缩后通知内容 | star_fadeIn_v6 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6k |
|
||||
| 点击通知打开应用 | 按下通知条 | 通知条 | star_contraction_v2 | | 150ms | (0.25,0.1,0.25,1) | .star_contraction_v2 |
|
||||
| | 松手 | 通知条 | star_expansion_v5 | | 200ms | (0.25,0.1,0.25,1) | .star_expansion_v5b |
|
||||
| | | 通知中心内容 | star_disappear_v12 | | 250ms | (0.25,0.1,0.25,1) | .star_disappear_v12a |
|
||||
| | | 清除按钮 | star_fadeOut_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6k |
|
||||
| | | 毛玻璃遮罩层 | star_fadeOut_v10 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeOut_v10b |
|
||||
| | | 对应应用界面 | star_appear_v3 | | 250ms | (0.25,0.1,0.25,1) | .star_appear_v3 |
|
||||
|
||||
## 锁屏及解锁
|
||||
|
||||
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
|
||||
| :--------------------- | :------------: | :-------------------------: | :----------------: | :--------------------------------: | :------: | :---------------: | ------------------: |
|
||||
| 锁屏页-</br>样式选择页 | 激活样式选择页 | 当前及其他锁屏页 | star_open_v7 | scale(1-0.43) border-radius(-20px) | 300ms | (0.25,0.1,0.25,1) | .star_open_v7 |
|
||||
| | | 样式选择页的</br>底部按钮组 | star_fadeIn_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6e |
|
||||
| | | 样式选择页的</br>选中框 | star_fadeIn_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6c |
|
||||
| | 缩略图划页 | 缩略图阵列 | | | | |
|
||||
| | 取消样式选择页 | 缩略图阵列 | star_fadeOut_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6k |
|
||||
| | | 样式选择页的</br>底部按钮组 | star_fadeOut_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6k |
|
||||
| | | 样式选择页的</br>选中框 | star_fadeOut_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6k |
|
||||
| | | 毛玻璃遮罩 | star_fadeOut_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6k |
|
||||
| | 进入全屏预览页 | 样式选择页的</br>选中框 | star_fadeOut_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6l |
|
||||
| | | 当前及其他锁屏页 | star_close_v6 | scale(0.43-1) border-radius(20px-) | 300ms | (0.25,0.1,0.25,1) | .star_close_v6 |
|
||||
| | 全屏预览划页 | 全屏页面 | | | | |
|
||||
| | 回到缩略图 | 当前及其他锁屏页 | star_open_v7 | | 300ms | (0.25,0.1,0.25,1) | .star_open_v7 |
|
||||
| | | 样式选择页的</br>选中框 | star_fadeIn_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6c |
|
||||
| | 缩略图样式完成 | 当前及其他锁屏页 | star_close_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_close_v6 |
|
||||
| | | 样式选择页的</br>底部按钮组 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
|
||||
| | | 样式选择页的</br>选中框 | star_fadeOut_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6l |
|
||||
| 进入/退出密码页 | 进入密码页 | 锁屏页内容 | star_disappear_v16 | Y:-160px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v16 |
|
||||
| | | 毛玻璃遮罩 | star_fadeIn_v10 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v10 |
|
||||
| | | 密码页内容 | star_appear_v13 | Y:-160px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v13 |
|
||||
| | 退出密码页 | 锁屏页内容 | star_disappear_v17 | Y:160px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v17 |
|
||||
| | | 毛玻璃遮罩 | star_fadeOut_v10 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v10c |
|
||||
| | | 密码页内容 | star_appear_v14 | Y:160px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v14 |
|
||||
| 数字按键 | 按下 | 底圆 | star_open_v8 | 60×60-154×154 opacity(0-35) | 200ms | (0.25,0.1,0.25,1) | .star_open_v8 |
|
||||
| | 松手 | 底圆 | star_close_v7 | -206×206 opacity(35-0) | 400ms | (0.25,0.1,0.25,1) | .star_close_v7 |
|
||||
| 密码登录至桌面 | 密码登录至桌面 | 密码页内容 | star_disappear_v17 | | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v17 |
|
||||
| | | 毛玻璃遮罩 | star_fadeOut_v10 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v10c |
|
||||
| | | 桌面内容</br>(除了 dock 栏) | star_appear_v15 | scale(1.1-1) opacity(0-100) | 400ms | (0.25,0.1,0.25,1) | .star_appear_v15 |
|
||||
| | | dock 栏 | star_fadeIn_v6 | | 400ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6f |
|
||||
|
||||
## 组件编辑
|
||||
|
||||
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
|
||||
| :------------------------------------------ | :--------------: | :------------: | :---------------: | :----------------------------------: | :------: | :---------------: | ------------------: |
|
||||
| 唤出/收起组价</br> 编辑面板 | 唤出 | 组件编辑面板 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
|
||||
| | | 所有卸载按钮 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
|
||||
| | | 时间组件底板 | star_fadeOut_v11 | opacity(10-0) | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v11 |
|
||||
| | | 上方按钮组 | star_disappear_v4 | | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v4a |
|
||||
| | 收起 | 组件编辑面板 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
|
||||
| | | 所有卸载按钮 | star_fadeIn_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6e |
|
||||
| | omp | 时间组件底板 | star_fadeIn_v11 | opacity(0-10) | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v11 |
|
||||
| | | 上方按钮组 | star_appear_v5 | | 300ms | (0.25,0.1,0.25,1) | .star_appear_v5a |
|
||||
| 唤出/收起全部</br> 应用面板 | 唤出 | 全部应用面板 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
|
||||
| | | 组件编辑面板 | star_close_v8 | opacity(100-50) scale(1-0.9) Y:-32px | 300ms | (0.25,0.1,0.25,1) | .star_close_v8 |
|
||||
| | 收起 | 全部应用面板 | star_moveY | 无法确定位移参数 | 300ms | (0.32,0.2,0.1,1) |
|
||||
| | | 组件编辑面板 | star_open_v9 | opacity(50-100) scale(0.9-1) Y:32px | 300ms | (0.25,0.1,0.25,1) | .star_open_v9 |
|
||||
| 全部应用点击定位至</br>组件编辑页对应组件处 | 定位至对应组件处 | 全部应用面板 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
|
||||
| | | 组件编辑面板 | star_open_v9 | | 400ms | (0.25,0.1,0.25,1) | .star_open_v9a |
|
||||
| | | 组件编辑页内容 | star_moveY | 无法确定位移参数 | 450ms | (0.25,0.1,0.25,1) |
|
||||
| 拖拽组件至桌面并放置 | 选中组件 | 被选中的组件 | star_fadeIn_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6e |
|
||||
| | 拖动组件 | 被拖拽组件 | star_fadeOut_v6 | | 350ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6m |
|
||||
| | | 组件编辑面板 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
|
||||
| | 放置组件 | 对应组件 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
|
||||
|
||||
## 个性化配置
|
||||
|
||||
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
|
||||
| :----------------------- | :-----------------------: | :-----------------------------: | :----------------: | :-----------------------: | :------: | :---------------: | ------------------: |
|
||||
| 唤出/收起</br>个性化面板 | 同组件编辑 | | | | | |
|
||||
| 切换标签页 | 切换到右边 tab 页 | 当前页内容 | star_disappear_v18 | X:-80px opacity(100-0) | 250ms | (0.25,0.1,0.25,1) | .star_disappear_v18 |
|
||||
| | | 下一页内容 | star_appear_v16 | X:-80px opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_appear_v16 |
|
||||
| | 切换到左边 tab 页 | 当前页内容 | star_disappear_v19 | X:80px opacity(100-0) | 250ms | (0.25,0.1,0.25,1) | .star_disappear_v19 |
|
||||
| | | 下一页内容 | star_appear_v17 | X:80px opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_appear_v17 |
|
||||
| 图标调整-联动控制 | 调整图标大小 | 图标 | star_size_v10 | 88×88-120×120 | | | .star_size_v10 |
|
||||
| | 调整应用名称</br>文字大小 | 文字 | star_size_v11 | font-star_size(16pt-28pt) | | | .star_size_v11 |
|
||||
| 进入/退出壁纸预览页 | 进入 | 被点击的壁纸 | star_open | 位移参数无法确定 | 350ms | (0.25,0.1,0.25,1) |
|
||||
| | | 预览页壁纸缩略</br>图阵列(整体) | star_appear_v18 | X:-500px opacity(0-100) | 400ms | (0.25,0.1,0.25,1) | .star_appear_v18 |
|
||||
| | | 预览页应用按钮 | star_fadeIn_v6 | | 400ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6f |
|
||||
| | | 预览页顶部返回</br>按钮 | star_fadeIn_v6 | | 400ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6f |
|
||||
| | 退出 | 当前页面 | star_moveX_v10 | 1200px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v10 |
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement} from 'lit/decorators.js'
|
||||
import {animation} from './animation-styles'
|
||||
import '../button/button'
|
||||
|
||||
@customElement('star-animation')
|
||||
export class StarAnimation extends LitElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [animation]
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<label>
|
||||
<span class="title">press free background</span>
|
||||
<div class="press"></div>
|
||||
<div class="free"></div>
|
||||
<div class="background_v1"></div>
|
||||
<div class="background_v2"></div>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<span class="title">contraction</span>
|
||||
<div class="contraction_v1"></div>
|
||||
<div class="contraction_v2"></div>
|
||||
<div class="contraction_v3"></div>
|
||||
<div class="contraction_v4"></div>
|
||||
<div class="contraction_v5"></div>
|
||||
<div class="contraction_v6"></div>
|
||||
<div class="contraction_v7"></div>
|
||||
<div class="contraction_v8"></div>
|
||||
<div class="contraction_v9"></div>
|
||||
</label>
|
||||
|
||||
<label class="expansion">
|
||||
<span class="title">expansion</span>
|
||||
<div class="expansion_v1"></div>
|
||||
<div class="expansion_v2"></div>
|
||||
<div class="expansion_v3"></div>
|
||||
<div class="expansion_v4"></div>
|
||||
<div class="expansion_v5"></div>
|
||||
</label>
|
||||
|
||||
<label class="fadeIn">
|
||||
<span class="title">fadeIn</span>
|
||||
<div class="fadeIn_v1"></div>
|
||||
<div class="fadeIn_v2"></div>
|
||||
<div class="fadeIn_v3"></div>
|
||||
<div class="fadeIn_v4"></div>
|
||||
<div class="fadeIn_v5"></div>
|
||||
<div class="fadeIn_v6"></div>
|
||||
<div class="fadeIn_v7"></div>
|
||||
<div class="fadeIn_v8"></div>
|
||||
<div class="fadeIn_v9"></div>
|
||||
<div class="fadeIn_v10"></div>
|
||||
<div class="fadeIn_v11"></div>
|
||||
</label>
|
||||
|
||||
<label class="fadeOut">
|
||||
<span class="title">fadeOut</span>
|
||||
<div class="fadeOut_v1"></div>
|
||||
<div class="fadeOut_v2"></div>
|
||||
<div class="fadeOut_v3"></div>
|
||||
<div class="fadeOut_v4"></div>
|
||||
<div class="fadeOut_v5"></div>
|
||||
<div class="fadeOut_v6"></div>
|
||||
<div class="fadeOut_v7"></div>
|
||||
<div class="fadeOut_v8"></div>
|
||||
<div class="fadeOut_v9"></div>
|
||||
<div class="fadeOut_v10"></div>
|
||||
<div class="fadeOut_v11"></div>
|
||||
</label>
|
||||
|
||||
<label class="open">
|
||||
<span class="title">open</span>
|
||||
<div class="open_v1"></div>
|
||||
<div class="open_v2"></div>
|
||||
<div class="open_v3"></div>
|
||||
<div class="open_v4"></div>
|
||||
<div class="open_v5">A</div>
|
||||
<div class="open_v6"></div>
|
||||
<div class="open_v7"></div>
|
||||
<div class="open_v8"></div>
|
||||
<div class="open_v9"></div>
|
||||
</label>
|
||||
|
||||
<label class="close">
|
||||
<span class="title">close</span>
|
||||
<div class="close_v1"></div>
|
||||
<div class="close_v2"></div>
|
||||
<div class="close_v3"></div>
|
||||
<div class="close_v4"></div>
|
||||
<div class="close_v5">A</div>
|
||||
<div class="close_v6"></div>
|
||||
<div class="close_v7"></div>
|
||||
<div class="close_v8"></div>
|
||||
</label>
|
||||
|
||||
<label class="moveX">
|
||||
<span class="title">moveX</span>
|
||||
<div class="moveX_v1"></div>
|
||||
<div class="moveX_v2"></div>
|
||||
<div class="moveX_v3"></div>
|
||||
<div class="moveX_v4"></div>
|
||||
<div class="moveX_v5"></div>
|
||||
<div class="moveX_v6"></div>
|
||||
<div class="moveX_v7"></div>
|
||||
<div class="moveX_v8"></div>
|
||||
<div class="moveX_v9"></div>
|
||||
<div class="moveX_v10"></div>
|
||||
</label>
|
||||
|
||||
<label class="moveY">
|
||||
<span class="title">moveY</span>
|
||||
<div class="moveY_v1"></div>
|
||||
<div class="moveY_v2"></div>
|
||||
<div class="moveY_v3"></div>
|
||||
<div class="moveY_v4"></div>
|
||||
<div class="moveY_v5"></div>
|
||||
<div class="moveY_v6"></div>
|
||||
<div class="moveY_v7"></div>
|
||||
<div class="moveY_v8"></div>
|
||||
</label>
|
||||
|
||||
<label class="appear">
|
||||
<span class="title">appear</span>
|
||||
<div class="appear_v1"></div>
|
||||
<div class="appear_v2"></div>
|
||||
<div class="appear_v3"></div>
|
||||
<div class="appear_v4"></div>
|
||||
<div class="appear_v5"></div>
|
||||
<div class="appear_v6"></div>
|
||||
<div class="appear_v7"></div>
|
||||
<div class="appear_v8"></div>
|
||||
<div class="appear_v9"></div>
|
||||
<div class="appear_v10"></div>
|
||||
<div class="appear_v11"></div>
|
||||
<div class="appear_v12"></div>
|
||||
<div class="appear_v13"></div>
|
||||
<div class="appear_v14"></div>
|
||||
<div class="appear_v15"></div>
|
||||
<div class="appear_v16"></div>
|
||||
<div class="appear_v17"></div>
|
||||
<div class="appear_v18"></div>
|
||||
</label>
|
||||
|
||||
<label class="disappear">
|
||||
<span class="title">disappear</span>
|
||||
<div class="disappear_v1"></div>
|
||||
<div class="disappear_v2"></div>
|
||||
<div class="disappear_v3"></div>
|
||||
<div class="disappear_v4"></div>
|
||||
<div class="disappear_v5"></div>
|
||||
<div class="disappear_v6"></div>
|
||||
<div class="disappear_v7"></div>
|
||||
<div class="disappear_v8"></div>
|
||||
<div class="disappear_v9"></div>
|
||||
<div class="disappear_v10"></div>
|
||||
<div class="disappear_v11"></div>
|
||||
<div class="disappear_v12"></div>
|
||||
<div class="disappear_v13"></div>
|
||||
<div class="disappear_v14"></div>
|
||||
<div class="disappear_v15"></div>
|
||||
<div class="disappear_v16"></div>
|
||||
<div class="disappear_v17"></div>
|
||||
<div class="disappear_v18"></div>
|
||||
<div class="disappear_v19"></div>
|
||||
</label>
|
||||
|
||||
<label class="size">
|
||||
<span class="title">size</span>
|
||||
<div class="size_v1"></div>
|
||||
<div class="size_v2"></div>
|
||||
<div class="size_v3"></div>
|
||||
<div class="size_v4"></div>
|
||||
<div class="size_v5"></div>
|
||||
<div class="size_v6"></div>
|
||||
<div class="size_v7"></div>
|
||||
<div class="size_v8"></div>
|
||||
</label>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'star-animation': StarAnimation
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,5 +1,6 @@
|
|||
import {html} from 'lit'
|
||||
|
||||
/********************复杂SVG***************************/
|
||||
// 主题
|
||||
export const store = html`
|
||||
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
@ -234,6 +235,8 @@ export const privacy = html`
|
|||
</defs>
|
||||
</svg>
|
||||
`
|
||||
|
||||
/********************单色SVG***************************/
|
||||
// 删除, 类'-', 删除角标中使用
|
||||
export const deletecorner = html`
|
||||
<svg viewBox="0 0 24 4" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
# 基类文件
|
||||
|
||||
## 基类样式 - base-style.ts
|
||||
## 基类样式 - bases-style.ts
|
||||
|
||||
存放基础样式，包括 light 模式和 dark 模式。
|
||||
组件说明:存放基础样式，包括 light 模式、 dark 模式、主题模式(主要分为清爽风和商务风，目前仅做出了商务风)和主题色模式。
|
||||
|
||||
## 基类元素 - star-base-element.ts
|
||||
|
||||
|
|
@ -11,3 +11,33 @@
|
|||
- 引入基类根样式、主题样式
|
||||
- 用于管理可重用的部件、模块
|
||||
- 放置基类抽象函数, 应用于主题模式、多语言切换等
|
||||
|
||||
## 设计说明：
|
||||
|
||||
* 为缩短变量名，将对打头的css属性进行简写。
|
||||
*
|
||||
* 缩写规则：
|
||||
* bor = border
|
||||
* br = border-radius
|
||||
* btn = button
|
||||
* bgc = background-color
|
||||
*
|
||||
* 模块划分原则：
|
||||
* 基础模块 - 基础模块存放具有通用意义的变量
|
||||
* 星光组件模块 - 按照星光组件的具体模块进行变量的逐个编写
|
||||
* 主屏小组件模块 - 按照具体模块逐个编写
|
||||
* 深色模式 - 存放深色模式独有(浅色模式即为root中的默认值)
|
||||
* 主题模式 -
|
||||
*
|
||||
* 比如： --bgc-button 在浅色模式下背景色为：#ffffff, 在深色模式下为：#000000；
|
||||
* 按照如下格式书写：
|
||||
* :root {
|
||||
* --bgc-button: #ffffff;
|
||||
* --bgc-button-dm: #000000;
|
||||
* }
|
||||
* @media (prefers-color-scheme: dark) {
|
||||
* --bgc-button: var(--bgc-button-dm);
|
||||
* }
|
||||
*
|
||||
* 注意颜色变量若使用到的是主题色，检索本文档对应主题色，再使用对应的主题色变量。
|
||||
*
|
||||
|
|
|
|||
|
|
@ -8,36 +8,49 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-12px: calc(12px / var(--hostDevicePixelRatio));
|
||||
--auto-14px: calc(14px / var(--hostDevicePixelRatio));
|
||||
--auto-15px: calc(15px / var(--hostDevicePixelRatio));
|
||||
--auto-16px: calc(16px / var(--hostDevicePixelRatio));
|
||||
--auto-18px: calc(18px / var(--hostDevicePixelRatio));
|
||||
--auto-24px: calc(24px / var(--hostDevicePixelRatio));
|
||||
--auto-26px: calc(26px / var(--hostDevicePixelRatio));
|
||||
--auto-25_6px: calc(25.6px / 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));
|
||||
--auto-37_33px: calc(37.33px / var(--hostDevicePixelRatio));
|
||||
--auto-38_4px: calc(38.4px / var(--hostDevicePixelRatio));
|
||||
--auto-40px: calc(40px / var(--hostDevicePixelRatio));
|
||||
--auto-44_8px: calc(44.8px / var(--hostDevicePixelRatio));
|
||||
--auto-46_67px: calc(46.67px / var(--hostDevicePixelRatio));
|
||||
--auto-48px: calc(48px / var(--hostDevicePixelRatio));
|
||||
--auto-50px: calc(50px / var(--hostDevicePixelRatio));
|
||||
--auto-56px: calc(56px / var(--hostDevicePixelRatio));
|
||||
--auto-57_6px: calc(57.6px / var(--hostDevicePixelRatio));
|
||||
--auto-64px: calc(64px / var(--hostDevicePixelRatio));
|
||||
--auto-66px: calc(66px / var(--hostDevicePixelRatio));
|
||||
--auto-76px: calc(76px / var(--hostDevicePixelRatio));
|
||||
--auto-80px: calc(80px / var(--hostDevicePixelRatio));
|
||||
--auto-88px: calc(88px / var(--hostDevicePixelRatio));
|
||||
--auto-92px: calc(92px / var(--hostDevicePixelRatio));
|
||||
--auto-96px: calc(96px / var(--hostDevicePixelRatio));
|
||||
--auto-112px: calc(112px / var(--hostDevicePixelRatio));
|
||||
--auto-128px: calc(128px / var(--hostDevicePixelRatio));
|
||||
--auto-152px: calc(152px / var(--hostDevicePixelRatio));
|
||||
--auto-176px: calc(176px / var(--hostDevicePixelRatio));
|
||||
--auto-200px: calc(200px / var(--hostDevicePixelRatio));
|
||||
--auto-201px: calc(201px / var(--hostDevicePixelRatio));
|
||||
--auto-206px: calc(206px / var(--hostDevicePixelRatio));
|
||||
--auto-208px: calc(208px / var(--hostDevicePixelRatio));
|
||||
--auto-260px: calc(260px / var(--hostDevicePixelRatio));
|
||||
--auto-310px: calc(310px / var(--hostDevicePixelRatio));
|
||||
--auto-312px: calc(312px / var(--hostDevicePixelRatio));
|
||||
--auto-320px: calc(320px / var(--hostDevicePixelRatio));
|
||||
--auto-334px: calc(334px / var(--hostDevicePixelRatio));
|
||||
--auto-368px: calc(368px / var(--hostDevicePixelRatio));
|
||||
--auto-418px: calc(418px / var(--hostDevicePixelRatio));
|
||||
--auto-440px: calc(440px / var(--hostDevicePixelRatio));
|
||||
--auto-520px: calc(520px / var(--hostDevicePixelRatio));
|
||||
--auto-25_6px: calc(25.6px / var(--hostDevicePixelRatio));
|
||||
--auto-37_33px: calc(37.33px / var(--hostDevicePixelRatio));
|
||||
--auto-38_4px: calc(38.4px / var(--hostDevicePixelRatio));
|
||||
--auto-44_8px: calc(44.8px / var(--hostDevicePixelRatio));
|
||||
--auto-46_67px: calc(46.67px / var(--hostDevicePixelRatio));
|
||||
--auto-57_6px: calc(57.6px / var(--hostDevicePixelRatio));
|
||||
--auto-607px: calc(607px / var(--hostDevicePixelRatio));
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -0,0 +1,804 @@
|
|||
import {css, CSSResultArray} from 'lit'
|
||||
|
||||
/**
|
||||
* 为缩短变量名，将对打头的css属性进行简写。
|
||||
*
|
||||
* 缩写规则：
|
||||
* bor = border
|
||||
* br = border-radius
|
||||
* btn = button
|
||||
* bgc = background-color
|
||||
* bs = box-shadow
|
||||
*
|
||||
* 模块划分原则：
|
||||
* 基础模块 - 基础模块存放具有通用意义的变量
|
||||
* 星光组件模块 - 按照星光组件的具体模块进行变量的逐个编写
|
||||
* 主屏小组件模块 - 按照具体模块逐个编写
|
||||
* 深色模式 - 存放深色模式独有(浅色模式即为root中的默认值)
|
||||
* 主题模式 -
|
||||
*
|
||||
* 比如： --bgc-button 在浅色模式下背景色为：#ffffff, 在深色模式下为：#000000；
|
||||
* 按照如下格式书写：
|
||||
* :root {
|
||||
* --bgc-button: #ffffff;
|
||||
* --bgc-button-dm: #000000;
|
||||
* }
|
||||
* @media (prefers-color-scheme: dark) {
|
||||
* --bgc-button: var(--bgc-button-dm);
|
||||
* }
|
||||
*
|
||||
* 注意颜色变量若使用到的是主题色，检索本文档对应主题色，再使用对应的主题色变量。
|
||||
*
|
||||
*/
|
||||
|
||||
const baseStyle = css`
|
||||
:root {
|
||||
--devicePixelRatio: 2;
|
||||
--text-font-family: 'OPPPSans';
|
||||
|
||||
/*****************************线性渐变*************************************/
|
||||
--gradient-black: linear-gradient(180deg, #83eea1 0%, #24ba8d 100%);
|
||||
--gradient-black-2: linear-gradient(
|
||||
140.95deg,
|
||||
#000000 24.83%,
|
||||
#515c62 49.69%,
|
||||
#000000 74.91%
|
||||
);
|
||||
--gradient-black-3: linear-gradient(180deg, #49538a -4.16%, #21264f 100%);
|
||||
--gradient-blue: linear-gradient(180deg, #36ccea 0%, #2785ba 100%);
|
||||
--gradient-blue-2: linear-gradient(180deg, #43b0f0 0%, #2387da 100%);
|
||||
--gradient-blue-3: linear-gradient(180deg, #6addf3 0%, #2a95d1 100%);
|
||||
--gradient-dark-blue: linear-gradient(270deg, #91fff2 0%, #009bf5 100%);
|
||||
--gradient-green: linear-gradient(180deg, #49df73 0%, #14a97c 100%);
|
||||
--gradient-green-2: linear-gradient(
|
||||
180deg,
|
||||
#4ed35b 0%,
|
||||
rgba(12, 153, 36, 0.82) 100%
|
||||
);
|
||||
--gradient-green-3: linear-gradient(
|
||||
152.36deg,
|
||||
#6be4d0 8.74%,
|
||||
#10a775 82.29%
|
||||
);
|
||||
--gradient-orange: linear-gradient(180deg, #f2c655 0%, #d38740 100%);
|
||||
--gradient-orange-2: linear-gradient(180deg, #fcda84 0%, #ef9b4d 100%);
|
||||
--gradient-gold: linear-gradient(180deg, #ebc965 0%, #d9aa38 100%);
|
||||
--gradient-purple: linear-gradient(180deg, #7376ce 0%, #503daf 100%);
|
||||
--gradient-red: linear-gradient(180deg, #ee815e 0%, #e15033 100%);
|
||||
--gradient-deep-purple: linear-gradient(
|
||||
135deg,
|
||||
#8e2de2 14.65%,
|
||||
#4a00e0 85.35%
|
||||
);
|
||||
--gradient-green2cyan: linear-gradient(180deg, #83eea1 0%, #24ba8d 100%);
|
||||
--gradient-silver: linear-gradient(180deg, #e6e6e6 17.81%, #b8b8b8 82.29%);
|
||||
--gradient-white2gray: linear-gradient(
|
||||
137.64deg,
|
||||
#f5f0f5 0%,
|
||||
#fafafa 20.46%,
|
||||
#d5daf2 90.45%
|
||||
);
|
||||
--gradient-blackout: linear-gradient(
|
||||
131.48deg,
|
||||
rgba(71, 71, 71, 0.8) 7.8%,
|
||||
rgba(20, 20, 20, 0.8) 87.95%
|
||||
);
|
||||
--gradient-blackout-vertical: linear-gradient(
|
||||
147.15deg,
|
||||
rgba(20, 20, 20, 0.8) 23.26%,
|
||||
rgba(77, 77, 77, 0.8) 89.93%
|
||||
);
|
||||
--gradient-pale: linear-gradient(
|
||||
180deg,
|
||||
rgba(251, 251, 251, 0.65) 25.7%,
|
||||
rgba(218, 218, 218, 0.65) 75.14%
|
||||
);
|
||||
--gradient-shallow: linear-gradient(
|
||||
134.78deg,
|
||||
#f7f5f7 2.34%,
|
||||
#fafafa 34.11%,
|
||||
#e1e4f2 100%
|
||||
);
|
||||
--gradient-deep: linear-gradient(101.98deg, #4e5161 1.12%, #363a47 96.75%);
|
||||
--gradient-light-yellow: linear-gradient(
|
||||
126.33deg,
|
||||
#fffbf2 13.54%,
|
||||
#ede6d8 100%
|
||||
);
|
||||
--gradient-silvery-white: linear-gradient(
|
||||
193.07deg,
|
||||
rgba(182, 224, 255, 0.16) 5.07%,
|
||||
rgba(182, 224, 255, 0.0592) 100.51%
|
||||
);
|
||||
--gradient-clock-black: linear-gradient(
|
||||
145.7deg,
|
||||
rgba(179, 193, 242, 0.8) 16.24%,
|
||||
rgba(122, 130, 161, 0.8) 94.91%
|
||||
);
|
||||
--gradient-clock-border: linear-gradient(
|
||||
rgba(217, 195, 147, 1),
|
||||
rgba(217, 201, 165, 0.45)
|
||||
);
|
||||
|
||||
/*****************************径向渐变*************************************/
|
||||
--angular-gradient-yellow: angular-gradient(
|
||||
rgba(223, 176, 82),
|
||||
rgba(228, 201, 89)
|
||||
);
|
||||
--angular-gradient-blue: angular-gradient(
|
||||
rgba(86, 91, 232),
|
||||
rgba(55, 221, 240)
|
||||
);
|
||||
--angular-gradient-yellow-2: angular-gradient(
|
||||
rgba(230, 178, 57),
|
||||
rgba(232, 200, 72)
|
||||
);
|
||||
--radial-gradient-white2purple: radial-gradient(
|
||||
60.05% 60.05% at 12.24% 12.74%,
|
||||
#f7f9ff 0%,
|
||||
#c6d1f5 100%
|
||||
);
|
||||
--radial-gradient-grey2blue: radial-gradient(
|
||||
79.48% 79.48% at 0% 15.05%,
|
||||
#a9b9d4 0%,
|
||||
#5d78a6 100%
|
||||
);
|
||||
--radial-gradient-dark-grey: radial-gradient(
|
||||
102.32% 100% at 0% 0%,
|
||||
#7890ab 0%,
|
||||
#21364d 100%
|
||||
);
|
||||
--radial-gradient-silver-grey: radial-gradient(
|
||||
133.12% 125.53% at -21.25% 0%,
|
||||
#b1bfd8 0%,
|
||||
#5e77a1 100%
|
||||
);
|
||||
--radial-gradient-silver-blue: radial-gradient(
|
||||
60.44% 448.77% at 3.78% 14.69%,
|
||||
#54588e 0%,
|
||||
#282b57 100%
|
||||
);
|
||||
--radial-gradient-black: radial-gradient(
|
||||
64.66% 57.07% at 19.37% 18.18%,
|
||||
#4b4e52 0%,
|
||||
#302f33 100%
|
||||
);
|
||||
--radial-gradient-black-2: radial-gradient(
|
||||
rgba(230, 225, 225, 0.85),
|
||||
rgba(232, 246, 255),
|
||||
rgba(204, 211, 219, 0.85)
|
||||
);
|
||||
--radial-gradient-clock-black: radial-gradient(
|
||||
46.11% 46.11% at 29.45% 23.09%,
|
||||
rgba(64, 70, 89, 0.8) 0%,
|
||||
rgba(36, 40, 56, 0.8) 100%
|
||||
);
|
||||
|
||||
/*****************************黑色透明*************************************/
|
||||
--opacity-black-04: rgba(0, 0, 0, 0.04);
|
||||
--opacity-black-06: rgba(0, 0, 0, 0.06);
|
||||
--opacity-black-08: rgba(0, 0, 0, 0.08);
|
||||
--opacity-black-09: rgba(0, 0, 0, 0.09);
|
||||
--opacity-black-10: rgba(0, 0, 0, 0.1);
|
||||
--opacity-black-12: rgba(0, 0, 0, 0.12);
|
||||
--opacity-black-15: rgba(0, 0, 0, 0.15);
|
||||
--opacity-black-25: rgba(0, 0, 0, 0.25);
|
||||
--opacity-black-30: rgba(0, 0, 0, 0.3);
|
||||
/****************************浅灰色透明*************************************/
|
||||
--opacity-lig-grey-06: rgba(51, 51, 51, 0.06);
|
||||
--opacity-lig-grey-15: rgba(51, 51, 51, 0.15);
|
||||
/****************************灰色透明*************************************/
|
||||
--opacity-grey-04: rgba(64, 64, 64, 0.4);
|
||||
--opacity-grey-65: rgba(64, 64, 64, 0.65);
|
||||
--opacity-grey-70: rgba(64, 64, 64, 0.7);
|
||||
--opacity-grey-75: rgba(64, 64, 64, 0.75);
|
||||
--opacity-grey-90: rgba(64, 64, 64, 0.9);
|
||||
--opacity-grey-1: rgba(64, 64, 64, 1);
|
||||
/****************************花白色透明*************************************/
|
||||
--opacity-graying-02: rgba(225, 225, 225, 0.2);
|
||||
--opacity-graying-04: rgba(225, 225, 225, 0.4);
|
||||
--opacity-graying-05: rgba(225, 225, 225, 0.5);
|
||||
--opacity-graying-06: rgba(225, 225, 225, 0.6);
|
||||
/****************************浅白色透明*************************************/
|
||||
--opacity-plain-01: rgba(228, 228, 228, 0.1);
|
||||
--opacity-plain-12: rgba(228, 228, 228, 0.12);
|
||||
--opacity-plain-14: rgba(228, 228, 228, 0.14);
|
||||
--opacity-plain-28: rgba(228, 228, 228, 0.28);
|
||||
/****************************白雾色透明*************************************/
|
||||
--opacity-white-fog-78: rgba(247, 247, 247, 0.78);
|
||||
--opacity-white-fog-96: rgba(247, 247, 247, 0.96);
|
||||
/*****************************白色透明*************************************/
|
||||
--opacity-white-06: rgba(255, 255, 255, 0.06);
|
||||
--opacity-white-09: rgba(255, 255, 255, 0.09);
|
||||
--opacity-white-10: rgba(255, 255, 255, 0.1);
|
||||
--opacity-white-12: rgba(255, 255, 255, 0.12);
|
||||
--opacity-white-14: rgba(255, 255, 255, 0.14);
|
||||
--opacity-white-15: rgba(255, 255, 255, 0.15);
|
||||
--opacity-white-20: rgba(255, 255, 255, 0.2);
|
||||
--opacity-white-25: rgba(255, 255, 255, 0.25);
|
||||
--opacity-white-40: rgba(255, 255, 255, 0.4);
|
||||
--opacity-white-55: rgba(255, 255, 255, 0.55);
|
||||
--opacity-white-68: rgba(255, 255, 255, 0.68);
|
||||
--opacity-white-75: rgba(255, 255, 255, 0.75);
|
||||
--opacity-white-1: rgba(255, 255, 255, 1);
|
||||
/*******************************纯色***************************************/
|
||||
--pure-white: rgba(255, 255, 255);
|
||||
--pure-black: rgba(0, 0, 0);
|
||||
/*******************************基础色**************************************/
|
||||
/* 底色/base白 */
|
||||
--base-white: #fafafa;
|
||||
/* 底色/base黑 */
|
||||
--base-black: #110101; //////提交时更新
|
||||
/****************************主题色汇总*************************************/
|
||||
/* /主题色/紫 */
|
||||
--theme-purple: #8c66ff;
|
||||
/* 主题色/深蓝 */
|
||||
--theme-dark-blue: #4a7ef8;
|
||||
/* 主题色/蓝 */
|
||||
--theme-blue: #1d98f0;
|
||||
/* 主题色/青 */
|
||||
--theme-cyan: #00c6c6;
|
||||
/* 主题色/绿 */
|
||||
--theme-green: #3ac668;
|
||||
/* 主题色/黄 */
|
||||
--theme-yellow: #f5c125;
|
||||
/* 主题色/橙黄 */
|
||||
--theme-orange: #fe9d09;
|
||||
/* 主题色/红 */
|
||||
--theme-red: #ec4949;
|
||||
/* 主题色/橙红 */
|
||||
--theme-orange-red: #f36f43;
|
||||
/* 主题色/粉 */
|
||||
--theme-toner: #e362bc;
|
||||
/* 主题色/黄金渐变 */
|
||||
--theme-gold-gradient: var(--gradient-gold);
|
||||
/* 主题色/蓝色渐变 */
|
||||
--theme-blue-gradient: var(--gradient-blue-2);
|
||||
/* 主题色/紫色渐变 */
|
||||
--theme-purple-gradient: var(--gradient-purple);
|
||||
/* 主题色/绿色渐变 */
|
||||
--theme-green-gradient: var(--gradient-green-2);
|
||||
/* 主题色/红色渐变 */
|
||||
--theme-red-gradient: var(--gradient-red);
|
||||
/****************************主题色的透明色*************************************/
|
||||
--theme-blue-opacity-12: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.12),
|
||||
rgba(0, 0, 0, 0.12)
|
||||
),
|
||||
var(--theme-blue);
|
||||
--theme-red-opacity-12: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.12),
|
||||
rgba(0, 0, 0, 0.12)
|
||||
),
|
||||
var(--theme-red);
|
||||
--theme-green-opacity-12: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.12),
|
||||
rgba(0, 0, 0, 0.12)
|
||||
),
|
||||
var(--theme-green);
|
||||
/****************************文字颜色*************************************/
|
||||
/* 文字/正文白 */
|
||||
--font-main-white: #f0f0f0;
|
||||
/* 文字/正文黑 */
|
||||
--font-main-black: #262626;
|
||||
/* 文字/底色黑 */
|
||||
--font-base-black: var(--pure-black);
|
||||
/* 文字/底色白 */
|
||||
--font-base-white: rgba(245, 245, 245, 1);
|
||||
/* 文字/高亮白 */
|
||||
--font-highlight-white: var(--base-white);
|
||||
/* 文字/标题黑 */
|
||||
--font-heading-black: #4d4d4d;
|
||||
/* 文字/通知字-黑 */
|
||||
--font-notice-black: #404040;
|
||||
/* 文字/辅助通知-黑 */
|
||||
--font-aucnotice-black: var(--opacity-grey-65);
|
||||
/* 文字/辅助字-黑 */
|
||||
--font-auxiliary-black: rgba(38, 38, 38, 0.5);
|
||||
/* 文字/辅助字-白 */
|
||||
--font-auxiliary-white: rgba(245, 245, 245, 0.5);
|
||||
/* 文字/辅助字-浅黑 */
|
||||
--font-auxiliary-ligblack: rgba(38, 38, 38, 0.4);
|
||||
/* 文字/辅助字-蓝 */
|
||||
--font-auxiliary-blue: rgba(33, 149, 237);
|
||||
/* 文字/辅助字-黄 */
|
||||
--font-auxiliary-yellow: rgba(224, 188, 117, 1);
|
||||
/* 文字/次辅助字-黑 */
|
||||
--font-sec-auxiliary-black: rgba(38, 38, 38, 0.45);
|
||||
/* 文字/次辅助字-白 */
|
||||
--font-sec-auxiliary-white: rgba(240, 240, 240, 0.45);
|
||||
/* 文字/提示字-黑 */
|
||||
--font-prompt-black: rgba(38, 38, 38, 0.35);
|
||||
/* 文字/正文次黑 */
|
||||
--font-secondary-black: var(--opacity-grey-65);
|
||||
/* 文字/正文次白 */
|
||||
--font-secondary-white: #e0e0e0;
|
||||
/* 文字/渐变黑 */
|
||||
--font-gradient-black: var(--gradient-black);
|
||||
/* 文字/渐变银 */
|
||||
--font-gradient-silver: var(--gradient-silver);
|
||||
/****************************文字尺寸*************************************/
|
||||
/* 字体/超小尺寸/ */
|
||||
--font-ultrasmall-size: var(--auto-20px);
|
||||
/* 字体/小尺寸/禁用和正常 */
|
||||
--font-small-size: var(--auto-28px);
|
||||
/* 字体/小尺寸/按下 */
|
||||
--font-small-pressed-size: var(--auto-25_2px);
|
||||
/* 字体/中尺寸/禁用和正常 */
|
||||
--font-middle-size: var(--auto-32px);
|
||||
/* 字体/中尺寸/按下 */
|
||||
--font-middle-pressed-size: var(--auto-28_8px);
|
||||
/* 字体/大尺寸/禁用和正常 */
|
||||
--font-large-size: var(--auto-34px);
|
||||
/* 字体/中尺寸/按下 */
|
||||
--font-large-pressed-size: var(--auto-30_6px);
|
||||
/* 字体/TimePicker选中 */
|
||||
--font-select-size: var(--auto-36px);
|
||||
|
||||
/* 线性图标/32及以下-常规黑 */
|
||||
--linear-icon32-black: #333333;
|
||||
/* 线性图标/48及以上-常规黑 */
|
||||
--linear-icon-black: #4d4d4d;
|
||||
/* 线性图标/常规白 */
|
||||
--linear-icon-white: #f4f4f4;
|
||||
/* 线性图标/选中白(纯白) */
|
||||
--linear-icon-check-white: var(--pure-white);
|
||||
/* 线性图标/未选中白 */
|
||||
--linear-unchecked-white: #d1d1d1;
|
||||
|
||||
/* 全/高斯蒙层-浅 */
|
||||
--bgc-gauss-mask: rgba(217, 217, 217, 0.65);
|
||||
--bgc-gauss-mask-dm: rgba(89, 89, 89, 0.68);
|
||||
--gauss-mask-backdrop-filter: blur(60px);
|
||||
|
||||
/* 全/弹窗遮罩 */
|
||||
--full-pop-up-mask: rgba(24, 24, 24, 0.35);
|
||||
|
||||
/********************************共用***************************************/
|
||||
/* 全/radio */
|
||||
--bgc-radio-off: rgba(38, 38, 38, 0.25);
|
||||
--bgc-radio-on: rgba(29, 152, 240, 1);
|
||||
--bgc-radio-off-bor: var(--auto-3px) solid var(--bgc-radio-off);
|
||||
--bgc-radio-on-bor: var(--auto-9px) solid var(--bgc-radio-on);
|
||||
/* 全/Toggele */
|
||||
--bgc-toggele-on: rgba(29, 152, 240);
|
||||
--bgc-radio-bor: var(--auto-19px);
|
||||
/* 全/checkbox */
|
||||
--bgc-checkbox-on: rgba(29, 152, 240);
|
||||
--bgc-radio-on-bor: var(--auto-5px);
|
||||
/* 全/hover */
|
||||
--bgc-gray-button-pressed: var(--opacity-lig-grey-15);
|
||||
}
|
||||
`
|
||||
|
||||
/**
|
||||
* 基础组件所需变量
|
||||
*/
|
||||
const baseComponentStyle = css`
|
||||
:root {
|
||||
/************Button按钮****************/
|
||||
--br-btn-normal-small: var(--auto-34px);
|
||||
--br-btn-normal-middle: var(--auto-40px);
|
||||
--br-btn-normal-large: var(--auto-50px);
|
||||
--br-btn-pure-small: var(--auto-32px);
|
||||
--br-btn-pure-middle: var(--auto-40px);
|
||||
--br-btn-pure-large: var(--auto-48px);
|
||||
--bgc-btn-noraml: var(--opacity-lig-grey-06);
|
||||
--bgc-btn-noraml-dm: var(--opacity-plain-12);
|
||||
--bgc-btn-noraml-pressed: var(--opacity-lig-grey-15);
|
||||
--bgc-btn-noraml-pressed-dm: var(--opacity-plain-28);
|
||||
--bgc-btn-normal-primary: var(--theme-blue);
|
||||
--bgc-btn-normal-primary-pressed: var(--theme-blue-opacity-12);
|
||||
--bgc-btn-pure: var(--opacity-white-fog-78);
|
||||
--bgc-btn-pure-dm: var(--opacity-grey-75);
|
||||
--bgc-btn-pure-pressed: var(--opacity-white-fog-96);
|
||||
--bgc-btn-pure-pressed-dm: var(--opacity-grey-90);
|
||||
--bgc-btn-pure-default: var(--linear-icon-white);
|
||||
--bgc-btn-pure-default-dm: var(--opacity-grey-04);
|
||||
--bgc-btn-text-pressed: var(--opacity-black-06);
|
||||
--bgc-btn-text-pressed-dm: var(--opacity-white-12);
|
||||
--bgc-btn-icon-pressed: var(--opacity-black-06);
|
||||
--bgc-btn-icon-pressed-dm: var(--opacity-white-12);
|
||||
--bgc-btn-ghost: rgba(38, 38, 38, 0.2);
|
||||
--bgc-btn-ghost-dm: var(--opacity-white-20);
|
||||
--bgc-btn-special-delete: var(--opacity-white-75);
|
||||
--bgc-btn-special-delete-dm: #666666;
|
||||
--bgc-btn-special-delete-icon: var(--font-notice-black);
|
||||
--bgc-btn-special-delete-icon-dm: var(--linear-icon-white);
|
||||
--bgc-btn-specail-hang-up: var(--theme-red);
|
||||
--bgc-btn-specail-answer: var(--opacity-black-12);
|
||||
--bs-btn-special-hang-up: 0 var(--auto-14px) var(--auto-14px) rgba(128, 0, 4, 0.08);
|
||||
--bs-btn-special-answer: 0 var(--auto-14px) var(--auto-14px) rgba(9, 102, 0, 0.08);
|
||||
--bs-btn-special-hang-up-pressed: var(--theme-red-opacity-12);
|
||||
--bs-btn-special-answer-pressed: var(--theme-green-opacity-12);
|
||||
--color-btn-normal-default: var(--font-heading-black);
|
||||
--color-btn-normal-default-dm: var(--font-main-white);
|
||||
--color-btn-pure: var(--font-heading-black);
|
||||
--color-btn-pure-dm: var(--font-main-white);
|
||||
--color-btn-pure-default: var(--linear-icon-black);
|
||||
--color-btn-pure-default-dm: var(--linear-icon-white);
|
||||
--color-btn-text: var(--font-heading-black);
|
||||
--color-btn-text-dm: var(--font-main-white);
|
||||
--color-btn-icon: var(--font-heading-black);
|
||||
--color-btn-icon-dm: var(--font-main-white);
|
||||
--color-btn-special-go-back: var(--font-main-black);
|
||||
--color-btn-special-go-back-dm: var(--font-highlight-white);
|
||||
|
||||
/* Radio */
|
||||
--bor-radio-off: var(--auto-3px) solid rgba(38, 38, 38, 0.25);
|
||||
--bor-radio-off: var(--auto-3px) solid var(--opacity-white-25);
|
||||
/* border/未选中 */
|
||||
--bgc-radio: var(--auto-3px) solid rgba(38, 38, 38, 0.25);
|
||||
--bgc-radio: var(--auto-3px) solid var(--opacity-white-25);
|
||||
/* border/选中 */
|
||||
--bgc-radio-selected: var(--auto-9px) solid var(--theme-blue);
|
||||
|
||||
/* Checxbox */
|
||||
--bor-checkbox-off: var(--auto-3px) solid rgba(38, 38, 38, 0.25);
|
||||
--bor-checkbox-off: var(--auto-3px) solid var(--opacity-white-25);
|
||||
--bor-radius-checkbox: var(--auto-5px);
|
||||
/* Toggle */
|
||||
--bgc-toggle-color: var(--opacity-black-12);
|
||||
--bgc-toggle-color: var(--opacity-white-15);
|
||||
--bor-radius-toggle: var(--auto-19px);
|
||||
/* Tab */
|
||||
--bgc-tab-color: var(--base-white);
|
||||
--bgc-tab-color: var(--opacity-black-25);
|
||||
--bor-radius-tab-small: var(--auto-44_8px);
|
||||
--bor-radius-tab-middle:: var(--auto-56px);
|
||||
/* Toast */
|
||||
--bgc-toast-color: var(--base-white);
|
||||
--bgc-toast-color:#2E2E2E;
|
||||
--bor-toast: var(--auto-1px) solid var(--opacity-white-15);;
|
||||
--bor-toast: var(--auto-1px) solid var(--opacity-black-04);
|
||||
--bor-radius-toast: var(--auto-20px);
|
||||
/* MessageBox */
|
||||
/* 全/分割线-深 */
|
||||
--bor-message:var(--auto-1px) solid var(--opacity-black-09);
|
||||
/* 全/分割线-浅 */
|
||||
--bor-message:var(--auto-1px) solid var(--opacity-white-12);
|
||||
/* SelectMenu */
|
||||
/* 底色/弹窗浅 */
|
||||
--bgc-dialog: var(-gradient-shallow);
|
||||
/* 底色/弹窗深 */
|
||||
--bgc-dialog-dark: var(-gradient-deep);
|
||||
/* Li */
|
||||
--line-height: calc(3 * var(--font-main-size));
|
||||
--li-left-padding: var(--auto-10px);
|
||||
--li-right-padding: var(--auto-10px);
|
||||
--li-base-height: var(--auto-43px);
|
||||
/* Searchbar-搜索底框-黑透/白透 */
|
||||
--lm-bg-searchbox-normal: var(--opacity-black-04);
|
||||
--lm-bg-searchbox-press: var(--opacity-black-10);
|
||||
--dm-bg-searchbox-normal: var(--opacity-white-06);
|
||||
--dm-bg-searchbox-press: var(--opacity-white-14);
|
||||
/* 全/click */
|
||||
--lm-bg-click: var(--opacity-black-06);
|
||||
--dm-bg-click: var(--opacity-white-10);
|
||||
|
||||
/* 全/浮层菜单投影 */
|
||||
--full-menu-projection: var(--auto-1px) var(--auto-3px) var(--auto-8px) var(--opacity-black-15);
|
||||
|
||||
/* 分隔符 */
|
||||
--split-line: #cfd8e8;
|
||||
/* 字体大小和粗细 */
|
||||
--font-main-size: var(--auto-14px);
|
||||
--font-main-weight: bold; /* 400 */
|
||||
/* 倒角 */
|
||||
--base-menu-radius: var(--auto-16px);
|
||||
--base-dialog-radius: var(--auto-20px);
|
||||
--base-border-radius: var(--auto-34px);
|
||||
|
||||
/************控制中心(ControlCenter, cc)**************/
|
||||
/* 控制中心小格子底色 */
|
||||
--bgc-cc-block: var(--theme-blue);
|
||||
/* 底色 */
|
||||
--bgc-control-base: var(--pure-white);
|
||||
--bgc-control-base-dm: var(--opacity-black-15);
|
||||
/* 多端智联 */
|
||||
--bgc-control-terminal: var(--opacity-white-4);
|
||||
--bgc-control-terminal-dm: var(--opacity-black-25);
|
||||
/* 多端智联-绿色渐变 */
|
||||
--bgc-green-gradient: var(--gradient-green2cyan);
|
||||
--bgc-green-gradient-dm: var(--gradient-green);
|
||||
/* 多端智联-蓝色渐变 */
|
||||
--bgc-blue-gradient: var(--gradient-blue-3);
|
||||
--bgc-blue-gradient-dm: var(--gradient-blue);
|
||||
/* 多端智联-黄色渐变 */
|
||||
--bgc-lmorange-gradient: var(--gradient-orange-2);
|
||||
--bgc-lmorange-gradient-dm: var(--gradient-orange);
|
||||
|
||||
/************通知中心(NotifiCenter, nc)**************/
|
||||
--bgc-dialog-notice: var(--opacity-white-55);
|
||||
--bgc-dialog-notice-dm: var(--opacity-black-25);
|
||||
/* lm/绿色渐变 */
|
||||
--bgc-lmgreen-gradient: var(--gradient-green2cyan);
|
||||
/* lm/蓝色渐变 */
|
||||
--bgc-lmblue-gradient: var(--gradient-blue-3);
|
||||
/* lm/橙色渐变 */
|
||||
--bgc-lmorange-gradient: var(--gradient-orange-2);
|
||||
/* Bullet frame */
|
||||
--bgc-notice-pop-up: var(--opacity-white-55);
|
||||
|
||||
/* 搜索底框/黑透_lm */
|
||||
--bgc-searchbox: var(--opacity-black-04);
|
||||
--bgc-toggele-off: var(--opacity-black-12)
|
||||
}
|
||||
`
|
||||
|
||||
const homeWidgetStyle = css`
|
||||
:root {
|
||||
/************主屏、个性化配置、功能组件**************/
|
||||
|
||||
/* 首屏时间-分钟 */
|
||||
--bgc-screen-minute-time: var(--gradient-pale);
|
||||
/* 首屏时间-冒号 */
|
||||
--bgc-screen-colon: var(--opacity-graying-06);
|
||||
/* 首屏天气-天气字 */
|
||||
--bgc-screen-weather: var(--font-base-white);
|
||||
|
||||
/* 首屏_lm/日历浅 */
|
||||
--bgc-screen-calendar: var(--gradient-white2gray);
|
||||
/* 日历浅-阴影（全） */
|
||||
--bgc-calendar-box-shadow: 0 var(--auto-4px) var(--auto-10px)
|
||||
var(--opacity-black-08);
|
||||
--br-screen-calendar: var(--auto-20px);
|
||||
/* 首屏_dm/日历深 */
|
||||
--bgc-screen-calendar: var(--gradient-blackout);
|
||||
/* 日历深/描边 */
|
||||
--bor-calendar: var(--auto-2px) dashed var(--opacity-white-15);
|
||||
|
||||
/* 首屏_lm/音乐播放器 */
|
||||
--bgc-screen-music: var(--radial-gradient-white2purple);
|
||||
--bgc-music-disc: var(--gradient-black-2);
|
||||
/* 首屏_dm/音乐播放器 */
|
||||
--bgc-screen-music: var(--radial-gradient-dark-grey);
|
||||
--bgc-music-disc: var(--gradient-black-2);
|
||||
/* 首屏_lm/长按菜单 */
|
||||
--bgc-press-menu: var(-gradient-shallow);
|
||||
/* 首屏_dm/长按菜单 */
|
||||
--bgc-press-menu: var(-gradient-deep);
|
||||
|
||||
/************主屏/个性化配置**************/
|
||||
|
||||
/* 桌面编辑_lm/时间天气 */
|
||||
--bgc-time-weather: var(--opacity-white-10);
|
||||
/* 桌面编辑_lm/屏幕按钮浅-常规态 */
|
||||
--bgc-screen-btn: var(--opacity-white-fog-78);
|
||||
--bor-screen-btn: var(--auto-40px);
|
||||
/* 桌面编辑_lm/屏幕按钮浅-点击态 */
|
||||
--bgc-screen-btn-click: var(--opacity-white-fog-96);
|
||||
--bor-screen-btn-click: var(--auto-36px);
|
||||
/* 桌面编辑_dm/屏幕按钮深-常规态 */
|
||||
--bgc-screen-btn: var(--opacity-grey-75);
|
||||
--bor-screen-btn: var(--auto-70px);
|
||||
/* 桌面编辑_dm/屏幕按钮深-点击态 */
|
||||
--bgc-screen-btn-click: var(--opacity-grey-90);
|
||||
--bor-screen-btn-click: var(--auto-63px);
|
||||
/* 桌面编辑-强调按钮-常规态 */
|
||||
--bgc-emphasize-btn: var(--theme-blue);
|
||||
--bor-emphasize-btn: var(--auto-50px);
|
||||
/* 桌面编辑-强调按钮-点击态 */
|
||||
--bgc-emphasize-btn-click: var(--opacity-black-12);
|
||||
--bor-emphasize-btn-click: var(--auto-45px);
|
||||
/* 桌面编辑_dm/时间天气 */
|
||||
--bgc-time-weather: var(--opacity-black-10);
|
||||
/* 桌面编辑_dm/音乐进度条 */
|
||||
--bgc-music-progress-bar: var(--gradient-dark-blue);
|
||||
/* 装机默认/音乐进度条 */
|
||||
--bgc-default-progress-bar: var(--opacity-white-15);
|
||||
|
||||
/************主屏/功能组件**************/
|
||||
|
||||
/* 功能组件-来电_lm-border*/
|
||||
--br-function-call: var(--auto-1px) dashed rgba(116, 116, 116, 0.12);
|
||||
--bor-function-call: var(--auto-20px);
|
||||
|
||||
/************桌面组件、组件编辑**************/
|
||||
|
||||
/* 音乐浅色-装机默认 */
|
||||
--bgc-music-Installation-default: var(--radial-gradient-white2purple);
|
||||
/* 音乐深色-装机默认 */
|
||||
--bgc-music-Installation-default: var(--gradient-blackout);
|
||||
|
||||
/* 便签2*2-浅色-样式1 */
|
||||
--bgc-note-sytle1: var(--gradient-light-yellow);
|
||||
/* 便签2*2-浅色-样式2 */
|
||||
--bgc-note-style2: var(--gradient-white2gray);
|
||||
/* 便签2*2-浅色-样式2顶部 */
|
||||
--bgc-note-style2-top: var(--radial-gradient-silver-grey);
|
||||
/* 便签2*2-深色-样式1 */
|
||||
--bgc-note-sytle1: var(--gradient-blackout);
|
||||
/* 便签2*2-深色-样式2 */
|
||||
--bgc-note-style2: var(--gradient-blackout);
|
||||
/* 便签2*2-深色-样式2顶部 */
|
||||
--bgc-note-style2-top: var(--radial-gradient-silver-grey);
|
||||
|
||||
/* 天气/lm */
|
||||
--bgc-weather: var(--gradient-white2gray);
|
||||
/* 天气/dm */
|
||||
--bgc-weather: var(--gradient-blackout);
|
||||
--bor-weather: var(--auto-1px) dashed var(--opacity-white-15);
|
||||
|
||||
/* 日历/lm-1*1 */
|
||||
--bgc-calendar: var(--gradient-white2gray);
|
||||
/* 日历/lm-1*1 Top*/
|
||||
--bgc-calendar-top: var(--radial-gradient-grey2blue);
|
||||
/* 日历_dm */
|
||||
--bgc-calendar: var(--radial-gradient-silver-blue);
|
||||
/* 日历/1*1Top/黑色渐变 */
|
||||
--bgc-calendar-top: var(--gradient-black-3);
|
||||
/* 电池_dm/黄色渐变 */
|
||||
--bgc-battery-yellow: var(--angular-gradient-yellow);
|
||||
/* 电池_dm/蓝色渐变 */
|
||||
--bgc-battery-blue: var(--angular-gradient-blue);
|
||||
/* dm/绿色渐变 */
|
||||
--bgc-lmgreen-gradient: var(--gradient-green);
|
||||
/* dm/蓝色渐变 */
|
||||
--bgc-lmblue-gradient: var(--gradient-blue);
|
||||
/* dm/橙色渐变 */
|
||||
--bgc-lmorange-gradient: var(--gradient-orange);
|
||||
/* dm/设备连接 */
|
||||
--bgc-notice-gradient: var(--gradient-silvery-white);
|
||||
/* 电池_lm/黄色渐变 */
|
||||
--bgc-battery-yellow: var(--angular-gradient-yellow-2);
|
||||
/* 电池_lm/蓝色渐变 */
|
||||
--bgc-battery-blue: var(--angular-gradient-blue);
|
||||
}
|
||||
`
|
||||
|
||||
const themeStyle = css`
|
||||
:root {
|
||||
/***************************主题风格-商务风格*********************************/
|
||||
/* 商务/组件浅-阴影（全） */
|
||||
--business-light-shaded: 0 var(--auto-4px) var(--auto-10px)
|
||||
var(--opacity-black-08);
|
||||
/* 商务/组件浅/白调-斜线渐变 */
|
||||
--bgc-dialog-gradient: var(--gradient-white2gray);
|
||||
/* 商务/组件浅/白紫-径向渐变 */
|
||||
--bgc-dialog-radial-gradient: var(--radial-gradient-white2purple);
|
||||
/* 商务/组件浅/灰蓝-径向渐变 */
|
||||
--bgc-dialog-greyblue-gradient: var(--radial-gradient-grey2blue);
|
||||
/* 商务/组件深/描边 */
|
||||
--bgc-dialog-stroke: var(--auto-1px) solid var(--opacity-white-15);
|
||||
/* 商务/组件深/黑透渐变（高斯） */
|
||||
--bgc-dialog-black-gradient: var(--gradient-blackout);
|
||||
/* 商务/组件深/黑透渐变-竖（高斯） */
|
||||
--bgc-dialog-black-vertical-gradient: var(--gradient-blackout-vertical);
|
||||
/* 商务/组件深/黑不透渐变-竖 */
|
||||
--bgc-dialog-black-opaque-gradient: var(--radial-gradient-black);
|
||||
/* 商务/组件浅/ 表盘渐变-毛玻璃 */
|
||||
--bgc-dialog-dial-gradation: var(--gradient-clock-black);
|
||||
/* 商务/组件浅/浅黄纸张-斜线渐变 */
|
||||
--light-yellow-gradation: var(--gradient-light-yellow);
|
||||
/* 商务/组件深/描边 */
|
||||
--bgc-border-stroke: var(--auto-1px) solid var(--opacity-white-15);
|
||||
/* 电量底-scaleX-scaleY */
|
||||
--battery-green-gradation: var(--gradient-green-3);
|
||||
/* 商务/组件浅/ 表盘渐变-毛玻璃 */
|
||||
--back-clock-border: var(--radial-gradient-black-2);
|
||||
--back-clock-case: var(--gradient-clock-black);
|
||||
--back-clock-box-shadow: 0 var(--auto-6px) var(--auto-12px)
|
||||
var(--opacity-black-15);
|
||||
--back-clock-backdrop-filter: blur(20px);
|
||||
}
|
||||
`
|
||||
|
||||
const cubicBezierStyle = css`
|
||||
:root {
|
||||
--cubic-bezier-025-01-025-1: cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
|
||||
--cubic-bezier-03-02-01-1: cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
|
||||
--cubic-bezier-0-035-02-1: cubic-bezier(0, 0.35, 0.2, 1) forwards;
|
||||
--cubic-bezier-0-035-025-1: cubic-bezier(0, 0.35, 0.25, 1) forwards;
|
||||
|
||||
/* TBD: 给以下 sytle1 命名为具体含义值 */
|
||||
--animation-style1-50ms: 50ms var(--cubic-bezier-025-01-025-1);
|
||||
--animation-style1-100ms: 100ms var(--cubic-bezier-025-01-025-1);
|
||||
--animation-style1-150ms: 150ms var(--cubic-bezier-025-01-025-1);
|
||||
--animation-style1-200ms: 200ms var(--cubic-bezier-025-01-025-1);
|
||||
--animation-style1-250ms: 250ms var(--cubic-bezier-025-01-025-1);
|
||||
--animation-style1-300ms: 300ms var(--cubic-bezier-025-01-025-1);
|
||||
--animation-style1-400ms: 400ms var(--cubic-bezier-025-01-025-1);
|
||||
|
||||
--animation-style2-50ms: 50ms var(--cubic-bezier-0-035-02-1);
|
||||
--animation-style2-100ms: 100ms var(--cubic-bezier-0-035-02-1);
|
||||
--animation-style2-150ms: 150ms var(--cubic-bezier-0-035-02-1);
|
||||
--animation-style2-200ms: 200ms var(--cubic-bezier-0-035-02-1);
|
||||
--animation-style2-250ms: 250ms var(--cubic-bezier-0-035-02-1);
|
||||
--animation-style2-300ms: 300ms var(--cubic-bezier-0-035-02-1);
|
||||
--animation-style2-400ms: 400ms var(--cubic-bezier-0-035-02-1);
|
||||
|
||||
--animation-style3-50ms: 50ms var(--cubic-bezier-03-02-01-1);
|
||||
--animation-style3-100ms: 100ms var(--cubic-bezier-03-02-01-1);
|
||||
--animation-style3-150ms: 150ms var(--cubic-bezier-03-02-01-1);
|
||||
--animation-style3-200ms: 200ms var(--cubic-bezier-03-02-01-1);
|
||||
--animation-style3-250ms: 250ms var(--cubic-bezier-03-02-01-1);
|
||||
--animation-style3-300ms: 300ms var(--cubic-bezier-03-02-01-1);
|
||||
--animation-style3-400ms: 400ms var(--cubic-bezier-03-02-01-1);
|
||||
|
||||
--animation-style4-50ms: 50ms var(--cubic-bezier-03-025-01-1);
|
||||
--animation-style4-100ms: 100ms var(--cubic-bezier-03-025-01-1);
|
||||
--animation-style4-150ms: 150ms var(--cubic-bezier-03-025-01-1);
|
||||
--animation-style4-200ms: 200ms var(--cubic-bezier-03-025-01-1);
|
||||
--animation-style4-250ms: 250ms var(--cubic-bezier-03-025-01-1);
|
||||
--animation-style4-300ms: 300ms var(--cubic-bezier-03-025-01-1);
|
||||
--animation-style4-400ms: 400ms var(--cubic-bezier-03-025-01-1);
|
||||
}
|
||||
`
|
||||
|
||||
const lightStyle = css`
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
/* 全/checkbox_lm */
|
||||
--bgc-checkbox-off: rgba(38, 38, 38, 0.25);
|
||||
--bgc-radio-off-border: var(--auto-3px) solid rgba(38, 38, 38, 0.25);
|
||||
/* 全/Toggele_lm */
|
||||
/* 底色/ 侧栏白 */
|
||||
--base-sidebar-color: #edeff8;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const darkStyle = css`
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* 底色/弹窗深 */
|
||||
--bgc-dialog: var(--bgc-dialog-dark);
|
||||
/* 商务/组件深/黑透渐变（高斯） */
|
||||
--bgc-black-gradient: var(--gradient-blackout);
|
||||
/* 商务/组件深/黑透渐变-竖（高斯） */
|
||||
--bgc-black-vertical-gradient: var(--gradient-blackout-vertical);
|
||||
|
||||
/* 按钮button */
|
||||
--bgc-btn-noraml: var(--bgc-btn-noraml-dm);
|
||||
--bgc-btn-noraml-pressed: var(--bgc-btn-noraml-pressed-dm);
|
||||
--bgc-btn-pure-default: var(--bgc-btn-pure-default-dm);
|
||||
--bgc-btn-text-pressed: var(--bgc-btn-text-pressed-dm);
|
||||
--bgc-btn-icon-pressed: var(--bgc-btn-icon-pressed-dm);
|
||||
--bgc-btn-ghost: var(--bgc-btn-ghost-dm);
|
||||
--bgc-btn-special-delete: var(--bgc-btn-special-delete-dm);
|
||||
--bgc-btn-special-delete-icon: var(--bgc-btn-special-delete-icon-dm);
|
||||
--color-btn-normal-default: var(--color-btn-normal-default-dm);
|
||||
--color-btn-pure: var(--color-btn-pure-dm);
|
||||
--color-btn-pure-default: var(--color-btn-pure-default);
|
||||
--color-btn-text: var(--color-btn-text-dm);
|
||||
--color-btn-icon: var(--color-btn-icon-dm);
|
||||
--color-btn-special-go-back: var(--color-btn-special-go-back-dm);
|
||||
|
||||
/* 全/ click_dm */
|
||||
--bgc-btn-click: var(--opacity-white-10);
|
||||
|
||||
/* 全/ checkbox_dm */
|
||||
--bgc-checkbox-off: var(--opacity-white-25);
|
||||
--bgc-radio-off-border: var(--auto-3px) solid var(--opacity-white-25);
|
||||
|
||||
/* 全/ Toggele_dm */
|
||||
--bgc-toggele-off: var(--opacity-white-15);
|
||||
|
||||
/* 搜索底框/白透_dm */
|
||||
--bgc-searchbox: var(--opacity-white-06);
|
||||
|
||||
/* 商务/组件深/ 表盘渐变-毛玻璃 */
|
||||
--bor-bgc-clock: var(gradient-clock-border);
|
||||
--bgc-clock-case: var(--radial-gradient-clock-black);
|
||||
--bgc-clock-box-shadow: 0 var(--auto-4px) var(--auto-10px)
|
||||
var(--opacity-black-08);
|
||||
--bgc-clock-backdrop-filter: blur(20.3871px);
|
||||
|
||||
--bgc-gauss-mask: var(--bgc-gauss-mask-dm);
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const globalStyles: CSSResultArray = [
|
||||
baseStyle,
|
||||
baseComponentStyle,
|
||||
homeWidgetStyle,
|
||||
themeStyle,
|
||||
cubicBezierStyle,
|
||||
lightStyle,
|
||||
darkStyle,
|
||||
]
|
||||
|
|
@ -3,8 +3,8 @@ import GestureDetector, {
|
|||
GestureEvents,
|
||||
GestureOptions,
|
||||
} from '../../lib/gesture/gesture-detector'
|
||||
import {baseStyles} from './base-style'
|
||||
import {autoPxStyle} from './auto-px-style'
|
||||
import {globalStyles} from './global-style'
|
||||
|
||||
declare global {
|
||||
var loadStarMixin: boolean
|
||||
|
|
@ -19,7 +19,7 @@ export interface StarInterface {
|
|||
onhoverend(): void
|
||||
}
|
||||
|
||||
type Constructor<T = Record<string, unknown>> = {
|
||||
export type Constructor<T = Record<string, unknown>> = {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
new (...args: any[]): T
|
||||
prototype: T
|
||||
|
|
@ -78,14 +78,15 @@ export function StarMixin<T extends Constructor<ReactiveElement>>(
|
|||
|
||||
// 填充全局所需基础样式变量, 只添加一次
|
||||
const style = document.createElement('style')
|
||||
const baseStylesString = baseStyles
|
||||
const globalStylesString = globalStyles
|
||||
.join(' ')
|
||||
.toString()
|
||||
.replace(/(--devicePixelRatio: )\d+/, (_, s1) => {
|
||||
// 替换 devicepixelRatio
|
||||
return s1 + String(devicePixelRatio)
|
||||
})
|
||||
const autoPxStyleString = autoPxStyle.toString()
|
||||
style.innerHTML = baseStylesString + autoPxStyleString
|
||||
style.innerHTML = globalStylesString + autoPxStyleString
|
||||
document.head.appendChild(style)
|
||||
|
||||
window.loadStarMixin = true
|
||||
|
|
@ -94,13 +95,15 @@ export function StarMixin<T extends Constructor<ReactiveElement>>(
|
|||
/**
|
||||
* 以下方法均可被子类重写
|
||||
*/
|
||||
return class SlotTextObservingElement extends constructor {
|
||||
return class StarBaseElementInitial extends constructor {
|
||||
hello() {}
|
||||
onhover() {
|
||||
this.classList.add('pressed')
|
||||
this.classList.toggle('starpress', true)
|
||||
this.classList.toggle('starfree', false)
|
||||
}
|
||||
onhoverend() {
|
||||
this.classList.remove('pressed')
|
||||
this.classList.toggle('starpress', false)
|
||||
this.classList.toggle('starfree', true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement, property, query} from 'lit/decorators.js'
|
||||
import {sharedStyles} from './battery-styles'
|
||||
import {animation} from '../animation/animation-styles'
|
||||
import lightning from './svg/lightning.svg'
|
||||
|
||||
@customElement('star-battery')
|
||||
export class StarBattery extends LitElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
return [sharedStyles , animation]
|
||||
}
|
||||
|
||||
@property({type: Boolean}) deep = false
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
import {css} from 'lit'
|
||||
|
||||
export default css`
|
||||
div {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
div[data-vertical] {
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
|
|
@ -1,9 +1,37 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
import {
|
||||
customElement,
|
||||
html,
|
||||
property,
|
||||
CSSResultArray,
|
||||
LitElement,
|
||||
TemplateResult,
|
||||
} from '../base/star-base-element.js'
|
||||
import buttonGroupStyle from './button-group.css.js'
|
||||
|
||||
export const sharedStyles: CSSResult = css`
|
||||
.vertical {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
@customElement('star-button-group')
|
||||
export class StarButtonGroup extends LitElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [buttonGroupStyle]
|
||||
}
|
||||
`
|
||||
|
||||
// 默认为水平
|
||||
@property({type: Boolean}) vertical = false
|
||||
|
||||
renderButtonGroup(): TemplateResult {
|
||||
return html`
|
||||
<div ?data-vertical=${this.vertical}>
|
||||
<slot></slot>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.renderButtonGroup()
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'star-button-group': StarButtonGroup
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
import {LitElement, html, CSSResultArray, HTMLTemplateResult} from 'lit'
|
||||
import {property, customElement} from 'lit/decorators.js'
|
||||
import {sharedStyles} from './button-group.js'
|
||||
|
||||
@customElement('star-buttongroup')
|
||||
export class StarButtonGroup extends LitElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
|
||||
@property({type: Boolean})
|
||||
public vertical = false
|
||||
|
||||
getButtonGroup(): HTMLTemplateResult {
|
||||
if (this.hasAttribute('vertical')) {
|
||||
return html`
|
||||
<div class="vertical">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`
|
||||
} else {
|
||||
return html`
|
||||
<div class="horizontal">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.getButtonGroup()
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'star-buttongroup': StarButtonGroup
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +1 @@
|
|||
export * from './buttongroup.js'
|
||||
export * from './button-group.js'
|
||||
|
|
|
|||
|
|
@ -4,5 +4,5 @@
|
|||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts"]
|
||||
"include": ["*.ts", "../base/*.ts"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
| special | 'corner-marker'，'hang-up'，'answer-call'，'go-back' |
|
||||
| icon | 对应 gaia-icons 中的图标名 |
|
||||
| disabled | true，false | false |
|
||||
| theme | ligth，theme | light | 手动设置组件主题 |
|
||||
|
||||
<center><b>star-button组件支持的插槽</b></center>
|
||||
|
||||
|
|
@ -49,11 +50,12 @@
|
|||
|
||||
注意：
|
||||
|
||||
- type 必需: type="normal".
|
||||
- size 可选， 默认为 "small"，可选 "small", "middle", "large".
|
||||
- variant 可选， 默认为 "default"，可选 "default", "primary", "warn".
|
||||
- width 可选, 有效值区间[200,520], 抵近对应按钮的最小宽度和最大宽度
|
||||
- disabled 可选， 默认为 false.
|
||||
- type 必需: type="normal"。
|
||||
- size 可选， 默认为 "small"，可选 "small", "middle", "large"。
|
||||
- variant 可选， 默认为 "default"，可选 "default", "primary", "warn"。
|
||||
- width 可选, 有效值区间[200,520], 抵近对应按钮的最小宽度和最大宽度。
|
||||
- disabled 可选， 默认为 false。
|
||||
- theme 可选，默认为 light，可选 "light"，"dark"。
|
||||
|
||||
### 2. Pure - 纯按钮
|
||||
|
||||
|
|
@ -73,13 +75,14 @@
|
|||
|
||||
注意：
|
||||
|
||||
- type 必需: type="pure".
|
||||
- size 可选， 默认为 "small"，可选 "small", "middle", "large".
|
||||
- label 可选，填充类型为字符串.
|
||||
- disabled 可选，默认为 false.
|
||||
- icon 可选， 其值为 gaia-icons 中支持的图标名.
|
||||
- 插槽<slot name="asset">可选，其内包裹 svg.
|
||||
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者.
|
||||
- type 必需: type="pure"。
|
||||
- size 可选， 默认为 "small"，可选 "small", "middle", "large"。
|
||||
- label 可选，填充类型为字符串。
|
||||
- disabled 可选，默认为 false。
|
||||
- icon 可选， 其值为 gaia-icons 中支持的图标名。
|
||||
- 插槽<slot name="asset">可选，其内包裹 svg。
|
||||
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者。
|
||||
- theme 可选，默认为 light，可选 "light"，"dark"。
|
||||
|
||||
### 3. Text - 文本按钮
|
||||
|
||||
|
|
@ -94,10 +97,11 @@
|
|||
|
||||
注意：
|
||||
|
||||
- type 必需: type="text".
|
||||
- label 必需，填充类型为字符串.
|
||||
- variant 可选， 默认为 "default"，可选 "default", "primary", "warn".
|
||||
- disabled 可选，默认为 false.
|
||||
- type 必需: type="text"。
|
||||
- label 必需，填充类型为字符串。
|
||||
- variant 可选， 默认为 "default"，可选 "default", "primary", "warn"。
|
||||
- disabled 可选，默认为 false。
|
||||
- theme 可选，默认为 light，可选 "light"，"dark"。
|
||||
|
||||
### 4. Icon - 图标按钮
|
||||
|
||||
|
|
@ -112,12 +116,13 @@
|
|||
|
||||
注意：
|
||||
|
||||
- type 必需: type="icon".
|
||||
- size 可选， 默认为 "small"，可选 "small", "middle".
|
||||
- disabled 可选，默认为 false.
|
||||
- icon 可选， 其值为 gaia-icons 中支持的图标名.
|
||||
- 插槽<slot name="asset">可选，其内包裹 svg.
|
||||
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者.
|
||||
- type 必需: type="icon"。
|
||||
- size 可选， 默认为 "small"，可选 "small", "middle"。
|
||||
- disabled 可选，默认为 false。
|
||||
- icon 可选， 其值为 gaia-icons 中支持的图标名。
|
||||
- 插槽<slot name="asset">可选，其内包裹 svg。
|
||||
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者。
|
||||
- theme 可选，默认为 light，可选 "light"，"dark"。
|
||||
|
||||
### 5. Ghost - 重影按钮
|
||||
|
||||
|
|
@ -134,13 +139,14 @@
|
|||
|
||||
注意：
|
||||
|
||||
- type 必需: type="ghost".
|
||||
- size 可选， 默认为 "small"，可选 "small", "middle", "large", "extralarge".
|
||||
- variant 可选， 默认为 "default"，可选 "default", "primary", "establish".
|
||||
- disabled 可选，默认为 false.
|
||||
- icon 可选， 其值为 gaia-icons 中支持的图标名.
|
||||
- 插槽<slot name="asset">可选，其内包裹 svg.
|
||||
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者.
|
||||
- type 必需: type="ghost"。
|
||||
- size 可选， 默认为 "small"，可选 "small", "middle", "large", "extralarge"。
|
||||
- variant 可选， 默认为 "default"，可选 "default", "primary", "establish"。
|
||||
- disabled 可选，默认为 false。
|
||||
- icon 可选， 其值为 gaia-icons 中支持的图标名。
|
||||
- 插槽<slot name="asset">可选，其内包裹 svg。
|
||||
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者。
|
||||
- theme 可选，默认为 light，可选 "light"，"dark"。
|
||||
|
||||
### 6. Special - 特殊按钮
|
||||
|
||||
|
|
@ -162,4 +168,12 @@
|
|||
注意：
|
||||
|
||||
- special="corner-marker"和 special="go-back" 只有唯一一种用法
|
||||
- theme 可选，默认为 light，可选 "light"，"dark"。
|
||||
- special="hang-up"和 special="answer-call" 支持的 size 必需: "middle", "large"
|
||||
- theme 可选，默认为 light，可选 "light"，"dark"。
|
||||
|
||||
## TBD
|
||||
|
||||
- icon 类型 button 的动效未实现，较复杂。
|
||||
- multi-buttons 未整合
|
||||
- button 中的 svg icon 颜色未同步黑暗模式，等待新版 gaia-icon 和确定的 svg 包装完成。
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -52,6 +52,11 @@ export enum ButtonSpecial {
|
|||
GOBACK = 'go-back',
|
||||
}
|
||||
|
||||
export enum Theme {
|
||||
LIGHT = 'light',
|
||||
DARK = 'dark',
|
||||
}
|
||||
|
||||
/**
|
||||
* 首字母大写
|
||||
*/
|
||||
|
|
@ -140,6 +145,8 @@ export class StarButton extends StarBaseElement {
|
|||
|
||||
@property({type: String}) fontsize = ''
|
||||
|
||||
@property({type: String}) theme = 'light'
|
||||
|
||||
protected get hasLabel(): boolean {
|
||||
return this.label !== ''
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,5 +4,10 @@
|
|||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts", "../base/*.ts", "../asset/svg-icon.ts"]
|
||||
"include": [
|
||||
"*.ts",
|
||||
"../base/*.ts",
|
||||
"../animation/*.ts",
|
||||
"../asset/svg-icon.ts"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,16 @@ import {css} from 'lit'
|
|||
|
||||
export default css`
|
||||
clock-time {
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
line-height: var(--auto-96px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
clock-date {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
margin-top: var(--auto-28px);
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -2,13 +2,8 @@ import {css} from 'lit'
|
|||
|
||||
export default css`
|
||||
#clock-date {
|
||||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
top: 16.4%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
|
|
@ -16,12 +11,8 @@ export default css`
|
|||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
font-size: var(--auto-48px);
|
||||
line-height: 29px;
|
||||
text-align: center;
|
||||
top: 72.68%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -30,12 +21,7 @@ export default css`
|
|||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 17px;
|
||||
text-align: center;
|
||||
top: 72.68%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
font-size: var(--auto-48px);
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -2,42 +2,33 @@ import {css} from 'lit'
|
|||
|
||||
export default css`
|
||||
#clock-time-minute {
|
||||
position: absolute;
|
||||
left: 34.8%;
|
||||
top: 35.4%;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-inline-end: var(--auto-10px);
|
||||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 220px;
|
||||
line-height: 220px;
|
||||
height: 220px;
|
||||
text-align: left;
|
||||
color: #ffffff;
|
||||
font-size: var(--auto-128px);
|
||||
opacity: 0.67;
|
||||
}
|
||||
|
||||
#clock-time-hour {
|
||||
position: absolute;
|
||||
left: 50.6%;
|
||||
top: 35.4%;
|
||||
|
||||
height: 220px;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
padding-inline-start: var(--auto-10px);
|
||||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 220px;
|
||||
line-height: 220px;
|
||||
font-size: var(--auto-128px);
|
||||
/* identical to box height, or 100% */
|
||||
text-align: left;
|
||||
/* 主题色/黄金渐变 */
|
||||
background: linear-gradient(180deg, #ebc965 0%, #d9aa38 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
/* @media screen and (max-width: 640px) {
|
||||
#clock-time-minute {
|
||||
font-weight: 600;
|
||||
font-size: 64px;
|
||||
|
|
@ -67,5 +58,5 @@ export default css`
|
|||
line-height: 43px;
|
||||
height: 43px;
|
||||
}
|
||||
}
|
||||
} */
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
export const sharedStyles: CSSResult = css`
|
||||
@media (prefers-color-scheme: light) {
|
||||
:host{
|
||||
/* 商务/组件浅/ 表盘渐变-毛玻璃 */
|
||||
--back-clock-border: radial-gradient(
|
||||
@media (prefers-color-scheme: light) {
|
||||
:host {
|
||||
/* 商务/组件浅/ 表盘渐变-毛玻璃 */
|
||||
--back-clock-border: radial-gradient(
|
||||
rgba(230, 225, 225, 0.85),
|
||||
rgba(232, 246, 255, 1),
|
||||
rgba(204, 211, 219, 0.85)
|
||||
|
|
@ -13,8 +13,8 @@ export const sharedStyles: CSSResult = css`
|
|||
rgba(179, 193, 242, 0.8) 16.24%,
|
||||
rgba(122, 130, 161, 0.8) 94.91%
|
||||
);
|
||||
--back-clock-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
|
||||
--back-clock-backdrop-filter:blur(20px);
|
||||
--back-clock-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
|
||||
--back-clock-backdrop-filter: blur(20px);
|
||||
}
|
||||
.star-clock-hour-hand {
|
||||
background: url('./src/components/clock/svg/light_hour.svg') no-repeat;
|
||||
|
|
@ -27,7 +27,7 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:host{
|
||||
:host {
|
||||
/* 商务/组件深/ 表盘渐变-毛玻璃 */
|
||||
--back-clock-border: linear-gradient(
|
||||
rgba(217, 195, 147, 1),
|
||||
|
|
@ -39,7 +39,7 @@ export const sharedStyles: CSSResult = css`
|
|||
rgba(36, 40, 56, 0.8) 100%
|
||||
);
|
||||
--back-clock-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
|
||||
--back-clock-backdrop-filter:blur(20.3871px);
|
||||
--back-clock-backdrop-filter: blur(20.3871px);
|
||||
}
|
||||
.star-clock-hour-hand {
|
||||
background: url('./src/components/clock/svg/dark_hour.svg') no-repeat;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ export const sharedStyles: CSSResult = css`
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
}
|
||||
.top-center-popup {
|
||||
align-items: flex-start;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
# 弹窗/对话框设计
|
||||
|
||||
弹窗区别于其他内容的地方：
|
||||
|
||||
- 弹窗底部有按钮
|
||||
|
||||
弹窗基类决定的内容：
|
||||
|
||||
- 弹窗盒子三段式结构
|
||||
- 弹窗盒子的位置、实际大小、显示大小
|
||||
- 深浅颜色模式支持
|
||||
- 按钮组及默认行为(cancel, confirm)的代理
|
||||
|
||||
基类采用的三段式结构：
|
||||
|
||||
```
|
||||
-------------------
|
||||
| 图标/标题 |
|
||||
-------------------
|
||||
| 内容 |
|
||||
| 纯文本/富文本/表单 |
|
||||
-------------------
|
||||
| 按钮/按钮组 |
|
||||
-------------------
|
||||
```
|
||||
|
||||
## 系统弹窗(alert/confirm/prompt)
|
||||
|
||||
```
|
||||
alert
|
||||
-------------------
|
||||
| 提示 |
|
||||
-------------------
|
||||
| 纯文本 |
|
||||
-------------------
|
||||
| 确认按钮 |
|
||||
-------------------
|
||||
|
||||
confirm
|
||||
-------------------
|
||||
| 提出问题？ |
|
||||
-------------------
|
||||
| 返回按钮 确认按钮 |
|
||||
-------------------
|
||||
|
||||
prompt
|
||||
-------------------
|
||||
| 请输入： |
|
||||
-------------------
|
||||
| 预置文本的输入框 |
|
||||
-------------------
|
||||
| 返回按钮 确认按钮 |
|
||||
-------------------
|
||||
```
|
||||
|
||||
## TBD: 使用用户代理支持的<dialog>
|
||||
|
||||
使用浏览器用户代理支持的<dialog>时，可以省去自行设定模态的步骤，并且其自身已经拥有了默认排版，省去设置样式的行为。
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import {css} from 'lit'
|
||||
|
||||
export default css`
|
||||
div {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
}
|
||||
`
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import {
|
||||
html,
|
||||
CSSResultArray,
|
||||
TemplateResult,
|
||||
customElement,
|
||||
} from '../base/star-base-element.js'
|
||||
import StarBaseDialog from './base-dialog.js'
|
||||
import alertDialogStyles from './alert-dialog.css.js'
|
||||
import './base-dialog.js'
|
||||
import '../button/button.js'
|
||||
import '../button-group/button-group.js'
|
||||
|
||||
interface AlertDialogOptions {
|
||||
text?: string
|
||||
confirm?: string
|
||||
onconfirm?: () => void
|
||||
}
|
||||
|
||||
@customElement('star-alert-dialog')
|
||||
export class StarAlertDialog extends StarBaseDialog {
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [super.styles, alertDialogStyles]
|
||||
}
|
||||
|
||||
title = '提示'
|
||||
|
||||
text!: string
|
||||
|
||||
onconfirm!: () => void
|
||||
|
||||
protected override get headerContent(): TemplateResult {
|
||||
return html`
|
||||
<h1 slot="header">${this.title}</h1>
|
||||
`
|
||||
}
|
||||
|
||||
protected override get mainContent(): TemplateResult {
|
||||
return html`
|
||||
<span>${this.text}</span>
|
||||
`
|
||||
}
|
||||
|
||||
protected override get bottomContent(): TemplateResult {
|
||||
return html`
|
||||
<star-button-group>
|
||||
<star-button
|
||||
type="text"
|
||||
variant="primary"
|
||||
label=${this.confirm}
|
||||
@click=${this.handleConfirm}
|
||||
></star-button>
|
||||
</star-button-group>
|
||||
`
|
||||
}
|
||||
|
||||
handleEvent(e: any): void {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
constructor(obj: AlertDialogOptions) {
|
||||
super()
|
||||
this.text = obj.text || ''
|
||||
this.confirm = obj.confirm || '确定'
|
||||
this.onconfirm = obj.onconfirm || (() => {})
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import {css} from 'lit'
|
||||
|
||||
export default css`
|
||||
div {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
}
|
||||
dialog::backdrop {
|
||||
background: green;
|
||||
}
|
||||
`
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
import {
|
||||
html,
|
||||
nothing,
|
||||
query,
|
||||
CSSResultArray,
|
||||
StarBaseElement,
|
||||
TemplateResult,
|
||||
} from '../base/star-base-element.js'
|
||||
import baseDialogStyles from './base-dialog.css.js'
|
||||
|
||||
const USE_DIALOG = 0
|
||||
|
||||
export default class StarBaseDialog extends StarBaseElement {
|
||||
title!: string
|
||||
|
||||
value!: string
|
||||
|
||||
cancel!: string
|
||||
|
||||
confirm!: string
|
||||
|
||||
onconfirm!: (e: Event) => void
|
||||
|
||||
oncancel!: (e: Event) => void
|
||||
|
||||
@query('dialog') dialog!: HTMLDialogElement
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [baseDialogStyles]
|
||||
}
|
||||
|
||||
protected get headerContent(): TemplateResult {
|
||||
return html`
|
||||
PLEASE REWRITE ME
|
||||
`
|
||||
}
|
||||
|
||||
protected get mainContent(): TemplateResult | typeof nothing {
|
||||
return nothing
|
||||
}
|
||||
|
||||
protected get bottomContent(): TemplateResult {
|
||||
return html`
|
||||
PLEASE REWRITE ME
|
||||
`
|
||||
}
|
||||
|
||||
protected get parent(): Element {
|
||||
return this.parentElement || (this.getRootNode() as Element)
|
||||
}
|
||||
|
||||
protected handleConfirm(e: Event) {
|
||||
this.parent.removeChild(this)
|
||||
this.onconfirm?.(e)
|
||||
}
|
||||
|
||||
protected handleCancel(e: Event) {
|
||||
this.parent.removeChild(this)
|
||||
this.oncancel?.(e)
|
||||
}
|
||||
|
||||
/**
|
||||
* TBD: 在Gecko>=98时，使用 <dialog> 和 this.showModal() 的方法进行包裹
|
||||
*/
|
||||
private renderDialog() {
|
||||
return html`
|
||||
<dialog>
|
||||
<header>${this.headerContent}</header>
|
||||
<main>${this.mainContent}</main>
|
||||
<footer>${this.bottomContent}</footer>
|
||||
</dialog>
|
||||
`
|
||||
}
|
||||
|
||||
private renderMockDialog() {
|
||||
return html`
|
||||
<div>
|
||||
<header>${this.headerContent}</header>
|
||||
<main>${this.mainContent}</main>
|
||||
<footer>${this.bottomContent}</footer>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns
|
||||
*/
|
||||
protected render() {
|
||||
if (USE_DIALOG && typeof HTMLDialogElement === 'function') {
|
||||
return this.renderDialog()
|
||||
} else {
|
||||
return this.renderMockDialog()
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback(): void {
|
||||
super.connectedCallback()
|
||||
if (USE_DIALOG && typeof HTMLDialogElement === 'function') {
|
||||
this.updateComplete.then(() => {
|
||||
this.dialog.showModal()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'star-base-dialog': StarBaseDialog
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import {css} from 'lit'
|
||||
|
||||
export default css`
|
||||
div {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
}
|
||||
`
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
import {
|
||||
customElement,
|
||||
html,
|
||||
CSSResultArray,
|
||||
TemplateResult,
|
||||
} from '../base/star-base-element.js'
|
||||
import StarBaseDialog from './base-dialog.js'
|
||||
import confirmDialogStyles from './confirm-dialog.css.js'
|
||||
import './base-dialog.js'
|
||||
import '../button/button.js'
|
||||
|
||||
interface ConfirmDialogOptions {
|
||||
title?: string
|
||||
cancel?: string
|
||||
confirm?: string
|
||||
oncancel?: () => void
|
||||
onconfirm?: () => void
|
||||
}
|
||||
|
||||
@customElement('star-confirm-dialog')
|
||||
export class StarConfirmDialog extends StarBaseDialog {
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [super.styles, confirmDialogStyles]
|
||||
}
|
||||
|
||||
protected override get headerContent(): TemplateResult {
|
||||
return html`
|
||||
<h1 slot="header">${this.title}</h1>
|
||||
`
|
||||
}
|
||||
|
||||
protected override get bottomContent(): TemplateResult {
|
||||
return html`
|
||||
<star-button-group>
|
||||
<star-button
|
||||
type="text"
|
||||
variant="default"
|
||||
label=${this.cancel}
|
||||
@click=${this.handleCancel}
|
||||
></star-button>
|
||||
<star-button
|
||||
type="text"
|
||||
variant="primary"
|
||||
label=${this.confirm}
|
||||
@click=${this.handleConfirm}
|
||||
></star-button>
|
||||
</star-button-group>
|
||||
`
|
||||
}
|
||||
|
||||
constructor(obj: ConfirmDialogOptions) {
|
||||
super()
|
||||
this.title = obj.title || ''
|
||||
this.cancel = obj.cancel || '取消'
|
||||
this.confirm = obj.confirm || '确定'
|
||||
this.oncancel = obj.oncancel || (() => {})
|
||||
this.onconfirm = obj.onconfirm || (() => {})
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export {StarAlertDialog} from './alert-dialog.js'
|
||||
export {StarConfirmDialog} from './confirm-dialog.js'
|
||||
export {StarPromptDialog} from './prompt-dialog.js'
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/dialog",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index.js": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import {css} from 'lit'
|
||||
|
||||
export default css`
|
||||
div {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
}
|
||||
`
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import {
|
||||
customElement,
|
||||
html,
|
||||
query,
|
||||
CSSResultArray,
|
||||
TemplateResult,
|
||||
} from '../base/star-base-element.js'
|
||||
import StarBaseDialog from './base-dialog.js'
|
||||
import promptDialogStyles from './prompt-dialog.css.js'
|
||||
import './base-dialog.js'
|
||||
import '../button/button.js'
|
||||
|
||||
interface PromptDialogOptions {
|
||||
title?: string
|
||||
value?: string
|
||||
cancel?: string
|
||||
confirm?: string
|
||||
oncancel?: () => void
|
||||
onconfirm?: () => void
|
||||
}
|
||||
|
||||
@customElement('star-prompt-dialog')
|
||||
export class StarPromptDialog extends StarBaseDialog {
|
||||
// 暴露给外部使用
|
||||
@query('input') public promptInput!: HTMLInputElement
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [super.styles, promptDialogStyles]
|
||||
}
|
||||
|
||||
protected override get headerContent(): TemplateResult {
|
||||
return html`
|
||||
<h1 slot="header">${this.title}</h1>
|
||||
`
|
||||
}
|
||||
|
||||
protected override get mainContent(): TemplateResult {
|
||||
return html`
|
||||
<p>
|
||||
<input placeholder=${this.value} />
|
||||
</p>
|
||||
`
|
||||
}
|
||||
|
||||
protected override get bottomContent(): TemplateResult {
|
||||
return html`
|
||||
<star-button-group>
|
||||
<star-button
|
||||
type="text"
|
||||
variant="default"
|
||||
label=${this.cancel}
|
||||
@click=${this.handleCancel}
|
||||
></star-button>
|
||||
<star-button
|
||||
type="text"
|
||||
variant="primary"
|
||||
label=${this.confirm}
|
||||
@click=${this.handleConfirm}
|
||||
></star-button>
|
||||
</star-button-group>
|
||||
`
|
||||
}
|
||||
|
||||
constructor(obj: PromptDialogOptions) {
|
||||
super()
|
||||
this.title = obj.title || ''
|
||||
this.value = obj.value || ''
|
||||
this.cancel = obj.cancel || '取消'
|
||||
this.confirm = obj.confirm || '确定'
|
||||
this.oncancel = obj.oncancel || (() => {})
|
||||
this.onconfirm = obj.onconfirm || (() => {})
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts", "../base/*.ts", "../button/*.ts", "../button-group/*.ts"]
|
||||
}
|
||||
|
|
@ -91,4 +91,41 @@ export default class DockChild {
|
|||
!this.container.classList.contains('dragging') &&
|
||||
(container.style.transform = 'translate(' + left + 'px, ' + top + 'px)')
|
||||
}
|
||||
|
||||
/**
|
||||
* 放入文件夹时, 该方法将根据参考元素, 将该子节点移动并缩放至参考元素的位置与大小
|
||||
* @param element 参考元素
|
||||
* @param pagination 参考元素所在页面
|
||||
* @returns
|
||||
*/
|
||||
bringIntoForlder: boolean = false
|
||||
synchroniseWithRefElement(element: HTMLElement, _pagination: number) {
|
||||
return new Promise((res) => {
|
||||
let {top, left, height, width} = element.getBoundingClientRect()
|
||||
/* 水平偏移量 = 参考元素与屏幕左侧距离 - 主屏容器左边距 + 参考元素所在页面的offsetLeft */
|
||||
/* left =
|
||||
left - this.manager.left + this.manager.pages[pagination].offsetLeft */
|
||||
// top -= this.manager.top
|
||||
this.container.style.height = height + 'px'
|
||||
this.container.style.width = width + 'px'
|
||||
this.container.style.transform =
|
||||
'translate(' + left + 'px, ' + top + 'px)'
|
||||
this.bringIntoForlder = true
|
||||
this.container.classList.add('bring-into-folder')
|
||||
|
||||
let timer!: number
|
||||
const transitionCB = (evt: any) => {
|
||||
if (evt?.pseudoElement) {
|
||||
return
|
||||
}
|
||||
clearTimeout(timer)
|
||||
this.container.removeEventListener('transitionend', transitionCB)
|
||||
res(void 0)
|
||||
}
|
||||
|
||||
this.container.addEventListener('transitionend', transitionCB)
|
||||
|
||||
timer = window.setTimeout(transitionCB, 300)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,10 +67,13 @@ export default css`
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 子节点元素容器 */
|
||||
::slotted(.gaia-container-child) {
|
||||
/* 高 = 单元格高度 * 占据行数 - 上下边距 */
|
||||
height: calc(
|
||||
var(--grid-height) * var(--rows, 1) - var(--grid-margin-top, 0px) * 2
|
||||
);
|
||||
/* 宽算法类似高 */
|
||||
width: calc(
|
||||
var(--grid-width) * var(--columns, 1) - var(--grid-margin-left, 0px) * 2
|
||||
);
|
||||
|
|
@ -92,4 +95,9 @@ export default css`
|
|||
width: var(--icon-size, 100%);
|
||||
height: 0;
|
||||
}
|
||||
|
||||
:host([data-dragging='true']) .folder.opened .folder-page-container {
|
||||
/* 为了防止拖动文件夹内的图标导致滑动 */
|
||||
overflow: hidden;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,3 +1,6 @@
|
|||
import GaiaContainerChild from './gaia-container-child'
|
||||
import GaiaContainerFolder from './gaia-container-folder'
|
||||
|
||||
type Timer = number | undefined
|
||||
type IndeterHTMLElement = HTMLElement | null
|
||||
export interface ChildElementInfo {
|
||||
|
|
@ -8,6 +11,7 @@ export interface ChildElementInfo {
|
|||
anchorCoordinate?: Coordinate
|
||||
callback?: Function
|
||||
isWidget?: boolean
|
||||
order?: number
|
||||
}
|
||||
interface ClickInfo {
|
||||
pageX: number
|
||||
|
|
@ -36,11 +40,11 @@ export interface Coordinate {
|
|||
|
||||
export enum STATUS {
|
||||
STATIC = 0, // 静置
|
||||
OPEN_FORDER = 1, // 开启文件夹状态
|
||||
SWIPE = 1 << 1, // 划动
|
||||
DRAG = 1 << 2, // 拖动元素
|
||||
TURN = 1 << 3, // 翻页
|
||||
SORT = 1 << 4, // 整理
|
||||
OPEN_FORDER = 1 << 5, // 开启文件夹状态
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -63,7 +67,7 @@ export interface DragAndDrop {
|
|||
timeout: Timer
|
||||
|
||||
// The child that was tapped/clicked
|
||||
child: any
|
||||
child?: GaiaContainerChild | GaiaContainerFolder
|
||||
|
||||
// Whether a drag is active
|
||||
active: boolean
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ type PlacedRecorder = {
|
|||
* 6. 寻位方向并非绝对方向，以移动网格数量最短为优先条件
|
||||
* 7. 为满足规则5，规则6的寻位方向变化以顺时针方向转变，如：上左 → 上右 → 下右 → 下左
|
||||
* 8. 图标节点被另一个图标节点挤占位置时，仅能再去挤占相邻网格的图标的位置（即不允许挤占上下相邻图标）
|
||||
* 9. TODO: 图标被小组件挤压后,优先考虑集体移动到组件的相同的某一个方向上
|
||||
*/
|
||||
|
||||
enum Directions {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import GaiaContainer from './container'
|
||||
import {Coordinate, DragInType} from './contianer-interface'
|
||||
import GaiaContainerFolder from './gaia-container-folder'
|
||||
/**
|
||||
* Grid 布局
|
||||
* 组件属性：
|
||||
|
|
@ -33,6 +34,7 @@ export default class GaiaContainerChild {
|
|||
manager: GaiaContainer
|
||||
_isStatic: boolean | string
|
||||
anchorCoordinate: Coordinate
|
||||
name!: string
|
||||
// 静态位置
|
||||
_lastMasterTop: number | null = null
|
||||
_lastMasterLeft: number | null = null
|
||||
|
|
@ -57,9 +59,15 @@ export default class GaiaContainerChild {
|
|||
_shadowContainer!: HTMLElement
|
||||
// 建立时间, 用于区分不同小组件
|
||||
createTime: number = new Date().getTime()
|
||||
// 正在纳入文件夹中
|
||||
bringIntoForlder: boolean = false
|
||||
// 在文件夹中的顺序
|
||||
_order: number = -1
|
||||
// 用于记录将会与其进行交换的占位DOM
|
||||
_switch?: HTMLElement
|
||||
|
||||
constructor(
|
||||
element: HTMLElement | undefined,
|
||||
element: HTMLElement = document.createElement('div'),
|
||||
row: number = 1,
|
||||
column: number = 1,
|
||||
anchorCoordinate: Coordinate | undefined,
|
||||
|
|
@ -75,6 +83,11 @@ export default class GaiaContainerChild {
|
|||
this._isStatic = false
|
||||
this.anchorCoordinate = anchorCoordinate ?? {...defaultCoordinate} // 两种屏幕方向的锚固坐标
|
||||
this.markDirty()
|
||||
/* test */
|
||||
this.name =
|
||||
// @ts-ignore
|
||||
element.firstElementChild?.name ||
|
||||
element.dataset.id?.replace(/http:\/\/(.*).localhost.*/, '$1')
|
||||
}
|
||||
|
||||
rotate() {
|
||||
|
|
@ -116,7 +129,14 @@ export default class GaiaContainerChild {
|
|||
return this.manager.pagination
|
||||
}
|
||||
|
||||
throw new Error(`Can not find pagination`)
|
||||
return 0
|
||||
}
|
||||
|
||||
get folderPagination() {
|
||||
if (this.position == 'folder') {
|
||||
return +this.master.parentElement!.dataset.pagination!
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
get position() {
|
||||
|
|
@ -125,11 +145,27 @@ export default class GaiaContainerChild {
|
|||
const inPage = this.master.parentElement.classList.contains(
|
||||
'gaia-container-page'
|
||||
)
|
||||
return inPage ? 'page' : 'folder'
|
||||
const inFolder = this.master.parentElement.classList.contains('folder-page')
|
||||
|
||||
if (inPage) {
|
||||
return 'page'
|
||||
} else if (inFolder) {
|
||||
return 'folder'
|
||||
} else {
|
||||
return 'other'
|
||||
}
|
||||
}
|
||||
|
||||
get folder(): GaiaContainerFolder | undefined {
|
||||
if (this.isFolder || this.position !== 'folder') {
|
||||
return undefined
|
||||
}
|
||||
return this.manager.folders[this.folderName]
|
||||
}
|
||||
get folderName() {
|
||||
const name = this.master.parentElement?.dataset.name
|
||||
const name = this.isFolder
|
||||
? this.name
|
||||
: this.master.parentElement?.dataset.name
|
||||
return name || ''
|
||||
}
|
||||
|
||||
|
|
@ -162,10 +198,16 @@ export default class GaiaContainerChild {
|
|||
this._isStatic = !!value
|
||||
}
|
||||
|
||||
// 是否是页面最后一个组件
|
||||
get isTail() {
|
||||
const page = this.manager.pages[this.pagination]
|
||||
return page.lastChild === this.master
|
||||
/* 获取应用图标所在文件夹中的顺序 */
|
||||
get order() {
|
||||
return this._order
|
||||
}
|
||||
|
||||
set order(value) {
|
||||
if (value >= 0) {
|
||||
this._order = value
|
||||
this.master.style.order = String(value)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -367,17 +409,29 @@ export default class GaiaContainerChild {
|
|||
* Synchronise the container's transform with the position of the master.
|
||||
*/
|
||||
synchroniseContainer(isActive = false) {
|
||||
if (this.bringIntoForlder) {
|
||||
// 正处于纳入文件夹动画中, 不进行归位操作
|
||||
return true
|
||||
}
|
||||
let master = this.master
|
||||
let container = this.container
|
||||
let top = master.offsetTop
|
||||
let left = master.offsetLeft
|
||||
const position = this.position
|
||||
// 左上角的 GridID
|
||||
const gridId =
|
||||
position == 'page'
|
||||
? this.manager.getGridIdByCoordinate(left, top, this.pagination)
|
||||
: this.manager.getFolderGridIdByCoordinate(left, top, this.pagination)
|
||||
if (gridId !== this.curGridId) {
|
||||
let gridId!: number
|
||||
if (position == 'page') {
|
||||
gridId = this.manager.getGridIdByCoordinate(left, top, this.pagination)
|
||||
} else if (position == 'folder') {
|
||||
// gridId = this.manager.getFolderOrderByCoordinate(
|
||||
// left,
|
||||
// top,
|
||||
// this.pagination
|
||||
// )
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
if (position == 'page' && gridId !== this.curGridId) {
|
||||
// this.manager.recordCoordinate(this, this.pagination, gridId)
|
||||
if (!this.manager.recordCoordinate(this, this.pagination, gridId)) {
|
||||
/* 未能成功记录，记录位置已有其他子节点，需要清空位置记录并重新归位 */
|
||||
|
|
@ -404,4 +458,58 @@ export default class GaiaContainerChild {
|
|||
(container.style.transform = 'translate(' + left + 'px, ' + top + 'px)')
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* 放入文件夹时, 该方法将根据参考元素, 将该子节点移动并缩放至参考元素的位置与大小
|
||||
* @param element 参考元素
|
||||
* @param pagination 参考元素所在页面
|
||||
* @returns
|
||||
*/
|
||||
synchroniseWithRefElement(element: HTMLElement, pagination: number) {
|
||||
return new Promise((res) => {
|
||||
let {top, left, height, width} = element.getBoundingClientRect()
|
||||
const curTop = +window
|
||||
.getComputedStyle(this.container)
|
||||
.top.replace('px', '')
|
||||
const curLeft = +window
|
||||
.getComputedStyle(this.container)
|
||||
.left.replace('px', '')
|
||||
if (this.manager.openedFolder?.element.compareDocumentPosition(element)) {
|
||||
// 放入了打开状态的文件夹
|
||||
left = left - curLeft - this.manager.left
|
||||
} else {
|
||||
// 放入了关闭状态的文件夹
|
||||
// 水平偏移量 = 参考元素与屏幕左侧距离 - 主屏容器左边距 + 参考元素所在页面的offsetLeft
|
||||
left =
|
||||
left -
|
||||
curLeft -
|
||||
this.manager.left +
|
||||
this.manager.pages[pagination].offsetLeft
|
||||
}
|
||||
top = top - curTop - this.manager.top
|
||||
this.container.classList.add('bring-into-folder')
|
||||
this.container.style.height = height + 'px'
|
||||
this.container.style.width = width + 'px'
|
||||
this.container.style.transform =
|
||||
'translate(' + left + 'px, ' + top + 'px)'
|
||||
this.bringIntoForlder = true
|
||||
|
||||
let timer!: number
|
||||
const transitionCB = (evt: any) => {
|
||||
if (evt?.pseudoElement) {
|
||||
return
|
||||
}
|
||||
this.container.classList.remove('bring-into-folder')
|
||||
this.container.classList.add('folder-item')
|
||||
this.bringIntoForlder = false
|
||||
clearTimeout(timer)
|
||||
this.container.removeEventListener('transitionend', transitionCB)
|
||||
res(void 0)
|
||||
}
|
||||
|
||||
this.container.addEventListener('transitionend', transitionCB)
|
||||
|
||||
timer = window.setTimeout(transitionCB, 300)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,199 @@
|
|||
import GaiaContainerChild from './gaia-container-child'
|
||||
import GaiaContainerFolder from './gaia-container-folder'
|
||||
|
||||
/**
|
||||
* 主屏文件夹分页,其中的每个分页仅允许存在16个图标
|
||||
*/
|
||||
|
||||
export default class GaiaContainerFolderPageManager {
|
||||
folder!: GaiaContainerFolder
|
||||
_container!: HTMLElement
|
||||
observerCallback: MutationCallback
|
||||
constructor(folder: GaiaContainerFolder) {
|
||||
this.folder = folder
|
||||
this.observerCallback = (mutations: MutationRecord[]) => {
|
||||
for (const mutation of mutations) {
|
||||
const pagination = this.pages.indexOf(mutation.target as HTMLElement)
|
||||
const curPage = mutation.target as HTMLElement
|
||||
let nextPage = curPage.nextSibling
|
||||
if (pagination == -1) return
|
||||
if (
|
||||
nextPage instanceof HTMLElement &&
|
||||
nextPage.children.length &&
|
||||
curPage.children.length < 16
|
||||
) {
|
||||
curPage.appendChild(nextPage.children[0])
|
||||
} else if (curPage.children.length > 16) {
|
||||
if (!nextPage) {
|
||||
nextPage = this.addPage()
|
||||
}
|
||||
;(nextPage as HTMLElement).insertAdjacentElement(
|
||||
'afterbegin',
|
||||
[...curPage.children].pop()!
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get container() {
|
||||
if (!this._container) {
|
||||
this._container = document.createElement('div')
|
||||
this._container.classList.add('folder-page-container')
|
||||
this.addPage()
|
||||
}
|
||||
|
||||
return this._container
|
||||
}
|
||||
|
||||
get curPagination() {
|
||||
const pageWidth = this.pages[0].offsetWidth
|
||||
const scrollLeft = this.container.scrollLeft
|
||||
let pagination = Math.round(scrollLeft / pageWidth)
|
||||
if (pagination >= this.pages.length) {
|
||||
pagination = this.pages.length - 1
|
||||
} else if (pagination < 0) {
|
||||
pagination = 0
|
||||
}
|
||||
return pagination
|
||||
}
|
||||
|
||||
get curPage() {
|
||||
return this.pages[this.curPagination]
|
||||
}
|
||||
|
||||
_canScrollByFinger: boolean = true
|
||||
get canScrollByFinger() {
|
||||
return this._canScrollByFinger
|
||||
}
|
||||
|
||||
set canScrollByFinger(value: boolean) {
|
||||
this._canScrollByFinger = value
|
||||
if (value) {
|
||||
this.container.style.removeProperty('overflow')
|
||||
this.container.style.removeProperty('scroll-snap-type')
|
||||
} else {
|
||||
this.container.style.overflow = 'hidden'
|
||||
this.container.style.scrollSnapType = 'unset'
|
||||
}
|
||||
}
|
||||
|
||||
pages: HTMLElement[] = []
|
||||
addPage = () => {
|
||||
const page = document.createElement('div')
|
||||
page.classList.add('folder-page')
|
||||
page.dataset.name = this.folder.name
|
||||
page.dataset.pagination = String(this.pages.length)
|
||||
this.pages.push(page)
|
||||
this.container.appendChild(page)
|
||||
this.observe(page)
|
||||
|
||||
return page
|
||||
}
|
||||
|
||||
observe = (page: HTMLElement) => {
|
||||
let observe = new MutationObserver(this.observerCallback)
|
||||
observe.observe(page, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
})
|
||||
}
|
||||
|
||||
/* 分页监听器, 监听子节点是否不满/溢出16个图标, 并作出相应对策 */
|
||||
pageMutation(page: HTMLElement) {
|
||||
let observe = new MutationObserver(this.observerCallback)
|
||||
observe.observe(page, {
|
||||
childList: true,
|
||||
})
|
||||
}
|
||||
|
||||
deletePage = () => {
|
||||
const page = this.pages[this.pages.length - 1]
|
||||
if (page && page.children.length == 0) {
|
||||
this.pages.pop()
|
||||
page.remove()
|
||||
}
|
||||
}
|
||||
|
||||
/* 控制添加图标进文件夹图标动画 */
|
||||
children: GaiaContainerChild[] = []
|
||||
appendIcon = (
|
||||
child: GaiaContainerChild,
|
||||
{dropChild, order}: {dropChild?: GaiaContainerChild; order?: number} = {}
|
||||
) => {
|
||||
order = order ?? dropChild?.order ?? this.children.length
|
||||
const pagination = Math.floor(order / 16)
|
||||
child.order = order
|
||||
this.children.push(child)
|
||||
let page = this.pages[pagination]
|
||||
if (!page) {
|
||||
page = this.pages[this.pages.length - 1]
|
||||
}
|
||||
|
||||
// 生成一个用于占位的交换DOM, 为即将进入文件夹的图标充当一个定位和确定尺寸的标靶
|
||||
const tail = document.createElement('div')
|
||||
tail.classList.add('tail')
|
||||
tail.style.order = String(order)
|
||||
// 记录此交换DOM
|
||||
child._switch = tail
|
||||
|
||||
if (dropChild) {
|
||||
page.insertBefore(tail, dropChild._switch ?? dropChild.master)
|
||||
} else {
|
||||
page.appendChild(tail)
|
||||
}
|
||||
child.synchroniseWithRefElement(tail, this.folder.pagination).then(() => {
|
||||
// 纳入文件夹动画完成,将图标真正放入文件夹
|
||||
// this.folder.movein(child.master)
|
||||
child.bringIntoForlder = false
|
||||
// child.synchroniseContainer()
|
||||
child.container.style.transform =
|
||||
'translate(' + tail.offsetLeft + 'px, ' + tail.offsetTop + 'px)'
|
||||
page.replaceChild(child.master, tail)
|
||||
|
||||
// 移除交换标志及交换DOM
|
||||
child._switch = undefined
|
||||
tail.remove()
|
||||
|
||||
child.container.style.removeProperty('height')
|
||||
child.container.style.removeProperty('width')
|
||||
})
|
||||
}
|
||||
|
||||
/* 滑动到指定分页 */
|
||||
scrollToPage(pagination: number, behavior: 'smooth' | 'auto' = 'smooth') {
|
||||
if (pagination >= this.pages.length) {
|
||||
pagination = this.pages.length - 1
|
||||
} else if (pagination < 0) {
|
||||
pagination = 0
|
||||
}
|
||||
const firstLeft = this.pages[0].offsetLeft
|
||||
const left = this.pages[pagination].offsetLeft - firstLeft
|
||||
this.container.scrollTo({left, behavior})
|
||||
}
|
||||
|
||||
/* 隐藏指定分页前的页面 */
|
||||
hideTo?: number
|
||||
hidePages(to: number) {
|
||||
if (to >= this.pages.length) to = this.pages.length - 1
|
||||
this.hideTo = to
|
||||
this.pages.find((page, pagination) => {
|
||||
if (pagination < to) {
|
||||
page.style.width = '0'
|
||||
}
|
||||
return pagination == to
|
||||
})
|
||||
}
|
||||
|
||||
/* 显示所有隐藏分页并滑动到未被隐藏的页面 */
|
||||
showPages() {
|
||||
this.pages.find((page, pagination) => {
|
||||
page.style.removeProperty('width')
|
||||
return pagination == this.hideTo
|
||||
})
|
||||
|
||||
this.scrollToPage(this.hideTo ?? 0, 'auto')
|
||||
|
||||
this.hideTo = undefined
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
import GaiaContainerChild from './gaia-container-child'
|
||||
import GaiaContainer from './container'
|
||||
import GaiaContainerFolderPageManager from './gaia-container-folder-page'
|
||||
import {STATUS} from './contianer-interface'
|
||||
|
||||
/**
|
||||
* 主屏文件夹，只允许 App 图标进入，且文件夹内图标数量大于2时才稳定存在
|
||||
|
|
@ -10,10 +12,9 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
name: string
|
||||
// 图标 TagName
|
||||
iconName: string = 'gaia-app-icon'
|
||||
// 图标隐藏标题属性
|
||||
hideAttrName = 'hide-subtitle'
|
||||
// 文件夹子节点
|
||||
_children: GaiaContainerChild[] = []
|
||||
// _children: GaiaContainerChild[] = []
|
||||
_children: Set<GaiaContainerChild> = new Set()
|
||||
isFolder: boolean = true
|
||||
// 文件夹开启状态
|
||||
_status: number = 0
|
||||
|
|
@ -25,9 +26,12 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
// 文件夹名元素
|
||||
_title: HTMLElement | null = null
|
||||
// 开启文件夹动画计时器
|
||||
openTimer: number | undefined = undefined
|
||||
openTimer?: number
|
||||
transitionTimer?: number
|
||||
// 子节点坐标
|
||||
childCoordinate: {[gridId: number]: GaiaContainerChild | undefined}[] = [{}]
|
||||
// 分页管理器
|
||||
pageManager!: GaiaContainerFolderPageManager
|
||||
gridHeight: number = 0
|
||||
gridWidth: number = 0
|
||||
|
||||
|
|
@ -43,11 +47,13 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
'GaiaContainerFolder',
|
||||
GaiaContainerFolder.shadowStyle()
|
||||
)
|
||||
this.pageManager = new GaiaContainerFolderPageManager(this)
|
||||
this.container.addEventListener('touchstart', this)
|
||||
this.container.addEventListener('touchmove', this)
|
||||
this.container.addEventListener('touchend', this)
|
||||
this.container.addEventListener('click', this)
|
||||
this.element.dataset.name = this.name
|
||||
this.master.className = 'folder initializing'
|
||||
this.master.className = 'folder initializing closed'
|
||||
this.master.id = this._id
|
||||
this.master.addEventListener(
|
||||
'animationend',
|
||||
|
|
@ -68,26 +74,20 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
|
||||
resize() {
|
||||
let element = this.element
|
||||
const firstChild = [...this._children][0]
|
||||
this._lastElementTop = element?.offsetTop!
|
||||
this._lastElementLeft = element?.offsetLeft!
|
||||
|
||||
this.gridHeight = this._children[0]._lastElementHeight!
|
||||
this.gridWidth = this._children[0]._lastElementWidth!
|
||||
this.gridHeight = firstChild._lastElementHeight!
|
||||
this.gridWidth = firstChild._lastElementWidth!
|
||||
}
|
||||
|
||||
get element() {
|
||||
if (
|
||||
!this._element ||
|
||||
!this._element.classList.contains('gaia-container-folder')
|
||||
!this._element.classList.contains('folder-page-container')
|
||||
) {
|
||||
const element = document.createElement('div')
|
||||
|
||||
element.classList.add('gaia-container-folder')
|
||||
this.folderIconWidth = this.manager.gridWidth * 0.6
|
||||
element.style.width = this.folderIconWidth + 'px'
|
||||
element.style.height = this.folderIconWidth + 'px'
|
||||
|
||||
this._element = element
|
||||
this._element = this.pageManager.container
|
||||
}
|
||||
return this._element
|
||||
}
|
||||
|
|
@ -107,6 +107,7 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
if (!this._container) {
|
||||
// Create container
|
||||
let container = document.createElement('div')
|
||||
container.appendChild(this.pageManager.container)
|
||||
container.classList.add('gaia-container-child')
|
||||
container.style.position = 'absolute'
|
||||
container.style.top = '0'
|
||||
|
|
@ -115,8 +116,6 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
container.style.height = this.manager.gridHeight + 'px'
|
||||
container.style.width = this.manager.gridWidth + 'px'
|
||||
|
||||
container.appendChild(this.element) //this.element是div.icon-container
|
||||
|
||||
this._container = container
|
||||
this.master.appendChild(container)
|
||||
}
|
||||
|
|
@ -124,15 +123,13 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
}
|
||||
|
||||
get children() {
|
||||
return this._children.map((child) => child.element)
|
||||
return [...this._children].map((child) => child.element)
|
||||
}
|
||||
|
||||
showIconsSubtitle(element: HTMLElement) {
|
||||
element.removeAttribute(this.hideAttrName)
|
||||
}
|
||||
|
||||
hideIconsSubtitle(element: HTMLElement) {
|
||||
element.setAttribute(this.hideAttrName, '')
|
||||
get folderPage() {
|
||||
return Math.round(
|
||||
this.element.scrollLeft / this.pageManager.pages[0].offsetWidth
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -140,7 +137,7 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
* @param {HTMLElement} element master
|
||||
*/
|
||||
movein(element: HTMLElement) {
|
||||
let target
|
||||
let target!: GaiaContainerChild
|
||||
let targetIndex
|
||||
this.manager._children.forEach((child: GaiaContainerChild, i) => {
|
||||
if (child.master == element) {
|
||||
|
|
@ -161,46 +158,107 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
targetIndex++
|
||||
}
|
||||
|
||||
typeof targetIndex == 'number' &&
|
||||
this.manager._children.splice(targetIndex, 1)
|
||||
typeof targetIndex == 'number' && this.manager._children.delete(target)
|
||||
}
|
||||
|
||||
addAppIcon(element: HTMLElement, shouldOpen = false) {
|
||||
const child = this.manager.getChildByElement(element)
|
||||
addAppIcon(child: GaiaContainerChild, order?: number) {
|
||||
// addAppIcon(child: GaiaContainerChild, order?: number) {
|
||||
this.manager._children.delete(child)
|
||||
this._children.add(child!)
|
||||
|
||||
this._children.push(child!)
|
||||
if (!this._status) {
|
||||
this.hideIconsSubtitle(child?.element!)
|
||||
const prePagination = child.pagination
|
||||
const preGrid = child.curGridId
|
||||
delete this.manager.childCoordinate[prePagination]?.[preGrid]
|
||||
if (order !== undefined) {
|
||||
this.insertAppIcon(child, order, 'immediately')
|
||||
} else {
|
||||
this.showIconsSubtitle(child?.element!)
|
||||
}
|
||||
|
||||
if (!this._status && shouldOpen) {
|
||||
this.suspendElement.push(element)
|
||||
this.open()
|
||||
} else {
|
||||
this.movein(element)
|
||||
this.element.appendChild(element)
|
||||
this.pageManager.appendIcon(child)
|
||||
}
|
||||
}
|
||||
|
||||
removeAppIcon(node: GaiaContainerChild | HTMLElement) {
|
||||
let removeChild = node
|
||||
if (node instanceof HTMLElement) {
|
||||
this._children = this._children.filter((child) => {
|
||||
const arr = [...this._children].filter((child) => {
|
||||
if (child.master == node && child.container == node) {
|
||||
removeChild = child
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
this._children = new Set(arr)
|
||||
}
|
||||
if (!removeChild) return null
|
||||
this.showIconsSubtitle((removeChild as GaiaContainerChild).element!)
|
||||
this.manager._children.push(removeChild as GaiaContainerChild)
|
||||
this.manager._children.add(removeChild as GaiaContainerChild)
|
||||
return removeChild
|
||||
}
|
||||
|
||||
insertTimer?: number
|
||||
insertAppIcon(
|
||||
child: GaiaContainerChild,
|
||||
order: number,
|
||||
mode: 'delay' | 'immediately' = 'delay'
|
||||
) {
|
||||
clearTimeout(this.insertTimer)
|
||||
this.insertTimer = undefined
|
||||
if (!child) return
|
||||
const dropChild = this.getCurrentChildByOrder(order)
|
||||
|
||||
const exchange = (_: number) => {
|
||||
if (dropChild) {
|
||||
this.pageManager.appendIcon(child, {dropChild, order})
|
||||
|
||||
const children = [...this._children]
|
||||
const index = children.indexOf(dropChild)
|
||||
children.splice(index, 0, child)
|
||||
|
||||
this._children = new Set(children)
|
||||
} else {
|
||||
this.pageManager.appendIcon(child, {order})
|
||||
}
|
||||
this.synchroniseChildren()
|
||||
}
|
||||
|
||||
if (mode == 'immediately') {
|
||||
exchange(order)
|
||||
} else {
|
||||
this.insertTimer = window.setTimeout(() => exchange(order), 300)
|
||||
}
|
||||
}
|
||||
|
||||
sortOrder() {
|
||||
;[...this._children].forEach((child, i) => {
|
||||
child.order = i
|
||||
})
|
||||
}
|
||||
|
||||
synchroniseChildren() {
|
||||
this._children.forEach((child) => {
|
||||
child.synchroniseContainer()
|
||||
})
|
||||
}
|
||||
|
||||
/* 向后寻找顺序最接近传入的order的子节点 */
|
||||
getCurrentChildByOrder(order: number) {
|
||||
for (const child of [...this._children]) {
|
||||
if (child.order >= order) {
|
||||
return child
|
||||
}
|
||||
}
|
||||
|
||||
return undefined
|
||||
}
|
||||
|
||||
getChildByOrder(order: number) {
|
||||
for (const child of [...this._children]) {
|
||||
if (child.order == order) {
|
||||
return child
|
||||
}
|
||||
}
|
||||
|
||||
return undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查文件夹名是否存在，存在则替换成 ‘新建文件夹n’ 样式的名字，
|
||||
* 未传入文件名，则生成一个不重复的文件夹名
|
||||
|
|
@ -226,17 +284,29 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
open() {
|
||||
if (this._status) return
|
||||
this._status = 1
|
||||
this.manager.dispatchEvent(
|
||||
new CustomEvent('open-folder', {
|
||||
detail: {
|
||||
folder: this,
|
||||
},
|
||||
})
|
||||
)
|
||||
this.manager.classList.remove('open-folder')
|
||||
this.manager.status |= STATUS.OPEN_FORDER
|
||||
this.master.classList.add('openning')
|
||||
this._children.forEach((child) => this.showIconsSubtitle(child.element!))
|
||||
this.manager.status |= 16
|
||||
this.master.classList.add('active')
|
||||
this.master.classList.remove('closed')
|
||||
this.manager.openedFolder = this
|
||||
this.container.style.height = '100%'
|
||||
this.container.style.width = '100%'
|
||||
this.pageManager.hidePages(this.folderPage)
|
||||
this.container.style.height = '100vh'
|
||||
this.container.style.width = '100vw'
|
||||
// this.container.style.top = -this.manager.top + 'px'
|
||||
// this.container.style.left = -this.manager.left + 'px'
|
||||
this.master.style.setProperty('z-index', String(10))
|
||||
this.container.style.removeProperty('--grid-height')
|
||||
this.container.style.removeProperty('--grid-width')
|
||||
|
||||
this.element.addEventListener('transitionend', this.openTransition)
|
||||
this.container.addEventListener('transitionend', this.openTransition)
|
||||
}
|
||||
|
||||
openTransition = (evt: TransitionEvent) => {
|
||||
|
|
@ -248,28 +318,36 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
}
|
||||
|
||||
if (
|
||||
this._children[this._children.length - 1].master.compareDocumentPosition(
|
||||
evt.target as HTMLElement
|
||||
) & 16
|
||||
[...this._children][
|
||||
this._children.size - 1
|
||||
].master.compareDocumentPosition(evt.target as HTMLElement) & 16
|
||||
) {
|
||||
return
|
||||
}
|
||||
this.pageManager.showPages()
|
||||
this.container.style.setProperty('--folder-element-left', '0px')
|
||||
this.container.style.setProperty('--folder-element-top', '0px')
|
||||
this.openTimer = window.setTimeout(() => {
|
||||
this._children.forEach((child) => child.synchroniseContainer())
|
||||
this.master.classList.remove('openning')
|
||||
this.master.classList.add('opened')
|
||||
// 图标换位时可以进行动画
|
||||
this.transitionTimer = window.setTimeout(
|
||||
() => this.master.classList.add('transition'),
|
||||
50
|
||||
)
|
||||
let element = this.suspendElement.shift()
|
||||
while (element) {
|
||||
this.movein(element)
|
||||
// this.movein(element)
|
||||
this.element.appendChild(element)
|
||||
element = this.suspendElement.shift()
|
||||
}
|
||||
this.gridHeight = this._children[0]._lastElementHeight!
|
||||
this.gridWidth = this._children[0]._lastElementWidth!
|
||||
const firstChild = [...this._children][0]
|
||||
this.gridHeight = firstChild._lastElementHeight!
|
||||
this.gridWidth = firstChild._lastElementWidth!
|
||||
})
|
||||
|
||||
this.element.removeEventListener('transitionend', this.openTransition)
|
||||
this.container.removeEventListener('transitionend', this.openTransition)
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -279,28 +357,42 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
close() {
|
||||
if (!this._status) return
|
||||
clearTimeout(this.openTimer)
|
||||
this._children = this._children.filter((child) => {
|
||||
clearTimeout(this.transitionTimer)
|
||||
this.manager.dispatchEvent(
|
||||
new CustomEvent('close-folder', {
|
||||
detail: {
|
||||
folder: this,
|
||||
},
|
||||
})
|
||||
)
|
||||
this.manager.classList.remove('open-folder')
|
||||
this.master.classList.remove('active')
|
||||
this.manager.status &= ~STATUS.OPEN_FORDER
|
||||
const arr = [...this._children].filter((child) => {
|
||||
if (child.container.classList.contains('dragging')) {
|
||||
this.removeAppIcon(child)
|
||||
return false
|
||||
} else {
|
||||
this.hideIconsSubtitle(child.element!)
|
||||
return true
|
||||
}
|
||||
})
|
||||
this._children = new Set(arr)
|
||||
|
||||
this.pageManager.scrollToPage(0)
|
||||
|
||||
this.master.classList.remove('openning')
|
||||
this.master.classList.remove('opened')
|
||||
this.master.classList.remove('transition')
|
||||
this.master.classList.add('closing')
|
||||
this.element.removeEventListener('transitionend', this.openTransition)
|
||||
this.container.removeEventListener('transitionend', this.openTransition)
|
||||
|
||||
this.manager.status &= ~16
|
||||
this.manager.openedFolder = null
|
||||
this.container.style.height = this.manager.gridHeight + 'px'
|
||||
this.container.style.width = this.manager.gridWidth + 'px'
|
||||
this.element.addEventListener(
|
||||
this.container.addEventListener(
|
||||
'transitionend',
|
||||
() => {
|
||||
this.pageManager.scrollToPage(0)
|
||||
this._status = 0
|
||||
this._children.forEach((child) => child.synchroniseContainer())
|
||||
this.container.style.setProperty(
|
||||
|
|
@ -313,18 +405,20 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
)
|
||||
this.master.style.removeProperty('z-index')
|
||||
this.master.classList.remove('closing')
|
||||
if (this._children.length <= 1) {
|
||||
this.master.classList.add('closed')
|
||||
if (this._children.size <= 1) {
|
||||
this.destroy()
|
||||
}
|
||||
this.gridHeight = this._children[0]._lastElementHeight!
|
||||
this.gridWidth = this._children[0]._lastElementWidth!
|
||||
const firstChild = [...this._children][0]
|
||||
this.gridHeight = firstChild._lastElementHeight!
|
||||
this.gridWidth = firstChild._lastElementWidth!
|
||||
},
|
||||
{once: true}
|
||||
)
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this._children.length > 0) {
|
||||
if (this._children.size > 0) {
|
||||
return
|
||||
}
|
||||
const {height: originHeight, width: originWidth} =
|
||||
|
|
@ -332,9 +426,9 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
const {height: targetHeight, width: targetWidth} =
|
||||
this.element.getBoundingClientRect()
|
||||
|
||||
const child = this._children[0]
|
||||
const master = this._children[0].master
|
||||
this.manager._children.push(child)
|
||||
const child = [...this._children][0]
|
||||
const master = child.master
|
||||
this.manager._children.add(child)
|
||||
const childContainer = master.querySelector(
|
||||
'.gaia-container-child'
|
||||
) as HTMLElement
|
||||
|
|
@ -346,7 +440,6 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
|
||||
// nextTick，用以配合 originXXX 形成动画
|
||||
window.setTimeout(() => {
|
||||
this.showIconsSubtitle(this._children[0].element!)
|
||||
this.element.style.height = targetHeight + 'px'
|
||||
this.element.style.width = targetWidth + 'px'
|
||||
})
|
||||
|
|
@ -380,28 +473,35 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
handleEvent(evt: TouchEvent) {
|
||||
switch (evt.type) {
|
||||
// @ts-ignore
|
||||
case 'touchend':
|
||||
if (this._status && evt.target === this.container) {
|
||||
this.close()
|
||||
}
|
||||
case 'click':
|
||||
if (
|
||||
this._status &&
|
||||
(evt.target as HTMLElement).tagName !== 'SITE-ICON'
|
||||
(this._status &&
|
||||
(evt.target as HTMLElement).classList.contains('folder-page')) ||
|
||||
(evt.target as HTMLElement).classList.contains('gaia-container-child')
|
||||
) {
|
||||
evt.preventDefault()
|
||||
evt.stopImmediatePropagation()
|
||||
}
|
||||
break
|
||||
case 'touchstart':
|
||||
case 'touchmove':
|
||||
if (
|
||||
this._status &&
|
||||
(evt.target as HTMLElement).tagName !== 'SITE-ICON'
|
||||
) {
|
||||
evt.preventDefault()
|
||||
evt.stopImmediatePropagation()
|
||||
case 'touchend':
|
||||
if (this._status && evt.target === this.container) {
|
||||
this.close()
|
||||
}
|
||||
break
|
||||
// @ts-ignore
|
||||
case 'touchmove':
|
||||
// if (
|
||||
// this.manager._dnd.child &&
|
||||
// !this.manager._dnd.child.isFolder &&
|
||||
// this.manager._dnd.child.element?.compareDocumentPosition?.(
|
||||
// evt.target as HTMLElement
|
||||
// )! & 16
|
||||
// ) {
|
||||
// evt.preventDefault()
|
||||
// evt.stopImmediatePropagation()
|
||||
// }
|
||||
case 'touchstart':
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -410,60 +510,7 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
::slotted(.gaia-container-child) {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
::slotted(.gaia-container-folder) {
|
||||
display: grid;
|
||||
position: unset;
|
||||
grid-template-rows: repeat(4, 25%);
|
||||
grid-template-columns: repeat(4, 25%);
|
||||
grid-auto-flow: row dense;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 0 0px 3px rgba(255,255,255,0.5);
|
||||
border-radius: 5px;
|
||||
transition: transform 0.2s, box-shadow 0.2s, height 0.2s, width 0.2s !important;
|
||||
}
|
||||
|
||||
::slotted(.gaia-container-folder::before) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
::slotted(.gaia-container-folder) .gaia-container-child {
|
||||
height: 12.5% !important;
|
||||
width: 12.5% !important;
|
||||
}
|
||||
|
||||
::slotted(.gaia-container-folder) gaia-app-icon {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::slotted(.gaia-container-folder::after) {
|
||||
content: '';
|
||||
z-index: 99;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
pointer-events: all;
|
||||
position: absolute;
|
||||
}
|
||||
::slotted(.folder.opened) .gaia-container-folder::after {
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
::slotted( ) .folder:not(.opened) .gaia-container-folder .gaia-container-child:not(.dragging) {
|
||||
position: unset !important;
|
||||
}
|
||||
::slotted(.folder.openning) .gaia-container-folder {
|
||||
position: relative;
|
||||
}
|
||||
::slotted(.folder.initializing) .gaia-container-child {
|
||||
position: unset !important;
|
||||
transform: unset !important;
|
||||
|
|
@ -477,23 +524,11 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
animation: folder-fadein 0.3s cubic-bezier(.08,.82,.17,1);
|
||||
}
|
||||
|
||||
::slotted(.folder.opened) .gaia-container-folder {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
::slotted(.folder) .container-master {
|
||||
pointer-events: none;
|
||||
}
|
||||
::slotted(.folder.opened) .container-master {
|
||||
pointer-events: unset;
|
||||
}
|
||||
::slotted(.destroying) .gaia-container-folder {
|
||||
display: block;
|
||||
}
|
||||
::slotted(.destroying) .gaia-container-folder::before {
|
||||
transform-origin: bottom right;
|
||||
transform: scale(0);
|
||||
transition: transform 0.5s;
|
||||
pointer-events: all;
|
||||
}
|
||||
::slotted(.destroying) .folder-title {
|
||||
opacity: 0;
|
||||
|
|
@ -508,24 +543,22 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
margin-top: 3px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
transform: translateY(calc(var(--icon-size) / 2));
|
||||
}
|
||||
|
||||
::slotted(.folder.closing) .folder-title,
|
||||
::slotted(.folder.opened) .folder-title,
|
||||
::slotted(.folder.openning) .folder-title {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
::slotted(.gaia-container-folder) .gaia-container-child {
|
||||
display: unset !important;
|
||||
}
|
||||
::slotted(.folder.openning) > .gaia-container-child,
|
||||
::slotted(.folder.opened) > .gaia-container-child {
|
||||
left: calc(var(--pagination) * var(--page-width)) !important;
|
||||
transform: translate(0) !important;
|
||||
transform: translate(calc(var(--container-left) * -1), calc(var(--container-top) * -1)) !important;
|
||||
}
|
||||
|
||||
::slotted(.folder.openning) > .gaia-container-child {
|
||||
transform: translate(0) !important;
|
||||
transform: translate(calc(var(--container-left) * -1), calc(var(--container-top) * -1)) !important;
|
||||
}
|
||||
::slotted(.folder.openning) .gaia-container-child {
|
||||
transition: left 0.2s, height 0.2s, width 0.2s !important;
|
||||
|
|
@ -540,14 +573,6 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
transition: unset !important;
|
||||
}
|
||||
|
||||
::slotted(.folder.opened) .gaia-container-folder,
|
||||
::slotted(.folder.openning) .gaia-container-folder {
|
||||
height: 50% !important;
|
||||
max-height: 500px;
|
||||
width: 50% !important;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
::slotted(.scaling) {
|
||||
transform-origin: top left;
|
||||
position: unset !important;
|
||||
|
|
@ -558,6 +583,106 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 文件夹名(文件夹图标下) */
|
||||
::slotted(.folder-title) {
|
||||
height: 0;
|
||||
margin-top: 1.5vmin !important;
|
||||
color: var(--icon-font-color, #fff);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 文件夹容器 */
|
||||
::slotted(.folder-page-container) {
|
||||
/* 占图标的实心区域的长宽 */
|
||||
height: calc(var(--icon-size) * 0.75);
|
||||
width: calc(var(--icon-size) * 0.75);
|
||||
background-color: rgba(245, 245, 245, 0.3);
|
||||
border-radius: 1.67vmin;
|
||||
box-shadow: 0 0 0 0.66vmin rgba(245, 245, 245, 0.3);
|
||||
scroll-snap-type: x mandatory;
|
||||
padding: 0.2vmin;
|
||||
}
|
||||
|
||||
::slotted(.folder.closing) .folder-page-container,
|
||||
::slotted(.folder.opened) .folder-page-container,
|
||||
::slotted(.folder.openning) .folder-page-container {
|
||||
transition: height 0.2s, width 0.2s, transform !important;
|
||||
background-color: unset;
|
||||
box-shadow: unset;
|
||||
}
|
||||
::slotted(.folder.opened) .folder-page-container,
|
||||
::slotted(.folder.openning) .folder-page-container {
|
||||
/* 处于开启状态或开启中状态时, 文件夹分页的高度随之变化 */
|
||||
height: 74.67vmin;
|
||||
width: 73.33vmin;
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
/* 文件夹分页 */
|
||||
::slotted(.folder-page) {
|
||||
display: inline flex;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
vertical-align: top;
|
||||
margin-right: 0.2vmin;
|
||||
pointer-events: none;
|
||||
scroll-snap-align: center;
|
||||
/* 在图标状态下, 分页会冒出来莫名其妙的空白区域,需要隐藏 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
::slotted(.folder.opened) .folder-page {
|
||||
margin-right: 0;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* 位于文件夹内的子元素占位节点 */
|
||||
::slotted(.folder-page) .container-master,
|
||||
::slotted(.folder-page) .tail {
|
||||
height: 25% !important;
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
/* 非开启的文件夹中, 子图标都不采用绝对定位和位移样式 */
|
||||
::slotted(.folder.openning) .folder-page .container-master:not(.switch) .gaia-container-child,
|
||||
::slotted(.folder.closing) .folder-page .container-master:not(.switch) .gaia-container-child,
|
||||
::slotted(.folder.closed) .folder-page .container-master:not(.switch) .gaia-container-child {
|
||||
position: unset !important;
|
||||
transform: unset !important;
|
||||
}
|
||||
::slotted(.folder) .folder-page .gaia-container-child {
|
||||
transition: unset !important;
|
||||
}
|
||||
::slotted(.folder.opened.transition) .folder-page .gaia-container-child {
|
||||
transition: transform 0.2s !important;
|
||||
}
|
||||
/* 文件夹下的子图标容器因为没采用绝对定位, 高宽跟随其 master 变化 */
|
||||
::slotted(.folder) .folder-item{
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
/* 开启状态下, 子图标因为采用了绝对定位, 为了大小不变, 更改高宽 */
|
||||
::slotted(.folder.opened) .folder-item {
|
||||
height: 25% !important;
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
::slotted(.folder-page-container) {
|
||||
position: absolute;
|
||||
transform: translate(0, 0);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
::slotted(.folder-page-container.opened) {
|
||||
height: 50vh;
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
@keyframes folder-fadein {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export class IconControlBar extends LitElement {
|
|||
@property({type: Boolean}) active = false
|
||||
@property({type: Boolean}) longPress = false
|
||||
@property({type: Boolean}) isNameShown = false
|
||||
@state({}) timer!: NodeJS.Timeout
|
||||
@state({}) timer!: number
|
||||
|
||||
@query('.more-info-icon') moreInfoIcon!: HTMLDivElement
|
||||
@query('.icon-button') iconBtn!: HTMLDivElement
|
||||
|
|
@ -249,7 +249,7 @@ export class IconControlBar extends LitElement {
|
|||
return
|
||||
}
|
||||
|
||||
this.timer = setTimeout(() => {
|
||||
this.timer = window.setTimeout(() => {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('icon-control-bar-touch-start', {
|
||||
detail: {
|
||||
|
|
|
|||
|
|
@ -200,7 +200,15 @@ export class PickerBase extends LitElement {
|
|||
public destroy!: Function
|
||||
public init!: Function
|
||||
|
||||
public weekArrayList = ['周日','周一','周二','周三','周四','周五','周六']
|
||||
public weekArrayList = [
|
||||
'周日',
|
||||
'周一',
|
||||
'周二',
|
||||
'周三',
|
||||
'周四',
|
||||
'周五',
|
||||
'周六',
|
||||
]
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
|
|
@ -382,9 +390,12 @@ export class PickerBase extends LitElement {
|
|||
html += '<div class="p-select-head">'
|
||||
html += '<div class="p-select-btn">'
|
||||
html += '<img src="' + close_lm + '" class="p-select-cancel-btn"></img>'
|
||||
html += '<img src="' + check + '" class="p-select-back-btn" style="display: none"></img>'
|
||||
html +=
|
||||
'<img src="' +
|
||||
check +
|
||||
'" class="p-select-back-btn" style="display: none"></img>'
|
||||
html += '</div>'
|
||||
|
||||
|
||||
if (_this.option.headTitle != '') {
|
||||
html +=
|
||||
'<div class="p-select-title">' + _this.option.headTitle + '</div>'
|
||||
|
|
@ -392,7 +403,7 @@ export class PickerBase extends LitElement {
|
|||
html += '<div class="p-select-btn">'
|
||||
html += '<img src="' + check + '" class="p-select-submit-btn"></img>'
|
||||
html += '</div>'
|
||||
|
||||
|
||||
html += '</div>'
|
||||
html += '<div class="p-select-body">'
|
||||
// html +=
|
||||
|
|
@ -403,7 +414,7 @@ export class PickerBase extends LitElement {
|
|||
// 'px)"'
|
||||
// : '') +
|
||||
// '></div>'
|
||||
if(wheels.length == 5){
|
||||
if (wheels.length == 5) {
|
||||
html += '<div class="p-select-date">'
|
||||
for (let i = 0; i < 2; i++) {
|
||||
let label = wheels[i].label
|
||||
|
|
@ -465,7 +476,7 @@ export class PickerBase extends LitElement {
|
|||
'px)"'
|
||||
: '') +
|
||||
'>'
|
||||
html += '<ul class="p-select-ul'+(i == 2 ? " p-dayitem":"") + '">'
|
||||
html += '<ul class="p-select-ul' + (i == 2 ? ' p-dayitem' : '') + '">'
|
||||
html += generateItems(
|
||||
wheels[i],
|
||||
-_this.itemSize2d,
|
||||
|
|
@ -475,7 +486,10 @@ export class PickerBase extends LitElement {
|
|||
html += '</ul>'
|
||||
html += '</div>'
|
||||
if (_this.option.scrollType == '3d') {
|
||||
html += '<ul class="p-select-wheel'+(i == 2 ? " p-dayitem-wheel":"") + '">'
|
||||
html +=
|
||||
'<ul class="p-select-wheel' +
|
||||
(i == 2 ? ' p-dayitem-wheel' : '') +
|
||||
'">'
|
||||
html += generateItems(
|
||||
wheels[i],
|
||||
-_this.itemSize3d,
|
||||
|
|
@ -500,7 +514,7 @@ export class PickerBase extends LitElement {
|
|||
html += '</div>'
|
||||
}
|
||||
html += '</div>'
|
||||
}else{
|
||||
} else {
|
||||
for (let i = 0; i < wheels.length; i++) {
|
||||
let label = wheels[i].label
|
||||
html += '<div class="p-select-item">'
|
||||
|
|
@ -685,22 +699,14 @@ export class PickerBase extends LitElement {
|
|||
// )
|
||||
// this.el.addEventListener('mouseup', this.touchEnd.bind(this), false)
|
||||
// } else {
|
||||
this.el.addEventListener(
|
||||
'touchstart',
|
||||
this.touchStart.bind(this),
|
||||
false
|
||||
)
|
||||
this.el.addEventListener(
|
||||
'touchmove',
|
||||
this.touchMove.bind(this),
|
||||
false
|
||||
)
|
||||
this.el.addEventListener('touchend', this.touchEnd.bind(this), false)
|
||||
this.el.addEventListener(
|
||||
'touchcancel',
|
||||
this.touchEnd.bind(this),
|
||||
false
|
||||
)
|
||||
this.el.addEventListener(
|
||||
'touchstart',
|
||||
this.touchStart.bind(this),
|
||||
false
|
||||
)
|
||||
this.el.addEventListener('touchmove', this.touchMove.bind(this), false)
|
||||
this.el.addEventListener('touchend', this.touchEnd.bind(this), false)
|
||||
this.el.addEventListener('touchcancel', this.touchEnd.bind(this), false)
|
||||
// }
|
||||
|
||||
if (_this.option.scrollType == '3d') {
|
||||
|
|
@ -1038,16 +1044,26 @@ export class PickerBase extends LitElement {
|
|||
//传出初始结果
|
||||
_this.option.init(_this.rs)
|
||||
|
||||
let submitBtn = _this.shadowRoot!.querySelector('.p-select-submit-btn') as HTMLElement
|
||||
let cancelBtn = _this.shadowRoot!.querySelector('.p-select-cancel-btn') as HTMLElement
|
||||
let submitBtn = _this.shadowRoot!.querySelector(
|
||||
'.p-select-submit-btn'
|
||||
) as HTMLElement
|
||||
let cancelBtn = _this.shadowRoot!.querySelector(
|
||||
'.p-select-cancel-btn'
|
||||
) as HTMLElement
|
||||
// 日期选择器点击标题事件
|
||||
if(this.opt.headResult) {
|
||||
if (this.opt.headResult) {
|
||||
let title = this.shadowRoot!.querySelector(
|
||||
'.p-select-title'
|
||||
) as HTMLElement
|
||||
let datepart = _this.shadowRoot!.querySelector('.p-select-date') as HTMLElement
|
||||
let timepart = _this.shadowRoot!.querySelector('.p-select-time') as HTMLElement
|
||||
let backbtn = _this.shadowRoot!.querySelector('.p-select-back-btn') as HTMLElement
|
||||
let datepart = _this.shadowRoot!.querySelector(
|
||||
'.p-select-date'
|
||||
) as HTMLElement
|
||||
let timepart = _this.shadowRoot!.querySelector(
|
||||
'.p-select-time'
|
||||
) as HTMLElement
|
||||
let backbtn = _this.shadowRoot!.querySelector(
|
||||
'.p-select-back-btn'
|
||||
) as HTMLElement
|
||||
// let dayitem = _this.shadowRoot!.querySelector('.p-dayitem') as HTMLElement
|
||||
// let dayitemwheel = _this.shadowRoot!.querySelector('.p-dayitem-wheel') as HTMLElement
|
||||
title.addEventListener(
|
||||
|
|
@ -1061,7 +1077,7 @@ export class PickerBase extends LitElement {
|
|||
},
|
||||
false
|
||||
)
|
||||
backbtn.addEventListener('click',function(){
|
||||
backbtn.addEventListener('click', function () {
|
||||
datepart.style.display = 'none'
|
||||
backbtn.style.display = 'none'
|
||||
timepart.style.display = 'flex'
|
||||
|
|
@ -1081,7 +1097,7 @@ export class PickerBase extends LitElement {
|
|||
// )
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// mask = _this.shadowRoot!.querySelector('.p-select-mask')
|
||||
submitBtn.addEventListener(
|
||||
'click',
|
||||
|
|
@ -1355,12 +1371,11 @@ export class PickerBase extends LitElement {
|
|||
let title = this.shadowRoot!.querySelector(
|
||||
'.p-select-title'
|
||||
) as HTMLElement
|
||||
if(this.opt.date){
|
||||
title.innerText = result[0].display +'年' + result[1].display + '月'
|
||||
}else {
|
||||
if (this.opt.date) {
|
||||
title.innerText = result[0].display + '年' + result[1].display + '月'
|
||||
} else {
|
||||
title.innerText = this.lastValue
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1514,7 +1529,7 @@ export class PickerBase extends LitElement {
|
|||
headTitle: '<span>新建闹钟</span>',
|
||||
date: false,
|
||||
container: '.screen',
|
||||
init: (rs:any) => {
|
||||
init: (rs: any) => {
|
||||
if (this.opt.date) {
|
||||
var year = rs.result[0].value
|
||||
var month = rs.result[1].value
|
||||
|
|
@ -1522,7 +1537,7 @@ export class PickerBase extends LitElement {
|
|||
}
|
||||
this.getLastVal(rs.result)
|
||||
},
|
||||
getResult: (rs:any) => {
|
||||
getResult: (rs: any) => {
|
||||
var n1 = this.opt.date && (rs.scrollIdx == 0 || rs.scrollIdx == 1)
|
||||
;(this.year = rs.result[0].value), (this.month = rs.result[1].value)
|
||||
if (n1) {
|
||||
|
|
@ -1553,7 +1568,7 @@ export class PickerBase extends LitElement {
|
|||
headTitle: this.opt.headResult ? 1 : '',
|
||||
headResult: true,
|
||||
container: '.screen',
|
||||
init: (rs:any) => {
|
||||
init: (rs: any) => {
|
||||
if (this.opt.date) {
|
||||
var year = rs.result[0].value
|
||||
var month = rs.result[1].value
|
||||
|
|
@ -1561,7 +1576,7 @@ export class PickerBase extends LitElement {
|
|||
}
|
||||
this.getLastVal(rs.result)
|
||||
},
|
||||
getResult: (rs:any) => {
|
||||
getResult: (rs: any) => {
|
||||
var n1 = this.opt.date && (rs.scrollIdx == 0 || rs.scrollIdx == 1)
|
||||
;(this.year = rs.result[0].value), (this.month = rs.result[1].value)
|
||||
if (n1) {
|
||||
|
|
@ -1569,7 +1584,7 @@ export class PickerBase extends LitElement {
|
|||
}
|
||||
this.getLastVal(rs.result)
|
||||
},
|
||||
save: (_rs:any, target:any) => {
|
||||
save: (_rs: any, target: any) => {
|
||||
if (target.isInput) {
|
||||
target.value = this.lastValue
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
## star-switch
|
||||
|
||||
星光 Web 组件 --- Swiper 组件（10 月 17 日）
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -19,4 +19,4 @@
|
|||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,4 +5,4 @@
|
|||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts"]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
import {html, LitElement} from 'lit'
|
||||
import {customElement, query} from 'lit/decorators.js'
|
||||
|
||||
@customElement('panel-animation')
|
||||
export class PanelAnimation extends LitElement {
|
||||
@query('#container') container!: HTMLElement
|
||||
@query('star-battery') battery!: HTMLElement
|
||||
render() {
|
||||
return html`
|
||||
<star-animation></star-animation>
|
||||
`
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'panel-animation': PanelAnimation
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,843 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
|
||||
export const sharedStyles: CSSResult = css`
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 30px;
|
||||
text-align: center;
|
||||
background: linear-gradient(
|
||||
137.64deg,
|
||||
#f5f0f5 0%,
|
||||
#fafafa 20.46%,
|
||||
#d5daf2 90.45%
|
||||
);
|
||||
}
|
||||
|
||||
.expansion {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 280px;
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 450px;
|
||||
}
|
||||
|
||||
.fadeOut {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 600px;
|
||||
}
|
||||
|
||||
.open {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 750px;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 950px;
|
||||
}
|
||||
|
||||
.moveX {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 1250px;
|
||||
}
|
||||
|
||||
.moveY {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 1650px;
|
||||
}
|
||||
|
||||
.appear {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 2050px;
|
||||
}
|
||||
|
||||
.disappear {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 2400px;
|
||||
}
|
||||
|
||||
.size {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 2600px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.press {
|
||||
animation: press 1s cubic-bezier(0, 0.35, 0.2, 1) infinite;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.free {
|
||||
animation: free 1s cubic-bezier(0, 0.35, 0.2, 1) infinite;
|
||||
background: none;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.background_v1 {
|
||||
animation: background_v1 1s cubic-bezier(0, 0.35, 0.2, 1) infinite;
|
||||
background: none;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.background_v2 {
|
||||
animation: background_v2 1s cubic-bezier(0, 0.35, 0.2, 1) infinite;
|
||||
background: none;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
.contraction_v1 {
|
||||
animation: contraction_v1 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.contraction_v2 {
|
||||
animation: contraction_v2 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.contraction_v3 {
|
||||
animation: contraction_v3 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.contraction_v4 {
|
||||
animation: contraction_v4 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
.contraction_v5 {
|
||||
animation: contraction_v5 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 400px;
|
||||
}
|
||||
|
||||
.contraction_v6 {
|
||||
animation: contraction_v6 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 500px;
|
||||
}
|
||||
|
||||
.contraction_v7 {
|
||||
animation: contraction_v7 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 600px;
|
||||
}
|
||||
|
||||
.contraction_v8 {
|
||||
animation: contraction_v8 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 700px;
|
||||
}
|
||||
|
||||
.contraction_v9 {
|
||||
animation: contraction_v9 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 800px;
|
||||
}
|
||||
|
||||
.expansion_v1 {
|
||||
animation: expansion_v1 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.expansion_v2 {
|
||||
animation: expansion_v2 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.expansion_v3 {
|
||||
animation: expansion_v3 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.expansion_v4 {
|
||||
animation: expansion_v4 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
.expansion_v5 {
|
||||
animation: expansion_v5 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 400px;
|
||||
}
|
||||
|
||||
.fadeIn_v1 {
|
||||
animation: fadeIn_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.fadeIn_v2 {
|
||||
animation: fadeIn_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.fadeIn_v3 {
|
||||
animation: fadeIn_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.fadeIn_v4 {
|
||||
animation: fadeIn_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
.fadeIn_v5 {
|
||||
animation: fadeIn_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
left: 400px;
|
||||
}
|
||||
|
||||
.fadeIn_v6 {
|
||||
animation: fadeIn_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 500px;
|
||||
}
|
||||
|
||||
.fadeIn_v7 {
|
||||
animation: fadeIn_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
left: 600px;
|
||||
}
|
||||
|
||||
.fadeIn_v8 {
|
||||
animation: fadeIn_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
left: 700px;
|
||||
}
|
||||
|
||||
.fadeIn_v9 {
|
||||
animation: fadeIn_v9 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
left: 800px;
|
||||
}
|
||||
|
||||
.fadeIn_v10 {
|
||||
animation: fadeIn_v10 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
left: 900px;
|
||||
}
|
||||
|
||||
.fadeIn_v11 {
|
||||
animation: fadeIn_v11 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
left: 1000px;
|
||||
}
|
||||
|
||||
.fadeOut_v1 {
|
||||
animation: fadeOut_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.fadeOut_v2 {
|
||||
animation: fadeOut_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.fadeOut_v3 {
|
||||
animation: fadeOut_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.fadeOut_v4 {
|
||||
animation: fadeOut_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
.fadeOut_v5 {
|
||||
animation: fadeOut_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
left: 400px;
|
||||
}
|
||||
|
||||
.fadeOut_v6 {
|
||||
animation: fadeOut_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 500px;
|
||||
}
|
||||
|
||||
.fadeOut_v7 {
|
||||
animation: fadeOut_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
left: 600px;
|
||||
}
|
||||
|
||||
.fadeOut_v8 {
|
||||
animation: fadeOut_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
left: 700px;
|
||||
}
|
||||
|
||||
.fadeOut_v9 {
|
||||
animation: fadeOut_v9 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
left: 800px;
|
||||
}
|
||||
|
||||
.fadeOut_v10 {
|
||||
animation: fadeOut_v10 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
left: 900px;
|
||||
}
|
||||
|
||||
.fadeOut_v11 {
|
||||
animation: fadeOut_v11 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
background: black;
|
||||
left: 1000px;
|
||||
}
|
||||
|
||||
.open_v1 {
|
||||
animation: open_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.open_v2 {
|
||||
animation: open_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.open_v3 {
|
||||
animation: open_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.open_v4 {
|
||||
animation: open_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
box-sizing: border-box;
|
||||
border: 0px solid red;
|
||||
}
|
||||
|
||||
.open_v5 {
|
||||
animation: open_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 400px;
|
||||
background: none;
|
||||
font-size: none;
|
||||
color: none;
|
||||
}
|
||||
|
||||
.open_v6 {
|
||||
animation: open_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 500px;
|
||||
}
|
||||
|
||||
.open_v7 {
|
||||
animation: open_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 600px;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.open_v8 {
|
||||
animation: open_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 800px;
|
||||
}
|
||||
|
||||
.open_v9 {
|
||||
animation: open_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 900px;
|
||||
}
|
||||
|
||||
.close_v1 {
|
||||
animation: close_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.close_v2 {
|
||||
animation: close_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.close_v3 {
|
||||
animation: close_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.close_v4 {
|
||||
animation: close_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
box-sizing: border-box;
|
||||
border: 0px solid red;
|
||||
}
|
||||
|
||||
.close_v5 {
|
||||
animation: close_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 400px;
|
||||
background: none;
|
||||
font-size: none;
|
||||
color: none;
|
||||
}
|
||||
|
||||
.close_v6 {
|
||||
animation: close_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 500px;
|
||||
}
|
||||
|
||||
.close_v7 {
|
||||
animation: close_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 600px;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.close_v8 {
|
||||
animation: close_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 800px;
|
||||
}
|
||||
|
||||
.moveX_v1 {
|
||||
animation: moveX_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.moveX_v2 {
|
||||
animation: moveX_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.moveX_v3 {
|
||||
animation: moveX_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
.moveX_v4 {
|
||||
animation: moveX_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.moveX_v5 {
|
||||
animation: moveX_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.moveX_v6 {
|
||||
animation: moveX_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 400px;
|
||||
}
|
||||
|
||||
.moveX_v7 {
|
||||
animation: moveX_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 500px;
|
||||
}
|
||||
|
||||
.moveX_v8 {
|
||||
animation: moveX_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 900px;
|
||||
}
|
||||
|
||||
.moveX_v9 {
|
||||
animation: moveX_v9 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 700px;
|
||||
}
|
||||
|
||||
.moveX_v10 {
|
||||
animation: moveX_v10 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
top: 300px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.moveY_v1 {
|
||||
animation: moveY_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.moveY_v2 {
|
||||
animation: moveY_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 170px;
|
||||
}
|
||||
|
||||
.moveY_v3 {
|
||||
animation: moveY_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.moveY_v4 {
|
||||
animation: moveY_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
.moveY_v5 {
|
||||
animation: moveY_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 400px;
|
||||
}
|
||||
|
||||
.moveY_v6 {
|
||||
animation: moveY_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 500px;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.moveY_v7 {
|
||||
animation: moveY_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 600px;
|
||||
}
|
||||
|
||||
.moveY_v8 {
|
||||
animation: moveY_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 700px;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.appear_v1 {
|
||||
animation: appear_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.appear_v2 {
|
||||
animation: appear_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.appear_v3 {
|
||||
animation: appear_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.appear_v4 {
|
||||
animation: appear_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
.appear_v5 {
|
||||
animation: appear_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 400px;
|
||||
}
|
||||
|
||||
.appear_v6 {
|
||||
animation: appear_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 500px;
|
||||
}
|
||||
|
||||
.appear_v7 {
|
||||
animation: appear_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 600px;
|
||||
}
|
||||
|
||||
.appear_v8 {
|
||||
animation: appear_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 700px;
|
||||
}
|
||||
|
||||
.appear_v9 {
|
||||
animation: appear_v9 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 800px;
|
||||
}
|
||||
|
||||
.appear_v10 {
|
||||
animation: appear_v10 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 900px;
|
||||
}
|
||||
|
||||
.appear_v11 {
|
||||
animation: appear_v11 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1000px;
|
||||
}
|
||||
|
||||
.appear_v12 {
|
||||
animation: appear_v12 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1100px;
|
||||
}
|
||||
|
||||
.appear_v13 {
|
||||
animation: appear_v13 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1200px;
|
||||
}
|
||||
|
||||
.appear_v14 {
|
||||
animation: appear_v14 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1300px;
|
||||
}
|
||||
|
||||
.appear_v15 {
|
||||
animation: appear_v15 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1400px;
|
||||
}
|
||||
|
||||
.appear_v16 {
|
||||
animation: appear_v16 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1600px;
|
||||
}
|
||||
|
||||
.appear_v17 {
|
||||
animation: appear_v17 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1700px;
|
||||
}
|
||||
|
||||
.appear_v18 {
|
||||
animation: appear_v18 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1800px;
|
||||
}
|
||||
|
||||
.disappear_v1 {
|
||||
animation: disappear_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.disappear_v2 {
|
||||
animation: disappear_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.disappear_v3 {
|
||||
animation: disappear_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.disappear_v4 {
|
||||
animation: disappear_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
.disappear_v5 {
|
||||
animation: disappear_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 400px;
|
||||
}
|
||||
|
||||
.disappear_v6 {
|
||||
animation: disappear_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 500px;
|
||||
}
|
||||
|
||||
.disappear_v7 {
|
||||
animation: disappear_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 600px;
|
||||
}
|
||||
|
||||
.disappear_v8 {
|
||||
animation: disappear_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 700px;
|
||||
}
|
||||
|
||||
.disappear_v9 {
|
||||
animation: disappear_v9 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 800px;
|
||||
}
|
||||
|
||||
.disappear_v10 {
|
||||
animation: disappear_v10 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 900px;
|
||||
}
|
||||
|
||||
.disappear_v11 {
|
||||
animation: disappear_v11 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1000px;
|
||||
}
|
||||
|
||||
.disappear_v12 {
|
||||
animation: disappear_v12 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1100px;
|
||||
}
|
||||
|
||||
.disappear_v13 {
|
||||
animation: disappear_v13 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1200px;
|
||||
}
|
||||
|
||||
.disappear_v14 {
|
||||
animation: disappear_v14 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1300px;
|
||||
}
|
||||
|
||||
.disappear_v15 {
|
||||
animation: disappear_v15 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1400px;
|
||||
}
|
||||
|
||||
.disappear_v16 {
|
||||
animation: disappear_v16 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1500px;
|
||||
}
|
||||
|
||||
.disappear_v17 {
|
||||
animation: disappear_v17 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1600px;
|
||||
}
|
||||
|
||||
.disappear_v18 {
|
||||
animation: disappear_v18 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1700px;
|
||||
}
|
||||
|
||||
.disappear_v19 {
|
||||
animation: disappear_v19 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1800px;
|
||||
}
|
||||
|
||||
.size_v1 {
|
||||
animation: size_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.size_v2 {
|
||||
animation: size_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 150px;
|
||||
}
|
||||
|
||||
.size_v3 {
|
||||
animation: size_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
.size_v4 {
|
||||
animation: size_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 900px;
|
||||
}
|
||||
|
||||
.size_v5 {
|
||||
animation: size_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1400px;
|
||||
}
|
||||
|
||||
.size_v6 {
|
||||
animation: size_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1500px;
|
||||
}
|
||||
|
||||
.size_v7 {
|
||||
animation: size_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 1600px;
|
||||
}
|
||||
|
||||
.size_v8 {
|
||||
animation: size_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
||||
position: absolute;
|
||||
left: 2000px;
|
||||
}
|
||||
`
|
||||
|
|
@ -64,6 +64,11 @@ export class PanelButton extends LitElement {
|
|||
<star-button type="normal" variant="default" size="small" label="普通按钮"></star-button>
|
||||
<star-button type="normal" variant="warn" size="small" label="警告按钮"></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="normal" theme="dark" variant="primary" size="small" label="强调按钮"></star-button>
|
||||
<star-button type="normal" theme="dark" variant="default" size="small" label="普通按钮"></star-button>
|
||||
<star-button type="normal" theme="dark" variant="warn" size="small" label="警告按钮"></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="normal" variant="primary" size="middle" label="强调按钮"></star-button>
|
||||
<star-button type="normal" variant="default" size="middle" label="普通按钮"></star-button>
|
||||
|
|
@ -85,7 +90,7 @@ export class PanelButton extends LitElement {
|
|||
<star-button type="normal" size="large" label="很长的变长按钮"></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="normal" size="small" label="最长最长最长最长最长最长最长"></star-button>
|
||||
<star-button type="normal" size="small" label="最长最长最长最长最长最长最长最长最长"></star-button>
|
||||
<star-button type="normal" size="middle" label="最长最长最长最长最长最长最长"></star-button>
|
||||
<star-button type="normal" size="large" label="最长最长最长最长最长最长最长"></star-button>
|
||||
</star-li>
|
||||
|
|
@ -95,9 +100,9 @@ export class PanelButton extends LitElement {
|
|||
<star-button type="normal" variant="warn" label="警告按钮" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="normal" width="100px" size="small" label="自定义长度100px(最小为200px)"></star-button>
|
||||
<star-button type="normal" width="400px" size="middle" label="自定义长度400px"></star-button>
|
||||
<star-button type="normal" width="600px" size="large" label="自定义长度600px(最小为520px)"></star-button>
|
||||
<star-button type="normal" variant="primary" width="100px" size="small" label="自定义长度100px(最小为200px)"></star-button>
|
||||
<star-button type="normal" variant="primary" width="400px" size="middle" label="自定义长度400px"></star-button>
|
||||
<star-button type="normal" variant="primary" width="600px" size="large" label="自定义长度600px(最小为520px)"></star-button>
|
||||
</star-li>
|
||||
</star-ul>
|
||||
|
||||
|
|
@ -118,11 +123,21 @@ export class PanelButton extends LitElement {
|
|||
<star-button type="pure" variant="primary" size="large" icon="delete"></star-button>
|
||||
<star-button type="pure" variant="primary" size="large" icon="delete" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" theme="dark" variant="primary" size="large" icon="bug"></star-button>
|
||||
<star-button type="pure" theme="dark" variant="primary" size="large" icon="delete"></star-button>
|
||||
<star-button type="pure" theme="dark" variant="primary" size="large" icon="delete" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" variant="default" size="extralarge" icon="bug"></star-button>
|
||||
<star-button type="pure" variant="default" size="extralarge" icon="delete"></star-button>
|
||||
<star-button type="pure" variant="default" size="extralarge" icon="delete" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" theme="dark" variant="default" size="extralarge" icon="bug"></star-button>
|
||||
<star-button type="pure" theme="dark" variant="default" size="extralarge" icon="delete"></star-button>
|
||||
<star-button type="pure" theme="dark" variant="default" size="extralarge" icon="delete" 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>
|
||||
|
|
@ -159,6 +174,10 @@ export class PanelButton extends LitElement {
|
|||
<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-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-li>
|
||||
</star-ul>
|
||||
|
||||
<h3>使用场景:对话框底部按钮</h3>
|
||||
|
|
@ -175,6 +194,18 @@ export class PanelButton extends LitElement {
|
|||
<star-button type="text" variant="warn" label="警告按钮"></star-button>
|
||||
<star-button type="text" variant="warn" label="警告按钮" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="text" theme="dark" variant="primary" label="强调按钮"></star-button>
|
||||
<star-button type="text" theme="dark" variant="primary" label="强调按钮" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="text" theme="dark" variant="default" label="普通按钮"></star-button>
|
||||
<star-button type="text" theme="dark" variant="default" label="普通按钮" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="text" theme="dark" variant="warn" label="警告按钮"></star-button>
|
||||
<star-button type="text" theme="dark" variant="warn" label="警告按钮" disabled></star-button>
|
||||
</star-li>
|
||||
</star-ul>
|
||||
|
||||
<h3>Icon类型按钮使用场景:在base色纯背景上的裸图标按钮</h3>
|
||||
|
|
@ -187,6 +218,10 @@ export class PanelButton extends LitElement {
|
|||
<star-button type="icon" icon="bug" size="middle"></star-button>
|
||||
<star-button type="icon" icon="bug" size="middle" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="icon" theme="dark" icon="bug" size="middle"></star-button>
|
||||
<star-button type="icon" theme="dark" icon="bug" size="middle" disabled></star-button>
|
||||
</star-li>
|
||||
</star-ul>
|
||||
|
||||
<h3>Ghost类型按钮使用场景:拍照、摄像应用，多端协同拍照控制界面</h3>
|
||||
|
|
@ -203,6 +238,10 @@ export class PanelButton extends LitElement {
|
|||
<star-button type="ghost" icon="bug" size="large"></star-button>
|
||||
<star-button type="ghost" icon="bug" 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-li>
|
||||
</star-ul>
|
||||
|
||||
<star-ul type="onlyheader" title="Special类型按钮">
|
||||
|
|
@ -210,6 +249,10 @@ export class PanelButton extends LitElement {
|
|||
<star-button type="special" special="corner-marker"></star-button>
|
||||
<star-button type="special" special="corner-marker" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="special" theme="dark" special="corner-marker"></star-button>
|
||||
<star-button type="special" theme="dark" special="corner-marker" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="special" special="hang-up" size="middle"></star-button>
|
||||
<star-button type="special" special="hang-up" size="middle" disabled></star-button>
|
||||
|
|
@ -226,6 +269,10 @@ export class PanelButton extends LitElement {
|
|||
<star-button type="special" special="go-back"></star-button>
|
||||
<star-button type="special" special="go-back" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="special" theme="dark" special="go-back"></star-button>
|
||||
<star-button type="special" theme="dark" special="go-back" disabled></star-button>
|
||||
</star-li>
|
||||
</star-ul>
|
||||
|
||||
<star-ul type="onlyheader" title="插入静态图标的Pure、Icon、Ghost按钮">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
import {html, LitElement} from 'lit'
|
||||
import {customElement} from 'lit/decorators.js'
|
||||
import {
|
||||
StarAlertDialog,
|
||||
StarConfirmDialog,
|
||||
StarPromptDialog,
|
||||
} from '../../../components/dialog'
|
||||
import '../../../components/button'
|
||||
|
||||
@customElement('panel-dialog')
|
||||
export class PanelDialog extends LitElement {
|
||||
render() {
|
||||
return html`
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
size="large"
|
||||
label="弹出警告弹窗"
|
||||
@click=${this.showAlert}
|
||||
></star-button>
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
size="large"
|
||||
label="弹出确认弹窗"
|
||||
@click=${this.showConfirm}
|
||||
></star-button>
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
size="large"
|
||||
label="弹出输入弹窗"
|
||||
@click=${this.showPrompt}
|
||||
></star-button>
|
||||
`
|
||||
}
|
||||
|
||||
showAlert() {
|
||||
const starAlertDialog = new StarAlertDialog({
|
||||
text: '请先填写个人信息',
|
||||
onconfirm: () => console.log('确认'),
|
||||
})
|
||||
console.log(starAlertDialog)
|
||||
this.shadowRoot?.appendChild(starAlertDialog)
|
||||
}
|
||||
|
||||
showConfirm() {
|
||||
const starConfirmDialog = new StarConfirmDialog({
|
||||
title: '确定要离开吗？',
|
||||
oncancel: () => console.log('取消'),
|
||||
onconfirm: () => console.log('确定'),
|
||||
})
|
||||
this.shadowRoot?.appendChild(starConfirmDialog)
|
||||
}
|
||||
|
||||
showPrompt() {
|
||||
const starPromptDialog = new StarPromptDialog({
|
||||
title: '请输入你的账号：',
|
||||
value: '8位数字',
|
||||
oncancel: () => console.log('取消'),
|
||||
onconfirm: () => console.log('确定'),
|
||||
})
|
||||
this.shadowRoot?.appendChild(starPromptDialog)
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'panel-dialog': PanelDialog
|
||||
}
|
||||
}
|
||||
|
|
@ -82,7 +82,7 @@ export class PanelPicker extends LitElement {
|
|||
<label>
|
||||
<star-pickerbase type="datepicker"></star-pickerbase>
|
||||
</label>
|
||||
|
||||
|
||||
<div></div>
|
||||
</div>
|
||||
`
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import './confirm/confirm'
|
|||
import './container/container'
|
||||
import './container/homescreen-container'
|
||||
import './control-center/control-center'
|
||||
import './dialog/dialog'
|
||||
import './digicipher/digicipher'
|
||||
import './icon/icon'
|
||||
import './gauss_canvas/gauss-blur'
|
||||
|
|
@ -40,6 +41,7 @@ import './weather/weather'
|
|||
import './iconfont/iconfont'
|
||||
import './swiper/swiper'
|
||||
|
||||
import './animation/animation'
|
||||
type SEID = string
|
||||
|
||||
@customElement('panel-root')
|
||||
|
|
@ -311,6 +313,14 @@ export class PanelRoot extends LitElement {
|
|||
href="#batterysquare"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="动效"
|
||||
icon="add"
|
||||
iconcolor="purple"
|
||||
href="#animation"
|
||||
></star-li>
|
||||
<hr />
|
||||
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
|
|
@ -385,6 +395,16 @@ export class PanelRoot extends LitElement {
|
|||
></star-li>
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.ONLY_HEADER} title="生产用弹窗">
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="浏览器模态弹窗"
|
||||
icon="play-circle"
|
||||
iconcolor="red"
|
||||
href="#dialog"
|
||||
></star-li>
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.BASE}>
|
||||
<star-li
|
||||
type=${LiType.ONLY_EDIT}
|
||||
|
|
|
|||
|
|
@ -365,11 +365,15 @@ export default class GaiaWidget extends StarBaseElement {
|
|||
|
||||
const dom = this.shadowRoot!.querySelector(operator.target)
|
||||
|
||||
if (operator.data[0] === 'src' && !/^http:\/\//.test(operator.data[1])) {
|
||||
let str = operator.data[1].replace(/^\//, '')
|
||||
operator.data[1] = this.origin + '/' + str
|
||||
for (const key in operator.data) {
|
||||
let value = operator.data[key]
|
||||
if (key === 'src' && !/^http:\/\//.test(value)) {
|
||||
let str = value.replace(/^\//, '')
|
||||
value = this.origin + '/' + str
|
||||
}
|
||||
|
||||
dom.setAttribute(key, value)
|
||||
}
|
||||
dom.setAttribute(...operator.data)
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue