رفتن به محتوای اصلی

چیپ رویداد و ردیف وظیفه

وضعیت​

هدفِ normative. وب هر دو را دارد (چیپ‌های MonthView/WeekView و ردیف وظیفه) با مارک‌آپ ad hoc؛ پذیرش در وضعیت پذیرش طراحی. کلاس‌های .ev-chip/.task prototype-only.

هدف​

دو واحد نمایش دادهٔ تقویم‌محور — رنگ هر دو از تقویمِ والد می‌آید (--c)؛ چیپ در سلول/ستون روز، ردیف در نماهای فهرستی.

ساختار​

<span class="ev-chip"><span class="t">۰۹:۳۰</span>جلسه تیم فنی</span>
<div class="task">
  <button class="ccheck" …></button>
  <div class="tt">ارسال گزارش هفتگی<small>خلاصهٔ هفته</small></div>
  <span class="task-side">۵ شهریور</span>
</div>

گونه‌ها و اندازه‌ها​

جزءمشخصات
چیپ رویداد (سلول ماه)پس‌زمینهٔ ۱۳٪ رنگ تقویم + نوار ۳px ابتدای سطر؛ ساعت ۱۰px کم‌رنگ؛ عنوان بیضی‌شونده؛ تمام‌روز بدون ساعت
چیپ تمام‌روزبدون ساعت؛ آیکون/ایموجی تقویم اختیاری («🎂 تولد سارا»)
ردیف وظیفه .taskچک‌باکس گرد رنگ تقویم + عنوان ۱۴٫۵px + یادداشت یک‌خطی بیضی‌شونده + نقطهٔ اولویت .pri + موعد در .task-side

نقطهٔ اولویت: ۷px · بالا --ev-5 · متوسط --ev-4 · پایین --ev-3.

حالت‌ها​

حالتظاهر
default۱۳٪ رنگ تقویم؛ متن --fg
hoverروشن‌تر شدن پس‌زمینه به ~۱۸٪
focus-visibleحلقهٔ ۲px برند
activeکلیک ← دیالوگ پیش‌نمایش (نه ویرایش مستقیم)
disabledندارد
loadingسلول/ردیف skeleton با سطح ۱
errorموعد گذشته: رنگ تعطیلات + «موعد گذشته»؛ خطای شبکه دیتای قبلی را پاک نمی‌کند
successوظیفهٔ انجام‌شده: خط‌خورد و کم‌رنگ (چک‌باکس پر)

رفتار​

  • کلیک روی هر دو ← دیالوگ پیش‌نمایش فقط‌خواندنی؛ «ویرایش» فرم را باز می‌کند (الگوی پیش‌نمایش سپس ویرایش — در وب فعلاً not-started).
  • موعد گذشته با رنگ تعطیلات خط می‌خورد و برچسب «موعد گذشته» می‌گیرد.

کیبورد و دسترس‌پذیری​

  • چیپ/ردیف با Tab قابل فوکوس و با Enter باز می‌شوند؛ نام دسترس‌پذیر کامل: «۰۹:۳۰ تا ۱۱:۰۰، جلسه تیم فنی، تقویم تیم».
  • ردیف وظیفه: Space روی چک‌باکس گرد toggle می‌کند (نقش checkbox).
  • ارتفاع ردیف ≥۴۴px (قانون نما).

رفتار واکنش‌گرا​

ماهِ موبایل به‌جای چیپ، نقطه + «+N» نشان می‌دهد (رفتار MonthView)؛ نماهای فهرستی (برنامه/وظایف) ردیف کامل در همهٔ کلاس‌ها.

قواعد محتوا​

  • ✅ عنوان کوتاه؛ ساعت فقط برای رویداد ساعتی؛ رنگ فقط از والد.
  • ❌ رنگ خام مستقل از تقویم؛ دو خط متن در چیپ سلول ماه.

توکن‌ها​

--c/--ev-* (رنگ والد، ۱۳٪ پس‌زمینه) · --holiday (موعد گذشته) · نقطهٔ اولویت --ev-3..5 · بیضی text-overflow.

پیاده‌سازی پلتفرم‌ها​

  • وب: چیپ در MonthView.tsx و WeekView.tsx (نقطه+«+N» موبایل)؛ ردیف وظیفه در TasksPage/AgendaView.
  • اندروید: هنوز نماهای رویداد/وظیفه ندارد.
  • .ev-chip/.task فقط در ui-design/prototypes/assets/app.css (prototype-only).

نمونهٔ تعاملی​

کتابخانهٔ زندهٔ چیپ رویداد