Vorschläge für die Composer-Button-Leiste

[Don]

Hallo,

Dies ist ein häufiges Problem in unserem Forum. Das native mobile Kontextmenü und die Auswahl erschweren die Verwendung der Editor-Schaltflächenleiste. Daher habe ich einige hackerische Änderungen vorgenommen (muss noch mehr Arbeit geleistet werden), aber ich denke, das ist eine gute Idee…
Ich zeige ein Beispiel.

Das Kontextmenü überlagert die Editor-Schaltflächenleiste.

Auswahl und Kontextmenü überlagern das Options-Popup-Menü

---

Ich habe den Abschnitt der Editor-Schaltflächenleiste auf dem Handy an das untere Ende des Editors verschoben und auch die Position des Options-Popup-Menüs geändert.

Desktop

Mobil

Auf diese Weise überlagern die nativen Auswahl- und Kontextmenüelemente diesen Teil nicht.

Common > 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);
          }
        }
      }
    }
  }
}

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

Das ist großartig, vielen Dank. Es ist nur eine kleine Änderung, aber sie macht das mobile Erlebnis wirklich großartig

[nathank (Nathan Kershaw)]

Ja, ich hatte die gleichen Probleme und dies wäre eine ausgezeichnete Verbesserung.

Ich glaube, eine Theme-Komponente kommt auf …

[jidanni (Dan Jacobson)]

Klingt wunderbar. Bitte testen Sie auch auf Geräten, auf denen Sie nur drei Zeilen im Eingabefenster haben. Nicht ungefähr 12, wie auf Ihrem ersten Screenshot. Such a tiny window to edit here on a cell phone

[Jagster (Jakke Lehtonen)]

Diese Lösung hat mir wirklich gut gefallen, aber sie funktioniert nicht mehr gut mit dem KI-Helfer

[Heliosurge (Dan DeMontmorency)]

Hallo Don,

Ich habe mich gefragt, ob Sie vielleicht eine Lösung für die mobile Android-Tastatur haben.

Auf Google Pixel 8 und möglicherweise anderen Android-Telefonen. Wenn Sie den Code-Editor in Theme und Theme component verwenden, verdeckt die Tastatur den Bereich, in den Sie eingeben, wenn viel Code und untere Bereiche vorhanden sind. Dies geschieht auch im Code-Editor für die neuen Formularvorlagen.

Wenn ich das richtig verstehe, kann dies wahrscheinlich behoben werden, indem unten ein Abstand hinzugefügt wird? Sodass die Tastatur nur den leeren Bereich verdeckt?

[Don]

Hallo

Ich habe die KI oben rechts platziert. Ich glaube, sie wird nichts stören und die erweiterten Optionen sind über die gesamte Breite oben. Ich habe die Animationen deaktiviert, um ein Flackern beim Auswählen zu verhindern. Nicht sehr gut getesteter Code, aber etwas… Ich denke, es sollte auch auf dem iPhone funktionieren, aber ich habe es nicht getestet, also bitte testen Sie es, bevor es live geht. Der Composer ist immer in voller Höhe.

Mobil / 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, ich bin mir nicht sicher, aber wenn es ein häufiges oder Kernproblem ist, denke ich, es lohnt sich, ein neues #ux-Thema mit einigen Screenshots / Videos zu eröffnen…

[Jagster (Jakke Lehtonen)]

Es funktioniert auf dem iPhone, aber das Zahnrad öffnet sich komisch. Es öffnet sich innerhalb der Button-Leiste.

[Heliosurge (Dan DeMontmorency)]

Werde ich machen, danke Don!

Ich habe diesen Code hinzugefügt, um die Unterstützung für die Zeichenzählkomponente hinzuzufügen.

Mobile CSS

//* Verschiebt die Zeichenzählung über die untere Composer-Leiste
.character-counts {
    bottom: 2.5em !important;
}

Bevor dies hinzugefügt wurde, überschnitten sich die Zeichenzählung und die Composer-Leiste.

Ergebnis

[Jagster (Jakke Lehtonen)]

Und dachte, Sie hätten die Werkzeugleiste nach oben verschoben. Aber sie sollte immer noch unten sein? Nun, auf dem iPhone ist sie oben, aber scrollbar.

[Don]

@Jagster

Das Zahnrad öffnet sich komisch. Es öffnet sich in der Schaltflächenleiste.

Das ist meiner Meinung nach so gewollt. Siehe das letzte Video im OP.

@Jagster

Und ich dachte, du hättest die Werkzeugleiste nach oben verschoben. Aber sie sollte immer noch unten sein?

Der letzte Code, den ich geteilt habe, ist nur für die Positionierung des KI-Buttons, er ist eine Ergänzung zu den OP-Codes. Aber natürlich kannst du ihn auch separat verwenden.

[Jagster (Jakke Lehtonen)]

Zusätzlich? Okay, ich habe den mobilen Bereich komplett ersetzt

Bearbeiten

Ich habe die Buttonleiste dort, wo sie sein sollte, und sie funktioniert wie erwartet, nachdem ich alle Snippets vom OP und das neue verwendet habe. Aber jetzt habe ich kein KI-Symbol mehr

Bearbeiten2

Wenn ich auf das Hamburger-Menü des Komponisten tippe, also die Buttonleiste ausblende, erscheint das KI-Symbol.

Und das Zahnrad-Symbol auf dem iPad tut nichts.

Klingt das besser als mein früherer verrückter Kram?

[Don]

Ja, es scheint nicht mit umgekehrter Spalte oder anderer Reihenfolge zu funktionieren. Ich denke, wenn es damit nicht funktioniert, können wir nicht viel tun, um diese beiden Änderungen zu kombinieren.

@Don

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

Ich werde nach einer neuen Lösung suchen, damit es funktioniert und die Dinge ein wenig neu gestalten…

[Jagster (Jakke Lehtonen)]

Schade. Denn für mich als Laien klingt das nach einer Änderung von Discourse, wie der KI-Helfer angezeigt wird, die mehrere Dinge auf Apple-Geräten kaputt gemacht hat, da Ihre Lösung früher funktioniert hat

[sam (Sam Saffron)]

Haben Sie kürzlich auf das Zahnrad in der Kompositionsoberfläche geklickt? Wir haben dort eine Verknüpfung und einen Link zur Korrekturlesung hinzugefügt, die auf Mobilgeräten sehr einfach zu bedienen ist.

[Jagster (Jakke Lehtonen)]

Ich habe es nicht. Ziemlich nett, ich sollte mehr Korrekturlesen verwenden, denn dann verstoße ich vielleicht nicht so stark gegen das Englische.

Und doch fehlen mir andere Optionen, die KI-Helfer anbieten. Aber sicher, die Zahnradlösung ist in der Tat einfach zu bedienen.

[Heliosurge (Dan DeMontmorency)]

Hallo Don

Ich denke, der Code muss möglicherweise aktualisiert werden, da die Leiste nicht mehr für Elemente scrollt, die nicht sichtbar sind.