Skip to content

feat(ios): View background UI rework #10374

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NathanWalker merged 30 commits into from
Sep 6, 2023
Merged

feat(ios): View background UI rework #10374

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
9804042
fix(ios): Box shadow does not adjust to match non-uniform corner radius
CatchABus Jun 18, 2023
1a0e69e
fix: Apply default shadow bg color to bg layer
CatchABus Jun 18, 2023
50e95cc
chore: Set shadow path to null in case of no radius
CatchABus Jun 18, 2023
af56f6c
fix: Clip path should apply to main layer
CatchABus Jun 18, 2023
211b681
ref: Formatted box shadow values for Background instances
CatchABus Jun 18, 2023
be4066e
ref: Partial revert of previous commit
CatchABus Jun 18, 2023
b0ac3d7
fix: Check for null shadow value
CatchABus Jun 18, 2023
c169d75
chore: Minor comment correction
CatchABus Jun 18, 2023
0a07591
chore: Renamed CSSShadowLengthTypes into ShadowCSSValues
CatchABus Jun 18, 2023
670a63a
ref: Getting rid of 'getShadowLayer' function
CatchABus Jun 18, 2023
3baf986
fix: Make sure background layer is first among nested layers
CatchABus Jun 19, 2023
dc72a6b
fix: Background image is flipped after rendering
CatchABus Jun 19, 2023
b06785a
fix: Proper background color change for button and list picker
CatchABus Jun 19, 2023
a1578a7
fix: Outer shadow with transparent background
CatchABus Jun 25, 2023
916c357
fix: Shadow and gradient layout improvements
CatchABus Jul 15, 2023
01ae48c
fix: Animatable size for view with shadow
CatchABus Jul 16, 2023
2cb876c
fix: Proper formula for clip-path: circle
CatchABus Jul 16, 2023
a48eb4d
feat: Animatable clip path
CatchABus Jul 27, 2023
5423f41
feat: Rounded multi-colored borders
CatchABus Aug 24, 2023
34e9f01
fix: Native view null check
CatchABus Aug 24, 2023
a71769f
chore: Updated ui samples
CatchABus Aug 25, 2023
517c4eb
chore: Minor text shadow change
CatchABus Aug 25, 2023
4cb752f
feat: Transparent background with box shadow
CatchABus Aug 27, 2023
71ea60a
chore: Naming improvements
CatchABus Aug 31, 2023
abb976a
fix: Prevent borders from hiding nested views
CatchABus Aug 31, 2023
f18b04d
fix: Border layers removal failure
CatchABus Aug 31, 2023
3f3d5e5
chore: Added colorful border option to toolbox shadow sample
CatchABus Aug 31, 2023
7f6c681
revert: Prevent borders from hiding nested views
CatchABus Sep 3, 2023
5dc9ddf
chore: Reverted changes related to clip-path: circle
CatchABus Sep 3, 2023
16ee5ca
fix: Colorful borders should render properly even if some of the are …
CatchABus Sep 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion apps/toolbox/src/pages/box-shadow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export class BoxShadowModel extends Observable {
// private _boxShadow: string = '5 5 5 10 rgba(255, 0, 0, .9)';

background: string;
borderColor: string;
borderWidth: number;
borderRadius: number;
appliedBoxShadow: string;
Expand Down Expand Up @@ -72,18 +73,23 @@ export class BoxShadowModel extends Observable {
this.notifyPropertyChange('selectedBorderType', value);
switch (value) {
case 'solid':
this.borderWidth = this.borderWidth ? 0 : 2;
this.borderWidth = this.borderWidth ? 0 : 5;
break;
case 'rounded':
this.borderRadius = this.borderRadius ? 0 : 10;
break;
case 'colorful':
this.borderColor = this.borderColor ? null : 'green blue pink yellow';
break;
case 'none':
this.borderColor = null;
this.borderRadius = 0;
this.borderWidth = 0;
break;
default:
break;
}
this.notifyPropertyChange('borderColor', this.borderColor);
this.notifyPropertyChange('borderRadius', this.borderRadius);
this.notifyPropertyChange('borderWidth', this.borderWidth);
}
Expand Down
188 changes: 46 additions & 142 deletions apps/toolbox/src/pages/box-shadow.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,191 +9,95 @@
<!-- layouts -->
<ScrollView height="100%" visibility="{{ selectedComponentType === 'layouts' ? 'visible' : 'collapsed' }}">
<StackLayout padding="20">
<StackLayout
width="300"
height="100"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
>
<Label text="StackLayout"></Label>
<StackLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
<Label text="StackLayout" />
</StackLayout>

<GridLayout
width="300"
height="100"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
>
<Label text="GridLayout"></Label>
<GridLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
<Label text="GridLayout" />
</GridLayout>

<AbsoluteLayout
width="300"
height="100"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
>
<Label text="AbsoluteLayout"></Label>
<AbsoluteLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
<Label text="AbsoluteLayout" />
</AbsoluteLayout>

<DockLayout
width="300"
height="100"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
>
<Label text="DockLayout"></Label>
<DockLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
<Label text="DockLayout" />
</DockLayout>

<FlexboxLayout
width="300"
height="100"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
>
<Label text="FlexboxLayout"></Label>
<FlexboxLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
<Label text="FlexboxLayout" />
</FlexboxLayout>

</StackLayout>
</ScrollView>

<!-- labels -->
<GridLayout
rows="*"
height="100%"
visibility="{{ selectedComponentType === 'labels' ? 'visible' : 'collapsed' }}">

<Label
horizontalAlignment="center"
verticalAlignment="center"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
text="Label"></Label>
<GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'labels' ? 'visible' : 'collapsed' }}">

<Label horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}" text="Label" />

</GridLayout>

<!-- buttons -->
<GridLayout
rows="*"
height="100%"
visibility="{{ selectedComponentType === 'buttons' ? 'visible' : 'collapsed' }}">

<Button
horizontalAlignment="center"
verticalAlignment="center"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
text="button"
></Button>
<GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'buttons' ? 'visible' : 'collapsed' }}">

<Button horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}" text="button" />

</GridLayout>

<!-- images -->
<GridLayout
rows="*"
height="100%"
visibility="{{ selectedComponentType === 'images' ? 'visible' : 'collapsed' }}">

<ContentView width="100"
height="100"
horizontalAlignment="center"
verticalAlignment="center"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
tap="{{ toggleAnimation }}">
<Image src="https://raw.githubusercontent.com/NativeScript/artwork/main/logo/export/NativeScript_Logo_Blue_Transparent.png"></Image>
<GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'images' ? 'visible' : 'collapsed' }}">

<ContentView width="100" height="100" horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" tap="{{ toggleAnimation }}">
<Image src="https://raw.githubusercontent.com/NativeScript/artwork/main/logo/export/NativeScript_Logo_Blue_Transparent.png" />
</ContentView>


</GridLayout>

</StackLayout>

<GridLayout
row="1"
rows="auto"
columns="auto, *, auto"
class="box-shadow-prop-controls">
<Label
col="0"
verticalAlignment="center"
text="box-shadow:"></Label>
<TextField
col="1"
placeholder="box-shadow"
text="{{ boxShadow }}"
textChange="{{ textChange }}"
>
<GridLayout row="1" rows="auto" columns="auto, *, auto" class="box-shadow-prop-controls">
<Label col="0" verticalAlignment="center" text="box-shadow:" />
<TextField col="1" placeholder="box-shadow" text="{{ boxShadow }}" textChange="{{ textChange }}">
</TextField>
<Button
col="2"
text="APPLY"
class="btn-apply"
tap="{{ applyBoxShadow }}"></Button>
<Button col="2" text="APPLY" class="btn-apply" tap="{{ applyBoxShadow }}" />
</GridLayout>
<ScrollView row="2">
<StackLayout padding="10" class="controls">
<Label text="Components"></Label>
<Label text="Components" />
<FlexboxLayout flexDirection="row" flexWrap="wrap">
<Button text="Layouts" componentType="layouts" tap="{{ selectComponentType }}"></Button>
<Button text="Labels" componentType="labels" selectedAttr="{{ selectedComponentType }}" tap="{{ selectComponentType }}"></Button>
<Button text="Buttons" componentType="buttons" selectedAttr="{{ selectedComponentType == 'buttons' }}" tap="{{ selectComponentType }}"></Button>
<Button text="Images" componentType="images" selectedAttr="{{ selectedComponentType == 'images' }}" tap="{{ selectComponentType }}"></Button>
<Button text="Layouts" componentType="layouts" tap="{{ selectComponentType }}" />
<Button text="Labels" componentType="labels" selectedAttr="{{ selectedComponentType }}" tap="{{ selectComponentType }}" />
<Button text="Buttons" componentType="buttons" selectedAttr="{{ selectedComponentType == 'buttons' }}" tap="{{ selectComponentType }}" />
<Button text="Images" componentType="images" selectedAttr="{{ selectedComponentType == 'images' }}" tap="{{ selectComponentType }}" />
</FlexboxLayout>

