Skip to content

E
edx-platform
Commit a2bf4696 by Brian Jacobel Committed by GitHub
Options

Merge pull request #13428 from edx/bjacobel/topic-list-dropdown 

Replace discussion topic selector with a native dropdown
parents dd876d8b 2a984c60
Showing with 59 additions and 236 deletions
common/static/common/js/discussion/views/new_post_view.js
......@@ -55,7 +55,7 @@
});
this.$el.html(_.template($('#new-post-template').html())(context));
threadTypeTemplate = _.template($('#thread-type-template').html());
if ($('.js-group-select').is(':disabled')) {
if ($('.js-group-select').prop('disabled')) {
$('.group-selector-wrapper').addClass('disabled');
}
this.addField(threadTypeTemplate({
......
common/static/common/js/spec/discussion/view/discussion_thread_edit_view_spec.js
......@@ -47,10 +47,10 @@
}
};
});
view.$el.find('.topic-title').filter(function(idx, el) {
return $(el).data('discussionId') === newTopicId;
}).click(); // set new topic
}).prop('selected', true); // set new topic
view.$('.post-topic').trigger('change');
view.$('.edit-post-title').val('changed thread title'); // set new title
if (discussionMode !== 'inline') {
view.$("label[for$='post-type-discussion']").click(); // set new thread type
......
common/static/common/js/spec/discussion/view/discussion_topic_menu_view_spec.js
/* globals DiscussionTopicMenuView, DiscussionSpecHelper, DiscussionCourseSettings */
/* globals DiscussionTopicMenuView, DiscussionSpecHelper, DiscussionCourseSettings, _ */
(function() {
'use strict';
describe('DiscussionTopicMenuView', function() {
......@@ -10,21 +10,6 @@
}, options);
this.view = new DiscussionTopicMenuView(options);
this.view.render().appendTo('#fixture-element');
this.defaultTextWidth = this.completeText.length;
};
this.openMenu = function() {
var menuWrapper = this.view.$('.topic-menu-wrapper');
expect(menuWrapper).toBeHidden();
this.view.$el.find('.post-topic-button').first().click();
expect(menuWrapper).toBeVisible();
};
this.closeMenu = function() {
var menuWrapper = this.view.$('.topic-menu-wrapper');
expect(menuWrapper).toBeVisible();
this.view.$el.find('.post-topic-button').first().click();
expect(menuWrapper).toBeHidden();
};
DiscussionSpecHelper.setUpGlobals();
......@@ -89,89 +74,25 @@
},
'is_cohorted': true
});
this.parentCategoryText = 'Basic Question Types';
this.selectedOptionText = 'Selection From Options';
this.completeText = this.parentCategoryText + ' / ' + this.selectedOptionText;
});
it('completely show parent category and sub-category', function() {
var dropdownText;
this.createTopicView();
this.view.maxNameWidth = this.defaultTextWidth + 1;
this.view.$el.find('.topic-menu-entry').first().click();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(this.completeText).toEqual(dropdownText);
});
it('truncation happens with specific title lengths', function() {
var dropdownText;
this.createTopicView();
this.view.$el.find('.topic-menu-entry')[2].click();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText).toEqual('…/Very long category name');
this.view.$el.find('.topic-menu-entry')[5].click();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText).toEqual('… / What Are Your Goals f …');
});
it('truncation happens with longer title lengths', function() {
var dropdownText;
it('defaults to first subtopic', function() {
this.createTopicView();
this.view.$el.find('.topic-menu-entry')[3].click();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText).toEqual('… / Very very very very l …');
expect(this.view.$el.find('option.topic-title:selected').text()).toEqual('Selection From Options');
});
it('titles are escaped before display', function() {
var dropdownText;
this.createTopicView();
this.view.$el.find('.topic-menu-entry')[4].click();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText).toContain('em>');
});
it('broken span doesn\'t occur', function() {
var dropdownText;
this.createTopicView();
this.view.maxNameWidth = this.selectedOptionText.length + 100;
this.view.$el.find('button.topic-title').first().click();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText.indexOf('/ span>')).toEqual(-1);
$(this.view.$el.find('option.topic-title')[4]).prop('selected', true);
expect(this.view.$el.find('option.topic-title:selected').text()).toContain('<em>');
});
it('appropriate topic is selected if `topicId` is passed', function() {
var completeText = this.parentCategoryText + ' / Numerical Input',
dropdownText;
this.createTopicView({
topicId: 'c49f0dfb8fc94c9c8d9999cc95190c56'
});
this.view.maxNameWidth = this.defaultTextWidth + 1;
this.view.render();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(completeText).toEqual(dropdownText);
});
it("defaults to the first topic if you don't click one", function() {
this.createTopicView();
expect(
this.view.$el.find('.js-selected-topic').text()
).toMatch(
this.view.$el.find('.topic-menu-entry')[0].innerHTML
);
});
it('click outside of the dropdown close it', function() {
this.createTopicView();
this.openMenu();
$(document.body).click();
expect(this.view.$('.topic-menu-wrapper')).toBeHidden();
});
it('can toggle the menu', function() {
this.createTopicView();
this.openMenu();
this.closeMenu();
expect(this.view.$el.find('option.topic-title:selected').text()).toEqual('Numerical Input');
});
});
}).call(this);
common/static/common/js/spec/discussion/view/new_post_view_spec.js
......@@ -34,29 +34,33 @@
describe('cohort selector', function() {
beforeEach(function() {
this.course_settings = new DiscussionCourseSettings({
'category_map': {
'children': ['Topic', 'General'],
'entries': {
'Topic': {
'is_cohorted': true,
'id': 'topic'
category_map: {
children: ['Topic', 'General', 'Not Cohorted'],
entries: {
Topic: {
is_cohorted: true,
id: 'topic'
},
'General': {
'is_cohorted': false,
'id': 'general'
General: {
is_cohorted: true,
id: 'general'
},
'Not Cohorted': {
is_cohorted: false,
id: 'not-cohorted'
}
}
},
'allow_anonymous': false,
'allow_anonymous_to_peers': false,
'is_cohorted': true,
'cohorts': [
allow_anonymous: false,
allow_anonymous_to_peers: false,
is_cohorted: true,
cohorts: [
{
'id': 1,
'name': 'Cohort1'
id: 1,
name: 'Cohort1'
}, {
'id': 2,
'name': 'Cohort2'
id: 2,
name: 'Cohort2'
}
]
});
......@@ -71,20 +75,24 @@
it('is not visible to students', function() {
return checkVisibility(this.view, false, false, true);
});
it('allows TAs to see the cohort selector', function() {
it('allows TAs to see the cohort selector when the topic is cohorted', function() {
DiscussionSpecHelper.makeTA();
return checkVisibility(this.view, true, false, true);
});
it('allows moderators to see the cohort selector', function() {
it('allows moderators to see the cohort selector when the topic is cohorted', function() {
DiscussionSpecHelper.makeModerator();
return checkVisibility(this.view, true, false, true);
});
it('only enables the cohort selector when applicable', function() {
DiscussionSpecHelper.makeModerator();
checkVisibility(this.view, true, false, true);
$('.topic-menu-entry:contains(General)').click();
$('option:contains(Not Cohorted)').prop('selected', true);
$('.post-topic').trigger('change');
checkVisibility(this.view, true, true, false);
$('.topic-menu-entry:contains(Topic)').click();
$('option:contains(Topic)').prop('selected', true);
$('.post-topic').trigger('change');
return checkVisibility(this.view, true, false, false);
});
it('allows the user to make a cohort selection', function() {
......@@ -218,7 +226,7 @@
expect(view.$('.js-anon')).not.toBeChecked();
expect(view.$('.js-anon-peers')).not.toBeChecked();
if (mode === 'tab') {
return expect(view.$('.js-selected-topic').text()).toEqual('General');
return expect(view.$('.post-topic option:selected').text()).toEqual('General');
}
};
return _.each(['tab', 'inline'], function(mode) {
......
common/static/common/templates/discussion/new-post-menu-category.underscore
<li role="menuitem" class="topic-menu-item">
<span class="topic-title"><%- text %></span>
<ul role="menu" class="topic-submenu"><%= entries %></ul>
</li>
<optgroup label="<%- text %>">
<%= edx.HtmlUtils.ensureHtml(entries) %>
</optgroup>
common/static/common/templates/discussion/new-post-menu-entry.underscore
<li role="menuitem" class="topic-menu-item">
<button class="btn-link topic-title topic-menu-entry" data-discussion-id="<%- id %>" data-cohorted="<%- is_cohorted %>"><%- text %></button>
</li>
<option class="topic-title" data-discussion-id="<%- id %>" data-cohorted="<%- is_cohorted %>"><%- text %></option>
common/static/common/templates/discussion/topic.underscore
<% // Using div here instead of label because we are using a non-native control %>
<div class="field-label">
<span class="field-label-text"><%- gettext("Topic Area:") %></span><div class="field-input post-topic">
<button type="button" class="post-topic-button">
<span class="sr"><%- gettext("Discussion topics; currently listing: ") %></span>
<span class="js-selected-topic"></span>
<span class="drop-arrow" aria-hidden="true">▾</span>
</button>
<div class="topic-menu-wrapper">
<label class="topic-filter-label">
<span class="sr"><%- gettext("Filter topics") %></span>
<input aria-describedby="field_help_topic_area" type="text" class="topic-filter-input" placeholder="<%- gettext('Filter topics') %>">
</label>
<ul class="topic-menu" role="menu"><%= topics_html %></ul>
</div>
</div>
</div><span class="field-help" id="field_help_topic_area">
<label class="field-label">
<span class="field-label-text">
<%- gettext("Topic Area:") %>
</span><select class="post-topic field-input" aria-describedby="field_help_topic_area" required>
<%= edx.HtmlUtils.ensureHtml(topics_html) %>
</select>
</label><span class="field-help" id="field_help_topic_area">
<%- gettext("Add your post to a relevant topic to help others find it.") %>
</span>
lms/static/sass/discussion/_mixins.scss
......@@ -35,7 +35,6 @@
width: 100%;
height: 125px;
background: $forum-color-background;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
font-size: $forum-base-font-size;
font-family: $sans-serif;
line-height: 1.6;
......
lms/static/sass/discussion/utilities/_shame.scss
......@@ -96,28 +96,9 @@ li[class*=forum-nav-thread-label-] {
text-shadow: none;
}
.post-type, .topic-filter-label {
margin-bottom: 0;
}
// Override global ul rules
.topic-menu {
@include padding-left(0);
}
.topic-menu, .topic-submenu {
margin-top: 0;
.post-type {
margin-bottom: 0;
}
// Override global span rules
.post-topic-button .drop-arrow {
line-height: 36px;
}
.topic-title {
line-height: 14px;
}
}
// -------
......
lms/static/sass/discussion/views/_create-edit-post.scss
......@@ -29,8 +29,8 @@
display: inline-block;
width: 100%;
vertical-align: top;
border-width: 0;
&:not([type="text"]) {
border-width: 0;
padding: 0;
}
}
......@@ -77,22 +77,6 @@
// UI: inputs
.forum-new-post-form,
.edit-post-form {
.post-topic-button {
@include white-button;
@extend %cont-truncated;
z-index: 1000;
padding: 0 $baseline 0 ($baseline*0.75);
width: 100%;
height: 40px;
font-size: $forum-base-font-size;
line-height: 36px;
.drop-arrow {
@include float(right);
color: #999;
}
}
.post-type-input {
@extend %text-sr;
}
......@@ -108,6 +92,7 @@
height: 40px;
text-align: center;
color: $gray-d3;
border: 1px solid $forum-color-border;
font-weight: 600;
line-height: 36px;
@include float(left);
......@@ -122,6 +107,7 @@
}
.post-type-input:checked + .post-type-label {
border: none;
background-color: $forum-color-active-thread;
color: $forum-color-active-text;
background-image: none;
......@@ -138,13 +124,17 @@
border-radius: $forum-border-radius;
padding: 0 $baseline/2;
height: 40px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
color: #333;
font-weight: 700;
font-size: $forum-large-font-size;
font-family: 'Open Sans', sans-serif;
}
select.field-input {
border: 1px solid $forum-color-border !important; // !important required to override -webkit-appearance
height: 40px;
}
.post-option {
box-sizing: border-box;
display: inline-block;
......@@ -193,66 +183,3 @@
list-style: none;
}
}
// ====================
// UI: topic menu
// TO-DO: refactor to use _navigation.scss as general topic selector
.forum-new-post-form .post-topic ,
.edit-post-form .post-topic {
position: relative;
.topic-menu-wrapper {
@extend %ui-depth4;
@include left(0);
box-sizing: border-box;
position: absolute;
top: 40px;
width: 100%;
background: $forum-color-background;
box-shadow: 0 2px 1px $shadow;
}
.topic-filter-label {
border-bottom: 1px solid $forum-color-border;
}
.topic-filter-input {
box-sizing: border-box;
border: none;
border-bottom: 1px solid $forum-color-border;
padding: 0 15px;
width: 100%;
height: 30px;
color: #333;
font-size: $forum-small-font-size;
line-height: 16px;
}
.topic-menu {
@include margin-left($baseline/2);
overflow-y: scroll;
max-height: 400px;
list-style: none;
}
.topic-submenu {
@include margin-left($baseline);
list-style: none;
}
.topic-title {
display: block;
padding: ($baseline/4) ($baseline/2);
font-size: $forum-base-font-size;
}
button.topic-title {
@include transition(none);
&:hover, &:focus {
background-color: $gray-l4;
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment