تحسين حجم كتلة الكود ومخطط الألوان

تجربة المستخدم
,
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="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>
}

هذا هو آخر تحديث :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

أنا بالتأكيد مع الوضع الحالي مقارنة بما لدينا في النواة.

ومع ذلك، فقدنا التغيير الذي طرأ على max-height في الـ commit 98b2763. هل كان هذا مقصودًا؟ أرى أنه تم التعليق عليه ثم حذفه في commit لاحق.

إذا كان الأمر كذلك، فلا يزال بإمكاني التعامل مع تجاوز محلي.

إعجاب واحد (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. ربما يكون من المنطقي الإشارة إلى طلب السحب؟
UX: Codeblocks experiment merge by jordanvidrine · Pull Request #29870 · discourse/discourse · GitHub

أيضًا، أنا والفريق نحب هذا التغيير تمامًا. يبدو رائعًا جدًا! :heart_eyes:

3 إعجابات