Skip to content

Improve appearance menu #13036

Closed
Closed
@TCOTC

Description

@TCOTC
Contributor

改进外观菜单

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

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

参考 Wolai:

image

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

Activity

KuiyueRO

KuiyueRO commented on Nov 5, 2024

@KuiyueRO

image

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

我的建议是:

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

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

self-assigned this
on Nov 5, 2024
added a commit that references this issue on Nov 5, 2024
added a commit that references this issue on Nov 5, 2024
added this to the 3.1.11 milestone on Nov 5, 2024
changed the title [-]改进外观菜单[/-] [+]Improve appearance menu[/+] on Nov 5, 2024
TCOTC

TCOTC commented on Nov 5, 2024

@TCOTC
ContributorAuthor

@Vanessa219 两个问题:

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

image

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

image

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

video.webm
added a commit that references this issue on Nov 5, 2024
TCOTC

TCOTC commented on Nov 5, 2024

@TCOTC
ContributorAuthor

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

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

image

added a commit that references this issue on Nov 6, 2024
TCOTC

TCOTC commented on Nov 8, 2024

@TCOTC
ContributorAuthor

@Vanessa219 图标需要再小一点

image

image

added a commit that references this issue on Nov 9, 2024
TCOTC

TCOTC commented on Nov 10, 2024

@TCOTC
ContributorAuthor

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

image

video.webm
added a commit that references this issue on Nov 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @Vanessa219@KuiyueRO@TCOTC

      Issue actions

        Improve appearance menu · Issue #13036 · siyuan-note/siyuan