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

Custom workspace dropdown + Launch-Unreal button

Browse Source 
Replace the ugly native <select> on the connect screen with a themed
custom dropdown (Select component). Add a Launch-Unreal button that appears
when the chosen working folder contains a .uproject: backend find_uproject
resolves the scope to disk and searches it (and one level down); the button
opens the project via the opener plugin. Bundled the UE icon (currentColor,
so white-on-dark / black-on-light per theme). New strings translated.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Bonchellon
2026-07-07 15:28:17 +03:00
parent 4249d5ba66
commit d9f99bc58b
6 changed files with 157 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/App.css
View File

@ -248,6 +248,41 @@ body.resizing{cursor:col-resize!important;user-select:none}
cursor:pointer;font-size:12px;font-variant-numeric:tabular-nums}
.zval:hover{border-color:var(--accent)}
/* custom dropdown (replaces native <select>) */
.xsel{position:relative}
.xsel-trig{display:flex;align-items:center;gap:9px;width:100%;background:var(--input-bg);border:1px solid var(--border);
border-radius:10px;padding:10px 12px;cursor:pointer;color:var(--txt);font-family:var(--font);font-size:13px;text-align:left}
.xsel-trig:hover,.xsel.open .xsel-trig{border-color:var(--accent)}
.xsel.open .xsel-trig{box-shadow:0 0 0 3px rgba(124,110,246,.15)}
.xsel-trig > svg{width:15px;height:15px;color:var(--faint);flex:0 0 auto}
.xsel-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xsel-ph{color:var(--faint)}
.xsel-chev{flex:0 0 auto;color:var(--faint);display:grid;place-items:center;transition:transform .18s}
.xsel-chev svg{width:15px;height:15px}
.xsel.open .xsel-chev{transform:rotate(180deg)}
.xsel-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:200;max-height:264px;overflow-y:auto;padding:5px;
background:var(--elevated);border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 48px -14px rgba(0,0,0,.5);animation:updin .16s ease}
.xsel-empty{padding:12px;text-align:center;color:var(--faint);font-size:12.5px}
.xsel-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;cursor:pointer}
.xsel-item:hover{background:var(--hover)}
.xsel-item.on{background:rgba(124,110,246,.12)}
.xsel-ic{width:15px;flex:0 0 auto;display:grid;place-items:center;color:var(--accent-2)}
.xsel-ic svg{width:13px;height:13px}
.xsel-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.xsel-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xsel-sub{font-size:11px;color:var(--faint);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Launch-Unreal button (white icon on black / black on white per theme) */
.ue-btn{display:flex;align-items:center;gap:9px;flex:0 0 auto;align-self:center;height:40px;margin:0 8px;padding:0 15px;
border:none;border-radius:11px;cursor:pointer;background:var(--txt);color:var(--win-a);transition:filter .15s,transform .06s}
.ue-btn:hover{filter:brightness(1.12)}
.ue-btn:active{transform:scale(.97)}
.ue-ic{width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center}
.ue-ic svg{width:24px;height:24px}
.ue-lbl{display:flex;flex-direction:column;line-height:1.12;text-align:left}
.ue-a{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;opacity:.72}
.ue-b{font-size:13px;font-weight:700}
/* bottom status bar (always visible) + hover log peek */
.statusbar{flex:0 0 26px;display:flex;align-items:center;gap:10px;padding:0 12px;border-top:1px solid var(--border);
background:var(--bar);font-size:11.5px;color:var(--muted);position:relative;user-select:none;z-index:60}