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

22
frontend/components/admin/AdminBookStackTab.vue
View File

@@ -32,21 +32,19 @@
</div>
<div class="flex gap-3">
<button
type="submit"
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:opacity-50"
<MalioButton
:label="$t('bookstack.settings.save')"
button-class="w-auto px-4"
:disabled="isSaving"
>
{{ $t('bookstack.settings.save') }}
</button>
<button
type="button"
class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50 disabled:opacity-50"
@click="handleSave"
/>
<MalioButton
variant="tertiary"
:label="$t('bookstack.settings.testConnection')"
button-class="w-auto px-4"
:disabled="isTesting"
@click="handleTest"
>
{{ $t('bookstack.settings.testConnection') }}
</button>
/>
</div>
<p v-if="testResult !== null" class="text-sm font-medium" :class="testResult ? 'text-green-600' : 'text-red-600'">

11
frontend/components/admin/AdminClientTab.vue
View File

@@ -2,12 +2,13 @@
<div>
<div class="flex items-center justify-between">
<h2 class="text-lg font-bold text-neutral-900">Clients</h2>
<button
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
<MalioButton
icon-name="mdi:plus"
icon-position="left"
button-class="w-auto px-4"
label="Ajouter un client"
@click="openCreate"
>
+ Ajouter un client
</button>
/>
</div>
<DataTable

63
frontend/components/admin/AdminClientTicketTab.vue
View File

@@ -92,19 +92,21 @@
<td class="px-3 py-3 text-neutral-400">{{ formatDate(ticket.createdAt) }}</td>
<td class="px-3 py-3">
<div class="flex items-center gap-2">
<button
class="rounded p-1 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-primary-500"
:title="$t('clientTicket.changeStatus')"
<MalioButtonIcon
icon="mdi:swap-horizontal"
:aria-label="$t('clientTicket.changeStatus')"
variant="ghost"
icon-size="18"
@click.stop="openStatusChange(ticket)"
>
<Icon name="mdi:swap-horizontal" size="18" />
</button>
<button
class="rounded p-1 text-neutral-400 transition-colors hover:bg-red-50 hover:text-red-500"
/>
<MalioButtonIcon
icon="mdi:delete-outline"
aria-label="Supprimer"
variant="ghost"
icon-size="18"
button-class="text-neutral-400 hover:bg-red-50 hover:text-red-500"
@click.stop="openDeleteConfirm(ticket)"
>
<Icon name="mdi:delete-outline" size="18" />
</button>
/>
</div>
</td>
</tr>
@@ -155,19 +157,18 @@
</div>
<div class="mt-6 flex justify-end gap-3">
<button
class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50"
<MalioButton
variant="tertiary"
:label="$t('common.cancel')"
button-class="w-auto px-4"
@click="statusModalOpen = false"
>
{{ $t('common.cancel') }}
</button>
<button
class="rounded-lg bg-primary-500 px-6 py-2 text-sm font-semibold text-white transition-colors hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
/>
<MalioButton
label="Confirmer"
button-class="w-auto px-6"
:disabled="isUpdatingStatus"
@click="confirmStatusChange"
>
Confirmer
</button>
/>
</div>
</div>
</div>
@@ -186,19 +187,19 @@
<h3 class="text-lg font-bold text-neutral-900">{{ $t('clientTicket.confirmDelete') }}</h3>
<p class="mt-2 text-sm text-neutral-600">{{ $t('clientTicket.confirmDeleteMessage') }}</p>
<div class="mt-6 flex justify-end gap-3">
<button
class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50"
<MalioButton
variant="tertiary"
:label="$t('common.cancel')"
button-class="w-auto px-4"
@click="deleteModalOpen = false"
>
{{ $t('common.cancel') }}
</button>
<button
class="rounded-lg bg-red-500 px-6 py-2 text-sm font-semibold text-white transition-colors hover:bg-red-600 disabled:cursor-not-allowed disabled:opacity-50"
/>
<MalioButton
variant="danger"
label="Supprimer"
button-class="w-auto px-6"
:disabled="isDeleting"
@click="confirmDelete"
>
Supprimer
</button>
/>
</div>
</div>
</div>

11
frontend/components/admin/AdminEffortTab.vue
View File

@@ -2,12 +2,13 @@
<div>
<div class="flex items-center justify-between">
<h2 class="text-lg font-bold text-neutral-900">Efforts</h2>
<button
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
<MalioButton
icon-name="mdi:plus"
icon-position="left"
button-class="w-auto px-4"
label="Ajouter un effort"
@click="openCreate"
>
+ Ajouter un effort
</button>
/>
</div>
<DataTable

22
frontend/components/admin/AdminGiteaTab.vue
View File

@@ -24,21 +24,19 @@
</div>
<div class="flex gap-3">
<button
type="submit"
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:opacity-50"
<MalioButton
:label="$t('gitea.settings.save')"
button-class="w-auto px-4"
:disabled="isSaving"
>
{{ $t('gitea.settings.save') }}
</button>
<button
type="button"
class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50 disabled:opacity-50"
@click="handleSave"
/>
<MalioButton
variant="tertiary"
:label="$t('gitea.settings.testConnection')"
button-class="w-auto px-4"
:disabled="isTesting"
@click="handleTest"
>
{{ $t('gitea.settings.testConnection') }}
</button>
/>
</div>
<p v-if="testResult !== null" class="text-sm font-medium" :class="testResult ? 'text-green-600' : 'text-red-600'">

11
frontend/components/admin/AdminPriorityTab.vue
View File

@@ -2,12 +2,13 @@
<div>
<div class="flex items-center justify-between">
<h2 class="text-lg font-bold text-neutral-900">Priorités</h2>
<button
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
<MalioButton
icon-name="mdi:plus"
icon-position="left"
button-class="w-auto px-4"
label="Ajouter une priorité"
@click="openCreate"
>
+ Ajouter une priorité
</button>
/>
</div>
<DataTable

