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

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

[Heliosurge (Dan DeMontmorency)]

Hi Don,

ich habe mich gefragt, ob du vielleicht eine Lösung für die mobile Android-Tastatur hast.

Auf dem Google Pixel 8 und möglicherweise auch auf anderen Android-Handys deckt die Tastatur den Bereich ab, in den eingegeben wird, wenn viel Code vorhanden ist und sich am unteren Rand befindet. Dies geschieht auch im Code-Editor für die neuen Form-Templates.

Wenn ich das richtig verstehe, kann dies wahrscheinlich behoben werden, indem man unten Padding hinzufügt? So würde die Tastatur nur einen leeren Bereich abdecken?

[Don]

Hallo

Ich habe das KI-Element oben rechts platziert. Ich denke, es wird nichts stören, und die erweiterten Optionen nehmen die volle Breite oben ein. Ich habe die Animationen deaktiviert, um Flackern bei der Auswahl zu verhindern. Der Code ist noch nicht zu stark getestet, aber so in der Art… Ich denke, er sollte auch auf dem iPhone funktionieren, aber ich habe es nicht getestet, also bitte teste es, bevor du es live schaltest. 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 Problem oder ein Core-Problem ist, dann denke ich, dass es sich lohnt, ein neues #contribute:ux-Thema mit einigen Screenshots / Videos zu eröffnen…

[Jagster (Jakke Flemming)]

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

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

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

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

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.