MALIO-DEV/Lesstime
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 32 Wiki Activity

refactor : migrate UI to Malio layer-ui components (MalioButton, MalioDrawer, MalioSelectCheckbox)

Browse Source 
- Replace all AppDrawer with MalioDrawer across 10 drawer components
- Replace native <button> with MalioButton/MalioButtonIcon in all pages and components
- Fix TimeTrackingExportDrawer: use MalioSelectCheckbox for multi-select filters
- Add Malio design system colors (m-btn-*, m-disabled, m-surface) to tailwind.config.ts
- Align toggle button heights with MalioButton (h-[40px])

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matthieu
2026-03-26 09:33:28 +01:00
parent d7968af525
commit 22373a0b87
53 changed files with 673 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/pages/time-tracking.vue
View File

@@ -3,27 +3,35 @@
<div ref="pageHeaderEl" class="sticky top-8 z-20 flex-shrink-0 bg-white pb-4 sm:top-12">
<div class="flex items-center justify-between gap-3">
<h1 class="text-xl font-bold text-primary-500 sm:text-2xl">Suivi des temps</h1>
<button
class="shrink-0 rounded-md bg-primary-500 px-3 py-2 text-xs font-semibold text-white hover:bg-primary-600 transition sm:px-4 sm:text-sm"
<MalioButton
icon-name="mdi:plus"
icon-position="left"
button-class="shrink-0"
@click="openCreateDrawer()"
>
<span class="hidden sm:inline">+ Ajouter une Activité</span>
<span class="sm:hidden">+ Activité</span>
</button>
<span class="hidden sm:inline">Ajouter une Activité</span>
<span class="sm:hidden">Activité</span>
</MalioButton>
</div>
<div class="relative z-30 mt-4 flex flex-wrap items-center gap-3 sm:gap-4">
<div class="flex shrink-0 items-center gap-1 h-8">
<button class="flex h-8 w-8 items-center justify-center rounded-full text-neutral-400 hover:text-neutral-700 transition" @click="navigatePrev">
<Icon name="mdi:chevron-left" size="20" />
</button>
<MalioButtonIcon
icon="mdi:chevron-left"
aria-label="Précédent"
variant="ghost"
@click="navigatePrev"
/>
<DateFilter v-model="selectedDateFilter" :picker-mode="viewMode === 'day' ? 'day' : 'week'" />
<h2 class="shrink-0 whitespace-nowrap text-lg font-bold leading-8 text-orange-500">
{{ currentMonthLabel }}
</h2>
<button class="flex h-8 w-8 items-center justify-center rounded-full text-neutral-400 hover:text-neutral-700 transition" @click="navigateNext">
<Icon name="mdi:chevron-right" size="20" />
</button>
<MalioButtonIcon
icon="mdi:chevron-right"
aria-label="Suivant"
variant="ghost"
@click="navigateNext"
/>
</div>
<div class="flex items-center rounded-full bg-neutral-100 p-1">
@@ -76,13 +84,14 @@
/>
</div>
<button
class="flex shrink-0 items-center gap-2 rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50 transition"
<MalioButton
:label="$t('timeEntries.export')"
variant="secondary"
icon-name="mdi:download"
icon-position="left"
button-class="w-auto px-4"
@click="exportDrawerOpen = true"
>
<Icon name="mdi:download" size="18" />
{{ $t('timeEntries.export') }}
</button>
/>
</div>
</div>