Rebuild the work-package side panel in the style of MS Planner
The auto-hiding drawer was the wrong model — a list you navigate by shouldn't appear and disappear under the pointer, and its vertical text tab read as a stray artifact. Replaced with a persistent side panel following the Planner reference: - Collapse toggle at the top (the panel glyph, arrow flips), remembered across visits. Collapsed leaves a 56px icon rail where the coloured package badges are still clickable, rather than hiding the list entirely. - One primary action: "+ New work package" with a split caret for Duplicate, Split by discipline and Export all. - Icon nav with counts: My packages (owned by you), All packages, Needs attention (on hold or not release-ready), Dashboard. These filter the list below. - Packages as rows with a colour-coded initial badge, number, subject and readiness state, still grouped by status, with a left accent bar on the current package. The badge colour is hashed from the WP number, so a package keeps its swatch instead of shuffling when another is added or deleted. - The panel sits IN the layout: the form and the full-width chrome shift beside it rather than being overlaid. Also, the reason it appeared as loose unstyled widgets in the middle of the form: the panel's markup and its stylesheet are cached independently, so a browser can run new markup against old CSS. Its essential layout (fixed position, width, the row/badge flex, the collapsed rules) is now injected by wp-creation-app.js as a floor, inserted first in <head> so the stylesheet still wins on everything it defines. Same lesson as the iframe: a component whose CSS-missing state is "broken" rather than "plain" must carry its own critical layout. Verified with 25 driven checks in headless Chrome: persistence, the four nav links, badge colours and text, view filtering, collapse/expand, the split menu, row selection and highlighting — and, with wp-creation-styles.css removed from the page entirely, the panel is still a fixed 288px side panel with the form shifted beside it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -105,7 +105,8 @@
|
||||
width away from the form — which matters most when this page is embedded in the
|
||||
suite's tab and every pixel is shared with the app chrome. */
|
||||
.wp-layout { display: block; width: 100%; margin: 0; }
|
||||
.main { min-width: 0; max-width: none; margin: 0; padding: 22px 28px 72px var(--gutter,34px);
|
||||
.main { min-width: 0; max-width: none; margin: 0;
|
||||
padding: 22px 28px 72px calc(var(--nav-w,288px) + 28px);
|
||||
transition: padding-left .18s ease; }
|
||||
|
||||
.section { display: none; }
|
||||
@@ -438,7 +439,7 @@
|
||||
border-radius:var(--radius); padding:7px 10px; font-size:11px; }
|
||||
|
||||
/* ── CREATION TOOL ───────────────────────────────────────────────── */
|
||||
.ctx-bar { max-width:none; margin:0; padding:12px 28px 12px var(--gutter,34px); display:flex; align-items:center; gap:20px;
|
||||
.ctx-bar { max-width:none; margin:0; padding:12px 28px 12px calc(var(--nav-w,288px) + 28px); display:flex; align-items:center; gap:20px;
|
||||
border-bottom:1px solid var(--border); background:var(--surface); flex-wrap:wrap; }
|
||||
.ctx-empty { color:var(--text-muted); font-size:13px; }
|
||||
.ctx-main .ctx-proj { font-weight:700; color:var(--text); font-size:14px; }
|
||||
@@ -474,7 +475,7 @@
|
||||
|
||||
/* ── WORK PACKAGE FORM ───────────────────────────────────────────── */
|
||||
.sop-hint { color:var(--accent) !important; }
|
||||
.release-banner { max-width:none; margin:0; padding:0 28px 0 var(--gutter,34px); }
|
||||
.release-banner { max-width:none; margin:0; padding:0 28px 0 calc(var(--nav-w,288px) + 28px); }
|
||||
.release-banner .rb-inner { margin-top:14px; border-radius:var(--radius); padding:11px 16px; font-size:13px; font-weight:600;
|
||||
display:flex; align-items:center; gap:10px; }
|
||||
.rb-ready { background:var(--accent-green-dim); color:var(--accent-green); border:1px solid #b6e3c6; }
|
||||
@@ -582,7 +583,7 @@
|
||||
|
||||
/* Section nav (jump chips) */
|
||||
.section-nav-bar{ position:sticky; top:0; z-index:30; display:flex; flex-wrap:wrap; gap:6px;
|
||||
padding:8px 12px 8px var(--gutter,34px); background:rgba(255,255,255,.94); backdrop-filter:blur(4px);
|
||||
padding:8px 12px 8px calc(var(--nav-w,288px) + 28px); background:rgba(255,255,255,.94); backdrop-filter:blur(4px);
|
||||
border-bottom:1px solid var(--border); box-shadow:0 1px 4px rgba(20,30,50,.06);
|
||||
transition:transform .22s ease; }
|
||||
.section-nav-bar:empty{ display:none; }
|
||||
@@ -649,108 +650,164 @@
|
||||
font-weight:700; letter-spacing:.02em; color:var(--red); background:var(--red-dim);
|
||||
border:1px solid #ffc4c4; white-space:nowrap; vertical-align:middle; }
|
||||
|
||||
/* ── WP NAVIGATOR — auto-hiding drawer ─────────────────────────────────────
|
||||
Was a fixed 262px column, which (a) stole width from the form and (b) vanished
|
||||
entirely under 1100px — so embedded in the suite tab it was never visible at
|
||||
all. Now it slides in over the content from a slim edge handle: hover (or tap)
|
||||
the handle to open, move away to close, or pin it open if you'd rather it stay.
|
||||
Nothing is taken from the form unless you pin it. */
|
||||
/* -- WORK PACKAGE NAVIGATOR ------------------------------------------------
|
||||
A persistent side panel in the spirit of MS Planner: collapse toggle, one
|
||||
primary action, icon nav, then the packages as rows with colour-coded initial
|
||||
badges and a highlighted current row. It sits IN the layout (the form shifts
|
||||
across) rather than hovering over the content, and collapses to a 56px icon
|
||||
rail so you can still see and switch packages with it closed. */
|
||||
.wp-nav {
|
||||
position: fixed;
|
||||
top: var(--rail-top, 0px);
|
||||
top: var(--rail-top, 48px);
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 300px;
|
||||
max-width: 86vw;
|
||||
width: var(--nav-w, 288px);
|
||||
z-index: 120;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--surface);
|
||||
border-right: 1px solid var(--border-strong);
|
||||
box-shadow: 6px 0 22px rgba(20,30,50,.16);
|
||||
transform: translateX(-100%);
|
||||
transition: transform .18s ease;
|
||||
background: #fbfbfc;
|
||||
border-right: 1px solid var(--border);
|
||||
overflow: hidden;
|
||||
transition: width .16s ease;
|
||||
}
|
||||
body.wp-nav-open .wp-nav,
|
||||
body.wp-nav-pinned .wp-nav { transform: none; }
|
||||
/* Pinned: no shadow (it's part of the layout now) and the form shifts over. */
|
||||
body.wp-nav-pinned .wp-nav { box-shadow: none; }
|
||||
body { --nav-w: 288px; }
|
||||
body.wp-nav-collapsed { --nav-w: 56px; }
|
||||
|
||||
/* The always-visible edge handle. Vertical so it costs ~26px of width. */
|
||||
.wp-nav-handle {
|
||||
position: fixed;
|
||||
top: calc(var(--rail-top, 0px) + 14px);
|
||||
left: 0;
|
||||
z-index: 119;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 12px 5px;
|
||||
writing-mode: vertical-rl;
|
||||
background: var(--surface);
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-left: 0;
|
||||
border-radius: 0 5px 5px 0;
|
||||
box-shadow: 2px 0 8px rgba(20,30,50,.10);
|
||||
font: inherit;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
/* -- collapse toggle -- */
|
||||
.wp-nav-top { display: flex; align-items: center; padding: 8px 10px 2px; }
|
||||
.wp-nav-toggle {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 34px; height: 34px; padding: 0;
|
||||
background: transparent; border: 1px solid transparent; border-radius: 5px;
|
||||
color: var(--text-muted); cursor: pointer;
|
||||
}
|
||||
.wp-nav-handle:hover { color: var(--accent); border-color: var(--accent); }
|
||||
.wp-nav-handle .wp-nav-handle-count {
|
||||
writing-mode: horizontal-tb; font-size: 10px; font-weight: 700; letter-spacing: 0;
|
||||
background: var(--accent-dim); color: var(--accent); border-radius: 8px; padding: 0 5px;
|
||||
.wp-nav-toggle:hover { background: #eef0f3; color: var(--text); }
|
||||
/* Arrow flips to point right when the panel is closed. */
|
||||
body.wp-nav-collapsed .wp-nav-toggle-arrow { transform: rotate(180deg); transform-origin: 11px 10px; }
|
||||
|
||||
/* -- primary action -- */
|
||||
.wp-nav-primary { position: relative; display: flex; gap: 2px; padding: 6px 10px 12px; }
|
||||
.wp-nav-cta {
|
||||
flex: 1 1 auto; min-width: 0;
|
||||
display: inline-flex; align-items: center; justify-content: flex-start; gap: 9px;
|
||||
height: 40px; padding: 0 14px;
|
||||
background: var(--accent); color: #fff;
|
||||
border: 0; border-radius: 6px 0 0 6px;
|
||||
font: inherit; font-size: 14px; font-weight: 600;
|
||||
cursor: pointer; white-space: nowrap;
|
||||
}
|
||||
body.wp-nav-open .wp-nav-handle,
|
||||
body.wp-nav-pinned .wp-nav-handle { display: none; }
|
||||
.wp-nav-cta:hover { background: #0353e9; }
|
||||
.wp-nav-cta-plus { font-size: 17px; font-weight: 400; line-height: 1; }
|
||||
.wp-nav-cta-more {
|
||||
flex: 0 0 auto; width: 30px; height: 40px;
|
||||
background: var(--accent); color: #fff; border: 0; border-left: 1px solid rgba(255,255,255,.28);
|
||||
border-radius: 0 6px 6px 0; font: inherit; font-size: 12px; cursor: pointer;
|
||||
}
|
||||
.wp-nav-cta-more:hover { background: #0353e9; }
|
||||
.wp-nav-menu {
|
||||
position: absolute; top: calc(100% - 6px); left: 10px; right: 10px; z-index: 10;
|
||||
background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px;
|
||||
box-shadow: 0 10px 26px rgba(20,30,50,.18); padding: 5px 0;
|
||||
}
|
||||
.wp-nav-menu[hidden] { display: none; }
|
||||
.wp-nav-menu button {
|
||||
display: block; width: 100%; text-align: left; background: none; border: 0;
|
||||
padding: 8px 12px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer;
|
||||
}
|
||||
.wp-nav-menu button:hover { background: var(--surface2); }
|
||||
|
||||
.wp-nav-head { display:flex; align-items:center; gap:8px; padding:12px 12px 8px; }
|
||||
.wp-nav-title { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
|
||||
.wp-nav-count { color:var(--text-dim); font-weight:600; letter-spacing:0; }
|
||||
.wp-nav-btn { background:transparent; border:1px solid var(--border); border-radius:4px;
|
||||
color:var(--text-muted); cursor:pointer; font-size:13px; line-height:1; padding:3px 7px; }
|
||||
.wp-nav-btn:hover { border-color:var(--accent); color:var(--accent); }
|
||||
.wp-nav-btn.is-on { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
|
||||
.wp-nav-head .wp-nav-btn:first-of-type { margin-left:auto; }
|
||||
.wp-nav-search { margin:0 12px 10px; padding:6px 9px; font-size:12px; font-family:inherit;
|
||||
border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); }
|
||||
.wp-nav-search:focus { outline:none; border-color:var(--accent); }
|
||||
.wp-nav-list { flex:1 1 auto; overflow-y:auto; padding:0 8px 8px; }
|
||||
.wp-nav-group { font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
|
||||
color:var(--text-dim); padding:10px 6px 5px; }
|
||||
.wp-nav-item { display:block; width:100%; text-align:left; background:transparent; border:0;
|
||||
border-left:3px solid transparent; border-radius:4px; padding:6px 8px; cursor:pointer;
|
||||
font-family:inherit; color:var(--text); }
|
||||
.wp-nav-item:hover { background:var(--surface2); }
|
||||
.wp-nav-item.active { background:var(--accent-dim); border-left-color:var(--accent); }
|
||||
.wp-nav-num { display:block; font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent); }
|
||||
.wp-nav-subj { display:block; font-size:12px; color:var(--text-muted); line-height:1.35;
|
||||
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.wp-nav-meta { display:flex; align-items:center; gap:6px; margin-top:3px; font-size:10px; color:var(--text-dim); }
|
||||
.wp-nav-dot { width:7px; height:7px; border-radius:50%; background:var(--text-dim); flex:0 0 auto; }
|
||||
.wp-nav-dot.ok { background:var(--accent-green); }
|
||||
.wp-nav-dot.open { background:var(--accent-amber); }
|
||||
.wp-nav-dot.hold { background:var(--red); }
|
||||
.wp-nav-empty { padding:12px 8px; font-size:12px; color:var(--text-dim); }
|
||||
.wp-nav-foot { border-top:1px solid var(--border); padding:9px 12px; display:flex; gap:8px; flex-wrap:wrap; }
|
||||
/* Keep the drawer's footer clear of the fixed save bar. */
|
||||
body.has-sticky-save .wp-nav { bottom: 54px; }
|
||||
/* Pinned: the page chrome shifts with the form so nothing hides behind the panel. */
|
||||
body.wp-nav-pinned { --gutter: 328px; }
|
||||
body.wp-nav-pinned .sticky-save { left: 300px; }
|
||||
/* -- icon nav -- */
|
||||
.wp-nav-links { padding: 2px 8px 10px; display: flex; flex-direction: column; gap: 1px; }
|
||||
.wp-nav-link {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
width: 100%; padding: 9px 10px;
|
||||
background: none; border: 0; border-radius: 6px;
|
||||
font: inherit; font-size: 14px; color: var(--text);
|
||||
cursor: pointer; text-align: left; white-space: nowrap;
|
||||
}
|
||||
.wp-nav-link:hover { background: #eef0f3; }
|
||||
.wp-nav-link.is-current { background: #e8eaed; font-weight: 600; }
|
||||
.wp-nav-ico { flex: 0 0 20px; width: 20px; text-align: center; font-size: 15px; color: var(--text-muted); }
|
||||
.wp-nav-link-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
|
||||
.wp-nav-link-n { flex: 0 0 auto; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* Narrow screens: never pin (there isn't the width) — overlay only. */
|
||||
@media (max-width: 900px) {
|
||||
body.wp-nav-pinned { --gutter: 34px; } /* no room to pin — overlay only */
|
||||
.wp-nav { width: 290px; }
|
||||
/* -- section header + filter -- */
|
||||
.wp-nav-sect {
|
||||
display: flex; align-items: baseline; gap: 6px;
|
||||
padding: 6px 18px 4px; border-top: 1px solid var(--border);
|
||||
}
|
||||
.wp-nav-sect-label { font-size: 12px; color: var(--text-muted); }
|
||||
.wp-nav-count { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
|
||||
.wp-nav-filter { padding: 4px 12px 8px; }
|
||||
.wp-nav-search {
|
||||
width: 100%; padding: 7px 10px; font: inherit; font-size: 13px;
|
||||
border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text);
|
||||
}
|
||||
.wp-nav-search:focus { outline: none; border-color: var(--accent); }
|
||||
|
||||
/* -- package rows -- */
|
||||
.wp-nav-list { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 0 8px 14px; }
|
||||
.wp-nav-group {
|
||||
font-size: 11px; font-weight: 600; letter-spacing: .02em;
|
||||
color: var(--text-dim); padding: 12px 10px 4px;
|
||||
}
|
||||
.wp-nav-item {
|
||||
position: relative;
|
||||
display: flex; align-items: center; gap: 11px;
|
||||
width: 100%; padding: 7px 10px; margin-bottom: 1px;
|
||||
background: none; border: 0; border-radius: 6px;
|
||||
font: inherit; color: var(--text); text-align: left; cursor: pointer;
|
||||
}
|
||||
.wp-nav-item:hover { background: #eef0f3; }
|
||||
.wp-nav-item.active { background: #e8eaed; }
|
||||
/* Left accent bar on the current package, like Planner's selected plan. */
|
||||
.wp-nav-item.active::before {
|
||||
content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
|
||||
width: 3px; border-radius: 2px; background: var(--accent);
|
||||
}
|
||||
.wp-nav-badge {
|
||||
flex: 0 0 28px; width: 28px; height: 28px; border-radius: 5px;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .02em;
|
||||
color: #fff; text-transform: uppercase;
|
||||
}
|
||||
.wp-nav-body { min-width: 0; flex: 1 1 auto; }
|
||||
.wp-nav-num { display: block; font-size: 13.5px; font-weight: 600; color: var(--text);
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.wp-nav-subj { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.35;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.wp-nav-state { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
|
||||
font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
|
||||
.wp-nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); flex: 0 0 auto; }
|
||||
.wp-nav-dot.ok { background: var(--accent-green); }
|
||||
.wp-nav-dot.open { background: var(--accent-amber); }
|
||||
.wp-nav-dot.hold { background: var(--red); }
|
||||
.wp-nav-empty { padding: 14px 10px; font-size: 12.5px; color: var(--text-dim); }
|
||||
|
||||
/* -- collapsed rail: badges and icons only -- */
|
||||
body.wp-nav-collapsed .wp-nav-cta-label,
|
||||
body.wp-nav-collapsed .wp-nav-cta-more,
|
||||
body.wp-nav-collapsed .wp-nav-link-label,
|
||||
body.wp-nav-collapsed .wp-nav-link-n,
|
||||
body.wp-nav-collapsed .wp-nav-sect,
|
||||
body.wp-nav-collapsed .wp-nav-filter,
|
||||
body.wp-nav-collapsed .wp-nav-body,
|
||||
body.wp-nav-collapsed .wp-nav-state,
|
||||
body.wp-nav-collapsed .wp-nav-group { display: none; }
|
||||
body.wp-nav-collapsed .wp-nav-primary { padding: 6px 10px 10px; }
|
||||
body.wp-nav-collapsed .wp-nav-cta { justify-content: center; padding: 0; border-radius: 6px; }
|
||||
body.wp-nav-collapsed .wp-nav-link { justify-content: center; padding: 9px 0; }
|
||||
body.wp-nav-collapsed .wp-nav-item { justify-content: center; padding: 6px 0; }
|
||||
body.wp-nav-collapsed .wp-nav-list { padding: 6px 6px 14px; }
|
||||
|
||||
/* Narrow screens: keep the rail collapsed-width so the form still has room. */
|
||||
@media (max-width: 860px) {
|
||||
body { --nav-w: 56px; }
|
||||
body:not(.wp-nav-collapsed) .wp-nav { width: 288px; box-shadow: 6px 0 22px rgba(20,30,50,.16); }
|
||||
}
|
||||
|
||||
/* Sticky save bar */
|
||||
.sticky-save{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; align-items:center;
|
||||
.sticky-save{ position:fixed; left:var(--nav-w,288px); right:0; bottom:0; z-index:40; display:flex; align-items:center;
|
||||
justify-content:space-between; gap:14px; padding:10px 20px; background:#fff;
|
||||
border-top:1px solid var(--border-strong); box-shadow:0 -2px 10px rgba(20,30,50,.08); }
|
||||
.sticky-save .sticky-status{ font-size:13px; font-weight:600; }
|
||||
|
||||
Reference in New Issue
Block a user