First commit

application/demo/pages/appearance/panel.js

@@ -0,0 +1,17 @@
+
+import os			from "./rows/os.js";
+
+import tint			from "./rows/tint.js";
+
+import panel		from '/elements/panel.js';
+
+
+export default class appearancePanel extends panel{
+
+	flexDirection		= "column";
+
+	os					= new os();
+
+	tint				= new tint();
+
+}

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";
+
+}

application/demo/pages/appearance/themeSelector.image.js

@@ -0,0 +1,41 @@
+
+
+export default class themaSelectorImage{
+
+	cursor			= "pointer";
+
+	backgroundSize	= "cover";
+
+	borderRadius	= 12;
+
+	layers			= 1;
+
+	width			= 80;
+
+	height			= 80;
+
+	margin			= 20;
+
+	marginBottom	= 4;
+
+	transition		= "1s"
+
+
+	border;
+
+	backgroundImage;
+
+
+	lowLight() {
+
+		this.border			= "none";
+
+	}
+
+	highlight() {
+
+		this.border			= "2px solid blue";
+
+	}
+
+}

application/demo/pages/appearance/themeSelector.js

@@ -0,0 +1,45 @@
+
+
+import themeSelectorImage		from "./themeSelector.image.js";
+
+import themeSelectorLabel		from "./themeSelector.label.js";
+
+
+export default class themeSelector{
+
+	flexDirection	= "column";
+
+	marginBottom		= 20;
+
+	constructor( name ) {
+
+		this.selectLabel.text				= name;
+
+	}
+
+	highlight() {
+
+		var children = this.parent.getChildren();
+
+		for (var i = 0; i < children.length; i++) {
+
+			children[i].selectImage.lowLight();
+
+		}
+
+		this.selectImage.highlight();
+
+	}
+
+	setImage( image ) {
+
+		this.selectImage.backgroundImage	= "url("+image+")";
+
+	}
+
+
+	selectImage		= new themeSelectorImage();
+
+	selectLabel 	= new themeSelectorLabel();
+	
+}

application/demo/pages/appearance/themeSelector.label.js

@@ -0,0 +1,24 @@
+
+
+export default class selectLabel{
+
+	fontSize		= 12;
+
+	fontWeight		= "bold";
+
+	margin			= "0 auto"
+
+
+#ifdef DARK
+
+	color	= "white"
+
+#endif
+
+#ifdef LIGHT
+
+	color	= "black";
+
+#endif
+
+}