Administrator/Twitch-VOD-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 212 Wiki Activity

cleanup: .clip-template-wrap.shown modifier — kills inline display:none + style.display toggle

Browse Source 
The clip-cutter modal's custom-template wrap (.clip-template-wrap) was hidden by default via inline style="display:none;" in HTML and shown/hidden by updateFilenameTemplateVisibility() via wrap.style.display = 'block' / 'none' based on the selected filename format.

Moved both into CSS: the base rule now sets display:none, and a .shown modifier flips to display:block. The renderer toggles the class via classList.toggle('shown', ...) instead of poking at .style.display, and the HTML drops its inline style attribute.

Same pattern as 4.6.126 (.queue-details.expanded). Two inline style references gone.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 10:04:25 +02:00
parent 19555ce872
commit 479e861789
3 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.html
View File

@ -99,7 +99,7 @@
<span id="formatTemplate" class="clip-radio-label">{date}_{part}.mp4 (benutzerdefiniert)</span> <span id="formatTemplate" class="clip-radio-label">{date}_{part}.mp4 (benutzerdefiniert)</span>
</label> </label>
<div id="clipFilenameTemplateWrap" class="clip-template-wrap" style="display:none;"> <div id="clipFilenameTemplateWrap" class="clip-template-wrap">
<input type="text" id="clipFilenameTemplate" value="{date}_{part}.mp4" placeholder="{date}_{part}.mp4" class="clip-modal-template-input" oninput="updateFilenameExamples()"> <input type="text" id="clipFilenameTemplate" value="{date}_{part}.mp4" placeholder="{date}_{part}.mp4" class="clip-modal-template-input" oninput="updateFilenameExamples()">
<div id="clipTemplateHelp" class="clip-modal-hint">Platzhalter: {title} {id} {channel} {date} {part} {trim_start} {trim_end} {trim_length} {date_custom="yyyy-MM-dd"}</div> <div id="clipTemplateHelp" class="clip-modal-hint">Platzhalter: {title} {id} {channel} {date} {part} {trim_start} {trim_end} {trim_length} {date_custom="yyyy-MM-dd"}</div>
<div id="clipTemplateLint" class="template-lint ok">Template-Check: OK</div> <div id="clipTemplateLint" class="template-lint ok">Template-Check: OK</div>

2
src/renderer.ts
View File

@ -975,7 +975,7 @@ function getSelectedFilenameFormat(): 'simple' | 'timestamp' | 'template' | 'par
function updateFilenameTemplateVisibility(): void { function updateFilenameTemplateVisibility(): void {
const selected = getSelectedFilenameFormat(); const selected = getSelectedFilenameFormat();
const wrap = byId('clipFilenameTemplateWrap'); const wrap = byId('clipFilenameTemplateWrap');
wrap.style.display = selected === 'template' ? 'block' : 'none'; wrap.classList.toggle('shown', selected === 'template');
} }
interface TemplatePreviewContext { interface TemplatePreviewContext {

5
src/styles.css
View File

@ -338,9 +338,14 @@ body {
} }
.clip-template-wrap { .clip-template-wrap {
display: none;
margin-top: 10px; margin-top: 10px;
} }
.clip-template-wrap.shown {
display: block;
}
/* Template-Guide button below the clip-template input — small offset /* Template-Guide button below the clip-template input — small offset
from the lint badge that sits directly above it. Was a one-off from the lint badge that sits directly above it. Was a one-off
inline style on the button. */ inline style on the button. */