Tamanho aprimorado do bloco de código sistema de cores

Experiência do Usuário
,
22

Concordo muito com este sentimento.

Aumentamos o tamanho de fonte padrão de 15px para 16px. Mudar o tamanho da fonte dos blocos de código para 13px é uma grande mudança. Alguns caracteres a mais por linha valem a pena pela legibilidade?

O estilo do código inline será atualizado? No momento, eles têm cores de fundo, cores de fonte e famílias de fontes diferentes. Isso é muito aparente em postagens que entrelaçam muito texto normal, elementos de código inline e blocos de código. Isso torna a referência cruzada de código inline e trechos de código ligeiramente mais difícil.

Não relacionado às mudanças (mas relacionado a blocos de código) - alguma ideia para melhorar os ícones dos botões ao passar o mouse? Com 12px e 0,7 de opacidade, eles mal são visíveis (especialmente quando se sobrepõem ao código)

image
image452×122 4.9 KB

4 curtidas
23

Boa observação. Isso foi alterado porque os botões estavam muito visíveis. Eles foram alterados para btn-flat, mas entendo como isso pode ter sido drástico demais. Talvez isso exija um estilo personalizado aplicado aos blocos de código?

1 curtida
24

Devemos aumentar o tamanho da fonte? Ontem estive a experimentar 14px localmente e é ligeiramente menos chocante em comparação com o tipo de letra predefinido.

3 curtidas
25 
// este é um código comentado

import Component from "@glimmer/component";
import { action } from "@ember/object";
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
import { service } from "@ember/service";
import DButton from "discourse/components/d-button";
import bodyClass from "discourse/helpers/body-class";
import concatClass from "discourse/helpers/concat-class";
import ReaderModeOptions from "./reader-mode-options";

export default class ReaderModeToggle extends Component {
  @service readerMode;

  get bodyClassText() {
    if (this.readerMode.isTransitioning) {
      return "reader-mode-transitioning reader-mode";
    } else if (this.readerMode.readerModeActive) {
      return "reader-mode";
    } else {
      return "";
    }
  }

  handleDocumentKeydown(e) {
    if (e.ctrlKey && e.altKey && (e.key === "r" || e.key === "®")) {
      this.readerMode.toggleReaderMode();
    }
  }

  @action
  addEventListener() {
    document.addEventListener("keydown", this.handleDocumentKeydown.bind(this));
  }

  @action
  cleanUpEventListener() {
    document.removeEventListener("keydown", this.handleDocumentKeydown);
  }

  <template>
    {{bodyClass this.bodyClassText}}
    <DButton
      {{didInsert this.addEventListener}}
      {{didInsert this.readerMode.setupWidth}}
      {{willDestroy this.cleanUpEventListener}}
      @action={{this.readerMode.toggleReaderMode}}
      @icon="book-reader"
      @preventFocus={{true}}
      title="Toggle Reader Mode (ctrl + alt + r)"
      class={{concatClass
        "icon"
        "btn-default"
        "reader-mode-toggle"
        (if this.readerMode.readerModeActive "active")
      }}
    />
    {{#if this.readerMode.readerModeActive}}
      <ReaderModeOptions />
    {{/if}}
  </template>
}

Aqui está a última atualização :point_up_2:

8 curtidas
26

Eu realmente gostei desta última iteração, @jordan.vidrine!

2 curtidas
27

Para mim, a última atualização está parecendo muito melhor, gosto das cores e o dimensionamento não está conflitando com nossa fonte de 16px para texto.

def hello
   puts "hello world"
end

O único ponto menor é que o fundo cinza ainda parece um pouco sem graça para mim e eu prefiro um pouco mais claro. Mas, no geral, estou me sentindo muito bem com isso.

@cvx qual é a sua opinião atual?

1 curtida
28

Talvez possamos usar uma versão clara da cor terciária.

image
image793×121 4.56 KB

rgba(var(--tertiary-rgb), 0.058)

2 curtidas
29

Eu pensei em usar uma cor de uma paleta de cores do tema, mas não podemos prever qual seria. Poderia acabar muito errado :grimacing:

Eu gosto do azul, no entanto.

1 curtida
30

Você está no modo escuro ou claro?
O cinza que decidi usar é mais claro que o anterior (acho que sim). Usando var(--primary-50)

1 curtida
31

@sam / @fitzy como você está se sentindo em relação a viver com as mudanças da última semana?

32

Na minha opinião, deveríamos mesclar isso ao núcleo, está muito melhor agora.

O esquema de cores antigo está machucando meus olhos em sites antigos :slight_smile:

3 curtidas
34

Estou definitivamente a favor de onde estamos agora em comparação com o que temos no core.

No entanto, perdemos a alteração em max-height no commit 98b2763. Foi intencional? Vejo que foi comentado e depois excluído em um commit subsequente.

Se sim, ainda posso me contentar com um override local.

1 curtida
35

Sim, foi excluído para permanecer o mais próximo possível do nosso tamanho atual de codeblock.

1 curtida
36

A mesclagem será feita neste PR → UX: Codeblocks experiment merge by jordanvidrine · Pull Request #29870 · discourse/discourse · GitHub

1 curtida
37

Ok, sem problemas.

1 curtida
38

Parece que o novo preenchimento é aplicado apenas aos elementos .hljs, o que significa que blocos de código simples (sem realce) não o recebem:

hello

console.log("test")

Isso também causa saltos na altura das postagens no carregamento inicial, porque o realce (e, portanto, a classe .hljs) é aplicado de forma assíncrona.

Podemos corrigir isso para que a alteração de preenchimento se aplique aos blocos de código, mesmo sem a classe .hljs?

6 curtidas
39

O fundo mais escuro também poderia ser aplicado, para consistência?

5 curtidas
40

Obrigado por notar isso! Atualizei esses estilos para serem aplicados a code em vez de apenas a blocos hljs.

4 curtidas
41

Preciso adicionar outra correção aqui. A correção que adicionei agora também faz com que blocos de código em linha sejam renderizados em sua própria linha incorretamente.

Este é um exemplo de um bloco de código em linha renderizando incorretamente.

2 curtidas
42

O link agora retorna 404. Talvez faça sentido apontar para o PR?
UX: Codeblocks experiment merge by jordanvidrine · Pull Request #29870 · discourse/discourse · GitHub

Além disso, a equipe e eu amamos absolutamente essa mudança. Ficou tão bom! :heart_eyes:

3 curtidas