UX: Remove category hashtag decoration.

This commit is contained in:
Guo Xiang Tan 2016-01-21 12:27:16 +08:00
parent 4a17cdc1e4
commit bd86e88b05
9 changed files with 20 additions and 90 deletions

View File

@ -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];
}

View File

@ -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;

View File

@ -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(`<a href="${categoryLink}" class="hashtag">#<span>${categorySlug}</span></a>`);
};
export function decorateLinks($elems) {
$elems.each((_, elem) => replaceSpan($(elem), elem.text, elem.href));
}

View File

@ -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 {

View File

@ -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;

View File

@ -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
// --------------------------------------------------

View File

@ -0,0 +1,14 @@
.hashtag {
color: black;
font-weight: bold;
&:visited, &:hover {
color: black;
}
&:hover {
span {
text-decoration: underline;
}
}
}

View File

@ -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');
});

View File

@ -29,10 +29,7 @@ module("lib:click-track", {
</div>
<a id="same-site" href="http://discuss.domain.com">forum</a>
<a class="attachment" href="http://discuss.domain.com/uploads/default/1234/1532357280.txt">log.txt</a>
<a class="badge-wrapper bullet" href="http://discuss.domain.com">
<span class="badge-category-bg"></span>
<span class="badge-category"></span>
</a>
<a class="hashtag" href="http://discuss.domain.com">#hashtag</a>
</article>
</div>`);
}
@ -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() {