Compare commits
No commits in common. "5217f6a86f7a042081f1ec5c87c6e37b4a6e474d" and "cc449b3d2f2dafc09043f8f6ee4f1e3049ee43cd" have entirely different histories.
5217f6a86f
...
cc449b3d2f
|
|
@ -201,11 +201,6 @@ textarea { resize: vertical; min-height: 120px; }
|
||||||
.plan-today-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
|
.plan-today-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
|
||||||
.plan-today-header h2, .plan-today-header p { margin-top:0; }
|
.plan-today-header h2, .plan-today-header p { margin-top:0; }
|
||||||
.plan-today-header button { min-width:44px; min-height:44px; }
|
.plan-today-header button { min-width:44px; min-height:44px; }
|
||||||
.mobile-plan-today-nav { position:sticky; top:0; z-index:5; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin:0 -18px 10px; padding:4px 18px; background:rgba(11,21,38,.98); border-block:1px solid #2a496e; }
|
|
||||||
.mobile-plan-today-nav button { min-width:0; min-height:44px; padding:4px; border-color:transparent; font-size:12px; }
|
|
||||||
.mobile-plan-today-nav button[aria-current="location"] { color:#bfdbfe; background:#17365a; border-color:#31577f; }
|
|
||||||
#plan-today-fit, #plan-today-selected, #plan-today-available-work { scroll-margin-top:54px; }
|
|
||||||
@media (min-width:601px) { .mobile-plan-today-nav { display:none; } }
|
|
||||||
.plan-today-list button, .plan-today-candidates button { min-height:44px; }
|
.plan-today-list button, .plan-today-candidates button { min-height:44px; }
|
||||||
.plan-today-capacity { position:sticky; top:0; z-index:2; margin:8px 0; padding:10px 12px; border:1px solid #31577f; border-radius:10px; background:#10233a; font-weight:700; }
|
.plan-today-capacity { position:sticky; top:0; z-index:2; margin:8px 0; padding:10px 12px; border:1px solid #31577f; border-radius:10px; background:#10233a; font-weight:700; }
|
||||||
.plan-today-available { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0; font-weight:700; }
|
.plan-today-available { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0; font-weight:700; }
|
||||||
|
|
@ -913,8 +908,6 @@ textarea { resize: vertical; min-height: 120px; }
|
||||||
.card-planning:not([open]) > .card-planning-actions { display:none; }
|
.card-planning:not([open]) > .card-planning-actions { display:none; }
|
||||||
.card-planning[open] > .card-planning-actions { display:grid; margin-top:8px; }
|
.card-planning[open] > .card-planning-actions { display:grid; margin-top:8px; }
|
||||||
.plan-today-panel { width:100%; border-left:0; padding:14px; }
|
.plan-today-panel { width:100%; border-left:0; padding:14px; }
|
||||||
.mobile-plan-today-nav { margin-inline:-14px; padding-inline:14px; }
|
|
||||||
.plan-today-capacity { position:static; }
|
|
||||||
.plan-today-item { grid-template-columns:1fr; }
|
.plan-today-item { grid-template-columns:1fr; }
|
||||||
.plan-today-item-actions { display:grid; grid-template-columns:repeat(3,1fr); width:100%; }
|
.plan-today-item-actions { display:grid; grid-template-columns:repeat(3,1fr); width:100%; }
|
||||||
.plan-today-candidate-actions { grid-template-columns:repeat(2,1fr); width:100%; }
|
.plan-today-candidate-actions { grid-template-columns:repeat(2,1fr); width:100%; }
|
||||||
|
|
|
||||||
|
|
@ -342,12 +342,6 @@
|
||||||
<div><h2 id="plan-today-title">Plan Today</h2><p class="small muted">Choose and order the work you want to finish next.</p></div>
|
<div><h2 id="plan-today-title">Plan Today</h2><p class="small muted">Choose and order the work you want to finish next.</p></div>
|
||||||
<button id="cancel-plan-today" type="button">Cancel</button>
|
<button id="cancel-plan-today" type="button">Cancel</button>
|
||||||
</div>
|
</div>
|
||||||
<nav class="mobile-plan-today-nav" aria-label="Plan Today sections">
|
|
||||||
<button type="button" data-plan-today-section="fit" aria-current="location">Fit</button>
|
|
||||||
<button type="button" data-plan-today-section="today">Today</button>
|
|
||||||
<button type="button" data-plan-today-section="available">Available</button>
|
|
||||||
</nav>
|
|
||||||
<section id="plan-today-fit" aria-label="Fit today's work">
|
|
||||||
<div class="plan-today-capacity" id="plan-today-capacity" role="status" aria-live="polite">0 of 5 selected</div>
|
<div class="plan-today-capacity" id="plan-today-capacity" role="status" aria-live="polite">0 of 5 selected</div>
|
||||||
<label class="plan-today-available" for="plan-today-available">Available today
|
<label class="plan-today-available" for="plan-today-available">Available today
|
||||||
<span><input id="plan-today-available" type="number" inputmode="numeric" min="15" max="1440" step="15" placeholder="Minutes" /> min</span>
|
<span><input id="plan-today-available" type="number" inputmode="numeric" min="15" max="1440" step="15" placeholder="Minutes" /> min</span>
|
||||||
|
|
@ -362,12 +356,11 @@
|
||||||
<div class="plan-today-skipped" id="plan-today-skipped"></div>
|
<div class="plan-today-skipped" id="plan-today-skipped"></div>
|
||||||
<div class="small plan-today-error" id="plan-today-error" role="alert"></div>
|
<div class="small plan-today-error" id="plan-today-error" role="alert"></div>
|
||||||
<button class="discard-recap-replan" id="discard-recap-replan" type="button" hidden>Discard recap feedback</button>
|
<button class="discard-recap-replan" id="discard-recap-replan" type="button" hidden>Discard recap feedback</button>
|
||||||
</section>
|
<section aria-labelledby="today-plan-heading">
|
||||||
<section id="plan-today-selected" aria-labelledby="today-plan-heading">
|
|
||||||
<h3 id="today-plan-heading">Today, in order</h3>
|
<h3 id="today-plan-heading">Today, in order</h3>
|
||||||
<div class="plan-today-list" id="plan-today-list"></div>
|
<div class="plan-today-list" id="plan-today-list"></div>
|
||||||
</section>
|
</section>
|
||||||
<section id="plan-today-available-work" aria-labelledby="today-candidates-heading">
|
<section aria-labelledby="today-candidates-heading">
|
||||||
<h3 id="today-candidates-heading">Available My Work</h3>
|
<h3 id="today-candidates-heading">Available My Work</h3>
|
||||||
<div class="plan-today-candidates" id="plan-today-candidates"></div>
|
<div class="plan-today-candidates" id="plan-today-candidates"></div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -1595,7 +1588,6 @@
|
||||||
<script src="static/mobile-update-detail-nav.js"></script>
|
<script src="static/mobile-update-detail-nav.js"></script>
|
||||||
<script src="static/mobile-review-detail-nav.js"></script>
|
<script src="static/mobile-review-detail-nav.js"></script>
|
||||||
<script src="static/mobile-search-preview-nav.js"></script>
|
<script src="static/mobile-search-preview-nav.js"></script>
|
||||||
<script src="static/mobile-plan-today-nav.js"></script>
|
|
||||||
<script src="static/dashboard.js"></script>
|
<script src="static/dashboard.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,104 +0,0 @@
|
||||||
function createMobilePlanTodayNavigation(options) {
|
|
||||||
const buttons = options.buttons || {};
|
|
||||||
const targets = options.targets || {};
|
|
||||||
const root = options.root;
|
|
||||||
const listeners = new Map();
|
|
||||||
const prefersReducedMotion = options.prefersReducedMotion || (() => false);
|
|
||||||
const now = options.now || (() => Date.now());
|
|
||||||
const targetNames = new Map(Object.entries(targets).map(([name, target]) => [target, name]));
|
|
||||||
let observer = null;
|
|
||||||
let navigationLockUntil = 0;
|
|
||||||
|
|
||||||
function select(name) {
|
|
||||||
Object.entries(buttons).forEach(([key, button]) => {
|
|
||||||
if (!button) return;
|
|
||||||
if (key === name) button.setAttribute('aria-current', 'location');
|
|
||||||
else button.removeAttribute('aria-current');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function navigate(name) {
|
|
||||||
const target = targets[name];
|
|
||||||
if (!root || !target) return false;
|
|
||||||
root.scrollTo({
|
|
||||||
top: Math.max(0, target.offsetTop - root.offsetTop),
|
|
||||||
behavior: prefersReducedMotion() ? 'auto' : 'smooth',
|
|
||||||
});
|
|
||||||
navigationLockUntil = now() + 500;
|
|
||||||
select(name);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function reset() {
|
|
||||||
select('fit');
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
start() {
|
|
||||||
Object.entries(buttons).forEach(([name, button]) => {
|
|
||||||
if (!button || listeners.has(button)) return;
|
|
||||||
const listener = event => {
|
|
||||||
event.preventDefault();
|
|
||||||
navigate(name);
|
|
||||||
};
|
|
||||||
listeners.set(button, listener);
|
|
||||||
button.addEventListener('click', listener);
|
|
||||||
});
|
|
||||||
reset();
|
|
||||||
const observe = options.observe || ((handler, observedTargets, observedRoot) => {
|
|
||||||
if (typeof IntersectionObserver === 'undefined') return null;
|
|
||||||
const instance = new IntersectionObserver(handler, {
|
|
||||||
root: observedRoot,
|
|
||||||
rootMargin: '-20% 0px -60% 0px',
|
|
||||||
threshold: [0, 0.25, 0.5, 0.75, 1],
|
|
||||||
});
|
|
||||||
observedTargets.forEach(target => instance.observe(target));
|
|
||||||
return instance;
|
|
||||||
});
|
|
||||||
observer = observe(entries => {
|
|
||||||
if (now() < navigationLockUntil) return;
|
|
||||||
const visible = entries
|
|
||||||
.filter(entry => entry.isIntersecting && targetNames.has(entry.target))
|
|
||||||
.sort((left, right) => right.intersectionRatio - left.intersectionRatio)[0];
|
|
||||||
if (visible) select(targetNames.get(visible.target));
|
|
||||||
}, Array.from(targetNames.keys()).filter(Boolean), root);
|
|
||||||
},
|
|
||||||
stop() {
|
|
||||||
listeners.forEach((listener, button) => button.removeEventListener('click', listener));
|
|
||||||
listeners.clear();
|
|
||||||
if (observer) observer.disconnect();
|
|
||||||
observer = null;
|
|
||||||
},
|
|
||||||
navigate,
|
|
||||||
reset,
|
|
||||||
select,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function attachMobilePlanTodayNavigation({document, window}) {
|
|
||||||
const bySection = name => document.querySelector('[data-plan-today-section="' + name + '"]');
|
|
||||||
const sheet = document.getElementById('plan-today-sheet');
|
|
||||||
const panel = document.querySelector('.plan-today-panel');
|
|
||||||
const navigation = createMobilePlanTodayNavigation({
|
|
||||||
root: panel,
|
|
||||||
buttons: {
|
|
||||||
fit: bySection('fit'),
|
|
||||||
today: bySection('today'),
|
|
||||||
available: bySection('available'),
|
|
||||||
},
|
|
||||||
targets: {
|
|
||||||
fit: document.getElementById('plan-today-fit'),
|
|
||||||
today: document.getElementById('plan-today-selected'),
|
|
||||||
available: document.getElementById('plan-today-available-work'),
|
|
||||||
},
|
|
||||||
prefersReducedMotion: () => window.matchMedia('(prefers-reduced-motion: reduce)').matches,
|
|
||||||
});
|
|
||||||
navigation.start();
|
|
||||||
new MutationObserver(() => {
|
|
||||||
if (!sheet.hidden) navigation.reset();
|
|
||||||
}).observe(sheet, {attributes: true, attributeFilter: ['hidden']});
|
|
||||||
return navigation;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof module !== 'undefined') module.exports = createMobilePlanTodayNavigation;
|
|
||||||
else attachMobilePlanTodayNavigation({document, window});
|
|
||||||
|
|
@ -81,7 +81,6 @@ const SHELL = [
|
||||||
BASE + 'static/mobile-update-detail-nav.js',
|
BASE + 'static/mobile-update-detail-nav.js',
|
||||||
BASE + 'static/mobile-review-detail-nav.js',
|
BASE + 'static/mobile-review-detail-nav.js',
|
||||||
BASE + 'static/mobile-search-preview-nav.js',
|
BASE + 'static/mobile-search-preview-nav.js',
|
||||||
BASE + 'static/mobile-plan-today-nav.js',
|
|
||||||
BASE + 'static/checklist-conflict.js',
|
BASE + 'static/checklist-conflict.js',
|
||||||
BASE + 'static/voice-transcript-store.js',
|
BASE + 'static/voice-transcript-store.js',
|
||||||
BASE + 'static/voice-issue-capture.js',
|
BASE + 'static/voice-issue-capture.js',
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@ FEATURE_SOURCES = {
|
||||||
"device-setup": ("static/install-app.js", "static/mobile-device-setup.js"),
|
"device-setup": ("static/install-app.js", "static/mobile-device-setup.js"),
|
||||||
"security-center": ("static/security-center.js",),
|
"security-center": ("static/security-center.js",),
|
||||||
"today-timer": (
|
"today-timer": (
|
||||||
"static/voice-transcript-store.js", "static/voice-conversation-capture.js", "static/mobile-plan-today-nav.js",
|
"static/voice-transcript-store.js", "static/voice-conversation-capture.js",
|
||||||
"static/today-completion.js", "static/work-detail-position.js", "static/work-route.js", "static/commands.js", "static/saved-searches.js", "static/task-overlay-history.js", "static/search-preview.js", "static/mobile-search-preview-nav.js", "static/search-reply-draft-store.js", "static/conversation-reply-draft-store.js", "static/conversation-photo-drafts.js", "static/search-defer.js", "static/mobile-search-viewport.js", "static/my-work.js", "static/protect-today.js", "static/mobile-task-dock.js", "static/mobile-queue-launcher.js", "static/mobile-start-day.js", "static/update-triage-session.js", "static/update-review-handoff.js", "static/update-triage-launcher.js", "static/update-triage-gesture.js", "static/notification-undo.js", "static/today-timer.js", "static/today-recap.js",
|
"static/today-completion.js", "static/work-detail-position.js", "static/work-route.js", "static/commands.js", "static/saved-searches.js", "static/task-overlay-history.js", "static/search-preview.js", "static/mobile-search-preview-nav.js", "static/search-reply-draft-store.js", "static/conversation-reply-draft-store.js", "static/conversation-photo-drafts.js", "static/search-defer.js", "static/mobile-search-viewport.js", "static/my-work.js", "static/protect-today.js", "static/mobile-task-dock.js", "static/mobile-queue-launcher.js", "static/mobile-start-day.js", "static/update-triage-session.js", "static/update-review-handoff.js", "static/update-triage-launcher.js", "static/update-triage-gesture.js", "static/notification-undo.js", "static/today-timer.js", "static/today-recap.js",
|
||||||
"static/today-rollover.js", "static/later-work.js", "static/later-picker.js", "static/drafts.js", "static/unfiled-captures.js", "static/unfiled-draft-sync.js",
|
"static/today-rollover.js", "static/later-work.js", "static/later-picker.js", "static/drafts.js", "static/unfiled-captures.js", "static/unfiled-draft-sync.js",
|
||||||
"static/assign-and-start.js", "static/filed-claim.js", "static/queue-today.js", "static/create-and-start.js",
|
"static/assign-and-start.js", "static/filed-claim.js", "static/queue-today.js", "static/create-and-start.js",
|
||||||
|
|
|
||||||
|
|
@ -1,103 +0,0 @@
|
||||||
import json
|
|
||||||
import subprocess
|
|
||||||
from pathlib import Path
|
|
||||||
|
|
||||||
|
|
||||||
CONTROLLER = Path(__file__).resolve().parents[1] / "frontend" / "mobile-plan-today-nav.js"
|
|
||||||
FRONTEND = CONTROLLER.parent
|
|
||||||
|
|
||||||
|
|
||||||
def run_navigation(scenario: str) -> dict:
|
|
||||||
script = f"""
|
|
||||||
const createNavigation = require({json.dumps(str(CONTROLLER))});
|
|
||||||
class FakeElement {{
|
|
||||||
constructor(name, offsetTop=0) {{
|
|
||||||
this.name=name; this.offsetTop=offsetTop; this.listeners={{}}; this.attributes={{}};
|
|
||||||
this.scrolls=[]; this.hidden=false;
|
|
||||||
}}
|
|
||||||
addEventListener(name, callback) {{ this.listeners[name]=callback; }}
|
|
||||||
removeEventListener(name) {{ delete this.listeners[name]; }}
|
|
||||||
click() {{ this.listeners.click?.({{preventDefault() {{}}}}); }}
|
|
||||||
setAttribute(name,value) {{ this.attributes[name]=value; }}
|
|
||||||
removeAttribute(name) {{ delete this.attributes[name]; }}
|
|
||||||
scrollTo(options) {{ this.scrolls.push(options); }}
|
|
||||||
}}
|
|
||||||
{scenario}
|
|
||||||
"""
|
|
||||||
result = subprocess.run(["node", "-e", script], capture_output=True, text=True)
|
|
||||||
assert result.returncode == 0, result.stderr
|
|
||||||
return json.loads(result.stdout)
|
|
||||||
|
|
||||||
|
|
||||||
def test_mobile_plan_today_navigation_scrolls_the_planner_and_tracks_sections():
|
|
||||||
result = run_navigation("""
|
|
||||||
const names=['fit','today','available'];
|
|
||||||
const buttons=Object.fromEntries(names.map(name=>[name,new FakeElement(name)]));
|
|
||||||
const targets={fit:new FakeElement('fit',120),today:new FakeElement('today',620),available:new FakeElement('available',1120)};
|
|
||||||
const root=new FakeElement('panel',100);
|
|
||||||
let callback; let observedRoot; let disconnected=0; let now=1000;
|
|
||||||
const navigation=createNavigation({
|
|
||||||
buttons,targets,root,prefersReducedMotion:()=>true,now:()=>now,
|
|
||||||
observe(handler,observed,rootOption){callback=handler; observedRoot=rootOption; return {disconnect(){disconnected++;}};},
|
|
||||||
});
|
|
||||||
navigation.start();
|
|
||||||
buttons.today.click();
|
|
||||||
now=1600;
|
|
||||||
callback([{target:targets.today,isIntersecting:true,intersectionRatio:.2},{target:targets.available,isIntersecting:true,intersectionRatio:.8}]);
|
|
||||||
const selected=Object.fromEntries(Object.entries(buttons).map(([name,button])=>[name,button.attributes['aria-current']||null]));
|
|
||||||
navigation.stop();
|
|
||||||
process.stdout.write(JSON.stringify({scrolls:root.scrolls,selected,observedRoot:observedRoot.name,disconnected,listeners:Object.values(buttons).map(button=>Object.keys(button.listeners).length)}));
|
|
||||||
""")
|
|
||||||
|
|
||||||
assert result == {
|
|
||||||
"scrolls": [{"top": 520, "behavior": "auto"}],
|
|
||||||
"selected": {"fit": None, "today": None, "available": "location"},
|
|
||||||
"observedRoot": "panel",
|
|
||||||
"disconnected": 1,
|
|
||||||
"listeners": [0, 0, 0],
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
def test_mobile_plan_today_navigation_preserves_selection_until_a_fresh_open():
|
|
||||||
result = run_navigation("""
|
|
||||||
const names=['fit','today','available'];
|
|
||||||
const buttons=Object.fromEntries(names.map(name=>[name,new FakeElement(name)]));
|
|
||||||
const targets=Object.fromEntries(names.map((name,index)=>[name,new FakeElement(name,index*400)]));
|
|
||||||
const root=new FakeElement('panel');
|
|
||||||
const navigation=createNavigation({buttons,targets,root,prefersReducedMotion:()=>false,observe:()=>null});
|
|
||||||
navigation.start();
|
|
||||||
buttons.available.click();
|
|
||||||
const afterRerender=Object.fromEntries(Object.entries(buttons).map(([name,button])=>[name,button.attributes['aria-current']||null]));
|
|
||||||
navigation.reset();
|
|
||||||
const afterOpen=Object.fromEntries(Object.entries(buttons).map(([name,button])=>[name,button.attributes['aria-current']||null]));
|
|
||||||
process.stdout.write(JSON.stringify({scrolls:root.scrolls,afterRerender,afterOpen}));
|
|
||||||
""")
|
|
||||||
|
|
||||||
assert result == {
|
|
||||||
"scrolls": [{"top": 800, "behavior": "smooth"}],
|
|
||||||
"afterRerender": {"fit": None, "today": None, "available": "location"},
|
|
||||||
"afterOpen": {"fit": "location", "today": None, "available": None},
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
def test_plan_today_ships_mobile_navigation_in_the_offline_bundle():
|
|
||||||
html = (FRONTEND / "index.html").read_text()
|
|
||||||
css = (FRONTEND / "dashboard.css").read_text()
|
|
||||||
bundle = (FRONTEND.parent / "src" / "frontend_bundle.py").read_text()
|
|
||||||
service_worker = (FRONTEND / "service-worker.js").read_text()
|
|
||||||
|
|
||||||
assert '<nav class="mobile-plan-today-nav"' in html
|
|
||||||
assert 'aria-label="Plan Today sections"' in html
|
|
||||||
for name, label in (("fit", "Fit"), ("today", "Today"), ("available", "Available")):
|
|
||||||
assert f'data-plan-today-section="{name}"' in html
|
|
||||||
assert f">{label}</button>" in html
|
|
||||||
assert 'id="plan-today-fit"' in html
|
|
||||||
assert 'id="plan-today-selected"' in html
|
|
||||||
assert 'id="plan-today-available-work"' in html
|
|
||||||
assert '<script src="static/mobile-plan-today-nav.js"></script>' in html
|
|
||||||
assert '"static/mobile-plan-today-nav.js"' in bundle
|
|
||||||
assert "static/mobile-plan-today-nav.js" in service_worker
|
|
||||||
assert ".mobile-plan-today-nav" in css
|
|
||||||
assert "grid-template-columns:repeat(3,minmax(0,1fr))" in css
|
|
||||||
assert "min-height:44px" in css
|
|
||||||
assert "@media (min-width:601px)" in css
|
|
||||||
|
|
@ -1002,7 +1002,6 @@ def test_install_precaches_complete_subpath_scoped_app_shell():
|
||||||
"/dashboard/static/mobile-update-detail-nav.js",
|
"/dashboard/static/mobile-update-detail-nav.js",
|
||||||
"/dashboard/static/mobile-review-detail-nav.js",
|
"/dashboard/static/mobile-review-detail-nav.js",
|
||||||
"/dashboard/static/mobile-search-preview-nav.js",
|
"/dashboard/static/mobile-search-preview-nav.js",
|
||||||
"/dashboard/static/mobile-plan-today-nav.js",
|
|
||||||
"/dashboard/static/checklist-conflict.js",
|
"/dashboard/static/checklist-conflict.js",
|
||||||
"/dashboard/static/voice-transcript-store.js",
|
"/dashboard/static/voice-transcript-store.js",
|
||||||
"/dashboard/static/voice-issue-capture.js",
|
"/dashboard/static/voice-issue-capture.js",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user