Skip to content

Redesign timeline UI #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Microck wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Redesign timeline UI #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion celstomp/celstomp-app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -884,7 +884,13 @@
safeSetChecked(onion, onionEnabled);
safeSetChecked(psnap, playSnapped);
toggle?.addEventListener("click", () => {
if (isPlaying) pausePlayback(); else startPlayback();
if (isPlaying) {
pausePlayback();
toggle.classList.remove("playing");
} else {
startPlayback();
toggle.classList.add("playing");
}
});
prevF?.addEventListener("click", () => gotoFrame(stepBySnap(-1)));
nextF?.addEventListener("click", () => gotoFrame(stepBySnap(1)));
Expand Down
116 changes: 116 additions & 0 deletions celstomp/css/components/timeline.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,122 @@ body.dragging-cel{ cursor: grabbing; user-select:none; }
#timelineHeader input[type="number"],
#timelineHeader .chip{ min-height:36px; }

.tl-group {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}

.tl-btn-group {
display: flex;
align-items: center;
gap: 2px;
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 2px;
}

.tl-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: #c7d0db;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}

.tl-icon-btn:hover {
background: rgba(255, 255, 255, 0.1);
}

.tl-icon-btn:active {
background: rgba(255, 255, 255, 0.15);
}

.tl-icon-btn.danger:hover {
background: rgba(255, 82, 82, 0.2);
color: #ff5252;
}

.tl-icon-btn svg {
pointer-events: none;
}

.tl-play-btn {
width: 40px;
height: 40px;
background: rgba(0, 229, 255, 0.15);
color: #9fd5ff;
}

.tl-play-btn:hover {
background: rgba(0, 229, 255, 0.25);
}

.tl-play-btn.playing .play-icon { display: none; }
.tl-play-btn.playing .pause-icon { display: block !important; }

.tl-num-input {
width: 60px;
padding: 4px 8px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 6px;
background: rgba(0, 0, 0, 0.28);
color: #e2e8f0;
font-size: 12px;
-moz-appearance: textfield;
}

.tl-num-input::-webkit-outer-spin-button,
.tl-num-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

.tl-num-input-sm {
width: 48px;
padding: 2px 6px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 4px;
background: rgba(0, 0, 0, 0.28);
color: #e2e8f0;
font-size: 11px;
-moz-appearance: textfield;
}

.tl-num-input-sm::-webkit-outer-spin-button,
.tl-num-input-sm::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

.tl-chip {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.2);
font-size: 12px;
color: #c7d0db;
cursor: pointer;
}

.tl-chip input[type="checkbox"] {
margin: 0;
}

.tl-opts-group {
background: transparent;
}

.tlMobArrow{ display:none; }

