Skip to content

Commit

Permalink
Added easy GUI styling through Hex/Color names.
Browse files Browse the repository at this point in the history
  • Loading branch information
Mark Moffat committed Jul 2, 2017
1 parent 7d97adb commit 63634f8
Show file tree
Hide file tree
Showing 6 changed files with 135 additions and 15 deletions.
32 changes: 32 additions & 0 deletions app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,38 @@ handlebars = handlebars.create({
return'/' + config.settings.app_context;
}return'';
},
simpleCSS: function(config){
var cssString = '';
if(typeof config.settings.style.cssHeaderBackgroundColor !== 'undefined' && config.settings.style.cssHeaderBackgroundColor !== ''){
cssString = cssString + '.navbar-default, .headerText h1 {background-color:' + config.settings.style.cssHeaderBackgroundColor + ';}';
}
if(typeof config.settings.style.cssHeaderTextColor !== 'undefined' && config.settings.style.cssHeaderTextColor !== ''){
cssString = cssString + '.navbar-default .navbar-brand, .headerText h1 {color:' + config.settings.style.cssHeaderTextColor + ';}';
cssString = cssString + '.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus, .brand-text, .contactLink {color:' + config.settings.style.cssHeaderTextColor + ' !important;}';
}
if(typeof config.settings.style.cssFooterBackgroundColor !== 'undefined' && config.settings.style.cssFooterBackgroundColor !== ''){
cssString = cssString + '.footer{background-color:' + config.settings.style.cssFooterBackgroundColor + ';}';
}
if(typeof config.settings.style.cssFooterTextColor !== 'undefined' && config.settings.style.cssFooterTextColor !== ''){
cssString = cssString + '.footer p{color:' + config.settings.style.cssFooterTextColor + ';}';
}
if(typeof config.settings.style.cssButtonBackgroundColor !== 'undefined' && config.settings.style.cssButtonBackgroundColor !== ''){
cssString = cssString + '#btn_search, .btn-default{background-color:' + config.settings.style.cssButtonBackgroundColor + ';border-color:' + config.settings.style.cssButtonBackgroundColor + ';}';
}
if(typeof config.settings.style.cssButtonTextColor !== 'undefined' && config.settings.style.cssButtonTextColor !== ''){
cssString = cssString + '#btn_search, .btn-default{color:' + config.settings.style.cssButtonTextColor + ';}';
}
if(typeof config.settings.style.cssLinkColor !== 'undefined' && config.settings.style.cssLinkColor !== ''){
cssString = cssString + 'a, footer a, a:hover, a:focus, .contactLink a{color:' + config.settings.style.cssLinkColor + ' !important;}';
}
if(typeof config.settings.style.cssTextColor !== 'undefined' && config.settings.style.cssTextColor !== ''){
cssString = cssString + 'body, .panel-primary>.panel-heading, .list-group-heading{color:' + config.settings.style.cssTextColor + ';}';
}
if(typeof config.settings.style.cssFontFamily !== 'undefined' && config.settings.style.cssFontFamily !== ''){
cssString = cssString + 'body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{font-family:' + config.settings.style.cssFontFamily + ';}';
}
return cssString;
},
ifCond: function(v1, operator, v2, options){
switch(operator){
case'==':
Expand Down
14 changes: 13 additions & 1 deletion config/config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,18 @@
"article_versioning": false,
"api_auth_token": "",
"api_allowed": false,
"locale": "en"
"locale": "en",
"env": "",
"style": {
"cssHeaderBackgroundColor": "",
"cssHeaderTextColor": "",
"cssFooterBackgroundColor": "",
"cssFooterTextColor": "",
"cssButtonBackgroundColor": "",
"cssButtonTextColor": "",
"cssLinkColor": "",
"cssTextColor": "",
"cssFontFamily": ""
}
}
}
3 changes: 2 additions & 1 deletion locales/en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,5 +173,6 @@
"Edit reason": "Edit reason",
"Previous versions": "Previous versions",
"Topic": "Topic",
"Suggestion successfully processed": "Suggestion successfully processed"
"Suggestion successfully processed": "Suggestion successfully processed",
"Style": "Style"
}
22 changes: 15 additions & 7 deletions routes/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,7 @@ router.get('/' + config.settings.route_name + '/:id', common.restrict, function
return;
}
}

// add to old view count
var old_viewcount = result.kb_viewcount;
if(old_viewcount == null){
Expand Down Expand Up @@ -303,12 +304,17 @@ router.post('/update_settings', common.restrict, function (req, res){
// loop settings, update config
for(var key in settings){
if(Object.prototype.hasOwnProperty.call(settings, key)){
// if true/false, convert to boolean - TODO: Figure a better way of doing this?
var settingValue = settings[key];
if(booleanArray.indexOf(settingValue) > -1){
settingValue = (settingValue === 'true');
// check for style keys
if(key.split('.')[0] === 'style'){
config.settings.style[key.split('.')[1]] = settingValue;
}else{
// if true/false, convert to boolean - TODO: Figure a better way of doing this?
if(booleanArray.indexOf(settingValue) > -1){
settingValue = (settingValue === 'true');
}
config.settings[key] = settingValue;
}
config.settings[key] = settingValue;
}
}

Expand Down Expand Up @@ -581,7 +587,8 @@ router.post('/save_kb', common.restrict, function (req, res){
req.session.kb_featured = kb_featured;
req.session.kb_seo_title = req.body.frm_kb_seo_title;
req.session.kb_seo_description = req.body.frm_kb_seo_description;
req.session.b_edit_reason = req.body.frm_kb_edit_reason;
req.session.kb_edit_reason = req.body.frm_kb_edit_reason;
req.session.kb_visible_state = req.body.frm_kb_visible_state;

// redirect to insert
res.redirect(req.app_context + '/edit/' + req.body.frm_kb_id);
Expand Down Expand Up @@ -615,7 +622,8 @@ router.post('/save_kb', common.restrict, function (req, res){
kb_permalink: req.body.frm_kb_permalink,
kb_featured: kb_featured,
kb_seo_title: req.body.frm_kb_seo_title,
kb_seo_description: req.body.frm_kb_seo_description
kb_seo_description: req.body.frm_kb_seo_description,
kb_visible_state: req.body.frm_kb_visible_state
}
}, {}, function (err, numReplaced){
if(err){
Expand Down Expand Up @@ -1539,7 +1547,7 @@ router.get('/sitemap.xml', function (req, res, next){
var db = req.app.db;

// get the articles
common.dbQuery(db.kb, {kb_published: 'true'}, null, null, function (err, articles){
common.dbQuery(db.kb, {kb_published: 'true', kb_visible_state: {$ne: 'private'}}, null, null, function (err, articles){
var urlArray = [];

// push in the base url
Expand Down
13 changes: 7 additions & 6 deletions views/layouts/layout.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,17 +56,17 @@
<script>{{{state}}}</script>
<script src="{{app_context}}/bootstrap/js/bootstrap.min.js"></script>
{{#ifCond title '===' 'Settings'}}
<script src="{{app_context}}/bootstrapTabs/tab.js"></script>
<script src="{{app_context}}/bootstrapTabs/tab.js"></script>
{{/ifCond}}
<script src="{{app_context}}/javascripts/bootstrap-validator{{config.settings.env}}.js"></script>
{{#ifCond config.settings.mermaid '===' true}}
<script src="{{app_context}}/javascripts/mermaid.min.js"></script>
<script src="{{app_context}}/javascripts/mermaid.min.js"></script>
{{/ifCond}}
{{#ifCond config.settings.mathjax '===' true}}
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true}});
</script>
<script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config={{config.settings.mathjax_input_mode}}"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true}});
</script>
<script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config={{config.settings.mathjax_input_mode}}"></script>
{{/ifCond}}
<script src="{{app_context}}/javascripts/markdown-it-classy{{config.settings.env}}.js"></script>
<script src="{{app_context}}/javascripts/bootstrap-tokenfield.min.js"></script>
Expand All @@ -84,6 +84,7 @@
<script src="{{app_context}}/javascripts/jpushmenu{{config.settings.env}}.js"></script>
<script src="{{app_context}}/javascripts/openKB{{config.settings.env}}.js"></script>
{{#ifCond user_page '===' true}}
<style>{{{simpleCSS config}}}</style>
{{#if config.settings.google_analytics}}
{{{config.settings.google_analytics}}}
{{/if}}
Expand Down
66 changes: 66 additions & 0 deletions views/settings.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<li role="presentation" class="active"><a href="#website" aria-controls="website" role="tab" data-toggle="tab">{{__ "Website"}}</a></li>
<li role="presentation"><a href="#article" aria-controls="article" role="tab" data-toggle="tab">{{__ "Article"}}</a></li>
<li role="presentation"><a href="#display" aria-controls="display" role="tab" data-toggle="tab">{{__ "Display"}}</a></li>
<li role="presentation"><a href="#style" aria-controls="style" role="tab" data-toggle="tab">{{__ "Style"}}</a></li>
</ul>
<form method="post" action="{{app_context}}/update_settings">
<div class="clearfix">
Expand Down Expand Up @@ -319,6 +320,71 @@
</div>
</div>
<!-- Dislay settings -->
<!-- Simple styling -->
<div role="tabpanel" class="tab-pane" id="style">
<div class="container-fluid">
<div class="row">
<p class="col-md-12">
You can add simple styling to various elements of your website below:
</p>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="cssHeaderBackgroundColor">Header background color (HEX):</label>
<input type="text" class="form-control" name="style.cssHeaderBackgroundColor" value="{{config.settings.style.cssHeaderBackgroundColor}}" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="cssHeaderTextColor">Header text color (HEX):</label>
<input type="text" class="form-control" name="style.cssHeaderTextColor" value="{{config.settings.style.cssHeaderTextColor}}" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="cssFooterBackgroundColor">Footer background color (HEX):</label>
<input type="input" class="form-control" name="style.cssFooterBackgroundColor" value="{{config.settings.style.cssFooterBackgroundColor}}"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="cssFooterTextColor">Footer text color (HEX):</label>
<input type="input" class="form-control" name="style.cssFooterTextColor" value="{{config.settings.style.cssFooterTextColor}}"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="cssButtonBackgroundColor">Button background color (HEX):</label>
<input type="input" class="form-control" name="style.cssButtonBackgroundColor" value="{{config.settings.style.cssButtonBackgroundColor}}"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="cssButtonTextColor">Button text color (HEX):</label>
<input type="input" class="form-control" name="style.cssButtonTextColor" value="{{config.settings.style.cssButtonTextColor}}"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="cssLinkColor">Link color (HEX):</label>
<input type="text" class="form-control" name="style.cssLinkColor" value="{{config.settings.style.cssLinkColor}}"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="cssTextColor">Page text color (HEX):</label>
<input type="text" class="form-control" name="style.cssTextColor" value="{{config.settings.style.cssTextColor}}"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="cssFontFamily">Page font:</label>
<input type="text" class="form-control" name="style.cssFontFamily" value="{{config.settings.style.cssFontFamily}}"/>
</div>
</div>
</div>
<!-- Simple styling -->
</div>
</div>
</div>
</form>
</div>
Expand Down

0 comments on commit 63634f8

Please sign in to comment.