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 { .s0 {
border-width: 1 2 5 10; border-color: red green blue yellow; border-width: 1 2 5 10; border-color: red green blue yellow;
width: 100; width: 80;
height: 100; height: 80;
font-size: 10; font-size: 6;
} }

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

@ -1,6 +1,6 @@
.s0 { .s0 {
border-width: 5; border-color: red; border-radius: 5; border-width: 5; border-color: red; border-radius: 5;
width: 100; width: 80;
height: 100; height: 80;
font-size: 10; 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"/> <Button class="s0" row="0" col="0" text="Button"/>
<Label class="s0" row="0" col="1" text="Label"/> <Label class="s0" row="0" col="1" text="Label"/>
<TextField class="s0" row="0" col="2" text="TextField"/> <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"/> <SearchBar class="s0" row="1" col="1" text="SearchBar"/>
<Switch class="s0" row="1" col="2" checked="true"/> <Switch class="s0" row="1" col="2" checked="true"/>
<Slider class="s0" row="2" col="0" minValue="0" maxValue="100" value="50"/> <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 // 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()){ if (background.hasUniformBorder()){
let borderColor = background.getUniformBorderColor(); let borderColor = background.getUniformBorderColor();
if (borderColor && borderColor.ios){ if (borderColor && borderColor.ios){
@ -43,37 +66,13 @@ export module ios {
} }
nativeView.layer.borderWidth = background.getUniformBorderWidth(); nativeView.layer.borderWidth = background.getUniformBorderWidth();
nativeView.layer.cornerRadius = background.getUniformBorderRadius(); nativeView.layer.cornerRadius = background.getUniformBorderRadius();
nativeView.clipsToBounds = (nativeView.layer.cornerRadius > 0);
} }
else { // Draw non-uniform borders else { // Draw non-uniform borders
// Clear everything let nativeViewLayerBounds = {
nativeView.layer.borderColor = undefined; left: nativeView.layer.bounds.origin.x,
nativeView.layer.borderWidth = 0; top: nativeView.layer.bounds.origin.y,
nativeView.layer.cornerRadius = 0; bottom: nativeView.layer.bounds.size.height,
nativeView.clipsToBounds = false; right: nativeView.layer.bounds.size.width
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 top = background.borderTopWidth; let top = background.borderTopWidth;
@ -81,17 +80,17 @@ export module ios {
let bottom = background.borderBottomWidth; let bottom = background.borderBottomWidth;
let left = background.borderLeftWidth; let left = background.borderLeftWidth;
let lto: viewModule.Point = {x: nativeViewBounds.left, y: nativeViewBounds.top};// left-top-outside let lto: viewModule.Point = {x: nativeViewLayerBounds.left, y: nativeViewLayerBounds.top};// left-top-outside
let lti: viewModule.Point = {x: nativeViewBounds.left + left, y: nativeViewBounds.top + top}; // left-top-inside 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 rto: viewModule.Point = {x: nativeViewLayerBounds.right, y: nativeViewLayerBounds.top}; // right-top-outside
let rti: viewModule.Point = {x: nativeViewBounds.right - right, y: nativeViewBounds.top + top}; // right-top-inside 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 rbo: viewModule.Point = {x: nativeViewLayerBounds.right, y: nativeViewLayerBounds.bottom}; // right-bottom-outside
let rbi: viewModule.Point = {x: nativeViewBounds.right - right, y: nativeViewBounds.bottom - bottom}; // right-bottom-inside 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 lbo: viewModule.Point = {x: nativeViewLayerBounds.left, y: nativeViewLayerBounds.bottom}; // left-bottom-outside
let lbi: viewModule.Point = {x: nativeViewBounds.left + left, y: nativeViewBounds.bottom - bottom}; // left-bottom-inside let lbi: viewModule.Point = {x: nativeViewLayerBounds.left + left, y: nativeViewLayerBounds.bottom - bottom}; // left-bottom-inside
if (top > 0 && background.borderTopColor && background.borderTopColor.ios){ if (top > 0 && background.borderTopColor && background.borderTopColor.ios){
let topBorderPath = CGPathCreateMutable(); let topBorderPath = CGPathCreateMutable();