dokril/ProxyWarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Move admin prompt to fixed footer and adjust layout

Browse Source
This commit is contained in:
Dokril
2026-07-08 13:47:57 +03:00
parent 838dea0e03
commit 32ee151a31
2 changed files with 66 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/App.tsx
View File

@@ -228,6 +228,7 @@ export function App() {
[appliedSnapshot, currentSnapshot], [appliedSnapshot, currentSnapshot],
); );
const hasUnappliedChanges = pendingChanges.length > 0; const hasUnappliedChanges = pendingChanges.length > 0;
const hasAdminPrompt = Boolean(adminStatus?.canRestartElevated);
const shellStyle = hasUnappliedChanges const shellStyle = hasUnappliedChanges
? ({ '--change-row-count': String(pendingChanges.length) } as CSSProperties) ? ({ '--change-row-count': String(pendingChanges.length) } as CSSProperties)
: undefined; : undefined;
@@ -964,16 +965,16 @@ export function App() {
} }
function renderAdminPrompt() { function renderAdminPrompt() {
if (!adminStatus?.canRestartElevated) return null; if (!hasAdminPrompt) return null;
return ( return (
<aside className="admin-prompt" aria-label="Права администратора"> <aside className="admin-prompt" aria-label="Права администратора">
<span className="admin-prompt-icon" aria-hidden="true"> <span className="admin-prompt-icon" aria-hidden="true">
<ShieldAlert size={18} strokeWidth={1.9} /> <ShieldAlert size={15} strokeWidth={1.9} />
</span> </span>
<div className="admin-prompt-copy"> <div className="admin-prompt-copy">
<strong>Один запрос прав вместо серии UAC</strong> <strong>Права администратора</strong>
<span>{adminStatus.message}</span> <span>{adminStatus?.message}</span>
</div> </div>
<Button <Button
type="button" type="button"
@@ -1646,7 +1647,14 @@ export function App() {
} }
return ( return (
<main className={`simple-shell ${hasUnappliedChanges ? 'has-change-dock' : ''}`} style={shellStyle}> <main
className={[
'simple-shell',
hasUnappliedChanges ? 'has-change-dock' : '',
hasAdminPrompt ? 'has-admin-prompt' : '',
].filter(Boolean).join(' ')}
style={shellStyle}
>
<section className="simple-panel"> <section className="simple-panel">
<header className="simple-header"> <header className="simple-header">
<div> <div>
@@ -1666,7 +1674,6 @@ export function App() {
</header> </header>
{renderTabs()} {renderTabs()}
{renderAdminPrompt()}
<div className={`tab-panel-frame swipe-${tabTransitionDirection}`} key={activePanel}> <div className={`tab-panel-frame swipe-${tabTransitionDirection}`} key={activePanel}>
{renderActivePanel()} {renderActivePanel()}
</div> </div>
@@ -1681,6 +1688,7 @@ export function App() {
onToggle={() => setIsLogOpen((current) => !current)} onToggle={() => setIsLogOpen((current) => !current)}
formatTime={formatLogTime} formatTime={formatLogTime}
/> />
{renderAdminPrompt()}
</main> </main>
); );
} }

73
src/styles/app.css
View File

@@ -1,6 +1,7 @@
:root { :root {
--app-footer-height: 54px; --app-footer-height: 54px;
--app-change-dock-height: 0px; --app-change-dock-height: 0px;
--app-admin-prompt-height: 0px;
--change-row-count: 1; --change-row-count: 1;
--app-header-row-height: 50px; --app-header-row-height: 50px;
--app-tab-height: 46px; --app-tab-height: 46px;
@@ -762,18 +763,22 @@ button:disabled {
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
background: #101216; background: #101216;
padding: var(--app-header-height) 0 calc(var(--app-footer-height) + var(--app-change-dock-height)); padding: var(--app-header-height) 0 calc(var(--app-footer-height) + var(--app-change-dock-height) + var(--app-admin-prompt-height));
} }
.simple-shell.has-change-dock { .simple-shell.has-change-dock {
--app-change-dock-height: clamp(60px, calc(20px + (var(--change-row-count) * 26px)), 220px); --app-change-dock-height: clamp(60px, calc(20px + (var(--change-row-count) * 26px)), 220px);
} }
.simple-shell.has-admin-prompt {
--app-admin-prompt-height: 56px;
}
.simple-panel { .simple-panel {
display: grid; display: grid;
align-content: start; align-content: start;
min-height: 0; min-height: 0;
height: calc(100vh - var(--app-header-height) - var(--app-footer-height) - var(--app-change-dock-height)); height: calc(100vh - var(--app-header-height) - var(--app-footer-height) - var(--app-change-dock-height) - var(--app-admin-prompt-height));
width: 100%; width: 100%;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
@@ -906,24 +911,30 @@ button:disabled {
} }
.admin-prompt { .admin-prompt {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 40;
display: grid; display: grid;
grid-template-columns: auto minmax(0, 1fr) auto; grid-template-columns: auto minmax(0, 1fr) auto;
gap: 10px; gap: 8px;
align-items: center; align-items: center;
height: var(--app-admin-prompt-height);
min-width: 0; min-width: 0;
border: 1px solid rgba(245, 158, 11, 0.44); border-top: 1px solid rgba(245, 158, 11, 0.38);
border-radius: 4px; background: #17150f;
background: rgba(120, 53, 15, 0.18); box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
margin-bottom: 10px; margin: 0;
padding: 8px 10px; padding: 5px 14px;
} }
.admin-prompt-icon { .admin-prompt-icon {
display: grid; display: grid;
place-items: center; place-items: center;
width: 32px; width: 26px;
min-width: 32px; min-width: 26px;
height: 32px; height: 26px;
border: 1px solid rgba(245, 158, 11, 0.28); border: 1px solid rgba(245, 158, 11, 0.28);
border-radius: 4px; border-radius: 4px;
background: rgba(15, 23, 42, 0.42); background: rgba(15, 23, 42, 0.42);
@@ -932,24 +943,31 @@ button:disabled {
.admin-prompt-copy { .admin-prompt-copy {
display: grid; display: grid;
gap: 2px; gap: 1px;
min-width: 0; min-width: 0;
} }
.admin-prompt-copy strong { .admin-prompt-copy strong {
color: #f8fafc; color: #f8fafc;
font-size: 13px; font-size: 12px;
font-weight: 800; font-weight: 800;
line-height: 1.25;
white-space: nowrap;
} }
.admin-prompt-copy span { .admin-prompt-copy span {
display: -webkit-box;
color: #c7b489; color: #c7b489;
font-size: 12px; font-size: 11px;
overflow-wrap: anywhere; line-height: 1.25;
overflow: hidden;
white-space: normal;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
} }
.admin-prompt-action { .admin-prompt-action {
min-width: 230px; min-width: 190px;
white-space: nowrap; white-space: nowrap;
} }
@@ -2081,7 +2099,7 @@ button.summary-card:hover {
.changes-dock { .changes-dock {
position: fixed; position: fixed;
right: 0; right: 0;
bottom: var(--app-footer-height); bottom: calc(var(--app-footer-height) + var(--app-admin-prompt-height));
left: 0; left: 0;
z-index: 38; z-index: 38;
display: grid; display: grid;
@@ -2511,7 +2529,7 @@ button.summary-card:hover {
.log-dock { .log-dock {
position: fixed; position: fixed;
right: 0; right: 0;
bottom: 0; bottom: var(--app-admin-prompt-height);
left: 0; left: 0;
z-index: 40; z-index: 40;
display: grid; display: grid;
@@ -2774,15 +2792,19 @@ button.summary-card:hover {
@media (max-width: 680px) { @media (max-width: 680px) {
.simple-shell { .simple-shell {
padding: var(--app-header-height) 0 calc(var(--app-footer-height) + var(--app-change-dock-height)); padding: var(--app-header-height) 0 calc(var(--app-footer-height) + var(--app-change-dock-height) + var(--app-admin-prompt-height));
} }
.simple-shell.has-change-dock { .simple-shell.has-change-dock {
--app-change-dock-height: clamp(104px, calc(82px + (var(--change-row-count) * 25px)), 260px); --app-change-dock-height: clamp(104px, calc(82px + (var(--change-row-count) * 25px)), 260px);
} }
.simple-shell.has-admin-prompt {
--app-admin-prompt-height: 92px;
}
.simple-panel { .simple-panel {
height: calc(100vh - var(--app-header-height) - var(--app-footer-height) - var(--app-change-dock-height)); height: calc(100vh - var(--app-header-height) - var(--app-footer-height) - var(--app-change-dock-height) - var(--app-admin-prompt-height));
padding: 12px 12px 16px; padding: 12px 12px 16px;
} }
@@ -2790,6 +2812,15 @@ button.summary-card:hover {
grid-template-columns: auto minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr);
align-items: start; align-items: start;
gap: 8px; gap: 8px;
padding: 8px 10px;
}
.admin-prompt-copy span {
display: -webkit-box;
overflow: hidden;
white-space: normal;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
} }
.admin-prompt-action { .admin-prompt-action {
@@ -3044,7 +3075,7 @@ button.summary-card:hover {
.log-dock { .log-dock {
position: fixed; position: fixed;
right: 0; right: 0;
bottom: 0; bottom: var(--app-admin-prompt-height);
left: 0; left: 0;
grid-template-columns: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr) auto;
margin: 0; margin: 0;