Permalink
Browse files

basic start of palette builder web, move a file arounf [ci skip]

  • Loading branch information...
1 parent a4b7ba1 commit cf8932feb019da5e9c91ea18ef05193df8a0b59d @ButchersBoy committed Mar 21, 2015
View
@@ -229,3 +229,6 @@ $RECYCLE.BIN/
# Windows shortcuts
*.lnk
+
+#React.JS
+.module-cache
@@ -1,11 +1,15 @@
<!DOCTYPE html>
<head>
<title>Material Design in XAML Toolkit Palette Builder</title>
- <script src="MaterialDesignPalette.js"></script>
+ <link rel="stylesheet" href="styles/style.css" />
+ <script src="scripts/Swatches.js"></script>
+ <script src="scripts/react.js"></script>
<body>
- hello world (new linux VM test)
- <script>
- alert(swatches[3].colors[2].foregroundName);
- </script>
+ <h1>Material Design in XAML Toolkit Palette Builder</h1>
+ <script>
+ //alert(swatches[3].colors[2].foregroundName);
+ </script>
+ <div id="swatches" />
</body>
-</head>wd
+ <script src="scripts/PaletteBuilder.js"></script>
+</head>
@@ -0,0 +1,50 @@
+var Color = React.createClass({
+ render: function() {
+
+ var style = {
+ background:this.props.backgroundColour,
+ color:this.props.foregroundColour
+ };
+
+ return (
+ <div style={style}>{this.props.backgroundName}</div>
+ );
+ }
+});
+
+var Swatch = React.createClass({
+ render: function() {
+ var colorNodes = this.props.colors.map(function (colorItem) {
+ return (
+ <Color backgroundName={colorItem.backgroundName} backgroundColour={colorItem.backgroundColour} foregroundName={colorItem.foregroundName} foregroundColour={colorItem.foregroundColour} />
+ );
+ });
+ return (
+ <div className="swatch">
+ {this.props.name}
+ {colorNodes}
+ </div>
+ );
+ }
+});
+
+var SwatchesBox = React.createClass({
+ render: function() {
+ var swatchNodes = this.props.swatches.map(function(swatch) {
+ return (
+ <Swatch name={swatch.name} colors={swatch.colors} />
+ );
+ });
+
+ return (
+ <div>
+ {swatchNodes}
+ </div>
+ );
+ }
+});
+
+React.render(
+ <SwatchesBox swatches={swatches} />,
+ document.getElementById('swatches')
+ )
@@ -0,0 +1,50 @@
+var Color = React.createClass({displayName: "Color",
+ render: function() {
+
+ var style = {
+ background:this.props.backgroundColour,
+ color:this.props.foregroundColour
+ };
+
+ return (
+ React.createElement("div", {style: style}, this.props.backgroundName)
+ );
+ }
+});
+
+var Swatch = React.createClass({displayName: "Swatch",
+ render: function() {
+ var colorNodes = this.props.colors.map(function (colorItem) {
+ return (
+ React.createElement(Color, {backgroundName: colorItem.backgroundName, backgroundColour: colorItem.backgroundColour, foregroundName: colorItem.foregroundName, foregroundColour: colorItem.foregroundColour})
+ );
+ });
+ return (
+ React.createElement("div", {className: "swatch"},
+ this.props.name,
+ colorNodes
+ )
+ );
+ }
+});
+
+var SwatchesBox = React.createClass({displayName: "SwatchesBox",
+ render: function() {
+ var swatchNodes = this.props.swatches.map(function(swatch) {
+ return (
+ React.createElement(Swatch, {name: swatch.name, colors: swatch.colors})
+ );
+ });
+
+ return (
+ React.createElement("div", null,
+ swatchNodes
+ )
+ );
+ }
+});
+
+React.render(
+ React.createElement(SwatchesBox, {swatches: swatches}),
+ document.getElementById('swatches')
+ )
@@ -1,6 +1,6 @@
var swatches=[
{
- "swatch": "Red",
+ "name": "Red",
"colors": [
{
"backgroundName": "Primary50",
@@ -89,7 +89,7 @@ var swatches=[
]
},
{
- "swatch": "Pink",
+ "name": "Pink",
"colors": [
{
"backgroundName": "Primary50",
@@ -178,7 +178,7 @@ var swatches=[
]
},
{
- "swatch": "Purple",
+ "name": "Purple",
"colors": [
{
"backgroundName": "Primary50",
@@ -267,7 +267,7 @@ var swatches=[
]
},
{
- "swatch": "Deep Purple",
+ "name": "Deep Purple",
"colors": [
{
"backgroundName": "Primary50",
@@ -356,7 +356,7 @@ var swatches=[
]
},
{
- "swatch": "Indigo",
+ "name": "Indigo",
"colors": [
{
"backgroundName": "Primary50",
@@ -445,7 +445,7 @@ var swatches=[
]
},
{
- "swatch": "Blue",
+ "name": "Blue",
"colors": [
{
"backgroundName": "Primary50",
@@ -534,7 +534,7 @@ var swatches=[
]
},
{
- "swatch": "Light Blue",
+ "name": "Light Blue",
"colors": [
{
"backgroundName": "Primary50",
@@ -623,7 +623,7 @@ var swatches=[
]
},
{
- "swatch": "Cyan",
+ "name": "Cyan",
"colors": [
{
"backgroundName": "Primary50",
@@ -712,7 +712,7 @@ var swatches=[
]
},
{
- "swatch": "Teal",
+ "name": "Teal",
"colors": [
{
"backgroundName": "Primary50",
@@ -801,7 +801,7 @@ var swatches=[
]
},
{
- "swatch": "Green",
+ "name": "Green",
"colors": [
{
"backgroundName": "Primary50",
@@ -890,7 +890,7 @@ var swatches=[
]
},
{
- "swatch": "Light Green",
+ "name": "Light Green",
"colors": [
{
"backgroundName": "Primary50",
@@ -979,7 +979,7 @@ var swatches=[
]
},
{
- "swatch": "Lime",
+ "name": "Lime",
"colors": [
{
"backgroundName": "Primary50",
@@ -1068,7 +1068,7 @@ var swatches=[
]
},
{
- "swatch": "Yellow",
+ "name": "Yellow",
"colors": [
{
"backgroundName": "Primary50",
@@ -1157,7 +1157,7 @@ var swatches=[
]
},
{
- "swatch": "Amber",
+ "name": "Amber",
"colors": [
{
"backgroundName": "Primary50",
@@ -1246,7 +1246,7 @@ var swatches=[
]
},
{
- "swatch": "Orange",
+ "name": "Orange",
"colors": [
{
"backgroundName": "Primary50",
@@ -1335,7 +1335,7 @@ var swatches=[
]
},
{
- "swatch": "Deep Orange",
+ "name": "Deep Orange",
"colors": [
{
"backgroundName": "Primary50",
@@ -1424,7 +1424,7 @@ var swatches=[
]
},
{
- "swatch": "Brown",
+ "name": "Brown",
"colors": [
{
"backgroundName": "Primary50",
@@ -1489,7 +1489,7 @@ var swatches=[
]
},
{
- "swatch": "Grey",
+ "name": "Grey",
"colors": [
{
"backgroundName": "Primary50",
@@ -1554,7 +1554,7 @@ var swatches=[
]
},
{
- "swatch": "Blue Grey",
+ "name": "Blue Grey",
"colors": [
{
"backgroundName": "Primary50",
@@ -1619,7 +1619,7 @@ var swatches=[
]
},
{
- "swatch": "Black",
+ "name": "Black",
"colors": [
{
"backgroundName": "PrimaryWhite",
Oops, something went wrong.

0 comments on commit cf8932f

Please sign in to comment.