From 08552a955e8d5194ee06b12351037a7abfc63da7 Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Mon, 8 Aug 2016 14:36:36 -0700
Subject: [PATCH] feat(Organization): renaming and organization of theme files
 per discussion

closes https://github.com/NativeScript/theme/issues/11
---
 app/_demo.scss                                | 14 +++++++
 app/app.scss                                  | 20 ++++++---
 app/dark.android.scss                         | 12 ++++++
 app/dark.ios.scss                             | 12 ++++++
 app/light.android.scss                        | 12 ++++++
 app/light.ios.scss                            | 12 ++++++
 app/pages/basics.xml                          |  4 +-
 app/pages/themes-vm.ts                        | 41 ++++++++++++-------
 app/pages/themes.xml                          |  8 ++--
 app/scss/{_button.scss => _buttons.scss}      |  0
 app/scss/_core.scss                           | 20 ---------
 app/scss/_index.scss                          | 12 ++++++
 app/scss/{_label.scss => _labels.scss}        |  0
 app/scss/themes/_button.scss                  |  4 --
 app/scss/themes/_nina.scss                    | 20 ---------
 app/scss/themes/core/_buttons.scss            |  7 ++++
 app/scss/themes/core/_dark.scss               |  9 ++++
 app/scss/themes/core/_light.scss              |  9 ++++
 .../_variables_dark.scss}                     |  4 ++
 app/scss/themes/core/_variables_light.scss    | 28 +++++++++++++
 app/theme-nina.scss                           |  8 ----
 hooks/before-prepare/nativescript-dev-sass.js |  9 ++--
 22 files changed, 185 insertions(+), 80 deletions(-)
 create mode 100644 app/_demo.scss
 create mode 100644 app/dark.android.scss
 create mode 100644 app/dark.ios.scss
 create mode 100644 app/light.android.scss
 create mode 100644 app/light.ios.scss
 rename app/scss/{_button.scss => _buttons.scss} (100%)
 delete mode 100644 app/scss/_core.scss
 create mode 100644 app/scss/_index.scss
 rename app/scss/{_label.scss => _labels.scss} (100%)
 delete mode 100644 app/scss/themes/_button.scss
 delete mode 100644 app/scss/themes/_nina.scss
 create mode 100644 app/scss/themes/core/_buttons.scss
 create mode 100644 app/scss/themes/core/_dark.scss
 create mode 100644 app/scss/themes/core/_light.scss
 rename app/scss/themes/{_variables.scss => core/_variables_dark.scss} (89%)
 create mode 100644 app/scss/themes/core/_variables_light.scss
 delete mode 100644 app/theme-nina.scss

diff --git a/app/_demo.scss b/app/_demo.scss
new file mode 100644
index 0000000..5e35f04
--- /dev/null
+++ b/app/_demo.scss
@@ -0,0 +1,14 @@
+.main-page {
+  Button {
+    font-size: 30;
+    margin:10;
+  }
+}
+.themes {
+  Label {
+    margin: 5;
+  }
+  Button {
+    margin:5;
+  }
+}
\ No newline at end of file
diff --git a/app/app.scss b/app/app.scss
index 7a83568..554d981 100644
--- a/app/app.scss
+++ b/app/app.scss
@@ -1,8 +1,16 @@
-@import 'scss/core';
+/*!
+ * NativeScript Theme v0.1.0 (https://nativescript.org)
+ * Copyright 2016-2016 The Theme Authors
+ * Copyright 2016-2016 Telerik
+ * Licensed under MIT (https://github.com/NativeScript/theme/blob/master/LICENSE)
+ */
+ 
+/**
+ * Base style (un-themed)
+ */
+@import 'scss/variables';
+@import 'scss/index';
 