11
frontend/components/admin/AdminStatusTab.vue
View File

@@ -2,12 +2,13 @@
<div>
<div class="flex items-center justify-between">
<h2 class="text-lg font-bold text-neutral-900">Statuts</h2>
<button
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
<MalioButton
icon-name="mdi:plus"
icon-position="left"
button-class="w-auto px-4"
label="Ajouter un statut"
@click="openCreate"
>
+ Ajouter un statut
</button>
/>
</div>
<DataTable

11
frontend/components/admin/AdminTagTab.vue
View File

@@ -2,12 +2,13 @@
<div>
<div class="flex items-center justify-between">
<h2 class="text-lg font-bold text-neutral-900">Tags</h2>
<button
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
<MalioButton
icon-name="mdi:plus"
icon-position="left"
button-class="w-auto px-4"
label="Ajouter un tag"
@click="openCreate"
>
+ Ajouter un tag
</button>
/>
</div>
<DataTable

11
frontend/components/admin/AdminUserTab.vue
View File

@@ -2,12 +2,13 @@
<div>
<div class="flex items-center justify-between">
<h2 class="text-lg font-bold text-neutral-900">Utilisateurs</h2>
<button
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
<MalioButton
icon-name="mdi:plus"
icon-position="left"
button-class="w-auto px-4"
label="Ajouter un utilisateur"
@click="openCreate"
>
+ Ajouter un utilisateur
</button>
/>
</div>
<DataTable

22
frontend/components/admin/AdminZimbraTab.vue
View File

@@ -37,21 +37,19 @@
<span class="text-sm">{{ $t('zimbra.settings.enabled') }}</span>
</label>
<div class="flex gap-3">
<button
type="submit"
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:opacity-50"
<MalioButton
:label="$t('zimbra.settings.save')"
button-class="w-auto px-4"
:disabled="isSaving"
>
{{ $t('zimbra.settings.save') }}
</button>
<button
type="button"
class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50 disabled:opacity-50"
@click="handleSave"
/>
<MalioButton
variant="tertiary"
:label="$t('zimbra.settings.testConnection')"
button-class="w-auto px-4"
:disabled="isTesting"
@click="handleTest"
>
{{ $t('zimbra.settings.testConnection') }}
</button>
/>
</div>
<p v-if="testResult !== null" class="text-sm font-medium" :class="testResult ? 'text-green-600' : 'text-red-600'">
{{ testResult ? $t('zimbra.settings.testSuccess') : $t('zimbra.settings.testFailed') }}

47
frontend/components/client-ticket/ClientTicketDetailModal.vue
View File

@@ -29,22 +29,22 @@
</div>
<div class="flex items-center gap-2">
<!-- Edit button (only for open tickets submitted by current user) -->
<button
<MalioButton
v-if="canEdit && !isEditing"
type="button"
class="flex h-8 items-center gap-1.5 rounded-lg px-3 text-sm font-medium text-primary-500 transition-colors hover:bg-primary-50"
variant="tertiary"
icon-name="mdi:pencil-outline"
icon-position="left"
button-class="w-auto px-3"
:label="$t('common.edit')"
@click="startEdit"
>
<Icon name="mdi:pencil-outline" size="16" />
{{ $t('common.edit') }}
</button>
<button
type="button"
class="flex h-8 w-8 items-center justify-center rounded-lg text-neutral-400 transition-colors hover:bg-neutral-200/60 hover:text-neutral-600"
/>
<MalioButtonIcon
icon="mdi:close"
aria-label="Fermer"
variant="ghost"
icon-size="20"
@click="close"
>
<Icon name="mdi:close" size="20" />
</button>
/>
</div>
</div>
</div>
@@ -90,21 +90,18 @@
</div>
<div class="mt-6 flex justify-end gap-3">
<button
type="button"
class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50"
<MalioButton
variant="tertiary"
:label="$t('common.cancel')"
button-class="w-auto px-4"
@click="cancelEdit"
>
{{ $t('common.cancel') }}
</button>
<button
type="button"
class="rounded-lg bg-primary-500 px-6 py-2 text-sm font-semibold text-white transition-colors hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
/>
<MalioButton
:label="$t('common.save')"
button-class="w-auto px-6"
:disabled="isSaving"
@click="saveEdit"
>
{{ $t('common.save') }}
</button>
/>
</div>
</template>

53
frontend/components/client-ticket/ProjectClientTickets.vue
View File

@@ -1,11 +1,13 @@
<template>
<div>
<!-- Trigger button -->
<button
class="relative flex shrink-0 items-center gap-2 rounded-md bg-neutral-100 px-3 py-2 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-200 sm:px-4"
<MalioButton
variant="tertiary"
icon-name="mdi:ticket-outline"
icon-position="left"
button-class="w-auto px-3 sm:px-4 shrink-0"
@click="open"
>
<Icon name="mdi:ticket-outline" class="size-4 sm:size-5" />
<span class="hidden sm:inline">{{ $t('clientTicket.adminTab') }}</span>
<span
v-if="totalCount > 0"
@@ -13,7 +15,7 @@
>
{{ totalCount }}
</span>
</button>
</MalioButton>
<!-- Panel -->
<Teleport v-if="isOpen" to="body">
@@ -33,13 +35,13 @@
<h2 class="text-base font-bold text-neutral-900">{{ $t('clientTicket.adminTab') }}</h2>
<p class="mt-0.5 text-xs text-neutral-400">{{ projectName }}</p>
</div>
<button
type="button"
class="flex h-8 w-8 items-center justify-center rounded-lg text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600"
<MalioButtonIcon
icon="mdi:close"
aria-label="Fermer"
variant="ghost"
icon-size="20"
@click="close"
>
<Icon name="mdi:close" size="20" />
</button>
/>
</div>
<!-- Filters -->
@@ -97,13 +99,13 @@
<p class="mt-0.5 text-xs text-neutral-400">{{ formatDate(ticket.createdAt) }}</p>
</div>
<div class="flex items-center gap-1">
<button
class="rounded p-1 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-primary-500"
:title="$t('clientTicket.changeStatus')"
<MalioButtonIcon
icon="mdi:swap-horizontal"
:aria-label="$t('clientTicket.changeStatus')"
variant="ghost"
icon-size="16"
@click.stop="openStatusChange(ticket)"
>
<Icon name="mdi:swap-horizontal" size="16" />
</button>
/>
<Icon
:name="expandedId === ticket.id ? 'mdi:chevron-up' : 'mdi:chevron-down'"
size="18"
@@ -179,19 +181,18 @@
</div>
<div class="mt-6 flex justify-end gap-3">
<button
class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50"
<MalioButton
variant="tertiary"
:label="$t('common.cancel')"
button-class="w-auto px-4"
@click="statusModalOpen = false"
>
{{ $t('common.cancel') }}
</button>
<button
class="rounded-lg bg-primary-500 px-6 py-2 text-sm font-semibold text-white transition-colors hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
/>
<MalioButton
label="Confirmer"
button-class="w-auto px-6"
:disabled="isUpdatingStatus"
@click="confirmStatusChange"
>
Confirmer
</button>
/>
</div>
</div>
</div>

