FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Add `inset` CSS clip-path support by hamorphis · Pull Request #3061 · NativeScript/NativeScript · GitHub

/ NativeScript Public

Add inset CSS clip-path support #3061

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
hamorphis merged 1 commit into from
Nov 10, 2016
Conversation 2 Commits 1 Checks 0 Files changed
Merged

Add inset CSS clip-path support #3061

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension .png  (1) .ts  (3) .xml  (2) All 3 file types selected
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
34 changes: 34 additions & 0 deletions apps/app/ui-tests-app/css/clip-path-inset.xml
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<Page>
<GridLayout rows="*,*,*,*,*" columns="*,*" automationText="clipPath">
<StackLayout col="0" colSpan="2" row="0" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="no clip-path" style="background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>

<StackLayout col="0" row="1" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="inset(10)" style="clip-path: inset(10); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>
<StackLayout col="0" row="2" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="inset(10 20)" style="clip-path: inset(10 20); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>
<StackLayout col="0" row="3" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="inset(10 20 30)" style="clip-path: inset(10 20 30); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>
<StackLayout col="0" row="4" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="inset(10 20 30 40)" style="clip-path: inset(10 20 30 40); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>

<StackLayout col="1" row="1" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="inset(10%)" style="clip-path: inset(10%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>
<StackLayout col="1" row="2" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="inset(10% 20%)" style="clip-path: inset(10% 20%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>
<StackLayout col="1" row="3" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="inset(10% 20% 30%)" style="clip-path: inset(10% 20% 30%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>
<StackLayout col="1" row="4" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="inset(10% 20% 30% 40%)" style="clip-path: inset(10% 20% 30% 40%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>

</GridLayout>
</Page>
28 changes: 22 additions & 6 deletions apps/app/ui-tests-app/css/clip-path.xml
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -1,9 +1,25 @@
<Page>
<GridLayout rows="*,*,*,*,*" automationText="clipPath">
<Button text="circle" style="background-color: red; border-width:2; border-color: blue; clip-path: circle(100% at 50% 50%);"/>
<Button text="ellipse" style="background-color: orange; border-width:2; border-color: green; clip-path: ellipse(50% 50% at 50% 50%);" row="1" />
<Button text="rect" style="background-color: red; border-width:2; border-color: blue; clip-path: rect(0, 0, 100%, 100%);" row="2" />
<Button text="polygon" style="background-color: magenta; border-width:2; border-color: red; clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);" row="3" />
<Button text="image polygon" style="background-image: url('https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/ce/maldives.jpg'); border-width:2; border-color: red; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);" row="4" />
<GridLayout columns="*,*" rows="*,*,*,*">
<StackLayout col="0" colSpan="2" row="0" width="100" height="100" style.backgroundColor="magenta">
<Button text="no clip-path" width="100" height="100" style="background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
</StackLayout>
<StackLayout col="0" row="1" width="100" height="100" style.backgroundColor="magenta">
<Button text="rect" width="100" height="100" style="clip-path: rect(10% 90 90% 10); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
</StackLayout>
<StackLayout col="1" row="1" width="100" height="100" style.backgroundColor="magenta">
<Button text="inset" width="100" height="100" style="clip-path: inset(15%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
</StackLayout>
<StackLayout col="0" row="2" width="100" height="100" style.backgroundColor="magenta">
<Button text="circle" width="100" height="100" style="clip-path: circle(80% at 55% 40%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
</StackLayout>
<StackLayout col="1" row="2" width="100" height="100" style.backgroundColor="magenta">
<Button text="ellipse" width="100" height="100" style=" clip-path: ellipse(45% 25% at 45% 55%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
</StackLayout>
<StackLayout col="0" row="3" width="100" height="100" style.backgroundColor="magenta">
<Button text="polygon" width="100" height="100" style=" clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
</StackLayout>
<StackLayout col="1" row="3" width="100" height="100" style.backgroundColor="magenta">
<Button text="image polygon" width="100" height="100" style=" clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
</StackLayout>
</GridLayout>
</Page>
Binary file added apps/app/ui-tests-app/css/inset-test.png
Show comments
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Viewer requires iframe.
1 change: 1 addition & 0 deletions apps/app/ui-tests-app/css/main-page.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export function pageLoaded(args: EventData) {
examples.set("switch", "css/views");
examples.set("zindex", "css/zindex");
examples.set("clipPath", "css/clip-path");
examples.set("clipPathInset", "css/clip-path-inset");
examples.set("padding", "css/padding");
examples.set("label-background-image", "css/label-background-image");
examples.set("transform-decoration-color", "css/transform-decoration-color");
Expand Down
47 changes: 41 additions & 6 deletions tns-core-modules/ui/styling/background.ios.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -255,13 +255,46 @@ function drawClipPath(nativeView: UIView, background: common.Background) {
var arr = value.split(/[\s]+/);

var top = common.cssValueToDevicePixels(arr[0], bounds.top);
var left = common.cssValueToDevicePixels(arr[1], bounds.left);
var right = common.cssValueToDevicePixels(arr[1], bounds.right);
var bottom = common.cssValueToDevicePixels(arr[2], bounds.bottom);
var right = common.cssValueToDevicePixels(arr[3], bounds.right);
var left = common.cssValueToDevicePixels(arr[3], bounds.left);

path = UIBezierPath.bezierPathWithRect(CGRectMake(left, top, right, bottom)).CGPath;
path = UIBezierPath.bezierPathWithRect(CGRectMake(left, top, right - left, bottom - top)).CGPath;
}
else if (functionName === "inset") {
var arr = value.split(/[\s]+/);

let topString: string;
let rightString: string;
let bottomString: string;
let leftString: string;
if (arr.length === 1) {
topString = rightString = bottomString = leftString = arr[0];
}
else if (arr.length === 2) {
topString = bottomString = arr[0];
rightString = leftString = arr[1];
}
else if (arr.length === 3) {
topString = arr[0];
rightString = leftString = arr[1];
bottomString = arr[2];
}
else if (arr.length === 4) {
topString = arr[0];
rightString = arr[1];
bottomString = arr[2];
leftString = arr[3];
}

var top = common.cssValueToDevicePixels(topString, bounds.bottom);
var right = common.cssValueToDevicePixels("100%", bounds.right) - common.cssValueToDevicePixels(rightString, bounds.right);
var bottom = common.cssValueToDevicePixels("100%", bounds.bottom) - common.cssValueToDevicePixels(bottomString, bounds.bottom);
var left = common.cssValueToDevicePixels(leftString, bounds.right);

} else if (functionName === "circle") {
path = UIBezierPath.bezierPathWithRect(CGRectMake(left, top, right - left, bottom - top)).CGPath;
}
else if (functionName === "circle") {
var arr = value.split(/[\s]+/);

var radius = common.cssValueToDevicePixels(arr[0], (bounds.right > bounds.bottom ? bounds.bottom : bounds.right) / 2);
Expand All @@ -270,7 +303,8 @@ function drawClipPath(nativeView: UIView, background: common.Background) {

path = UIBezierPath.bezierPathWithArcCenterRadiusStartAngleEndAngleClockwise(CGPointMake(x, y), radius, 0, 360, true).CGPath;

} else if (functionName === "ellipse") {
}
else if (functionName === "ellipse") {
var arr = value.split(/[\s]+/);

var rX = common.cssValueToDevicePixels(arr[0], bounds.right);
Expand All @@ -285,7 +319,8 @@ function drawClipPath(nativeView: UIView, background: common.Background) {

path = UIBezierPath.bezierPathWithOvalInRect(CGRectMake(left, top, width, height)).CGPath;

} else if (functionName === "polygon") {
}
else if (functionName === "polygon") {

path = CGPathCreateMutable()

Expand Down
2 changes: 1 addition & 1 deletion tns-core-modules/ui/styling/style.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ function isNonNegativeFiniteNumber(value: number): boolean {
return isFinite(value) && !isNaN(value) && value >= 0;
}

var supportedPaths = ["rect", "circle", "ellipse", "polygon"];
var supportedPaths = ["rect", "circle", "ellipse", "polygon", "inset"];
function isClipPathValid(value: string): boolean {
if (!value) {
return true;
Expand Down
Back | FazBrowse Home | New Git URL