style: apply consistent code formatting and indentation to rules panel component
This commit is contained in:
1 parent
17afa909a9
commit
7702efc165
2 files changed
+25
-13
No files matched your search
@@ -9,12 +9,20 @@
|
||||
|
||||
<div class="priority-statement">
|
||||
<mat-icon color="primary">info</mat-icon>
|
||||
<span>L'ordre des règles définit leur priorité d'exécution (de haut en bas). Glissez-déposez pour réorganiser.</span>
|
||||
<span
|
||||
>L'ordre des règles définit leur priorité d'exécution (de haut en bas). Glissez-déposez
|
||||
pour réorganiser.</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="rules-list" cdkDropList (cdkDropListDropped)="drop($event)">
|
||||
@for (rule of rules; track rule.id; let i = $index) {
|
||||
<div class="rule-item" cdkDrag [cdkDragDisabled]="editingRuleId() === rule.id" [class.editing]="editingRuleId() === rule.id">
|
||||
<div
|
||||
class="rule-item"
|
||||
cdkDrag
|
||||
[cdkDragDisabled]="editingRuleId() === rule.id"
|
||||
[class.editing]="editingRuleId() === rule.id"
|
||||
>
|
||||
@if (editingRuleId() !== rule.id) {
|
||||
<div class="rule-drag-grip">
|
||||
<mat-icon class="drag-handle-icon">drag_handle</mat-icon>
|
||||
@@ -26,7 +34,10 @@
|
||||
(change)="toggleRule(rule.id)"
|
||||
color="primary"
|
||||
>
|
||||
<span class="rule-name"><span class="rule-number">{{ i + 1 }}.</span> {{ rule.name }}</span>
|
||||
<span class="rule-name"
|
||||
><span class="rule-number">{{ i + 1 }}.</span>
|
||||
{{ rule.name }}</span
|
||||
>
|
||||
</mat-slide-toggle>
|
||||
<div class="rule-actions">
|
||||
<button mat-icon-button (click)="startEdit(rule, $event)">
|
||||
@@ -64,9 +75,9 @@
|
||||
} @else if (rule.type === RuleType.TIME_WINDOW) {
|
||||
<span>
|
||||
Placer <strong>{{ rule.placeDays }}</strong> jour(s)
|
||||
<strong>{{ getDayTypeLabel(rule.placeType) }}</strong> entre
|
||||
le <strong>{{ rule.startDate | date: 'dd/MM/yyyy' }}</strong> et
|
||||
le <strong>{{ rule.endDate | date: 'dd/MM/yyyy' }}</strong
|
||||
<strong>{{ getDayTypeLabel(rule.placeType) }}</strong> entre le
|
||||
<strong>{{ rule.startDate | date: 'dd/MM/yyyy' }}</strong> et le
|
||||
<strong>{{ rule.endDate | date: 'dd/MM/yyyy' }}</strong
|
||||
>.
|
||||
</span>
|
||||
}
|
||||
|
||||
@@ -31,10 +31,10 @@
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
background: var(--mat-sys-surface-container);
|
||||
|
||||
|
||||
&:not(.editing) {
|
||||
cursor: grab;
|
||||
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
@@ -52,9 +52,10 @@
|
||||
.cdk-drag-preview {
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
|
||||
0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
box-shadow:
|
||||
0 5px 5px -3px rgba(0, 0, 0, 0.2),
|
||||
0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.cdk-drag-placeholder {
|
||||
@@ -146,7 +147,7 @@
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
padding-left: 48px; /* Align with toggle switch text */
|
||||
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -205,7 +206,7 @@
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user