Como personalizar a barra de ferramentas do composer?

Funcionalidade
1

Gostaria de saber se há alguma maneira de personalizar quais botões são exibidos (e em qual ordem) na barra de ferramentas de Novo Tópico.

Especificamente, quero substituir o botão Data/Hora pelo botão Adicionar Evento. A Data/Hora apenas causa confusão para novos usuários e, em nosso contexto, Eventos é o que queremos destacar. Instruir os usuários a ignorar primeiro o botão com aparência de calendário, clicar no ícone de engrenagem e, em seguida, clicar no outro ícone com aparência de calendário não é o ideal, considerando que nossa comunidade tem muitos usuários mais velhos e não orientados para tecnologia.

Vejo que existem tópicos sobre a personalização do botão de novo tópico, mas não da barra de ferramentas em si.

3 curtidas
2

Também estou curioso sobre isso. Recentemente adicionamos uma ferramenta à barra de ferramentas do compositor e isso empurrou o :gear: para a próxima linha.

CleanShot 2024-08-27 at 10.44.59
CleanShot 2024-08-27 at 10.44.59644×386 17.4 KB

1 curtida
3

Não há uma configuração para personalizar a barra de ferramentas, mas é possível fazê-lo através de temas e plugins.

Seria bom ter esse recurso, então vou reclassificá-lo como uma solicitação de recurso.

Por enquanto, os botões podem ser ocultados com CSS… por exemplo:

.d-editor-button-bar {
  .local-dates {  // oculta o botão de data
    display: none;
  }
}

ou para ocultar uma opção do menu de :engrenagem:

.toolbar-popup-menu-options {
  [data-name="Build Poll"] {
    display: none;
  }
}

Com CSS também é bastante simples reordenar itens nesses menus… você pode fazer algo como:

.d-editor-button-bar {
  .local-dates {  // move o botão de data para o início
    order: -1;
  }
}

Temos um guia para descobrir como fazer alterações em CSS aqui:

Dito tudo isso, a mudança mais difícil é mover algo do menu suspenso para a barra de ferramentas principal (ou vice-versa). Você precisaria ocultar o botão original com CSS e, em seguida, adicionar um botão duplicado usando a API.

Olhar para um componente de tema de exemplo, como Discourse Gifs dá uma ideia geral de como isso é feito… embora isso se torne complicado se você não for um desenvolvedor.

9 curtidas
4

para o menu :gear:

Quando tentei escrever desta forma, a ordem de exibição não mudou.
PS: display: none; também não funcionou.

.toolbar-popup-menu-options {
  [data-name="Create event"] {
    order: -1;
  }
}

A sintaxe a seguir funciona como esperado, movendo “Create event” para o topo.

.select-kit-collection {
  display: flex;
  flex-direction: column;
}

.select-kit-row[data-name="Create event"] {
  order: -1;
}

Não sou familiarizado com CSS, o ChatGPT me ajudou a criar o código acima.

1 curtida
5

Sim, isso é muito necessário. Não apenas uma opção “padrão” para todos os usuários, mas então cada usuário poderia personalizá-la, porque nem todo mundo precisa ter um botão para deixar o texto em “Negrito”, “Itálico” ou até mesmo “Perguntar à IA”.

Mas, por enquanto, poder pelo menos reorganizar as coisas globalmente e adicioná-las ao menu oculto/roda dentada já ajudaria.

Na minha tela de 13 polegadas, as coisas estão começando a ficar um pouco apertadas (sempre gosto de ter parte do tópico original visível para citar seções, etc.):

image
image1013×596 51.4 KB

6

Estou curioso: como você adicionou a nota “20 caracteres necessários” e ela mostra quantos caracteres a pessoa já digitou? E quanto ao título?

7

Para ser honesto, não tenho certeza. Isso foi instalado em uma comunidade que eu administrava anteriormente (mas não administro mais). Parece que pode ser localizado aqui.

2 curtidas
8

Obrigado! É exatamente isso! :raising_hands:

1 curtida
9

Também tenho pessoas mais velhas no meu fórum e me sinto tolo explicando isso a elas.

