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

Fix: CSS border-width causes text to overflow TextView

Browse Source 
Resolves #2789
This commit is contained in:
Rossen Hristov
2016-09-27 09:46:30 +03:00
parent 4d34508472
commit 071ef1607d
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"/>

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

@ -33,6 +33,29 @@ export module ios {
}
// Borders
// Clear all borders
nativeView.layer.borderColor = undefined;
nativeView.layer.borderWidth = 0;
nativeView.layer.cornerRadius = 0;
nativeView.clipsToBounds = true;
if (nativeView["topBorderLayer"]){
(<CAShapeLayer>nativeView["topBorderLayer"]).removeFromSuperlayer();
}
if (nativeView["rightBorderLayer"]){
(<CAShapeLayer>nativeView["rightBorderLayer"]).removeFromSuperlayer();
}
if (nativeView["bottomBorderLayer"]){
(<CAShapeLayer>nativeView["bottomBorderLayer"]).removeFromSuperlayer();
}
if (nativeView["leftBorderLayer"]){
(<CAShapeLayer>nativeView["leftBorderLayer"]).removeFromSuperlayer();
}
if (background.hasUniformBorder()){
let borderColor = background.getUniformBorderColor();
if (borderColor && borderColor.ios){
@ -43,37 +66,13 @@ export module ios {
}
nativeView.layer.borderWidth = background.getUniformBorderWidth();
nativeView.layer.cornerRadius = background.getUniformBorderRadius();
nativeView.clipsToBounds = (nativeView.layer.cornerRadius > 0);
}
else { // Draw non-uniform borders
// Clear everything
nativeView.layer.borderColor = undefined;
nativeView.layer.borderWidth = 0;
nativeView.layer.cornerRadius = 0;
nativeView.clipsToBounds = false;
if (nativeView["topBorderLayer"]){
(<CAShapeLayer>nativeView["topBorderLayer"]).removeFromSuperlayer();
}
if (nativeView["rightBorderLayer"]){
(<CAShapeLayer>nativeView["rightBorderLayer"]).removeFromSuperlayer();
}
if (nativeView["bottomBorderLayer"]){
(<CAShapeLayer>nativeView["bottomBorderLayer"]).removeFromSuperlayer();
}
if (nativeView["leftBorderLayer"]){
(<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
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();