Composer button bar suggestions

Don · January 8, 2023, 3:51pm

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 · January 14, 2023, 2:23am

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

nathank · January 14, 2023, 3:21am

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

I feel a theme component coming on…

jidanni · February 25, 2023, 10:06pm

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 · August 22, 2024, 5:28pm

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

Heliosurge · August 22, 2024, 6:39pm

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 Customization > Theme & Customization > 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 · August 22, 2024, 11:02pm

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 Contribute > UX topic with some screenshots / video…

Jagster · August 22, 2024, 11:32pm

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

Heliosurge · August 23, 2024, 12:52am

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 · August 23, 2024, 5:51am

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

Don · August 23, 2024, 6:09am

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

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 · August 23, 2024, 6:11am

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 · August 23, 2024, 7:39am

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.

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

Jagster · August 23, 2024, 7:46am

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 · August 27, 2024, 8:28am

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 · August 27, 2024, 8:38am

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.

Heliosurge · January 21, 2025, 10:53pm

Hey Don

Think the code may need an update as the bar no longer scrolls for items not visible on bar.

Topic		Replies	Views
Android context menu covers up the composer AI helper Bug composer , mobile , ai , ai-helper , fixed	30	706	August 22, 2024
Help us test the restyled composer UX feedback	29	6228	November 10, 2017
Can't get to the bold, italic buttons if too close to the top UX composer	3	764	February 25, 2023
Help Us Test the Composer Redesign Announcements composer , design	71	3211	October 15, 2026
Expand composer button on mobile UX mobile	2	455	February 23, 2024

Composer button bar suggestions

AI-generated summary

Related topics