chore: cleanup background handling

apps/automated/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

apps/toolbox/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

apps/toolbox/package.json

@@ -7,13 +7,13 @@
     "url": "https://github.com/NativeScript/NativeScript.git"
   },
   "dependencies": {
-    "nativescript-theme-core": "file:../../node_modules/nativescript-theme-core",
-    "@nativescript/core": "file:../../packages/core"
+    "@nativescript/core": "file:../../packages/core",
+    "nativescript-theme-core": "file:../../node_modules/nativescript-theme-core"
   },
   "devDependencies": {
     "@nativescript/android": "7.0.1",
     "@nativescript/ios": "7.2.0",
     "@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
-    "typescript": "file:../../node_modules/typescript"
+    "typescript": "4.0.7"
   }
 }

apps/toolbox/src/main-page.xml

@@ -10,6 +10,7 @@
         <Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
         <Button text="root-layout" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
         <Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
+        <Button text="css-playground" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
       </StackLayout>
     </ScrollView>
   </StackLayout>

apps/toolbox/src/pages/css-playground.ts

@@ -0,0 +1,41 @@
+import { Observable, EventData, Page, Label } from '@nativescript/core';
+import { addTaggedAdditionalCSS, removeTaggedAdditionalCSS } from '@nativescript/core/ui/styling/style-scope';
+
+let page: Page;
+let playLabel: Label;
+let CSSTag = 'css-playground';
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new CssPlaygroundModel();
+	playLabel = page.getViewById('play');
+}
+
+export class CssPlaygroundModel extends Observable {
+	currentCSS = [
+		`width: 200;`,
+		`font-size: 20;`,
+		`background: #65adf1;`,
+		`color: white;`,
+		`box-shadow: 5 5;`,
+		// `text-shadow: 2 2 red;`,
+		`padding: 16;`,
+	].join('\n');
+
+	onTextChange(args) {
+		this.currentCSS = args.value;
+	}
+
+	resetCSS() {
+		console.log('reset css...');
+		removeTaggedAdditionalCSS(CSSTag);
+
+		playLabel._onCssStateChange();
+	}
+
+	applyCSS(args) {
+		this.resetCSS();
+		addTaggedAdditionalCSS(`#play { ${this.currentCSS}`, CSSTag);
+		playLabel._onCssStateChange();
+	}
+}

apps/toolbox/src/pages/css-playground.xml

@@ -0,0 +1,19 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+    <Page.actionBar>
+        <ActionBar title="CSS Playground" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <GridLayout rows="*, *">
+			<ContentView>
+				<Label id="play" text="I'm a test label." verticalAlignment="center"/>
+			</ContentView>
+
+			<GridLayout row="1" rows="*, auto, auto" borderTopWidth="1">
+				<TextView text="{{ currentCSS }}" textChange="{{ onTextChange }}"/>
+
+				<Button class="btn btn-primary" text="Apply" row="1" tap="{{ applyCSS }}"/>
+				<Button class="btn btn-primary btn-orange" text="Reset" row="2" tap="{{ resetCSS }}"/>
+			</GridLayout>
+		</GridLayout>
+</Page>

apps/toolbox/src/pages/root-layout.ts

@@ -1,5 +1,4 @@
-import { EventData, Page, Observable, RootLayoutOptions, getRootLayout, StackLayout, View } from '@nativescript/core';
-import { Enums } from '@nativescript/core';
+import { EventData, Page, Observable, RootLayoutOptions, getRootLayout, StackLayout, View, CoreTypes } from '@nativescript/core';
 
 export function navigatingTo(args: EventData) {
 	const page = <Page>args.object;

apps/ui/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

apps/ui/src/css/text-shadow-page.ts

@@ -12,7 +12,7 @@ const possibleValues = [
 ];
 let currentIndex = 0;
 
-export function butonTap(args: EventData) {
+export function buttonTap(args: EventData) {
 	let page = (<TextBase>args.object).page;
 	let lbl = <TextBase>page.getViewById('Label');
 	let btn = <TextBase>page.getViewById('Button');
@@ -20,7 +20,7 @@ export function butonTap(args: EventData) {
 	let textView = <TextBase>page.getViewById('TextView');
 
 	let newIndex = currentIndex++ % possibleValues.length;
-	let newValue = <any>possibleValues[newIndex];
+	let newValue = possibleValues[newIndex];
 
 	lbl.textShadow = newValue;
 	btn.textShadow = newValue;

apps/ui/src/css/text-shadow-page.xml

@@ -1,6 +1,6 @@
 <Page>
   <StackLayout>
-    <Button id="Change" automationText="Change" text="Change" tap="butonTap" />
+    <Button id="Change" automationText="Change" text="Change" tap="buttonTap" />
     <Label id="Label" automationText="Label" text="Label" />
     <Button id="Button" automationText="Button" text="Button" />
     <TextField id="TextField" automationText="TextField" text="TextField" />