-.main-page {
+// demo app
+@import 'demo';
 
-  Button {
-    @include button-size(15, 15, 40, $btn-radius);
-  }
-}
\ No newline at end of file
diff --git a/app/dark.android.scss b/app/dark.android.scss
new file mode 100644
index 0000000..a32df08
--- /dev/null
+++ b/app/dark.android.scss
@@ -0,0 +1,12 @@
+/*!
+ * NativeScript Theme v0.1.0 (https://nativescript.org)
+ * Copyright 2016-2016 The Theme Authors
+ * Copyright 2016-2016 Telerik
+ * Licensed under MIT (https://github.com/NativeScript/theme/blob/master/LICENSE)
+ */
+ 
+@import 'scss/themes/core/dark';
+@import 'scss/themes/core/platforms/index.android';
+
+// demo app
+@import 'demo';
\ No newline at end of file
diff --git a/app/dark.ios.scss b/app/dark.ios.scss
new file mode 100644
index 0000000..3e6e75c
--- /dev/null
+++ b/app/dark.ios.scss
@@ -0,0 +1,12 @@
+/*!
+ * NativeScript Theme v0.1.0 (https://nativescript.org)
+ * Copyright 2016-2016 The Theme Authors
+ * Copyright 2016-2016 Telerik
+ * Licensed under MIT (https://github.com/NativeScript/theme/blob/master/LICENSE)
+ */
+ 
+@import 'scss/themes/core/dark';
+@import 'scss/themes/core/platforms/index.ios';
+
+// demo app
+@import 'demo';
\ No newline at end of file
diff --git a/app/light.android.scss b/app/light.android.scss
new file mode 100644
index 0000000..5c57d1b
--- /dev/null
+++ b/app/light.android.scss
@@ -0,0 +1,12 @@
+/*!
+ * NativeScript Theme v0.1.0 (https://nativescript.org)
+ * Copyright 2016-2016 The Theme Authors
+ * Copyright 2016-2016 Telerik
+ * Licensed under MIT (https://github.com/NativeScript/theme/blob/master/LICENSE)
+ */
+
+@import 'scss/themes/core/light';
+@import 'scss/themes/core/platforms/index.android';
+
+// demo app
+@import 'demo';
\ No newline at end of file
diff --git a/app/light.ios.scss b/app/light.ios.scss
new file mode 100644
index 0000000..40f03a2
--- /dev/null
+++ b/app/light.ios.scss
@@ -0,0 +1,12 @@
+/*!
+ * NativeScript Theme v0.1.0 (https://nativescript.org)
+ * Copyright 2016-2016 The Theme Authors
+ * Copyright 2016-2016 Telerik
+ * Licensed under MIT (https://github.com/NativeScript/theme/blob/master/LICENSE)
+ */
+ 
+@import 'scss/themes/core/light';
+@import 'scss/themes/core/platforms/index.ios';
+
+// demo app
+@import 'demo';
\ No newline at end of file
diff --git a/app/pages/basics.xml b/app/pages/basics.xml
index fc42d72..971f6fb 100644
--- a/app/pages/basics.xml
+++ b/app/pages/basics.xml
@@ -8,8 +8,8 @@
     </ActionBar>
   </Page.actionBar>
   <StackLayout>
-      <Button text="Button" tap="" cssClass="btn-primary" />
-      <Button text="Button" tap="" cssClass="btn-outline-primary" />
+      <Button text="Button" tap="" cssClass="btn btn-primary" />
+      <Button text="Button" tap="" cssClass="btn btn-outline-primary" />
 
   </StackLayout>
 </Page>
\ No newline at end of file
diff --git a/app/pages/themes-vm.ts b/app/pages/themes-vm.ts
index ea9b5f8..1fbf3a6 100644
--- a/app/pages/themes-vm.ts
+++ b/app/pages/themes-vm.ts
@@ -1,30 +1,43 @@
 import {Observable} from 'data/observable';
 import {topmost} from 'ui/frame';
 import {knownFolders} from 'file-system';
