danvics/immich-automated-selfie-timelapse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Imporving settings UI : timestamp and time interval filter

Browse source
This commit is contained in:
Arnaud_Cayrol 2026-02-11 17:44:45 +01:00
parent 871b35c233
commit 730bd378ea
1 changed files with 96 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
frontend/src/lib/components/SettingsPanel.svelte
View file

@ -425,34 +425,29 @@
{#if config.processing.time_interval.enabled} {#if config.processing.time_interval.enabled}
<div class="setting-row sub-setting"> <div class="setting-row sub-setting">
<label for="max-photos"> <span class="setting-label">Keep at most</span>
<span class="setting-label">Max Photos</span>
<span class="setting-hint">Maximum photos per time range</span>
</label>
<div class="setting-control"> <div class="setting-control">
<input <input
id="max-photos" id="max-photos"
type="range" type="number"
class="inline-number"
bind:value={config.processing.time_interval.max_photos} bind:value={config.processing.time_interval.max_photos}
min="1" min="1"
max="10" max="10"
step="1"
/> />
<span class="value">{config.processing.time_interval.max_photos}</span> <span class="setting-label">per</span>
<div class="toggle-group">
{#each [['day', 'day'], ['week', 'week'], ['month', 'month']] as [value, label]}
<button
type="button"
class="toggle-btn-option"
class:active={config.processing.time_interval.time_range === value}
onclick={() => config.processing.time_interval.time_range = value}
>{label}</button>
{/each}
</div>
</div> </div>
</div> </div>
<div class="setting-row sub-setting">
<label for="time-range">
<span class="setting-label">Time Range</span>
<span class="setting-hint">Group photos by this period</span>
</label>
<select id="time-range" bind:value={config.processing.time_interval.time_range}>
<option value="day">Day</option>
<option value="week">Week</option>
<option value="month">Month</option>
</select>
</div>
{/if} {/if}
</div> </div>
@ -480,28 +475,28 @@
</select> </select>
</div> </div>
<div class="setting-row sub-setting checkbox-row"> <div class="setting-row sub-setting">
<label for="timestamp-year"> <span class="setting-label">Date Components</span>
<span class="setting-label">Show Year</span> <div class="toggle-group">
<span class="setting-hint">Display year in timestamp</span> <button
</label> type="button"
<input id="timestamp-year" type="checkbox" bind:checked={config.processing.timestamp.year} /> class="toggle-btn-option"
</div> class:active={config.processing.timestamp.year}
onclick={() => config.processing.timestamp.year = !config.processing.timestamp.year}
<div class="setting-row sub-setting checkbox-row"> >Year</button>
<label for="timestamp-month"> <button
<span class="setting-label">Show Month</span> type="button"
<span class="setting-hint">Display month in timestamp</span> class="toggle-btn-option"
</label> class:active={config.processing.timestamp.month}
<input id="timestamp-month" type="checkbox" bind:checked={config.processing.timestamp.month} /> onclick={() => config.processing.timestamp.month = !config.processing.timestamp.month}
</div> >Month</button>
<button
<div class="setting-row sub-setting checkbox-row"> type="button"
<label for="timestamp-day"> class="toggle-btn-option"
<span class="setting-label">Show Day</span> class:active={config.processing.timestamp.day}
<span class="setting-hint">Display day in timestamp</span> onclick={() => config.processing.timestamp.day = !config.processing.timestamp.day}
</label> >Day</button>
<input id="timestamp-day" type="checkbox" bind:checked={config.processing.timestamp.day} /> </div>
</div> </div>
{/if} {/if}
</div> </div>
@ -792,9 +787,9 @@
} }
.sub-setting { .sub-setting {
padding-left: 1rem; padding-left: 1.5rem;
border-left: 2px solid #333; border-left: 2px solid #333;
margin-left: 0.5rem; margin-left: 0.75rem;
} }
.actions { .actions {
@ -870,6 +865,64 @@
height: 96px; height: 96px;
} }
.inline-number {
width: 3rem;
padding: 0.3rem 0.4rem;
background: #0f0f0f;
border: 1px solid #333;
border-radius: 4px;
color: #e0e0e0;
font-size: 0.875rem;
text-align: center;
-moz-appearance: textfield;
}
.inline-number::-webkit-inner-spin-button,
.inline-number::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.inline-number:focus {
outline: none;
border-color: #4f46e5;
}
/* Toggle button group */
.toggle-group {
display: flex;
gap: 0;
border-radius: 6px;
overflow: hidden;
border: 1px solid #333;
}
.toggle-btn-option {
padding: 0.4rem 0.75rem;
background: #0f0f0f;
border: none;
border-right: 1px solid #333;
color: #888;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.15s ease;
}
.toggle-btn-option:last-child {
border-right: none;
}
.toggle-btn-option:hover {
background: #252525;
color: #e0e0e0;
}
.toggle-btn-option.active {
background: #4f46e5;
color: #fff;
font-weight: 600;
}
/* Brightness visual control */ /* Brightness visual control */
.brightness-visual-control { .brightness-visual-control {
display: flex; display: flex;