UX: Remove category hashtag decoration.
This commit is contained in:
Guo Xiang Tan
parent
4a17cdc1e4
commit
bd86e88b05
|
|
@ -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];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// --------------------------------------------------
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
.hashtag {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
|
||||
&:visited, &:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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');
|
||||
});
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue