From a65407b2cbc5e9621c24f92e775b1247985e43ae Mon Sep 17 00:00:00 2001 From: Sam Date: Fri, 25 Oct 2013 14:18:34 +1100 Subject: [PATCH] implemented UI for filtered down by category view --- .../discourse/controllers/list_controller.js | 8 +- .../javascripts/discourse/models/category.js | 7 ++ .../javascripts/discourse/models/nav_item.js | 14 ++- .../discourse/models/topic_list.js | 1 - .../discourse/routes/list_category_route.js | 9 +- .../discourse-categorydrop.js.handlebars | 4 +- .../discourse/templates/list.js.handlebars | 7 +- .../list/topic_list_item.js.handlebars | 2 + .../templates/list/topics.js.handlebars | 6 +- .../list/wide_categories.js.handlebars | 4 +- .../discourse/views/nav_item_view.js | 9 +- .../stylesheets/desktop/topic-list.scss | 78 +++++++------- app/assets/stylesheets/desktop/topic.scss | 17 ++- app/assets/stylesheets/mobile/topic-list.scss | 100 +++++++++++------- 14 files changed, 157 insertions(+), 109 deletions(-) diff --git a/app/assets/javascripts/discourse/controllers/list_controller.js b/app/assets/javascripts/discourse/controllers/list_controller.js index 072918c9b..45f02dc71 100644 --- a/app/assets/javascripts/discourse/controllers/list_controller.js +++ b/app/assets/javascripts/discourse/controllers/list_controller.js @@ -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() }); diff --git a/app/assets/javascripts/discourse/models/category.js b/app/assets/javascripts/discourse/models/category.js index 3a2f3be31..dc75876c5 100644 --- a/app/assets/javascripts/discourse/models/category.js +++ b/app/assets/javascripts/discourse/models/category.js @@ -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')) + ";"; diff --git a/app/assets/javascripts/discourse/models/nav_item.js b/app/assets/javascripts/discourse/models/nav_item.js index b5a4de47c..5bb6ef44a 100644 --- a/app/assets/javascripts/discourse/models/nav_item.js +++ b/app/assets/javascripts/discourse/models/nav_item.js @@ -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'), diff --git a/app/assets/javascripts/discourse/models/topic_list.js b/app/assets/javascripts/discourse/models/topic_list.js index 97b6ea4ab..f27400cdd 100644 --- a/app/assets/javascripts/discourse/models/topic_list.js +++ b/app/assets/javascripts/discourse/models/topic_list.js @@ -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')); } }); diff --git a/app/assets/javascripts/discourse/routes/list_category_route.js b/app/assets/javascripts/discourse/routes/list_category_route.js index cef425dff..e85c8ccf3 100644 --- a/app/assets/javascripts/discourse/routes/list_category_route.js +++ b/app/assets/javascripts/discourse/routes/list_category_route.js @@ -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 diff --git a/app/assets/javascripts/discourse/templates/components/discourse-categorydrop.js.handlebars b/app/assets/javascripts/discourse/templates/components/discourse-categorydrop.js.handlebars index 5be553f5c..f2148db82 100644 --- a/app/assets/javascripts/discourse/templates/components/discourse-categorydrop.js.handlebars +++ b/app/assets/javascripts/discourse/templates/components/discourse-categorydrop.js.handlebars @@ -1,7 +1,7 @@ {{#if category}} {{categoryLink category}} {{else}} - {{title}} + {{/if}} {{#if categories}} @@ -12,4 +12,4 @@
{{categoryLink this}}
{{/each}} -{{/if}} \ No newline at end of file +{{/if}} diff --git a/app/assets/javascripts/discourse/templates/list.js.handlebars b/app/assets/javascripts/discourse/templates/list.js.handlebars index 2f5a9f32d..ab0c79b24 100644 --- a/app/assets/javascripts/discourse/templates/list.js.handlebars +++ b/app/assets/javascripts/discourse/templates/list.js.handlebars @@ -1,5 +1,10 @@ -
+
+ + {{#if category}} + {{discourse-breadcrumbs category=category categories=categories}} + {{/if}} + diff --git a/app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars b/app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars index 81d25ea5e..a1f65f4cf 100644 --- a/app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars +++ b/app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars @@ -41,9 +41,11 @@ {{/if}} +{{#unless controller.category}} {{categoryLink category}} +{{/unless}} {{#each posters}} diff --git a/app/assets/javascripts/discourse/templates/list/topics.js.handlebars b/app/assets/javascripts/discourse/templates/list/topics.js.handlebars index c5d8ad3fa..9753fda85 100644 --- a/app/assets/javascripts/discourse/templates/list/topics.js.handlebars +++ b/app/assets/javascripts/discourse/templates/list/topics.js.handlebars @@ -10,10 +10,6 @@ {{/if}} - {{#if category}} - {{discourse-breadcrumbs title=Discourse.SiteSettings.title category=category categories=categories}} - {{/if}} - @@ -23,7 +19,9 @@ + {{#unless category}} + {{/unless}} diff --git a/app/assets/javascripts/discourse/templates/list/wide_categories.js.handlebars b/app/assets/javascripts/discourse/templates/list/wide_categories.js.handlebars index 444d63133..d76e85495 100644 --- a/app/assets/javascripts/discourse/templates/list/wide_categories.js.handlebars +++ b/app/assets/javascripts/discourse/templates/list/wide_categories.js.handlebars @@ -22,10 +22,10 @@ {{/if}} {{categoryLink this allowUncategorized=true}} {{#if unreadTopics}} - {{unbound unreadTopics}} + {{unbound unreadTopics}} {{/if}} {{#if newTopics}} - {{unbound newTopics}} + {{unbound newTopics}} {{/if}}
{{#each featured_users}} diff --git a/app/assets/javascripts/discourse/views/nav_item_view.js b/app/assets/javascripts/discourse/views/nav_item_view.js index e0c73c383..065219acd 100644 --- a/app/assets/javascripts/discourse/views/nav_item_view.js +++ b/app/assets/javascripts/discourse/views/nav_item_view.js @@ -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; diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss index 291499d5e..93493d12f 100644 --- a/app/assets/stylesheets/desktop/topic-list.scss +++ b/app/assets/stylesheets/desktop/topic-list.scss @@ -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"); + }; +} diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss index 70451b2b8..d93dd36c8 100644 --- a/app/assets/stylesheets/desktop/topic.scss +++ b/app/assets/stylesheets/desktop/topic.scss @@ -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; } diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index 85bd40d1f..739fc9049 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -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; + } +}
{{i18n topic.title}} {{i18n category_title}}{{i18n top_contributors}} {{i18n posts}}