javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 11:01:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: box-shadow with non-uniform corner-radius wip

Browse Source
This commit is contained in:
Nathan Walker
2022-02-26 19:08:55 -08:00
parent bfadf29640
commit c1e431a0f7
4 changed files with 54 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/toolbox/project.json
View File

@ -17,13 +17,15 @@
"ios": { "ios": {
"executor": "@nativescript/nx:build", "executor": "@nativescript/nx:build",
"options": { "options": {
"platform": "ios" "platform": "ios",
"noHmr": true
} }
}, },
"android": { "android": {
"executor": "@nativescript/nx:build", "executor": "@nativescript/nx:build",
"options": { "options": {
"platform": "android" "platform": "android",
"noHmr": true
} }
}, },
"clean": { "clean": {

9
apps/toolbox/src/pages/box-shadow.ts
View File

@ -16,7 +16,7 @@ export class BoxShadowModel extends Observable {
background: string; background: string;
borderWidth: number; borderWidth: number;
borderRadius: number; borderRadius: number | string;
appliedBoxShadow: string; appliedBoxShadow: string;
get boxShadow(): string { get boxShadow(): string {
@ -72,10 +72,13 @@ export class BoxShadowModel extends Observable {
this.notifyPropertyChange('selectedBorderType', value); this.notifyPropertyChange('selectedBorderType', value);
switch (value) { switch (value) {
case 'solid': case 'solid':
this.borderWidth = this.borderWidth ? 0 : 2; this.borderWidth = 2;
break; break;
case 'rounded': case 'rounded':
this.borderRadius = this.borderRadius ? 0 : 10; this.borderRadius = 10;
break;
case 'partial':
this.borderRadius = '10 0 0 0';
break; break;
case 'none': case 'none':
this.borderRadius = 0; this.borderRadius = 0;

182
apps/toolbox/src/pages/box-shadow.xml
View File

@ -9,129 +9,48 @@
<!-- layouts --> <!-- layouts -->
<ScrollView height="100%" visibility="{{ selectedComponentType === 'layouts' ? 'visible' : 'collapsed' }}"> <ScrollView height="100%" visibility="{{ selectedComponentType === 'layouts' ? 'visible' : 'collapsed' }}">
<StackLayout padding="20"> <StackLayout padding="20">
<StackLayout <StackLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
width="300" <Label text="StackLayout" />
height="100"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
>
<Label text="StackLayout"></Label>
</StackLayout> </StackLayout>
<GridLayout <GridLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
width="300" <Label text="GridLayout" />
height="100"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
>
<Label text="GridLayout"></Label>
</GridLayout> </GridLayout>
<AbsoluteLayout <AbsoluteLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
width="300" <Label text="AbsoluteLayout" />
height="100"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
>
<Label text="AbsoluteLayout"></Label>
</AbsoluteLayout> </AbsoluteLayout>
<DockLayout <DockLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
width="300" <Label text="DockLayout" />
height="100"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
>
<Label text="DockLayout"></Label>
</DockLayout> </DockLayout>
<FlexboxLayout <FlexboxLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
width="300" <Label text="FlexboxLayout" />
height="100"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
>
<Label text="FlexboxLayout"></Label>
</FlexboxLayout> </FlexboxLayout>
</StackLayout> </StackLayout>
</ScrollView> </ScrollView>
<!-- labels --> <!-- labels -->
<GridLayout <GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'labels' ? 'visible' : 'collapsed' }}">
rows="*"
height="100%"
visibility="{{ selectedComponentType === 'labels' ? 'visible' : 'collapsed' }}">
<Label <Label horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}" text="Label" />
horizontalAlignment="center"
verticalAlignment="center"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
text="Label"></Label>
</GridLayout> </GridLayout>
<!-- buttons --> <!-- buttons -->
<GridLayout <GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'buttons' ? 'visible' : 'collapsed' }}">
rows="*"
height="100%"
visibility="{{ selectedComponentType === 'buttons' ? 'visible' : 'collapsed' }}">
<Button <Button horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}" text="button" />
horizontalAlignment="center"
verticalAlignment="center"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
text="button"
></Button>
</GridLayout> </GridLayout>
<!-- images --> <!-- images -->
<GridLayout <GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'images' ? 'visible' : 'collapsed' }}">
rows="*"
height="100%"
visibility="{{ selectedComponentType === 'images' ? 'visible' : 'collapsed' }}">
<ContentView width="100" <ContentView width="100" height="100" horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" tap="{{ toggleAnimation }}">
height="100" <Image src="https://raw.githubusercontent.com/NativeScript/artwork/main/logo/export/NativeScript_Logo_Blue_Transparent.png" />
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>
</ContentView> </ContentView>
@ -139,61 +58,46 @@
</StackLayout> </StackLayout>
<GridLayout <GridLayout row="1" rows="auto" columns="auto, *, auto" class="box-shadow-prop-controls">
row="1" <Label col="0" verticalAlignment="center" text="box-shadow:" />
rows="auto" <TextField col="1" placeholder="box-shadow" text="{{ boxShadow }}" textChange="{{ textChange }}">
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 }}"
>
</TextField> </TextField>
<Button <Button col="2" text="APPLY" class="btn-apply" tap="{{ applyBoxShadow }}" />
col="2"
text="APPLY"
class="btn-apply"
tap="{{ applyBoxShadow }}"></Button>
</GridLayout> </GridLayout>
<ScrollView row="2"> <ScrollView row="2">
<StackLayout padding="10" class="controls"> <StackLayout padding="10" class="controls">
<Label text="Components"></Label> <Label text="Components" />
<FlexboxLayout flexDirection="row" flexWrap="wrap"> <FlexboxLayout flexDirection="row" flexWrap="wrap">
<Button text="Layouts" componentType="layouts" tap="{{ selectComponentType }}"></Button> <Button text="Layouts" componentType="layouts" tap="{{ selectComponentType }}" />
<Button text="Labels" componentType="labels" selectedAttr="{{ selectedComponentType }}" tap="{{ selectComponentType }}"></Button> <Button text="Labels" componentType="labels" selectedAttr="{{ selectedComponentType }}" tap="{{ selectComponentType }}" />
<Button text="Buttons" componentType="buttons" selectedAttr="{{ selectedComponentType == 'buttons' }}" tap="{{ selectComponentType }}"></Button> <Button text="Buttons" componentType="buttons" selectedAttr="{{ selectedComponentType == 'buttons' }}" tap="{{ selectComponentType }}" />
<Button text="Images" componentType="images" selectedAttr="{{ selectedComponentType == 'images' }}" tap="{{ selectComponentType }}"></Button> <Button text="Images" componentType="images" selectedAttr="{{ selectedComponentType == 'images' }}" tap="{{ selectComponentType }}" />
</FlexboxLayout> </FlexboxLayout>
<Label text="Background"></Label> <Label text="Background" />
<FlexboxLayout flexDirection="row" flexWrap="wrap"> <FlexboxLayout flexDirection="row" flexWrap="wrap">
<Button text="Solid" backgroundType="solid" tap="{{ selectBackgroundType }}"></Button> <Button text="Solid" backgroundType="solid" tap="{{ selectBackgroundType }}" />
<Button text="Transparent" backgroundType="transparent" tap="{{ selectBackgroundType }}"></Button> <Button text="Transparent" backgroundType="transparent" tap="{{ selectBackgroundType }}" />
<Button text="Gradient" backgroundType="gradient" tap="{{ selectBackgroundType }}"></Button> <Button text="Gradient" backgroundType="gradient" tap="{{ selectBackgroundType }}" />
</FlexboxLayout> </FlexboxLayout>
<Label text="Borders"></Label> <Label text="Borders" />
<FlexboxLayout flexDirection="row" flexWrap="wrap"> <FlexboxLayout flexDirection="row" flexWrap="wrap">
<Button text="Solid" borderType="solid" tap="{{ selectBorderType }}"></Button> <Button text="Solid" borderType="solid" tap="{{ selectBorderType }}" />
<Button text="Rounded" borderType="rounded" tap="{{ selectBorderType }}"></Button> <Button text="Rounded" borderType="rounded" tap="{{ selectBorderType }}" />
<Button text="None" borderType="none" tap="{{ selectBorderType }}"></Button> <Button text="Partial" borderType="partial" tap="{{ selectBorderType }}" />
<Button text="None" borderType="none" tap="{{ selectBorderType }}" />
</FlexboxLayout> </FlexboxLayout>
<Label text="Animations"></Label> <Label text="Animations" />
<Label text="Tap on the component to start and stop animation" class="description"></Label> <Label text="Tap on the component to start and stop animation" class="description" />
<FlexboxLayout flexDirection="row" flexWrap="wrap"> <FlexboxLayout flexDirection="row" flexWrap="wrap">
<Button text="Width" animationType="width" tap="{{ selectAnimationType }}"></Button> <Button text="Width" animationType="width" tap="{{ selectAnimationType }}" />
<Button text="Height" animationType="height" tap="{{ selectAnimationType }}"></Button> <Button text="Height" animationType="height" tap="{{ selectAnimationType }}" />
<Button text="Opacity" animationType="opacity" tap="{{ selectAnimationType }}"></Button> <Button text="Opacity" animationType="opacity" tap="{{ selectAnimationType }}" />
<Button text="Translate" animationType="translate" tap="{{ selectAnimationType }}"></Button> <Button text="Translate" animationType="translate" tap="{{ selectAnimationType }}" />
<Button text="Scale" animationType="scale" tap="{{ selectAnimationType }}"></Button> <Button text="Scale" animationType="scale" tap="{{ selectAnimationType }}" />
<Button text="Rotate" animationType="rotate" tap="{{ selectAnimationType }}"></Button> <Button text="Rotate" animationType="rotate" tap="{{ selectAnimationType }}" />
</FlexboxLayout> </FlexboxLayout>
</StackLayout> </StackLayout>

3
packages/core/ui/styling/background.ios.ts
View File

@ -60,8 +60,7 @@ export namespace ios {
layer.borderColor = !borderColor ? undefined : borderColor.ios.CGColor; layer.borderColor = !borderColor ? undefined : borderColor.ios.CGColor;
layer.borderWidth = layout.toDeviceIndependentPixels(background.getUniformBorderWidth()); layer.borderWidth = layout.toDeviceIndependentPixels(background.getUniformBorderWidth());
const renderSize = view.getActualSize() || { width: 0, height: 0 }; const renderSize = view.getActualSize() || { width: 0, height: 0 };
const cornerRadius = layout.toDeviceIndependentPixels(background.getUniformBorderRadius()); layer.cornerRadius = Math.min(Math.min(renderSize.width / 2, renderSize.height / 2), layout.toDeviceIndependentPixels(background.getUniformBorderRadius()));
layer.cornerRadius = Math.min(Math.min(renderSize.width / 2, renderSize.height / 2), cornerRadius);
} else { } else {
drawNoRadiusNonUniformBorders(nativeView, background); drawNoRadiusNonUniformBorders(nativeView, background);
subscribeForScrollNotifications(view); subscribeForScrollNotifications(view);