Composer ボタンバーのサジェスト

[Don]

こんにちは。

これは私たちのフォーラムでよくある問題です。ネイティブのモバイルコンテキストメニューと選択機能により、エディタのボタンバーの使用が複雑になっています。そのため、いくつかハッキーな変更を加えました（さらに作業が必要ですが）、アイデアとしては良いと思います…
例を示します。

コンテキストメニューがエディタのボタンバーを覆っています。

選択とコンテキストメニューがオプションのポップアップメニューを覆っています。

---

モバイルではエディタのボタンバーセクションをエディタの下部に移動し、オプションのポップアップメニューの位置も変更しました。

デスクトップ

モバイル

これにより、ネイティブの選択およびコンテキストメニュー要素がこの部分を覆うことはなくなります。

共通 > 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)]

素晴らしいですね。入力ウィンドウが3行しかないデバイスでもテストしてください。最初のスクリーンショットのように12行ではなく。 Such a tiny window to edit here on a cell phone

[Jagster (Jakke Lehtonen)]

そのソリューションはとても気に入りましたが、AIヘルパーとうまく連携しなくなってしまいました😢

[Heliosurge (Dan DeMontmorency)]

ドンさん、こんにちは。

Androidモバイルキーボードの解決策をお持ちではないかと思っておりました。

Google Pixel 8およびその他のAndroidフォンで発生する可能性があります。Theme および Theme component のコードエディタを使用している場合、コード量が多く、下部領域がある場合、キーボードが入力中の領域を覆ってしまいます。これは、新しいフォームテンプレートのコードエディタでも発生します。

私の理解が正しければ、これは下部にパディングを追加することで修正できる可能性がありますか？キーボードが空の領域のみを覆うようにするためです。

[Don]

こんにちは

AI を右上に配置しました。他の要素と干渉せず、展開されたオプションは全幅トップになると思います。アニメーションは、選択時のちらつきを防ぐために無効にしました。あまりテストされていないコードですが、おそらく機能するはずです。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)]

承知しました、ドン！

文字数カウントコンポーネントのサポートを追加するために、このコードを追加しました。

モバイル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]

はい、逆順や他の順序では機能しないようです。そのため、これら2つの変更を組み合わせても、あまり多くのことはできないと思います。

@Don

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

機能するように新しい回避策を探し、物事を少し再設計します…

[Jagster (Jakke Lehtonen)]

残念ですね。なぜなら、私のような素人には、AIヘルパーの表示方法の変更がAppleデバイスでいくつかの問題を発生させたように聞こえるからです。以前はあなたのソリューションでうまくいっていたのに

[sam (Sam Saffron)]

最近、コンポーザーの歯車アイコンをクリックしましたか？そこに校正へのショートカットとリンクを追加しました。これはモバイルで非常に使いやすいです。

[Jagster (Jakke Lehtonen)]

まだです。とても良いですね。もっと校正を使うべきです。そうすれば、英語をそんなにひどく間違えることはないでしょう。

しかし、AIヘルパーが提供する他のオプションを見逃しています。でも、確かに、歯車の解決策は確かに使いやすいです。

[Heliosurge (Dan DeMontmorency)]

ドニーさん

バーに表示されていないアイテムのバーがスクロールしなくなったため、コードの更新が必要かもしれません。