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

Better looking left border for the settings UI

Browse source
This commit is contained in:
Arnaud_Cayrol 2026-02-15 19:30:17 +01:00
parent 1126b2525f
commit 9bb2d4d828
1 changed files with 188 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -188,7 +188,8 @@
</div> </div>
{#if config.processing.face_resolution.enabled} {#if config.processing.face_resolution.enabled}
<div class="setting-row sub-setting"> <div class="sub-settings-group">
<div class="setting-row">
<label for="min-face-size"> <label for="min-face-size">
<span class="setting-label">Min Face Size</span> <span class="setting-label">Min Face Size</span>
<span class="setting-hint">Minimum face resolution in pixels</span> <span class="setting-hint">Minimum face resolution in pixels</span>
@ -205,6 +206,7 @@
<span class="value">{config.processing.face_resolution.min_size}px</span> <span class="value">{config.processing.face_resolution.min_size}px</span>
</div> </div>
</div> </div>
</div>
{/if} {/if}
</div> </div>
@ -220,7 +222,8 @@
<div class="section-hint">Padding happens when a face is at the border of a photo. It is required to move the subject to the center of the frame.</div> <div class="section-hint">Padding happens when a face is at the border of a photo. It is required to move the subject to the center of the frame.</div>
{#if config.processing.crop.enabled} {#if config.processing.crop.enabled}
<div class="setting-row sub-setting no-border"> <div class="sub-settings-group">
<div class="setting-row no-border">
<label for="max-padding"> <label for="max-padding">
<span class="setting-label">Max Padding</span> <span class="setting-label">Max Padding</span>
<span class="setting-hint">Maximum allowed padding</span> <span class="setting-hint">Maximum allowed padding</span>
@ -240,6 +243,7 @@
<div class="padding-indicator-container"> <div class="padding-indicator-container">
<PaddingIndicator maxPaddingPercent={config.processing.crop.max_padding_percent} /> <PaddingIndicator maxPaddingPercent={config.processing.crop.max_padding_percent} />
</div> </div>
</div>
{/if} {/if}
</div> </div>
@ -254,7 +258,7 @@
</div> </div>
{#if config.processing.brightness.enabled} {#if config.processing.brightness.enabled}
<div class="brightness-visual-control sub-setting"> <div class="brightness-visual-control sub-settings-group">
<div class="brightness-hint"> <div class="brightness-hint">
Discard photos if the face is under/over exposed Discard photos if the face is under/over exposed
</div> </div>
@ -279,7 +283,8 @@
</div> </div>
{#if config.processing.blur.enabled} {#if config.processing.blur.enabled}
<div class="setting-row sub-setting"> <div class="sub-settings-group">
<div class="setting-row">
<label for="min-sharpness"> <label for="min-sharpness">
<span class="setting-label">Min Sharpness</span> <span class="setting-label">Min Sharpness</span>
<span class="setting-hint">Discard blurry faces</span> <span class="setting-hint">Discard blurry faces</span>
@ -296,6 +301,7 @@
<span class="value">{Number(config.processing.blur.min_sharpness).toFixed(0)}</span> <span class="value">{Number(config.processing.blur.min_sharpness).toFixed(0)}</span>
</div> </div>
</div> </div>
</div>
{/if} {/if}
</div> </div>
@ -310,7 +316,8 @@
</div> </div>
{#if config.processing.head_pose.enabled} {#if config.processing.head_pose.enabled}
<div class="setting-row sub-setting"> <div class="sub-settings-group">
<div class="setting-row">
<label for="max-yaw"> <label for="max-yaw">
<span class="setting-label">Max Yaw</span> <span class="setting-label">Max Yaw</span>
<span class="setting-hint">Maximum left/right turn angle</span> <span class="setting-hint">Maximum left/right turn angle</span>
@ -328,7 +335,7 @@
</div> </div>
</div> </div>
<div class="setting-row sub-setting"> <div class="setting-row">
<label for="max-pitch"> <label for="max-pitch">
<span class="setting-label">Max Pitch</span> <span class="setting-label">Max Pitch</span>
<span class="setting-hint">Maximum up/down tilt angle</span> <span class="setting-hint">Maximum up/down tilt angle</span>
@ -345,7 +352,7 @@
<span class="value">{config.processing.head_pose.max_pitch.toFixed(0)}°</span> <span class="value">{config.processing.head_pose.max_pitch.toFixed(0)}°</span>
</div> </div>
</div> </div>
</div>
{/if} {/if}
</div> </div>
@ -360,7 +367,8 @@
</div> </div>
{#if config.processing.eye_filter.enabled} {#if config.processing.eye_filter.enabled}
<div class="setting-row sub-setting"> <div class="sub-settings-group">
<div class="setting-row">
<label for="min-ear"> <label for="min-ear">
<span class="setting-label">Minimum eye opening</span> <span class="setting-label">Minimum eye opening</span>
<span class="setting-hint">Discard image if Eye Aspect Ratio is below this value</span> <span class="setting-hint">Discard image if Eye Aspect Ratio is below this value</span>
@ -380,6 +388,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
{/if} {/if}
</div> </div>
@ -451,7 +460,8 @@
</div> </div>
{#if config.processing.time_interval.enabled} {#if config.processing.time_interval.enabled}
<div class="setting-row sub-setting"> <div class="sub-settings-group">
<div class="setting-row">
<span class="setting-label">Keep at most</span> <span class="setting-label">Keep at most</span>
<div class="setting-control"> <div class="setting-control">
<input <input
@ -475,6 +485,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
{/if} {/if}
</div> </div>
@ -489,7 +500,8 @@
</div> </div>
{#if config.processing.timestamp.enabled} {#if config.processing.timestamp.enabled}
<div class="setting-row sub-setting"> <div class="sub-settings-group">
<div class="setting-row">
<label for="timestamp-position"> <label for="timestamp-position">
<span class="setting-label">Position</span> <span class="setting-label">Position</span>
<span class="setting-hint">Where to place the timestamp</span> <span class="setting-hint">Where to place the timestamp</span>
@ -502,7 +514,7 @@
</select> </select>
</div> </div>
<div class="setting-row sub-setting"> <div class="setting-row">
<span class="setting-label">Date Components</span> <span class="setting-label">Date Components</span>
<div class="toggle-group"> <div class="toggle-group">
<button <button
@ -525,6 +537,7 @@
>Day</button> >Day</button>
</div> </div>
</div> </div>
</div>
{/if} {/if}
</div> </div>
@ -533,7 +546,8 @@
<div class="section-header"> <div class="section-header">
<span class="section-title">Final Image Composition</span> <span class="section-title">Final Image Composition</span>
</div> </div>
<div class="setting-row sub-setting"> <div class="sub-settings-group">
<div class="setting-row">
<label for="eye-distance"> <label for="eye-distance">
<span class="setting-label">Eye Distance</span> <span class="setting-label">Eye Distance</span>
<span class="setting-hint">Distance between eyes as % of image width (larger = zoom in)</span> <span class="setting-hint">Distance between eyes as % of image width (larger = zoom in)</span>
@ -554,6 +568,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</fieldset> </fieldset>
{:else if activeTab === 'video'} {:else if activeTab === 'video'}
<fieldset disabled={disabled || saving}> <fieldset disabled={disabled || saving}>
@ -847,7 +862,7 @@
cursor: pointer; cursor: pointer;
} }
.sub-setting { .sub-settings-group {
padding-left: 1.5rem; padding-left: 1.5rem;
border-left: 2px solid #333; border-left: 2px solid #333;
margin-left: 0.75rem; margin-left: 0.75rem;
@ -936,6 +951,7 @@
font-size: 0.875rem; font-size: 0.875rem;
text-align: center; text-align: center;
-moz-appearance: textfield; -moz-appearance: textfield;
appearance: textfield;
} }
.inline-number::-webkit-inner-spin-button, .inline-number::-webkit-inner-spin-button,