Sugestões para barra de botões do Composer

Experiência do Usuário
1

Olá,

Esta é uma questão comum em nosso fórum. O menu de contexto nativo do celular e a seleção complicam o uso da barra de botões do editor. Então, fiz algumas alterações improvisadas (precisam de mais trabalho), mas acho que serve como uma ideia… :slightly_smiling_face:
Mostro um exemplo.

O menu de contexto cobre a barra de botões do editor.

Screenshot_20230108_041530_com.android.chrome
Screenshot_20230108_041530_com.android.chrome1080×2240 245 KB

A seleção e o menu de contexto cobrem o menu pop-up de opções

Screenshot_20230108_041646_com.android.chrome
Screenshot_20230108_041646_com.android.chrome1080×2240 229 KB

Movi a seção da barra de botões do editor para a parte inferior do editor no celular e também alterei a posição do menu pop-up de opções.

Desktop

Screenshot 2023-01-08 at 16.07.47
Screenshot 2023-01-08 at 16.07.47743×404 16 KB

Celular

Screenshot_20230108_160152_com.android.chrome
Screenshot_20230108_160152_com.android.chrome1080×2240 202 KB

Dessa forma, os elementos nativos de seleção e menu de contexto não cobrirão esta parte.

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

Celular > 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;
      }
    }
  }
}
13 curtidas
2

isso é ótimo, muito obrigado. É apenas uma pequena mudança, mas torna a experiência móvel realmente ótima :smiling_face_with_three_hearts:

4 curtidas
3

Sim, tive os mesmos problemas e esta seria uma excelente melhoria.

Sinto que um componente de tema está a caminho…

5 curtidas
4

Parece maravilhoso. Por favor, teste também em dispositivos onde você só tem três linhas na janela de entrada. Não cerca de 12 como na sua primeira captura de tela. Such a tiny window to edit here on a cell phone

2 curtidas
5

Gostei muito dessa solução, mas ela não está mais funcionando bem com o AI Helper :cry:

2 curtidas
6

Olá Don,

Gostaria de saber se você teria uma solução para o teclado do Android móvel.

No Google Pixel 8 e possivelmente em outros telefones Android. Ao usar o editor de código em Theme e Theme component, o teclado cobre a área que está sendo inserida se houver muito código e áreas inferiores. Isso também acontece no editor de código para os novos modelos de formulário.

Se eu estiver entendendo corretamente, isso pode ser corrigido adicionando preenchimento na parte inferior? Assim, o teclado cobrirá apenas uma área vazia?

1 curtida
7

Olá :wave:

Coloquei o IA no canto superior direito. Acho que não vai interferir em nada e as opções expandidas ficam na largura total superior. Desabilitei as animações para evitar flashes ao selecionar. Código não muito testado, mas algo… Acho que deve funcionar no iPhone também, mas não testei, então, por favor, teste antes de ir ao ar. O composer está sempre em altura total.

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, não tenho certeza sobre isso, mas se for um problema comum ou um problema central, acho que vale a pena abrir um novo tópico UX com algumas capturas de tela / vídeo… :slightly_smiling_face:

1 curtida
9

Funciona no iPhone, mas a engrenagem abre de forma estranha. Ela abre dentro da barra de botões.

1 curtida
10

Farei isso, obrigado Don! :+1:

Adicionei este código para adicionar suporte ao componente de contagem de caracteres.

CSS para celular

//* Move a contagem de caracteres acima da barra inferior do compositor
.character-counts {
    bottom: 2.5em !important;
}

Antes de adicionar isso, a contagem de caracteres e a barra do compositor se sobrepunham.

Resultado

Screenshot_20240822-214435
Screenshot_20240822-214435864×1817 142 KB

1 curtida
11

E pensei que você tivesse movido a barra de ferramentas para cima. Mas ela ainda deveria estar para baixo? Bem, no iPhone ela está para cima, mas é rolável.

12

Isso é por design, eu acho. Veja o último vídeo no OP.

O último código que compartilhei é apenas para o posicionamento do botão de IA, é um adicional para os códigos do OP. Mas, claro, você também pode usá-lo separadamente. :slightly_smiling_face:

13

Adicional? Ok, substituí totalmente a seção móvel :squinting_face_with_tongue:

editar

Tenho a barra de botões onde deveria estar e funcionando como deveria após usar todos os trechos, do OP e o novo. Mas agora não tenho mais o ícone de IA :man_facepalming:

editar2

Quando toco no hambúrguer do composer, ou seja, escondendo a barra de botões, o ícone de IA aparece.

E o cog do iPad não faz nada.

Isso soa melhor do que minhas loucuras anteriores?

1 curtida
14

Sim, parece que não funciona com a coluna reversa ou outra ordenação. Então, acho que se não funcionar com isso, não poderemos fazer muito para combinar essas duas modificações. :confused:

Vou procurar uma nova solução alternativa para fazer funcionar e redesenhar as coisas um pouco…

15

Que pena. Porque para mim, como leigo, isso soa como uma mudança no Discourse de como mostrar que o helper de IA quebrou várias coisas em dispositivos Apple, porque sua solução funcionava antes :thinking:

16

Você já clicou na engrenagem do compositor recentemente? Adicionamos um atalho e um link para revisão lá, que é muito fácil de usar no celular.

17

Eu não. Muito bom, eu deveria usar mais a revisão ortográfica, pois assim talvez eu não viole tanto o inglês.

A imagem exibe uma mensagem em um aplicativo digital, possivelmente um e-mail ou um chat, com uma sugestão de edição. (Legenda por IA)
A imagem exibe uma mensagem em um aplicativo digital, possivelmente um e-mail ou um chat, com uma sugestão de edição. (Legenda por IA)1190×522 108 KB

E ainda assim estou perdendo outras opções que o assistente de IA oferece. Mas com certeza, a solução de engrenagem é fácil de usar mesmo.

1 curtida
18

Ei Don

Acho que o código pode precisar de uma atualização, pois a barra não rola mais para itens que não estão visíveis na barra.