Verbesserte Codeblock-Größe und Farbschema

UX
,
22

Ich stimme dieser Meinung sehr zu.

Wir haben die Standard-Schriftgröße von 15 Pixel auf 16 Pixel erhöht. Die Änderung der Schriftgröße von Codeblöcken auf 13 Pixel ist ein großer Schritt. Sind ein paar Zeichen mehr pro Zeile ein guter Kompromiss für die Lesbarkeit?

Wird das Styling von Inline-Code-Elementen aktualisiert? Derzeit haben diese eine andere Hintergrundfarbe, Schriftfarbe und Schriftfamilie. Dies ist in Beiträgen, die viel normalen Text, Inline-Code-Elemente und Codeblöcke miteinander verweben, sehr deutlich. Es erschwert das Querverweisen von Inline-Code und Block-Snippets geringfügig.

Unabhängig von den Änderungen (aber im Zusammenhang mit Codeblöcken) – gibt es Ideen zur Verbesserung der Schaltflächensymbole beim Überfahren mit der Maus? Bei 12 Pixel und 0,7 Deckkraft sind sie kaum sichtbar (besonders wenn sie mit Code überlappen).

image
image452×122 4.9 KB

4 „Gefällt mir“
23

Gute Beobachtung. Dies wurde geändert, da die Schaltflächen zu sichtbar waren. Sie wurden zu btn-flat geändert, aber ich sehe, wie das zu drastisch gewesen sein könnte. Vielleicht erfordert dies einen benutzerdefinierten Stil, der auf Codeblöcke angewendet wird?

1 „Gefällt mir“
24

Sollen wir die Schriftgröße erhöhen? Ich habe gestern lokal mit 14 Pixeln experimentiert und es ist im Vergleich zur Standardschriftart etwas weniger störend.

3 „Gefällt mir“
25 
// Dies ist auskommentierter Code

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

Hier ist das neueste Update :point_up_2:

8 „Gefällt mir“
26

Ich mag diese neueste Version wirklich, @jordan.vidrine!

2 „Gefällt mir“
27

Für mich fühlt sich das letzte Update viel besser an, ich mag die Farben und die Größe passt gut zu unserer 16px-Schrift für Text.

def hello
   puts "hello world"
end

Das Einzige, was mir noch auffällt, ist, dass der graue Hintergrund für mich immer noch etwas trist wirkt und ich ihn ein kleines bisschen heller bevorzuge. Aber insgesamt bin ich damit ziemlich zufrieden.

@cvx, wie ist deine aktuelle Meinung dazu?

1 „Gefällt mir“
28

Vielleicht könnten wir eine helle Version der Tertiärfarbe verwenden.

image
image793×121 4.56 KB

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

2 „Gefällt mir“
29

Ich habe daran gedacht, eine Farbe aus einer Themenfarbpalette zu verwenden, aber wir können nicht vorhersagen, welche das sein wird. Es könnte schrecklich schiefgehen :grimacing:

Ich mag das Blau aber

1 „Gefällt mir“
30

Bist du im dunklen oder im hellen Modus?
Das Grau, für das ich mich entschieden habe, ist heller als unser vorheriges (ich glaube). Verwende var(--primary-50)

1 „Gefällt mir“
31

@sam / @fitzy wie fühlen Sie sich angesichts der Veränderungen in der letzten Woche?

32

Meiner Meinung nach sollten wir das in den Kern integrieren, es sieht jetzt viel besser aus.
Das alte Farbschema tut meinen Augen bei alten Websites weh :slight_smile:

3 „Gefällt mir“
34

Ich bin definitiv für den aktuellen Stand im Vergleich zu dem, was wir im Kern haben.

Allerdings haben wir die Änderung an max-height in Commit 98b2763 verloren. War das beabsichtigt? Ich sehe, dass sie auskommentiert und dann in einem nachfolgenden Commit gelöscht wurde.

Wenn ja, kann ich damit immer noch leben, indem ich sie lokal überschreibe.

1 „Gefällt mir“
35

Ja, es wurde gelöscht, um so nah wie möglich an unserer aktuellen Codeblockgröße zu bleiben.

1 „Gefällt mir“
36

Zusammenführung in diesem PR durchzuführen –> UX: Codeblocks experiment merge by jordanvidrine · Pull Request #29870 · discourse/discourse · GitHub

1 „Gefällt mir“
37

Ok, keine Sorge.

1 „Gefällt mir“
38

Es sieht so aus, als ob der neue Innenabstand nur auf .hljs-Elemente angewendet wird, was bedeutet, dass einfache Codeblöcke (ohne Hervorhebung) ihn nicht erhalten:

hallo

console.log("test")

Dies führt auch dazu, dass die Höhen von Beiträgen beim ersten Laden springen, da die Hervorhebung (und damit die .hljs-Klasse) asynchron angewendet wird.

Können wir das so beheben, dass die Änderung des Innenabstands auf Codeblöcke angewendet wird, auch ohne die .hljs-Klasse?

6 „Gefällt mir“
39

Könnte der dunklere Hintergrund auch zur Konsistenz angewendet werden?

5 „Gefällt mir“
40

Danke, dass Sie darauf aufmerksam gemacht haben! Ich habe diese Stile aktualisiert, um sie auf code statt nur auf hljs-Blöcke anzuwenden.

4 „Gefällt mir“
41

Ich muss hier eine weitere Korrektur hinzufügen. Die Korrektur, die ich hinzugefügt habe, bewirkt nun auch, dass Inline-Codeblöcke fälschlicherweise in einer eigenen Zeile gerendert werden.

Dies ist ein Beispiel für einen Inline-Codeblock, der falsch gerendert wird.

2 „Gefällt mir“
42

Link gibt jetzt 404 zurück. Vielleicht macht es Sinn, auf den PR zu verweisen?
UX: Codeblocks experiment merge von jordanvidrine · Pull Request #29870 · discourse/discourse · GitHub

Außerdem lieben das Team und ich diese Änderung absolut. Sie sieht verdammt gut aus! :heart_eyes:

3 „Gefällt mir“