Add view mode to hide away menu and status bars#1587
Merged
jotaen4tinypilot merged 6 commits intomasterfrom Aug 24, 2023
Merged
Add view mode to hide away menu and status bars#1587jotaen4tinypilot merged 6 commits intomasterfrom
jotaen4tinypilot merged 6 commits intomasterfrom
Conversation
jdeanwallace
previously requested changes
Aug 24, 2023
Contributor
jdeanwallace
left a comment
jdeanwallace
left a comment
There was a problem hiding this comment.
Automated comment from CodeApprove ➜
⏳ Approval Pending (1 unresolved comments)
Approval will be granted automatically when all comments are resolved
LGTM!
In: app/templates/index.html:
> Line 20
</style>
(optional) What do you think about controlling the remote-screen's padding from here too?
Something like:
#remote-screen {
--menu-bar-height: 0;
--status-bar-height: 0;
--bar-padding: 0;
}That way we can drop the the remote-screen's no-margins attribute and all the standalone-mode styling is grouped together.
👀 @jotaen4tinypilot it's your turn please take a look
# Conflicts: # app/templates/index.html
Contributor
Author
jotaen4tinypilot
left a comment
jotaen4tinypilot
left a comment
There was a problem hiding this comment.
Automated comment from CodeApprove ➜
In: app/templates/index.html:
> Line 26
</style>
Yeah, that’s indeed simpler and more concise!
jdeanwallace
approved these changes
Aug 24, 2023
Contributor
jdeanwallace
left a comment
jdeanwallace
left a comment
There was a problem hiding this comment.
Automated comment from CodeApprove ➜
Approved: I have approved this change on CodeApprove and all of my comments have been resolved.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of #728, stacked onto #1586.
As demonstrated and discussed in the original proof-of-concept branch, we want to hide the status bar and menu bar in the popup window via a query parameter. So by appending
?viewMode=standaloneto 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.
The query parameter can also be used independent of the popup window, which e.g. allows for the iframe use-case.
Notes
prettier-ignoreis needed above<remote-screen>, since Prettier cannot handle Jinja2 templates, and would enforce a pretty bulky formatting otherwise.--bar-paddingCSS variable in the<remote-screen>component, so that we can dynamically override the value. I forgot that in the earlier PR.index.html, I injected thedisplay: nonevia a plain<style>block to hide the elements from the page. Sinceindex.htmlitself isn’t a web component, I’m not sure we can mimic our usual pattern with HTML attributes here (example), 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.standaloneis 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=standalonemore descriptive and flexible thanstandaloneMode=true.