├── .gitignore
├── .meteor
├── .gitignore
├── release
├── platforms
├── .id
├── .finished-upgraders
├── packages
└── versions
├── demoGif
└── demo1.gif
├── .travis.yml
├── imports
└── collections
│ ├── FlatColors.js
│ └── MaterialColors.js
├── client
├── layout
│ ├── footer.js
│ └── navigation.js
├── main.html
├── stylesheet
│ ├── footer.import.less
│ ├── selector.import.less
│ ├── navbar.import.less
│ ├── sliderpalette.import.less
│ ├── palette.import.less
│ ├── main.less
│ └── home.import.less
├── components
│ ├── converter.js
│ ├── flatColorList.js
│ ├── app.js
│ ├── materialColorList.js
│ ├── colorTabComponent.js
│ ├── sampleModal.js
│ ├── plate.js
│ ├── materialColorCard.js
│ ├── flatColorCard.js
│ └── sliderPalette.js
├── main.js
└── data
│ ├── flatColors.js
│ └── materialColors.js
├── package.json
├── server
├── main.js
└── data
│ ├── flatColors.js
│ └── materialColors.js
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/.meteor/.gitignore:
--------------------------------------------------------------------------------
1 | local
2 |
--------------------------------------------------------------------------------
/.meteor/release:
--------------------------------------------------------------------------------
1 | METEOR@1.4.2
2 |
--------------------------------------------------------------------------------
/.meteor/platforms:
--------------------------------------------------------------------------------
1 | server
2 | browser
3 |
--------------------------------------------------------------------------------
/demoGif/demo1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gongbaochicken/React-Hue/HEAD/demoGif/demo1.gif
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "0.12"
4 | before_install:
5 | - "curl -L https://raw.githubusercontent.com/arunoda/travis-ci-meteor-packages/master/configure.sh | /bin/sh"
6 | before_script:
7 | - "export PATH=$HOME/.meteor:$PATH"
8 |
--------------------------------------------------------------------------------
/imports/collections/FlatColors.js:
--------------------------------------------------------------------------------
1 | import {Mongo} from 'meteor/mongo';
2 |
3 | export const FlatColors = new Mongo.Collection('flatColors');
4 |
5 | FlatColors.allow({
6 | insert: function(){return true;},
7 | update: function(){return true;},
8 | });
9 |
--------------------------------------------------------------------------------
/imports/collections/MaterialColors.js:
--------------------------------------------------------------------------------
1 | import {Mongo} from 'meteor/mongo';
2 |
3 | export const MaterialColors = new Mongo.Collection('materialColors');
4 |
5 | MaterialColors.allow({
6 | insert: function(){return true;},
7 | update: function(){return true;},
8 | });
9 |
--------------------------------------------------------------------------------
/client/layout/footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Footer = () => {
4 | return (
5 |
10 | );
11 | }
12 |
13 | export default Footer;
14 |
--------------------------------------------------------------------------------
/client/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | React Hue
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/.meteor/.id:
--------------------------------------------------------------------------------
1 | # This file contains a token that is unique to your project.
2 | # Check it into your repository along with the rest of this directory.
3 | # It can be used for purposes such as:
4 | # - ensuring you don't accidentally deploy one app on top of another
5 | # - providing package authors with aggregated statistics
6 |
7 | 1ods4ev71cz1813wpejr
8 |
--------------------------------------------------------------------------------
/client/stylesheet/footer.import.less:
--------------------------------------------------------------------------------
1 | /*
2 | React Hue footer less file
3 | Author: Zhuo Jia
4 | Version: 1.1
5 | Time: 2016
6 | license: MIT
7 | */
8 |
9 | /*========Footer===========*/
10 | .footerSection{
11 | background: #000021;
12 | width: 100%;
13 | right: 0;
14 | bottom: 0;
15 | left: 0;
16 | color: #ffffff;
17 | padding-left: 45%;
18 | padding-top: 10px;
19 | }
20 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-hue",
3 | "private": true,
4 | "scripts": {
5 | "start": "meteor run"
6 | },
7 | "dependencies": {
8 | "lodash": "^4.16.6",
9 | "material-ui": "^0.16.3",
10 | "meteor-node-stubs": "~0.2.0",
11 | "react": "^15.4.0",
12 | "react-addons-pure-render-mixin": "^15.3.2",
13 | "react-copy-to-clipboard": "^4.2.3",
14 | "react-dom": "^15.3.2",
15 | "react-highlight": "^0.9.0",
16 | "react-router": "^3.0.0",
17 | "react-tap-event-plugin": "^2.0.1"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/.meteor/.finished-upgraders:
--------------------------------------------------------------------------------
1 | # This file contains information which helps Meteor properly upgrade your
2 | # app when you run 'meteor update'. You should check it into version control
3 | # with your project.
4 |
5 | notices-for-0.9.0
6 | notices-for-0.9.1
7 | 0.9.4-platform-file
8 | notices-for-facebook-graph-api-2
9 | 1.2.0-standard-minifiers-package
10 | 1.2.0-meteor-platform-split
11 | 1.2.0-cordova-changes
12 | 1.2.0-breaking-changes
13 | 1.3.0-split-minifiers-package
14 | 1.4.0-remove-old-dev-bundle-link
15 | 1.4.1-add-shell-server-package
16 |
--------------------------------------------------------------------------------
/client/components/converter.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import ReactDOM from 'react-dom';
3 | import Plate from './plate';
4 |
5 | class Converter extends Component {
6 | constructor(props){
7 | super(props);
8 |
9 | this.state = {background: ''};
10 | }
11 |
12 | render(){
13 | let style = {
14 | background: this.state.background
15 | };
16 | return (
17 |
18 |
21 | );
22 | }
23 | }
24 |
25 | export default Converter;
26 |
--------------------------------------------------------------------------------
/client/stylesheet/selector.import.less:
--------------------------------------------------------------------------------
1 | /*
2 | React Hue selector less file
3 | Author: Zhuo Jia
4 | Version: 1.1
5 | Time: 2016
6 | license: MIT
7 | */
8 |
9 | .backgroundBoard{
10 | background-color: #ecf0f1;
11 | width: 100%;
12 | }
13 | .colorScrollList{
14 | height: 70%;
15 | }
16 | .colStyle{
17 | font-size: 30px;
18 | text-align: center;
19 | }
20 | .columnColorBlock, .copyBtn{
21 | width: 100%;
22 | height: auto;
23 | }
24 | .cssBoard{
25 | height: 700px;
26 | background-color: #000000;
27 | border: 3px #fff;
28 | }
29 |
--------------------------------------------------------------------------------
/client/components/flatColorList.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import FlatColorCard from './flatColorCard';
3 | import {createContainer} from 'meteor/react-meteor-data';
4 | import {FlatColors} from '../../imports/collections/FlatColors';
5 |
6 | class FlatColorList extends Component {
7 | render(){
8 | return (
9 |
10 | {this.props.flatColors.map(color => ) }
11 |
12 | );
13 | }
14 | };
15 |
16 | export default createContainer(()=> {
17 | //set up subscribe
18 | Meteor.subscribe('flatColors');
19 | return {flatColors: FlatColors.find({}).fetch()};
20 | }, FlatColorList);
21 |
--------------------------------------------------------------------------------
/client/stylesheet/navbar.import.less:
--------------------------------------------------------------------------------
1 | /*
2 | React Hue navbar less file
3 | Author: Zhuo Jia
4 | Version: 1.1
5 | Time: 2016
6 | license: MIT
7 | */
8 |
9 | @navbar-color: #00BCD4;
10 |
11 | /*========NavBar===========*/
12 | .navbar-custome{
13 | background: @navbar-color;
14 | height: 50px;
15 | font-size: 23px;
16 | color: white;
17 | border-bottom: lighten(@navbar-color, 5%) solid 3px;
18 | }
19 |
20 | .navbar-brand{
21 | font-size: 24px !important;
22 | font-weight: bolder;
23 | font-family: sans-serif;
24 | }
25 | .nav .navbar-nav a{
26 | font-size: 19px !important;
27 | color: white;
28 | }
29 |
30 | .nav .active{
31 | background: darken(@navbar-color, 3%);
32 | }
33 |
--------------------------------------------------------------------------------
/client/components/app.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import ReactDOM from 'react-dom';
3 | import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
4 | import getMuiTheme from 'material-ui/styles/getMuiTheme';
5 | import Navigation from '../layout/navigation';
6 | import Footer from '../layout/footer';
7 |
8 | const muiTheme = getMuiTheme({
9 | slider: {
10 | trackColor: '#146eb4',
11 | selectionColor: '#fd5c63',
12 | trackSize: 10,
13 | handleSize: 20
14 | },
15 | });
16 |
17 | export default (props) => {
18 | return(
19 |
20 |
21 |
22 | {props.children}
23 |
24 |
25 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/client/components/materialColorList.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import MaterialColorCard from './materialColorCard';
3 | import {createContainer} from 'meteor/react-meteor-data';
4 | import {MaterialColors} from '../../imports/collections/MaterialColors';
5 |
6 | class MaterialColorList extends Component {
7 | render(){
8 | return (
9 |
10 | {this.props.materialColors.map(color => ) }
11 |
12 | );
13 | }
14 | };
15 |
16 | export default createContainer(()=> {
17 | //set up subscribe
18 | Meteor.subscribe('materialColors');
19 | return {materialColors: MaterialColors.find({}).fetch()};
20 | }, MaterialColorList);
21 |
--------------------------------------------------------------------------------
/client/main.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom';
3 | import {Router, Route, Link, IndexRoute, browserHistory} from 'react-router'
4 |
5 | import App from './components/app';
6 | import ColorTabComponent from './components/colorTabComponent';
7 | import Converter from './components/converter';
8 | import SliderPalette from './components/sliderPalette';
9 |
10 | const routes = (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 |
20 | Meteor.startup(() => {
21 | ReactDOM.render(routes, document.querySelector('.render-target'));
22 | });
23 |
--------------------------------------------------------------------------------
/client/stylesheet/sliderpalette.import.less:
--------------------------------------------------------------------------------
1 | /*
2 | React Hue SliderPlatte less file
3 | Author: Zhuo Jia
4 | Version: 1.1
5 | Time: 2016
6 | license: MIT
7 | */
8 |
9 | /*========SliderPlatte===========*/
10 | .sliderPlate {
11 | height: 100vh;
12 | width: 100%;
13 | padding: 0;
14 | }
15 | .reatTimeUpdateSection {
16 | width: 30%;
17 | height: 100px;
18 | margin-left: 35%;
19 | position: relative;
20 | top: 100px;
21 | }
22 | .realTimeSample {
23 | color: #fff;
24 | font-size: 30px;
25 | text-align: center;
26 | }
27 | .sliderRGBValue{
28 | margin-top: 20px;
29 | text-align: center;
30 | font-size: 24px;
31 | color: #ffffff;
32 | font-weight: bolder;
33 | }
34 | .sliderGroup {
35 | width: 30%;
36 | height: 200px;
37 | margin-left: 35%;
38 | margin-top: 150px;
39 | position: relative;
40 | }
41 |
--------------------------------------------------------------------------------
/client/components/colorTabComponent.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import injectTapEventPlugin from 'react-tap-event-plugin';
3 | import {Tabs, Tab} from 'material-ui/Tabs';
4 | import FlatColorList from './flatColorList';
5 | import MaterialColorList from './materialColorList';
6 |
7 | injectTapEventPlugin();
8 |
9 | class ColorTabComponent extends Component {
10 | constructor(props){
11 | super(props);
12 | }
13 |
14 | render(){
15 | return (
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | This is under development.
31 |
32 |
10 |
11 |
Color: {name}
12 |
Hex: {hex}
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
44 |
![]()
45 |
46 |
{this.props.color.name}
47 |
{this.props.color.hex}
48 |
{this.props.color.click}
49 |
50 |
59 |
44 |
45 |
![]()
46 |
47 |
{this.props.color.name}
48 |
{this.props.color.hex}
49 |
{this.props.color.click}
50 |
51 |
52 |
61 |
51 |
52 |
53 |
54 |
{this.state.background}
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |