feat(core): box-shadow support (#9161)

apps/toolbox/src/app.css

@@ -7,12 +7,31 @@ components that have the btn class name.
 */
 .btn {
   font-size: 18;
+  /* box-shadow: -5 -5 10 10 navy; */
+  box-shadow: -5 -5 rgba(0,0,0,0.5);
+  background-color: #add8e6;
+  color: navy;
+  /* TODO: adding border radius breaks shadow */
+  /* border-radius: 10; */
 }
 
 .bold{
     font-weight: bold;
 }
 
+.sample-animation {
+    animation-name: rotate-expand;
+    animation-duration: 5s;
+    animation-iteration-count: infinite;
+}
+
+@keyframes rotate-expand {
+    0%, 50% { background-color: red; width: 200; transform: rotate(0) scale(1,1); }
+    25%, 75% { background-color: yellow; width: 100; transform: rotate(180) scale(1.2,1.2); }
+    100% { background-color: red; width: 200; transform: rotate(0) scale(1,1); }
+}
+
+
 .icon-label{
     font-size: 22;
     font-family: "ns-playground-font";

apps/toolbox/src/main-page.xml

@@ -3,18 +3,49 @@
         <ActionBar title="Dev Toolbox" icon="" class="action-bar">
         </ActionBar>
     </Page.actionBar>
+    <ScrollView>
     <StackLayout class="p-t-20 p-x-20">
-        <Label text="Tap the button" class="h1 text-center"/>
-        <Button text="TAP" tap="{{ onTap }}" class="btn btn-primary btn-active"/>
-        <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
-        <StackLayout class="c-bg-grey w-full m-y-5" height="1"></StackLayout>
-        <ScrollView class="h-full">
-          <StackLayout>
-            <Label text="More things to tool around with:" class="t-12 text-center font-italic m-t-10"/>
-            <Button text="View List" tap="{{ viewList }}" class="btn"/>
-            <!-- add more examples below as desired to test and play around -->
-          </StackLayout>
-        </ScrollView>
+
+        <!-- <Button text="Button with html boxShadow" tap="{{ onTap }}" height="50" class="btn btn-primary btn-active" boxShadow="5 5 10 navy"/>  
+
+        <Button text="Button with css boxShadow (rgba)" tap="{{ onTap }}" height="50" marginTop="50" class="btn btn-primary btn-active"/>  
+  
+        <Button text="Button with boxShadow 3 props" tap="{{ onTap }}" height="50" marginTop="50" boxShadow="5 5 navy" class="btn btn-primary btn-active"/>  
+        <Button text="Button with boxShadow 4 props" tap="{{ onTap }}" height="50" marginTop="50" boxShadow="5 5 10 navy" class="btn btn-primary btn-active"/>  
+        <Button text="Button with boxShadow 5 props" tap="{{ onTap }}" height="50" marginTop="50" boxShadow="5 5 10 10 navy" class="btn btn-primary btn-active"/>  
+
+        <StackLayout boxShadow="10 10 rgba(0,0,0,1)" marginTop="50">
+          <Button text="Button with css boxShadow" tap="{{ onTap }}" height="50" borderRadius="10"/>
+        </StackLayout> -->
+
+        <!-- TODO: if backgroundColor is not set, it won't call background.ios.ts hence not applying the boxShadow -->
+        <!-- <StackLayout boxShadow="5 5 10 10 red" height="100" backgroundColor="transparent" padding="10" margin="20">
+            <Label text="StackLayout with transparent background"></Label>
+        </StackLayout> -->
+
+        <GridLayout boxShadow="10 -10 10 10 rgba(0,0,0,0.5)" height="100" backgroundColor="lightblue" padding="10" margin="20" tap="{{ toggleAnimation }}">
+            <Label text="GridLayout"></Label>
+        </GridLayout>
+
+        <StackLayout boxShadow="5 10 10 20 #000" height="100" backgroundColor="lightblue" padding="10" margin="20" tap="{{ toggleAnimation }}">
+            <Label text="StackLayout"></Label>
+        </StackLayout>
+
+        <AbsoluteLayout boxShadow="5 15 10 20 green" height="100" backgroundColor="lightblue" padding="10" margin="20" tap="{{ toggleAnimation }}">
+            <Label text="AbsoluteLayout"></Label>
+        </AbsoluteLayout>
+
+        <!-- note: the 3rd number in box shadow is currently being ignored, only the 1st, 2nd, and 4th, and color are being used-->
+        <FlexboxLayout boxShadow="0 0 10 25 red" height="100" backgroundColor="lightblue" padding="10" margin="20" tap="{{ toggleAnimation }}">
+            <Label text="FlexboxLayout"></Label>
+        </FlexboxLayout>
+
+        <FlexboxLayout boxShadow="15 10 10 20 #000" height="100" backgroundColor="transparent" padding="10" margin="20" tap="{{ toggleAnimation }}">
+            <Label text="FlexboxLayout (transparent background)"></Label>
+        </FlexboxLayout>
+
+        <Button marginTop="30" boxShadow="0 0 10 8 #000" backgroundColor="transparent" text="button" padding="20"></Button>
         
     </StackLayout>
+    </ScrollView>
 </Page>

apps/toolbox/src/main-view-model.ts

@@ -1,4 +1,4 @@
-import { Observable, Frame } from '@nativescript/core';
+import { Observable, Frame, StackLayout } from '@nativescript/core';
 
 export class HelloWorldModel extends Observable {
 	private _counter: number;
@@ -23,6 +23,15 @@ export class HelloWorldModel extends Observable {
 		}
 	}
 
+	toggleAnimation(args) {
+		const layout = args.object as StackLayout;
+		if (!layout.className) {
+			layout.className = 'sample-animation';
+		} else {
+			layout.className = undefined;
+		}
+	}
+
 	onTap() {
 		this._counter--;
 		this.updateMessage();