Skip to content

Improve the cursor of the background image upload button #11176

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

Closed
TCOTC opened this issue Apr 28, 2024 · 13 comments
Closed

Improve the cursor of the background image upload button #11176

TCOTC opened this issue Apr 28, 2024 · 13 comments
Assignees
Milestone

Comments

@TCOTC
Copy link
Contributor

TCOTC commented Apr 28, 2024

目前是既有抓手也有箭头,需要统一(统一为抓手更好,因为其他地方的按钮都是抓手):

image

image

@wwxiaoqi
Copy link
Contributor

我认为这个游标满足 Windows 的设计范式。无需更改,理由如下:

理由

在软件官方给出的鼠标和指针一节中,赋予了游标如下定义:
152358186991482e469a037

形状序号 含义
1 标准选择形状
7 单击帮助按钮后变成的形状
5 表示 Windows 系统正在后台操作
4 系统正处于忙碌状态,需要等待片刻
9 在文档编辑区中显示此形状,表示可在此处输入文本内容
12/14 指针位于窗口的 4 条边上时显示的形状,拖动鼠标可改变窗口的高度或者宽度
11/15 指针位于窗口的 4 个角上时显示的形状,拖动鼠标可同时改变窗口的高度和宽度
8/10 表示鼠标指针指向的位置是一个超级链接
6 在移动对象时指针的形状
16/17/18 表示鼠标指针所指的按钮或某些功能不能使用
13 表示此时处于手写状态

按照目前的显示状态来说,是符合 Windows 的设计范式的。
考虑到此套方案已沿用多年,建议还是保留原有方案。

参考链接

微软文档-Windows 7 鼠标和指针
微软文档-鼠标交互
百度经验-鼠标指针的15种状态的不同含义,鼠标方案的变更
百度百家号-14 种不同类型的光标/鼠标指针及其名称

@Vanessa219
Copy link
Member

好专业,那就先不进行修改了。

@TCOTC TCOTC changed the title 上传题头图按钮的鼠标光标样式应该是个抓手 题头图按钮的鼠标光标样式应该是个箭头 Apr 28, 2024
@TCOTC
Copy link
Contributor Author

TCOTC commented Apr 28, 2024

好专业,那就先不进行修改了。

@Vanessa219 不对,还是要改。我改了一下 issue 的描述

@TCOTC
Copy link
Contributor Author

TCOTC commented Apr 28, 2024

好像还是不对,真要改的话整个界面的都要改了

@TCOTC
Copy link
Contributor Author

TCOTC commented Apr 28, 2024

改「上传」的话只用改一处,改其他地方的话至少要改几十处了

@TCOTC TCOTC changed the title 题头图按钮的鼠标光标样式应该是个箭头 题头图按钮的鼠标光标样式应该统一 Apr 28, 2024
@TCOTC
Copy link
Contributor Author

TCOTC commented Apr 28, 2024

@wwxiaoqi 我粗略看了一下, Notion 、飞书和 GitHub 都没有遵守这个规范,所有按钮都是抓手的形状

@wwxiaoqi
Copy link
Contributor

@wwxiaoqi 我粗略看了一下, Notion 、飞书和 GitHub 都没有遵守这个规范,所有按钮都是抓手的形状

显示抓手应该是浏览器识别到这是个 URL 了。
如果此处其他位置全部都是抓手,只有上传是光标的话,那么统一了貌似是更加好的选择

@TCOTC
Copy link
Contributor Author

TCOTC commented Apr 28, 2024

@wwxiaoqi 我粗略看了一下, Notion 、飞书和 GitHub 都没有遵守这个规范,所有按钮都是抓手的形状

显示抓手应该是浏览器识别到这是个 URL 了。 如果此处其他位置全部都是抓手,只有上传是光标的话,那么统一了貌似是更加好的选择

这个大概不是 URL:

image

image

@wwxiaoqi
Copy link
Contributor

@TCOTC 我看了下 Blink(Chromium)、Webkit(Safari)、Gecko(Firefox) 这几个内核的代表浏览器,发现它们在 PC 上的操作逻辑均是将 HTML 的可点击元素识别为【抓手】。至于为什么这么做我没有在互联网上找到答案。

大家都这样操作,那么思源中,这个的显示就有点问题了:

  1. 光标样式未统一
  2. 如果距离【抓手】太近光标不会变成【标准选择形状】

Animation

@TCOTC
Copy link
Contributor Author

TCOTC commented Apr 28, 2024

@wwxiaoqi 我提 issue 的时候就看过了,感觉应该是这个的问题:

image

Vanessa219 added a commit that referenced this issue Apr 28, 2024

Verified

This commit was signed with the committer’s verified signature.
@Vanessa219
Copy link
Member

好的,下个版本改进

@Vanessa219 Vanessa219 changed the title 题头图按钮的鼠标光标样式应该统一 Improve the cursor of the background image upload button Apr 28, 2024
@Vanessa219 Vanessa219 self-assigned this Apr 28, 2024
@Vanessa219 Vanessa219 added this to the 3.0.12 milestone Apr 28, 2024
@wwxiaoqi
Copy link
Contributor

wwxiaoqi commented Apr 28, 2024

@wwxiaoqi 我提 issue 的时候就看过了,感觉应该是这个的问题:

@TCOTC 是的,是这里的问题。估计是 input 最开始设置的 cursor: pointer; (指定光标:手)被上层的 css 或者 js 覆盖了。
另外这里的 input 在 GIt Commits 第一个版本中就已经有了,所以无法知道这里设置的目的是什么了

@TCOTC
Copy link
Contributor Author

TCOTC commented Apr 28, 2024

@Vanessa219 在 dev4 里,「上传」的 tip 没了:

image

Vanessa219 added a commit that referenced this issue Apr 29, 2024

Verified

This commit was signed with the committer’s verified signature.
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