javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-17 04:41:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2801 from NativeScript/issue-2789

Browse Source 
Fix: CSS border-width causes text to overflow TextView
This commit is contained in:
Rossen Hristov
2016-09-27 10:37:04 +03:00
committed by GitHub
parent 8b0564b62f 071ef1607d
commit 75be1b01be
4 changed files with 43 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/app/ui-tests-app/css/all-non-uniform-border.css
View File

@ -1,6 +1,6 @@
.s0 {
border-width: 1 2 5 10; border-color: red green blue yellow;
width: 100;
height: 100;
font-size: 10;
width: 80;
height: 80;
font-size: 6;
}

6
apps/app/ui-tests-app/css/all-uniform-border.css
View File

@ -1,6 +1,6 @@
.s0 {
border-width: 5; border-color: red; border-radius: 5;
width: 100;
height: 100;
font-size: 10;
width: 80;
height: 80;
font-size: 6;
}

2
apps/app/ui-tests-app/css/all-uniform-border.xml
View File

@ -3,7 +3,7 @@
<Button class="s0" row="0" col="0" text="Button"/>
<Label class="s0" row="0" col="1" text="Label"/>
<TextField class="s0" row="0" col="2" text="TextField"/>
<TextView class="s0" row="1" col="0" text="TextView"/>
<TextView class="s0" row="1" col="0" text="TextView Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit, tortor vitae imperdiet gravida, eros neque scelerisque sapien, vel ultricies turpis ipsum vitae nisi. Sed ut consequat magna, scelerisque malesuada elit. Proin posuere purus dolor, semper sagittis dolor tempus ut. Praesent lorem mauris, ultricies eu faucibus quis, auctor ut leo. Mauris tincidunt justo id urna malesuada, at dapibus orci tincidunt. Suspendisse sollicitudin eget lorem porttitor pharetra. Phasellus cursus mauris ut urna sollicitudin pharetra."/>
<SearchBar class="s0" row="1" col="1" text="SearchBar"/>
<Switch class="s0" row="1" col="2" checked="true"/>
<Slider class="s0" row="2" col="0" minValue="0" maxValue="100" value="50"/>

57
tns-core-modules/ui/styling/background.ios.ts
View File

@ -33,24 +33,12 @@ export module ios {
}
// Borders
if (background.hasUniformBorder()){
let borderColor = background.getUniformBorderColor();
if (borderColor && borderColor.ios){
nativeView.layer.borderColor = borderColor.ios.CGColor;
}
else {
nativeView.layer.borderColor = undefined;
}
nativeView.layer.borderWidth = background.getUniformBorderWidth();
nativeView.layer.cornerRadius = background.getUniformBorderRadius();
nativeView.clipsToBounds = (nativeView.layer.cornerRadius > 0);
}
else { // Draw non-uniform borders
// Clear everything
// Clear all borders
nativeView.layer.borderColor = undefined;
nativeView.layer.borderWidth = 0;
nativeView.layer.cornerRadius = 0;
nativeView.clipsToBounds = false;
nativeView.clipsToBounds = true;
if (nativeView["topBorderLayer"]){
(<CAShapeLayer>nativeView["topBorderLayer"]).removeFromSuperlayer();
@ -68,12 +56,23 @@ export module ios {
(<CAShapeLayer>nativeView["leftBorderLayer"]).removeFromSuperlayer();
}
// Draw borders
let nativeViewBounds = {
left: nativeView.bounds.origin.x,
top: nativeView.bounds.origin.y,
bottom: nativeView.bounds.size.height,
right: nativeView.bounds.size.width
if (background.hasUniformBorder()){
let borderColor = background.getUniformBorderColor();
if (borderColor && borderColor.ios){
nativeView.layer.borderColor = borderColor.ios.CGColor;
}
else {
nativeView.layer.borderColor = undefined;
}
nativeView.layer.borderWidth = background.getUniformBorderWidth();
nativeView.layer.cornerRadius = background.getUniformBorderRadius();
}
else { // Draw non-uniform borders
let nativeViewLayerBounds = {
left: nativeView.layer.bounds.origin.x,
top: nativeView.layer.bounds.origin.y,
bottom: nativeView.layer.bounds.size.height,
right: nativeView.layer.bounds.size.width
};
let top = background.borderTopWidth;
@ -81,17 +80,17 @@ export module ios {
let bottom = background.borderBottomWidth;
let left = background.borderLeftWidth;
let lto: viewModule.Point = {x: nativeViewBounds.left, y: nativeViewBounds.top};// left-top-outside
let lti: viewModule.Point = {x: nativeViewBounds.left + left, y: nativeViewBounds.top + top}; // left-top-inside
let lto: viewModule.Point = {x: nativeViewLayerBounds.left, y: nativeViewLayerBounds.top};// left-top-outside
let lti: viewModule.Point = {x: nativeViewLayerBounds.left + left, y: nativeViewLayerBounds.top + top}; // left-top-inside
let rto: viewModule.Point = {x: nativeViewBounds.right, y: nativeViewBounds.top}; // right-top-outside
let rti: viewModule.Point = {x: nativeViewBounds.right - right, y: nativeViewBounds.top + top}; // right-top-inside
let rto: viewModule.Point = {x: nativeViewLayerBounds.right, y: nativeViewLayerBounds.top}; // right-top-outside
let rti: viewModule.Point = {x: nativeViewLayerBounds.right - right, y: nativeViewLayerBounds.top + top}; // right-top-inside
let rbo: viewModule.Point = {x: nativeViewBounds.right, y: nativeViewBounds.bottom}; // right-bottom-outside
let rbi: viewModule.Point = {x: nativeViewBounds.right - right, y: nativeViewBounds.bottom - bottom}; // right-bottom-inside
let rbo: viewModule.Point = {x: nativeViewLayerBounds.right, y: nativeViewLayerBounds.bottom}; // right-bottom-outside
let rbi: viewModule.Point = {x: nativeViewLayerBounds.right - right, y: nativeViewLayerBounds.bottom - bottom}; // right-bottom-inside
let lbo: viewModule.Point = {x: nativeViewBounds.left, y: nativeViewBounds.bottom}; // left-bottom-outside
let lbi: viewModule.Point = {x: nativeViewBounds.left + left, y: nativeViewBounds.bottom - bottom}; // left-bottom-inside
let lbo: viewModule.Point = {x: nativeViewLayerBounds.left, y: nativeViewLayerBounds.bottom}; // left-bottom-outside
let lbi: viewModule.Point = {x: nativeViewLayerBounds.left + left, y: nativeViewLayerBounds.bottom - bottom}; // left-bottom-inside
if (top > 0 && background.borderTopColor && background.borderTopColor.ios){
let topBorderPath = CGPathCreateMutable();