First commit

application/demo/pages/appearance/rows/os.js

@@ -0,0 +1,37 @@
+
+import panelRow 					from '/elements/panel/row.js';
+
+import spinner 						from '/elements/preloaders/simpleSpinner.js';
+
+import osSelectorList				from "./os.selector.list.js";
+
+import osLabel						from "./os.label.js";
+
+
+export default class os extends panelRow{
+
+	flexDirection		= "row";
+
+	label				= new osLabel("Os");
+
+	osSelector			= new osSelectorList();
+
+	spinner				= new spinner();
+
+	create() {
+
+		this.osSelector.hide();
+
+	}
+
+	afterThemeLoad() {
+
+		this.spinner.hide()
+
+		this.osSelector.show();
+
+	}
+
+
+}
+

application/demo/pages/appearance/rows/os.label.js

@@ -0,0 +1,8 @@
+
+import label 						from '/elements/label.js';
+
+export default class osLabel extends label{
+
+	flex = "1";
+
+} 

application/demo/pages/appearance/rows/os.selector.js

@@ -0,0 +1,26 @@
+
+
+import themeSelector				from "../themeSelector.js";
+
+import tools 						from '/unify/tools.js';
+
+export default class themeOSSelectorItem extends themeSelector{
+
+	click() {
+
+		var osName = tools.CamelCase( this.selectLabel.text );
+
+		this.getRoot().os 	= osName;
+
+
+		this.parent.updateImages( this.getRoot().tint );
+
+		this.parents("appearancePanel").tint.themeTintSelectors.updateImages( osName )
+
+		this.highlight();
+
+	}
+
+	propegateEvent	= false;
+
+}

application/demo/pages/appearance/rows/os.selector.list.js

@@ -0,0 +1,44 @@
+
+import themeOSSelector				from './os.selector.js'
+
+import tools 						from '/unify/tools.js';
+
+
+export default class osSelectorList{
+
+	themeWindows	= new themeOSSelector("Windows");
+
+	themeMacOS		= new themeOSSelector("macOS");
+
+	//themeAndroid	= new themeOSSelector("Android");
+
+	updateImages( tint ) {
+
+		var camelCaseTint	= tools.CamelCase( tint );
+
+		this.themeWindows.setImage("/assets/images/themeSelectors/windows" + camelCaseTint + ".png");
+
+		this.themeMacOS.setImage("/assets/images/themeSelectors/macos" + camelCaseTint + ".png");
+
+		//this.themeAndroid.setImage("/assets/images/themeSelectors/macos" + camelCaseTint + ".png");
+
+	}
+
+	create() {
+
+		this.themeWindows.highlight();
+
+		this.themeWindows.setImage('/assets/images/themeSelectors/windowsLight.png');
+
+		this.themeMacOS.setImage('/assets/images/themeSelectors/macosLight.png');
+
+		//this.themeAndroid.setImage('/assets/images/themeSelectors/macosLight.png');
+	}
+
+	layers				= 1;
+
+	margin				= 4;
+
+	marginLeft			= "auto";
+
+}

application/demo/pages/appearance/rows/tint.js

@@ -0,0 +1,38 @@
+
+import panelRow 					from '/elements/panel/row.js';
+
+import select 						from '/elements/selectRenderCollection.js';
+
+import spinner 						from '/elements/preloaders/simpleSpinner.js';
+
+import themeTintSelectors			from "./tint.selector.list.js";
+
+import customLabel					from "./tint.label.js";
+
+
+
+export default class tint extends panelRow{
+
+	flexDirection			= "row";
+
+	label					= new customLabel("Appearance");
+
+	themeTintSelectors		= new themeTintSelectors();
+
+	spinner					= new spinner();
+
+	create() {
+
+		this.themeTintSelectors.hide()
+
+	}
+
+	afterThemeLoad() {
+
+		this.spinner.hide()
+
+		this.themeTintSelectors.show();
+
+	}
+
+}

application/demo/pages/appearance/rows/tint.label.js

@@ -0,0 +1,10 @@
+
+
+import label 						from '/elements/label.js';
+
+
+export default class customLabel extends label{
+
+	flex = "1";
+
+} 

application/demo/pages/appearance/rows/tint.selector.js

@@ -0,0 +1,24 @@
+
+import themeSelector		from "../themeSelector.js";
+
+import tools				from '/unify/tools.js';
+
+
+export default class themeTintSelector extends themeSelector{
+
+	click() {
+
+		var tintName = tools.CamelCase( this.selectLabel.text );
+	
+		this.parents("appearancePanel").os.osSelector.updateImages( tintName )
+
+		this.highlight();
+
+
+		this.getRoot().tint 	= tintName;
+
+	}
+
+	propegateEvent	= false;
+
+}

application/demo/pages/appearance/rows/tint.selector.list.js

@@ -0,0 +1,46 @@
+
+import themeTintSelector			from "./tint.selector.js"
+
+import tools 						from '/unify/tools.js';
+
+
+export default class themeTintSelectors{
+
+
+	themeLight		= new themeTintSelector("Light");
+
+	themeDark		= new themeTintSelector("Dark");
+
+
+	updateImages( os ) {
+
+		os				= os.toLowerCase();
+
+		var tint		= tools.CamelCase( this.getRoot().tint );
+
+
+		this.themeDark.setImage("/assets/images/themeSelectors/" + os + "Dark.png");
+
+		this.themeLight.setImage("/assets/images/themeSelectors/" + os + "Light.png");
+
+		this["theme"+tint].highlight();
+
+	}
+
+	create() {
+
+		this.themeDark.highlight();
+
+		this.themeDark.setImage('/assets/images/themeSelectors/windowsDark.png');
+
+		this.themeLight.setImage('/assets/images/themeSelectors/windowsLight.png');
+
+	}
+
+	layers				= 1;
+
+	margin				= 4;
+
+	marginLeft			= "auto";
+
+}