15
frontend/components/client/ClientDrawer.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppDrawer v-model="isOpen" :title="isEditing ? $t('clients.editClient') : $t('clients.addClient')">
<MalioDrawer v-model="isOpen" :title="isEditing ? $t('clients.editClient') : $t('clients.addClient')">
<form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
<MalioInputText
v-model="form.name"
@@ -35,16 +35,15 @@
/>
<div class="mt-6 flex justify-end">
<button
type="submit"
class="rounded-md bg-primary-500 px-6 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
<MalioButton
label="Enregistrer"
button-class="w-auto px-6"
:disabled="isSubmitting"
>
Enregistrer
</button>
@click="handleSubmit"
/>
</div>
</form>
</AppDrawer>
</MalioDrawer>
</template>
<script setup lang="ts">

19
frontend/components/notification/NotificationBell.vue
View File

@@ -1,18 +1,21 @@
<template>
<div ref="bellRef" class="relative">
<button
type="button"
class="relative rounded-md p-2 text-white hover:bg-primary-600 transition-colors"
@click="toggleDropdown"
>
<Icon name="mdi:bell-outline" size="24" />
<div class="relative">
<MalioButtonIcon
icon="mdi:bell-outline"
aria-label="Notifications"
variant="ghost"
icon-size="24"
button-class="text-white hover:bg-primary-600"
@click="toggleDropdown"
/>
<span
v-if="unreadCount > 0"
class="absolute -right-0.5 -top-0.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-500 px-1 text-xs font-bold text-white"
class="absolute -right-0.5 -top-0.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-500 px-1 text-xs font-bold text-white pointer-events-none"
>
{{ unreadCount > 99 ? '99+' : unreadCount }}
</span>
</button>
</div>
<Transition name="dropdown">
<div

35
frontend/components/project/ProjectDrawer.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppDrawer v-model="isOpen" :title="isEditing ? $t('projects.editProject') : $t('projects.addProject')">
<MalioDrawer v-model="isOpen" :title="isEditing ? $t('projects.editProject') : $t('projects.addProject')">
<form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
<MalioInputText
v-model="form.code"
@@ -54,41 +54,44 @@
</div>
<div class="mt-6 flex justify-end">
<button
type="submit"
class="rounded-md bg-primary-500 px-6 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
<MalioButton
label="Enregistrer"
button-class="w-auto px-6"
:disabled="isSubmitting"
>
Enregistrer
</button>
@click="handleSubmit"
/>
</div>
</form>
<div v-if="isEditing && project" class="mt-6 border-t border-neutral-200 pt-4 flex items-center justify-between">
<button
class="flex items-center gap-2 text-sm text-neutral-500 hover:text-amber-600"
<MalioButton
variant="tertiary"
:icon-name="project.archived ? 'mdi:archive-arrow-up-outline' : 'mdi:archive-arrow-down-outline'"
icon-position="left"
button-class="w-auto px-4"
:disabled="isSubmitting"
@click="handleArchiveToggle"
>
<Icon :name="project.archived ? 'mdi:archive-arrow-up-outline' : 'mdi:archive-arrow-down-outline'" size="18" />
{{ project.archived ? 'Désarchiver' : 'Archiver' }}
</button>
<button
</MalioButton>
<MalioButton
v-if="project.taskCount === 0"
class="flex items-center gap-2 text-sm text-neutral-500 hover:text-red-600"
variant="danger"
icon-name="mdi:delete-outline"
icon-position="left"
button-class="w-auto px-4"
:disabled="isSubmitting"
@click="confirmDeleteOpen = true"
>
<Icon name="mdi:delete-outline" size="18" />
{{ $t('common.delete') }}
</button>
</MalioButton>
</div>
<ConfirmDeleteProjectModal
v-model="confirmDeleteOpen"
@confirm="handleDelete"
/>
</AppDrawer>
</MalioDrawer>
</template>
<script setup lang="ts">

44
frontend/components/project/ProjectGroupTab.vue
View File

@@ -3,20 +3,20 @@
<div class="flex items-center justify-between">
<h2 class="text-lg font-bold text-neutral-900">Groupes</h2>
<div class="flex items-center gap-3">
<button
type="button"
class="text-sm font-medium text-neutral-500 hover:text-neutral-700"
<MalioButton
variant="tertiary"
button-class="w-auto px-3"
:label="showArchived ? $t('archive.hideArchived') : $t('archive.showArchived')"
@click="showArchived = !showArchived"
>
{{ showArchived ? $t('archive.hideArchived') : $t('archive.showArchived') }}
</button>
<button
/>
<MalioButton
v-if="!showArchived"
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
icon-name="mdi:plus"
icon-position="left"
button-class="w-auto px-4"
label="Ajouter un groupe"
@click="openCreate"
>
+ Ajouter un groupe
</button>
/>
</div>
</div>
@@ -39,22 +39,20 @@
{{ item.description ?? '—' }}
</template>
<template #actions="{ item }">
<button
<MalioButton
v-if="!showArchived && canArchiveGroup(item)"
type="button"
class="rounded-md bg-neutral-500 px-3 py-1 text-xs font-semibold text-white hover:bg-neutral-600"
variant="secondary"
:label="$t('archive.archiveButton')"
button-class="w-auto px-3"
@click.stop="handleArchive(item)"
>
{{ $t('archive.archiveButton') }}
</button>
<button
/>
<MalioButton
v-if="showArchived"
type="button"
class="rounded-md bg-neutral-500 px-3 py-1 text-xs font-semibold text-white hover:bg-neutral-600"
variant="secondary"
:label="$t('archive.unarchiveButton')"
button-class="w-auto px-3"
@click.stop="handleUnarchive(item)"
>
{{ $t('archive.unarchiveButton') }}
</button>
/>
</template>
</DataTable>

13
frontend/components/task/TaskBookStackLinks.vue
View File

@@ -57,13 +57,14 @@
>
{{ link.title }}
</a>
<button
type="button"
class="ml-auto shrink-0 text-neutral-300 hover:text-red-500"
<MalioButtonIcon
icon="mdi:close"
aria-label="Supprimer le lien"
variant="ghost"
icon-size="16"
button-class="ml-auto shrink-0 text-neutral-300 hover:text-red-500"
@click="handleRemove(link.id)"
>
<Icon name="mdi:close" size="16" />
</button>
/>
</div>
</div>

13
frontend/components/task/TaskBulkActions.vue
View File

@@ -72,13 +72,14 @@
/>
<!-- Delete -->
<button
class="flex h-9 w-9 shrink-0 items-center justify-center self-end rounded-md text-neutral-500 transition-colors hover:bg-red-50 hover:text-red-500"
title="Supprimer"
<MalioButtonIcon
icon="mdi:delete-outline"
aria-label="Supprimer"
variant="ghost"
icon-size="22"
button-class="self-end text-neutral-500 hover:bg-red-50 hover:text-red-500"
@click="emit('bulk-delete')"
>
<Icon name="mdi:delete-outline" size="22" />
</button>
/>
</div>
</div>
</template>

13
frontend/components/task/TaskCard.vue
View File

@@ -29,13 +29,14 @@
</div>
<h4 class="text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
</div>
<button
class="shrink-0 transition-colors"
:class="isTimerOnTask ? 'text-[#F18619] hover:text-[#d97314]' : 'text-neutral-400 hover:text-primary-500'"
<MalioButtonIcon
:icon="isTimerOnTask ? 'mdi:stop-circle-outline' : 'mdi:play-circle-outline'"
:aria-label="isTimerOnTask ? 'Arrêter le timer' : 'Démarrer le timer'"
variant="ghost"
icon-size="20"
:button-class="isTimerOnTask ? 'shrink-0 text-[#F18619] hover:text-[#d97314]' : 'shrink-0 text-neutral-400 hover:text-primary-500'"
@click.stop="isTimerOnTask ? timerStore.stop() : onPlay()"
>
<Icon :name="isTimerOnTask ? 'mdi:stop-circle-outline' : 'mdi:play-circle-outline'" size="20" />
</button>
/>
</div>
<div class="mt-2 flex items-center gap-1.5">

13
frontend/components/task/TaskDocumentList.vue
View File

@@ -32,14 +32,15 @@
</div>
<!-- Delete button -->
<button
<MalioButtonIcon
v-if="isAdmin"
type="button"
class="absolute right-1 top-1 hidden rounded p-0.5 text-neutral-400 transition-colors hover:bg-red-50 hover:text-red-500 group-hover:block"
icon="heroicons:x-mark"
aria-label="Supprimer"
variant="ghost"
icon-size="16"
button-class="absolute right-1 top-1 hidden text-neutral-400 hover:bg-red-50 hover:text-red-500 group-hover:block"
@click.stop="$emit('delete', doc)"
>
<Icon name="heroicons:x-mark" class="h-4 w-4" />
</button>
/>
</div>
</div>
</div>

36
frontend/components/task/TaskDocumentPreview.vue
View File

@@ -12,28 +12,34 @@
ref="overlayRef"
>
<!-- Close button -->
<button
class="absolute right-4 top-4 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
<MalioButtonIcon
icon="heroicons:x-mark"
aria-label="Fermer"
variant="ghost"
icon-size="24"
button-class="absolute right-4 top-4 rounded-full bg-black/50 text-white hover:bg-black/70"
@click="$emit('close')"
>
<Icon name="heroicons:x-mark" class="h-6 w-6" />
</button>
/>
<!-- Navigation arrows -->
<button
<MalioButtonIcon
v-if="hasPrev"
class="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
icon="heroicons:chevron-left"
aria-label="Précédent"
variant="ghost"
icon-size="24"
button-class="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-black/50 text-white hover:bg-black/70"
@click="$emit('prev')"
>
<Icon name="heroicons:chevron-left" class="h-6 w-6" />
</button>
<button
/>
<MalioButtonIcon
v-if="hasNext"
class="absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
icon="heroicons:chevron-right"
aria-label="Suivant"
variant="ghost"
icon-size="24"
button-class="absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-black/50 text-white hover:bg-black/70"
@click="$emit('next')"
>
<Icon name="heroicons:chevron-right" class="h-6 w-6" />
</button>
/>
<!-- Content -->
<div class="flex max-h-[90vh] max-w-[90vw] flex-col items-center">

