fix(ui): 设置页改用 Toggle Switch 并还原下拉菜单样式
This commit is contained in:
TermiNexus committed
1 parent
8b483e3ad2
commit
82939dd772
3 files changed
+59
-35
No files matched your search
@@ -53,19 +53,21 @@
|
||||
| `DropDownStyle` 容器 | `width:100%; position:relative` |
|
||||
| `DropDownStyle` 按钮 | `display:flex; align-items:center; justify-content:space-between; min-width:4.375em; width:100%; height:3.125em; border:0.063em solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.1); padding:0 0.875em; box-sizing:border-box` |
|
||||
| `CheckBoxComponentStyle` | `display:flex; align-items:center; justify-content:flex-start; width:100%; height:2.25em; margin-bottom:1.25em` |
|
||||
| `CheckBoxStyle` 桌面 | `width:2.375em; height:2.375em; background:rgba(255,255,255,0.1); border:0.063em solid rgb(190,190,190); border-radius:20%; backdrop-filter:blur(12.5px)` |
|
||||
| 设置页 Toggle Switch | `width:2.75em; height:1.5em; border:0.063em solid rgba(255,255,255,0.2); border-radius:6.25rem; background:rgba(118,255,51,0.25)`（开）/ `rgba(191,213,255,0.25)`（关）；白色圆形 knob，`transition:0.2s` |
|
||||
| `DropDownStyle` 菜单 | `min-width:18.25em; background:rgba(0,25,38,0.9); backdrop-filter:blur(3.125em); position:absolute; z-index:999; display:flex; flex-direction:column` |
|
||||
| `DropDownStyle` 选项 | `height:2.563em; width:100%; display:flex; align-items:center; justify-content:flex-start; cursor:pointer`；hover `rgba(255,255,255,0.1)`；文字 `margin:0 2.125em; font-size:0.9375em` |
|
||||
| 选中选项 | `color:rgb(162,255,106); background:rgba(255,255,255,0.1)` |
|
||||
| `InputRangeComponentStyle` | `display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; height:3.188em; min-height:3.188em; margin-bottom:1.75em` |
|
||||
| `InputRangeComponentStyle` label | `color:white; font-size:0.9375em; margin-top:0` |
|
||||
| `InputRangeComponentStyle` input | `-webkit-appearance:none; width:100%; height:0.563em; background:transparent; cursor:pointer` |
|
||||
| range track | `height:0.375em; background:rgba(255,255,255,0.2)` |
|
||||
| range thumb | `width:1.875em; height:1em; border-radius:0.25em; background:rgb(255,188,9); margin-top:-0.3em` |
|
||||
| `CheckBoxStyle` 勾 | 使用原版 `checkMark.fb44274a.svg`（`#76FF33`），尺寸 70% 70% |
|
||||
| `GameSettingsStyle.containerFormOptions` | `display:flex; flex-direction:column; margin-left:0.9em; margin-bottom:1em` |
|
||||
| `GameSettingsStyle.notificationText` | `color:rgba(255,255,255,0.5); text-align:left` |
|
||||
|
||||
## 5. 当前仍为近似
|
||||
|
||||
- 设置行的组合方式：已按 `rowBlock` / `dropDownTitle` / `slider` / `CheckBoxComponentStyle` 的尺寸重建，但原版每个设置项的具体子组件层级仍需继续展开。
|
||||
- 下拉选项弹层：已改为自定义列表，尺寸/边框/背景/选项高度按 `DropDownStyle` 与主题色还原；列表背景使用 `Palette.DropdownBg`（原版主题深灰）。
|
||||
- 下拉选项弹层：已按 `DropDownStyle` + `ContextMenuStyle` 还原菜单/选项高度、背景、hover、选中色；定位仍用 `top:100%`，原版用 `position` 计算屏幕内位置。
|
||||
- 菜单滑动条：当前按 `index * 5em + 1.25em` 计算，原版由组件状态计算 `margin-top`。
|
||||
- 部分设置项的分组/顺序仍以官方 key 和现有状态为准，后续可继续按原组件 render 树核对。
|
||||
@@ -2295,14 +2295,17 @@ private val SettingsDropdownList: csstype.PropertiesBuilder.() -> Unit = {
|
||||
Style("position", "absolute")
|
||||
Style("left", "0")
|
||||
Style("top", "100%")
|
||||
Style("width", "100%")
|
||||
Style("min-width", "4.375em")
|
||||
Style("min-width", "18.25em")
|
||||
Style("max-height", "15.75em")
|
||||
Style("overflow", "auto")
|
||||
Style("z-index", "5")
|
||||
Style("background-color", Palette.DropdownBg)
|
||||
Style("border", "0.063em solid " + Palette.PanelBorder)
|
||||
Style("box-sizing", "border-box")
|
||||
Style("z-index", "999")
|
||||
Style("background-color", "rgba(0, 25, 38, 0.9)")
|
||||
Style("backdrop-filter", "blur(3.125em)")
|
||||
Style("-webkit-backdrop-filter", "blur(3.125em)")
|
||||
Style("display", "flex")
|
||||
Style("flex-direction", "column")
|
||||
Style("align-items", "stretch")
|
||||
Style("justify-content", "flex-start")
|
||||
}
|
||||
|
||||
private val SettingsDropdownOption: csstype.PropertiesBuilder.() -> Unit = {
|
||||
@@ -2310,30 +2313,36 @@ private val SettingsDropdownOption: csstype.PropertiesBuilder.() -> Unit = {
|
||||
Style("align-items", "center")
|
||||
Style("justify-content", "flex-start")
|
||||
Style("width", "100%")
|
||||
Style("height", "3.125em")
|
||||
Style("padding", "0 0.875em")
|
||||
Style("height", "2.563em")
|
||||
Style("margin", "0")
|
||||
Style("padding", "0")
|
||||
Style("border", "0")
|
||||
Style("background", "transparent")
|
||||
Style("color", "white")
|
||||
Style("font-family", "BaseFontRegular, FallbackFontRegular")
|
||||
Style("font-size", "1em")
|
||||
Style("text-align", "left")
|
||||
Style("cursor", "pointer")
|
||||
}
|
||||
|
||||
private val SettingsDropdownOptionText: csstype.PropertiesBuilder.() -> Unit = {
|
||||
Style("margin-left", "2.125em")
|
||||
Style("margin-right", "2.125em")
|
||||
Style("font-size", "0.9375em")
|
||||
Style("white-space", "pre")
|
||||
}
|
||||
|
||||
private val SettingsDropdownOptionSelected: csstype.PropertiesBuilder.() -> Unit = {
|
||||
Style("background-color", Palette.White10)
|
||||
Style("color", Palette.Yellow)
|
||||
Style("background-color", "rgba(255, 255, 255, 0.1)")
|
||||
Style("color", "rgb(162, 255, 106)")
|
||||
}
|
||||
|
||||
private val SettingsChevron: csstype.PropertiesBuilder.() -> Unit = {
|
||||
Style("width", "0.6em")
|
||||
Style("height", "0.6em")
|
||||
Style("border-right", "0.1em solid white")
|
||||
Style("border-bottom", "0.1em solid white")
|
||||
Style("transform", "rotate(45deg)")
|
||||
Style("margin-top", "-0.2em")
|
||||
Style("flex", "0 0 0.6em")
|
||||
Style("width", "0.813em")
|
||||
Style("height", "0.75em")
|
||||
Style("background-color", "rgb(191, 213, 255)")
|
||||
Style("mask", "url(\"${Asset("static/images/petalDown.b5567832.svg")}\") center / contain no-repeat")
|
||||
Style("-webkit-mask", "url(\"${Asset("static/images/petalDown.b5567832.svg")}\") center / contain no-repeat")
|
||||
Style("flex", "0 0 0.813em")
|
||||
}
|
||||
|
||||
private val SettingsSliderWrap: csstype.PropertiesBuilder.() -> Unit = {
|
||||
@@ -2447,25 +2456,33 @@ private val SettingsCheckboxRow: csstype.PropertiesBuilder.() -> Unit = {
|
||||
}
|
||||
|
||||
private fun SettingsCheckbox(On: Boolean): csstype.PropertiesBuilder.() -> Unit = {
|
||||
Style("position", "relative")
|
||||
Style("display", "flex")
|
||||
Style("align-items", "center")
|
||||
Style("justify-content", "center")
|
||||
Style("width", "2.375em")
|
||||
Style("height", "2.375em")
|
||||
Style("flex", "0 0 2.375em")
|
||||
Style("width", "2.75em")
|
||||
Style("height", "1.5em")
|
||||
Style("flex", "0 0 2.75em")
|
||||
Style("box-sizing", "border-box")
|
||||
Style("background-color", if (On) "rgba(255, 255, 255, 0.15)" else "rgba(255, 255, 255, 0.1)")
|
||||
Style("border", "0.063em solid rgb(190, 190, 190)")
|
||||
Style("border-radius", "20%")
|
||||
Style("backdrop-filter", "blur(12.5px)")
|
||||
Style("background-color", if (On) "rgba(118, 255, 51, 0.25)" else "rgba(191, 213, 255, 0.25)")
|
||||
Style("border", "0.063em solid rgba(255, 255, 255, 0.2)")
|
||||
Style("border-radius", "6.25rem")
|
||||
Style("cursor", "pointer")
|
||||
Style("padding", "0")
|
||||
Style("transition", "background-color 0.2s")
|
||||
}
|
||||
|
||||
private val SettingsCheckMark: csstype.PropertiesBuilder.() -> Unit = {
|
||||
Style("width", "2.375em")
|
||||
Style("height", "2.375em")
|
||||
Style("background", "url(\"${Asset("static/images/checkMark.fb44274a.svg")}\") center / 70% 70% no-repeat")
|
||||
private fun SettingsToggleKnob(On: Boolean): csstype.PropertiesBuilder.() -> Unit = {
|
||||
Style("position", "absolute")
|
||||
Style("top", "50%")
|
||||
Style("left", if (On) "calc(100% - 1.3em)" else "0.2em")
|
||||
Style("width", "1.1em")
|
||||
Style("height", "1.1em")
|
||||
Style("border-radius", "50%")
|
||||
Style("background-color", "white")
|
||||
Style("transform", "translateY(-50%)")
|
||||
Style("transition", "left 0.2s")
|
||||
Style("pointer-events", "none")
|
||||
}
|
||||
|
||||
private val SettingsKeysGrid: csstype.PropertiesBuilder.() -> Unit = {
|
||||
@@ -2569,7 +2586,7 @@ private val SettingsScreen = FC<Props> {
|
||||
button {
|
||||
css(SettingsCheckbox(On))
|
||||
onClick = { Toggles = Toggles + (Entry.Id to !On) }
|
||||
if (On) div { css(SettingsCheckMark) }
|
||||
div { css(SettingsToggleKnob(On)) }
|
||||
}
|
||||
div {
|
||||
css { Style("flex", "1"); Style("min-width", "0") }
|
||||
@@ -2622,8 +2639,9 @@ private val SettingsScreen = FC<Props> {
|
||||
OptionBase(this)
|
||||
if (OptionIndex == Index) Apply(SettingsDropdownOptionSelected)
|
||||
}
|
||||
Ui("settings.dropdown.option")
|
||||
onClick = { Select(Entry.Id, OptionIndex) }
|
||||
+Option
|
||||
span { css(SettingsDropdownOptionText); +Option }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -942,4 +942,8 @@ body { margin: 0; overflow: hidden; background: #001926; color: #fff; }
|
||||
.g3-mounted-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
||||
.g3-mounted-text { display: flex; flex-direction: column; gap: 0.2em; min-width: 0; }
|
||||
.g3-mounted-name { font: 500 1em/1.2 BaseFontMedium, "Segoe UI", sans-serif; color: #fff; }
|
||||
.g3-mounted-type { color: rgba(255, 255, 255, 0.55); font-size: 0.85em; }
|
||||
.g3-mounted-type { color: rgba(255, 255, 255, 0.55); font-size: 0.85em; }
|
||||
|
||||
[data-ui="settings.dropdown.option"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
Reference in new issue
Block a user