Composer button bar suggestions

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… :slightly_smiling_face:
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;
      }
    }
  }
}
12 Likes

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

2 Likes

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

I feel a theme component coming on…

4 Likes

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

2 Likes