From 1f04469fb3b77215b3f5dc836f1967e4b84c8cc3 Mon Sep 17 00:00:00 2001 From: Nicu Date: Tue, 24 Mar 2020 10:17:35 +0200 Subject: [PATCH] feat(css-bkg-pos): Added possibility to declare background pos by single numeric value (#7958) * feat(css-bkg-pos): Added possibility to declare background pos by single numeric value * feat(css-bkg-pos): Implemented numeric bkg pos for iOS * feat(css-bkg-pos): removed unnecessary code Co-authored-by: Vasil Trifonov --- .../ui/styling/background.ios.ts | 39 +++++++++++++------ .../nativescript/widgets/BorderDrawable.java | 33 ++++++++++++---- 2 files changed, 53 insertions(+), 19 deletions(-) diff --git a/nativescript-core/ui/styling/background.ios.ts b/nativescript-core/ui/styling/background.ios.ts index 96dd41aef..4471e3e4d 100644 --- a/nativescript-core/ui/styling/background.ios.ts +++ b/nativescript-core/ui/styling/background.ios.ts @@ -204,18 +204,23 @@ function parsePosition(pos: string): { x: CSSValue, y: CSSValue } { return { x: values[0], y: values[1] }; } - if (values.length === 1 && values[0].type === "ident") { - const val = values[0].string.toLocaleLowerCase(); - const center = { type: "ident", string: "center" }; + if (values.length === 1) { + const center = { type: "ident", string: "center" }; - // If you only one keyword is specified, the other value is "center" - if (val === "left" || val === "right") { - return { x: values[0], y: center }; - } else if (val === "top" || val === "bottom") { - return { x: center, y: values[0] }; - } else if (val === "center") { - return { x: center, y: center }; - } + if (values[0].type === "ident") { + const val = values[0].string.toLocaleLowerCase(); + + // If you only one keyword is specified, the other value is "center" + if (val === "left" || val === "right") { + return { x: values[0], y: center }; + } else if (val === "top" || val === "bottom") { + return { x: center, y: values[0] }; + } else if (val === "center") { + return { x: center, y: center }; + } + } else if (values[0].type === "number") { + return {x: values[0], y: center}; + } } return null; @@ -322,6 +327,18 @@ function getDrawParams(this: void, image: UIImage, background: BackgroundDefinit } else if (v.y.string.toLowerCase() === "bottom") { res.posY = spaceY; } + } else if (v.x.type === "number" && v.y.type === "ident") { + if (v.x.unit === "%") { + res.posX = spaceX * v.x.value / 100; + } else if (v.x.unit === "px" || v.x.unit === "") { + res.posX = v.x.value; + } + + if (v.y.string.toLowerCase() === "center") { + res.posY = spaceY / 2; + } else if (v.y.string.toLowerCase() === "bottom") { + res.posY = spaceY; + } } } } diff --git a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BorderDrawable.java b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BorderDrawable.java index 0abf8d26b..2f7853a5a 100644 --- a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BorderDrawable.java +++ b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BorderDrawable.java @@ -713,6 +713,18 @@ public class BorderDrawable extends ColorDrawable implements BitmapOwner { res.posX = spaceX; } + if ("center".equals(vy.getString().toLowerCase(Locale.ENGLISH))) { + res.posY = spaceY / 2; + } else if ("bottom".equals(vy.getString().toLowerCase(Locale.ENGLISH))) { + res.posY = spaceY; + } + } else if ("number".equals(vx.getType()) && "ident".equals(vy.getType())) { + if ("%".equals(vx.getUnit())) { + res.posX = spaceX * vx.getValue() / 100; + } else if ("px".equals(vx.getUnit()) || vx.getUnit() == null || vx.getUnit().isEmpty()) { + res.posX = vx.getValue(); + } + if ("center".equals(vy.getString().toLowerCase(Locale.ENGLISH))) { res.posY = spaceY / 2; } else if ("bottom".equals(vy.getString().toLowerCase(Locale.ENGLISH))) { @@ -731,17 +743,22 @@ public class BorderDrawable extends ColorDrawable implements BitmapOwner { } CSSValue[] result = null; - if (values.length == 1 && "ident".equals(values[0].getType())) { - String val = values[0].getString().toLowerCase(Locale.ENGLISH); + if (values.length == 1) { + // If you only one keyword is specified, the other value is "center" CSSValue center = new CSSValue("ident", "center", null, 0); - // If you only one keyword is specified, the other value is "center" - if ("left".equals(val) || "right".equals(val)) { + if ("ident".equals(values[0].getType())) { + String val = values[0].getString().toLowerCase(Locale.ENGLISH); + + if ("left".equals(val) || "right".equals(val)) { + result = new CSSValue[]{values[0], center}; + } else if ("top".equals(val) || "bottom".equals(val)) { + result = new CSSValue[]{center, values[0]}; + } else if ("center".equals(val)) { + result = new CSSValue[]{center, center}; + } + } else if ("number".equals(values[0].getType())) { result = new CSSValue[]{values[0], center}; - } else if ("top".equals(val) || "bottom".equals(val)) { - result = new CSSValue[]{center, values[0]}; - } else if ("center".equals(val)) { - result = new CSSValue[]{center, center}; } }