support themes; ref #118
This commit is contained in:
parent
1f339070e9
commit
d04dad7a57
|
@ -47,6 +47,12 @@ If you specify `LABELS` above, this is the place to set a regex used to parse a
|
|||
"size_label": /^size (\d+)$/
|
||||
```
|
||||
|
||||
You can also create your own app theme. Create a LESS file following the example of the default app theme, "monza", in `src/less/themes/monza.less`, include the file in `src/less/burnchart.less` and finally specify the theme in the config:
|
||||
|
||||
```js
|
||||
"theme": "monza"
|
||||
```
|
||||
|
||||
##Development
|
||||
|
||||
To run your local version of the app, install all the NPM dependencies, watch the source files in one window, and start the static file server in the other in `--dev` mode.
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "burnchart",
|
||||
"version": "3.1.1",
|
||||
"version": "3.2.0",
|
||||
"description": "GitHub Burndown Chart as a Service",
|
||||
"author": "Radek Stepan <dev@radekstepan.com> (http://radekstepan.com)",
|
||||
"license": "AGPL-3.0",
|
||||
|
|
|
@ -609,8 +609,7 @@ ul li {
|
|||
color: #ea9712;
|
||||
}
|
||||
#notify.alert,
|
||||
#notify.bad,
|
||||
#notify.fucked {
|
||||
#notify.bad {
|
||||
border-top-color: #C1041C;
|
||||
color: #C1041C;
|
||||
}
|
||||
|
@ -629,7 +628,6 @@ ul li {
|
|||
text-align: justify;
|
||||
}
|
||||
#head {
|
||||
background: #C1041C;
|
||||
height: 64px;
|
||||
}
|
||||
#head #icon {
|
||||
|
@ -638,9 +636,7 @@ ul li {
|
|||
line-height: 44px;
|
||||
height: 44px;
|
||||
width: 74px;
|
||||
background: #77000e;
|
||||
display: inline-block;
|
||||
color: #C1041C;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
@ -652,7 +648,6 @@ ul li {
|
|||
}
|
||||
#head .q .icon {
|
||||
position: absolute;
|
||||
color: #C1041C;
|
||||
}
|
||||
#head .q .icon.search {
|
||||
top: 8px;
|
||||
|
@ -663,7 +658,6 @@ ul li {
|
|||
right: 12px;
|
||||
}
|
||||
#head .q input {
|
||||
background: #77000e;
|
||||
border: 0;
|
||||
padding: 10px 12px 10px 36px;
|
||||
font-size: 14px;
|
||||
|
@ -683,18 +677,12 @@ ul li {
|
|||
margin-left: 30px;
|
||||
}
|
||||
#head a {
|
||||
color: #e0808d;
|
||||
font-weight: bold;
|
||||
}
|
||||
#head a.active,
|
||||
#head a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
#head .right {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
line-height: 64px;
|
||||
color: #e0808d;
|
||||
}
|
||||
#head .right .button {
|
||||
-webkit-border-radius: 2px;
|
||||
|
@ -703,8 +691,6 @@ ul li {
|
|||
-moz-background-clip: padding;
|
||||
border-radius: 2px;
|
||||
background-clip: padding-box;
|
||||
background: #FFBB2A;
|
||||
color: #C1041C;
|
||||
padding: 11px 20px;
|
||||
}
|
||||
#title {
|
||||
|
@ -806,12 +792,10 @@ ul li {
|
|||
}
|
||||
#page #content #hero .content .cta a.primary {
|
||||
font-weight: bold;
|
||||
background: #C1041C;
|
||||
color: #fff;
|
||||
}
|
||||
#page #content #hero .content .cta a.secondary {
|
||||
background: #fff;
|
||||
color: #C1041C;
|
||||
}
|
||||
#page #content #add h2 {
|
||||
color: #3e4457;
|
||||
|
@ -864,7 +848,6 @@ ul li {
|
|||
background-clip: padding-box;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
background: #C1041C;
|
||||
color: #fff;
|
||||
}
|
||||
#page #content #add .form .suggest {
|
||||
|
@ -917,7 +900,6 @@ ul li {
|
|||
}
|
||||
#page #content #projects table tr td .project .error {
|
||||
cursor: help;
|
||||
color: #C1041C;
|
||||
}
|
||||
#page #content #projects table tr td a.project {
|
||||
font-weight: bold;
|
||||
|
@ -969,7 +951,6 @@ ul li {
|
|||
#page #content #projects table tr td.action {
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
color: #77000e;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
|
@ -1039,3 +1020,45 @@ ul li {
|
|||
padding: 30px;
|
||||
font-family: 'MuseoSlab500Regular', serif;
|
||||
}
|
||||
#app.theme--monza #head {
|
||||
background: #C1041C;
|
||||
}
|
||||
#app.theme--monza #head #icon {
|
||||
background: #760211;
|
||||
color: #C1041C;
|
||||
}
|
||||
#app.theme--monza #head .q .icon {
|
||||
color: #C1041C;
|
||||
}
|
||||
#app.theme--monza #head .q input {
|
||||
background: #760211;
|
||||
}
|
||||
#app.theme--monza #head a {
|
||||
color: #e0828e;
|
||||
}
|
||||
#app.theme--monza #head a.active,
|
||||
#app.theme--monza #head a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
#app.theme--monza #head .right {
|
||||
color: #e0828e;
|
||||
}
|
||||
#app.theme--monza #head .right .button {
|
||||
background: #FFBB2A;
|
||||
color: #C1041C;
|
||||
}
|
||||
#app.theme--monza #page #content #hero .content .cta a.primary {
|
||||
background: #C1041C;
|
||||
}
|
||||
#app.theme--monza #page #content #hero .content .cta a.secondary {
|
||||
color: #C1041C;
|
||||
}
|
||||
#app.theme--monza #page #content #add .form a {
|
||||
background: #C1041C;
|
||||
}
|
||||
#app.theme--monza #page #content #projects table tr td .project .error {
|
||||
color: #C1041C;
|
||||
}
|
||||
#app.theme--monza #page #content #projects table tr td.action {
|
||||
background: #760211;
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -29,5 +29,7 @@ export default {
|
|||
"request": {
|
||||
// Default timeout of 5s.
|
||||
"timeout": 5e3
|
||||
}
|
||||
},
|
||||
// The app theme; 'monza' is the default red theme.
|
||||
"theme": "monza"
|
||||
};
|
||||
|
|
|
@ -3,4 +3,11 @@ import ReactDOM from 'react-dom';
|
|||
|
||||
import App from './App.jsx';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('app'));
|
||||
import config from '../config.js';
|
||||
|
||||
let el = document.getElementById('app');
|
||||
// Set the theme.
|
||||
el.className = `theme--${config.theme}`;
|
||||
|
||||
// Start the router.
|
||||
ReactDOM.render(<App />, el);
|
||||
|
|
|
@ -1,8 +1,11 @@
|
|||
// Fonts.
|
||||
@serif_font: 'MuseoSlab500Regular', serif;
|
||||
@sans_serif_font: 'MuseoSans500Regular', sans-serif;
|
||||
|
||||
@strong_color: #C1041C;
|
||||
@highlight_color: #FFBB2A;
|
||||
// Alerts.
|
||||
@red: #C1041C;
|
||||
@green: #00b361;
|
||||
@yellow: #ea9712;
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
|
@ -83,18 +86,18 @@ ul {
|
|||
}
|
||||
|
||||
&.success, &.ok, &.good {
|
||||
border-top-color: #00b361;
|
||||
color: #00b361;
|
||||
border-top-color: @green;
|
||||
color: @green;
|
||||
}
|
||||
|
||||
&.warn, &.trouble {
|
||||
border-top-color: #ea9712;
|
||||
color: #ea9712;
|
||||
border-top-color: @yellow;
|
||||
color: @yellow;
|
||||
}
|
||||
|
||||
&.alert, &.bad, &.fucked {
|
||||
border-top-color: @strong_color;
|
||||
color: @strong_color;
|
||||
&.alert, &.bad {
|
||||
border-top-color: @red;
|
||||
color: @red;
|
||||
}
|
||||
|
||||
.icon, p {
|
||||
|
@ -115,7 +118,6 @@ ul {
|
|||
}
|
||||
|
||||
#head {
|
||||
background: @strong_color;
|
||||
height: 64px;
|
||||
|
||||
#icon {
|
||||
|
@ -125,9 +127,7 @@ ul {
|
|||
line-height: 44px;
|
||||
height: 44px;
|
||||
width: 74px;
|
||||
background: #77000e;
|
||||
display: inline-block;
|
||||
color: @strong_color;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
@ -140,7 +140,6 @@ ul {
|
|||
|
||||
.icon {
|
||||
position: absolute;
|
||||
color: @strong_color;
|
||||
|
||||
&.search {
|
||||
top: 8px;
|
||||
|
@ -154,7 +153,6 @@ ul {
|
|||
}
|
||||
|
||||
input {
|
||||
background: #77000e;
|
||||
border: 0;
|
||||
padding: 10px 12px 10px 36px;
|
||||
font-size: 14px;
|
||||
|
@ -174,24 +172,16 @@ ul {
|
|||
}
|
||||
|
||||
a {
|
||||
color: #e0808d;
|
||||
font-weight: bold;
|
||||
|
||||
&.active, &:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
line-height: 64px;
|
||||
color: #e0808d;
|
||||
|
||||
.button {
|
||||
.border-radius(2px);
|
||||
background: @highlight_color;
|
||||
color: @strong_color;
|
||||
padding: 11px 20px;
|
||||
}
|
||||
}
|
||||
|
@ -288,13 +278,11 @@ ul {
|
|||
|
||||
&.primary {
|
||||
font-weight: bold;
|
||||
background: @strong_color;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: #fff;
|
||||
color: @strong_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -347,7 +335,6 @@ ul {
|
|||
.border-radius(0 2px 2px 0);
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
background: @strong_color;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
@ -406,7 +393,6 @@ ul {
|
|||
|
||||
.project .error {
|
||||
cursor: help;
|
||||
color: @strong_color;
|
||||
}
|
||||
|
||||
a.project {
|
||||
|
@ -443,15 +429,15 @@ ul {
|
|||
}
|
||||
|
||||
.progress .bar.red {
|
||||
background: @strong_color;
|
||||
background: @red;
|
||||
}
|
||||
|
||||
.progress .bar.green {
|
||||
background: #00b361;
|
||||
background: @green;
|
||||
}
|
||||
|
||||
.progress .due.red {
|
||||
color: @strong_color;
|
||||
color: @red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
@ -462,7 +448,6 @@ ul {
|
|||
&.action {
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
color: #77000e;
|
||||
.user-select(none);
|
||||
}
|
||||
}
|
||||
|
@ -480,7 +465,7 @@ ul {
|
|||
background: #ebf6f1;
|
||||
|
||||
.milestone, .percent, .due {
|
||||
color: #00b361;
|
||||
color: @green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,4 +9,7 @@
|
|||
@import "icons.less";
|
||||
@import "chart.less";
|
||||
@import "animations.less";
|
||||
@import "app.less";
|
||||
@import "app.less";
|
||||
|
||||
// And the themes.
|
||||
@import "themes/monza.less";
|
||||
|
|
|
@ -0,0 +1,83 @@
|
|||
#app.theme--monza {
|
||||
// Theme colors.
|
||||
@strong_color: #C1041C;
|
||||
@highlight_color: #FFBB2A;
|
||||
|
||||
#head {
|
||||
background: @strong_color;
|
||||
|
||||
#icon {
|
||||
background: darken(@strong_color, 15%);
|
||||
color: @strong_color;
|
||||
}
|
||||
|
||||
.q {
|
||||
.icon {
|
||||
color: @strong_color;
|
||||
}
|
||||
|
||||
input {
|
||||
background: darken(@strong_color, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: mix(@strong_color, #FFF, 50%);
|
||||
|
||||
&.active, &:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
color: mix(@strong_color, #FFF, 50%);
|
||||
|
||||
.button {
|
||||
background: @highlight_color;
|
||||
color: @strong_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#page {
|
||||
#content {
|
||||
#hero {
|
||||
.content {
|
||||
.cta {
|
||||
a {
|
||||
&.primary {
|
||||
background: @strong_color;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: @strong_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#add {
|
||||
.form {
|
||||
a {
|
||||
background: @strong_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#projects {
|
||||
table {
|
||||
tr td {
|
||||
.project .error {
|
||||
color: @strong_color;
|
||||
}
|
||||
|
||||
&.action {
|
||||
background: darken(@strong_color, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue