Skip to content

Commit 800fe22

Browse files
DotneteerDotneteer
committed
wip
1 parent 0bace0a commit 800fe22

File tree

5 files changed

+222
-0
lines changed

5 files changed

+222
-0
lines changed

‎docs/content/components/App.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ Available values:
3838
| `condensed-sticky` | However, the header and the navigation bar are in a single header block. |
3939
| `horizontal` | This layout stacks the layout sections in a single column in this order: header, navigation bar, main content, and footer. The application is a single scroll container; every part moves as you scroll the page. |
4040
| `horizontal-sticky` | Similar to `horizontal`, the header and the navigation bar dock to the top of the viewport, while the footer sticks to the bottom. |
41+
| `desktop` | This layout stretches the app to fill the entire browser viewport with zero padding and margins. The header (if present) docks to the top, the footer (if present) docks to the bottom, and the main content stretches to fill the remaining vertical and horizontal space. |
4142

4243
Here are a few samples demonstrating the usage of the `layout` property. All samples use this markup, except the value of `App`'s layout and a few marked code snippets:
4344

@@ -296,6 +297,36 @@ Here are a few samples demonstrating the usage of the `layout` property. All sam
296297
</App>
297298
```
298299

300+
#### `desktop` [#desktop]
301+
302+
The `desktop` layout is designed for full-screen desktop applications. It stretches the app to fill the entire browser viewport with zero padding and margins. The header (if present) docks to the top, the footer (if present) docks to the bottom, and the main content area stretches to fill all remaining vertical and horizontal space. This layout ignores all max-width constraints and scrollbar gutter settings to ensure edge-to-edge display.
303+
304+
```xmlui-pg copy name="Example: 'desktop' layout" height="300px"
305+
<App layout="desktop">
306+
<AppHeader>
307+
<property name="logoTemplate">
308+
<Heading level="h3" value="Example App"/>
309+
</property>
310+
</AppHeader>
311+
<Pages fallbackPath="/">
312+
<Page url="/">
313+
<List data="https://api.spacexdata.com/v3/history">
314+
<property name="itemTemplate">
315+
<Card title="{$item.title}" subtitle="{$item.details}"/>
316+
</property>
317+
</List>
318+
</Page>
319+
<Page url="/page1">
320+
<Text value="Page 1" />
321+
</Page>
322+
<Page url="/page2">
323+
<Text value="Page 2" />
324+
</Page>
325+
</Pages>
326+
<Footer>Powered by XMLUI</Footer>
327+
</App>
328+
```
329+
299330
### `loggedInUser` [#loggedinuser]
300331

301332
Stores information about the currently logged-in user. By not defining this property, you can indicate that no user is logged in.

‎xmlui/src/components/App/App.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,36 @@ Here are a few samples demonstrating the usage of the `layout` property. All sam
266266
</App>
267267
```
268268

269+
#### `desktop`
270+
271+
The `desktop` layout is designed for full-screen desktop applications. It stretches the app to fill the entire browser viewport with zero padding and margins. The header (if present) docks to the top, the footer (if present) docks to the bottom, and the main content area stretches to fill all remaining vertical and horizontal space. This layout ignores all max-width constraints and scrollbar gutter settings to ensure edge-to-edge display.
272+
273+
```xmlui-pg copy name="Example: 'desktop' layout" height="300px"
274+
<App layout="desktop">
275+
<AppHeader>
276+
<property name="logoTemplate">
277+
<Heading level="h3" value="Example App"/>
278+
</property>
279+
</AppHeader>
280+
<Pages fallbackPath="/">
281+
<Page url="/">
282+
<List data="https://api.spacexdata.com/v3/history">
283+
<property name="itemTemplate">
284+
<Card title="{$item.title}" subtitle="{$item.details}"/>
285+
</property>
286+
</List>
287+
</Page>
288+
<Page url="/page1">
289+
<Text value="Page 1" />
290+
</Page>
291+
<Page url="/page2">
292+
<Text value="Page 2" />
293+
</Page>
294+
</Pages>
295+
<Footer>Powered by XMLUI</Footer>
296+
</App>
297+
```
298+
269299
%-PROP-END
270300

271301
%-PROP-START scrollWholePage

‎xmlui/src/components/App/App.module.scss‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,112 @@ $maxWidth-App: createThemeVar("maxWidth-App");
102102
}
103103
}
104104

105+
&.desktop {
106+
width: 100vw;
107+
height: 100vh;
108+
margin: 0;
109+
padding: 0;
110+
overflow: hidden;
111+
display: flex;
112+
flex-direction: column;
113+
scrollbar-gutter: auto;
114+
max-width: none;
115+
116+
// When nested (like in playground), use container dimensions instead of viewport
117+
&:global(.nested-app) {
118+
width: 100%;
119+
height: 100%;
120+
}
121+
122+
.headerWrapper {
123+
position: sticky;
124+
top: 0;
125+
flex-shrink: 0;
126+
z-index: 1;
127+
margin: 0 !important;
128+
padding: 0 !important;
129+
max-width: none !important;
130+
width: 100% !important;
131+
132+
& > * {
133+
margin: 0 !important;
134+
padding: 0 !important;
135+
max-width: none !important;
136+
width: 100% !important;
137+
}
138+
139+
& * {
140+
max-width: none !important;
141+
padding-inline: 0 !important;
142+
padding-left: 0 !important;
143+
padding-right: 0 !important;
144+
margin-inline: 0 !important;
145+
margin-left: 0 !important;
146+
margin-right: 0 !important;
147+
}
148+
149+
:global(.headerInner) {
150+
padding: 0 !important;
151+
margin: 0 !important;
152+
padding-inline: 0 !important;
153+
max-width: none !important;
154+
}
155+
}
156+
157+
.PagesWrapper {
158+
flex: 1;
159+
min-height: 0;
160+
overflow: hidden;
161+
display: flex;
162+
flex-direction: column;
163+
scrollbar-gutter: auto;
164+
margin: 0;
165+
padding: 0;
166+
max-width: none;
167+
width: 100%;
168+
}
169+
170+
.PagesWrapperInner {
171+
flex: 1;
172+
min-height: 0;
173+
max-width: none;
174+
width: 100%;
175+
margin: 0;
176+
padding: 0;
177+
overflow: auto;
178+
display: flex;
179+
flex-direction: column;
180+
scrollbar-gutter: auto;
181+
}
182+
183+
.footerWrapper {
184+
position: sticky;
185+
bottom: 0;
186+
flex-shrink: 0;
187+
margin: 0 !important;
188+
padding: 0 !important;
189+
max-width: none !important;
190+
width: 100% !important;
191+
192+
& > * {
193+
margin: 0 !important;
194+
padding: 0 !important;
195+
max-width: none !important;
196+
width: 100% !important;
197+
}
198+
199+
& * {
200+
max-width: none !important;
201+
padding-inline: 0 !important;
202+
padding-left: 0 !important;
203+
padding-right: 0 !important;
204+
margin-inline: 0 !important;
205+
margin-left: 0 !important;
206+
margin-right: 0 !important;
207+
}
208+
}
209+
}
210+
105211
&.verticalFullHeader {
106212
min-height: 100%;
107213
height: 100%;
@@ -171,6 +277,24 @@ $maxWidth-App: createThemeVar("maxWidth-App");
171277
padding-inline: var(--scrollbar-width);
172278
}
173279
}
280+
281+
&.desktop {
282+
scrollbar-gutter: auto;
283+
284+
.headerWrapper {
285+
& > div {
286+
padding-inline: 0;
287+
}
288+
margin-inline: 0;
289+
}
290+
291+
.footerWrapper {
292+
margin-inline: 0;
293+
& > div {
294+
padding-inline: 0;
295+
}
296+
}
297+
}
174298
}
175299

176300
&:not(.scrollWholePage) {

‎xmlui/src/components/App/AppLayoutContext.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const appLayoutNames = [
1010
"condensed-sticky",
1111
"horizontal",
1212
"horizontal-sticky",
13+
"desktop",
1314
] as const;
1415
export const appLayoutMd: readonly PropertyValueDescription[] = [
1516
{
@@ -46,6 +47,11 @@ export const appLayoutMd: readonly PropertyValueDescription[] = [
4647
description:
4748
"Similar to `horizontal`, the header and the navigation bar dock to the top of the viewport, while the footer sticks to the bottom.",
4849
},
50+
{
51+
value: "desktop",
52+
description:
53+
"This layout stretches the app to fill the entire browser viewport with zero padding and margins. The header (if present) docks to the top, the footer (if present) docks to the bottom, and the main content stretches to fill the remaining vertical and horizontal space.",
54+
},
4955
] as const;
5056

5157
export const appLayouts: string[] = [...appLayoutNames];

‎xmlui/src/components/App/AppNative.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,13 +238,17 @@ export function App({
238238
safeLayout === "horizontal" ||
239239
safeLayout === "condensed"
240240
? "0px"
241+
: safeLayout === "desktop"
242+
? headerHeight + "px"
241243
: headerHeight + "px",
242244
"--footer-height":
243245
!scrollWholePage ||
244246
safeLayout === "vertical" ||
245247
safeLayout === "horizontal" ||
246248
safeLayout === "condensed"
247249
? "0px"
250+
: safeLayout === "desktop"
251+
? footerHeight + "px"
248252
: footerHeight + "px",
249253
"--header-abs-height": headerHeight + "px",
250254
"--footer-abs-height": footerHeight + "px",
@@ -361,6 +365,7 @@ export function App({
361365
"media-desktop": mediaSize.desktop,
362366
"media-phone": mediaSize.phone,
363367
"media-tablet": mediaSize.tablet,
368+
"nested-app": appGlobals?.isNested || false,
364369
},
365370
];
366371

@@ -521,6 +526,32 @@ export function App({
521526
</div>
522527
);
523528
break;
529+
case "desktop":
530+
content = (
531+
<div
532+
{...rest}
533+
className={classnames(wrapperBaseClasses, styles.desktop)}
534+
style={styleWithHelpers}
535+
>
536+
{header && (
537+
<header
538+
className={classnames(styles.headerWrapper, styles.sticky)}
539+
ref={headerRefCallback}
540+
>
541+
{header}
542+
</header>
543+
)}
544+
<div className={styles.PagesWrapper} ref={noScrollPageContainerRef}>
545+
<div className={styles.PagesWrapperInner}>{children}</div>
546+
</div>
547+
{footer && (
548+
<div className={classnames(styles.footerWrapper, styles.sticky)} ref={footerRefCallback}>
549+
{footer}
550+
</div>
551+
)}
552+
</div>
553+
);
554+
break;
524555
default:
525556
throw new Error("layout type not supported: " + safeLayout);
526557
}

0 commit comments

Comments
 (0)