Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add view mode to hide away menu and status bars (#1587)
Part of #728, stacked onto #1586. As demonstrated and discussed [in the original proof-of-concept branch](#1574), we want to hide the status bar and menu bar in the popup window [via a query parameter](https://github.com/tiny-pilot/tinypilot/pull/1574/files#diff-66e482e36d313dd641cd92c815c5fa30fb380bbaa601810827b30a5b84428856R351). So by appending `?viewMode=standalone` to the TinyPilot URL, this PR hides the status bar, the menu bar, and the on-screen keyboard. We will use this in a later PR, when adding the menu item for opening a “real” popup window. <img width="783" alt="Screenshot 2023-08-23 at 18 38 09" src="https://github.com/tiny-pilot/tinypilot/assets/83721279/c3a22b9b-b3b8-49a3-a5b1-88d2368337ec"> The query parameter can also be used independent of the popup window, which e.g. allows for [the iframe use-case](#523). ## Notes - `prettier-ignore` is needed above `<remote-screen>`, since Prettier cannot handle Jinja2 templates, and would enforce a pretty [bulky formatting otherwise](https://github.com/tiny-pilot/tinypilot/pull/1574/files#diff-a18b3b5de30df1bcf7531723d24c214d69b2acff3cd88540e1ff186409879b0aR81-R88). - I had to pull out a `--bar-padding` CSS variable in the `<remote-screen>` component, so that we can dynamically override the value. I forgot that in the [earlier PR](#1583). - In `index.html`, I injected the `display: none` via a plain `<style>` block to hide the elements from the page. Since `index.html` itself isn’t a web component, I’m not sure we can mimic our usual pattern with HTML attributes here ([example](https://github.com/tiny-pilot/tinypilot/blob/aa80dbdd3e58e79401008665f2199d98fa14b3d0/app/templates/custom-elements/change-hostname-dialog.html#L12-L14)), at least not without introducing more complexity and indirection. The `<style>` block is not super beautiful, but I thought it’s simple and straightforward at least. - Note sure `standalone` is the greatest name for the query parameter value. Potential alternatives: “screen-only”, “focus-mode”, “dedicated-screen”. (It’s maybe not *that* critical, however… 🤔) In any event, I found something like `?viewMode=standalone` more descriptive and flexible than `standaloneMode=true`. <a data-ca-tag href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1587"><img src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review on CodeApprove" /></a>
- Loading branch information