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

Menu label can wrap on the mobile #8733

Closed
enneaa opened this issue Jul 11, 2023 · 16 comments
Closed

Menu label can wrap on the mobile #8733

enneaa opened this issue Jul 11, 2023 · 16 comments
Assignees
Milestone

Comments

@enneaa
Copy link

enneaa commented Jul 11, 2023

In what scenarios do you need this feature?

面包屑顾名思义应该 一层/一层/一层 的展示,即直观又方便操作,点击即可进入聚焦模式,点击上下层即可在不同层级之间导航。还可以设计成再点击一次退出聚焦模式,这样也符合一般操作的习惯。
如果觉得面包屑过长显示不下,可以左右滚动。

现在的设计,进入聚焦模式不方便,点击面包屑还要先点面包屑再点对应层级,而且现在那一栏都空着挺浪费的。

Describe the optimal solution

面包屑顾名思义应该 一层/一层/一层 的展示,即直观又方便操作,点击即可进入聚焦模式,点击上下层即可在不同层级之间导航。还可以设计成再点击一次退出聚焦模式,这样也符合一般操作的习惯。
如果觉得面包屑过长显示不下,可以左右滚动。

现在的设计,进入聚焦模式不方便,点击面包屑还要先点面包屑再点对应层级,而且现在那一栏都空着挺浪费的。

Describe the candidate solution

No response

Other information

No response

@88250
Copy link
Member

88250 commented Jul 11, 2023

你好,这个不考虑改回去了,请参考之前的讨论 #8623

@88250 88250 closed this as completed Jul 11, 2023
@enneaa
Copy link
Author

enneaa commented Jul 12, 2023

你好,这个不考虑改回去了,请参考之前的讨论 #8623

我看了下原讨论,提出的是没有退出聚焦按钮的问题,可是就算加一个退出按钮,也不需要把面包屑收到另一个按钮。

@enneaa
Copy link
Author

enneaa commented Jul 12, 2023

Screenshot_2023-07-12-08-08-03-377_org b3log siyuan-edit
现在面包屑那一栏右侧空着也没啥用。

@Vanessa219
Copy link
Member

正常是这样的,现在的版本有点问题,下个版本会进行改进
image

@gdy106
Copy link

gdy106 commented Jul 17, 2023

现在版本的面包屑点进去还是一串滑块,确实没啥单开的必要。
IMG_1249

既然单开一个窗口了,我建议面包屑的父子文档层级也和文档内的块层级一样,按列表显示,右侧提供一个小三角的块标可以缩起来。当前文档的名称用放大字号或者加粗、字色等方式进行强调。
这样建议是为了适配手机端上下滑动的习惯,完全去掉左右滑动。毕竟都给了一整个版面给面包屑了,那就在直观性上进一步发挥一下。
我大致做了个效果图:
手机端面包屑

@Vanessa219
Copy link
Member

Vanessa219 commented Jul 18, 2023

缩进的话屏幕本身就小,很容易显示不全。

@gdy106
Copy link

gdy106 commented Jul 18, 2023

缩进的话屏幕本身就小,很容易显示不全。

可以考虑不缩进或者只有当前文档层缩进。但是竖排版是必须的,文档名非常长的情况下完全可以换行,因为这是竖屏手机页面,上下滑动完全没有负担的。

@Vanessa219
Copy link
Member

你说的是 #2613 这个需求么?

@gdy106
Copy link

gdy106 commented Jul 20, 2023

你说的是 #2613 这个需求么?

不是,引用里举例的vscode界面是需要鼠标悬浮到文档上才能看到路径,在手机端这种增加点击操作的交互设计不合适。
我仅仅指可以删掉缩进,避免层级太深的文档不方便看。

@Vanessa219
Copy link
Member

Vanessa219 commented Jul 21, 2023

你的意思是把这一行分成四行显示么?
image

@gdy106
Copy link

gdy106 commented Jul 21, 2023

你的意思是把这一行分成四行显示么?
image

是的,在手机上上下滑动比左右滑动要容易很多,要区分层级可以用字色、大小、粗细等方式区分,不一定要有缩进。

@Vanessa219
Copy link
Member

这个目前和 PC 端是保持一致的,如果每个目录显示一行的话,点击跳转就会脱离这个文档,跳转到其他文档,而且如下所示,感觉有点奇怪。

image

@gdy106
Copy link

gdy106 commented Jul 22, 2023

我做的效果图是这样:
思源手机端面包屑-统一缩进

上下级文档的列表不设置分隔线,非当前层级的文档统一用细体小字号灰色呈现,当前文档左侧蓝色引导线体现层级关系。文档内的层级(标题、列表、正文等)有分隔线,黑色字体常规字重,焦点块以加粗蓝色字体显示。
跳转上级文档的功能我觉得是可以有的,不过如果开发者认为不应该跳转,设置为点击无反应就可以了呀。

这个目前和 PC 端是保持一致的,如果每个目录显示一行的话,点击跳转就会脱离这个文档,跳转到其他文档,而且如下所示,感觉有点奇怪。

image

@gdy106
Copy link

gdy106 commented Jul 23, 2023

另外,如果要避免层级过深的文档占用屏幕,可以加一个默认当前文档在第一行的设定,手指下滑(屏幕上滑)才显示上级文档。
上级文档可以露出来半行,以便用户知道上面还有内容。

@Vanessa219
Copy link
Member

可以不增加设定么?目前已经有太多的设定了。

@gdy106
Copy link

gdy106 commented Jul 27, 2023

我只是建议,哪些能实现哪些不能实现肯定还是看你们啦。

考虑到文档路径好像确实不用太有存在感,我精简了一下,看看这样会不会好一些:
手机端面包屑-精简

因为文档路径不是需要强调的信息,所以个人认为用深灰色就好,蓝色强调色还是给当前光标所处的块。
以及目前文档路径是左右滑动的嘛,我觉得在手机端自动换行会好一点。
当前文档还是独立一行,我整了个缩进,如果觉得不和谐的话不要缩进统一对齐也可以。

核心思路还是单独给了面包屑整个屏幕的页面,那内容排版上能上下滑动就不要左右滑动。

可以不增加设定么?目前已经有太多的设定了。

@Vanessa219 Vanessa219 changed the title 建议保留原移动端面包屑设计,现在不直观操作繁琐。 Menu label can wrap on the mobile Aug 1, 2023
@Vanessa219 Vanessa219 self-assigned this Aug 1, 2023
@Vanessa219 Vanessa219 added this to the 2.9.9 milestone Aug 1, 2023
Vanessa219 added a commit that referenced this issue Aug 1, 2023
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

4 participants