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

FEATURE: View article OP in KE view 

Output of topic OP to KE view

UI styles for OP view
This commit is contained in:
Justin DiRose 2019-09-16 10:32:59 -05:00
parent 948d8426ca
commit e2b6d2ddb5
10 changed files with 99 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
assets/javascripts/discourse/components/knowledge-explorer-topic-link.js.es6 Normal file
View File

@ -0,0 +1,7 @@
export default Ember.Component.extend({
click() {
const topic = this.get("topic");
this.set("selectedTopic", topic.id);
}
});

9
assets/javascripts/discourse/components/knowledge-explorer-topic.js.es6 Normal file
View File

@ -0,0 +1,9 @@
import { default as computed } from "ember-addons/ember-computed-decorators";
export default Ember.Component.extend({
classNames: "knowledge-explorer-topic",
@computed("topic")
originalPostContent(topic) {
return topic.post_stream.posts[0].cooked;
}
});

5
assets/javascripts/discourse/controllers/knowledge-explorer.js.es6
View File

@ -7,7 +7,8 @@ export default Ember.Controller.extend({
application: Ember.inject.controller(),
queryParams: {
filterCategory: "category",
filterTags: "tags"
filterTags: "tags",
selectedTopic: "topic"
},
filterTags: null,
filterCategory: null,
@ -15,6 +16,8 @@ export default Ember.Controller.extend({
searchTerm: null,
searchResults: null,
selectedTopic: null,
@computed("searchResults")
hasSearchResults(results) {
return !!results;

21
assets/javascripts/discourse/routes/knowledge-explorer.js.es6
View File

@ -4,21 +4,34 @@ export default Ember.Route.extend({
queryParams: {
filterTags: {
refreshModel: true
},
selectedTopic: {
refreshModel: true
}
},
model(params) {
if (params.filterTags) {
const tags = params.filterTags;
return ajax(`/knowledge-explorer.json?tags=${tags}`);
} else if (params.selectedTopic) {
return ajax(`/t/${params.selectedTopic}.json`);
} else {
return ajax("/knowledge-explorer.json");
}
},
setupController(controller, model) {
controller.setProperties({
tags: model.tags,
topics: model.topics
});
if (model.tags && model.topics) {
controller.setProperties({
tags: model.tags,
topics: model.topics
});
} else {
controller.setProperties({
tags: [],
topics: [],
topic: model
});
}
}
});

1
assets/javascripts/discourse/templates/components/knowledge-explorer-topic-link.hbs Normal file
View File

@ -0,0 +1 @@
<span class="knowledge-explorer-topic-link">{{topic.title}}</span>

2
assets/javascripts/discourse/templates/components/knowledge-explorer-topic-list.hbs
View File

@ -8,7 +8,7 @@
<tr>
<td class="main-link">
<span class="link-top-line">
<a href="/t/{{topic.id}}">{{topic.title}}</a>
{{knowledge-explorer-topic-link topic=topic selectedTopic=selectedTopic}}
</span>
<span class="link-bottom-line">
{{#each topic.tags as |tag|}}

5
assets/javascripts/discourse/templates/components/knowledge-explorer-topic.hbs Normal file
View File

@ -0,0 +1,5 @@
<a class="knowledge-explorer-nav-link return" href="/knowledge-explorer">Return to Knowledge Explorer</a>
<div class="topic-content">
{{{originalPostContent}}}
</div>
<a class="knowledge-explorer-nav-link more" href="/t/{{topic.id}}">View the discussion on this topic</a>

44
assets/javascripts/discourse/templates/knowledge-explorer.hbs
View File

@ -1,23 +1,27 @@
<div class="knowledge-explorer">
<div class="knowledge-explorer-search">
{{knowledge-explorer-search searchResults=searchResults searchTerm=searchTerm filterTags=filterTags}}
</div>
<div class="knowledge-explorer-browse">
{{knowledge-explorer-tag-list
tags=tags
filterTags=filterTags
}}
<div class="knowledge-explorer-results">
{{#if hasSearchResults}}
{{#if emptySearchResults}}
<div class="result-count no-result">{{i18n 'search.no_results'}}</div>
{{else}}
<div class="result-count">{{i18n 'knowledge_explorer.search.results' count=searchCount}}</div>
{{knowledge-explorer-topic-list topics=searchResults}}
{{/if}}
{{else}}
{{knowledge-explorer-topic-list topics=topics}}
{{/if}}
{{#if selectedTopic}}
{{knowledge-explorer-topic topic=topic}}
{{else}}
<div class="knowledge-explorer-search">
{{knowledge-explorer-search searchResults=searchResults searchTerm=searchTerm filterTags=filterTags}}
</div>
</div>
<div class="knowledge-explorer-browse">
{{knowledge-explorer-tag-list
tags=tags
filterTags=filterTags
}}
<div class="knowledge-explorer-results">
{{#if hasSearchResults}}
{{#if emptySearchResults}}
<div class="result-count no-result">{{i18n 'search.no_results'}}</div>
{{else}}
<div class="result-count">{{i18n 'knowledge_explorer.search.results' count=searchCount}}</div>
{{knowledge-explorer-topic-list topics=searchResults selectedTopic=selectedTopic}}
{{/if}}
{{else}}
{{knowledge-explorer-topic-list topics=topics selectedTopic=selectedTopic}}
{{/if}}
</div>
</div>
{{/if}}
</div>

27
assets/stylesheets/common/knowledge-explorer.scss
View File

@ -1,4 +1,27 @@
.knowledge-explorer {
.knowledge-explorer-topic {
width: 80%;
margin: 0 auto;
.knowledge-explorer-nav-link {
font-weight: bold;
&.return {
font-size: .8em;
&::before {
content: "«";
margin-right: 3px;
}
}
&.more {
float: right;
font-size: 1.2em;
padding: 10px 0;
&::after {
content: "»";
margin-left: 3px;
}
}
}
}
.knowledge-explorer-search {
align-items: center;
background-color: $primary-very-low;
@ -65,6 +88,10 @@
}
.knowledge-explorer-topic-list {
flex-basis: 100%;
.knowledge-explorer-topic-link {
color: $tertiary;
cursor: pointer;
}
.discourse-tag {
padding-right: 5px;
}

4
assets/stylesheets/mobile/knowledge-explorer.scss
View File

@ -1,5 +1,9 @@
.mobile-view {
.knowledge-explorer {
.knowledge-explorer-topic {
width: calc(100vw - 35px);
margin: 10px 0;
}
.knowledge-explorer-search {
font-size: $font-up-2;
padding: .5em 0;