ExbytePublicServices/exbyte-depot-viewer-perforce
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 19 Wiki Activity

Add animated startup splash + live server transfer dialog

Browse Source 
Splash: pulsing logo, client->server packet-flow animation, cycling
status steps and a shimmer bar, shown for ~1s while the session restores.

Transfer progress: the backend now streams p4 sync/submit stdout line by
line (throttled ~25fps) and emits p4-transfer events; the frontend shows a
P4V-style progress dialog (op title, current file, file count, animated
bar) that only appears once an operation runs past ~400ms. Replaces the old
submit-only modal. All new strings translated (5 langs).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Bonchellon
2026-07-07 14:50:46 +03:00
parent a67c171315
commit 15140918ad
4 changed files with 217 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/App.css
View File

@ -285,6 +285,45 @@ body.resizing{cursor:col-resize!important;user-select:none}
.logcmd{color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logcount{margin-left:auto;flex:0 0 auto;color:var(--faint);white-space:nowrap}
.logrow.err .logcount{color:var(--del)}
/* animated startup splash */
.splash{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px;animation:updin .5s ease}
.splash-logo{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;color:#fff;
background:linear-gradient(145deg,var(--accent-2),var(--accent-deep));animation:splpulse 1.8s ease-in-out infinite}
.splash-logo svg{width:34px;height:34px}
@keyframes splpulse{0%,100%{transform:scale(1);box-shadow:0 0 40px rgba(124,110,246,.5)}50%{transform:scale(1.06);box-shadow:0 0 62px rgba(124,110,246,.85)}}
.flow{display:flex;align-items:center;margin-top:2px}
.flow .node{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--muted);background:var(--panel);border:1px solid var(--border);flex:0 0 auto}
.flow .node svg{width:22px;height:22px}
.wire{position:relative;width:150px;height:2px;background:linear-gradient(90deg,var(--border),var(--accent),var(--border))}
.packet{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:var(--accent-2);
box-shadow:0 0 10px var(--accent);transform:translateY(-50%);animation:travel 1.7s linear infinite;opacity:0}
@keyframes travel{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
.splash-title{font-size:20px;font-weight:700;letter-spacing:.3px;margin-top:6px}
.splash-step{font-size:12.5px;color:var(--muted);min-height:16px}
.splash-bar{width:220px;height:4px;border-radius:3px;background:var(--panel-3);overflow:hidden;position:relative}
.splash-bar span{position:absolute;top:0;left:-40%;width:40%;height:100%;border-radius:3px;
background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:shim 1.3s ease-in-out infinite}
@keyframes shim{0%{left:-40%}100%{left:100%}}
/* server transfer progress dialog (P4V-style) */
.xfer-back{backdrop-filter:blur(2px)}
.xfer{width:390px;max-width:calc(100vw - 40px);background:var(--elevated);border:1px solid var(--border);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow);animation:updin .3s ease}
.xfer-head{display:flex;align-items:center;gap:13px}
.xfer-ic{width:42px;height:42px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;color:#fff}
.xfer-ic.up{background:linear-gradient(145deg,var(--accent-2),var(--accent-deep));box-shadow:0 0 22px rgba(124,110,246,.55)}
.xfer-ic.down{background:linear-gradient(145deg,var(--add),#1f9f6e);box-shadow:0 0 22px rgba(62,207,142,.45)}
.xfer-ic svg{width:22px;height:22px;animation:xbob 1.2s ease-in-out infinite}
@keyframes xbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.xfer-ic.down svg{animation:xbobd 1.2s ease-in-out infinite}
@keyframes xbobd{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.xfer-ttl{display:flex;flex-direction:column;gap:2px;min-width:0}
.xfer-ttl b{font-size:14.5px}
.xfer-ttl span{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.xfer-file{margin-top:14px;font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xfer-bar{margin-top:12px;height:6px;border-radius:4px;background:var(--panel-3);overflow:hidden;position:relative}
.xfer-bar span{position:absolute;top:0;left:-35%;width:35%;height:100%;border-radius:4px;
background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:shim 1.1s ease-in-out infinite}
.tzone.push .ic{color:var(--add)}
.tzone.push .val{color:var(--add)}
.commit .row{display:flex;gap:10px;align-items:center}