Skip to content

Commit

Permalink
feat(mozaik.inspector): add theme support
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphael Benitte committed Apr 5, 2016
1 parent 15df1ba commit d5dc3ed
Show file tree
Hide file tree
Showing 9 changed files with 94 additions and 42 deletions.
81 changes: 45 additions & 36 deletions gulp/tasks/styles.js
Original file line number Diff line number Diff line change
@@ -1,42 +1,51 @@
var gulp = require('gulp');
var path = require('path');
var stylus = require('gulp-stylus');
var fs = require('fs');
var gutil = require('gulp-util');
var chalk = require('chalk');
var config = require('../config');
var gulp = require('gulp');
var path = require('path');
var stylus = require('gulp-stylus');
var fs = require('fs');
var gutil = require('gulp-util');
var chalk = require('chalk');
var config = require('../config');
var Promise = require('bluebird');


gulp.task('styles', ['styles:dev']);


gulp.task('styles:dev', ['collect:styles'], function (done) {
var appConfig = require(path.join(config.root, 'config.js'));
var theme = appConfig.theme;

var mozaikThemePath = config.mozaikSrc + path.join('themes', theme);
var customThemePath = config.root + path.join('themes', theme);

if (fs.existsSync(customThemePath)) {
theme = customThemePath;
} else if (fs.existsSync(mozaikThemePath)) {
theme = mozaikThemePath;
}

if (fs.existsSync(path.join(theme, '_vars.styl')) === false || fs.existsSync(path.join(theme, 'index.styl')) == false) {
return done(new Error(chalk.red('Please make sure your theme contains both \'_vars.styl\' and \'index.styl\' files (path: ' + theme + ')')));
}

gutil.log(chalk.green('Compiling stylus code using theme \'' + theme + '\''));

return gulp
.src(config.mozaikSrc + 'styl/mozaik.styl')
.pipe(stylus({
'include css': true,
use: function (style) {
style.define('$theme', theme);
}
}))
.pipe(gulp.dest(config.dest + 'css'))
;
gulp.task('styles:dev', ['collect:styles'], function () {
return new Promise(function (resolve, reject) {
// invalidate config require cache to force reload
var mod = require.resolve(path.join(config.root, 'config.js'));
if (mod && ((mod = require.cache[mod]) !== undefined)) {
delete require.cache[mod.id];
}

var appConfig = require(path.join(config.root, 'config.js'));
var theme = appConfig.theme;

var mozaikThemePath = config.mozaikSrc + path.join('themes', theme);
var customThemePath = config.root + path.join('themes', theme);

if (fs.existsSync(customThemePath)) {
theme = customThemePath;
} else if (fs.existsSync(mozaikThemePath)) {
theme = mozaikThemePath;
}

if (fs.existsSync(path.join(theme, '_vars.styl')) === false || fs.existsSync(path.join(theme, 'index.styl')) == false) {
return done(new Error(chalk.red('Please make sure your theme contains both \'_vars.styl\' and \'index.styl\' files (path: ' + theme + ')')));
}

gutil.log(chalk.green('Compiling stylus code using theme \'' + theme + '\''));

resolve(gulp
.src(config.mozaikSrc + 'styl/mozaik.styl')
.pipe(stylus({
'include css': true,
use: function (style) {
style.define('$theme', theme);
}
}))
.pipe(gulp.dest(config.dest + 'css'))
);
});
});
5 changes: 3 additions & 2 deletions gulp/tasks/watch.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ function stylesWatcher(devMode) {
var task = devMode ? 'styles:dev' : 'styles';

return gulp.watch([
config.root + path.join('config.js'), // config for `theme` property
config.mozaikSrc + path.join('styl', '**', '*'), // mozaïk base styles
config.mozaikSrc + path.join('themes', theme, '**', '*'), // mozaïk themes
config.root + path.join('themes', theme, '**', '*'), // custom themes
config.mozaikSrc + path.join('themes', '**', '*'), // mozaïk themes
config.root + path.join('themes', '**', '*'), // custom themes
config.root + path.join('node_modules', 'mozaik-ext-*', 'styl', '**', '*') // extensions styles
], [task]);
}
Expand Down
3 changes: 1 addition & 2 deletions src/styl/__vars.styl
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,7 @@ $label-txt-color = $main-txt-color
$label-addon-bg-color = $label-bg-color
$label-addon-txt-color = $label-txt-color
$label-border-radius = 0
$label-border = none
$label-sep-border = none
$label-border = 0


// Meaningful colors
Expand Down
7 changes: 5 additions & 2 deletions src/styl/components/label.styl
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,14 @@
color $label-txt-color
white-space pre
border-radius $label-border-radius
border $label-border

&__group
display flex
border $label-border

.label
border 0
border-radius 0

*
Expand Down Expand Up @@ -38,8 +41,8 @@

&:first-child
left 0
border-right 1px solid $label-sep-color
border-right $label-border

&:last-child
right 0
border-left 1px solid $label-sep-color
border-left $label-border
8 changes: 8 additions & 0 deletions src/themes/bordeau/_vars.styl
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,14 @@ $count-txt-color = hsl(0, 52%, 60%)
$count-border-radius = 2px


// LABEL
$label-bg-color = lighten($widget-bg-color, 5)
$label-txt-color = $widget-header-txt-color
$label-addon-bg-color = $main-bg-color
$label-addon-txt-color = $widget-header-icon-color
$label-border-radius = 2px


// TABLE
$table-border-h = 1px solid $main-bg-color

Expand Down
8 changes: 8 additions & 0 deletions src/themes/light-grey/_vars.styl
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,14 @@ $count-border-radius = 2px
$count-border = none


// LABEL
$label-bg-color = #fff
$label-txt-color = $main-txt-color
$label-addon-bg-color = $main-bg-color
$label-addon-txt-color = #84c2f6
$label-border = 1px solid darken($main-bg-color, 5)


// TABLE
$table-border-h = 1px solid #ddd

Expand Down
8 changes: 8 additions & 0 deletions src/themes/light-yellow/_vars.styl
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,14 @@ $count-border-radius = 2px
$count-border = 1px solid #000


// LABEL
$label-bg-color = transparent
$label-txt-color = $main-txt-color
$label-addon-bg-color = $widget-header-bg-color
$label-addon-txt-color = $widget-header-txt-color
$label-border = $count-border


// Meaningful colors
$unknown-color = #9d937a
$success-color = #41508b
Expand Down
8 changes: 8 additions & 0 deletions src/themes/snow/_vars.styl
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,14 @@ $count-border-radius = 2vmin
$count-border = 1px solid #ddd


// LABEL
$label-bg-color = #fff
$label-txt-color = $main-txt-color
$label-addon-bg-color = $main-bg-color
$label-addon-txt-color = #000
$label-border-radius = 2px
$label-border = 1px solid #ddd


// Meaningful color
$unknown-color = #d3dfe8
Expand Down
8 changes: 8 additions & 0 deletions src/themes/yellow/_vars.styl
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,14 @@ $count-border-radius = 3px
$count-border = none


// LABEL
$label-bg-color = #f7ecd0
$label-txt-color = $main-txt-color
$label-addon-bg-color = #e6d280
$label-addon-txt-color = $main-txt-color
$label-border-radius = 2px


// CHARTS
$histogram-bar-bg-color = #dcd1b5
$chart-axis-txt-color = #806b3f
Expand Down

0 comments on commit d5dc3ed

Please sign in to comment.