Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove forum-nav-header and wire breadcrumbs to replace it

Browse Source 
TNL-5186
This commit is contained in:
Brian Jacobel
2016-08-15 11:44:07 -04:00
parent 5e9fd04126
commit df35415ec1
11 changed files with 16 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
common/static/common/js/discussion/views/discussion_thread_list_view.js
View File

@@ -91,7 +91,6 @@
}
DiscussionThreadListView.prototype.events = {
'click .forum-nav-browse': 'toggleBrowseMenu',
'keypress .forum-nav-browse-filter-input': function(event) {
return DiscussionUtil.ignoreEnterKey(event);
},
@@ -193,15 +192,9 @@
TODO fix this entire chain of events
*/
DiscussionThreadListView.prototype.addAndSelectThread = function(thread) {
var commentableId, menuItem,
var commentableId = thread.get('commentable_id'),
self = this;
commentableId = thread.get('commentable_id');
menuItem = this.$('.forum-nav-browse-menu-item[data-discussion-id]').filter(function() {
return $(this).data('discussion-id') === commentableId;
});
this.setCurrentTopicDisplay(this.getPathText(menuItem));
return this.retrieveDiscussion(commentableId, function() {
return self.trigger('thread:created', thread.get('id'));
});
@@ -438,7 +431,6 @@
DiscussionThreadListView.prototype.showBrowseMenu = function() {
if (!this.isBrowseMenuVisible()) {
this.$('.forum-nav-browse').addClass('is-active');
this.$('.forum-nav-browse-menu-wrapper').show();
this.$('.forum-nav-thread-list-wrapper').hide();
$('.forum-nav-browse-filter-input').focus();
@@ -449,7 +441,6 @@
DiscussionThreadListView.prototype.hideBrowseMenu = function() {
if (this.isBrowseMenuVisible()) {
this.$('.forum-nav-browse').removeClass('is-active');
this.$('.forum-nav-browse-menu-wrapper').hide();
this.$('.forum-nav-thread-list-wrapper').show();
$('body').unbind('click', this.hideBrowseMenu);
@@ -524,64 +515,6 @@
}
};
DiscussionThreadListView.prototype.setCurrentTopicDisplay = function(text) {
return this.$('.forum-nav-browse-current').text(this.fitName(text));
};
DiscussionThreadListView.prototype.getNameWidth = function(name) {
var $test, width;
$test = $('<div>');
$test.css({
'font-size': this.$('.forum-nav-browse-current').css('font-size'),
opacity: 0,
position: 'absolute',
left: -1000,
top: -1000
});
$('body').append($test);
$test.text(name);
width = $test.width();
$test.remove();
return width;
};
DiscussionThreadListView.prototype.fitName = function(name) {
var partialName, path, prefix, rawName, width, x;
this.maxNameWidth = this.$('.forum-nav-browse').width() -
this.$('.forum-nav-browse .icon').outerWidth(true) -
this.$('.forum-nav-browse-drop-arrow').outerWidth(true);
width = this.getNameWidth(name);
if (width < this.maxNameWidth) {
return name;
}
path = (function() {
var _i, _len, _ref, _results;
_ref = name.split('/');
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
x = _ref[_i];
_results.push(x.replace(/^\s+|\s+$/g, ''));
}
return _results;
}());
prefix = '';
while (path.length > 1) {
prefix = gettext('…') + '/';
path.shift();
partialName = prefix + path.join('/');
if (this.getNameWidth(partialName) < this.maxNameWidth) {
return partialName;
}
}
rawName = path[0];
name = prefix + rawName;
while (this.getNameWidth(name) > this.maxNameWidth) {
rawName = rawName.slice(0, rawName.length - 1);
name = prefix + rawName + gettext('…');
}
return name;
};
DiscussionThreadListView.prototype.selectTopicHandler = function(event) {
event.preventDefault();
return this.selectTopic($(event.target));
@@ -592,7 +525,6 @@
this.hideBrowseMenu();
$item = $target.closest('.forum-nav-browse-menu-item');
this.setCurrentTopicDisplay(this.getPathText($item));
this.trigger('topic:selected', this.getBreadcrumbText($item));
if ($item.hasClass('forum-nav-browse-menu-all')) {
@@ -666,7 +598,6 @@
DiscussionThreadListView.prototype.performSearch = function($searchInput) {
this.hideBrowseMenu();
this.setCurrentTopicDisplay(gettext('Search Results'));
// trigger this event so the breadcrumbs can update as well
this.trigger('search:initiated');
this.searchFor($searchInput.val(), $searchInput);

6
common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js
View File

@@ -618,12 +618,6 @@
describe('selecting an item', function() {
var testSelectionRequest;
it('should change the button text', function() {
setupAjax();
$('.forum-nav-browse-menu-following .forum-nav-browse-title').click();
return expect($('.forum-nav-browse-current').text()).toEqual("Posts I'm Following");
});
it('should show/hide the cohort selector', function() {
var self = this;
DiscussionSpecHelper.makeModerator();

2
common/static/common/templates/discussion/discussion-home.underscore
View File

@@ -18,7 +18,7 @@
<th scope="row" class="row-title"><%- gettext("Find discussions") %></td>
<td class="row-item">
<span class="icon fa fa-reorder" aria-hidden="true"></span>
<span class="row-description"><%- gettext("Use the Discussion Topics menu to find specific topics.") %></span>
<span class="row-description"><%- gettext("Use the All Topics menu to find specific topics.") %></span>
</td>
<td class="row-item">
<span class="icon fa fa-search" aria-hidden="true"></span>

5
common/test/acceptance/pages/lms/discussion.py
View File

@@ -378,7 +378,7 @@ class DiscussionSortPreferencePage(CoursePage):
def show_all_discussions(self):
""" Show the list of all discussions. """
self.q(css=".forum-nav-browse").click()
self.q(css=".all-topics").click()
def get_selected_sort_preference(self):
"""
@@ -423,7 +423,7 @@ class DiscussionTabSingleThreadPage(CoursePage):
def show_all_discussions(self):
""" Show the list of all discussions. """
self.q(css=".forum-nav-browse").click()
self.q(css=".all-topics").click()
def close_open_thread(self):
with self.thread_page.secondary_action_menu_open(".thread-main-wrapper"):
@@ -443,6 +443,7 @@ class DiscussionTabSingleThreadPage(CoursePage):
Click specific thread on the list.
"""
thread_selector = "li[data-id='{}']".format(thread_id)
self.show_all_discussions()
self.q(css=thread_selector).first.click()
EmptyPromise(
lambda: self._thread_is_rendered_successfully(thread_id),

1
common/test/acceptance/tests/discussion/test_discussion.py
View File

@@ -374,7 +374,6 @@ class DiscussionTabMultipleThreadTest(BaseDiscussionTestCase):
self.thread_ids[1]
)
self.thread_page_1.visit()
self.thread_page_1.show_all_discussions()
def setup_multiple_threads(self, thread_count):
threads = []

2
lms/djangoapps/discussion/static/discussion/js/discussion_board_factory.js
View File

@@ -78,7 +78,7 @@
searchBox.clearSearch();
this.model.set('contents', []);
router.navigate('', {trigger: true});
router.nav.selectTopic($('.forum-nav-browse-menu-all'));
router.nav.toggleBrowseMenu(event);
}
}
}).render();

3
lms/djangoapps/discussion/static/discussion/js/views/discussion_fake_breadcrumbs.js
View File

@@ -11,10 +11,11 @@
define([
'backbone',
'gettext',
'edx-ui-toolkit/js/utils/html-utils',
'text!discussion/templates/fake-breadcrumbs.underscore'
],
function(Backbone, HtmlUtils, breadcrumbsTemplate) {
function(Backbone, gettext, HtmlUtils, breadcrumbsTemplate) {
var DiscussionFakeBreadcrumbs = Backbone.View.extend({
initialize: function() {
this.template = HtmlUtils.template(breadcrumbsTemplate);

4
lms/djangoapps/discussion/static/discussion/templates/fake-breadcrumbs.underscore
View File

@@ -1,6 +1,8 @@
<h6 class="hd-6 breadcrumbs">
<span class="nav-item">
<a class="all-topics" href="">All Topics</a>
<a class="all-topics" href="">
<span class="icon fa fa-bars" aria-hidden="true"></span><%- gettext('All Topics') %>
</a>
</span>
<% contents.forEach(function(content) { %>
<span class="fa fa-angle-right"></span>

47
lms/static/sass/discussion/elements/_navigation.scss
View File

@@ -29,52 +29,6 @@
}
}
// ------
// Topic Listing Header
// ------
.forum-nav-header {
box-sizing: border-box;
// TODO: don't use table for layout purposes as it switches the screenreader mode
display: table;
border-bottom: 1px solid $forum-color-border;
width: 100%;
background-color: $gray-l3;
}
.forum-nav-browse {
box-sizing: border-box;
width: 100%;
vertical-align: middle;
padding: 11px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
&:hover,
&:focus,
&.is-active {
// converted to button from a;
// need importants to overwrite later button styles
box-shadow: none !important;
background-image: none !important;
background-color: $gray-l5 !important;
}
.icon {
@include margin-right($baseline/4);
font-size: $forum-base-font-size;
}
}
.forum-nav-browse-current {
font-size: $forum-small-font-size;
}
.forum-nav-browse-drop-arrow {
@include margin-left($baseline/4);
}
// -----------
// Browse menu
// -----------
@@ -157,6 +111,7 @@
padding: ($baseline/4) ($baseline/2);
color: $black;
text-align: right;
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
}
.forum-nav-filter-main {

9
lms/static/sass/discussion/utilities/_shame.scss
View File

@@ -2,15 +2,14 @@
// navigation - header
// -------------------
// Override global a rules
.forum-nav-browse {
color: $black !important;
}
// Temporary breadcrumbs
.has-breadcrumbs {
.breadcrumbs {
margin: 5px 0 0 0;
.all-topics .fa {
@include margin-right(10px);
}
}
}

11
lms/templates/discussion/_thread_list_template.html
View File

@@ -1,17 +1,6 @@
<%page expression_filter="h"/>
<%! from django.utils.translation import ugettext as _ %>
<script type="text/template" id="thread-list-template">
<div class="forum-nav-header">
<button type="button" class="forum-nav-browse" id="forum-nav-browse" aria-haspopup="true">
## There is no whitespace between these because the front-end JS code
## needs to precisely compute the available width for forum-nav-
## browse-current in order to do truncation of topic names.
<span class="icon fa fa-reorder" aria-hidden="true"></span>
<span class="sr">${_("Discussion topics; currently listing: ")}</span>
<span class="forum-nav-browse-current">${_("All Discussions")}</span>
<span class="forum-nav-browse-drop-arrow" aria-hidden="true">▾</span>
</button>
</div>
<%include file="_filter_dropdown.html" />
<div class="forum-nav-thread-list-wrapper" id="sort-filter-wrapper" tabindex="-1">
<div class="forum-nav-refine-bar">