15
frontend/components/task/TaskEffortDrawer.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppDrawer v-model="isOpen" :title="isEditing ? $t('taskEfforts.editEffort') : $t('taskEfforts.addEffort')">
<MalioDrawer v-model="isOpen" :title="isEditing ? $t('taskEfforts.editEffort') : $t('taskEfforts.addEffort')">
<form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
<MalioInputText
v-model="form.label"
@@ -10,16 +10,15 @@
/>
<div class="mt-6 flex justify-end">
<button
type="submit"
class="rounded-md bg-primary-500 px-6 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
<MalioButton
label="Enregistrer"
button-class="w-auto px-6"
:disabled="isSubmitting"
>
Enregistrer
</button>
@click="handleSubmit"
/>
</div>
</form>
</AppDrawer>
</MalioDrawer>
</template>
<script setup lang="ts">

36
frontend/components/task/TaskGitSection.vue
View File

@@ -38,24 +38,22 @@
<!-- Actions -->
<div class="flex gap-1">
<button
<MalioButtonIcon
v-if="activeTab === 'branches'"
type="button"
class="rounded-md px-2.5 py-1.5 text-xs font-medium text-neutral-500 transition-colors hover:bg-neutral-200/60 hover:text-neutral-700"
:title="$t('gitea.branch.copy')"
icon="mdi:content-copy"
:aria-label="$t('gitea.branch.copy')"
variant="ghost"
icon-size="14"
@click="handleCopy"
>
<Icon name="mdi:content-copy" size="14" />
</button>
<button
/>
<MalioButton
v-if="activeTab === 'branches'"
type="button"
class="rounded-md bg-primary-500 px-2.5 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-secondary-500"
icon-name="mdi:plus"
icon-position="left"
button-class="w-auto px-2.5 py-1.5 text-xs"
:label="$t('gitea.branch.create')"
@click="showCreateForm = !showCreateForm"
>
<Icon name="mdi:plus" size="14" class="mr-0.5 inline-block align-[-2px]" />
{{ $t('gitea.branch.create') }}
</button>
/>
</div>
</div>
@@ -79,14 +77,12 @@
:label="$t('gitea.branch.baseBranch')"
input-class="w-full"
/>
<button
type="button"
class="mb-[2px] rounded-md bg-primary-500 px-4 py-2 text-xs font-semibold text-white transition-colors hover:bg-secondary-500 disabled:opacity-50"
<MalioButton
:label="isCreating ? '...' : $t('gitea.branch.create')"
button-class="w-auto px-4 mb-[2px] text-xs"
:disabled="isCreating"
@click="handleCreate"
>
{{ isCreating ? '...' : $t('gitea.branch.create') }}
</button>
/>
</div>
<code class="mt-2 block rounded bg-neutral-50 px-2 py-1 text-[11px] text-neutral-500">
{{ branchPreview }}

37
frontend/components/task/TaskGroupDrawer.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppDrawer v-model="isOpen" :title="isEditing ? $t('taskGroups.editGroup') : $t('taskGroups.addGroup')">
<MalioDrawer v-model="isOpen" :title="isEditing ? $t('taskGroups.editGroup') : $t('taskGroups.addGroup')">
<form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
<MalioInputText
v-model="form.title"
@@ -25,34 +25,31 @@
</div>
<div class="mt-6 flex items-center" :class="isEditing ? 'justify-between' : 'justify-end'">
<button
<MalioButton
v-if="canArchive"
type="button"
class="rounded-md bg-neutral-500 px-4 py-2 text-sm font-semibold text-white hover:bg-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
variant="secondary"
:label="$t('archive.archiveButton')"
button-class="w-auto px-4"
:disabled="isSubmitting"
@click="handleArchive"
>
{{ $t('archive.archiveButton') }}
</button>
<button
/>
<MalioButton
v-if="canUnarchive"
type="button"
class="rounded-md bg-neutral-500 px-4 py-2 text-sm font-semibold text-white hover:bg-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
variant="secondary"
:label="$t('archive.unarchiveButton')"
button-class="w-auto px-4"
:disabled="isSubmitting"
@click="handleUnarchive"
>
{{ $t('archive.unarchiveButton') }}
</button>
<button
type="submit"
class="rounded-md bg-primary-500 px-6 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
/>
<MalioButton
label="Enregistrer"
button-class="w-auto px-6"
:disabled="isSubmitting"
>
Enregistrer
</button>
@click="handleSubmit"
/>
</div>
</form>
</AppDrawer>
</MalioDrawer>
</template>
<script setup lang="ts">

13
frontend/components/task/TaskListItem.vue
View File

@@ -78,13 +78,14 @@
<!-- Right: timer top, avatar bottom -->
<div class="flex shrink-0 flex-col items-end justify-between self-stretch gap-1">
<button
class="shrink-0 transition-colors"
:class="isTimerOnTask ? 'text-[#F18619] hover:text-[#d97314]' : 'text-neutral-400 hover:text-primary-500'"
<MalioButtonIcon
:icon="isTimerOnTask ? 'mdi:stop-circle-outline' : 'mdi:play-circle-outline'"
:aria-label="isTimerOnTask ? 'Arrêter le timer' : 'Démarrer le timer'"
variant="ghost"
icon-size="20"
:button-class="isTimerOnTask ? 'shrink-0 text-[#F18619] hover:text-[#d97314]' : 'shrink-0 text-neutral-400 hover:text-primary-500'"
@click.stop="isTimerOnTask ? timerStore.stop() : timerStore.startFromTask(task)"
>
<Icon :name="isTimerOnTask ? 'mdi:stop-circle-outline' : 'mdi:play-circle-outline'" size="20" />
</button>
/>
<UserAvatar
v-if="task.assignee"
:user="task.assignee"

67
frontend/components/task/TaskModal.vue
View File

@@ -27,13 +27,13 @@
{{ isEditing ? $t('tasks.editTask') : $t('tasks.addTask') }}
</h2>
</div>
<button
type="button"
class="flex h-8 w-8 items-center justify-center rounded-lg text-neutral-400 transition-colors hover:bg-neutral-200/60 hover:text-neutral-600"
<MalioButtonIcon
icon="mdi:close"
aria-label="Fermer"
variant="ghost"
icon-size="20"
@click="close"
>
<Icon name="mdi:close" size="20" />
</button>
/>
</div>
<!-- Client ticket link -->
@@ -417,48 +417,43 @@
class="mt-6 flex items-center border-t border-neutral-100 pt-5"
:class="isEditing ? 'justify-between' : 'justify-end'"
>
<button
<MalioButton
v-if="isEditing"
type="button"
class="rounded-lg bg-red-50 px-4 py-2 text-sm font-semibold text-red-600 transition-colors hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-50"
variant="danger"
label="Supprimer"
button-class="w-auto px-4"
:disabled="isSubmitting"
@click="confirmDeleteOpen = true"
>
Supprimer
</button>
/>
<div class="flex gap-3">
<button
<MalioButton
v-if="canArchive"
type="button"
class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-50"
variant="tertiary"
:label="$t('archive.archiveButton')"
button-class="w-auto px-4"
:disabled="isSubmitting"
@click="handleArchive"
>
{{ $t('archive.archiveButton') }}
</button>
<button
/>
<MalioButton
v-if="canUnarchive"
type="button"
class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-50"
variant="tertiary"
:label="$t('archive.unarchiveButton')"
button-class="w-auto px-4"
:disabled="isSubmitting"
@click="handleUnarchive"
>
{{ $t('archive.unarchiveButton') }}
</button>
<button
type="button"
class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50"
/>
<MalioButton
variant="tertiary"
label="Annuler"
button-class="w-auto px-4"
@click="close"
>
Annuler
</button>
<button
type="submit"
class="rounded-lg bg-primary-500 px-6 py-2 text-sm font-semibold text-white transition-colors hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
/>
<MalioButton
label="Enregistrer"
button-class="w-auto px-6"
:disabled="isSubmitting"
>
Enregistrer
</button>
@click="handleSubmit"
/>
</div>
</div>
</form>

15
frontend/components/task/TaskPriorityDrawer.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppDrawer v-model="isOpen" :title="isEditing ? $t('taskPriorities.editPriority') : $t('taskPriorities.addPriority')">
<MalioDrawer v-model="isOpen" :title="isEditing ? $t('taskPriorities.editPriority') : $t('taskPriorities.addPriority')">
<form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
<MalioInputText
v-model="form.label"
@@ -13,16 +13,15 @@
</div>
<div class="mt-6 flex justify-end">
<button
type="submit"
class="rounded-md bg-primary-500 px-6 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
<MalioButton
label="Enregistrer"
button-class="w-auto px-6"
:disabled="isSubmitting"
>
Enregistrer
</button>
@click="handleSubmit"
/>
</div>
</form>
</AppDrawer>
</MalioDrawer>
</template>
<script setup lang="ts">

15
frontend/components/task/TaskStatusDrawer.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppDrawer v-model="isOpen" :title="isEditing ? $t('taskStatuses.editStatus') : $t('taskStatuses.addStatus')">
<MalioDrawer v-model="isOpen" :title="isEditing ? $t('taskStatuses.editStatus') : $t('taskStatuses.addStatus')">
<form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
<MalioInputText
v-model="form.label"
@@ -31,16 +31,15 @@
</div>
<div class="mt-6 flex justify-end">
<button
type="submit"
class="rounded-md bg-primary-500 px-6 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
<MalioButton
label="Enregistrer"
button-class="w-auto px-6"
:disabled="isSubmitting"
>
Enregistrer
</button>
@click="handleSubmit"
/>
</div>
</form>
</AppDrawer>
</MalioDrawer>
</template>
<script setup lang="ts">

15
frontend/components/task/TaskTagDrawer.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppDrawer v-model="isOpen" :title="isEditing ? $t('taskTags.editTag') : $t('taskTags.addTag')">
<MalioDrawer v-model="isOpen" :title="isEditing ? $t('taskTags.editTag') : $t('taskTags.addTag')">
<form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
<MalioInputText
v-model="form.label"
@@ -13,16 +13,15 @@
</div>
<div class="mt-6 flex justify-end">
<button
type="submit"
class="rounded-md bg-primary-500 px-6 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
<MalioButton
label="Enregistrer"
button-class="w-auto px-6"
:disabled="isSubmitting"
>
Enregistrer
</button>
@click="handleSubmit"
/>
</div>
</form>
</AppDrawer>
</MalioDrawer>
</template>
<script setup lang="ts">

37
frontend/components/time-tracking/TimeEntryDrawer.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppDrawer v-model="isOpen" :title="isEditing ? $t('timeEntries.editEntry') : $t('timeEntries.addEntry')">
<MalioDrawer v-model="isOpen" :title="isEditing ? $t('timeEntries.editEntry') : $t('timeEntries.addEntry')">
<form class="space-y-4" @submit.prevent="onSubmit">
<div>
<label class="mb-1 block text-sm font-semibold text-neutral-700">Titre</label>
@@ -97,33 +97,30 @@
</div>
<div class="flex items-center" :class="isEditing ? 'justify-between' : 'justify-end'">
<button
<MalioButton
v-if="isEditing"
type="button"
class="rounded-md bg-red-500 px-4 py-2 text-sm font-semibold text-white hover:bg-red-600 transition"
variant="danger"
label="Supprimer"
button-class="w-auto px-4"
@click="onDelete"
>
Supprimer
</button>
/>
<div class="flex gap-2">
<button
<MalioButton
v-if="isEditing"
type="button"
class="rounded-md bg-blue-500 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-600 transition"
variant="secondary"
label="Dupliquer"
button-class="w-auto px-4"
@click="onDuplicate"
>
Dupliquer
</button>
<button
type="submit"
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 transition"
>
Enregistrer
</button>
/>
<MalioButton
label="Enregistrer"
button-class="w-auto px-4"
@click="onSubmit"
/>
</div>
</div>
</form>
</AppDrawer>
</MalioDrawer>
</template>
<script setup lang="ts">

