Amélioration de la taille du bloc de code et du schéma de couleurs

[cvx (Jarek Radosz)]

@awesomerobot

Je dois encore plisser un peu les yeux avec la petite taille de police, je ne pense pas que cela vaille le gain de place

Je suis tout à fait d’accord avec ce sentiment.

Nous avons augmenté la taille de police par défaut de 15px à 16px. Changer la taille de police des blocs de code à 13px est un changement majeur. Est-ce que quelques caractères supplémentaires par ligne valent la peine d’être échangés contre la lisibilité ?

---

Le style du code en ligne sera-t-il mis à jour ? Pour le moment, ceux-ci ont une couleur de fond, une couleur de police et une famille de polices différentes. Ceci est très apparent dans les publications qui entrelacent beaucoup de texte normal, des éléments de code en ligne et des blocs de code. Cela rend la référence croisée du code en ligne et des extraits de bloc légèrement plus difficile.

---

Sans rapport avec les changements (mais lié aux blocs de code) - des idées pour améliorer les icônes des boutons au survol ? À 12px et 0,7 d’opacité, elles sont à peine visibles (surtout lorsqu’elles chevauchent du code)

[jordan.vidrine]

@cvx

Sans rapport avec les changements (mais lié aux blocs de code) - des idées pour améliorer les icônes des boutons au survol ? À 12px et 0,7 d’opacité, elles sont à peine visibles (surtout lorsqu’elles chevauchent du code)

Belle observation. Cela a été modifié car les boutons étaient trop visibles. Ils ont été changés en btn-flat mais je vois comment cela a pu être trop drastique. Peut-être que cela nécessite un style personnalisé appliqué aux blocs de code ?

[fitzy (Michael Fitz-Payne)]

Devrions-nous augmenter la taille de la police ? J’ai expérimenté avec 14px hier localement et c’est légèrement moins choquant par rapport à la police par défaut.

[jordan.vidrine]

// ceci est du code commenté

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>
}

Voici la dernière mise à jour

[fitzy (Michael Fitz-Payne)]

J’aime beaucoup cette dernière version, @jordan.vidrine !

[sam (Sam Saffron)]

Pour moi, la dernière mise à jour est beaucoup mieux, j’aime les couleurs et la taille ne pose pas de problème avec notre police de 16px pour le texte.

def hello
   puts "hello world"
end

Le seul petit bémol est que le fond gris me semble toujours un peu terne et je préférerais un peu plus clair. Mais dans l’ensemble, je suis plutôt satisfait.

@cvx quelle est votre opinion actuelle ?

[bryce (Bryce Huhtala)]

Peut-être pourrions-nous utiliser une version légère de la couleur tertiaire.

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

[jordan.vidrine]

J’ai pensé à utiliser une couleur d’une palette de couleurs thématiques, mais nous ne pouvons pas prédire laquelle ce serait. Ça pourrait finir terriblement mal

J’aime bien le bleu cependant

[jordan.vidrine]

@sam

Le seul inconvénient mineur est que le fond gris me semble toujours un peu terne et je préférerais un peu plus clair.

Êtes-vous en mode sombre ou en mode clair ?

Le gris que j’ai décidé d’utiliser est plus clair que le précédent (je crois). Utilisation de var(--primary-50)

[jordan.vidrine]

@sam / @fitzy comment te sens-tu par rapport aux changements de la semaine dernière ?

[sam (Sam Saffron)]

Selon moi, nous devrions fusionner cela dans le cœur, cela a tellement meilleure allure maintenant.
Le vieil agencement des couleurs me fait mal aux yeux sur les anciens sites

[fitzy (Michael Fitz-Payne)]

Je suis tout à fait favorable à la situation actuelle par rapport à ce que nous avons dans le cœur du système.

Cependant, nous avons perdu la modification du max-height dans le commit 98b2763. Était-ce intentionnel ? Je vois qu’il a été commenté puis supprimé dans un commit ultérieur.

Si c’est le cas, je peux toujours m’en accommoder avec un remplacement local.

[jordan.vidrine]

@fitzy

Cependant, nous avons perdu le changement de max-height dans le commit 98b2763. Était-ce intentionnel ? Je vois qu’il a été commenté puis supprimé dans un commit ultérieur.

Si c’est le cas, je peux toujours vivre avec un remplacement local.

Oui, il a été supprimé afin de rester aussi proche que possible de la taille actuelle de notre bloc de code.

[jordan.vidrine]

@sam

À mon avis, nous devrions fusionner cela dans le cœur, cela semble tellement mieux maintenant.

Fusion à effectuer ici dans cette PR - > UX: Codeblocks experiment merge by jordanvidrine · Pull Request #29870 · discourse/discourse · GitHub

[fitzy (Michael Fitz-Payne)]

@jordan.vidrine

Oui, il a été supprimé afin de rester aussi proche que possible de notre taille de bloc de code actuelle.

Ok, pas de soucis.

[david (David Taylor)]

Il semble que le nouveau rembourrage ne soit appliqué qu’aux éléments .hljs, ce qui signifie que les blocs de code simples (sans mise en évidence) ne l’obtiennent pas :

hello

console.log("test")

Cela provoque également des sauts de hauteur des publications au chargement initial, car la mise en évidence (et donc la classe .hljs) est appliquée de manière asynchrone.

Pouvons-nous corriger cela pour que le changement de rembourrage s’applique aux blocs de code, même sans la classe .hljs ?

[NateDhaliwal]

Le fond plus sombre pourrait-il également être appliqué, par souci de cohérence ?

[jordan.vidrine]

@david

Il semble que le nouveau remplissage ne soit appliqué qu’aux éléments .hljs, ce qui signifie que les blocs de code simples (sans mise en surbrillance) ne l’obtiennent pas :

@NateDhaliwal

Le fond plus sombre pourrait-il également être appliqué, par souci de cohérence ?

Merci d’avoir remarqué ces points ! J’ai mis à jour ces styles pour qu’ils s’appliquent au code plutôt qu’aux seuls blocs hljs.

[jordan.vidrine]

Je dois ajouter une autre correction ici. La correction que j’ai ajoutée fait maintenant également que les blocs de code en ligne s’affichent sur leur propre ligne.

Voici un exemple de bloc de code en ligne s'affichant incorrectement.

[Tris20 (Tristan)]

@fitzy

https://github.com/discourse-org/design-experiments/pull/75

Le lien renvoie maintenant une erreur 404. Est-ce que cela aurait du sens de pointer vers la PR ?
UX : Codeblocks experiment merge par jordanvidrine · Pull Request #29870 · discourse/discourse · GitHub

De plus, l’équipe et moi adorons absolument ce changement. C’est tellement beau !