Composer button bar suggestions

[Don]

Hello,

This is a common issue on our forum. The native mobile context menu and selection is make complicate to use the editor button bar. So I made some hacky changes (need more work) but I think this is good, for an idea…
I show an example.

Context menu covers the editor button bar.

Selection and contextmenu covers the options popup menu

---

I moved the editor button bar section to the bottom of the editor on mobile and also changed the options popup menu position.

Desktop

Mobile

This way the native selection and contextmenu elements won’t cover this part.

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

that’s great, thank you very much. It’s just a small change, but it makes the mobile experience really great

[nathank (Nathan Kershaw)]

Yeah, I’ve had the same problems and this would be an excellent improvement.

I feel a theme component coming on…

[jidanni (Dan Jacobson)]

Sounds wonderful. Please also test on devices where you only have three lines in the input window. Not about 12 as in your first screenshot. Such a tiny window to edit here on a cell phone

[Jagster (Jakke Lehtonen)]

I really liked that solution, but it isn’t playing nicely with AI helper anymore

[Heliosurge (Dan DeMontmorency)]

Hi Don,

Was wondering if you might have a solution for mobile Android Keyboard.

On Google Pixel 8 and possibly other android phones. When using the code editor in theme & theme-component, the keyboard covers the area being inputted if there is a lot of code and bottom areas. This also happens in the code editor for the new Form-templates.

If I am understanding this can likely be fixed by adding padding to the bottom? So keyboard is only covering empty area?

[Don]

Hello

I’ve placed the AI to top right. I think it won’t interfere anything and the expanded options is full width top. I disabled the animations to prevent flashing while selecting. Not too tested code but something… I think it should work iPhone too but I didn’t test it so please test before go live. The composer is always in full height.

Mobile / 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, I am not sure about this but if it’s a common issue or core issue than I think it worth to open a new ux topic with some screenshots / video…

[Jagster (Jakke Lehtonen)]

It works on iPhone, but the cog opens funny. It opens inside button bar.

[Heliosurge (Dan DeMontmorency)]

Will do thanks Don!

Added this code to add support for Character count component.

Mobile CSS

//* Moves character count above bottom composer bar
.character-counts {
    bottom: 2.5em !important;
}

Prior to adding this the character count and composer bar overlapped each other

Result

[Jagster (Jakke Lehtonen)]

And thought you moved tool bar up. But it should still be down? Well, in iPhone it is up, but is scrollable.

[Don]

@Jagster

the cog opens funny. It opens inside button bar.

That is by design I think. See the last video in OP.

@Jagster

And thought you moved tool bar up. But it should still be down?

The last code I share is only for the AI button positioning it’s an additional for the OP codes. But of course, you can use it separately too.

[Jagster (Jakke Lehtonen)]

Additional? Ok, I replaced totally mobile section

edit

I got button bar where it should be and working as it should after using all snippets, from OP and new one. But now I don’t have AI-icon anymore

edit2

When I tap the hamburger of the composer, aka. hiding the button bar, AI-icon pops up.

And cog iPad doesn’t do anything.

Does that sound any better than those my earlier crazy stuff?

[Don]

Yeah, it seems not work with reverse column or other ordering. So I think if it isn’t work with this then we can’t do too much to combine these two modification.

@Don

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

I’ll looking for a new workaround to makes it work and redesign things a little bit…

[Jagster (Jakke Lehtonen)]

Bummer. Because for me, as a layman, that sounds like change of Discourse how to show AI helper broke several things in Apple-devices, because your solution worked earlier

[sam (Sam Saffron)]

Have you pressed the cog on the composer recently? We added a shortcut and link to proofreading there, which is very easy to use on mobile.

[Jagster (Jakke Lehtonen)]

I have not. Quite nice, I should use proofreading more often because then I may not violate English so badly.

And yet I’m missing other options that AI helper offer. But sure, the cog solution is easy to use indeed.