A engrenagem também é um símbolo muito pouco óbvio para “há mais”. Talvez uma elipse seria mais apropriada? Existe uma maneira direta de alterar o ícone?

Outro obstáculo que encontrei aqui é que, no celular, há um pequeno ícone de hambúrguer que oculta/mostra a barra de ferramentas, e parece estar desativado por padrão. Isso causa muito mais confusão do que qualquer benefício que possa oferecer. Eu o desativei:

.composer-controls .toggle-toolbar {
  display: none;
}

.d-editor-button-bar {
  display: grid !important;
}
10

Olá, eu estava me perguntando se este método ainda é recomendado, ou se é afetado por isto?

1 curtida
11

Usar api.onToolbarCreate de um inicializador .js ainda é suportado :+1:
O tópico que você vinculou refere-se apenas à inclusão de javascript em tags <script type="text/discourse-plugin">.

3 curtidas
12

Olá,

Eu tenho o “ícone de criar evento” posicionado à direita e fora do menu +, mas você pode colocá-lo à esquerda com estas instruções:

1° No cabeçalho do seu tema em admin > aparência > tema > editar > editar código > head adicione este javascript

<!-- Botão Personalizado de Criação de Evento (Baseado em Ícone, à Prova de Idiomas) -->
<script>
(() => {
  const e = ".d-editor-button-bar";
  const t = ".btn.no-text.fk-d-menu__trigger.toolbar-menu__options-trigger.toolbar__button.options.toolbar-popup-menu-options";
  const n = ".fk-d-menu__inner-content";
  const o = ".d-modal.fk-d-menu-modal";
  const c = (e) => {
    const t = e.querySelector('svg use[href="#calendar-day"]');
    return t ? t.closest("button") : null;
  };
  const r = (e, t, n = 4000) => new Promise((o, c) => {
    const r = t(e);
    if (r) return o(r);
    const l = new MutationObserver(() => {
      const n = t(e);
      n && (l.disconnect(), o(n));
    });
    l.observe(e, { childList: !0, subtree: !0 });
    setTimeout(() => {
      l.disconnect();
      c();
    }, n);
  });
  const l = (e = 4000) => {
    const t = new MutationObserver(() => {
      document.querySelector(o) && t.disconnect();
    });
    t.observe(document.body, { childList: !0, subtree: !0 });
    setTimeout(() => {
      t.disconnect();
    }, e);
  };
  const s = (e) => {
    if (e.querySelector(".custom-create-event-btn")) return;
    const o = document.createElement("button");
    o.className = "btn no-text btn-icon toolbar__button link custom-create-event-btn";
    o.title = "Criar evento";
    o.innerHTML = '<svg class="fa d-icon d-icon-calendar-day svg-icon"><use href="#calendar-day"></use></svg>';
    e.appendChild(o);
    o.addEventListener("click", async () => {
      const e = document.querySelector(t);
      if (!e) return;
      e.click();
      let o = document.querySelector(n);
      if (!o) {
        await new Promise((e, t) => {
          const c = new MutationObserver(() => {
            o = document.querySelector(n);
            o && (c.disconnect(), e());
          });
          c.observe(document.body, { childList: !0, subtree: !0 });
          setTimeout(() => {
            c.disconnect();
            t();
          }, 2000);
        });
      }
      try {
        (await r(o, c)).click();
        l();
      } catch {}
    });
  };
  const u = new MutationObserver(() => {
    const t = document.querySelector(e);
    t && s(t);
  });
  u.observe(document.body, { childList: !0, subtree: !0 });
  const d = document.querySelector(e);
  d && s(d);
})();
</script>

2° Se você quiser o ícone à esquerda e não à direita: na mesma página de administração, você encontrará uma aba de CSS onde poderá adicionar isto:

.btn.no-text.btn-icon.toolbar__button.link.custom-create-event-btn { order: -1; }

3° Bônus: se você quiser que este botão seja visível neste local apenas em categorias específicas, use o script lá e modifique as condições com os nomes das suas categorias Discourse Calendar (and Event) - #547 by opcourdis

image
image1034×334 33.8 KB

1 curtida
13

Muito obrigado a @david e @opcourdis pelas respostas úteis.

2 curtidas