13
frontend/components/time-tracking/TimeEntryList.vue
View File

@@ -54,13 +54,14 @@
</div>
<!-- Delete action -->
<button
class="shrink-0 rounded-md p-1.5 text-neutral-300 opacity-0 transition hover:bg-red-50 hover:text-red-500 group-hover:opacity-100"
:title="$t('common.delete')"
<MalioButtonIcon
icon="mdi:delete-outline"
:aria-label="$t('common.delete')"
variant="ghost"
icon-size="18"
button-class="shrink-0 text-neutral-300 opacity-0 hover:bg-red-50 hover:text-red-500 group-hover:opacity-100"
@click.stop="emit('deleteEntry', entry)"
>
<Icon name="mdi:delete-outline" size="18" />
</button>
/>
</div>
</div>
</template>

28
frontend/components/time-tracking/TimeTrackingExportDrawer.vue
View File

@@ -53,8 +53,6 @@
:display-tag="true"
:display-select-all="true"
min-width="!w-full"
text-field="text-sm"
text-value="text-sm"
/>
</div>
@@ -66,8 +64,6 @@
:label="$t('timeEntries.exportClient')"
:empty-option-label="$t('timeEntries.exportAllClients')"
min-width="!w-full"
text-field="text-sm"
text-value="text-sm"
/>
</div>
@@ -80,8 +76,6 @@
:display-tag="true"
:display-select-all="true"
min-width="!w-full"
text-field="text-sm"
text-value="text-sm"
/>
</div>
@@ -94,19 +88,17 @@
:display-tag="true"
:display-select-all="true"
min-width="!w-full"
text-field="text-sm"
text-value="text-sm"
/>
</div>
<!-- Export button -->
<button
class="flex w-full items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-3 text-sm font-semibold text-white hover:bg-primary-600 transition"
<MalioButton
:label="$t('timeEntries.export')"
icon-name="mdi:download"
icon-position="left"
button-class="w-full"
@click="doExport"
>
<Icon name="mdi:download" size="18" />
{{ $t('timeEntries.export') }}
</button>
/>
</div>
</MalioDrawer>
</template>
@@ -148,11 +140,11 @@ const selectedProjectIds = ref<number[]>([])
const selectedTagIds = ref<number[]>([])
const userOptions = computed(() =>
props.users.map(u => ({ label: u.username, value: u.id }))
props.users.map(u => ({ text: u.username, value: u.id }))
)
const clientOptions = computed(() =>
props.clients.map(c => ({ label: c.name, value: c.id }))
props.clients.map(c => ({ text: c.name, value: c.id }))
)
const filteredProjectOptions = computed(() => {
@@ -160,11 +152,11 @@ const filteredProjectOptions = computed(() => {
if (selectedClientId.value) {
list = list.filter(p => p.client?.id === selectedClientId.value)
}
return list.map(p => ({ label: p.name, value: p.id }))
return list.map(p => ({ text: p.name, value: p.id }))
})
const tagOptions = computed(() =>
props.tags.map(t => ({ label: t.label, value: t.id }))
props.tags.map(t => ({ text: t.label, value: t.id }))
)
// Reset project selection when client changes

12
frontend/components/ui/AppDrawer.vue
View File

@@ -13,13 +13,13 @@
>
<div class="flex items-center justify-between border-b border-neutral-200 px-6 py-4">
<h2 class="text-lg font-bold text-neutral-900">{{ title }}</h2>
<button
type="button"
class="rounded p-1 text-neutral-400 hover:text-neutral-600"
<MalioButtonIcon
icon="mdi:close"
aria-label="Fermer"
variant="ghost"
icon-size="24"
@click="close"
>
<Icon name="mdi:close" size="24" />
</button>
/>
</div>
<div class="flex-1 overflow-y-auto px-6 py-4">
<slot />

40
frontend/components/ui/AppTopNav.vue
View File

@@ -1,32 +1,34 @@
<template>
<header class="border-b border-neutral-200 bg-primary-500 px-3 py-2 text-white sm:px-5 sm:py-2 max-h-[60px]">
<div class="flex h-full items-center justify-between">
<button
class="rounded-md p-2 text-white hover:bg-primary-600 transition-colors lg:hidden"
<MalioButtonIcon
icon="mdi:menu"
aria-label="Menu"
variant="ghost"
icon-size="24"
button-class="lg:hidden text-white hover:bg-primary-600"
@click="ui.openMobileSidebar()"
>
<Icon name="mdi:menu" size="24" />
</button>
/>
<div class="hidden items-center gap-2 lg:flex">
<h1 class="text-lg font-bold tracking-tight">{{ appTitle }}</h1>
<button
type="button"
class="rounded-md p-1 text-white/60 transition-colors hover:bg-primary-600 hover:text-white"
:title="appTitle === 'NeauTime' ? 'Switch to Lesstime' : 'Switch to NeauTime'"
<MalioButtonIcon
icon="mdi:swap-horizontal"
:aria-label="appTitle === 'NeauTime' ? 'Switch to Lesstime' : 'Switch to NeauTime'"
variant="ghost"
icon-size="18"
button-class="text-white/60 hover:bg-primary-600 hover:text-white"
@click="toggleTitle"
>
<Icon name="mdi:swap-horizontal" size="18" />
</button>
/>
</div>
<div class="ml-auto flex items-center gap-4 text-xl text-white sm:gap-8">
<button
type="button"
class="rounded-md p-1.5 text-white/70 transition-colors hover:bg-primary-600 hover:text-white"
:title="ui.darkMode ? 'Mode clair' : 'Mode sombre'"
<MalioButtonIcon
:icon="ui.darkMode ? 'mdi:weather-sunny' : 'mdi:weather-night'"
:aria-label="ui.darkMode ? 'Mode clair' : 'Mode sombre'"
variant="ghost"
icon-size="22"
button-class="text-white/70 hover:bg-primary-600 hover:text-white"
@click="ui.toggleDarkMode()"
>
<Icon :name="ui.darkMode ? 'mdi:weather-sunny' : 'mdi:weather-night'" size="22" />
</button>
/>
<NotificationBell />
<div class="group relative flex gap-2 sm:gap-4">
<UserAvatar v-if="user" :user="user" size="md" class="cursor-pointer" />

22
frontend/components/ui/ConfirmDeleteDocumentModal.vue
View File

@@ -9,20 +9,18 @@
{{ $t('taskDocuments.confirmDeleteMessage') }}
</p>
<div class="mt-6 flex justify-end gap-3">
<button
type="button"
class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50"
<MalioButton
variant="tertiary"
:label="$t('common.cancel')"
button-class="w-auto px-4"
@click="cancel"
>
{{ $t('common.cancel') }}
</button>
<button
type="button"
class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700"
/>
<MalioButton
variant="danger"
label="Supprimer"
button-class="w-auto px-4"
@click="$emit('confirm')"
>
Supprimer
</button>
/>
</div>
</div>
</div>

22
frontend/components/ui/ConfirmDeleteProjectModal.vue
View File

@@ -9,20 +9,18 @@
{{ $t('projects.deleteConfirmMessage') }}
</p>
<div class="mt-6 flex justify-end gap-3">
<button
type="button"
class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50"
<MalioButton
variant="tertiary"
:label="$t('common.cancel')"
button-class="w-auto px-4"
@click="cancel"
>
{{ $t('common.cancel') }}
</button>
<button
type="button"
class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700"
/>
<MalioButton
variant="danger"
:label="$t('common.delete')"
button-class="w-auto px-4"
@click="$emit('confirm')"
>
{{ $t('common.delete') }}
</button>
/>
</div>
</div>
</div>

22
frontend/components/ui/ConfirmDeleteStatusModal.vue
View File

@@ -21,21 +21,19 @@
</div>
<div class="mt-6 flex justify-end gap-3">
<button
type="button"
class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50"
<MalioButton
variant="tertiary"
:label="$t('common.cancel')"
button-class="w-auto px-4"
@click="cancel"
>
{{ $t('common.cancel') }}
</button>
<button
type="button"
class="rounded-md bg-[red-600] px-4 py-2 text-sm font-semibold text-white hover:bg-[red-700] disabled:opacity-50"
/>
<MalioButton
variant="danger"
:label="$t('common.delete')"
button-class="w-auto px-4"
:disabled="isProcessing"
@click="confirm"
>
{{ $t('common.delete') }}
</button>
/>
</div>
</div>
</div>

22
frontend/components/ui/ConfirmDeleteTaskModal.vue
View File

@@ -9,20 +9,18 @@
{{ $t('tasks.deleteConfirmMessage') }}
</p>
<div class="mt-6 flex justify-end gap-3">
<button
type="button"
class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50"
<MalioButton
variant="tertiary"
label="Annuler"
button-class="w-auto px-4"
@click="cancel"
>
Annuler
</button>
<button
type="button"
class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700"
/>
<MalioButton
variant="danger"
label="Supprimer"
button-class="w-auto px-4"
@click="$emit('confirm')"
>
Supprimer
</button>
/>
</div>
</div>
</div>

12
frontend/components/ui/DataTable.vue
View File

@@ -35,13 +35,15 @@
<td v-if="deletable || $slots.actions" class="px-4 py-3">
<div class="flex items-center gap-2">
<slot name="actions" :item="item" />
<button
<MalioButtonIcon
v-if="deletable"
class="text-neutral-400 transition-colors hover:text-red-500"
icon="mdi:delete-outline"
aria-label="Supprimer"
variant="ghost"
icon-size="20"
button-class="text-neutral-400 hover:text-red-500"
@click.stop="$emit('delete', item)"
>
<Icon name="mdi:delete-outline" size="20" />
</button>
/>
</div>
</td>
</tr>

21
frontend/components/user/AvatarCropper.vue
View File

@@ -18,21 +18,18 @@
</div>
<div class="flex justify-end gap-3">
<button
type="button"
class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50"
<MalioButton
variant="tertiary"
:label="$t('common.cancel')"
button-class="w-auto px-4"
@click="emit('cancel')"
>
{{ $t('common.cancel') }}
</button>
<button
type="button"
class="rounded-lg bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
/>
<MalioButton
:label="$t('common.confirm')"
button-class="w-auto px-4"
:disabled="cropping"
@click="onConfirm"
>
{{ $t('common.confirm') }}
</button>
/>
</div>
</div>
</div>

15
frontend/components/user/UserDrawer.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppDrawer v-model="isOpen" :title="isEditing ? $t('users.editUser') : $t('users.addUser')">
<MalioDrawer v-model="isOpen" :title="isEditing ? $t('users.editUser') : $t('users.addUser')">
<form class="flex flex-col gap-2" @submit.prevent="handleSubmit">
<MalioInputText
v-model="form.username"
@@ -70,16 +70,15 @@
</div>
<div class="mt-6 flex justify-end">
<button
type="submit"
class="rounded-md bg-primary-500 px-6 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
<MalioButton
label="Enregistrer"
button-class="w-auto px-6"
:disabled="isSubmitting"
>
Enregistrer
</button>
@click="handleSubmit"
/>
</div>
</form>
</AppDrawer>
</MalioDrawer>
</template>
<script setup lang="ts">