Skip to content

Commit cee30b7

Browse files
CatchABusCatchABus
authored
feat(core): flexbox css gutters support (#11310)
1 parent 7f61415 commit cee30b7

16 files changed

Lines changed: 674 additions & 975 deletions

File tree

‎apps/toolbox/src/app.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ Button {
7373
font-size: 17;
7474
}
7575

76-
.box-shadow-demo .box-shadow-prop-controls TextField{
76+
.box-shadow-demo .box-shadow-prop-controls TextField {
7777
margin-left: 10;
7878
padding: 5;
7979
border-bottom-width: 1;

‎apps/toolbox/src/main-page.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<Button text="dialogs" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
1515
<Button text="forms" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
1616
<Button text="glass-effects" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
17+
<Button text="gutters" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
1718
<Button text="image-async" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
1819
<Button text="image-handling" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
1920
<Button text="labels" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />

‎apps/toolbox/src/pages/gutters.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { fromObject, EventData, Page } from '@nativescript/core';
2+
3+
export function navigatingTo(args: EventData) {
4+
const page = <Page>args.object;
5+
page.bindingContext = fromObject({
6+
rowGap: 16,
7+
columnGap: 16,
8+
gap: 16,
9+
});
10+
}

‎apps/toolbox/src/pages/gutters.xml‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
2+
<Page.actionBar>
3+
<ActionBar title="Gutters" class="action-bar">
4+
</ActionBar>
5+
</Page.actionBar>
6+
<ScrollView>
7+
<StackLayout class="gutters-demo" padding="16">
8+
<Label text="Flexbox row gap" textAlignment="center" marginBottom="16"/>
9+
<FlexboxLayout width="200" flexWrap="wrap" rowGap="{{ rowGap }}">
10+
<Label text="One" textAlignment="center" backgroundColor="rgb(0 0 255 / 0.2)" borderColor="blue" borderWidth="1" borderRadius="8" padding="8" flexGrow="1"/>
11+
<Label text="Two" textAlignment="center" backgroundColor="rgb(0 0 255 / 0.2)" borderColor="blue" borderWidth="1" borderRadius="8" padding="8" flexGrow="1"/>
12+
<Label text="Three" textAlignment="center" backgroundColor="rgb(0 0 255 / 0.2)" borderColor="blue" borderWidth="1" borderRadius="8" padding="8" flexGrow="1"/>
13+
<Label text="Four" textAlignment="center" backgroundColor="rgb(0 0 255 / 0.2)" borderColor="blue" borderWidth="1" borderRadius="8" padding="8" flexGrow="1"/>
14+
<Label text="Five" textAlignment="center" backgroundColor="rgb(0 0 255 / 0.2)" borderColor="blue" borderWidth="1" borderRadius="8" padding="8" flexGrow="1"/>
15+
</FlexboxLayout>
16+
<StackLayout orientation="horizontal" marginTop="16" horizontalAlignment="center">
17+
<Label verticalAlignment="center" text="Type row gap:" />
18+
<TextField hint="Gap" text="{{ rowGap }}" keyboardType="number" maxLength="2">
19+
</TextField>
20+
</StackLayout>
21+
<Label text="Flexbox column gap" textAlignment="center" marginTop="16" marginBottom="16"/>
22+
<FlexboxLayout width="300" flexWrap="wrap" columnGap="{{ columnGap }}">
23+
<Label text="One" textAlignment="center" backgroundColor="rgb(0 0 255 / 0.2)" borderColor="blue" borderWidth="1" borderRadius="8" padding="8" flexGrow="1"/>
24+
<Label text="Two" textAlignment="center" backgroundColor="rgb(0 0 255 / 0.2)" borderColor="blue" borderWidth="1" borderRadius="8" padding="8" flexGrow="1"/>
25+
<Label text="Three" textAlignment="center" backgroundColor="rgb(0 0 255 / 0.2)" borderColor="blue" borderWidth="1" borderRadius="8" padding="8" flexGrow="1"/>
26+
<Label text="Four" textAlignment="center" backgroundColor="rgb(0 0 255 / 0.2)" borderColor="blue" borderWidth="1" borderRadius="8" padding="8" flexGrow="1"/>
27+
<Label text="Five" textAlignment="center" backgroundColor="rgb(0 0 255 / 0.2)" borderColor="blue" borderWidth="1" borderRadius="8" padding="8" flexGrow="1"/>
28+
</FlexboxLayout>
29+
<StackLayout orientation="horizontal" marginTop="16" horizontalAlignment="center">
30+
<Label verticalAlignment="center" text="Type column gap:" />
31+
<TextField hint="Gap" text="{{ columnGap }}" keyboardType="number" maxLength="2">
32+
</TextField>
33+
</StackLayout>
34+
<Label text="Flexbox gap" textAlignment="center" marginTop="16" marginBottom="16"/>
35+
<FlexboxLayout width="250" flexWrap="wrap" gap="{{ gap }}">
36+
<Label text="One" textAlignment="center" backgroundColor="rgb(0 0 255 / 0.2)" borderColor="blue" borderWidth="1" borderRadius="8" padding="8" flexGrow="1"/>
37+
<Label text="Two" textAlignment="center" backgroundColor="rgb(0 0 255 / 0.2)" borderColor="blue" borderWidth="1" borderRadius="8" padding="8" flexGrow="1"/>
38+
<Label text="Three" textAlignment="center" backgroundColor="rgb(0 0 255 / 0.2)" borderColor="blue" borderWidth="1" borderRadius="8" padding="8" flexGrow="1"/>
39+
<Label text="Four" textAlignment="center" backgroundColor="rgb(0 0 255 / 0.2)" borderColor="blue" borderWidth="1" borderRadius="8" padding="8" flexGrow="1"/>
40+
<Label text="Five" textAlignment="center" backgroundColor="rgb(0 0 255 / 0.2)" borderColor="blue" borderWidth="1" borderRadius="8" padding="8" flexGrow="1"/>
41+
</FlexboxLayout>
42+
<StackLayout orientation="horizontal" marginTop="16" horizontalAlignment="center">
43+
<Label verticalAlignment="center" text="Type gap:" />
44+
<TextField hint="Gap" text="{{ gap }}" keyboardType="number" maxLength="2">
45+
</TextField>
46+
</StackLayout>
47+
</StackLayout>
48+
</ScrollView>
49+
</Page>

‎packages/core/debugger/dom-types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { PercentLength } from '../ui/styling/length-shared';
55
import { getSetProperties, getComputedCssValues } from '../ui/core/properties';
66
const ELEMENT_NODE_TYPE = 1;
77
const ROOT_NODE_TYPE = 9;
8-
const propertyBlacklist = ['effectivePaddingLeft', 'effectivePaddingBottom', 'effectivePaddingRight', 'effectivePaddingTop', 'effectiveBorderTopWidth', 'effectiveBorderRightWidth', 'effectiveBorderBottomWidth', 'effectiveBorderLeftWidth', 'effectiveMinWidth', 'effectiveMinHeight', 'effectiveWidth', 'effectiveHeight', 'effectiveMarginLeft', 'effectiveMarginTop', 'effectiveMarginRight', 'effectiveMarginBottom', 'nodeName', 'nodeType', 'decodeWidth', 'decodeHeight', 'ng-reflect-items', 'domNode', 'touchListenerIsSet', 'bindingContext', 'nativeView'];
8+
const propertyBlacklist = ['effectivePaddingLeft', 'effectivePaddingBottom', 'effectivePaddingRight', 'effectivePaddingTop', 'effectiveBorderTopWidth', 'effectiveBorderRightWidth', 'effectiveBorderBottomWidth', 'effectiveBorderLeftWidth', 'effectiveMinWidth', 'effectiveMinHeight', 'effectiveWidth', 'effectiveHeight', 'effectiveMarginLeft', 'effectiveMarginTop', 'effectiveMarginRight', 'effectiveMarginBottom', 'effectiveRowGap', 'effectiveColumnGap', 'nodeName', 'nodeType', 'decodeWidth', 'decodeHeight', 'ng-reflect-items', 'domNode', 'touchListenerIsSet', 'bindingContext', 'nativeView'];
99

1010
function lazy<T>(action: () => T): () => T {
1111
let _value: T;

‎packages/core/platforms/android/widgets-release.aar‎

-2.67 KB
Binary file not shown.

‎packages/core/ui/core/view-base/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -542,6 +542,8 @@ export abstract class ViewBase extends Observable {
542542
public effectiveBorderRightWidth: number;
543543
public effectiveBorderBottomWidth: number;
544544
public effectiveBorderLeftWidth: number;
545+
public effectiveRowGap: number;
546+
public effectiveColumnGap: number;
545547

546548
/**
547549
* @private
@@ -1569,6 +1571,8 @@ ViewBase.prototype.effectiveBorderTopWidth = 0;
15691571
ViewBase.prototype.effectiveBorderRightWidth = 0;
15701572
ViewBase.prototype.effectiveBorderBottomWidth = 0;
15711573
ViewBase.prototype.effectiveBorderLeftWidth = 0;
1574+
ViewBase.prototype.effectiveRowGap = 0;
1575+
ViewBase.prototype.effectiveColumnGap = 0;
15721576
ViewBase.prototype._isViewBase = true;
15731577
ViewBase.prototype.recycleNativeView = 'never';
15741578
ViewBase.prototype.reusable = false;

‎packages/core/ui/layouts/flexbox-layout/flexbox-layout-common.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { View, CSSType } from '../../core/view';
33
import { CssProperty, ShorthandProperty, makeParser, makeValidator } from '../../core/properties';
44
import { unsetValue } from '../../core/properties/property-shared';
55
import { Style } from '../../styling/style';
6+
import { CoreTypes } from '../../../core-types';
67

78
export type Basis = 'auto' | number;
89

@@ -181,6 +182,27 @@ export abstract class FlexboxLayoutBase extends LayoutBase {
181182
this.style.alignContent = value;
182183
}
183184

185+
get gap(): string | CoreTypes.LengthType {
186+
return this.style.gap;
187+
}
188+
set gap(value: string | CoreTypes.LengthType) {
189+
this.style.gap = value;
190+
}
191+
192+
get rowGap(): CoreTypes.LengthType {
193+
return this.style.rowGap;
194+
}
195+
set rowGap(value: CoreTypes.LengthType) {
196+
this.style.rowGap = value;
197+
}
198+
199+
get columnGap(): CoreTypes.LengthType {
200+
return this.style.columnGap;
201+
}
202+
set columnGap(value: CoreTypes.LengthType) {
203+
this.style.columnGap = value;
204+
}
205+
184206
public static setOrder(view: View, order: number) {
185207
validateArgs(view).style.order = order;
186208
}

‎packages/core/ui/layouts/flexbox-layout/index.android.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent, Flex
22
import { CoreTypes } from '../../../core-types';
33
import { View } from '../../core/view';
44
import { Length } from '../../styling/length-shared';
5+
import { columnGapProperty, rowGapProperty } from '../../styling/style-properties';
56

67
export * from './flexbox-layout-common';
78

@@ -132,6 +133,22 @@ export class FlexboxLayout extends FlexboxLayoutBase {
132133
this.nativeViewProtected.setAlignContent(alignContentMap[alignContent]);
133134
}
134135

136+
[rowGapProperty.getDefault](): CoreTypes.LengthType {
137+
return rowGapProperty.defaultValue;
138+
}
139+
[rowGapProperty.setNative](value: CoreTypes.LengthType) {
140+
const gap = value ? Length.toDevicePixels(value, 0) : 0;
141+
this.nativeViewProtected.setRowGap(Math.max(gap, 0));
142+
}
143+
144+
[columnGapProperty.getDefault](): CoreTypes.LengthType {
145+
return columnGapProperty.defaultValue;
146+
}
147+
[columnGapProperty.setNative](value: CoreTypes.LengthType) {
148+
const gap = value ? Length.toDevicePixels(value, 0) : 0;
149+
this.nativeViewProtected.setColumnGap(Math.max(gap, 0));
150+
}
151+
135152
public _updateNativeLayoutParams(child: View): void {
136153
super._updateNativeLayoutParams(child);
137154

‎packages/core/ui/layouts/flexbox-layout/index.d.ts‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { LayoutBase } from '../layout-base';
22
import { Style } from '../../styling/style';
33
import { CssProperty } from '../../core/properties';
44
import { View } from '../../core/view';
5-
import { CoreTypes } from '../../enums';
5+
import { CoreTypes } from '../../../core-types';
66

77
export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
88
export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
@@ -68,6 +68,24 @@ export class FlexboxLayout extends LayoutBase {
6868
* @nsProperty
6969
*/
7070
public alignContent: AlignContent;
71+
/**
72+
* Gets or sets the gaps between rows and columns
73+
*
74+
* @nsProperty
75+
*/
76+
public gap: string | CoreTypes.LengthType;
77+
/**
78+
* Gets or sets the gap between rows
79+
*
80+
* @nsProperty
81+
*/
82+
public rowGap: CoreTypes.LengthType;
83+
/**
84+
* Gets or sets the gap between columns
85+
*
86+
* @nsProperty
87+
*/
88+
public columnGap: CoreTypes.LengthType;
7189

7290
public static setOrder(view: View, order: number);
7391
public static getOrder(view: View): number;

0 commit comments

Comments
 (0)