Dimensione dei blocchi di codice migliorata  schema colori

UX
,
22

Concordo pienamente con questo sentimento.

Abbiamo aumentato la dimensione predefinita del carattere da 15px a 16px. Cambiare la dimensione del carattere dei blocchi di codice a 13px è un grande cambiamento. Vale la pena qualche carattere in più per riga in cambio di leggibilità?

Lo stile del codice inline verrà aggiornato? Al momento questi hanno un colore di sfondo, un colore del carattere e una famiglia di caratteri diversi. Questo è molto evidente nei post che intrecciano molto testo normale, elementi di codice inline e blocchi di codice. Rende leggermente più difficile il cross-referencing tra codice inline e snippet di blocchi.

Non correlato alle modifiche (ma correlato ai blocchi di codice) - idee per migliorare le icone dei pulsanti al passaggio del mouse? A 12px e 0,7 di opacità sono appena visibili (soprattutto quando si sovrappongono al codice)

image
image452×122 4.9 KB

4 Mi Piace
23

Bella osservazione. Questo è stato modificato perché i pulsanti erano troppo visibili. Sono stati modificati in btn-flat ma capisco come questo possa essere stato troppo drastico. Forse questo richiede uno stile personalizzato applicato ai blocchi di codice?

1 Mi Piace
24

Dovremmo aumentare la dimensione del carattere? Stavo sperimentando con 14px ieri localmente ed è leggermente meno fastidioso rispetto al carattere predefinito.

3 Mi Piace
25 
// questo è del codice commentato

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

Ecco l’ultimo aggiornamento :point_up_2:

8 Mi Piace
26

Mi piace molto questa ultima versione, @jordan.vidrine!

2 Mi Piace
27

Per me, l’ultimo aggiornamento sembra molto migliore, mi piacciono i colori e il dimensionamento non è in conflitto con il nostro font da 16px per il testo.

def hello
   puts "hello world"
end

L’unica cosa minore è che lo sfondo grigio mi sembra ancora un po’ spento e preferirei un po’ più chiaro. Ma nel complesso mi sento abbastanza bene riguardo a questo.

@cvx qual è la tua opinione attuale?

1 Mi Piace
28

Forse potremmo usare una versione chiara del colore terziario.

image
image793×121 4.56 KB

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

2 Mi Piace
29

Ho pensato di usare un colore da una palette di colori a tema, ma non possiamo prevedere quale sarebbe. Potrebbe finire terribilmente male :grimacing:

Mi piace però il blu

1 Mi Piace
30

Sei in modalità scura o chiara?
Il grigio che ho deciso di usare è più chiaro del precedente (credo). Utilizzo var(--primary-50)

1 Mi Piace
31

@sam / @fitzy come ti senti riguardo al vivere con i cambiamenti della scorsa settimana?

32

Secondo me dovremmo unire questo nel core, ora sembra molto meglio.
La vecchia combinazione di colori mi fa male agli occhi sui vecchi siti :slight_smile:

3 Mi Piace
34

Sono decisamente a favore della situazione attuale rispetto a ciò che abbiamo nel core.

Tuttavia, abbiamo perso la modifica a max-height nel commit 98b2763. È stato intenzionale? Vedo che è stato commentato e poi eliminato in un commit successivo.

Se è così, posso comunque accettare una sovrascrittura locale.

1 Mi Piace
35

Sì, è stato eliminato per rimanere il più vicino possibile alle dimensioni attuali del nostro codeblock.

1 Mi Piace
36

Unione da effettuare qui in questo PR → UX: Codeblocks experiment merge by jordanvidrine · Pull Request #29870 · discourse/discourse · GitHub

1 Mi Piace
37

Ok, nessun problema.

1 Mi Piace
38

Sembra che il nuovo padding venga applicato solo agli elementi .hljs, il che significa che i semplici blocchi di codice (senza evidenziazione) non lo ricevono:

hello

console.log("test")

Ciò causa anche salti nell’altezza dei post al caricamento iniziale, perché l’evidenziazione (e quindi la classe .hljs) viene applicata in modo asincrono.

Possiamo sistemarlo in modo che la modifica del padding si applichi ai blocchi di codice, anche senza la classe .hljs?

6 Mi Piace
39

Potrebbe essere applicato anche lo sfondo più scuro, per coerenza?

5 Mi Piace
40

Grazie per averle notate! Ho aggiornato quegli stili per applicarli a code anziché solo ai blocchi hljs.

4 Mi Piace
41

Devo aggiungere un’altra correzione qui. La correzione che ho aggiunto ora fa sì che anche i blocchi di codice inline vengano visualizzati su una riga separata.

Questo è un esempio di un blocco di codice inline visualizzato erroneamente.

2 Mi Piace
42

Il link ora restituisce 404. Forse ha senso puntare al PR?
UX: Codeblocks experiment merge di jordanvidrine · Pull Request #29870 · discourse/discourse · GitHub

Inoltre, il team e io adoriamo assolutamente questa modifica. Ha un aspetto così dannatamente bello! :heart_eyes:

3 Mi Piace