齿轮编辑器菜单为什么有这么多选项?

在桌面端主菜单栏有足够空间的情况下,为什么这么多选项都隐藏在齿轮菜单选项后面?预格式文本项目符号列表编号列表之前不是在主菜单栏上的吗?

4 个赞

我猜这截图是来自 Meta。:slight_smile:

在我的笔记本电脑(Windows/Firefox)上,我的格式栏是这样的:

你使用的设备有什么不同之处可能解释这种差异吗?

我也看到了和 @JammyDodger 一样的现象,即使我缩小浏览器窗口:

您好,

这是一个触摸屏设备吗?

4 个赞

它是一款触摸屏笔记本电脑,是的。我希望可以改回原来的样子,为 iPad / 平板电脑找到另一个解决方案,因为在我的 13 英寸笔记本电脑(不算特别大)上的体验因这次更改而变得糟糕得多。

我也遇到了同样的问题。

在提供用于设置编辑器按钮布局的 UI 之前,@awesomerobot 提供了一些 CSS 示例来重新排列它们,并且确实有效。

谢谢 Kris!!!

Kris 还建议最好将此添加为主题组件,这样它就可以与您当前的主题分开。

如何做到:

  1. 转到 admin\u003ecustomize\u003ethemes,然后单击 new
  2. 将其命名为“Tiles button order”,从下拉列表中选择“component”,然后单击 create
  3. 然后您可以单击 Edit CSS/HTML,将上面的 CSS 复制并粘贴到 common \u003e css

现在组件已创建,您需要将其添加到当前主题中。

  1. 返回上一页,然后从组件选项卡切换到主题选项卡
  2. 选择当前活动的主题(它会有一个绿色的勾号)
  3. 在此主题设置中,有一个 Theme Components 部分,从下拉列表中找到新组件,然后单击“add”
  4. :tada: 现在当您返回论坛主页并刷新时,它应该已激活。

来自 Tiles Image Gallery - #66 by awesomerobot
Tiles Image Gallery - #68 by awesomerobot

我的 iPhone 8 上看到的选项也更少了。不确定这是否与此更改有关,但主菜单栏上显然还有很多额外的空间。

我们一直避免观察工具栏的宽度及其内容,并根据可用空间进行调整,因为这将是一个相当复杂的变化,可能会带来一些脆弱性。

因此,挑战在于我们需要在不溢出撰写器的情况下,让所有图标都适合大多数设备(在此更改之前,一些较窄的触摸屏设备根本无法访问齿轮菜单)。不幸的是,这意味着在某些情况下,齿轮菜单中的图标比需要的要多。

我们曾粗略地讨论过添加一些站点设置,允许管理员决定隐藏在齿轮下拉菜单中的内容,因此将来这可能会变得可配置。

13 个赞

非常赞同此建议。

5 个赞

用户设置会更好。 :slight_smile:

主要是因为我不是管理员,哈哈。目前,我主要将菜单用于隐藏文本和隐藏的详细信息。能够在主菜单中显示它们会很好。但它似乎非常用户特定,因此站点设置只能提供有限的帮助。

3 个赞

我们的网站有很多用户发布的代码片段、脚本和日志输出。从我们的角度来看,将预格式化代码按钮移至触摸屏的齿轮菜单并非最佳选择。有没有什么方法(无需修补 JavaScript)可以将此按钮移回按钮栏或将其与其他我们认为不那么重要的按钮交换?

2 个赞

您好,

这样您就可以为触摸设备添加一个新的预格式化文本按钮。

将以下内容添加到新组件的 Common/Header 部分。

  <script type="text/discourse-plugin" version="0.8">
  const container = Discourse.__container__;
  this.capabilities = container.lookup("capabilities:main");

  if (this.capabilities.touch) {
    api.onToolbarCreate(function(toolbar) {
      toolbar.addButton({
        id: "code",
        group: "insertions",
        preventFocus: true,
        trimLeading: true,
        action: "formatCode",
      });
    });
  }
  </script>

将此添加到 Common/CSS 部分。这将从弹出菜单中隐藏预格式化文本按钮。

.select-kit.dropdown-select-box.toolbar-popup-menu-options {
  li[data-value="applyFormatCode"] {
    display: none;
  }
}

4 个赞

@Don - 非常感谢。效果非常好。

1 个赞

这将非常有帮助。我注意到我网站上的大多数用户都不知道在轮子/齿轮菜单下有任何选项。

1 个赞

而且我注意到,绝大多数用户根本没有使用工具栏。包括在这里的 Meta 上。

所以,真正的大问题(tm)不是我们在齿轮菜单下有什么或没有什么,而是我们是否应该把所有东西都放在齿轮下,提供更简洁的写作体验 :smirking_face:

1 个赞

在 Discourse 的最新更新后,@Don 提供的解决方案似乎不再有效,并且齿轮菜单中也缺少代码格式化按钮编辑:通过移除自定义组件,该按钮重新出现在了齿轮菜单中。我们现在需要一个替代的解决方案,以便在移动设备上的标题菜单中恢复该按钮。

作为一个编程学习论坛的版主,我们的用户能够正确地格式化他们的代码,包括在移动设备上,这一点非常重要。这个问题给我们带来了更大的挑战。:confused:

1 个赞

@sableraph :wave:

谢谢,我现在已经为此创建了一个可用的主题组件。GitHub - VaperinaDEV/touch-composer-code-button-to-insertions

2 个赞

感谢您的回复!

我不确定如何安装主题,但我设法像这样修补了您的原始组件:

<script type="text/discourse-plugin" version="0.8">
  const container = Discourse.__container__;
  this.capabilities = container.lookup("capabilities:main");

  if (this.capabilities.touch) {
    withPluginApi("0.8", api => {
        api.onToolbarCreate(toolbar => {
          toolbar.addButton({
            id: "code",
            group: "insertions",
            icon: "code",
            preventFocus: true,
            trimLeading: true,
            action: "formatCode",
          });
        });
      });
  }
</script>

CSS 保持不变。

Discourse 的最新更新(v3.3.0-beta2)似乎存在此问题。该按钮位于工具栏上,但选择它会触发关于“formatCode”不是函数的错误。齿轮上的按钮仍然可以正常工作。有什么变化?

Replace

action: "formatCode",

By

action: () => toolbar.context.send("formatCode")

That should fix the issue :+1:

1 个赞