Merge branch 'master' into animate-width-height

apps/app/ui-tests-app/button/button-border.css

@@ -46,7 +46,7 @@ Button {
 }
 
 #s10 {
-    border-width: 5 0; border-color: black; background-color: white;
+    android-elevation: 0; border-width: 5 0; border-color: black;
 }
 
 #s11 {

apps/app/ui-tests-app/css/elevation.css

@@ -0,0 +1,43 @@
+Label, Button {
+    text-align: center;
+    padding: 10;
+    margin: 16;
+    background-color: #bbb;
+}
+
+.elevation-0 {
+    android-elevation: 0;
+}
+
+.elevation-2 {
+    android-elevation: 2;
+}
+
+.elevation-4 {
+    android-elevation: 4;
+}
+
+.elevation-4:highlighted {
+    android-elevation: 2;
+}
+
+.elevation-8 {
+    android-elevation: 8;
+}
+
+.elevation-10 {
+    android-elevation: 10;
+}
+
+.pressed-z-10 {
+    android-dynamic-elevation-offset: 10;
+}
+
+.round {
+    color: #fff;
+    background-color: #ff1744;
+    border-radius: 50%; /* TODO kills elevation */
+    width: 80;
+    height: 80;
+    android-elevation: 8;
+}

apps/app/ui-tests-app/css/elevation.ts

@@ -0,0 +1,20 @@
+import { Button } from "tns-core-modules/ui/button/button";
+import { EventData } from "tns-core-modules/ui/page/page";
+
+const states = [
+    { class: "", text: "default elevation" },
+    { class: "elevation-10", text: "elevetion 10" },
+    { class: "elevation-10 pressed-z-10", text: "elevetion 10 pressed-z 10" },
+    { class: "elevation-0", text: "elevetion 0" },
+]
+let currentState = 0;
+
+export function buttonTap(args: EventData) {
+    let btn: Button = args.object as Button;
+    currentState++;
+    if (currentState >= states.length) {
+        currentState = 0;
+    }
+    btn.className = states[currentState].class;
+    btn.text = states[currentState].text;
+}

apps/app/ui-tests-app/css/elevation.xml

@@ -0,0 +1,25 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded">
+    <ScrollView>
+        <StackLayout backgroundColor="aliceblue" androidElevation="2" padding="10" margin="20">
+            <Button text="default elevation" tap="buttonTap"/>
+
+            <Button class="elevation-0" text="elevation 0"/>
+
+            <Label class="elevation-2" text="Label with elevation 2"/>
+
+            <StackLayout androidElevation="4" backgroundColor="#ff1744" horizontalAlignment="center" margin="20">
+                <Button class="elevation-2" text="elevation 2"/>
+                <Button class="elevation-4" text="elevation 4"/>
+            </StackLayout>
+
+            <StackLayout orientation="horizontal" horizontalAlignment="center">
+                <Button class="round" androidElevation="4" text="el. 4"/>
+                <Button class="elevation-8 round" text="el. 8"/>
+            </StackLayout>
+
+            <Label class="elevation-8" text="elevation 8"/>
+            <Button class="elevation-8" text="elevation 8, with radius" borderRadius="4"/>
+            <Button class="elevation-10" text="elevation 10"/>
+        </StackLayout>
+    </ScrollView>
+</Page>

apps/app/ui-tests-app/css/main-page.ts

