ouyang/logos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial categories

Browse Source
This commit is contained in:
Gil Barbara
2015-07-22 00:35:19 -03:00
parent 5aef0bcf7c
commit 25ef0c018f
4 changed files with 190 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/logos.json
+50 -47
View File
@@ -13,7 +13,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -46,7 +46,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -76,7 +76,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -106,7 +106,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -136,7 +136,7 @@
"hardware"
],
"categories": [
"developers"
"hackers"
]
},
{
@@ -150,7 +150,7 @@
"team collaboration"
],
"categories": [
"developers"
"teams"
]
},
{
@@ -227,7 +227,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -350,7 +350,7 @@
"layout"
],
"categories": [
"developers"
"designers"
],
"converted": true
},
@@ -550,7 +550,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -596,7 +596,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -661,7 +661,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -675,7 +675,7 @@
"browser"
],
"categories": [
"developers"
"everybody"
]
},
{
@@ -1062,7 +1062,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -1125,7 +1125,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -1157,7 +1157,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -1310,7 +1310,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -1386,7 +1386,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
],
"converted": true
},
@@ -1463,7 +1463,7 @@
"browser"
],
"categories": [
"developers"
"everybody"
]
},
{
@@ -1686,7 +1686,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -1932,7 +1932,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -1963,7 +1963,7 @@
"team collaboration"
],
"categories": [
"developers"
"teams"
]
},
{
@@ -2386,7 +2386,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -2416,7 +2416,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
],
"converted": true
},
@@ -2507,8 +2507,7 @@
"load testing"
],
"categories": [
"devOps",
"services"
"DevOps"
]
},
{
@@ -2539,7 +2538,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -2930,7 +2929,7 @@
"shortname": "nativescript",
"url": "https://www.nativescript.org/",
"tags": [
],
"categories": [
"developers"
@@ -3010,7 +3009,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -3040,7 +3039,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -3178,7 +3177,7 @@
"association"
],
"categories": [
"hardware"
"hackers"
]
},
{
@@ -3225,7 +3224,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
],
"converted": true
},
@@ -3241,7 +3240,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -3285,7 +3284,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -3512,7 +3511,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -3557,7 +3556,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -3617,7 +3616,7 @@
"hardware"
],
"categories": [
"hardware"
"hackers"
]
},
{
@@ -3724,7 +3723,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -3785,7 +3784,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -3830,7 +3829,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -3904,7 +3903,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -3948,7 +3947,7 @@
"team collaboration"
],
"categories": [
"developers"
"teams"
]
},
{
@@ -4054,7 +4053,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
],
"converted": true
},
@@ -4238,7 +4237,7 @@
"project manager"
],
"categories": [
"developers"
"teams"
]
},
{
@@ -4327,7 +4326,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -4393,7 +4392,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
],
"converted": true
},
@@ -4547,7 +4546,7 @@
],
"categories": [
"developers",
"devOps"
"DevOps"
]
},
{
@@ -4652,7 +4651,11 @@
"project manager",
"agile",
"kanban"
],
"categories": [
"developers",
"teams"
]
}
]
}
}
app/scripts/components/Header.jsx
+83 -28
View File
@@ -14,14 +14,35 @@ var Header = React.createClass({
onClickTag: React.PropTypes.func.isRequired
},
componentWillMount () {
let tags = {},
fScale = {
getInitialState () {
return {
category: 'developers',
ready: false
};
},
componentDidMount () {
let tags = {},
categories = {},
fScale = {
min: 1,
max: 0,
unit: 'rem'
};
if (config.features.categories) {
this.props.logos.forEach(function (d) {
d.categories.forEach(function (t) {
if (!categories.hasOwnProperty(t)) {
categories[t] = 0;
}
categories[t]++;
});
});
categories = this._sortObject(categories, 'value');
}
if (config.features.tags) {
this.props.logos.forEach(function (d) {
d.tags.forEach(function (t) {
@@ -41,14 +62,16 @@ var Header = React.createClass({
fScale.max = t.value;
}
});
this.setState({
tags: tags,
fontScale: new ScaleLog(fScale),
colorScale: new ScaleLog({ minSize: 12, min: fScale.min, maxSize: 70, max: fScale.max }),
color: new Colors('#ffced3')
});
}
this.setState({
categories,
tags,
ready: true,
fontScale: new ScaleLog(fScale),
colorScale: new ScaleLog({ minSize: 12, min: fScale.min, maxSize: 70, max: fScale.max }),
color: new Colors('#ffced3')
});
},
_sortObject (obj, attr) {
@@ -75,36 +98,68 @@ var Header = React.createClass({
return arr;
},
_onClickShowCategories (e) {
e.preventDefault();
var el = e.currentTarget;
console.log(el);
},
_onClickSelectCategory (e) {
e.preventDefault();
var el = e.currentTarget;
console.log(el);
},
render () {
var props = this.props,
state = this.state,
categories = state.category,
tags,
style;
if (config.features.tags) {
tags = (
<div className="tag-cloud">
{state.tags.map((d, i) => {
style = {
backgroundColor: state.color.hsl2hex({
h: state.color.hue(),
s: state.color.saturation(),
l: state.color.lightness() - +state.colorScale.value(d.value)
}),
fontSize: state.fontScale.value(d.value)
};
return (<a key={i} href="#" data-tag={d.key} onClick={this.props.onClickTag} style={style}>{d.key + ' (' + d.value + ')'}</a>
);
})}
</div>
);
if (state.ready) {
if (config.features.tags) {
tags = (
<div className="tag-cloud">
{state.tags.map((d, i) => {
style = {
backgroundColor: state.color.hsl2hex({
h: state.color.hue(),
s: state.color.saturation(),
l: state.color.lightness() - +state.colorScale.value(d.value)
}),
fontSize: state.fontScale.value(d.value)
};
return (<a key={i} href="#" data-tag={d.key} onClick={this.props.onClickTag}
style={style}>{d.key + ' (' + d.value + ')'}</a>
);
})}
</div>
);
}
if (config.features.categories) {
categories = (
<span className="categories">
<a href="#" className="categories__toggle" onClick={this._onClickShowCategories}>{state.category}</a>
<ul className="categories__menu">
{state.categories.map((d, i) => {
return (<li key={i} data-value={d.value}><a href="#" onClick={this._onClickSelectCategory}>{d.key}</a></li>);
})}
</ul>
</span>
);
}
}
return (
<header>
<img src="media/svg-porn.svg" className="logo"/>
<h3>A collection of svg logos for developers</h3>
<h3>A collection of svg logos for {categories}</h3>
<ul className="menu">
<li><span className="title">Columns</span>
app/scripts/config.js
+1
View File
@@ -1,5 +1,6 @@
module.exports = {
features: {
categories: false,
menu: false,
tags: false
}
app/styles/components/_header.scss
+56
View File
@@ -39,6 +39,62 @@ header {
}
}
.categories {
display: inline-block;
position: relative;
width: 165px;
&__toggle {
padding: 0 26px 0 8px;
position: relative;
text-decoration: none;
&:before {
border-top: 1px dashed $link-color;
bottom: -5px;
content: '';
height: 2px;
left: 0;
position: absolute;
width: 100%;
}
&:after {
border-color: $link-color transparent transparent;
border-radius: 3px;
border-style: solid;
border-width: 12px 8px 0;
content: '';
position: absolute;
right: 3px;
top: 10px;
}
}
&__menu {
left: 0;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: -4px;
width: 100%;
z-index: 100;
> li {
a {
background-color: rgba($link-color, 0.5);
color: #fff;
display: block;
padding: 5px 8px;
text-align: left;
}
}
}
}
.menu {
display: flex;
justify-content: space-around;