Skip to content

Commit 9ad3b97

Browse files
fastenderfastender
authored
Update fast-search-card.js
1 parent 3d9fcd7 commit 9ad3b97

File tree

1 file changed

+125
-45
lines changed

1 file changed

+125
-45
lines changed

‎dist/fast-search-card.js‎

Lines changed: 125 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2890,17 +2890,19 @@ class FastSearchCard extends HTMLElement {
28902890
color: var(--text-secondary);
28912891
opacity: 0.8;
28922892
}
2893-
2893+
28942894
.active-timers {
2895+
padding: 0px;
28952896
margin-bottom: 16px;
28962897
min-height: 60px;
2897-
max-height: 240px; /* ← NEU: Maximale Höhe für ~3-4 Timer */
2898-
overflow-y: auto; /* ← NEU: Scrollbar bei mehr Timern */
2898+
height: calc(100vh - 300px);
2899+
max-height: 500px;
2900+
overflow-y: auto;
28992901
scrollbar-width: thin;
29002902
scrollbar-color: rgba(255,255,255,0.2) transparent;
2903+
-ms-overflow-style: none;
29012904
}
2902-
2903-
/* NEU: Webkit Scrollbar Styling für Active Timers */
2905+
29042906
.active-timers::-webkit-scrollbar {
29052907
width: 4px;
29062908
}
@@ -2916,6 +2918,12 @@ class FastSearchCard extends HTMLElement {
29162918

29172919
.active-timers::-webkit-scrollbar-thumb:hover {
29182920
background: rgba(255,255,255,0.3);
2921+
}
2922+
2923+
.active-timers-grid {
2924+
display: flex;
2925+
flex-direction: column;
2926+
gap: 12px;
29192927
}
29202928

29212929
.loading-timers {
@@ -2937,7 +2945,7 @@ class FastSearchCard extends HTMLElement {
29372945
.active-timers-list {
29382946
display: flex;
29392947
flex-direction: column;
2940-
gap: 8px;
2948+
gap: 12px;
29412949
}
29422950

29432951
.active-timer-item {
@@ -2997,38 +3005,37 @@ class FastSearchCard extends HTMLElement {
29973005
}
29983006

29993007
.timer-edit, .timer-delete {
3000-
flex-basis: 50px;
3001-
flex-grow: 0;
3002-
flex-shrink: 0;
3003-
width: 50px;
3004-
height: 50px;
3005-
border-radius: 50%;
3006-
background: rgba(255, 255, 255, 0.1);
3008+
width: 32px;
3009+
height: 32px;
30073010
border: none;
3008-
color: var(--text-primary);
3011+
background: rgba(255, 255, 255, 0.1);
3012+
border-radius: 50%;
30093013
cursor: pointer;
3010-
transition: all 0.2s ease;
30113014
display: flex;
30123015
align-items: center;
30133016
justify-content: center;
3014-
padding: 0;
3017+
transition: all 0.2s ease;
3018+
color: var(--text-secondary);
3019+
margin-left: 8px;
30153020
}
30163021

3017-
.timer-edit svg, .timer-delete svg {
3018-
width: 24px;
3019-
height: 24px;
3020-
stroke-width: 1;
3021-
}
3022-
30233022
.timer-edit:hover {
3024-
transform: scale(1.05);
3025-
background: rgba(0, 122, 255, 0.2);
3026-
}
3027-
3023+
background: rgba(0, 122, 255, 0.8);
3024+
color: white;
3025+
transform: scale(1.1);
3026+
}
3027+
30283028
.timer-delete:hover {
3029-
transform: scale(1.05);
3030-
background: rgba(255, 0, 0, 0.2);
3031-
}
3029+
background: rgba(255, 59, 48, 0.8);
3030+
color: white;
3031+
transform: scale(1.1);
3032+
}
3033+
3034+
.timer-edit svg, .timer-delete svg {
3035+
width: 16px;
3036+
height: 16px;
3037+
stroke-width: 2;
3038+
}
30323039

30333040
.timer-edit.active, .timer-delete.active {
30343041
background: var(--accent);
@@ -3040,7 +3047,13 @@ class FastSearchCard extends HTMLElement {
30403047
font-style: italic;
30413048
padding: 20px;
30423049
font-size: 13px;
3043-
}
3050+
}
3051+
3052+
.timer-timeline-event .timeline-event-time {
3053+
display: flex;
3054+
align-items: center;
3055+
gap: 8px;
3056+
}
30443057

30453058

30463059

@@ -4190,6 +4203,38 @@ class FastSearchCard extends HTMLElement {
41904203
color: var(--text-secondary);
41914204
}
41924205

4206+
/* Timer-spezifische Badge-Varianten */
4207+
.timer-type-badge {
4208+
background: rgba(76, 175, 80, 0.2);
4209+
color: #4CAF50;
4210+
}
4211+
4212+
.timer-time-badge {
4213+
background: rgba(255, 152, 0, 0.2);
4214+
color: #FF9800;
4215+
}
4216+
4217+
.timer-status-badge {
4218+
background: rgba(156, 39, 176, 0.2);
4219+
color: #9C27B0;
4220+
}
4221+
4222+
/* Timer Timeline Events - erweitert die Action Timeline Event Styles */
4223+
.timer-timeline-event {
4224+
cursor: pointer;
4225+
transition: all 0.2s ease;
4226+
}
4227+
4228+
.timer-timeline-event:hover {
4229+
transform: translateY(-1px);
4230+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
4231+
}
4232+
4233+
.timer-timeline-event .timeline-event-icon {
4234+
background: linear-gradient(135deg, #4CAF50, #388E3C);
4235+
color: white;
4236+
}
4237+
41934238
/* Favoriten-spezifische Badge-Farben */
41944239
.action-timeline-event.favorite-action .action-type-badge {
41954240
background: rgba(255, 193, 7, 0.2);
@@ -9803,26 +9848,36 @@ class FastSearchCard extends HTMLElement {
98039848
const nextB = this.getNextExecution(b);
98049849
return nextA - nextB;
98059850
});
9851+
9852+
9853+
98069854

98079855
const timerHTML = sortedTimers.map(timer => {
98089856
const nextExecution = this.getNextExecution(timer);
98099857
const timeUntil = this.formatTimeUntil(nextExecution);
98109858
const action = this.getTimerAction(timer);
98119859

9860+
// Timer Icon (🕐 für alle Timer)
9861+
const timerIcon = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"></circle><polyline points="12,6 12,12 16,14"></polyline></svg>`;
9862+
98129863
return `
9813-
<div class="active-timer-item">
9814-
<div class="timer-info">
9815-
<div class="timer-name">${timer.name}</div>
9816-
<div class="timer-details">
9817-
<span class="timer-action">${action}</span>
9818-
<span class="timer-time">${timeUntil}</span>
9864+
<div class="timeline-event timer-timeline-event" data-timer-id="${timer.schedule_id}">
9865+
<div class="timeline-event-icon">
9866+
${timerIcon}
9867+
</div>
9868+
<div class="timeline-event-content">
9869+
<div class="timeline-event-title">
9870+
${timer.name}
9871+
</div>
9872+
<div class="timeline-event-details">
9873+
<span class="timer-type-badge">${action}</span>
9874+
<span class="timer-time-badge">${timeUntil}</span>
98199875
</div>
98209876
</div>
9821-
9822-
<div class="timer-controls">
9877+
<div class="timeline-event-time">
98239878
<button class="timer-edit" data-timer-id="${timer.schedule_id}" title="Timer bearbeiten">
98249879
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
9825-
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
9880+
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2-2v-7"></path>
98269881
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
98279882
</svg>
98289883
</button>
@@ -9833,19 +9888,22 @@ class FastSearchCard extends HTMLElement {
98339888
<path d="M4 7l16 0" />
98349889
<path d="M10 11l0 6" />
98359890
<path d="M14 11l0 6" />
9836-
<path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
9891+
<path d="M5 7l1 12a2 2 0 0 0 2 -2l1 -12" />
98379892
<path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
98389893
</svg>
98399894
</button>
98409895
</div>
9841-
98429896
</div>
98439897
`;
98449898
}).join('');
9899+
9900+
98459901

9902+
98469903
container.innerHTML = `
9847-
<div class="active-timers-header">Aktive Timer:</div>
9848-
<div class="active-timers-list">${timerHTML}</div>
9904+
<div class="active-timers-grid">
9905+
${timerHTML}
9906+
</div>
98499907
`;
98509908

98519909
// Event Listeners für Edit Buttons
@@ -9854,15 +9912,37 @@ class FastSearchCard extends HTMLElement {
98549912
const timerId = btn.dataset.timerId;
98559913
this.handleEditTimerClick(timerId, entityId);
98569914
});
9857-
});
9915+
});
98589916

98599917
// Event Listeners für Delete Buttons
98609918
container.querySelectorAll('.timer-delete').forEach(btn => {
98619919
btn.addEventListener('click', () => {
98629920
const timerId = btn.dataset.timerId;
98639921
this.deleteTimer(timerId, entityId);
98649922
});
9865-
});
9923+
});
9924+
9925+
// Entrance-Animationen mit Web Animations API (wie bei Actions)
9926+
const timerItems = container.querySelectorAll('.timer-timeline-event');
9927+
timerItems.forEach((item, index) => {
9928+
// Initial state
9929+
item.style.opacity = '0';
9930+
item.style.transform = 'translateY(20px)';
9931+
9932+
// Animate in mit gestaffeltem Delay
9933+
setTimeout(() => {
9934+
item.animate([
9935+
{ opacity: 0, transform: 'translateY(20px)' },
9936+
{ opacity: 1, transform: 'translateY(0)' }
9937+
], {
9938+
duration: 300,
9939+
delay: index * 50,
9940+
easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
9941+
fill: 'forwards'
9942+
});
9943+
}, 50);
9944+
});
9945+
98669946
}
98679947

98689948
getNextExecution(timer) {

0 commit comments

Comments
 (0)