base

Author: lucassabreu

src/GitHub/GitHub.css

@@ -0,0 +1,30 @@
+.GitHub .select-group {
+    margin-bottom: 1rem;
+}
+
+.GitHub .labels .label-item {
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+}
+
+.GitHub .Select-control {
+    height: 2.5rem
+}
+
+.GitHub .btn-apply-labels {
+    width: 100%;
+}
+
+@media (max-width: 768px) {
+    .GitHub .btn-apply-labels {
+        margin: 1rem 0;
+    }
+}
+
+.GitHub .labels .label-item [type=checkbox] {
+    margin: .5rem;
+    display: inline-block;
+}

src/GitHub/GitHub.js

@@ -3,6 +3,9 @@ import Loading from '../Components/Loading';
 import { withGithubRepositories } from './withGitHubRepositories';
 import Select from 'react-select';
 import 'react-select/dist/react-select.css';
+import LABELS_TO_ADD from '../Labels';
+import invertColor from '../invertColor';
+import './GitHub.css';
 
 class GitHub extends React.Component {
 
@@ -29,14 +32,33 @@ class GitHub extends React.Component {
           </section>
           :
           <section>
-            <Select
-              value={selectedOption}
-              onChange={(e) => this.handleSelect(e)}
-              options={repositories.map(r => Object.assign(r, {
-                value: r.full_name,
-                label: r.full_name,
-              }))}
-            />
+            <div className="row select-group">
+              <div className="col-md-10">
+                <Select
+                  value={selectedOption}
+                  onChange={(e) => this.handleSelect(e)}
+                  options={repositories.map(r => Object.assign(r, {
+                    value: r.full_name,
+                    label: r.full_name,
+                  }))}
+                />
+              </div>
+              <div className="col-md-2">
+                <button className="btn btn-apply-labels btn-primary">Apply</button>
+              </div>
+            </div>
+            <div className="row labels">
+              {LABELS_TO_ADD.map(({ name, color }) => (
+                <div key={name} className="col-md-4">
+                  <label alt={name} className="label-item"
+                    style={{ backgroundColor: '#' + color, color: invertColor('#' + color, true) }}
+                  >
+                    <input disabled type="checkbox" />
+                    {name}
+                  </label>
+                </div>
+              ))}
+            </div>
           </section>
         }
       </div>

src/Labels.js

@@ -0,0 +1,33 @@
+const LABELS_TO_ADD = [
+  { name: 'Priority: Highest', color: 'b60205', priority: 1 },
+  { name: 'Priority: High', color: 'fef2c0', priority: 2 },
+  { name: 'Priority: Medium', color: 'd4c5f9', priority: 3 },
+  { name: 'Priority: Low', color: 'd4c5f9', priority: 4 },
+  { name: 'Priority: Lowest', color: 'ededed', priority: 5 },
+  { name: 'Category: Backend', color: 'c2e0c6', priority: null },
+  { name: 'Category: Business/Meetings', color: '0e8a16', priority: null },
+  { name: 'Category: DevOps', color: 'fef2c0', priority: null },
+  { name: 'Category: Frontend', color: 'bfdadc', priority: null },
+  { name: 'Category: Infrastructure', color: 'f0e68c', priority: null },
+  { name: 'Category: Report', color: '40e0d0', priority: null },
+  { name: 'Category: Unit test', color: 'ededed', priority: null },
+  { name: 'Level: Easy', color: '48d1cc', priority: null },
+  { name: 'Level: Medium', color: '20b2aa', priority: null },
+  { name: 'Level: Hard', color: '008b8b', priority: null },
+  { name: 'Stage: Analysis', color: 'e6e6e6', priority: null },
+  { name: 'Stage: Backlog', color: 'ededed', priority: null },
+  { name: 'Stage: Cancelled', color: '000000', priority: null },
+  { name: 'Stage: In progress', color: 'fbca04', priority: null },
+  { name: 'Stage: Review', color: '0052cc', priority: null },
+  { name: 'Stage: Testing', color: 'e616e6', priority: null },
+  { name: 'Status: Blocked', color: 'd93f0b', priority: null },
+  { name: 'Status: Duplicated', color: 'c5def5', priority: null },
+  { name: 'Status: Impediment', color: 'b60205', priority: null },
+  { name: 'Status: Needs Fixing', color: 'ff8c00', priority: null },
+  { name: 'Type: Bug', color: 'fc2929', priority: null },
+  { name: 'Type: Improvement', color: '84b6eb', priority: null },
+  { name: 'Type: New feature', color: '0052cc', priority: null },
+  { name: 'Type: Sub-task', color: 'ededed', priority: null },
+];
+
+export default LABELS_TO_ADD;

src/invertColor.js

@@ -0,0 +1,35 @@
+const padZero = (str, len) => {
+  len = len || 2;
+  var zeros = new Array(len).join('0');
+  return (zeros + str).slice(-len);
+}
+
+const invertColor = (hex, bw) => {
+  if (hex.indexOf('#') === 0) {
+    hex = hex.slice(1);
+  }
+  // convert 3-digit hex to 6-digits.
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+  if (hex.length !== 6) {
+    throw new Error(`Invalid HEX color: ${hex}.`);
+  }
+  var r = parseInt(hex.slice(0, 2), 16),
+    g = parseInt(hex.slice(2, 4), 16),
+    b = parseInt(hex.slice(4, 6), 16);
+  if (bw) {
+    // http://stackoverflow.com/a/3943023/112731
+    return (r * 0.299 + g * 0.587 + b * 0.114) > 186
+      ? '#000000'
+      : '#FFFFFF';
+  }
+  // invert color components
+  r = (255 - r).toString(16);
+  g = (255 - g).toString(16);
+  b = (255 - b).toString(16);
+  // pad each with zeros and return
+  return "#" + padZero(r) + padZero(g) + padZero(b);
+}
+
+export default invertColor