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 Flemming)]

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

[Heliosurge (Dan DeMontmorency)]

ドンさん、こんにちは。

Androidのモバイルキーボードに関する解決策をお持ちでしょうか？

Google Pixel 8、および他のAndroid端末で確認されています。Customization > Theme や Customization > Theme component のコードエディタを使用している際、コード量が多く下部の領域を編集しようとしたとき、キーボードが入力対象の領域を覆い隠してしまいます。これは、新しいForm-templatesのコードエディタでも同様です。

私の理解では、下部にパディングを追加することで、キーボードが空いている領域だけを覆うようにすれば修正できるのでしょうか？

[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、これについては確信がありませんが、もしこれが一般的な問題やコア側の問題であるなら、スクリーンショットや動画とともに新しい Contribute > UX トピックを作成する価値があると思います…

[Jagster (Jakke Flemming)]

iPhoneでは動作しますが、歯車のアイコンが正しく表示されません。ボタンバーの内側に表示されます。

[Heliosurge (Dan DeMontmorency)]

承知しました、ドン！

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

モバイルCSS

//* 文字数カウントをコンポーザーバーの下部に移動させます
.character-counts {
    bottom: 2.5em !important;
}

これを追加する前は、文字数カウントとコンポーザーバーが重なっていました。

結果

[Jagster (Jakke Flemming)]

そして、ツールバーが上に移動したと思われたかもしれません。しかし、それはまだ下にあるべきですよね？iPhoneでは上になっていますが、スクロール可能です。

[Don]

@Jagster

歯車が面白く開きます。ボタンバーの中に開きます。

それはデザインによるものだと思います。OPの最後のビデオを見てください。

@Jagster

そして、ツールバーを上に移動したと思いましたが、まだ下にあるべきですか？

私が共有した最後のコードは、AIボタンの位置決めのためだけで、OPのコードに追加するものです。もちろん、別々に使用することもできます。

[Jagster (Jakke Flemming)]

追加？わかりました、モバイルセクションを完全に置き換えました😝

編集
OPと新しいスニペットの両方を使用して、ボタンバーが本来あるべき場所にあり、正常に機能するようになりました。しかし、AIアイコンがなくなってしまいました🤦‍♂️

編集2
コンポーザーのハンバーガー（ボタンバーを非表示にする）をタップすると、AIアイコンが表示されます。

そして、iPadの歯車アイコンは何もしません。

これまでの私の奇妙なものよりはましに聞こえますか？

[Don]

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

@Don

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

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

[Jagster (Jakke Flemming)]

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

[sam (Sam Saffron)]

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

[Jagster (Jakke Flemming)]

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

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

[Heliosurge (Dan DeMontmorency)]

ドニーさん

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