aglinxinyuan opened a new pull request, #5083: URL: https://github.com/apache/texera/pull/5083
## Summary - Adds an iOS WKWebView wrapper app under `ios/` that loads the existing Angular frontend so the full workflow editor is reachable on iPhone without a separate native client. - Reshapes the Angular GUI for phone-sized viewports (<768px) — dashboard, workflow list, workflow editor, result panel, and login/about all restyle to feel like a real app. - Desktop is left alone via `@media (max-width: 767px)` gates everywhere. ## What's in this PR - `ios/` — SwiftUI scaffold managed by XcodeGen (`project.yml` is source of truth; generated `Texera.xcodeproj` is committed so contributors can just open it in Xcode). App icon rendered from `assets/logos/android-chrome-512x512.png` upscaled to 1024×1024 on opaque white. `WKWebView` enables back/forward gestures, pull-to-refresh, and routes `target="_blank"` opens back into the same view. - Mobile dashboard: hide `#nav` (search + sign-in) and the left `nz-sider` (Hub / About menu) so the content fills the viewport. - Mobile workflow list (`<texera-list-item>`): hide every per-row `.resource-info` column (avatar / views / size / created / edited / like), drop the inline rename / edit-description buttons via hover suppression + `pointer-events:none` on the description, and hide the hover-revealed `.button-group` action row (share / copy / download / delete). Header utility-button-group hidden too. - Mobile workflow editor (`<texera-workspace>`): hide `texera-mini-map`, `texera-left-panel`, `texera-property-editor`, `texera-agent-panel`. The `<texera-menu>` is restyled into a frosted-glass title card pinned top-center with Run + Kill buttons inside; `#menu-user`, `#user-buttons`, `#expanded-utilities`, `#utilities-dropdown-button`, share, computing-unit selector, checkpoint, connection badge, and execution-duration timer are all hidden. - Workflow auto-center on mobile: rewrote `handleCenterEvent` to use `joint graph.getCellsBBox(cells)` and map the operators' bbox center to (viewport − top card − 40vh result panel) center. `workspace.component.ts` fires `triggerCenterEvent()` after `reloadWorkflow` on mobile so saved positions chosen on desktop don't end up off-screen. - Mobile result panel: opens automatically on init via `openPanel()`, docked to a 40vh band at the bottom by CSS overrides (cdkDrag transform neutralized, `width`/`height` forced with `!important`). Vertical tab list, "Search Columns" input, column-navigation buttons, per-cell download button, and Min/Max/Non-Null sub-header all hidden. - Mobile about / login page: new mobile-hero (peacock logo + tagline) + in-flow login card replaces the desktop layout (login is absolute-positioned top-right on desktop). About prose hidden, condensed "Learn more about Texera →" link in its place. `local-login` card redesigned: rounded corners, soft shadow, 16px inputs to suppress iOS focus-zoom, 44pt button. Login card now renders unconditionally so a user with a persisted WKWebView session can still sign in as someone else. - `styles.scss`: globally suppress `nz-popover` on phones — tap-induced `:hover` was firing the Run button's "Execution Settings" popover (among others). ## Test plan - [ ] `cd ios && xcodegen generate && open Texera.xcodeproj`; build and run in iPhone simulator — app loads `http://localhost:4200` with the Texera peacock icon on the home screen - [ ] Browser at 390×844 viewport `/dashboard/about` — peacock hero on top, login card below it, no nav chrome, no marketing wall of text - [ ] Sign in, navigate to `/dashboard/user/workflow` — workflow rows show just `[type-icon] #id name`, no metadata columns, no hover-action row; tap a row opens the editor - [ ] Open a workflow on mobile — operators are centered in the visible canvas band (above the bottom result panel, below the top title card); Run button reachable in the title card; result panel always docked at the bottom 40vh - [ ] Tap Run — workflow executes; Kill button appears (and disables again on completion); no "Execution Settings" hover-popover fires - [ ] Resize browser back ≥768px — desktop layout fully intact (sider, top nav, full toolbar, property editor, minimap, full result panel chrome all return) 🤖 Generated with [Claude Code](https://claude.com/claude-code) -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
