From 7a0bd67fc07fdba978bce73e414426bbfcf954c1 Mon Sep 17 00:00:00 2001 From: gsinghpal Date: Sat, 23 May 2026 21:44:24 -0400 Subject: [PATCH] docs(shopfloor): implementation plan for tablet lock-screen redesign MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 6 tasks covering the visual + interaction redesign: Task 1 — Backend: 3 module-level helpers in tablet_controller.py (_initials_from, _avatar_gradient_for, _lock_company_payload) + extended /fp/tablet/tiles payload + 3 test classes (TDD) Task 2 — Create _tablet_lock_tokens.scss design tokens (light + dark branches via $o-webclient-color-scheme) Task 3 — Full rewrite of tablet_lock.scss (gradient bg, glassmorphic tiles, 4 entrance keyframes, hover lift, click press, clocked-in pulse, prefers-reduced-motion gate) Task 4 — Extend tablet_lock.xml with logo + clock + prompt blocks wrapping the existing tile loop Task 5 — Extend tablet_lock.js with state.clockText / state.dateText / state.company + setInterval clock tick + _formatTime / _formatDate / tileStyle / avatarClass helpers (all per project rule 20 — coercion lives in JS, not in templates) Task 6 — Register the new tokens SCSS in manifest BEFORE tablet_lock.scss (per rule 8), bump version 19.0.32.0.0, deploy + verify Each task has TDD-style steps with full code blocks. Self-review confirms 1-to-1 coverage of every spec section + correct deferral of every §12 Phase 2 item. Plan: docs/superpowers/plans/2026-05-24-tablet-lock-screen-redesign-plan.md Spec: docs/superpowers/specs/2026-05-24-tablet-lock-screen-redesign-design.md Co-Authored-By: Claude Opus 4.7 (1M context) --- ...-05-24-tablet-lock-screen-redesign-plan.md | 1107 +++++++++++++++++ 1 file changed, 1107 insertions(+) create mode 100644 fusion_plating/docs/superpowers/plans/2026-05-24-tablet-lock-screen-redesign-plan.md diff --git a/fusion_plating/docs/superpowers/plans/2026-05-24-tablet-lock-screen-redesign-plan.md b/fusion_plating/docs/superpowers/plans/2026-05-24-tablet-lock-screen-redesign-plan.md new file mode 100644 index 00000000..ed5bf1d2 --- /dev/null +++ b/fusion_plating/docs/superpowers/plans/2026-05-24-tablet-lock-screen-redesign-plan.md @@ -0,0 +1,1107 @@ +# Tablet Lock Screen Redesign — Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Redesign the FpTabletLock OWL component's tile screen with company branding, real-time clock, glassmorphic tiles, dual dark/light mode, and a 7-animation catalogue per the spec at `docs/superpowers/specs/2026-05-24-tablet-lock-screen-redesign-design.md`. + +**Architecture:** No DB migration. Extend the existing `/fp/tablet/tiles` endpoint payload with a `company` block + per-tile metadata (initials, gradient, has_photo). Rewrite `tablet_lock.scss` with compile-time dark/light branches via `$o-webclient-color-scheme`. New `_tablet_lock_tokens.scss` partial loads first per project rule 8. Extend XML and JS with logo, clock, and prompt blocks; existing PIN gate / lockout / unlock RPC unchanged. + +**Tech Stack:** Odoo 19 (Python 3.11, OWL 2), JSONRPC, PostgreSQL, native odoo on entech (LXC 111 on pve-worker5). SCSS bundle pipeline auto-compiles for both light and dark. + +--- + +## Critical patterns to follow + +Already documented in `K:/Github/Odoo-Modules/fusion_plating/CLAUDE.md` — re-stating so the implementer doesn't context-switch: + +- **OWL template scope (rule 20):** only `Math` is exposed as a JS global. NEVER call `String(x)`, `Number(x)`, `padStart(x)`, `toLocaleDateString()`, etc. directly inside `t-on-click` / `t-att-*` / `t-out` expressions. The clock and date formatting MUST happen in JS-side methods; templates just `t-esc` the prepared strings. +- **SCSS @import forbidden (rule 8):** every SCSS file is registered separately in the manifest. The new `_tablet_lock_tokens.scss` MUST appear BEFORE `tablet_lock.scss` in `web.assets_backend` so the `$_lock-*` tokens are visible to the consumer. +- **Dark mode at compile time:** branch via `@if $o-webclient-color-scheme == dark { ... }` with `!global` token overrides. No JS-side theme code. No `.o_dark_mode` class selectors. No `@media (prefers-color-scheme)`. +- **End every git commit with:** `Co-Authored-By: Claude Opus 4.7 (1M context) ` +- **Existing PIN flow stays:** FpPinPad component, unlock RPC, lockout, idle warning are out of scope. Don't touch them. + +--- + +## File structure map + +### Backend + +| File | Change | Why | +|---|---|---| +| `fusion_plating_shopfloor/controllers/tablet_controller.py` | modify | Add 3 module-level helpers (`_initials_from`, `_avatar_gradient_for`, `_lock_company_payload`) and extend the `/fp/tablet/tiles` route to emit company block + per-tile metadata | +| `fusion_plating_shopfloor/tests/test_tablet_lock_payload.py` | **create** | Cover the new payload shape + helper edge cases | +| `fusion_plating_shopfloor/__manifest__.py` | modify | Bump version to `19.0.32.0.0`, register the new tokens SCSS BEFORE the consumer scss | + +### Frontend + +| File | Change | Why | +|---|---|---| +| `fusion_plating_shopfloor/static/src/scss/_tablet_lock_tokens.scss` | **create** | Design tokens (light defaults + dark overrides) per spec §5; loads first | +| `fusion_plating_shopfloor/static/src/scss/tablet_lock.scss` | full rewrite | New visual structure + 7 animations + reduced-motion gate + dark/light parity | +| `fusion_plating_shopfloor/static/src/xml/tablet_lock.xml` | modify | Wrap existing tile loop with new logo + clock + prompt blocks; tile inner shape updated | +| `fusion_plating_shopfloor/static/src/js/tablet_lock.js` | modify | Add `state.clockText`, `state.dateText`, `state.company`, `_tickClock` interval, `_formatTime` / `_formatDate` helpers, `animDelay` decoration in `_loadTiles` | + +--- + +## Task 1 — Backend: helpers + extended tiles payload + +**Files:** +- Modify: `fusion_plating_shopfloor/controllers/tablet_controller.py` (the `tiles()` route around line 144, see Step 1) +- Create: `fusion_plating_shopfloor/tests/test_tablet_lock_payload.py` + +- [ ] **Step 1: Locate the existing route + endpoint helpers** + +```bash +grep -n "^def \|@http.route.*tiles\|def tiles" K:/Github/Odoo-Modules/fusion_plating/fusion_plating_shopfloor/controllers/tablet_controller.py | head +``` + +Confirm the existing `tiles()` route lives between lines ~140 and ~194. The new module-level helpers go above the controller class. + +- [ ] **Step 2: Write the failing test first** + +Create `fusion_plating_shopfloor/tests/test_tablet_lock_payload.py`: + +```python +# -*- coding: utf-8 -*- +from odoo.tests.common import TransactionCase +from odoo.addons.fusion_plating_shopfloor.controllers.tablet_controller import ( + _initials_from, + _avatar_gradient_for, + _AVATAR_GRADIENTS, +) + + +class TestInitialsFrom(TransactionCase): + + def test_empty_returns_question_mark(self): + self.assertEqual(_initials_from(''), '?') + self.assertEqual(_initials_from(None), '?') + + def test_single_word_returns_first_two_chars_upper(self): + self.assertEqual(_initials_from('Garry'), 'GA') + self.assertEqual(_initials_from('ab'), 'AB') + self.assertEqual(_initials_from('z'), 'Z') + + def test_multi_word_returns_first_and_last_initial(self): + self.assertEqual(_initials_from('Garry Singh'), 'GS') + self.assertEqual(_initials_from('Johnny Matloub'), 'JM') + self.assertEqual(_initials_from('Mary Anne Smith'), 'MS') + self.assertEqual(_initials_from('EN Technologies'), 'ET') + + def test_extra_whitespace_handled(self): + self.assertEqual(_initials_from(' Garry Singh '), 'GS') + self.assertEqual(_initials_from('Garry\tSingh'), 'GS') + + +class TestAvatarGradientFor(TransactionCase): + + def test_deterministic_per_user_id(self): + # Same id → same gradient across calls + self.assertEqual( + _avatar_gradient_for(5), + _avatar_gradient_for(5), + ) + + def test_modulo_distribution(self): + # Wrapping wraps cleanly: id 0 and id len(gradients) get the same colour + n = len(_AVATAR_GRADIENTS) + self.assertEqual(_avatar_gradient_for(0), _avatar_gradient_for(n)) + self.assertEqual(_avatar_gradient_for(3), _avatar_gradient_for(n + 3)) + + def test_returns_a_known_gradient(self): + # Every output is one of the documented gradients + for uid in range(50): + self.assertIn(_avatar_gradient_for(uid), _AVATAR_GRADIENTS) + + +class TestTilesPayload(TransactionCase): + """End-to-end test of the /fp/tablet/tiles endpoint payload shape. + Doesn't drive HTTP — calls the controller method directly via a + light request stand-in. + """ + + def test_payload_has_company_block(self): + from odoo.addons.fusion_plating_shopfloor.controllers.tablet_controller import ( + _lock_company_payload, + ) + payload = _lock_company_payload(self.env) + self.assertIn('id', payload) + self.assertIn('name', payload) + self.assertIn('tagline', payload) + self.assertIn('logo_url', payload) + self.assertIn('has_logo', payload) + self.assertIn('initials', payload) + self.assertTrue(payload['logo_url'].startswith('/web/image/res.company/')) + self.assertEqual(payload['id'], self.env.company.id) + + def test_tagline_default_when_empty_report_header(self): + from odoo.addons.fusion_plating_shopfloor.controllers.tablet_controller import ( + _lock_company_payload, + ) + # Force report_header empty for this test + self.env.company.report_header = False + payload = _lock_company_payload(self.env) + # When empty, falls back to the i18n-friendly default. + self.assertTrue(payload['tagline']) + self.assertNotEqual(payload['tagline'], False) +``` + +- [ ] **Step 3: Run tests — expect ImportError** + +```bash +ssh pve-worker5 "pct exec 111 -- su - odoo -s /bin/bash -c '/usr/bin/odoo -c /etc/odoo/odoo.conf -d admin --test-enable --stop-after-init --log-level=test -u fusion_plating_shopfloor --test-tags /fusion_plating_shopfloor:TestInitialsFrom,/fusion_plating_shopfloor:TestAvatarGradientFor,/fusion_plating_shopfloor:TestTilesPayload' 2>&1 | tail -30" +``` + +Expected: failures with `ImportError: cannot import name '_initials_from' from ...`. + +- [ ] **Step 4: Add the helpers + extend the route** + +At the top of `fusion_plating_shopfloor/controllers/tablet_controller.py`, after the existing imports (around line 10), add: + +```python +# ===== 2026-05-24 lock-screen redesign helpers ========================= + +_AVATAR_GRADIENTS = [ + 'linear-gradient(135deg, #ef4444, #dc2626)', # red + 'linear-gradient(135deg, #f59e0b, #d97706)', # amber + 'linear-gradient(135deg, #10b981, #059669)', # emerald + 'linear-gradient(135deg, #3b82f6, #2563eb)', # blue + 'linear-gradient(135deg, #8b5cf6, #7c3aed)', # violet + 'linear-gradient(135deg, #ec4899, #db2777)', # pink + 'linear-gradient(135deg, #14b8a6, #0d9488)', # teal + 'linear-gradient(135deg, #f97316, #ea580c)', # orange +] + + +def _initials_from(name): + """First letter of first + last word, capped at 2 chars uppercase. + Single-word names return their first two chars. Empty returns '?'. + """ + if not name: + return '?' + words = name.strip().split() + if not words: + return '?' + if len(words) == 1: + return words[0][:2].upper() + return (words[0][0] + words[-1][0]).upper() + + +def _avatar_gradient_for(user_id): + """Deterministic gradient per user id. Same operator gets the same + color across sessions so they learn their tile.""" + return _AVATAR_GRADIENTS[user_id % len(_AVATAR_GRADIENTS)] + + +def _lock_company_payload(env): + """Returns the company info block for the lock screen. + Reuses res.company.report_header as the tagline (the same field + used by invoice letterheads) with a sensible fallback when empty. + """ + co = env.company + return { + 'id': co.id, + 'name': co.name or '', + 'tagline': co.report_header or 'Shop Floor Terminal', + 'logo_url': f'/web/image/res.company/{co.id}/logo', + 'has_logo': bool(co.logo), + 'initials': _initials_from(co.name), + } +``` + +Then in the `tiles()` route body, replace the per-user dict to include the new fields, and add the company block to the return: + +```python + tiles = [] + for u, u_sudo in zip(users_sorted, users_sudo): + tiles.append({ + 'user_id': u.id, + 'name': u.name, + 'initials': _initials_from(u.name), + 'avatar_url': f'/web/image/res.users/{u.id}/avatar_128', + 'has_photo': bool(u_sudo.image_128), + 'avatar_gradient': _avatar_gradient_for(u.id), + 'is_clocked_in': u.id in clocked_ids, + 'has_pin': bool(u_sudo.x_fc_tablet_pin_hash), + }) + # Clocked-in first, then alphabetical within bucket + tiles.sort(key=lambda t: (not t['is_clocked_in'], t['name'])) + return { + 'ok': True, + 'company': _lock_company_payload(request.env), + 'tiles': tiles, + } +``` + +- [ ] **Step 5: Add the test file to the tests package init (if explicit)** + +```bash +ls K:/Github/Odoo-Modules/fusion_plating/fusion_plating_shopfloor/tests/__init__.py 2>/dev/null && cat K:/Github/Odoo-Modules/fusion_plating/fusion_plating_shopfloor/tests/__init__.py +``` + +If the file exists and explicitly imports each test module, add `from . import test_tablet_lock_payload`. If it uses a glob or doesn't exist, create it with that single import: + +```python +# fusion_plating_shopfloor/tests/__init__.py +from . import test_tablet_lock_payload +``` + +- [ ] **Step 6: Deploy + run tests — expect PASS** + +```bash +cat "K:/Github/Odoo-Modules/fusion_plating/fusion_plating_shopfloor/controllers/tablet_controller.py" | ssh pve-worker5 "pct exec 111 -- bash -c 'cat > /mnt/extra-addons/custom/fusion_plating_shopfloor/controllers/tablet_controller.py'" +cat "K:/Github/Odoo-Modules/fusion_plating/fusion_plating_shopfloor/tests/test_tablet_lock_payload.py" | ssh pve-worker5 "pct exec 111 -- bash -c 'mkdir -p /mnt/extra-addons/custom/fusion_plating_shopfloor/tests && cat > /mnt/extra-addons/custom/fusion_plating_shopfloor/tests/test_tablet_lock_payload.py'" +ssh pve-worker5 "pct exec 111 -- su - odoo -s /bin/bash -c '/usr/bin/odoo -c /etc/odoo/odoo.conf -d admin --test-enable --stop-after-init --log-level=test -u fusion_plating_shopfloor --test-tags /fusion_plating_shopfloor:TestInitialsFrom,/fusion_plating_shopfloor:TestAvatarGradientFor,/fusion_plating_shopfloor:TestTilesPayload' 2>&1 | tail -25" +``` + +Expected: all tests pass. + +- [ ] **Step 7: Commit** + +```bash +cd K:/Github/Odoo-Modules/fusion_plating && git add fusion_plating_shopfloor/controllers/tablet_controller.py fusion_plating_shopfloor/tests/ && git commit -m "feat(shopfloor): extend /fp/tablet/tiles payload with company block + +Adds 3 module-level helpers in tablet_controller.py: + _initials_from(name) — first/last initials for letter-mark fallback + _avatar_gradient_for(uid) — deterministic per-user color gradient + _lock_company_payload(env) — company name + tagline + logo URL + +Endpoint /fp/tablet/tiles now returns: + {ok, company:{id,name,tagline,logo_url,has_logo,initials}, + tiles:[{user_id, name, initials, avatar_url, has_photo, + avatar_gradient, is_clocked_in, has_pin}, ...]} + +8 avatar gradients keyed by user.id modulo — operators learn their +own color. has_photo is sudo-read of res.users.image_128 (avoids +the 1×1 default-image flash on the frontend). + +Tagline reuses res.company.report_header (the invoice-letterhead +field) so no new model field; defaults to 'Shop Floor Terminal'. + +Tested with 3 test classes covering initials edge cases, gradient +determinism, and payload shape. + +Part of the 2026-05-24 tablet lock-screen redesign (spec at +docs/superpowers/specs/2026-05-24-tablet-lock-screen-redesign-design.md). + +Co-Authored-By: Claude Opus 4.7 (1M context) " +``` + +--- + +## Task 2 — SCSS design tokens + +**Files:** +- Create: `fusion_plating_shopfloor/static/src/scss/_tablet_lock_tokens.scss` + +- [ ] **Step 1: Create the tokens file** + +```scss +// ===================================================================== +// Tablet lock-screen design tokens (2026-05-24 redesign). +// MUST load before tablet_lock.scss. Per project rule 8 (SCSS @import +// forbidden in Odoo 19 custom code), the manifest registers each SCSS +// file separately; ordering IS the variable scope. +// ===================================================================== + +$o-webclient-color-scheme: bright !default; + +// === Light-mode defaults === +$_lock-bg-top-hex: #fafafa; +$_lock-bg-bottom-hex: #f0f0f3; +$_lock-accent-1-rgba: rgba(240,165,0,0.12); +$_lock-accent-2-rgba: rgba(99,102,241,0.06); +$_lock-text-hex: #1d1f1e; +$_lock-muted-hex: #71717a; +$_lock-prompt-hex: #b45309; +$_lock-prompt-bg-rgba: rgba(240,165,0,0.10); +$_lock-prompt-border-rgba: rgba(240,165,0,0.25); +$_lock-tile-bg-rgba: rgba(255,255,255,0.7); +$_lock-tile-border-rgba: rgba(0,0,0,0.05); +$_lock-tile-hover-bg-rgba: rgba(255,255,255,0.95); +$_lock-tile-hover-border-rgba: rgba(240,165,0,0.5); +$_lock-tile-hover-shadow: (0 12px 24px rgba(240,165,0,0.18)); +$_lock-frame-bg-rgba: rgba(255,255,255,0.85); +$_lock-frame-border-rgba: rgba(0,0,0,0.05); +$_lock-frame-shadow: (0 8px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8)); +$_lock-status-clocked-hex: #16a34a; +$_lock-status-pin-hex: #d97706; +$_lock-pulse-dot-border-hex: #ffffff; + +@if $o-webclient-color-scheme == dark { + $_lock-bg-top-hex: #1a1d21 !global; + $_lock-bg-bottom-hex: #2d3138 !global; + $_lock-accent-1-rgba: rgba(240,165,0,0.08) !global; + $_lock-accent-2-rgba: rgba(99,102,241,0.06) !global; + $_lock-text-hex: #f5f5f7 !global; + $_lock-muted-hex: #adb5bd !global; + $_lock-prompt-hex: #f0a500 !global; + $_lock-prompt-bg-rgba: rgba(240,165,0,0.08) !global; + $_lock-prompt-border-rgba: rgba(240,165,0,0.20) !global; + $_lock-tile-bg-rgba: rgba(255,255,255,0.06) !global; + $_lock-tile-border-rgba: rgba(255,255,255,0.08) !global; + $_lock-tile-hover-bg-rgba: rgba(240,165,0,0.10) !global; + $_lock-tile-hover-border-rgba: rgba(240,165,0,0.4) !global; + $_lock-tile-hover-shadow: (0 12px 24px rgba(240,165,0,0.15), 0 0 0 1px rgba(240,165,0,0.2)) !global; + $_lock-frame-bg-rgba: rgba(255,255,255,0.08) !global; + $_lock-frame-border-rgba: rgba(255,255,255,0.10) !global; + $_lock-frame-shadow: (0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08)) !global; + $_lock-status-clocked-hex: #34c759 !global; + $_lock-status-pin-hex: #ff9f0a !global; + $_lock-pulse-dot-border-hex: #2d3138 !global; +} + +// === CSS-custom-property wrappers so future themes can override === +$lock-bg-top: var(--fp-lock-bg-top, $_lock-bg-top-hex); +$lock-bg-bottom: var(--fp-lock-bg-bottom, $_lock-bg-bottom-hex); +$lock-accent-1: $_lock-accent-1-rgba; +$lock-accent-2: $_lock-accent-2-rgba; +$lock-text: var(--fp-lock-text, $_lock-text-hex); +$lock-muted: var(--fp-lock-muted, $_lock-muted-hex); +$lock-prompt: var(--fp-lock-prompt, $_lock-prompt-hex); +$lock-prompt-bg: $_lock-prompt-bg-rgba; +$lock-prompt-border: $_lock-prompt-border-rgba; +$lock-tile-bg: $_lock-tile-bg-rgba; +$lock-tile-border: $_lock-tile-border-rgba; +$lock-tile-hover-bg: $_lock-tile-hover-bg-rgba; +$lock-tile-hover-border: $_lock-tile-hover-border-rgba; +$lock-tile-hover-shadow: $_lock-tile-hover-shadow; +$lock-frame-bg: $_lock-frame-bg-rgba; +$lock-frame-border: $_lock-frame-border-rgba; +$lock-frame-shadow: $_lock-frame-shadow; +$lock-status-clocked: var(--fp-lock-status-clocked, $_lock-status-clocked-hex); +$lock-status-pin: var(--fp-lock-status-pin, $_lock-status-pin-hex); +$lock-pulse-dot-border: $_lock-pulse-dot-border-hex; +``` + +- [ ] **Step 2: Commit (tokens land in one commit, registered in manifest in Task 6)** + +```bash +git add fusion_plating_shopfloor/static/src/scss/_tablet_lock_tokens.scss && git commit -m "feat(shopfloor): tablet lock-screen design tokens + +Light defaults + dark overrides via \$o-webclient-color-scheme +compile-time branch (project rule for Odoo 19 dark mode — no class +selectors / media queries). Wrapped in CSS custom properties for +future per-tenant theming. + +Per project rule 8 this file MUST load before tablet_lock.scss in +the manifest's web.assets_backend list. Manifest update lands with +the SCSS rewrite in a later commit. + +Co-Authored-By: Claude Opus 4.7 (1M context) " +``` + +--- + +## Task 3 — SCSS full rewrite + +**Files:** +- Modify: `fusion_plating_shopfloor/static/src/scss/tablet_lock.scss` (replace entirely) + +- [ ] **Step 1: Replace the file** + +The new file is ~210 lines. Replace contents entirely: + +```scss +// ===================================================================== +// FpTabletLock — lock screen with tile grid + PIN pad overlay +// 2026-05-24 redesign: hybrid Industrial Bold + Premium Glassmorphism +// Spec: docs/superpowers/specs/2026-05-24-tablet-lock-screen-redesign-design.md +// Depends on _tablet_lock_tokens.scss being loaded first. +// ===================================================================== + +.o_fp_tablet_lock { + position: fixed; + inset: 0; + color: $lock-text; + display: flex; + flex-direction: column; + align-items: center; + padding: 28px 20px; + gap: 22px; + z-index: 9000; + overflow-y: auto; + background: + radial-gradient(ellipse at top, $lock-accent-1, transparent 50%), + radial-gradient(ellipse at bottom, $lock-accent-2, transparent 50%), + linear-gradient(135deg, $lock-bg-top 0%, $lock-bg-bottom 100%); +} + +// === Logo block ===================================================== +.o_fp_lock_logo_block { + text-align: center; + animation: lockLogoEnter 0.5s ease-out; +} + +.o_fp_lock_logo_frame { + display: inline-flex; align-items: center; justify-content: center; + width: 84px; height: 84px; + border-radius: 20px; + margin-bottom: 12px; + padding: 14px; + box-sizing: border-box; + background: $lock-frame-bg; + border: 1px solid $lock-frame-border; + box-shadow: $lock-frame-shadow; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + + img { + max-width: 100%; max-height: 100%; + object-fit: contain; + } +} + +.o_fp_lock_logo_placeholder { + width: 100%; height: 100%; border-radius: 14px; + background: linear-gradient(135deg, #f0a500, #ff6b00); + display: inline-flex; align-items: center; justify-content: center; + font-size: 32px; font-weight: 900; color: #1a1d21; +} + +.o_fp_lock_logo_text { + font-size: 19px; font-weight: 700; letter-spacing: -0.01em; + color: $lock-text; +} + +.o_fp_lock_logo_sub { + font-size: 11px; + text-transform: uppercase; letter-spacing: 0.15em; + margin-top: 4px; + color: $lock-muted; +} + +// === Clock block ==================================================== +.o_fp_lock_clock_block { + text-align: center; + font-variant-numeric: tabular-nums; + animation: lockClockEnter 0.5s ease-out 0.1s both; +} + +.o_fp_lock_clock { + font-size: 40px; font-weight: 800; + letter-spacing: -0.03em; line-height: 1; + color: $lock-text; +} + +.o_fp_lock_clock_date { + font-size: 12px; + text-transform: uppercase; letter-spacing: 0.12em; + margin-top: 4px; + color: $lock-muted; +} + +// === Prompt pill ==================================================== +.o_fp_lock_prompt { + font-size: 13px; font-weight: 700; + text-transform: uppercase; letter-spacing: 0.18em; + color: $lock-prompt; + display: inline-flex; align-items: center; gap: 8px; + padding: 6px 16px; + border-radius: 999px; + background: $lock-prompt-bg; + border: 1px solid $lock-prompt-border; + animation: lockClockEnter 0.5s ease-out 0.2s both; +} + +// === Tile grid ====================================================== +.o_fp_lock_tiles { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 12px; + width: 100%; + max-width: 480px; +} + +.o_fp_lock_tile { + background: $lock-tile-bg; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid $lock-tile-border; + border-radius: 14px; + padding: 14px 8px 12px; + text-align: center; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + cursor: pointer; + animation: lockTileEnter 0.4s cubic-bezier(0.4, 0, 0.2, 1) both; + box-shadow: 0 1px 3px rgba(0,0,0,0.04); + color: inherit; + + &:hover, &:focus-visible { + background: $lock-tile-hover-bg; + border-color: $lock-tile-hover-border; + transform: translateY(-3px); + box-shadow: $lock-tile-hover-shadow; + outline: none; + } + &:focus-visible { + outline: 2px solid $lock-tile-hover-border; + outline-offset: 2px; + } + &:active { + transform: scale(0.97); + transition: transform 0.05s; + } +} + +.o_fp_lock_avatar { + width: 52px; height: 52px; border-radius: 50%; + display: inline-flex; align-items: center; justify-content: center; + font-size: 21px; font-weight: 700; color: #fff; + margin-bottom: 8px; + box-shadow: 0 4px 12px rgba(0,0,0,0.15); + position: relative; + overflow: hidden; + + img { + width: 100%; height: 100%; + object-fit: cover; + border-radius: 50%; + } + + &.is-clocked::after { + content: ''; position: absolute; + width: 12px; height: 12px; border-radius: 50%; + background: $lock-status-clocked; + bottom: 0; right: 0; + border: 2px solid $lock-pulse-dot-border; + animation: lockPulseDot 2s ease-in-out infinite; + } +} + +.o_fp_lock_name { + font-size: 12px; font-weight: 600; + line-height: 1.3; + color: $lock-text; +} + +.o_fp_lock_status { + font-size: 10px; + margin-top: 4px; + font-weight: 500; + + &.status-clocked { color: $lock-status-clocked; } + &.status-pin { color: $lock-status-pin; } +} + +// === Empty / loading states ========================================= +.o_fp_lock_loading, +.o_fp_lock_empty { + margin: 2rem auto; + color: $lock-muted; + font-size: 14px; +} + +// === PIN pad wrap =================================================== +.o_fp_lock_pinwrap { + margin-top: 8px; + animation: lockClockEnter 0.3s ease-out; +} + +// === Animations ===================================================== +@keyframes lockLogoEnter { + from { opacity: 0; transform: translateY(-12px); } + to { opacity: 1; transform: translateY(0); } +} +@keyframes lockClockEnter { + from { opacity: 0; transform: translateY(8px); } + to { opacity: 1; transform: translateY(0); } +} +@keyframes lockTileEnter { + from { opacity: 0; transform: translateY(16px) scale(0.96); } + to { opacity: 1; transform: translateY(0) scale(1); } +} +@keyframes lockPulseDot { + 0%, 100% { box-shadow: 0 0 0 0 rgba(52,199,89,0.6); } + 50% { box-shadow: 0 0 0 6px rgba(52,199,89,0); } +} + +// === Reduced-motion override (accessibility) ======================== +@media (prefers-reduced-motion: reduce) { + .o_fp_tablet_lock, + .o_fp_lock_logo_block, + .o_fp_lock_clock_block, + .o_fp_lock_prompt, + .o_fp_lock_tile, + .o_fp_lock_avatar.is-clocked::after, + .o_fp_lock_pinwrap { + animation: none !important; + transition: none !important; + } +} +``` + +- [ ] **Step 2: Commit (will compile after manifest update in Task 6)** + +```bash +git add fusion_plating_shopfloor/static/src/scss/tablet_lock.scss && git commit -m "feat(shopfloor): rewrite tablet_lock.scss for the 2026-05-24 redesign + +Full rewrite per spec §4–§6: + - Full-viewport gradient bg (two radial ambient glows over linear) + - Glassmorphic logo frame (84px rounded-20, backdrop-blur) + - 40px tabular-nums clock + uppercase tracked date + - Amber prompt pill + - 3-column tile grid (max 480px) with frosted-glass tiles + - 52px circular avatars with status pulse-dot overlay + - 4 entrance keyframes + hover lift + click press + clocked-in pulse + - prefers-reduced-motion override disables all animation + transition + +Dark / light parity via the new _tablet_lock_tokens.scss compile-time +branch (project rule). No JS-side theme code. + +Co-Authored-By: Claude Opus 4.7 (1M context) " +``` + +--- + +## Task 4 — XML template extension + +**Files:** +- Modify: `fusion_plating_shopfloor/static/src/xml/tablet_lock.xml` (replace contents) + +- [ ] **Step 1: Replace the file** + +```xml + + + + + +
+ + +
+
+ +
+
+
+
+
+ + +
+
+
+
+ + +
+ Tap your name +
+ + +
+