@media (max-width: 900px){
Expand Down
86 changes: 58 additions & 28 deletions celstomp/parts/timeline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,47 +8,77 @@ document.getElementById('part-timeline').innerHTML = `
aria-expanded="false">▴</button>


<div class="left">
<div class="left tl-group">
<strong>Timeline</strong>
<span class="badge" id="timeCounter">0s+0f</span>
<span class="badge">Loop <input id="loopToggle" type="checkbox" checked
style="vertical-align:middle; margin-left:6px;" /></span>
<button id="insertFrameBtn" class="miniBtn" title="Insert Frame">+</button>
<button id="deleteFrameBtn" class="miniBtn danger" title="Delete Frame">−</button>
<input id="gotoFrameInput" type="number" min="1" class="gotoFrameInput" placeholder="Frame #"
title="Jump to frame" />
<button id="gotoFrameBtn" class="miniBtn">Go</button>
<div class="tl-btn-group">
<button id="insertFrameBtn" class="tl-icon-btn" title="Insert Frame">
<svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
<button id="deleteFrameBtn" class="tl-icon-btn danger" title="Delete Frame">
<svg viewBox="0 0 24 24" width="16" height="16"><path d="M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
</div>
<input id="gotoFrameInput" type="number" min="1" class="tl-num-input" placeholder="#" title="Jump to frame" />
<button id="gotoFrameBtn" class="tl-icon-btn" title="Go to frame">
<svg viewBox="0 0 24 24" width="16" height="16"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>


<div class="center" id="tlHeaderCenter">
<button id="tlPrevCel">◀︎ Cel</button>
<button id="tlPrevFrame">◀︎ Frame</button>
<button id="tlPlayToggle">▶︎ / ⏸</button>
<button id="tlNextFrame">Frame ▶︎</button>
<button id="tlNextCel">Cel ▶︎</button>
<div class="center tl-group" id="tlHeaderCenter">
<div class="tl-btn-group">
<button id="tlPrevCel" class="tl-icon-btn" title="Previous Cel">
<svg viewBox="0 0 24 24" width="16" height="16"><path d="M11 17l-5-5 5-5M18 17l-5-5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button id="tlPrevFrame" class="tl-icon-btn" title="Previous Frame">
<svg viewBox="0 0 24 24" width="16" height="16"><path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button id="tlPlayToggle" class="tl-icon-btn tl-play-btn" title="Play/Pause">
<svg class="play-icon" viewBox="0 0 24 24" width="18" height="18"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>
<svg class="pause-icon" viewBox="0 0 24 24" width="18" height="18" style="display:none"><path d="M6 4h4v16H6zM14 4h4v16h-4z" fill="currentColor"/></svg>
</button>
<button id="tlNextFrame" class="tl-icon-btn" title="Next Frame">
<svg viewBox="0 0 24 24" width="16" height="16"><path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button id="tlNextCel" class="tl-icon-btn" title="Next Cel">
<svg viewBox="0 0 24 24" width="16" height="16"><path d="M13 17l5-5-5-5M6 17l5-5-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>
</div>

<div class="right">
<div class="right tl-group">
<div class="tl-btn-group">
<label class="tl-chip"><input id="tlOnion" type="checkbox" /> Onion</label>
<button id="tlDupCel" class="tl-icon-btn" title="Duplicate Cel">
<svg viewBox="0 0 24 24" width="16" height="16"><rect x="8" y="8" width="12" height="12" rx="2" stroke="currentColor" stroke-width="2" fill="none"/><path d="M4 16V6a2 2 0 012-2h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
</div>

<label><input id="tlOnion" type="checkbox" /> Onion</label>
<button id="tlDupCel">Duplicate Cel</button>
<div class="tl-btn-group tl-opts-group">
<label class="tl-chip"><span>Snap</span><input id="tlSnap" type="number" min="1" class="tl-num-input-sm" /></label>
<label class="tl-chip"><input id="tlPlaySnapped" type="checkbox" /> Snapped</label>
</div>

<label for="tlSnap">Snap (frames)</label>
<input id="tlSnap" type="number" min="1" style="width:70px;" />
<label><input id="tlPlaySnapped" type="checkbox" /> Play snapped</label>
<div class="tl-btn-group tl-opts-group">
<label class="tl-chip"><span>Sec</span><input id="tlSeconds" type="number" min="1" class="tl-num-input-sm" /></label>
<label class="tl-chip"><span>FPS</span><input id="tlFps" type="number" min="1" class="tl-num-input-sm" /></label>
</div>

<label for="tlSeconds">Seconds</label>
<input id="tlSeconds" type="number" min="1" style="width:70px;" />
<div class="tl-btn-group">
<button id="zoomTimelineOut" class="tl-icon-btn" title="Zoom Out">
<svg viewBox="0 0 24 24" width="16" height="16"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2" fill="none"/><path d="M8 11h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
<button id="zoomTimelineIn" class="tl-icon-btn" title="Zoom In">
<svg viewBox="0 0 24 24" width="16" height="16"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2" fill="none"/><path d="M8 11h6M11 8v6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
</div>

<label for="tlFps">FPS</label>
<input id="tlFps" type="number" min="1" style="width:70px;" />

<button id="zoomTimelineOut" class="miniBtn" title="Zoom Out">−</button>
<span class="timelineZoom">Zoom</span>
<button id="zoomTimelineIn" class="miniBtn" title="Zoom In">+</button>

<button id="hideTimelineBtn">—</button>
<button id="hideTimelineBtn" class="tl-icon-btn" title="Hide Timeline">
<svg viewBox="0 0 24 24" width="16" height="16"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
</div>
</div>

Expand Down