feat: enhance user input and rules panel components
- Updated dark-light mode button styles for improved responsiveness. - Enhanced rules panel with additional buttons for moving rules up and down, and updated styles for better layout. - Added active rule count display in the rules panel header. - Improved user input component layout with section headings and updated button styles. - Refactored day input component to use grid layout for better alignment and responsiveness. - Added new translations for user input and rules panel features. - Implemented tests for new functionality in rules panel and day input components. - Added application routes test to ensure correct routing configuration.
This commit is contained in:
nessar committed
1 parent
31314f3969
commit
609b3dece9
30 files changed
+870
-382
No files matched your search
@@ -1,8 +1,9 @@
|
||||
<mat-expansion-panel class="rules-panel-container mat-elevation-z2">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<mat-icon>rule</mat-icon>
|
||||
{{ tr().rules.title }}
|
||||
<mat-icon aria-hidden="true">rule</mat-icon>
|
||||
<span>{{ tr().rules.title }}</span>
|
||||
<span class="rule-count">{{ activeRuleCount }} {{ tr().rules.active }}</span>
|
||||
</mat-panel-title>
|
||||
<mat-panel-description> {{ tr().rules.subtitle }} </mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
@@ -37,6 +38,22 @@
|
||||
>
|
||||
</mat-slide-toggle>
|
||||
<div class="rule-actions">
|
||||
<button
|
||||
mat-icon-button
|
||||
[disabled]="i === 0"
|
||||
[aria-label]="tr().rules.moveRuleUp"
|
||||
(click)="moveRule(i, -1, $event)"
|
||||
>
|
||||
<mat-icon>keyboard_arrow_up</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
[disabled]="i === rules.length - 1"
|
||||
[aria-label]="tr().rules.moveRuleDown"
|
||||
(click)="moveRule(i, 1, $event)"
|
||||
>
|
||||
<mat-icon>keyboard_arrow_down</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
[aria-label]="tr().rules.editRule"
|
||||
|
||||
@@ -1,20 +1,30 @@
|
||||
.rules-panel-container {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 12px;
|
||||
margin: 0;
|
||||
border-radius: var(--ui-radius-md, 0.75rem);
|
||||
overflow: hidden;
|
||||
container-type: inline-size;
|
||||
|
||||
mat-panel-title {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@container (max-width: 480px) {
|
||||
.rule-count {
|
||||
padding: 0.125rem 0.5rem;
|
||||
background: var(--mat-sys-primary-container, #d7e3ff);
|
||||
border-radius: 999px;
|
||||
color: var(--mat-sys-on-primary-container, #001b3f);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@container (max-width: 30rem) {
|
||||
mat-panel-description {
|
||||
display: none !important;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -27,10 +37,12 @@
|
||||
}
|
||||
|
||||
.rule-item {
|
||||
border: 1px solid var(--mat-sys-outline-variant);
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
background: var(--mat-sys-surface-container);
|
||||
border: 1px solid var(--mat-sys-outline-variant, #c7c7d0);
|
||||
border-radius: var(--ui-radius-sm, 0.5rem);
|
||||
transition:
|
||||
border-color 200ms ease,
|
||||
background-color 200ms ease;
|
||||
background: var(--mat-sys-surface-container, #f1f1f5);
|
||||
|
||||
&:not(.editing) {
|
||||
cursor: grab;
|
||||
@@ -41,11 +53,11 @@
|
||||
}
|
||||
|
||||
&:hover:not(.editing) {
|
||||
border-color: var(--mat-sys-outline);
|
||||
border-color: var(--mat-sys-outline, #777680);
|
||||
}
|
||||
|
||||
&.editing {
|
||||
border: 1px solid var(--mat-sys-primary);
|
||||
border: 1px solid var(--mat-sys-primary, #005cbb);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,29 +88,31 @@
|
||||
|
||||
.priority-statement {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: var(--mat-sys-primary-container);
|
||||
color: var(--mat-sys-on-primary-container);
|
||||
background: var(--mat-sys-primary-container, #d7e3ff);
|
||||
color: var(--mat-sys-on-primary-container, #001b3f);
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
mat-icon {
|
||||
color: var(--mat-sys-primary);
|
||||
color: var(--mat-sys-primary, #005cbb);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rule-drag-grip {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 8px;
|
||||
margin-bottom: -8px;
|
||||
color: var(--mat-sys-outline);
|
||||
color: var(--mat-sys-outline, #777680);
|
||||
opacity: 0.6;
|
||||
cursor: grab;
|
||||
transition: opacity 0.2s;
|
||||
@@ -114,6 +128,7 @@
|
||||
|
||||
.rule-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
@@ -122,24 +137,21 @@
|
||||
font-weight: 600;
|
||||
font-size: 1.05rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.rule-number {
|
||||
color: var(--mat-sys-primary);
|
||||
color: var(--mat-sys-primary, #005cbb);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.rule-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
.rule-item:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
flex-wrap: wrap;
|
||||
gap: 0;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -158,8 +170,8 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
background: var(--mat-sys-surface-container-high);
|
||||
border-radius: 8px;
|
||||
background: var(--mat-sys-surface-container-high, #e9e9ee);
|
||||
border-radius: var(--ui-radius-sm, 0.5rem);
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
@@ -195,6 +207,7 @@
|
||||
|
||||
.editor-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
@@ -203,6 +216,7 @@
|
||||
|
||||
.add-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
@@ -216,3 +230,13 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 30rem) {
|
||||
.rule-summary {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.rule-header {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@@ -105,4 +105,10 @@ describe('RulesPanel', () => {
|
||||
|
||||
expect(component.rules.find((r) => r.id === targetRule.id)?.enabled).toBe(!initialState);
|
||||
});
|
||||
|
||||
it('should move a rule with the keyboard controls', () => {
|
||||
const secondRuleId = component.rules[1].id;
|
||||
component.moveRule(1, -1, { stopPropagation: () => {} } as Event);
|
||||
expect(component.rules[0].id).toBe(secondRuleId);
|
||||
});
|
||||
});
|
||||
@@ -140,12 +140,23 @@ export class RulesPanel {
|
||||
return this.ruleService.rules;
|
||||
}
|
||||
|
||||
protected get activeRuleCount(): number {
|
||||
return this.rules.filter((rule) => rule.enabled).length;
|
||||
}
|
||||
|
||||
public drop(event: CdkDragDrop<VacationRule[]>) {
|
||||
if (event.previousIndex !== event.currentIndex) {
|
||||
this.ruleService.reorderRules(event.previousIndex, event.currentIndex);
|
||||
}
|
||||
}
|
||||
|
||||
public moveRule(index: number, offset: -1 | 1, event: Event) {
|
||||
event.stopPropagation();
|
||||
const destination = index + offset;
|
||||
if (destination >= 0 && destination < this.rules.length)
|
||||
this.ruleService.reorderRules(index, destination);
|
||||
}
|
||||
|
||||
public toggleRule(id: string) {
|
||||
this.ruleService.toggleRule(id);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user