<Label text="Background"></Label>
<Label text="Background" />
<FlexboxLayout flexDirection="row" flexWrap="wrap">
<Button text="Solid" backgroundType="solid" tap="{{ selectBackgroundType }}"></Button>
<Button text="Transparent" backgroundType="transparent" tap="{{ selectBackgroundType }}"></Button>
<Button text="Gradient" backgroundType="gradient" tap="{{ selectBackgroundType }}"></Button>
<Button text="Solid" backgroundType="solid" tap="{{ selectBackgroundType }}" />
<Button text="Transparent" backgroundType="transparent" tap="{{ selectBackgroundType }}" />
<Button text="Gradient" backgroundType="gradient" tap="{{ selectBackgroundType }}" />
</FlexboxLayout>

<Label text="Borders"></Label>
<Label text="Borders" />
<FlexboxLayout flexDirection="row" flexWrap="wrap">
<Button text="Solid" borderType="solid" tap="{{ selectBorderType }}"></Button>
<Button text="Rounded" borderType="rounded" tap="{{ selectBorderType }}"></Button>
<Button text="None" borderType="none" tap="{{ selectBorderType }}"></Button>
<Button text="Solid" borderType="solid" tap="{{ selectBorderType }}" />
<Button text="Rounded" borderType="rounded" tap="{{ selectBorderType }}" />
<Button text="Colorful" borderType="colorful" tap="{{ selectBorderType }}" />
<Button text="None" borderType="none" tap="{{ selectBorderType }}" />
</FlexboxLayout>

<Label text="Animations"></Label>
<Label text="Tap on the component to start and stop animation" class="description"></Label>
<Label text="Animations" />
<Label text="Tap on the component to start and stop animation" class="description" />
<FlexboxLayout flexDirection="row" flexWrap="wrap">
<Button text="Width" animationType="width" tap="{{ selectAnimationType }}"></Button>
<Button text="Height" animationType="height" tap="{{ selectAnimationType }}"></Button>
<Button text="Opacity" animationType="opacity" tap="{{ selectAnimationType }}"></Button>
<Button text="Translate" animationType="translate" tap="{{ selectAnimationType }}"></Button>
<Button text="Scale" animationType="scale" tap="{{ selectAnimationType }}"></Button>
<Button text="Rotate" animationType="rotate" tap="{{ selectAnimationType }}"></Button>
<Button text="Width" animationType="width" tap="{{ selectAnimationType }}" />
<Button text="Height" animationType="height" tap="{{ selectAnimationType }}" />
<Button text="Opacity" animationType="opacity" tap="{{ selectAnimationType }}" />
<Button text="Translate" animationType="translate" tap="{{ selectAnimationType }}" />
<Button text="Scale" animationType="scale" tap="{{ selectAnimationType }}" />
<Button text="Rotate" animationType="rotate" tap="{{ selectAnimationType }}" />
</FlexboxLayout>

</StackLayout>
Expand Down
8 changes: 8 additions & 0 deletions apps/ui/src/scroll-view/scrolling-and-sizing-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,14 @@ ScrollView {
border-left-width: 20;
}

.gradient {
background: linear-gradient(to bottom, orangered, green, lightblue);
}

.shadow {
box-shadow: inset 0 0 5 5 #000000;
}

.body {
font-size: 11;
}
43 changes: 38 additions & 5 deletions apps/ui/src/scroll-view/scrolling-and-sizing-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</Page.actionBar>

<StackLayout>
<StackLayout class="p-10" row="0">
<StackLayout class="p-10">
<Label text="Default style = scrolls out of container" class="body m-b-10" />
<ScrollView height="40">
<StackLayout>
Expand All @@ -17,7 +17,7 @@
</ScrollView>
</StackLayout>

<StackLayout class="p-10" row="1">
<StackLayout class="p-10">
<Label text="Adding border changes the height but fixes scrolling" textWrap="true" class="body m-b-10" />
<ScrollView class="bordered" height="40">
<StackLayout>
Expand All @@ -28,7 +28,7 @@
</ScrollView>
</StackLayout>

<StackLayout class="p-10" row="2">
<StackLayout class="p-10">
<Label text="border-radius" class="body m-b-10" />
<ScrollView class="bordered fixed-height border-radius">
<StackLayout>
Expand All @@ -39,7 +39,7 @@
</ScrollView>
</StackLayout>

<StackLayout class="p-10" row="2">
<StackLayout class="p-10">
<Label text="border-radius = weird" class="body m-b-10" />
<ScrollView class="bordered fixed-height border-radius-nonuniform">
<StackLayout>
Expand All @@ -50,7 +50,7 @@
</ScrollView>
</StackLayout>

<StackLayout class="p-10" row="3">
<StackLayout class="p-10">
<Label text="border-width = weird" class="body m-b-10" />
<ScrollView class="bordered-nonuniform fixed-height">
<StackLayout>
Expand All @@ -61,5 +61,38 @@
</ScrollView>
</StackLayout>

<StackLayout class="p-10">
<Label text="border-width = rounded weird" class="body m-b-10" />
<ScrollView class="bordered-nonuniform fixed-height border-radius">
<StackLayout>
<GridLayout width="30" height="30" backgroundColor="red" />
<GridLayout width="30" height="30" backgroundColor="yellow" />
<GridLayout width="30" height="30" backgroundColor="green" />
</StackLayout>
</ScrollView>
</StackLayout>

<StackLayout class="p-10">
<Label text="background = gradient" class="body m-b-10" />
<ScrollView class="fixed-height gradient">
<StackLayout>
<GridLayout width="30" height="30" backgroundColor="red" />
<GridLayout width="30" height="30" backgroundColor="yellow" />
<GridLayout width="30" height="30" backgroundColor="green" />
</StackLayout>
</ScrollView>
</StackLayout>

<StackLayout class="p-10">
<Label text="box-shadow" class="body m-b-10" />
<ScrollView class="fixed-height shadow">
<StackLayout>
<GridLayout width="30" height="30" backgroundColor="red" />
<GridLayout width="30" height="30" backgroundColor="yellow" />
<GridLayout width="30" height="30" backgroundColor="green" />
</StackLayout>
</ScrollView>
</StackLayout>

</StackLayout>
</Page>
8 changes: 8 additions & 0 deletions apps/ui/src/text-view/scrolling-and-sizing-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,14 @@ TextView {
border-left-width: 20;
}

.gradient {
background: linear-gradient(to bottom, orangered, green, lightblue);
}

.shadow {
box-shadow: inset 0 0 5 5 #000000;
}

.body {
font-size: 11;
}
Loading