Mejorado el tamaño del bloque de código y esquema de colores

UX
,
22

Coincido mucho con este sentimiento.

Aumentamos el tamaño de fuente predeterminado de 15px a 16px. Cambiar el tamaño de fuente del bloque de código a 13px es un gran cambio. ¿Son un par de caracteres más por línea un buen intercambio por la legibilidad?

¿Se actualizará el estilo del código en línea? En este momento, esos tienen un color de fondo, color de fuente y familia de fuente diferentes. Esto es muy evidente en las publicaciones que entrelazan mucho texto normal, elementos de código en línea y bloques de código. Hace que la referencia cruzada de código en línea y fragmentos de código sea un poco más difícil.

No relacionado con los cambios (pero relacionado con los bloques de código): ¿alguna idea para mejorar los íconos de los botones al pasar el mouse? Con 12px y 0.7 de opacidad, apenas son visibles (especialmente cuando se superponen con el código).

image
image452×122 4.9 KB

4 Me gusta
23

Buena observación. Esto se cambió porque los botones eran demasiado visibles. Se cambiaron a btn-flat, pero entiendo cómo eso pudo haber sido demasiado drástico. ¿Quizás esto requiere un estilo personalizado aplicado a los bloques de código?

1 me gusta
24

¿Deberíamos aumentar el tamaño de la fuente? Estuve experimentando con 14px ayer localmente y es un poco menos chocante en comparación con la fuente predeterminada.

3 Me gusta
25 
// este es un 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>
}

Aquí está la última actualización :point_up_2:

8 Me gusta
26

¡Me gusta mucho esta última versión, @jordan.vidrine!

2 Me gusta
27

Para mí, la última actualización se siente mucho mejor, me gustan los colores y el tamaño no está en conflicto con nuestra fuente de 16 px para el texto.

def hello
   puts "hello world"
end

El único detalle menor es que el fondo gris todavía me parece un poco apagado y prefiero un poco más claro. Pero en general, me siento bastante bien con esto.

@cvx, ¿cuál es tu opinión actual?

1 me gusta
28

Quizás podríamos usar una versión clara del color terciario.

image
image793×121 4.56 KB

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

2 Me gusta
29

Se me ocurrió usar un color de una paleta de colores temática, pero no podemos predecir cuál sería. Podría terminar terriblemente mal :grimacing:

Me gusta el azul, sin embargo.

1 me gusta
30

¿Estás en modo oscuro o modo claro?

El gris que decidí usar es más claro que el anterior (creo). Usando var(--primary-50)

1 me gusta
31

@sam / @fitzy ¿cómo se sienten al vivir con los cambios de la semana pasada?

32

En mi opinión, deberíamos fusionar esto en el núcleo, ahora se ve mucho mejor.
El esquema de colores antiguo me da dolor de ojos en los sitios antiguos :slight_smile:

3 Me gusta
34

Definitivamente estoy a favor de dónde estamos ahora en comparación con lo que tenemos en el núcleo.

Sin embargo, perdimos el cambio en max-height en el commit 98b2763. ¿Fue esto intencional? Veo que se comentó y luego se eliminó en un commit posterior.

Si es así, todavía puedo vivir con una anulación local.

1 me gusta
35

Sí, se eliminó para mantenernos lo más cerca posible de nuestro tamaño de bloque de código actual.

1 me gusta
36

Fusión que se realizará en este PR → UX: Codeblocks experiment merge by jordanvidrine · Pull Request #29870 · discourse/discourse · GitHub

1 me gusta
37

Ok, no hay problema.

1 me gusta
38

Parece que el nuevo relleno solo se aplica a los elementos .hljs, lo que significa que los bloques de código simples (sin resaltado) no lo reciben:

hello

console.log("test")

Esto también provoca saltos en la altura de las publicaciones al cargarse inicialmente, porque el resaltado (y, por lo tanto, la clase .hljs) se aplica de forma asíncrona.

¿Podemos arreglarlo para que el cambio de relleno se aplique a los bloques de código, incluso sin la clase .hljs?

6 Me gusta
39

¿Se podría aplicar también el fondo más oscuro, por coherencia?

5 Me gusta
40

¡Gracias por notarlo! He actualizado esos estilos para que se apliquen a code en lugar de solo a los bloques hljs.

4 Me gusta
41

Necesito añadir otra corrección aquí. La corrección que he añadido ahora también hace que los bloques de código en línea se muestren incorrectamente en su propia línea.

Este es un ejemplo de un bloque de código en línea que se muestra incorrectamente.

2 Me gusta
42

El enlace ahora devuelve 404. ¿Quizás tenga sentido apuntar al PR?
UX: Codeblocks experiment merge de jordanvidrine · Pull Request #29870 · discourse/discourse · GitHub

Además, al equipo y a mí nos encanta este cambio. ¡Se ve tan bien! :heart_eyes:

3 Me gusta