Улучшенный размер блоков кода и цветовая схема

Внести вклад UX
,
22

Я полностью согласен с этим мнением.

Мы увеличили размер шрифта по умолчанию с 15 пикселей до 16 пикселей. Уменьшение размера шрифта в блоках кода до 13 пикселей — это значительное изменение. Стоит ли пара дополнительных символов в строке жертвы читаемостью?

Будет ли обновлена стилизация встроенного кода? В данный момент у него другой цвет фона, цвет шрифта и семейство шрифтов. Это особенно заметно в постах, где много обычного текста, встроенных элементов кода и блоков кода переплетаются между собой. Это немного затрудняет сопоставление встроенного кода с фрагментами в блоках.

Не относится к изменениям (но касается блоков кода) — есть ли идеи по улучшению иконок кнопок при наведении? При размере 12 пикселей и прозрачности 0,7 они едва заметны (особенно при наложении на код).

image
image452×122 4.9 KB

4 лайка
23

Хорошее наблюдение. Это было изменено из-за того, что кнопки были слишком заметны. Их переключили на btn-flat, но я понимаю, что это могло быть слишком радикально. Возможно, здесь потребуется применить пользовательский стиль к блокам кода?

1 лайк
24

Стоит ли увеличить размер шрифта? Вчера я экспериментировал с 14 пикселями локально, и это выглядит немного менее резко по сравнению со шрифтом по умолчанию.

3 лайка
25 
// это закомментированный код

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="Переключить режим чтения (ctrl + alt + r)"
      class={{concatClass
        "icon"
        "btn-default"
        "reader-mode-toggle"
        (if this.readerMode.readerModeActive "active")
      }}
    />
    {{#if this.readerMode.readerModeActive}}
      <ReaderModeOptions />
    {{/if}}
  </template>
}

Вот последнее обновление :point_up_2:

8 лайков
26

Мне очень нравится эта последняя версия, @jordan.vidrine!

2 лайка
27

Для меня последнее обновление ощущается гораздо лучше, мне нравятся цвета, и размеры больше не конфликтуют с нашим шрифтом 16 пикселей для текста.

def hello
   puts "hello world"
end

Единственный небольшой минус в том, что серый фон всё ещё кажется мне немного тусклым, и я предпочитаю его чуть светлее. Но в целом я чувствую себя вполне довольным этим.

@cvx, каково ваше текущее мнение?

1 лайк
28

Возможно, стоит использовать светлую версию третичного цвета.

image
image793×121 4.56 KB

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

2 лайка
29

Я думал использовать цвет из палитры темы, но мы не можем предсказать, каким он окажется. В итоге всё может выглядеть ужасно :grimacing:

Мне, правда, нравится синий.

1 лайк
30

Вы в тёмном или светлом режиме?

Серый цвет, который я выбрал, светлее предыдущего (я думаю). Использую var(--primary-50).

1 лайк
31

@sam / @fitzy, как вы себя чувствуете после недели жизни с этими изменениями?

32

На мой взгляд, мы должны включить это в ядро, теперь это выглядит намного лучше.

Старая цветовая схема вызывает боль в глазах на старых сайтах :slight_smile:

3 лайка
34

Я определённо поддерживаю текущее состояние по сравнению с тем, что есть в ядре.

Однако в коммите 98b2763 было утеряно изменение для max-height. Это было сделано намеренно? Я вижу, что оно было закомментировано, а затем удалено в последующем коммите.

Если так, я могу мириться с локальным переопределением.

1 лайк
35

Да, оно было удалено, чтобы максимально приблизиться к текущему размеру блока кода.

1 лайк
36

Объединение будет выполнено здесь, в этом PR → UX: Codeblocks experiment merge by jordanvidrine · Pull Request #29870 · discourse/discourse · GitHub

1 лайк
37

Хорошо, без проблем.

1 лайк
38

Похоже, что новые отступы применяются только к элементам .hljs, из-за чего простые блоки кода (без подсветки) их не получают:

hello

console.log("test")

Это также приводит к скачкам высоты постов при первоначальной загрузке, поскольку подсветка (и, следовательно, класс .hljs) применяется асинхронно.

Можно ли исправить это так, чтобы изменение отступов применялось к блокам кода даже без класса .hljs?

6 лайков
39

Можно ли также применить более темный фон для единообразия?

5 лайков
40

Спасибо, что обратили на это внимание! Я обновил эти стили, чтобы они применялись к code, а не только к блокам hljs.

4 лайка
41

Мне нужно добавить здесь ещё одно исправление. Внесённое мной исправление теперь также неверно заставляет блоки встроенного кода отображаться на отдельной строке.

Это пример того, как встроенный блок кода отображается неверно.

2 лайка
42

Ссылка теперь возвращает ошибку 404. Возможно, стоит указать на PR?
UX: Объединение эксперимента с блоками кода от jordanvidrine · Pull Request #29870 · discourse/discourse · GitHub

Кроме того, команда и я просто обожаем это изменение. Выглядит чертовски круто! :heart_eyes:

3 лайка