Por que tantas opções no menu do gear editor?

Na área de trabalho, onde há muito espaço na barra de menu principal, por que tantas opções estão ocultas atrás da opção de menu de engrenagem? Texto pré-formatado, Lista com marcadores e Lista numerada não estavam na barra de menu principal anteriormente?

4 curtidas

Estou assumindo que isso deve ser do Meta, a julgar pela captura de tela. :slight_smile:

No meu laptop (Windows/Firefox), esta é a minha barra de formato:

Há algo sobre o dispositivo que você está usando que pode explicar a diferença?

Eu também estou vendo o mesmo que @JammyDodger, mesmo quando diminuo a janela do navegador:

Olá,

Este é um dispositivo com tela sensível ao toque?

4 curtidas

É um laptop com tela sensível ao toque, sim. Espero que isso possa ser revertido, com outra solução encontrada apenas para iPad / tablets, porque a experiência no meu laptop de 13 polegadas (não particularmente grande) piorou muito com essa mudança.

Estou com o mesmo problema.

Até/quando/se houver uma interface para fornecer mais opções para o layout dos botões do compositor/editor, @awesomerobot forneceu alguns exemplos de CSS para reorganizá-los, e funciona.

Obrigado Kris!!!

Kris também sugere que pode ser melhor adicionar isso como um componente de tema, para que fique separado do seu tema atual.

Como fazer isso:

  1. vá para admin\u003ecustomize\u003ethemes e clique em new
  2. nomeie-o como algo como “Tiles button order”, selecione “component” no menu suspenso, clique em criar
  3. Em seguida, você pode clicar em Edit CSS/HTML, copiar e colar o CSS acima em common \u003e css

Agora o componente é criado e você precisa adicioná-lo ao seu tema atual

  1. volte para a página anterior, depois mude da aba de componentes para a aba de temas
  2. selecione seu tema atualmente ativo (ele terá um visto verde)
  3. dentro das configurações do tema aqui, há uma seção Theme Components, encontre seu novo componente no menu suspenso e clique em “add”
  4. :tada: Agora, quando você retornar à página inicial do seu fórum e atualizar, ele deverá estar ativo.

De Tiles Image Gallery - #66 by awesomerobot
e Tiles Image Gallery - #68 by awesomerobot

Também vejo menos opções no meu iPhone 8. Não tenho certeza se está relacionado a essa mudança, mas claramente há bastante espaço adicional na barra do menu principal.

Temos evitado observar a largura da barra de ferramentas e seu conteúdo e ajustar com base no espaço disponível porque seria uma alteração um tanto complicada que provavelmente introduziria alguma fragilidade.

Portanto, o desafio é que precisamos fazer todos os ícones caberem sem transbordar o compositor de uma forma que funcione para a maioria dos dispositivos (alguns dispositivos com tela sensível ao toque mais estreitos não conseguiam acessar o menu de engrenagem antes desta alteração). Infelizmente, isso significa que mais ícones acabam no menu de engrenagem do que o necessário em alguns casos.

Discutimos vagamente a adição de algumas configurações do site que permitem a um administrador decidir o que é ocultado no menu suspenso de engrenagem, então isso pode se tornar configurável no futuro.

13 curtidas

+1 muito grande para isso.

5 curtidas

Uma configuração do usuário seria melhor. :slight_smile:

Principalmente porque eu não sou um administrador, haha. Como está, eu uso principalmente o menu para texto de spoiler e detalhes ocultos. Poder mostrá-los no menu principal seria bom. Mas parece muito específico do usuário, então há um limite para o quanto uma configuração do site ajudará.

3 curtidas

Nosso site tem muitos trechos de código, scripts e saídas de log postados por nossos usuários. Mover o botão de código pré-formatado para o menu de engrenagem quando se tem uma tela sensível ao toque, do nosso ponto de vista, não foi a melhor ideia. Existe alguma maneira (sem ser modificar o javascript) de mover este botão de volta para a barra de botões ou trocá-lo por outro botão que não consideramos tão importante??

2 curtidas

Olá,

Dessa forma, você pode adicionar um novo botão de texto pré-formatado para dispositivos de toque.

Adicione o seguinte a um novo componente na seção Common/Header.

<script type="text/discourse-plugin" version="0.8">
  const container = Discourse.__container__;
  this.capabilities = container.lookup("capabilities:main");

  if (this.capabilities.touch) {
    api.onToolbarCreate(function(toolbar) {
      toolbar.addButton({
        id: "code",
        group: "insertions",
        preventFocus: true,
        trimLeading: true,
        action: "formatCode",
      });
    });
  }
</script>

Adicione isso à seção Common/CSS. Isso ocultará o botão de texto pré-formatado do menu pop-up.

.select-kit.dropdown-select-box.toolbar-popup-menu-options {
  li[data-value="applyFormatCode"] {
    display: none;
  }
}

4 curtidas

@Don - muito, muito obrigado. Funciona perfeitamente.

1 curtida

Isso seria muito útil. Notei que a maioria dos usuários no meu site não tem ideia de que existem opções no menu da roda/engrenagem.

1 curtida

E tenho notado que a grande maioria dos usuários não está usando a barra de ferramentas. Incluindo aqui no Meta.

Portanto, a Grande Questão ™ não é o que temos ou não temos sob o menu de engrenagem, mas sim se devemos colocar tudo sob a engrenagem e oferecer uma experiência de escrita mais limpa :smirking_face:

1 curtida

Após a última atualização do Discourse, parece que a solução fornecida por @Don não está mais funcionando, e o botão de formatação de código também está faltando no menu de engrenagem. Editar: Ao remover o componente personalizado, o botão reaparece no menu de engrenagem. Agora precisamos de uma solução alternativa para trazer o botão de volta ao menu do cabeçalho no celular.

Como moderador de um fórum de aprendizado de programação, é muito importante que nossos usuários possam formatar corretamente seu código, inclusive em dispositivos móveis. Esse problema está tornando as coisas mais desafiadoras para nós. :confused:

1 curtida

Olá @sableraph :wave:

Obrigado, eu fiz um componente de tema funcional agora para isso. GitHub - VaperinaDEV/touch-composer-code-button-to-insertions

2 curtidas

Obrigado pela sua resposta!

Não tenho certeza de como instalar o tema, mas consegui aplicar um patch no seu componente original da seguinte forma:

<script type="text/discourse-plugin" version="0.8">
  const container = Discourse.__container__;
  this.capabilities = container.lookup("capabilities:main");

  if (this.capabilities.touch) {
    withPluginApi("0.8", api => {
        api.onToolbarCreate(toolbar => {
          toolbar.addButton({
            id: "code",
            group: "insertions",
            icon: "code",
            preventFocus: true,
            trimLeading: true,
            action: "formatCode",
          });
        });
      });
  }
</script>

O CSS permanece o mesmo.

Parece que isso está quebrado na última atualização do Discourse (v3.3.0-beta2). O botão está na barra de ferramentas, mas selecioná-lo dispara um erro sobre ‘formatCode’ não ser uma função. O botão que permanece na engrenagem funciona bem. O que mudou?

Substitua

action: "formatCode",

Por

action: () => toolbar.context.send("formatCode")

Isso deve corrigir o problema :+1:

1 curtida