Robotail/Corp
Robotail/Corp
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Corp/backend/docs/guides/TELEGRAM_BADGES_GUIDE.md
Игорь Надеин aba011731f feat: implement Telegram-style badges system 
- Created comprehensive badges-telegram-style.css (240 lines) based on Telegram Web K
- Updated all badge markup in templates (navbar, sidebar, chat_list, chat_detail, chat_title)
- Replaced Bootstrap badge classes with .badge-telegram classes
- Implemented Telegram specifications: 20px height, 10px radius, 11px font, 600 weight
- Added smooth animations: pulse (on update), animate-in (on mount), animate-out (on unmount)
- Updated JavaScript: replaced .d-none with style.display for badge visibility
- Updated 5 JS files: bottom-navbar, notification-manager, chatBadgeHandler, chatBadgeManager, chatListRealtime
- Added pulse animation on badge value increase
- Improved shadows and transitions with cubic-bezier easing
- Added badges-telegram-style.css to base.html for global availability
- Created documentation: TELEGRAM_BADGES_GUIDE.md, TELEGRAM_BADGES_UPDATE.md

Technical details:
- Research: Analyzed 50+ files from Telegram Web K GitHub repository
- Perfect circles: border-radius: 10px (not 50%)
- Spring animation: cubic-bezier(0.175, 0.885, 0.32, 1.275)
- Auto-hide: :empty and [data-count='0'] selectors
- Responsive design + dark theme support
2026-01-12 17:37:41 +03:00

5.0 KiB
Raw Blame History

Гайд по бэйджам в стиле Telegram

Обзор

Применены лучшие практики Telegram Web K для создания идеальных бэйджей (счетчиков непрочитанных сообщений, уведомлений).

Ключевые принципы Telegram

1. Идеальные круги

border-radius: 10px; /* НЕ 50% - фиксированное значение */

2. Правильные пропорции

  • Высота: 20px (стандарт), 18px (малый), 24px (большой)
  • Padding: 0 6px для текста
  • Font-size: 11px (отлично читается)
  • Font-weight: 600 (полужирный)

3. Мягкие тени

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

4. Плавные анимации

  • Появление: scale(0) → scale(1) с cubic-bezier(0.175, 0.885, 0.32, 1.275)
  • Пульсация: scale(1) → scale(1.15) → scale(1)
  • Transition: 0.2s для быстрого отклика

Использование

Базовый бэйдж

<span class="badge-telegram">5</span>

С размерами

<span class="badge-telegram badge-telegram-sm">1</span>
<span class="badge-telegram">5</span>
<span class="badge-telegram badge-telegram-lg">12</span>

Цветовые варианты

<span class="badge-telegram badge-telegram-primary">3</span>
<span class="badge-telegram badge-telegram-muted">2</span>
<span class="badge-telegram badge-telegram-mention">@</span>

С позиционированием

<!-- На аватаре -->
<div class="avatar">
  <img src="avatar.jpg" alt="Avatar">
  <span class="badge-telegram badge-telegram-avatar">5</span>
</div>

<!-- На кнопке -->
<button class="btn">
  <i class="bi bi-bell"></i>
  <span class="badge-telegram badge-telegram-button">3</span>
</button>

С анимацией

<span class="badge-telegram animate-in">5</span>
<span class="badge-telegram pulse">1</span>

Точка (без числа)

<span class="badge-telegram badge-telegram-dot"></span>

Интеграция в проект

1. Подключить CSS

<link rel="stylesheet" href="{% static 'css/components/badges-telegram-style.css' %}">

2. Обновить существующие бэйджи

Было:

<span class="badge bg-danger">5</span>

Стало:

<span class="badge-telegram">5</span>

3. JavaScript для динамических обновлений

// Обновление счетчика с анимацией
function updateBadge(element, count) {
  if (count > 0) {
    element.textContent = count;
    element.classList.add('pulse');
    
    setTimeout(() => {
      element.classList.remove('pulse');
    }, 600);
  } else {
    element.textContent = '';
  }
}

// Пример
const badge = document.querySelector('.badge-telegram');
updateBadge(badge, 5);

Преимущества перед старым подходом

Старый подход Telegram подход Улучшение
border-radius: 50% border-radius: 10px Идеальные круги при любом размере
font-size: 0.65rem font-size: 11px Лучшая читаемость
padding: 2px 5px padding: 0 6px Правильная центровка
Нет анимаций cubic-bezier анимации Плавность как в Telegram
box-shadow: 0 1px 3px box-shadow: 0 2px 4px Более выразительная тень

Примеры из Telegram Web K

Непрочитанные сообщения

<span class="badge-telegram">99+</span>

Упоминания

<span class="badge-telegram badge-telegram-mention">@</span>

Приглашенные чаты

<span class="badge-telegram badge-telegram-primary">3</span>

Точка уведомления

<span class="badge-telegram badge-telegram-dot"></span>

Тестирование

  1. Проверьте отображение при разных значениях: 1, 5, 12, 99+
  2. Протестируйте анимации: animate-in, pulse
  3. Проверьте адаптивность на мобильных устройствах
  4. Убедитесь в правильности темной темы

Совместимость

  • ✅ Все современные браузеры
  • ✅ Mobile Safari
  • ✅ Chrome/Edge
  • ✅ Firefox
  • ✅ Светлая/темная темы

Дополнительные ресурсы