作曲器按钮栏建议

[Don]

你好，

这是我们论坛上一个常见的问题。原生的移动上下文菜单和选择功能使编辑器按钮栏难以使用。所以我做了一些hacky的更改（需要更多工作），但我觉得这是一个不错的想法……
我举个例子。

上下文菜单覆盖了编辑器按钮栏。

选择和上下文菜单覆盖了选项弹出菜单

---

我将编辑器按钮栏部分移到了编辑器底部，并在移动设备上更改了选项弹出菜单的位置。

桌面

移动设备

这样，原生的选择和上下文菜单元素就不会覆盖这部分了。

通用 > CSS

.d-editor-textarea-wrapper {
  .d-editor-button-bar {
    display: flex;
    overflow-x: auto;
    background: var(--primary-very-low);
    .btn,
    .select-kit {
      flex: 1;
      color: var(--primary-high);
    }
    // Popup menu
    .select-kit.dropdown-select-box.toolbar-popup-menu-options {
      .select-kit-row {
        .d-icon {
          color: var(--primary-high);
        }
        .texts {
          .name {
            color: var(--primary-high);
          }
        }
      }
    }
  }
}

移动设备 > CSS

#reply-control {
  .submit-panel {
    margin-top: 1em;
  }
}

.d-editor-textarea-wrapper {
  flex-direction: column-reverse;
  .d-editor-input {
    // Bigger padding on bottom to prevent the last line selection covers the buttons bar
    padding-bottom: 1.75em;
  }
  .d-editor-button-bar {
    border-top: 1px solid var(--primary-low);
    border-bottom: none;
    // Popup menu
    .select-kit.dropdown-select-box.toolbar-popup-menu-options {
      position: static;
      .select-kit-filter {
        display: none;
      }
      .select-kit-body {
        transform: none !important;
        top: auto !important;
        bottom: 0 !important;
        flex-direction: row;
        justify-content: flex-start;
        max-width: 100%;
        width: 100% !important;
        overflow-x: auto;
        background: var(--primary-very-low);
        border: none;
      }
      .select-kit-row {
        padding: 0.5em 0.65em;
        border: 1px solid transparent;
        border-top: none;
      }
      .select-kit-collection {
        display: contents;
      }
    }
  }
}

[hoangphuctran93 (Hoàng Phúc Trần)]

太好了，非常感谢。这只是一个小小的改动，但它让移动端的体验非常棒

[nathank (Nathan Kershaw)]

是的，我遇到了同样的问题，这将是一个很好的改进。

我觉得一个主题组件即将出现……

[jidanni (Dan Jacobson)]

听起来很棒。也请在输入窗口只有三行内容的设备上进行测试。而不是像你的第一个截图那样有 12 行。Such a tiny window to edit here on a cell phone

[Jagster (Jakke Lehtonen)]

我真的很喜欢那个解决方案，但它现在和 AI 助手不太兼容了

[Heliosurge (Dan DeMontmorency)]

嗨 Don，

我想知道您是否对 Android 手机键盘有解决方案。

在 Google Pixel 8 和其他 Android 手机上。当使用 Theme 和 Theme component 中的代码编辑器时，如果代码量很大且有底部区域，键盘会覆盖输入区域。在使用新的 Form-templates 的代码编辑器中也会出现这种情况。

如果我的理解正确，这可以通过在底部添加填充来解决？这样键盘只会覆盖空白区域？

[Don]

您好

我已将 :kbd: AI :kbd: 放置在右上角。我认为它不会干扰任何内容，并且展开的选项是全宽顶部。我禁用了动画以防止选择时闪烁。代码未经充分测试，但……我认为它在 iPhone 上也应该有效，但我没有测试过，所以请在上线前进行测试。撰写器始终是全高的。

移动端 / CSS

.fk-d-menu {
  &[data-identifier=ai-composer-helper-menu] {
    position: fixed;
    display: block;
    max-width: 730px !important;
    width: 100%;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%);
    animation: none;
    .fk-d-menu__inner-content {
      background-color: transparent;
      border: none;
      box-shadow: none;
    }
    
    .ai-composer-helper-menu {
      width: 100%;
      .ai-custom-prompt {
        &__input[type=text] {
          width: 100%;
        }
      }
      .ai-helper-loading {
        display: flex;
        justify-content: center;
      }
      .ai-helper-button-group {
        justify-content: center;
      }
      
      &:not(.is-expanded) {
        position: unset;
        background: none;
        width: 100%;
        right: 0;
        padding: 0;
        ul {
          position: absolute;
          right: 8px;
          button {
            background: var(--secondary);
            border: none;
            border-radius: var(--d-button-border-radius);
            box-shadow: 0 0 0 1px var(--primary-medium);
            width: 4.5em;
            height: 1.7em;
            margin-top: calc(var(--header-offset) + 8px);
            animation: none;
            .d-icon {
              margin-right: 0.45em;
            }
            .d-button-label {
              display: block;
              color: var(--primary-high);
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}

#reply-control.open {
  height: 100%;
}

---

@Heliosurge，我不确定这一点，但如果这是一个常见问题或核心问题，我认为值得用一些截图/视频开一个新的 UX 主题……

[Jagster (Jakke Lehtonen)]

它在 iPhone 上可以正常工作，但齿轮图标打开方式有点奇怪。它会出现在按钮栏的内部。

[Heliosurge (Dan DeMontmorency)]

好的，谢谢你，Don！

添加了此代码以支持字符计数组件。

移动端 CSS

//* 将字符计数移到底部输入框栏上方
.character-counts {
    bottom: 2.5em !important;
}

在此之前，字符计数和输入框栏会重叠。

结果

[Jagster (Jakke Lehtonen)]

而且以为你把工具栏往上移了。但它应该还在下面？嗯，在 iPhone 上它是往上的，但可以滚动。

[Don]

@Jagster

齿轮的打开方式很奇怪。它在按钮栏内打开。

我认为这是设计使然。请看 OP 中的最后一个视频。

@Jagster

而且我认为你把工具栏向上移动了。但它应该还在下面？

我上次分享的代码仅用于 AI 按钮定位，它是 OP 代码的附加项。当然，你也可以单独使用它。

[Jagster (Jakke Lehtonen)]

还有别的吗？好的，我把移动部分完全替换了

编辑

在使用完 OP 和新代码片段后，我得到了按钮栏，它应该出现并且正常工作。但现在我没有 AI 图标了

编辑2

当我点击作曲家汉堡菜单（即隐藏按钮栏）时，AI 图标会弹出。

而且 iPad 的齿轮图标没有任何反应。

这听起来比我之前那些疯狂的东西好点吗？

[Don]

是的，它似乎无法与反向列或其他排序一起使用。所以我想，如果它在这种情况下不起作用，那么我们就无法对这两个修改进行太多组合。

@Don

.d-editor-textarea-wrapper {
  flex-direction: column-reverse;

我将寻找新的解决方法使其生效，并对一些东西进行重新设计……

[Jagster (Jakke Lehtonen)]

真遗憾。因为对我这个外行人来说，这听起来像是 Discourse 的更改，如何显示 AI 助手弄坏了苹果设备的几个东西，因为你的解决方案以前是有效的

[sam (Sam Saffron)]

您最近是否点击过作曲家界面中的齿轮图标？我们在此处添加了一个快捷方式和链接，可用于校对，在移动设备上使用非常方便。

[Jagster (Jakke Lehtonen)]

我还没有。相当不错，我应该更经常地使用校对，这样我就不会在英语方面犯那么多错误了。

然而，我却错过了 AI 助手提供的其他选项。但当然，齿轮解决方案确实易于使用。

[Heliosurge (Dan DeMontmorency)]

嘿，Don

我认为代码可能需要更新，因为栏目不再滚动显示栏中未显示的物品。