@@ -38,6 +38,7 @@ export function loadExamples() {
     examples.set("margins-paddings-with-percentage", "css/margins-paddings-with-percentage");
     examples.set("padding-and-border", "css/padding-and-border");
     examples.set("combinators", "css/combinators");
+    examples.set("elevation", "css/elevation");
     examples.set("styled-formatted-text", "css/styled-formatted-text");
     examples.set("non-uniform-radius", "css/non-uniform-radius");
     examples.set("missing-background-image", "css/missing-background-image");

apps/app/ui-tests-app/css/pixels.xml

@@ -4,7 +4,7 @@
     <Label text="pixels" />
     <StackLayout borderWidth="1px" borderColor="black" horizontalAlignment="left" verticalAlignment="top" orientation="horizontal" padding="1px">
       <Label     text="Label"      borderWidth="1px" borderRadius="10px" borderColor="green" padding="1px" margin="1px" />
-      <Button    text="Button"     borderWidth="1px" borderRadius="10px" borderColor="green" padding="1px" margin="1px" backgroundColor="orange" />
+      <Button    text="Button"     borderWidth="1px" borderRadius="10px" borderColor="green" padding="1px" margin="1px" androidElevation="0" />
       <TextView  text="Text View"  borderWidth="1px" borderRadius="10px" borderColor="green" padding="1px" margin="1px" />
       <TextField text="Text Field" borderWidth="1px" borderRadius="10px" borderColor="green" padding="1px" margin="1px" />
       <Image src="~/ui-tests-app/resources/images/gravatar.png" borderWidth="1px" borderRadius="10px" borderColor="green" padding="1px" margin="1px" />
@@ -12,7 +12,7 @@
 
      <StackLayout borderWidth="2px" borderColor="green" orientation="horizontal" padding="2px">
       <Label     text="Label"      borderWidth="5px" borderRadius="10px" borderColor="black" padding="5px" margin="5px" />
-      <Button    text="Button"     borderWidth="4px" borderRadius="10px" borderColor="black" padding="4px" margin="4px" backgroundColor="orange" />
+      <Button    text="Button"     borderWidth="4px" borderRadius="10px" borderColor="black" padding="4px" margin="4px" androidElevation="0" />
       <TextView  text="Text View"  borderWidth="3px" borderRadius="10px" borderColor="black" padding="3px" margin="3px" />
       <TextField text="Text Field" borderWidth="2px" borderRadius="10px" borderColor="black" padding="2px" margin="2px" />
     </StackLayout>
@@ -32,7 +32,7 @@
     <Label text="device independent pixels" />
     <StackLayout borderWidth="1" borderColor="black" horizontalAlignment="left" verticalAlignment="top" orientation="horizontal" padding="1">
       <Label     text="Label"      borderWidth="1" borderRadius="10" borderColor="green" padding="1" margin="1" />
-      <Button    text="Button"     borderWidth="1" borderRadius="10" borderColor="green" padding="1" margin="1" backgroundColor="orange" />
+      <Button    text="Button"     borderWidth="1" borderRadius="10" borderColor="green" padding="1" margin="1" androidElevation="0" />
       <TextView  text="Text View"  borderWidth="1" borderRadius="10" borderColor="green" padding="1" margin="1" />
       <TextField text="Text Field" borderWidth="1" borderRadius="10" borderColor="green" padding="1" margin="1" />
       <Image src="~/ui-tests-app/resources/images/gravatar.png" borderWidth="1" borderRadius="10" borderColor="green" padding="1" margin="1" />
@@ -40,7 +40,7 @@
 
      <StackLayout borderWidth="2" borderColor="green" orientation="horizontal" padding="2">
       <Label     text="Label"      borderWidth="5" borderRadius="10" borderColor="black" padding="5" margin="5" />
-      <Button    text="Button"     borderWidth="4" borderRadius="10" borderColor="black" padding="4" margin="4" backgroundColor="orange" />
+      <Button    text="Button"     borderWidth="4" borderRadius="10" borderColor="black" padding="4" margin="4" androidElevation="0" />
       <TextView  text="Text View"  borderWidth="3" borderRadius="10" borderColor="black" padding="3" margin="3" />
       <TextField text="Text Field" borderWidth="2" borderRadius="10" borderColor="black" padding="2" margin="2" />
     </StackLayout>

apps/app/ui-tests-app/flexbox/flexbox.css

@@ -20,9 +20,9 @@
     border-color: gray;
 }
 .control Button {
+    android-elevation: 0;
     border-width: 1 1 0 0;
     border-color: gray;
-    background-color: white;
     font-size: 9;
     padding: 0;
     height: 0;

apps/app/ui-tests-app/issues/issue-3113.css

@@ -1,16 +1,16 @@
 #button1 {
-    border-color: transparent;
+    android-elevation: 0;
+    border-color: rgba(0, 0, 0, 0);
     border-width: 3;
-    background-color: white;
 }
 
 #button2 {
+    android-elevation: 0;
     border-color: rgba(0, 0, 0, 0.5);
     border-width: 3;
-    background-color: white;
 }
 
 #button3 {
+    android-elevation: 0;
     border-width: 3;
-    background-color: white;
 }

apps/app/ui-tests-app/tab-view/main-page.ts

@@ -27,5 +27,6 @@ export function loadExamples() {
     examples.set("tab-view-tab-text-font-size", "tab-view/tab-view-tab-text-font-size");
     examples.set("tab-view-android-swipe", "tab-view/tab-view-android-swipe");
     examples.set("tab-view-icon-title-placement", "tab-view/icon-title-placement");
+    examples.set("tab-text-color", "tab-view/tab-text-color");
     return examples;
 }

apps/app/ui-tests-app/tab-view/tab-text-color.xml

@@ -0,0 +1,24 @@
+<Page>
+  <TabView tabTextColor="red">
+    <TabView.items>
+
+      <TabViewItem title="Tab 1">
+        <TabViewItem.view>
+          <Label text="Label 1" />
+        </TabViewItem.view>
+      </TabViewItem>
+
+      <TabViewItem title="Tab 2">
+        <TabViewItem.view>
+          <Label text="Label 2" />
+        </TabViewItem.view>
+      </TabViewItem>
+
+      <TabViewItem title="Tab 3">
+        <TabViewItem.view>
+          <Label text="Label 3" />
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>