跳到内容
新问题

对这个项目有疑问吗?注册一个免费的GitHub帐户以打开一个问题,并联系其维护者和社区。

单击“注册GitHub”,表示您同意我们的服务条款隐私声明。我们偶尔会向您发送与帐户相关的电子邮件。

已经在GitHub上了?登录到您的帐户

间隔符:调整大小时显示带有高度值的工具提示 #23077

已合并
将32个提交合并到 2020年6月22日

对话

ItsJonQ公司
复制链接

@ItsJonQ公司 ItsJonQ公司 评论2020年6月10日

描述

截屏时间:2020-06-10 16:38-00

此更新增强了垫片当用户参与“拖动以调整大小”交互时,通过在光标上方渲染工具提示元素来阻止。

新建<调整工具提示大小/>成分

工具提示来自一个新的<调整工具提示大小/>组件。此组件是一个通用的可识别大小的组件,它会显示有关大小更改的工具提示。它不一定会<ResizableBox/>(这是Spacer使用的),但它可以与之集成。

作为旁白。。。该组件有两个不同的位置:

  • 底部
  • (默认)
📄 拐角

截屏时间:2020-06-10,16:06-28

工具提示将在父元素的顶部/右侧呈现。

⬇️ 底部

屏幕截图2020-06-11上午10 03 13

工具提示将在父元素的底部/中心进行渲染。

🎨 设计

就工具提示设计而言。。。我使用了一个符合“G2”精神的UI。简约,全黑/白外观。

这是如何测试的?

  • 在本地故事书中测试
  • 在当地古腾堡测试

要测试。。。

  • 运行npm安装
  • 运行npm运行开发
  • 添加垫片
  • 拖动以调整大小。您应该会看到工具提示。
  • 拖动RangeSlider(侧栏)以调整间距器的大小。您不应该看到工具提示。

变更类型

  • 添加react-resize-ware软件作为中的依赖项@wordpress/组件(它也用于@wrodpress/撰写)
  • 添加新的<调整工具提示大小/>成分
  • 出口调整大小工具提示@wordpress/组件
  • 整合<调整工具提示大小/>插入隔块

检查清单:

  • 我的代码已经过测试。
  • 我的代码遵循WordPress代码风格。
  • 我的代码遵循可访问性标准。
  • 我的代码有适当的内联文档。
  • 如果合适的话,我已经包括了开发人员文档。
  • 我已经更新了所有受此PR中任何重构/重命名影响的React Native文件。

这个公关的想法最初来自:
#22956

@ItsJonQ公司 ItsJonQ公司补充[类型]增强功能 改进建议。 [Package]组件 /包/组件 [块]垫片 影响间隔块 [功能]设计工具 影响块外观的工具既可以扩大工具数量,又可以提高体验标签2020年6月10日
const classes=类名(“components resizable visualizer”,className);

返回(
<Root aria-hidden=“true”className={classes}ref={ref}{…props}>
复制链接
作者

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

默认情况下,我觉得最好通过以下方式隐藏此工具提示阿里亚·希登。这可以通过传入的道具覆盖。

@github-操作
复制链接

github-操作 机器人程序 评论2020年6月10日

尺寸变化:+1.77千字节(0%)

总大小:1.13 MB

文件名 大小 更改
构建/注释/index.js 3.62千字节 +1个B
build/block-directory/index.js 7.27千字节 +3亿(0%)
build/block-library/index.js 129千字节 +87 B(0%)
build/blocks/index.js 48.1千字节 +1个B
build/components/index.js 197千字节 +1.66千字节(0%)
构建/合成/索引.js 9.62千字节 +16亿(0%)
build/data/index.js 8.44千字节 +1个B
构建/编辑导航/index.js 8.26千字节 -1个B
build/edit-post/index.js 303千字节 +6亿(0%)
build/edit-site/index.js 16.6千字节 +1个B
build/edit-widgets/index.js 9.33千字节 +1个B
build/editor/index.js 44.8千字节 -1个B
build/format-library/index.js 7.72千字节 -1个B
build/redux-routine/index.js 2.85千字节 -3亿(0%)
ℹ️查看未更改
文件名 大小 更改
构建/a11y/index.js 1.14千字节 0亿
构建/api-fetch/index.js 3.4千字节 0亿
构建/auto/index.js 2.83千字节 0亿
构建/blob/index.js 620亿 0亿
构建/块目录/样式-rtl.css 937亿 0亿
构建/块目录/样式.css 937亿 0亿
build/block-editor/index.js 106千字节 0亿
构建/块编辑器/style-rtl.css 10.7千字节 0亿
构建/块编辑器/样式.css 10.7千字节 0亿
build/block-library/editor-rtl.css 7.86千字节 0亿
build/block-library/editor.css 7.87千巴 0亿
build/block-library/style-rtl.css 8千字节 0亿
build/block-library/style.css 8.01千字节 0亿
构建/块库/theme-rtl.css 730亿 0亿
构建/块库/theme.css 732亿 0亿
构建/块序列化默认解析器/index.js 1.88千字节 0亿
build/block-serialization-specifi-parser/index.js 3.1千字节 0亿
build/components/style-rtl.css 15.9千字节 0亿
构建/组件/样式.css 15.8千字节 0亿
构建/core-data/index.js 11.4千字节 0亿
构建/数据控制/索引.js 1.29千字节 0亿
构建/日期/索引.js 5.47千字节 0亿
build/deprecated/index.js 772亿 0亿
build/dom-ready/index.js版本 569亿 0亿
build/dom/index.js版本 3.17千字节 0亿
构建/编辑导航/样式-rtl.css 1.02千字节 0亿
构建/编辑导航/样式.css 1.02千字节 0亿
构建/编辑-发布/样式-rtl.css 5.5千字节 0亿
构建/编辑-发布/样式.css 5.5千字节 0亿
构建/编辑site/style-rtl.css 3.03千字节 0亿
构建/编辑site/style.css 3.03千字节 0亿
build/edit-widgets/style-rtl.css 2.43千字节 0亿
构建/编辑小部件/style.css 2.43千字节 0亿
build/editor/editor-styles-rtl.css 468亿 0亿
构建/编辑器/编辑器样式.css 469亿 0亿
构建/编辑器/样式-rtl.css 3.8千字节 0亿
构建/编辑器/样式.css 3.8千字节 0亿
构建/元素/索引js 4.65千字节 0亿
构建/转义-html/index.js 733亿 0亿
build/format-library/style-rtl.css 542亿 0亿
构建/格式库/样式.css 543亿 0亿
build/hooks/index.js 2.13千字节 0亿
build/html-entities/index.js 622亿 0亿
build/i18n/index.js版本 3.56千字节 0亿
build/浅等于/index.js 711亿 0亿
构建/键盘快捷方式/index.js 2.51千字节 0亿
build/keycodes/index.js 1.94千字节 0亿
build/list-reasable-blocks/index.js 3.12千字节 0亿
构建/list-rusable-blocks/style-rtl.css 446亿 0亿
build/list-rusable-blocks/style.css 447亿 0亿
build/media-utils/index.js 5.29千字节 0亿
build/notices/index.js 1.79千字节 0亿
构建/nux/index.js 3.4千字节 0亿
build/nux/style-rtl.css 662亿 0亿
build/nux/style.css 657亿 0亿
build/plugins/index.js 2.56千字节 0亿
build/primitives/index.js 1.5千字节 0亿
构建/priority-queue/index.js 788亿 0亿
构建/rich-text/index.js 14千字节 0亿
build/server-side-render/index.js 2.68千字节 0亿
build/shortcode/index.js 1.7千字节 0亿
构建/token-list/index.js 1.28千字节 0亿
构建/url/index.js 4.06千字节 0亿
build/viewport/index.js 1.85千字节 0亿
build/warning/index.js 1.14千字节 0亿
构建/wordcount/index.js 1.17千字节 0亿

压缩尺寸作用

<Root aria-hidden=“true”className={classes}ref={ref}{…props}>
{resizeListener}
<标签
aria-hidden={道具['aria-hidten']}
复制链接
作者

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

我们必须手动完成此操作才能应用于内部标签元素。原因是因为内部标签是Portal'ed,这意味着它不会继承阿里亚·希登属性<根/>组件。

@迈克尔·阿雷斯塔德
复制链接
贡献者

这太棒了。我注意到FF上有一些奇怪的行为。它没有粘在光标上。似乎只有当我停顿一秒钟时,位置才更新。

2020-06-10 15 19 36

就设计和功能而言,这非常棒。我认为把它贴在光标上更有用,因为我的眼睛已经在看那里了。

一旦修复了这个小错误,我可以看到它对各种事情都很有用。干得好。

@ItsJonQ公司
复制链接
作者

@迈克尔·阿雷斯塔德噢!感谢您的验证!!我会看看Firefox🦊

@ItsJonQ公司
复制链接
作者

@迈克尔·阿雷斯塔德可以证实你的经验。嗯!太奇怪了。。。

在Firefox上,工具提示可以很好地跟随我的鼠标。但是,当我拖动以调整大小时(使用可调整框大小),这就是它变得奇怪的时候。

这可能有点奇怪可调整框大小库。将继续修补!

@迈克尔·阿雷斯塔德
复制链接
贡献者

在ResizableBox库中,它可能有些古怪。将继续修补!

很有趣。感谢您的确认。

@ItsJonQ公司
复制链接
作者

@迈克尔·阿雷斯塔德我想我做到了!

做了一些小调整。。最大的一个是绑定移动鼠标处理程序到文件而不是窗口谁会知道🤷‍♀️

@迈克尔·阿雷斯塔德
复制链接
贡献者

@迈克尔·阿雷斯塔德我想我做到了!

@ItsJonQ公司很好!可以确认!然而,我有一个新的错误给你。在显示测量值之前,我必须单击间隔拖动手柄两次。我必须为我添加到同一文档中的每个间隔符执行此操作。

@ItsJonQ公司
复制链接
作者

@迈克尔·阿雷斯塔德谢谢您!!

@mcsf公司的反馈帮助我重新思考并优化事情😉

packages/components/src/resize-tooltip/utils.js 过时的 显示已解决 隐藏已解决
packages/components/src/resize-tooltip/utils.js 过时的 显示已解决 隐藏已解决
线条上的注释147149
document.removeEventListener('mousedown',handleOnMouseDown);
document.removeEventListener('mousemove',handleOnMouseMove);
document.removeEventListener('mouseup',handleOnMouseUp);
复制链接
贡献者

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

仅仅看一下代码,我认为这次清理没有任何作用。那是因为手柄*每次效果运行时,都会重新实例化函数。

我不知道为什么这么说,因为这没有意义:注册的侦听器在效果返回的teardown函数中被正确引用,所以我们应该始终能够删除旧的事件侦听器。

线条上的注释147149
document.removeEventListener('mousedown',handleOnMouseDown);
document.removeEventListener('mousemove',handleOnMouseMove);
document.removeEventListener('mouseup',handleOnMouseUp);
复制链接
贡献者

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

让我知道你对这些修改的看法

所以我一直在反复观察这种效果,在思考依赖性之类的事情时,我总觉得不满意,我想我知道为什么。可以说,我们正在处理一级和二级的影响:一级影响是鼠标*事件监听器;第二级是听众本身。这使得关于依赖关系的推理更加混乱。

如果我们对构建这些效果更严格,我们可以重构如下:

出口 功能 使用调整大小标签(  ) {
  // ...

  常数 清除移动超时 = 使用回拨( () => {
    如果 ( moveTimeoutRef(移动超时参考).现在的 ) {
      清除超时( moveTimeoutRef(移动超时参考).现在的 )
    }
  } [ moveTimeoutRef(移动超时参考) ] )

  常数 鼠标按下时的手柄 = 使用回拨( () => {
    如果 ( ! 是光标 ) 返回

    setIs拖动( 真的 )
    清除移动超时()
    取消设置移动XY()
  } [
    //有意义的依赖项(可变)
    是光标
    //形式依赖关系(假定常数)
    setIs拖动 清除移动超时 取消设置移动YX
  ] )

  常数 手柄鼠标移动 = 使用回拨( /*同上*/ )

  常数 鼠标上的手柄 = 使用回拨( /*同上*/ )
  
  使用效果( () => {
    文件.添加事件侦听器( “鼠标下移” 鼠标按下时的手柄 )
    返回 () => {
      文件.删除EventListener( “鼠标下移” 鼠标按下时的手柄 )
    }
  } [ 鼠标按下时的手柄 ] )

  使用效果( /*与上面的“mousemove”相同*/ )

  使用效果( /*与上面的“mouseup”相同*/ )

  返回 {...}
}

请注意这些关于“有意义的”与“正式的”依赖性的评论。这是我没有决定在列出依赖项时是否应该尽可能严格。:)我将由你决定。

@肖南德鲁
复制链接
贡献者

喜欢这个。我确实对“PX”的资本化感到好奇。也许这只是单位标签的大小,但我想知道小写(“px”)是否更好?我想这主要是个人喜好。

@ItsJonQ公司
复制链接
作者

@肖南德鲁+@迈克尔·阿雷斯塔德

小写二甲苯

屏幕截图2020-06-11,下午2点37分24分

2020-06-11 14-37-19截屏

投票方式:👍 / 👎

谢谢您!

@ItsJonQ公司
复制链接
作者

谢谢@迈克尔·阿雷斯塔德! 小写为:)

@肖南德鲁
复制链接
贡献者

我们在其他地方使用这种单位吗?填充有什么作用?

复制链接
贡献者

@mcsf公司 mcsf公司 留下了评论

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

正在查看调整工具栏大小如果我们没有光标尽可能地位置? 我们可能也过不去底部?

我问了几个原因。我认为,在“一次只满足一个需求”和从一开始就构建以框架可读性(可定制、可重用)为目标的组件之间,很难找到平衡点。我个人对这项公关的印象是,我们可能过于倾向于后者。我想从开始较少的:模式更少,覆盖更少*(例如,我们是否需要通过z索引? 也许我们有,但我想知道原因)。

另一件事是,最好有一个基线——就用户体验、性能和任何此类标准而言——来衡量任何改进。在这种情况下,如果只添加一个或两个工具-时间定位模式,那么无论是在实现的复杂性还是交互的丰富性方面,我们都会犯简单性方面的错误。这样,任何后续的公关改进或扩展都会让我们更加深入地了解什么最有效。

*:我总是担心选项和覆盖,因为在考虑当前和未来的向后兼容性时,它们会成为人们的界面。

@ItsJonQ公司
复制链接
作者

@mcsf公司这些都是公平的观点。我已经从ResizeTooltip中删除了“光标”位置。我调整了一些逻辑和风格,以改进底部位置。

如果需要,我们可以在将来重新添加一个定位为Tooltip的光标👍

@mcsf公司
复制链接
贡献者

@mcsf公司这些都是公平的观点。我已经从ResizeTooltip中删除了“光标”位置。我调整了一些逻辑和风格,以改进底部位置。

如果需要,我们可以在将来重新添加一个定位为Tooltip的光标👍

谢谢你逗我开心!

@ItsJonQ公司
复制链接
作者

谢谢你逗我开心!

随时都可以😉 ❤️

复制链接
贡献者

@mcsf公司 mcsf公司 留下了评论

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

每件事都非常详细和仔细地安排好了,我很感激。

不过,我确实有一个问题,那就是如何在ResizableBox中安装ResizeTooltop(我倾向于从一开始就尽量减少暴露的内容,并随着时间的推移看看应该打开哪些内容)。

线条上的注释8185
<调整大小工具提示
轴=“y”
isVisible={isResizing}
position=“底部”
/>
复制链接
贡献者

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

你真的考虑过渲染吗在里面调整方框大小?如果有理由把它分开,一定要让我知道。否则,ResizableBox可以独立处理与调整大小相关的所有事情,这可能会给开发人员带来好处。

我忍不住这么想位置可以从ResizableBox的使可能在某种程度上大小道具。如果我们将Tooltip移动到Box中,组件的用户就不必担心这些额外的道具。

复制链接
作者

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

@mcsf公司我考虑过放进去可调整框大小:). 这就是这个想法的起源。
我之所以想保持它的独立性,是为了增加灵活性。也就是说,在调整大小时显示不是由可调整框大小例如,浏览器窗口调整大小。

首先,我们可以将其作为默认(实验性)功能可调整框大小。类似于<ResizableBox__treantialShowTooltip={true}/>将显示工具提示。

你觉得怎么样

复制链接
贡献者

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

我之所以想保持它的独立性,是为了增加灵活性。也就是说,在调整大小时显示不是由可调整框大小例如,浏览器窗口调整大小。

嗯,我可以将其视为一种互动,尽管我个人会怀疑什么时候我们实际上希望用户在显示工具提示的上下文中调整其适当窗口的大小

因此,我认为我们仍处于这一领域:“我倾向于从一开始就尽量减少暴露的程度,并随着时间的推移看看应该开放什么”。在内部,ResizeTooltip是一个很好的单独构建组件,但我会保密到我们的组件。

首先,我们可以将其作为默认(实验性)功能可调整框大小。类似于<ResizableBox__treantialShowTooltip={true}/>将显示工具提示。

我很高兴看到这个实验不过,只要我们将正确的事情保密/实验性地进行,就不需要在这个公共关系中这样做。

复制链接
作者

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

在内部,ResizeTooltip是一个很好的单独构建的组件,但我会将其保密给我们的组件。

@mcsf公司听起来不错👍 . 使用此PR,在其当前状态下,是否将其导出为__实验性的合格吗?还是将其集成到可调整框大小而根本不出口?

谢谢!

复制链接
贡献者

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

在其当前状态下,是否将其导出为__实验性的合格吗?还是将其集成到可调整框大小而根本不出口?

如果你不介意的话可调整框大小IMO,最好不要出口!

复制链接
作者

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

@mcsf公司好的!现在让我们继续:)

@ItsJonQ公司
复制链接
作者

@mcsf公司我刚刚将ResizeTooltip移到了ResizableBox下。让我知道这是否有效<

复制链接
贡献者

@mcsf公司 mcsf公司 留下了评论

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

假设清单事件已处理,LGTM!干得好,谢谢你打乒乓球!

@@ -1022,7 +1022,7 @@
{
“title”:“调整工具提示大小”,
“slug”:“调整大小-工具提示”,
“markdown_source”:“../packages/components/src/resize-tooltip/README.md”,
“markdown_source”:“../packages/components/src/可调整大小的盒子/resize-tooltip/README.md“,
复制链接
贡献者

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

不应该再出现在舱单上了,对吧?

复制链接
作者

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

我……不确定。这是自动生成的。有一个自述.md在目录中。我想我能把它取下来吗?理想情况下,我想保存这些文档。

另一种方法是对一些文档进行内联注释(目前)

复制链接
贡献者

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

嗯…是的,我现在明白了。嗯,我没有偏好。也许 吧@nosolosw公司对我们应该如何记录组件并让这些工具为我们工作有不同的看法吗?无论如何,LGTM:)

复制链接
成员

选择隐藏此评论的原因

将显示原因,以便向其他人描述此评论。了解更多信息.

我看了一下处理手册文档的脚本是如何工作的。它似乎在组件文件夹中查找README文件(看见)然后更新用于在手册中公开它们的清单(请参阅ResizableBox页面).

我不熟悉我们如何处理未通过@wordpress/组件包装。我快速看了一眼,这似乎是唯一的情况?无论如何,我们似乎应该将resize-tooltip作为一个组件公开,或者考虑如何从手册中删除它的页面,因为它不能被API的外部用户使用。对于后者,我们可以进行快速修改(使用小写的自述文件,使用文件的任何其他名称)或修复问题(更新glob模式以仅匹配顶级组件文件夹中的readme文件)。

@ItsJonQ公司
复制链接
作者

好的!特拉维斯是绿色和快乐的。谢谢你的评论@mcsf公司!!

我会把它合并起来

@ItsJonQ公司 ItsJonQ公司合并提交03a4f6c号进入之内 主人 2020年6月22日
@ItsJonQ公司 ItsJonQ公司删除了 添加/调整可视化工具的大小 分支 2020年6月22日15:41
@github-操作 github-操作 机器人程序将此添加到古腾堡8.5里程碑2020年6月22日
@mcsf公司
复制链接
贡献者

🎉

免费注册 在GitHub上加入此对话.已经有账户了吗?登录以发表评论
标签
[块]垫片 影响间隔块 [功能]设计工具 影响块外观的工具既可以扩大工具数量,又可以提高体验 [Package]组件 /包/组件 [类型]增强功能 改进建议。
项目
还没有
开发

成功合并此拉取请求可能会解决这些问题。

还没有

5名参与者