Add setting to display underscores as spaces in tags

9 files changed, 29 insertions, 3 deletions

diff --git a/client/html/post_readonly_sidebar.tpl b/client/html/post_readonly_sidebar.tpl
index 54d7241..c959655 100644
--- a/client/html/post_readonly_sidebar.tpl
+++ b/client/html/post_readonly_sidebar.tpl
@@ -91,7 +91,7 @@
                         --><% if (ctx.canListPosts) { %><!--
                             --><a href='<%- ctx.formatClientLink('posts', {query: ctx.escapeColons(tag.names[0])}) %>' class='<%= ctx.makeCssName(tag.category, 'tag') %>'><!--
                         --><% } %><!--
-                            --><%- tag.names[0] %>&#32;<!--
+                            --><%- ctx.getPrettyTagName(tag.names[0]) %>&#32;<!--
                         --><% if (ctx.canListPosts) { %><!--
                             --></a><!--
                         --><% } %><!--
diff --git a/client/html/settings.tpl b/client/html/settings.tpl
index 6d65d01..4f72995 100644
--- a/client/html/settings.tpl
+++ b/client/html/settings.tpl
@@ -63,6 +63,15 @@
                     checked: ctx.browsingSettings.autoplayVideos,
                 }) %>
             </li>
+
+            <li>
+                <%= ctx.makeCheckbox({
+                    text: 'Display underscores as spaces in tags',
+                    name: 'tag-underscores-as-spaces',
+                    checked: ctx.browsingSettings.tagUnderscoresAsSpaces,
+                }) %>
+                <p class='hint'>Display all underscores as if they were spaces. This is only a visual change, which means that you'll still have to use underscores when searching or editing tags.</p>
+            </li>
         </ul>
 
         <div class='messages'></div>
diff --git a/client/html/tag.tpl b/client/html/tag.tpl
index 497790e..5b68023 100644
--- a/client/html/tag.tpl
+++ b/client/html/tag.tpl
@@ -1,5 +1,5 @@
 <div class='content-wrapper' id='tag'>
-    <h1><%- ctx.tag.names[0] %></h1>
+    <h1><%- ctx.getPrettyTagName(ctx.tag.names[0]) %></h1>
     <nav class='buttons'><!--
         --><ul><!--
             --><li data-name='summary'><a href='<%- ctx.formatClientLink('tag', ctx.tag.names[0]) %>'>Summary</a></li><!--
diff --git a/client/js/controls/post_readonly_sidebar_control.js b/client/js/controls/post_readonly_sidebar_control.js
index 65c922d..f3d1e94 100644
--- a/client/js/controls/post_readonly_sidebar_control.js
+++ b/client/js/controls/post_readonly_sidebar_control.js
@@ -4,6 +4,7 @@ const api = require('../api.js');
 const events = require('../events.js');
 const views = require('../util/views.js');
 const uri = require('../util/uri.js');
+const misc = require('../util/misc.js');
 
 const template = views.getTemplate('post-readonly-sidebar');
 const scoreTemplate = views.getTemplate('score');
@@ -26,6 +27,7 @@ class PostReadonlySidebarControl extends events.EventTarget {
             canEditPosts: api.hasPrivilege('posts:edit'),
             canViewTags: api.hasPrivilege('tags:view'),
             escapeColons: uri.escapeColons,
+            getPrettyTagName: misc.getPrettyTagName,
         }));
 
         this._installFav();
diff --git a/client/js/models/settings.js b/client/js/models/settings.js
index beaeb4d..6c4aa61 100644
--- a/client/js/models/settings.js
+++ b/client/js/models/settings.js
@@ -16,6 +16,7 @@ const defaultSettings = {
     tagSuggestions: true,
     autoplayVideos: false,
     postsPerPage: 42,
+    tagUnderscoresAsSpaces: false,
 };
 
 class Settings extends events.EventTarget {
diff --git a/client/js/util/misc.js b/client/js/util/misc.js
index d825d99..2539384 100644
--- a/client/js/util/misc.js
+++ b/client/js/util/misc.js
@@ -2,6 +2,9 @@
 
 const markdown = require('./markdown.js');
 const uri = require('./uri.js');
+const settings = require('../models/settings.js');
+
+const tagUnderscoresAsSpaces = settings.get().tagUnderscoresAsSpaces;
 
 function decamelize(str, sep) {
     sep = sep === undefined ? '-' : sep;
@@ -197,6 +200,13 @@ function dataURItoBlob(dataURI) {
     return new Blob([data], {type: mimeString});
 }
 
+function getPrettyTagName(tag) {
+    if (tagUnderscoresAsSpaces) {
+        return tag.replace(/_/g, " ");
+    }
+    return tag;
+}
+
 module.exports = {
     range:                   range,
     formatRelativeTime:      formatRelativeTime,
@@ -214,4 +224,5 @@ module.exports = {
     decamelize:              decamelize,
     escapeSearchTerm:        escapeSearchTerm,
     dataURItoBlob:           dataURItoBlob,
+    getPrettyTagName:        getPrettyTagName,
 };
diff --git a/client/js/util/views.js b/client/js/util/views.js
index 9f238b1..9c26fb0 100644
--- a/client/js/util/views.js
+++ b/client/js/util/views.js
@@ -200,7 +200,7 @@ function makePostLink(id, includeHash) {
 
 function makeTagLink(name, includeHash, includeCount, tag) {
     const category = tag ? tag.category : 'unknown';
-    let text = name;
+    let text = misc.getPrettyTagName(name);
     if (includeHash === true) {
         text = '#' + text;
     }
diff --git a/client/js/views/settings_view.js b/client/js/views/settings_view.js
index 41c661e..5ab7316 100644
--- a/client/js/views/settings_view.js
+++ b/client/js/views/settings_view.js
@@ -37,6 +37,7 @@ class SettingsView extends events.EventTarget {
                 tagSuggestions: this._find('tag-suggestions').checked,
                 autoplayVideos: this._find('autoplay-videos').checked,
                 postsPerPage: this._find('posts-per-page').value,
+                tagUnderscoresAsSpaces: this._find('tag-underscores-as-spaces').checked,
             },
         }));
     }
diff --git a/client/js/views/tag_view.js b/client/js/views/tag_view.js
index c3457bc..2aaa999 100644
--- a/client/js/views/tag_view.js
+++ b/client/js/views/tag_view.js
@@ -2,6 +2,7 @@
 
 const events = require('../events.js');
 const views = require('../util/views.js');
+const misc = require('../util/misc.js');
 const TagSummaryView = require('./tag_summary_view.js');
 const TagEditView = require('./tag_edit_view.js');
 const TagMergeView = require('./tag_merge_view.js');
@@ -17,6 +18,7 @@ class TagView extends events.EventTarget {
         this._ctx = ctx;
         ctx.tag.addEventListener('change', e => this._evtChange(e));
         ctx.section = ctx.section || 'summary';
+        ctx.getPrettyTagName = misc.getPrettyTagName;
 
         this._hostNode = document.getElementById('content-holder');
         this._install();