Corp/backend/templates/includes/components/calendar_desktop.html
Игорь Надеин 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

44 lines
2.2 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{# Десктопная версия календаря - правая колонка #}
<div class="rightbar d-none d-lg-block">
<div class="card rightbar-card" data-dept-id="{{ dept_ids|default:'' }}">
<div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
<div class="d-flex align-items-center gap-2 flex-shrink-1 min-w-0">
<h6 class="card-title fw-semibold mb-0">Календарь</h6>
{# Выпадающий выбор: Компания / Отделы / Личный #}
<div class="dropdown">
<button class="button button--sm button--outline button--secondary dropdown-toggle text-truncate" type="button"
id="calendarChooserBtn" data-bs-toggle="dropdown" aria-expanded="false"
style="max-width: 150px;">
Компания
</button>
<ul class="dropdown-menu" aria-labelledby="calendarChooserBtn" id="calendarChooserMenu">
<li><button class="dropdown-item" type="button" data-cal="personal">Личный</button></li>
<li><hr class="dropdown-divider"></li>
<li><button class="dropdown-item" type="button" data-cal="company">Компания</button></li>
<li><hr class="dropdown-divider"></li>
{# пункты отделов добавим из JS по data-dept-id #}
</ul>
</div>
</div>
<div class="d-flex align-items-center gap-2 flex-shrink-0">
<span class="card-sub text-muted d-none d-xl-inline">События</span>
<button class="button button--sm button--primary" type="button" data-bs-toggle="modal" data-bs-target="#eventCreateModal"
aria-label="Создать событие"><i class="bi-plus-lg"></i></button>
</div>
</div>
<div class="card-body">
<div id="calendarRight" class="calendar-wrap"></div>
<div class="week-strip-header">
<span><i class="bi-calendar-week me-1"></i> На этой неделе</span>
<span id="weekRange" class="text-muted"></span>
</div>
<div id="weekList" class="week-vertical" aria-live="polite"></div>
</div>
</div>
</div>