+import {isIOS, isAndroid} from 'platform';
 var themes = require('nativescript-themes');
 
 export class ThemesModel extends Observable {
-  public btnText: string;
+  public labelText: string;
   private _toggled: boolean = false;
 
   constructor() {
     super();
-    this.set('btnText', 'Nina');
+    this.set('labelText', 'Default');
   }
 
-  public switchTheme() {
-    this._toggled = !this._toggled;
+  public applyDefault() {
+    this.set('labelText', 'Default');
+    themes.applyTheme(this.getPath('app'));
+  }
 
-    let appPath = knownFolders.currentApp().path + '/';
-    
-    if (this._toggled) {
-      this.set('btnText', 'Default');
-      themes.applyTheme(`${appPath}theme-nina.css`);
-      
-    } else {
-      this.set('btnText', 'Nina');
-      themes.applyTheme(`${appPath}app.css`);
-    }
+  public applyLight() {
+    this.set('labelText', 'Light');
+    themes.applyTheme(this.getPath('light'));
+  }
 
+  public applyDark() {
+    this.set('labelText', 'Dark');
+    themes.applyTheme(this.getPath('dark'));
+  }
+
+  private getPath(name: string) {
+    let appPath = knownFolders.currentApp().path + '/';
+    let platform = '';
+    // if (name !== 'app') {
+    //   if (isIOS) {
+    //     platform = '.ios';
+    //   } else {
+    //     platform = '.android';
+    //   }
+    // }
+    return `${appPath}${name}${platform}.css`;
   }
 }
\ No newline at end of file
diff --git a/app/pages/themes.xml b/app/pages/themes.xml
index f364b6b..7701505 100644
--- a/app/pages/themes.xml
+++ b/app/pages/themes.xml
@@ -7,8 +7,10 @@
       </ActionBar.actionItems>
     </ActionBar>
   </Page.actionBar>
-  <StackLayout>
-    <Button text="{{ 'Change Theme to ' + btnText}}" tap="{{ switchTheme }}" />
-    <Label text="TO DO :)" textWrap="true" />
+  <StackLayout class="main-page themes">
+    <Label text="{{ 'Active: ' + labelText }}" textWrap="true" />
+    <Button text="Apply Default" tap="{{ applyDefault }}" />
+    <Button text="Apply Light" tap="{{ applyLight }}" />
+    <Button text="Apply Dark" tap="{{ applyDark }}" />
   </StackLayout>
 </Page>
\ No newline at end of file
diff --git a/app/scss/_button.scss b/app/scss/_buttons.scss
similarity index 100%
rename from app/scss/_button.scss
rename to app/scss/_buttons.scss
diff --git a/app/scss/_core.scss b/app/scss/_core.scss
deleted file mode 100644
index 789a3fd..0000000
--- a/app/scss/_core.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/*!
- * NativeScript Theme v0.1.0 (https://nativescript.org)
- * Copyright 2016-2016 The Theme Authors
- * Copyright 2016-2016 Telerik
- * Licensed under MIT (https://github.com/NativeScript/theme/blob/master/LICENSE)
- */
-
-// Core variables and mixins
-@import 'variables';
-@import 'mixins';
-
-// Core CSS
-@import 'action-bar';
-@import 'button';
-@import 'label';
-@import 'list-view';
-@import 'segmented-bar';
-@import 'switch';
-@import 'slider';
-@import 'stack-layout';
\ No newline at end of file
diff --git a/app/scss/_index.scss b/app/scss/_index.scss
new file mode 100644
index 0000000..ce7e648
--- /dev/null
+++ b/app/scss/_index.scss
@@ -0,0 +1,12 @@
+// Utilities
+@import 'mixins';
+
+// Core CSS
+@import 'action-bar';
+@import 'buttons';
+@import 'labels';
+@import 'list-view';
+@import 'segmented-bar';
+@import 'switch';
+@import 'slider';
+@import 'stack-layout';
\ No newline at end of file
diff --git a/app/scss/_label.scss b/app/scss/_labels.scss
similarity index 100%
rename from app/scss/_label.scss
rename to app/scss/_labels.scss
diff --git a/app/scss/themes/_button.scss b/app/scss/themes/_button.scss
deleted file mode 100644
index 9e301f8..0000000
--- a/app/scss/themes/_button.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-Button {
-  color: $btn-color;
-  @include button-size(5, 10, 18, $btn-radius);
-}
\ No newline at end of file
diff --git a/app/scss/themes/_nina.scss b/app/scss/themes/_nina.scss
deleted file mode 100644
index 84bc74d..0000000
--- a/app/scss/themes/_nina.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/*!
- * NativeScript Theme v0.1.0 (https://nativescript.org)
- * Copyright 2016-2016 The Theme Authors
- * Copyright 2016-2016 Telerik
- * Licensed under MIT (https://github.com/NativeScript/theme/blob/master/LICENSE)
- */
-
-// Core variables and mixins
-@import 'variables';
-@import '../mixins';
-
-// Core CSS
-@import '../action-bar';
-@import 'button';
-@import '../label';
-@import '../list-view';
-@import '../segmented-bar';
-@import '../switch';
-@import '../slider';
-@import '../stack-layout';
\ No newline at end of file
diff --git a/app/scss/themes/core/_buttons.scss b/app/scss/themes/core/_buttons.scss
new file mode 100644
index 0000000..b49c872
--- /dev/null
+++ b/app/scss/themes/core/_buttons.scss
@@ -0,0 +1,7 @@
+// Just a sample
+// if we need custom styles for the theme, we can create them in files like this
+
+.btn {
+  color: $btn-color;
+  @include button-size(5, 10, 18, $btn-radius);
+}
\ No newline at end of file
diff --git a/app/scss/themes/core/_dark.scss b/app/scss/themes/core/_dark.scss
new file mode 100644
index 0000000..aab360c
--- /dev/null
+++ b/app/scss/themes/core/_dark.scss
@@ -0,0 +1,9 @@
+// Core variables and mixins
+@import '../../variables';
+@import 'variables_dark';
+
+// Core CSS
+@import '../../index';
+
+// Custom Theme Overrides
+@import 'buttons';
\ No newline at end of file
diff --git a/app/scss/themes/core/_light.scss b/app/scss/themes/core/_light.scss
new file mode 100644
index 0000000..aaef1fc
--- /dev/null
+++ b/app/scss/themes/core/_light.scss
@@ -0,0 +1,9 @@
+// Core variables and mixins
+@import '../../variables';
+@import 'variables_light';
+
+// Core CSS
+@import '../../index';
+
+// Custom Theme Overrides
+@import 'buttons';
\ No newline at end of file
diff --git a/app/scss/themes/_variables.scss b/app/scss/themes/core/_variables_dark.scss
similarity index 89%
rename from app/scss/themes/_variables.scss
rename to app/scss/themes/core/_variables_dark.scss
index fa86161..01b6323 100644
--- a/app/scss/themes/_variables.scss
+++ b/app/scss/themes/core/_variables_dark.scss
@@ -1,3 +1,7 @@
+/**
+ * TODO .... These are not correct ... just samples.
+ */
+ 
 // Colors
 $primary: #528100;
 $complimentary: #7C3FE8;
diff --git a/app/scss/themes/core/_variables_light.scss b/app/scss/themes/core/_variables_light.scss
new file mode 100644
index 0000000..bcb86a5
--- /dev/null
+++ b/app/scss/themes/core/_variables_light.scss
@@ -0,0 +1,28 @@
+/**
+ * TODO .... These are not correct ... just samples.
+ */
+ 
+// Colors
+$primary: pink;
+$complimentary: purple;
+$gray: lightblue;
+$white: white;
+
+// Skin
+$background: $primary;
+$text-color: $gray;
+
+// Buttons
+$btn-color: $complimentary;
+$btn-font-size: 18;
+$btn-radius: 5;
+$btn-padding-x: 20;
+$btn-padding-y: 20;
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+$enable-rounded:            true !default;
+$enable-shadows:            false !default;
+$enable-gradients:          false !default;
+$enable-transitions:        false !default;
\ No newline at end of file
diff --git a/app/theme-nina.scss b/app/theme-nina.scss
deleted file mode 100644
index 48f0a3e..0000000
--- a/app/theme-nina.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import 'scss/themes/nina';
-
-.main-page {
-
-  Button {
-    @include button-size(10, 10, 25, $btn-radius);
-  }
-}
\ No newline at end of file
diff --git a/hooks/before-prepare/nativescript-dev-sass.js b/hooks/before-prepare/nativescript-dev-sass.js
index 2433929..15c28eb 100644
--- a/hooks/before-prepare/nativescript-dev-sass.js
+++ b/hooks/before-prepare/nativescript-dev-sass.js
@@ -9,12 +9,15 @@ function convert(logger, projectDir, options) {
 		
     // Customized by Nathan Walker 
     // Allows normal SASS imports to work as expected
-		var sassFilesPath = path.join(projectDir, 'app/*.scss');
+		var sassFilesPath = path.join(projectDir, 'app/**/*.scss');
     var sassImportPath = path.join(projectDir, 'app/');
     console.log("SASS Import Path", sassImportPath);
     
-		var sassFiles = glob.sync(sassFilesPath).filter(function(fileName){
-			return fileName.indexOf("App_Resources") === -1;
+    var sassFiles = glob.sync(sassFilesPath).filter(function (filePath) {
+      var path = filePath;
+      var parts = path.split('/');
+      var filename = parts[parts.length - 1];
+			return path.indexOf("App_Resources") === -1 && filename.indexOf("_") !== 0;
 		});
     
     if(sassFiles.length === 0){