mirror/rio
1
0
Fork 0
mirror of https://github.com/rio-labs/rio.git synced 2026-05-07 03:49:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

the dev tools now hide when the window is resize to too small

Browse Source
This commit is contained in:
Jakob Pinterits
2024-05-26 12:38:07 +02:00
parent 87da502803
commit 7560163d61
2 changed files with 42 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/code/components/fundamentalRootComponent.ts
+25 -18
View File
@@ -22,11 +22,6 @@ export class FundamentalRootComponent extends ComponentBase {
public overlayWidth: number = 0;
public overlayHeight: number = 0;
// Whether a debugger is being displayed. This differs from just checking
// whether a debugger was provided in the state, because the debugger might
// not be displayed for space reasons.
private displayDebugger: boolean;
createElement(): HTMLElement {
let element = document.createElement('div');
element.classList.add('rio-fundamental-root-component');
@@ -45,13 +40,8 @@ export class FundamentalRootComponent extends ComponentBase {
let debugger_ = deltaState.debugger ?? this.state.debugger;
let children = [content, connectionLostComponent];
let windowWidth = window.innerWidth / pixelsPerRem;
if (debugger_ !== null && windowWidth > 40) {
if (debugger_ !== null) {
children.push(debugger_);
this.displayDebugger = true;
} else {
this.displayDebugger = false;
}
this.replaceChildren(latentComponents, children);
@@ -71,7 +61,7 @@ export class FundamentalRootComponent extends ComponentBase {
.children[1] as HTMLElement;
connectionLostPopupElement.classList.add('rio-connection-lost-popup');
if (this.displayDebugger) {
if (deltaState.debugger !== null) {
let debuggerElement = this.element.children[2] as HTMLElement;
debuggerElement.classList.add('rio-debugger');
}
@@ -105,10 +95,27 @@ export class FundamentalRootComponent extends ComponentBase {
this.overlayWidth = this.allocatedWidth;
// If there's a debugger, account for that
if (this.displayDebugger) {
let dbg = componentsById[this.state.debugger as ComponentId]!;
dbg.allocatedWidth = dbg.requestedWidth;
this.overlayWidth -= dbg.allocatedWidth;
if (this.state.debugger !== null) {
let devToolsComponent = componentsById[this.state.debugger]!;
devToolsComponent.allocatedWidth = devToolsComponent.requestedWidth;
// Even if a debugger is present, only display it if the screen is
// wide enough. Having them show up on a tall mobile screen is very
// awkward.
//
// Since the allocated height isn't available here yet, use the
// window size instead.
let screenWidth = window.innerWidth / pixelsPerRem;
let screenHeight = window.innerHeight / pixelsPerRem;
if (screenWidth > 50 && screenHeight > 30) {
devToolsComponent.element.style.removeProperty('display');
this.element.classList.remove('rio-dev-tools-hidden');
this.overlayWidth -= devToolsComponent.allocatedWidth;
} else {
devToolsComponent.element.style.display = 'none';
this.element.classList.add('rio-dev-tools-hidden');
}
}
// The child receives the remaining width. (The child is a
@@ -133,8 +140,8 @@ export class FundamentalRootComponent extends ComponentBase {
this.overlayHeight = this.allocatedHeight;
// If there's a debugger, set its height and position it
if (this.displayDebugger) {
let dbgInst = componentsById[this.state.debugger as ComponentId]!;
if (this.state.debugger !== null) {
let dbgInst = componentsById[this.state.debugger]!;
dbgInst.allocatedHeight = this.overlayHeight;
// Position it
frontend/css/style.scss
+17
View File
@@ -2169,6 +2169,23 @@ textarea:not(:placeholder-shown) ~ .rio-input-box-label,
gap: 0.5rem;
}
.rio-dev-tools-hidden::after {
pointer-events: none;
position: fixed;
top: 0;
right: 0.1rem;
bottom: 0;
content: 'Screen too small for Dev Tools';
color: var(--rio-global-neutral-fg);
font-size: 0.8rem;
writing-mode: vertical-rl;
text-align: center;
opacity: 0.5;
}
// Expander Arrow
.rio-debugger-component-tree-item
> .rio-debugger-component-tree-item-header