fix: #174

mpflutter · May 19, 2022 · 01aa053 · 01aa053
1 parent 6a0e580
commit 01aa053
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/packages/mp_dom_runtime/src/components/basic/decorated_box.ts b/packages/mp_dom_runtime/src/components/basic/decorated_box.ts
@@ -8,10 +8,7 @@ export class DecoratedBox extends ComponentView {
     let style: any = childStyle ?? {};
     if (attributes.color) {
       style.backgroundColor = cssColor(attributes.color);
-    } else {
-      style.backgroundColor = "transparent";
-    }
-    if (attributes.image) {
+    } else if (attributes.image) {
       style.backgroundImage = `url("${(() => {
         if (attributes.image.src) {
           return attributes.image.src;
@@ -46,13 +43,15 @@ export class DecoratedBox extends ComponentView {
         style.backgroundSize = "contain";
       }
       style.backgroundRepeat = "no-repeat";
-    }
-    if (attributes.decoration?.gradient) {
+    } else if (attributes.decoration?.gradient) {
       if (style.backgroundImage) {
         style.backgroundImage = cssGradient(attributes.decoration.gradient) + "," + style.backgroundImage;
       } else {
         style.background = cssGradient(attributes.decoration.gradient);
       }
+    } else {
+      style.backgroundImage = "unset";
+      style.background = "unset";
     }
     if (attributes.decoration?.boxShadow?.[0]) {
       const shadow = attributes.decoration?.boxShadow?.[0];
@@ -65,13 +64,17 @@ export class DecoratedBox extends ComponentView {
       for (const key in s) {
         (style as any)[key] = s[key];
       }
+    } else {
+      style["borderRadius"] = "0px";
     }
     if (attributes.decoration?.border) {
       let s = cssBorder(attributes.decoration.border) as any;
       s.boxSizing = "border-box";
       for (const key in s) {
         (style as any)[key] = s[key];
       }
+    } else {
+      style["border"] = "none";
     }
     setDOMStyle(target, style);
   }

diff --git a/packages/mp_dom_runtime/src/components/utils.ts b/packages/mp_dom_runtime/src/components/utils.ts
@@ -43,7 +43,7 @@ export const cssColorHex = (value: string) => {
   return `#${r}${g}${b}`;
 };
 
-export const cssBorderRadius = (value: string) => {
+export const cssBorderRadius = (value: string): any => {
   if (value.indexOf("BorderRadius.circular(") === 0) {
     const trimedValue = value
       .replace("BorderRadius.circular(", "")
@@ -68,7 +68,7 @@ export const cssBorderRadius = (value: string) => {
       borderBottomRightRadius: `${bottomRight}px`,
     };
   } else {
-    return {};
+    return { borderRadius: "0px" };
   }
 };