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 @@ ...@@ -55,7 +55,7 @@
}); });
this.$el.html(_.template($('#new-post-template').html())(context)); this.$el.html(_.template($('#new-post-template').html())(context));
threadTypeTemplate = _.template($('#thread-type-template').html()); threadTypeTemplate = _.template($('#thread-type-template').html());
if ($('.js-group-select').is(':disabled')) { if ($('.js-group-select').prop('disabled')) {
$('.group-selector-wrapper').addClass('disabled'); $('.group-selector-wrapper').addClass('disabled');
} }
this.addField(threadTypeTemplate({ this.addField(threadTypeTemplate({
......
common/static/common/js/spec/discussion/view/discussion_thread_edit_view_spec.js
...@@ -47,10 +47,10 @@ ...@@ -47,10 +47,10 @@
} }
}; };
}); });
view.$el.find('.topic-title').filter(function(idx, el) { view.$el.find('.topic-title').filter(function(idx, el) {
return $(el).data('discussionId') === newTopicId; 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 view.$('.edit-post-title').val('changed thread title'); // set new title
if (discussionMode !== 'inline') { if (discussionMode !== 'inline') {
view.$("label[for$='post-type-discussion']").click(); // set new thread type 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() { (function() {
'use strict'; 'use strict';
describe('DiscussionTopicMenuView', function() { describe('DiscussionTopicMenuView', function() {
...@@ -10,21 +10,6 @@ ...@@ -10,21 +10,6 @@
}, options); }, options);
this.view = new DiscussionTopicMenuView(options); this.view = new DiscussionTopicMenuView(options);
this.view.render().appendTo('#fixture-element'); 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(); DiscussionSpecHelper.setUpGlobals();
...@@ -89,89 +74,25 @@ ...@@ -89,89 +74,25 @@
}, },
'is_cohorted': true '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() { it('defaults to first subtopic', function() {
var dropdownText;
this.createTopicView(); this.createTopicView();
this.view.$el.find('.topic-menu-entry')[3].click(); expect(this.view.$el.find('option.topic-title:selected').text()).toEqual('Selection From Options');
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText).toEqual('… / Very very very very l …');
}); });
it('titles are escaped before display', function() { it('titles are escaped before display', function() {
var dropdownText;
this.createTopicView(); this.createTopicView();
this.view.$el.find('.topic-menu-entry')[4].click(); $(this.view.$el.find('option.topic-title')[4]).prop('selected', true);
dropdownText = this.view.$el.find('.js-selected-topic').text(); expect(this.view.$el.find('option.topic-title:selected').text()).toContain('<em>');
expect(dropdownText).toContain('em&gt;');
});
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);
}); });
it('appropriate topic is selected if `topicId` is passed', function() { it('appropriate topic is selected if `topicId` is passed', function() {
var completeText = this.parentCategoryText + ' / Numerical Input',
dropdownText;
this.createTopicView({ this.createTopicView({
topicId: 'c49f0dfb8fc94c9c8d9999cc95190c56' topicId: 'c49f0dfb8fc94c9c8d9999cc95190c56'
}); });
this.view.maxNameWidth = this.defaultTextWidth + 1;
this.view.render(); this.view.render();
dropdownText = this.view.$el.find('.js-selected-topic').text(); expect(this.view.$el.find('option.topic-title:selected').text()).toEqual('Numerical Input');
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();
}); });
}); });
}).call(this); }).call(this);
common/static/common/js/spec/discussion/view/new_post_view_spec.js
...@@ -34,29 +34,33 @@ ...@@ -34,29 +34,33 @@
describe('cohort selector', function() { describe('cohort selector', function() {
beforeEach(function() { beforeEach(function() {
this.course_settings = new DiscussionCourseSettings({ this.course_settings = new DiscussionCourseSettings({
'category_map': { category_map: {
'children': ['Topic', 'General'], children: ['Topic', 'General', 'Not Cohorted'],
'entries': { entries: {
'Topic': { Topic: {
'is_cohorted': true, is_cohorted: true,
'id': 'topic' id: 'topic'
}, },
'General': { General: {
'is_cohorted': false, is_cohorted: true,
'id': 'general' id: 'general'
},
'Not Cohorted': {
is_cohorted: false,
id: 'not-cohorted'
} }
} }
}, },
'allow_anonymous': false, allow_anonymous: false,
'allow_anonymous_to_peers': false, allow_anonymous_to_peers: false,
'is_cohorted': true, is_cohorted: true,
'cohorts': [ cohorts: [
{ {
'id': 1, id: 1,
'name': 'Cohort1' name: 'Cohort1'
}, { }, {
'id': 2, id: 2,
'name': 'Cohort2' name: 'Cohort2'
} }
] ]
}); });
...@@ -71,20 +75,24 @@ ...@@ -71,20 +75,24 @@
it('is not visible to students', function() { it('is not visible to students', function() {
return checkVisibility(this.view, false, false, true); 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(); DiscussionSpecHelper.makeTA();
return checkVisibility(this.view, true, false, true); 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(); DiscussionSpecHelper.makeModerator();
return checkVisibility(this.view, true, false, true); return checkVisibility(this.view, true, false, true);
}); });
it('only enables the cohort selector when applicable', function() { it('only enables the cohort selector when applicable', function() {
DiscussionSpecHelper.makeModerator(); DiscussionSpecHelper.makeModerator();
checkVisibility(this.view, true, false, true); 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); 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); return checkVisibility(this.view, true, false, false);
}); });
it('allows the user to make a cohort selection', function() { it('allows the user to make a cohort selection', function() {
...@@ -218,7 +226,7 @@ ...@@ -218,7 +226,7 @@
expect(view.$('.js-anon')).not.toBeChecked(); expect(view.$('.js-anon')).not.toBeChecked();
expect(view.$('.js-anon-peers')).not.toBeChecked(); expect(view.$('.js-anon-peers')).not.toBeChecked();
if (mode === 'tab') { 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) { return _.each(['tab', 'inline'], function(mode) {
......
common/static/common/templates/discussion/new-post-menu-category.underscore
<li role="menuitem" class="topic-menu-item"> <optgroup label="<%- text %>">
<span class="topic-title"><%- text %></span> <%= edx.HtmlUtils.ensureHtml(entries) %>
<ul role="menu" class="topic-submenu"><%= entries %></ul> </optgroup>
</li>
common/static/common/templates/discussion/new-post-menu-entry.underscore
<li role="menuitem" class="topic-menu-item"> <option class="topic-title" data-discussion-id="<%- id %>" data-cohorted="<%- is_cohorted %>"><%- text %></option>
<button class="btn-link topic-title topic-menu-entry" data-discussion-id="<%- id %>" data-cohorted="<%- is_cohorted %>"><%- text %></button>
</li>
common/static/common/templates/discussion/topic.underscore
<% // Using div here instead of label because we are using a non-native control %> <label class="field-label">
<div class="field-label"> <span class="field-label-text">
<span class="field-label-text"><%- gettext("Topic Area:") %></span><div class="field-input post-topic"> <%- gettext("Topic Area:") %>
<button type="button" class="post-topic-button"> </span><select class="post-topic field-input" aria-describedby="field_help_topic_area" required>
<span class="sr"><%- gettext("Discussion topics; currently listing: ") %></span> <%= edx.HtmlUtils.ensureHtml(topics_html) %>
<span class="js-selected-topic"></span> </select>
<span class="drop-arrow" aria-hidden="true">▾</span> </label><span class="field-help" id="field_help_topic_area">
</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">
<%- gettext("Add your post to a relevant topic to help others find it.") %> <%- gettext("Add your post to a relevant topic to help others find it.") %>
</span> </span>
lms/static/sass/discussion/_mixins.scss
...@@ -35,7 +35,6 @@ ...@@ -35,7 +35,6 @@
width: 100%; width: 100%;
height: 125px; height: 125px;
background: $forum-color-background; background: $forum-color-background;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
font-size: $forum-base-font-size; font-size: $forum-base-font-size;
font-family: $sans-serif; font-family: $sans-serif;
line-height: 1.6; line-height: 1.6;
......
lms/static/sass/discussion/utilities/_shame.scss
...@@ -96,28 +96,9 @@ li[class*=forum-nav-thread-label-] { ...@@ -96,28 +96,9 @@ li[class*=forum-nav-thread-label-] {
text-shadow: none; text-shadow: none;
} }
.post-type, .topic-filter-label { .post-type {
margin-bottom: 0;
}
// Override global ul rules
.topic-menu {
@include padding-left(0);
}
.topic-menu, .topic-submenu {
margin-top: 0;
margin-bottom: 0; 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 @@ ...@@ -29,8 +29,8 @@
display: inline-block; display: inline-block;
width: 100%; width: 100%;
vertical-align: top; vertical-align: top;
border-width: 0;
&:not([type="text"]) { &:not([type="text"]) {
border-width: 0;
padding: 0; padding: 0;
} }
} }
...@@ -77,22 +77,6 @@ ...@@ -77,22 +77,6 @@
// UI: inputs // UI: inputs
.forum-new-post-form, .forum-new-post-form,
.edit-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 { .post-type-input {
@extend %text-sr; @extend %text-sr;
} }
...@@ -108,6 +92,7 @@ ...@@ -108,6 +92,7 @@
height: 40px; height: 40px;
text-align: center; text-align: center;
color: $gray-d3; color: $gray-d3;
border: 1px solid $forum-color-border;
font-weight: 600; font-weight: 600;
line-height: 36px; line-height: 36px;
@include float(left); @include float(left);
...@@ -122,6 +107,7 @@ ...@@ -122,6 +107,7 @@
} }
.post-type-input:checked + .post-type-label { .post-type-input:checked + .post-type-label {
border: none;
background-color: $forum-color-active-thread; background-color: $forum-color-active-thread;
color: $forum-color-active-text; color: $forum-color-active-text;
background-image: none; background-image: none;
...@@ -138,13 +124,17 @@ ...@@ -138,13 +124,17 @@
border-radius: $forum-border-radius; border-radius: $forum-border-radius;
padding: 0 $baseline/2; padding: 0 $baseline/2;
height: 40px; height: 40px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
color: #333; color: #333;
font-weight: 700; font-weight: 700;
font-size: $forum-large-font-size; font-size: $forum-large-font-size;
font-family: 'Open Sans', sans-serif; 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 { .post-option {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
...@@ -193,66 +183,3 @@ ...@@ -193,66 +183,3 @@
list-style: none; 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