From bd86e88b05940a8a97a4257f5f614c1061405d7b Mon Sep 17 00:00:00 2001 From: Guo Xiang Tan Date: Thu, 21 Jan 2016 12:27:16 +0800 Subject: [PATCH] UX: Remove category hashtag decoration. --- .../dialects/category_hashtag_dialect.js | 2 +- .../discourse/helpers/category-link.js.es6 | 2 -- .../discourse/lib/category-hashtags.js.es6 | 21 +------------- .../discourse/lib/click-track.js.es6 | 3 +- .../javascripts/discourse/views/post.js.es6 | 10 +------ .../common/components/badges.css.scss | 29 ------------------- .../common/components/hashtag.scss | 14 +++++++++ .../lib/category-hashtags-test.js.es6 | 22 -------------- test/javascripts/lib/click-track-test.js.es6 | 7 ++--- 9 files changed, 20 insertions(+), 90 deletions(-) create mode 100644 app/assets/stylesheets/common/components/hashtag.scss delete mode 100644 test/javascripts/lib/category-hashtags-test.js.es6 diff --git a/app/assets/javascripts/discourse/dialects/category_hashtag_dialect.js b/app/assets/javascripts/discourse/dialects/category_hashtag_dialect.js index 3242e9667d..f7a7f48d1e 100644 --- a/app/assets/javascripts/discourse/dialects/category_hashtag_dialect.js +++ b/app/assets/javascripts/discourse/dialects/category_hashtag_dialect.js @@ -15,7 +15,7 @@ Discourse.Dialect.inlineRegexp({ result = categoryHashtagLookup && categoryHashtagLookup(slug); if (result && result[0] === "category") { - return ['a', { class: attributeClass, href: result[1] }, hashtag]; + return ['a', { class: attributeClass, href: result[1] }, '#', ["span", {}, slug]]; } else { return ['span', { class: attributeClass }, hashtag]; } diff --git a/app/assets/javascripts/discourse/helpers/category-link.js.es6 b/app/assets/javascripts/discourse/helpers/category-link.js.es6 index 8d71de3ad8..1155a2b7bb 100644 --- a/app/assets/javascripts/discourse/helpers/category-link.js.es6 +++ b/app/assets/javascripts/discourse/helpers/category-link.js.es6 @@ -18,7 +18,6 @@ function categoryStripe(color, classes) { @param {Boolean} [opts.allowUncategorized] If false, returns an empty string for the uncategorized category. @param {Boolean} [opts.link] If false, the category badge will not be a link. @param {Boolean} [opts.hideParaent] If true, parent category will be hidden in the badge. - @param {String} [opts.prefix] Prefix the string onto the category name. **/ export function categoryBadgeHTML(category, opts) { opts = opts || {}; @@ -61,7 +60,6 @@ export function categoryBadgeHTML(category, opts) { ">"; var name = escapeExpression(get(category, 'name')); - if (opts.prefix) name = `${opts.prefix}${name}`; if (restricted) { html += iconHTML('lock') + " " + name; diff --git a/app/assets/javascripts/discourse/lib/category-hashtags.js.es6 b/app/assets/javascripts/discourse/lib/category-hashtags.js.es6 index 9572793c59..8f6435a36d 100644 --- a/app/assets/javascripts/discourse/lib/category-hashtags.js.es6 +++ b/app/assets/javascripts/discourse/lib/category-hashtags.js.es6 @@ -1,26 +1,7 @@ import Category from 'discourse/models/category'; -import { categoryBadgeHTML } from 'discourse/helpers/category-link'; export const SEPARATOR = ":"; -export function findCategoryByHashtagSlug(hashtagSlug) { - if (hashtagSlug.indexOf('#') === 0) hashtagSlug = hashtagSlug.slice(1); - return Category.findBySlug.apply(null, hashtagSlug.split(SEPARATOR, 2).reverse()); -}; - export function replaceSpan($elem, categorySlug, categoryLink) { - const category = findCategoryByHashtagSlug(categorySlug); - - if (!category) { - $elem.replaceWith(categorySlug); - } else { - $elem.replaceWith(categoryBadgeHTML( - category, { url: categoryLink, allowUncategorized: true, prefix: '#' } - )); - } + $elem.replaceWith(`#${categorySlug}`); }; - -export function decorateLinks($elems) { - $elems.each((_, elem) => replaceSpan($(elem), elem.text, elem.href)); -} - diff --git a/app/assets/javascripts/discourse/lib/click-track.js.es6 b/app/assets/javascripts/discourse/lib/click-track.js.es6 index c7929b8b3a..627318a83e 100644 --- a/app/assets/javascripts/discourse/lib/click-track.js.es6 +++ b/app/assets/javascripts/discourse/lib/click-track.js.es6 @@ -2,8 +2,7 @@ import DiscourseURL from 'discourse/lib/url'; export function isValidLink($link) { return ($link.hasClass("track-link") || - ($link.closest('.onebox-result,.onebox-body').length === 0 && - $link.has('.badge-category').length === 0)); + $link.closest('.hashtag,.badge-category,.onebox-result,.onebox-body').length === 0); }; export default { diff --git a/app/assets/javascripts/discourse/views/post.js.es6 b/app/assets/javascripts/discourse/views/post.js.es6 index 5f8479388d..21535c72d5 100644 --- a/app/assets/javascripts/discourse/views/post.js.es6 +++ b/app/assets/javascripts/discourse/views/post.js.es6 @@ -3,7 +3,6 @@ import { number } from 'discourse/lib/formatter'; import DiscourseURL from 'discourse/lib/url'; import { default as computed, on } from 'ember-addons/ember-computed-decorators'; import { fmt } from 'discourse/lib/computed'; -import { decorateLinks as decorateCategoryHashtagLinks } from 'discourse/lib/category-hashtags'; import { isValidLink } from 'discourse/lib/click-track'; const DAY = 60 * 50 * 1000; @@ -77,7 +76,6 @@ const PostView = Discourse.GroupedView.extend(Ember.Evented, { _cookedWasChanged() { this.trigger('postViewUpdated', this.$()); this._insertQuoteControls(); - this._decorateCategoryHashtagLinks(); }, mouseUp(e) { @@ -320,7 +318,6 @@ const PostView = Discourse.GroupedView.extend(Ember.Evented, { const $post = this.$(), postNumber = this.get('post').get('post_number'); - this._decorateCategoryHashtagLinks(); this._showLinkCounts(); ScreenTrack.current().track($post.prop('id'), postNumber); @@ -378,12 +375,7 @@ const PostView = Discourse.GroupedView.extend(Ember.Evented, { cooked.unhighlight(); this._highlighted = false; } - }.observes('searchService.highlightTerm', 'cooked'), - - _decorateCategoryHashtagLinks() { - const $elems = this.$('.cooked a.hashtag'); - if ($elems.length > 0) decorateCategoryHashtagLinks($elems); - } + }.observes('searchService.highlightTerm', 'cooked') }); export default PostView; diff --git a/app/assets/stylesheets/common/components/badges.css.scss b/app/assets/stylesheets/common/components/badges.css.scss index c118f9d348..afe7ebd9b2 100644 --- a/app/assets/stylesheets/common/components/badges.css.scss +++ b/app/assets/stylesheets/common/components/badges.css.scss @@ -154,35 +154,6 @@ } } -.cooked, .d-editor-preview { - .badge-wrapper { - margin: 0px 2.5px; - } - - h1 { @include cooked-badge-bullet(22px) } - h2 { @include cooked-badge-bullet(17px) } - h3 { @include cooked-badge-bullet(14px) } - h4 { @include cooked-badge-bullet(12px) } - h5 { @include cooked-badge-bullet(10px, -1.1px) } - h6 { @include cooked-badge-bullet(9px, -1.5px) } - - .badge-wrapper.box { - span { - display: inline; - } - - .badge-notification.clicks { - display: inline-block; - overflow: visible; - top: 0px; - } - - .badge-category-bg { - padding-right: 5px; - } - } -} - // Category badge dropdown // -------------------------------------------------- diff --git a/app/assets/stylesheets/common/components/hashtag.scss b/app/assets/stylesheets/common/components/hashtag.scss new file mode 100644 index 0000000000..1bb9bdd6e1 --- /dev/null +++ b/app/assets/stylesheets/common/components/hashtag.scss @@ -0,0 +1,14 @@ +.hashtag { + color: black; + font-weight: bold; + + &:visited, &:hover { + color: black; + } + + &:hover { + span { + text-decoration: underline; + } + } +} diff --git a/test/javascripts/lib/category-hashtags-test.js.es6 b/test/javascripts/lib/category-hashtags-test.js.es6 deleted file mode 100644 index dea21dc13c..0000000000 --- a/test/javascripts/lib/category-hashtags-test.js.es6 +++ /dev/null @@ -1,22 +0,0 @@ -import createStore from 'helpers/create-store'; -import Category from 'discourse/models/category'; -import { findCategoryByHashtagSlug } from "discourse/lib/category-hashtags"; - -module("lib:category-hashtags"); - -test('findCategoryByHashtagSlug', () => { - const store = createStore(); - - const parentCategory = store.createRecord('category', { slug: 'test1' }); - - const childCategory = store.createRecord('category', { - slug: 'test2', parentCategory: parentCategory - }); - - sandbox.stub(Category, 'list').returns([parentCategory, childCategory]); - - equal(findCategoryByHashtagSlug('test1'), parentCategory, 'returns the right category'); - equal(findCategoryByHashtagSlug('test1:test2'), childCategory, 'returns the right category'); - equal(findCategoryByHashtagSlug('#test1'), parentCategory, 'returns the right category'); - equal(findCategoryByHashtagSlug('#test1:test2'), childCategory, 'returns the right category'); -}); diff --git a/test/javascripts/lib/click-track-test.js.es6 b/test/javascripts/lib/click-track-test.js.es6 index 6b0c7c630d..403a2c15f5 100644 --- a/test/javascripts/lib/click-track-test.js.es6 +++ b/test/javascripts/lib/click-track-test.js.es6 @@ -29,10 +29,7 @@ module("lib:click-track", { forum log.txt - - - - + #hashtag `); } @@ -69,7 +66,7 @@ test("does not track clicks on quote buttons", function() { }); test("does not track clicks on category badges", () => { - ok(!track(generateClickEventOn('.badge-wrapper'))); + ok(!track(generateClickEventOn('.hashtag'))); }); test("removes the href and put it as a data attribute", function() {