Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

implemented UI for filtered down by category view

This commit is contained in:
Sam 2013-10-25 14:18:34 +11:00
parent 572f036e74
commit a65407b2cb
14 changed files with 157 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/javascripts/discourse/controllers/list_controller.js
View File

@ -22,7 +22,7 @@ Discourse.ListController = Discourse.Controller.extend({
category: category
});
}).filter(function(i) {
return i !== null && !(category && i.get("name") === "categories");
return i !== null && !(category && i.get("name").indexOf("categor") === 0);
});
}.property("category"),
@ -134,7 +134,11 @@ Discourse.ListController = Discourse.Controller.extend({
} else {
return false;
}
}.property('category')
}.property('category'),
categories: function() {
return Discourse.Category.list();
}.property()
});

7
app/assets/javascripts/discourse/models/category.js
View File

@ -34,6 +34,13 @@ Discourse.Category = Discourse.Model.extend({
return Discourse.getURL("/category/") + (this.get('slug'));
}.property('name'),
unreadUrl: function() {
return this.get('url') + '/unread';
}.property('url'),
newUrl: function() {
return this.get('url') + '/new';
}.property('url'),
style: function() {
return "background-color: #" + (this.get('category.color')) + "; color: #" + (this.get('category.text_color')) + ";";

14
app/assets/javascripts/discourse/models/nav_item.js
View File

@ -31,11 +31,21 @@ Discourse.NavItem = Discourse.Model.extend({
// href from this item
href: function() {
return Discourse.getURL("/") + this.get('filterMode');
}.property('filterMode'),
// href from this item
filterMode: function() {
var name = this.get('name');
if( name.split('/')[0] === 'category' ) {
return Discourse.getURL("/") + 'category/' + this.get('categorySlug');
return 'category/' + this.get('categorySlug');
} else {
return Discourse.getURL("/") + name.replace(' ', '-');
var mode = "";
var category = this.get("category");
if(category){
mode += "category/" + category.get("slug") + "/";
}
return mode + name.replace(' ', '-');
}
}.property('name'),

1
app/assets/javascripts/discourse/models/topic_list.js
View File

@ -146,7 +146,6 @@ Discourse.TopicList.reopenClass({
return Ember.RSVP.resolve(list);
}
session.setProperties({topicList: null, topicListScrollPos: null});
return Discourse.TopicList.find(filter, menuItem.get('excludeCategory'));
}
});

9
app/assets/javascripts/discourse/routes/list_category_route.js
View File

@ -22,11 +22,14 @@ Discourse.ListCategoryRoute = Discourse.FilteredListRoute.extend({
}
var listController = this.controllerFor('list'),
urlId = Discourse.Category.slugFor(category),
categorySlug = Discourse.Category.slugFor(category),
self = this;
listController.set('filterMode', "category/" + urlId);
listController.load("category/" + urlId).then(function(topicList) {
var filter = this.filter || "latest";
var url = "category/" + categorySlug + "/" + filter;
listController.set('filterMode', url);
listController.load(url).then(function(topicList) {
listController.setProperties({
canCreateTopic: topicList.get('can_create_topic'),
category: category

2
app/assets/javascripts/discourse/templates/components/discourse-categorydrop.js.handlebars
View File

@ -1,7 +1,7 @@
{{#if category}}
{{categoryLink category}}
{{else}}
<a href="/">{{title}}</a>
<a href="/"><i class='icon icon-home'></i></a>
{{/if}}
{{#if categories}}

7
app/assets/javascripts/discourse/templates/list.js.handlebars
View File

@ -1,5 +1,10 @@
<div id='list-controls'>
<div class='list-controls'>
<div class="container">
{{#if category}}
{{discourse-breadcrumbs category=category categories=categories}}
{{/if}}
<ul class="nav nav-pills" id='category-filter'>
{{each availableNavItems itemViewClass="Discourse.NavItemView"}}
</ul>

2
app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars
View File

@ -41,9 +41,11 @@
{{/if}}
</td>
{{#unless controller.category}}
<td class='category'>
{{categoryLink category}}
</td>
{{/unless}}
<td class='posters'>
{{#each posters}}

6
app/assets/javascripts/discourse/templates/list/topics.js.handlebars
View File

@ -10,10 +10,6 @@
</button>
{{/if}}
{{#if category}}
{{discourse-breadcrumbs title=Discourse.SiteSettings.title category=category categories=categories}}
{{/if}}
<table id='topic-list'>
<thead>
<tr>
@ -23,7 +19,9 @@
<th class='main-link'>
{{i18n topic.title}}
</th>
{{#unless category}}
<th class='category'>{{i18n category_title}}</th>
{{/unless}}
<th class='posters'>{{i18n top_contributors}}</th>
<th class='num posts'>{{i18n posts}}</th>
<th class='num likes'>{{i18n likes}}</th>

4
app/assets/javascripts/discourse/templates/list/wide_categories.js.handlebars
View File

@ -22,10 +22,10 @@
{{/if}}
{{categoryLink this allowUncategorized=true}}
{{#if unreadTopics}}
<a href={{unbound url}} class='badge new-posts badge-notification' title='{{i18n topic.unread_topics count="unreadTopics"}}'>{{unbound unreadTopics}}</a>
<a href={{unbound unreadUrl}} class='badge new-posts badge-notification' title='{{i18n topic.unread_topics count="unreadTopics"}}'>{{unbound unreadTopics}}</a>
{{/if}}
{{#if newTopics}}
<a href={{unbound url}} class='badge new-posts badge-notification' title='{{i18n topic.new_topics count="newTopics"}}'>{{unbound newTopics}} <i class='icon icon-asterisk'></i></a>
<a href={{unbound newUrl}} class='badge new-posts badge-notification' title='{{i18n topic.new_topics count="newTopics"}}'>{{unbound newTopics}} <i class='icon icon-asterisk'></i></a>
{{/if}}
<div class='featured-users'>
{{#each featured_users}}

9
app/assets/javascripts/discourse/views/nav_item_view.js
View File

@ -14,7 +14,7 @@ Discourse.NavItemView = Discourse.View.extend({
hidden: Em.computed.not('content.visible'),
count: Ember.computed.alias('content.count'),
shouldRerender: Discourse.View.renderIfChanged('count'),
active: Discourse.computed.propertyEqual('contentNameSlug', 'controller.filterMode'),
active: Discourse.computed.propertyEqual('content.filterMode', 'controller.filterMode'),
title: function() {
var categoryName, extra, name;
@ -27,13 +27,6 @@ Discourse.NavItemView = Discourse.View.extend({
return I18n.t("filters." + name + ".help", extra);
}.property("content.filter"),
contentNameSlug: function() {
return this.get("content.name").toLowerCase().replace(' ','-');
}.property('content.name'),
// active: function() {
// return (this.get("contentNameSlug") === this.get("controller.filterMode"));
// }.property("contentNameSlug", "controller.filterMode"),
name: function() {
var categoryName, extra, name;

78
app/assets/stylesheets/desktop/topic-list.scss
View File

@ -8,7 +8,7 @@
// List controls
// --------------------------------------------------
#list-controls {
.list-controls {
.nav {
float: left;
margin-bottom: 15px;
@ -349,52 +349,50 @@
// Misc. stuff
// --------------------------------------------------
#main {
#list-controls {
.badge-category {
display: inline-block;
background-color: yellow;
margin: 8px 0 0 8px;
float: left;
}
clear: both;
.list-controls {
.badge-category {
display: inline-block;
background-color: yellow;
margin: 8px 0 0 8px;
float: left;
}
#list-area {
margin-bottom: 300px;
clear: both;
}
#list-area {
margin-bottom: 300px;
.topic-statuses .topic-status i {font-size: 15px;}
.empty-topic-list {
padding: 10px;
}
.unseen {
background-color: transparent;
padding: 0;
border: 0;
color: lighten($red, 10%);
font-size: 13px;
cursor: default;
}
.empty-topic-list {
padding: 10px;
}
#topic-list {
.alert {
margin-bottom: 0;
font-size: 14px;
}
.spinner {
margin-top: 40px;
}
}
span.posted {
display: inline-block;
text-indent: -9999em;
width: 15px;
height: 15px;
background: {
image: image-url("posted.png");
};
.unseen {
background-color: transparent;
padding: 0;
border: 0;
color: lighten($red, 10%);
font-size: 13px;
cursor: default;
}
}
#topic-list {
.alert {
margin-bottom: 0;
font-size: 14px;
}
.spinner {
margin-top: 40px;
}
}
span.posted {
display: inline-block;
text-indent: -9999em;
width: 15px;
height: 15px;
background: {
image: image-url("posted.png");
};
}

17
app/assets/stylesheets/desktop/topic.scss
View File

@ -199,17 +199,20 @@ i {background: #e4f2f8;
}
ol.category-breadcrumb {
display: block;
float: left;
list-style: none;
margin: 0 0 10px 0;
margin: 0 10px 0 0;
padding: 0;
li {
float: left;
margin-right: 5px;
border: 1px solid transparent;
line-height: 31px;
&.no-category {
font-size: 13px;
font-size: 22px;
a {
margin-right: 3px;
@ -243,7 +246,9 @@ ol.category-breadcrumb {
.badge-category {
margin: 0;
display: inline-block;
padding: 1px 6px 2px 6px;
font-size: 14px;
padding: 0px 10px;
float: none;
}
button {
@ -286,6 +291,12 @@ ol.category-breadcrumb {
padding: 8px 5px 0 7px;
z-index: 100;
.badge-category {
font-size: 13px;
line-height: 26px;
padding: 0px 8px;
}
div {
margin-bottom: 10px;
}

100
app/assets/stylesheets/mobile/topic-list.scss
View File

@ -8,7 +8,7 @@
// List controls
// --------------------------------------------------
#list-controls {
.list-controls {
margin: 5px;
.nav {
float: left;
@ -239,48 +239,46 @@
// Misc. stuff
// --------------------------------------------------
#main {
#list-controls {
.badge-category {
display: inline-block;
background-color: yellow;
margin: 8px 0 0 8px;
float: left;
}
clear: both;
}
#list-area {
margin-bottom: 300px;
.empty-topic-list {
padding: 10px;
}
.unseen {
background-color: transparent;
padding: 0;
border: 0;
color: lighten($red, 10%);
font-size: 13px;
cursor: default;
}
}
#topic-list {
.alert {
margin-bottom: 0;
font-size: 14px;
}
.spinner {
margin-top: 40px;
}
}
span.posted {
.list-controls {
.badge-category {
display: inline-block;
text-indent: -9999em;
width: 15px;
height: 15px;
background: {
image: image-url("posted.png");
};
background-color: yellow;
margin: 8px 0 0 8px;
float: left;
}
clear: both;
}
#list-area {
margin-bottom: 300px;
.empty-topic-list {
padding: 10px;
}
.unseen {
background-color: transparent;
padding: 0;
border: 0;
color: lighten($red, 10%);
font-size: 13px;
cursor: default;
}
}
#topic-list {
.alert {
margin-bottom: 0;
font-size: 14px;
}
.spinner {
margin-top: 40px;
}
}
span.posted {
display: inline-block;
text-indent: -9999em;
width: 15px;
height: 15px;
background: {
image: image-url("posted.png");
};
}
@ -364,3 +362,23 @@ clear: both;
opacity: 1;
}
ol.category-breadcrumb {
display: block;
margin-top: 5px;
float: left;
list-style: none;
.icon-home {
font-size: 20px;
}
.badge-category {
margin: 3px 8px 0;
}
button {
padding: 5px 10px;
font-size: 16px;
}
li {
float: left;
}
}