Skip to content

Commit

Permalink
feat(ios): improved shadow handling with background UI rework (#10374)
Browse files Browse the repository at this point in the history 
BREAKING CHANGES: 

`CSSShadow` was renamed into `ShadowCSSValues`
  • Loading branch information
@CatchABus
CatchABus committed Sep 6, 2023
1 parent a959a79 commit 39eed52
Show file tree
Hide file tree
Showing 32 changed files with 1,404 additions and 829 deletions.
8 changes: 7 additions & 1 deletion apps/toolbox/src/pages/box-shadow.ts
View file
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
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
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
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
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;
}

0 comments on commit 39eed52

Please sign in to comment.