Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve appearance menu #13036

Closed
TCOTC opened this issue Nov 4, 2024 · 5 comments
Closed

Improve appearance menu #13036

TCOTC opened this issue Nov 4, 2024 · 5 comments
Assignees
Milestone

Comments

@TCOTC
Copy link
Contributor

TCOTC commented Nov 4, 2024

改进外观菜单

目前外观菜单存在的问题:

  • 颜色选项太小,看不清,建议放大显示成两行,并且在开头添加默认色选项(用于单独清除字体颜色或背景色)
  • 字体颜色选项的 A 太小太细,看不清颜色
  • 灰色外框(hover之后变成黑色)影响颜色判断

参考 Wolai:

image

关联 https://ld246.com/article/1730735837514

@KuiyueRO
Copy link

KuiyueRO commented Nov 5, 2024

image

左侧我自己做了些符合自己口味的修改,如圆角、下拉栏边框颜色等,这个不在建议范围内。

我的建议是:

  1. 字体调粗一些:方便看到字体颜色
  2. 每个选项略微增大:利于辨识
  3. 移除每个选项外轮廓的 border/阴影:这个其实会干扰颜色的判断,
  4. 还有个没做的,将样式弹窗的背景色与编辑器的背景色统一,方便一眼判断

总的来说就是减少不必要的干扰,然后一眼就能看清选择样式后的颜色。

@Vanessa219 Vanessa219 self-assigned this Nov 5, 2024
Vanessa219 added a commit that referenced this issue Nov 5, 2024

Verified

This commit was signed with the committer’s verified signature.
BurntSushi Andrew Gallant
Vanessa219 added a commit that referenced this issue Nov 5, 2024

Verified

This commit was signed with the committer’s verified signature.
BurntSushi Andrew Gallant
@Vanessa219 Vanessa219 added this to the 3.1.11 milestone Nov 5, 2024
@88250 88250 changed the title 改进外观菜单 Improve appearance menu Nov 5, 2024
@TCOTC
Copy link
Contributor Author

TCOTC commented Nov 5, 2024

@Vanessa219 两个问题:

01 暗黑模式下默认字体的颜色应该是白色:

image

02 可以把这个 清除样式 简化成一个垃圾桶图标,占 4 个格子感觉太宽了:

image

然后在悬浮提示里显示 清除样式

video.webm

Vanessa219 added a commit that referenced this issue Nov 5, 2024

Verified

This commit was signed with the committer’s verified signature.
BurntSushi Andrew Gallant
@TCOTC
Copy link
Contributor Author

TCOTC commented Nov 5, 2024

@Vanessa219 还有一个可以改进的地方:

目前的格子外框用的是 box-shadow: 0 0 0 1px var(--b3-theme-surface-lighter) inset;,可以改成 Wolai 这种透明色 border: 1px solid rgba(0, 0, 0, 0.08); ,能跟格子的背景色融合得更好

image

Vanessa219 added a commit that referenced this issue Nov 6, 2024

Verified

This commit was signed with the committer’s verified signature.
BurntSushi Andrew Gallant
@TCOTC
Copy link
Contributor Author

TCOTC commented Nov 8, 2024

@Vanessa219 图标需要再小一点

image

image

Vanessa219 added a commit that referenced this issue Nov 9, 2024

Verified

This commit was signed with the committer’s verified signature.
BurntSushi Andrew Gallant
@TCOTC
Copy link
Contributor Author

TCOTC commented Nov 10, 2024

@Vanessa219 字号和清除样式按钮的宽度还有一点问题:

image

video.webm

Vanessa219 added a commit that referenced this issue Nov 13, 2024

Verified

This commit was signed with the committer’s verified signature.
BurntSushi Andrew Gallant
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants