重新打造标签

2021-03-16 13:04:12

在Gnome 40中,Epiphany将有一个新的标签栏。这不仅仅是对旧的reastyling,而是一个底层重写。但为什么需要这件事?

GNOME应用程序使用TABS以大量不同的方式,但它们可以大致分为两类。我将把它们称为静态和动态标签。

它们完全不变,每个选项卡包含标题标签,通常不会滚动。它们通常用于对话框中,但例如,也可以用于色带工具栏。现代GNOME应用程序通常使用GTKStackSwitcher或HdyViewSwitcher,但标签仍然很常见。

这些标签用于多窗口应用程序,例如Web浏览器,文本编辑器,文件管理器或终端仿真器。它们被用户打开和关闭,可以重新排序,在Windows或通过删除桌面上拖放到新窗口之间。他们需要滚动。它们总是有一个标题和一个关闭按钮,有时是一个图标和/或旋转器。它们隐藏在存在一个选项卡时。它们可以通过中间点击关闭,他们有上下文菜单。有时它们可​​以固定或具有额外的图标,例如音频播放指示器。有时他们需要关闭确认。

虽然静态选项卡在GNOME上具有非常统一的,但在每个应用程序中都有动态标签外观和感觉非常不同。例如:

GNOME文本编辑器仅在所选和/或悬停的选项卡上只有关闭按钮,其他应用程序在所有选项卡上都具有它们。

有些应用程序允许标签缩小到滚动前缩小到非常小的尺寸,其他应用程序在早先开始滚动。

Epiphany和Gnome终端有罂粟显示所有标签; GNOME终端正在使用GTKMENU,而EPIphany正在使用GTKPOPOVER。 截至屏幕截图上不可见,仅在Windows之间只有Epiphany和GEDIT支持拖动选项卡。 可以将文件拖到Epiphany和Nautilus中的选项卡上。 在Nautilus中,在拖动文件时悬停在选项卡上将自动切换到该选项卡,但不在Epiphany中。 在GEDIT和GNOME终端中,无法再次单击它来重新关注活动选项卡。 在GNOME文本编辑器和EPIphany中,在对焦时移动到另一个选项卡将选择“活动”选项卡将选择页面。 所有这些应用程序都使用一个名为Gtknotebook的小部件。 它实现了一个通用选项卡PED视图,并在其中一个边上显示选项卡,每个选项卡都具有可以用任意窗口小部件替换的标签。 默认情况下,GTKNOTBook不滚动,在每个选项卡上都有一个简单的标题标签,不会展开选项卡,不允许任何类型的拖动n-drop。

换句话说,它是正式用于静态标签。它并不意味着将其用于动态标签,但您将不得不手动实施:

具有关闭按钮的选项卡布局,标题,图标,也可能是静音指示符,并为滚动设置合理的最小宽度。

选项卡打开/关闭逻辑 - 例如,要关闭活动选项卡时要选择的选项卡。

如果需要在选项卡上删除数据,则该处理程序。您还需要小心不会意外地打破流程中的悬停超时,如Epiphany在3.38.x中。

当然,每个应用程序都最终略微不同地实现这些东西。然后在那里存在无法从App Side完全修复的问题,例如:

标签滚动是离散的。这看起来令人困惑和引入其他问题:动态选项卡可以有很多标签。按箭头一次滚动一个标签并不真正扩展。

相关的是,不可能拍摄标签并重新排序长度距离,您必须重新排序一些标签向前排序,按几次滚动按钮,再次重新排序等。

一般的UI并不是非常抛光 - 例如,打开或关闭选项卡时没有动画。

epiphany通过强制重新排序它们在开始时重新排序,使用紧凑的布局,不扩展它们而不允许关闭它们,但它们仍然可以滚动它们,并且基于窗口大小的标签宽度更改的事实会影响这些选项卡糟糕:

它提供了一个弹出窗玻片,以便在它们不适合屏幕时快速切换。这并没有帮助重新排序。

基本的DynamicNotebook在关闭选项卡后实现了调整延迟,但它不是很可靠,例如,当滚动箭头消失时,它会跳跃。它还只能在GNOME应用程序中的选项卡不扩展时工作。

此外,GTKNotebook包含两个视图和标签,它们是不可分割的,因此无法在全屏中具有标签,与标题栏自动连接,或将它们放在标题栏中,远离内容。

最后,它不是自适应的,epiphany目前有一个树形开关的移动标签切换器,每个想要复制的每个应用程序都要复制。

因此,通过所有这些,我相信前进的最干净的方式是一个完全新的小部件,实现了专门的动态选项卡。虽然我们在那里,我们也可以将制表舌视图和标签栏分成单独的小部件,就像GTKSTACK和GTKStackSwitcher是单独的。

我开始在瓜德克2020年之前不久实施,并且当我加入Purism时,大多数在9月底之前完成了它。 1月,我和Adrien终于花了时间完成,审查和落地。

这是两个名为HDYTABVIEW和HDYTABBAR的小部件,最近发布了Libhandy 1.2。

HDYTABVIEW包含一个GTKSTACK,提供更适合选项卡的API:例如,Pages是严格订购的,有关TAB重新排序的API,而不是转换或子名称等。因此,每个页面都有大量元数据,它使用GTK 4样页面对象(HDYTABPAGE)即使在GTK 3中,而不是Child Properties,它是非常烦人的,没有属性绑定等。

同时,HDYTABBAR是连接到HDYTABVIEW的标签栏,并显示其页面,实现此设计。

选项卡具有图标,标题,工具提示,关闭按钮,上下文菜单,它们可以显示加载旋转器而不是图标。

固定标签。它们紧凑,放置在标签栏的开头,不要与其他标签一起滚动;它们还会影响Ctrl + Home / End等快捷方式的行为。

指示灯图标:每个页面都可以在其选项卡上有一个指示灯图标,可选择可点击。 Epiphany目前用它作为音频播放指示灯/静音按钮。指标位于标签的左侧,以便与近距离按钮不冲突。当标签被固定,指示灯显示,而不是图标,而不是在其旁边顿悟以前喜欢。要确保可以轻松选择选项卡,只有点击已选择选项卡只能点击,因此第一个单击“选择”选项卡,第二次单击“激活指示”。

使用指针关闭选项卡时,它们不会立即填充空白空间,而是调整大小,以便下一个选项卡的关闭按钮恰好移动到最后一个,允许在不移动指针的情况下关闭多个选项卡。

新标签的自动定位,尽管还有API可以在需要时插入任意位置的选项卡。

完全工作的拖动N-DROP:选项卡可以重新排序,在Windows之间移动,删除桌面以创建一个新窗口,选项卡可以接受删除任意数据。如果Tab栏只有一个选项卡,则在拖动开始并在结束时隐藏时会自动显示,因此仍然可以将另一个标签放入其中。选项卡也可以删除在Tab视图上;在这种情况下,它们在标签栏的末尾附加。

触摸屏支持:拖动选项卡栏滚动它,长按并拖动以重新排序选项卡,较长按钮打开上下文菜单。

选项卡打开,关闭,重新排序,拖动N滴,显示和隐藏标签栏的所有动画。

他们分离的事实允许Epiphany将其标签栏保留在40中的全屏。

它不允许将任意窗口小部件设置为标签布局。布局通过HDYTABPAGE属性来固定并专门管理。

它不允许单独切换重新排序和分离不同的选项卡。选项卡始终重新排序和可拆卸,无法禁用该标签。

同样,没有办法让某些标签展开或不扩展。默认情况下扩展所有选项卡(Pinned除外)。

所有选项卡(除了固定时)都有关闭按钮。它们无法删除,尽管可以延迟和/或拒绝关闭请求,例如,如果应用程序在关闭选项卡时要显示确认对话框。

在所选和/或悬停的选项卡上可见关闭按钮。没有选项可以在所有选项卡上显示它们。

垂直标签。 HDYTABBAR严格横向,其布局不会垂直感知。但是,它确实可以通过GlistModel(GTK 4中的GTKSelectionModel)观察其页面,因此它非常容易制作垂直列表。

但是,由于Epiphany也用于基本操作系统,因此HDYTabbar确实提供API来禁用自动和标签扩展,并交换关闭按钮和指示灯。 Epiphany中的所有选项仍然像以前一样工作。

但是,HdeTabbar也不是自适应。 Epiphany仍然在40次船只船只相同的移动UI。但是,它使实现替代切换器更容易。例如,基于HDYFLAP的底板:

但是,这是非常基本的。 移动选项卡切换器通常非常精细,例如使用3D堆栈的卡片,网格,转盘或具有预览的列表。 不幸的是,所有这些都是GTK 3中的限制3.但是,使用GTK 4并不是,我们可以做到这一点: 具有适当的概述还允许最终从EPIphany删除选项卡POLOVER,该选项卡仍然存在于40中,但仅显示选项卡栏开始滚动。 HdeTabview和HdeTabbar的GTK 4端口完全工作,并且只需要代码审查,但概述尚未成为可重用的小部件。 感谢GNOME设计团队设计它并回答我无尽的问题,了解如何运作,而Thibault Martin和Jordan Petridis进行测试。