Игорь Надеин 8159c6f472 feat: Replace Bootstrap buttons with custom button system
### Custom Button System Implementation

Created modern button system to replace Bootstrap buttons:

- ✅ Created core/_buttons-custom.scss (550+ lines)
- ✅ CSS Custom Properties for easy customization
- ✅ 8 color variants (primary, secondary, success, danger, warning, info, light, dark)
- ✅ Outline and Ghost variants
- ✅ 4 sizes (sm, md, lg, xl)
- ✅ Special variants (block, icon, circle, link)
- ✅ Loading state with spinner animation
- ✅ Button groups support
- ✅ Modern animations (hover, active, focus)

### Template Migration

Migrated 65 HTML templates using automated Python script:
- Replaced .btn → .button
- Replaced .btn-primary → .button--primary
- Replaced .btn-outline-* → .button--outline button--*
- Replaced size classes .btn-sm → .button--sm
- Total changes: 354 → 347 button usages

### Results

- app.css: 137 KB → 148 KB (+11 KB for custom buttons)
- Templates changed: 65 files
- Remaining .btn classes: 133 (mostly btn-close for modals)
- New .button classes: 347

### Backward Compatibility

Kept @extend rules in _buttons-custom.scss for gradual migration.
Can be removed after complete migration.

Next step: Remove Bootstrap button imports from custom-bootstrap.scss
2026-01-15 14:23:44 +03:00

43 lines
1.5 KiB
HTML

{# includes/components/chat_menu.html #}
{# Меню действий для карточки чата в списке #}
{% load static %}
<div class="chat-actions-menu position-relative">
<button class="button button--sm button--link text-secondary p-1" type="button"
data-chat-menu-button
data-bs-toggle="dropdown"
data-bs-auto-close="true"
data-bs-boundary="viewport"
data-bs-display="dynamic"
aria-expanded="false">
<i class="bi-three-dots-vertical"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow-sm" data-bs-popper="static">
<li>
<a class="dropdown-item" href="#" data-action="pin">
<i class="bi-pin me-2"></i><span data-pin-text>Закрепить</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#" data-action="notifications">
<i class="bi-bell me-2"></i>Уведомления
</a>
</li>
{# Редактирование и удаление - не для основных чатов #}
{% if not chat.is_main %}
<li>
<a class="dropdown-item" href="#" data-action="edit">
<i class="bi-pencil me-2"></i>Редактировать
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item text-danger" href="#" data-action="delete">
<i class="bi-trash me-2"></i>Удалить
</a>
</li>
{% endif %}
</ul>
</div>