Skip to content

E
edx-platform
Commit 82d05c6e by alisan617 Committed by Brian Jacobel
Options

make new post view overlay-ish

parent 5dad2afa
Showing with 81 additions and 23 deletions
common/static/common/js/discussion/views/discussion_inline_view.js
......@@ -14,6 +14,7 @@
},
'click .new-post-btn': 'toggleNewPost',
'click .all-posts-btn': 'navigateToAllPosts',
keydown: 'handleKeydown',
'keydown .new-post-btn': function(event) {
return DiscussionUtil.activateOnSpace(event, this.toggleNewPost);
}
......@@ -28,6 +29,7 @@
this.showByDefault = options.showByDefault || false;
this.toggleDiscussionBtn = this.$('.discussion-show');
this.listenTo(this.model, 'change', this.render);
this.escKey = 27;
match = this.page_re.exec(window.location.href);
if (match) {
......@@ -89,6 +91,7 @@
if (this.$('section.discussion').length) {
edx.HtmlUtils.setHtml(this.$el, discussionHtml);
this.$('section.discussion').replaceWith(edx.HtmlUtils.ensureHtml(discussionHtml).toString());
} else {
edx.HtmlUtils.append(this.$el, discussionHtml);
}
......@@ -117,6 +120,7 @@
this.newPostView.render();
this.listenTo(this.newPostView, 'newPost:createPost', this.hideNewPost);
this.listenTo(this.newPostView, 'newPost:cancel', this.hideNewPost);
this.discussion.on('add', this.addThread);
......@@ -124,7 +128,7 @@
this.showed = true;
if (this.isWaitingOnNewPost) {
this.newPostForm.show().focus();
this.newPostForm.removeClass('is-hidden').focus();
}
// Hide the thread view initially
......@@ -169,7 +173,6 @@
this.toggleDiscussionBtn.addClass('shown');
this.toggleDiscussionBtn.find('.button-text').text(gettext('Hide Discussion'));
if (this.retrieved) {
this.$('section.discussion').slideDown();
this.$('section.discussion').removeClass('is-hidden');
this.showed = true;
} else {
......@@ -185,7 +188,6 @@
},
hideDiscussion: function() {
this.$('section.discussion').slideUp();
this.$('section.discussion').addClass('is-hidden');
this.toggleDiscussionBtn.removeClass('shown');
this.toggleDiscussionBtn.find('.button-text').text(gettext('Show Discussion'));
......@@ -200,20 +202,29 @@
return;
}
if (this.showed) {
this.newPostForm.slideDown(300);
} else {
this.newPostForm.show().focus();
this.$('section.discussion').find('.inline-discussion-thread-container').addClass('is-hidden');
this.$('section.discussion').find('.new-post-btn').addClass('is-hidden');
this.newPostForm.removeClass('is-hidden').find('.js-post-title').focus();
}
this.newPostView.$el.removeClass('is-hidden');
this.toggleDiscussionBtn.addClass('shown');
this.toggleDiscussionBtn.find('.button-text').text(gettext('Hide Discussion'));
this.$('section.discussion').slideDown();
this.showed = true;
},
hideNewPost: function() {
this.newPostView.$el.addClass('is-hidden');
return this.newPostForm.slideUp(300);
this.$('section.discussion').find('.inline-discussion-thread-container').removeClass('is-hidden');
this.$('section.discussion').find('.new-post-btn')
.removeClass('is-hidden')
.focus();
this.newPostForm.addClass('is-hidden');
},
handleKeydown: function(event) {
var keyCode = event.keyCode;
if (keyCode === this.escKey) {
this.$('section.discussion').find('.cancel').trigger('click');
}
}
});
}).call(window);
common/static/common/js/discussion/views/discussion_thread_list_view.js
......@@ -107,7 +107,7 @@
this.boardName = null;
this.current_search = '';
this.mode = 'all';
this.showThreadPreview = options.showThreadPreview;
this.showThreadPreview = true;
this.searchAlertCollection = new Backbone.Collection([], {
model: Backbone.Model
});
......
common/static/common/js/discussion/views/new_post_view.js
......@@ -100,6 +100,7 @@
'submit .forum-new-post-form': 'createPost',
'change .post-option-input': 'postOptionChange',
'click .cancel': 'cancel',
'click .add-post-cancel': 'cancel',
'reset .forum-new-post-form': 'updateStyles'
};
......@@ -156,18 +157,27 @@
success: function(response) {
var thread;
thread = new Thread(response.content);
self.$el.hide();
self.$el.addClass('is-hidden');
self.resetForm();
self.trigger('newPost:createPost');
return self.collection.add(thread);
}
});
};
NewPostView.prototype.formModified = function() {
var postBodyHasContent = this.$('.js-post-body').find('.wmd-input').val() !== '',
titleHasContent = this.$('.js-post-title').val() !== '';
return postBodyHasContent || titleHasContent;
};
NewPostView.prototype.cancel = function(event) {
event.preventDefault();
if (!confirm(gettext('Your post will be discarded.'))) {
if (this.formModified()) {
if (!confirm(gettext('Your post will be discarded.'))) { // eslint-disable-line no-alert
return;
}
}
this.trigger('newPost:cancel');
return this.resetForm();
};
......
common/static/common/js/spec/discussion/view/discussion_inline_view_spec.js
......@@ -114,6 +114,14 @@
testView.$('.forum-new-post-form .cancel').click();
expect(testView.$('.new-post-article')).toHaveClass('is-hidden');
});
it('should be hidden when the "close" button is clicked', function() {
var testView = createTestView(this);
showDiscussion(this, testView);
testView.$('.new-post-btn').click();
testView.$('.forum-new-post-form .add-post-cancel').click();
expect(testView.$('.new-post-article')).toHaveClass('is-hidden');
});
});
describe('thread listing', function() {
......
common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js
......@@ -188,12 +188,11 @@
renderSingleThreadWithProps = function(props) {
return makeView(new Discussion([new Thread(DiscussionViewSpecHelper.makeThreadWithProps(props))])).render();
};
makeView = function(discussion, options) {
var opts = options || {};
makeView = function(discussion) {
return new DiscussionThreadListView({
el: $('#fixture-element'),
collection: discussion,
showThreadPreview: opts.showThreadPreview || true,
showThreadPreview: true,
courseSettings: new DiscussionCourseSettings({
is_cohorted: true
})
......@@ -676,10 +675,8 @@
it('should not be shown when showThreadPreview is false', function() {
var view,
discussion = new Discussion([]),
options = {
showThreadPreview: false
};
view = makeView(discussion, options);
showThreadPreview = false;
view = makeView(discussion, showThreadPreview);
view.render();
expect(view.$el.find('.thread-preview-body').length).toEqual(0);
});
......
common/static/common/templates/discussion/inline-discussion.underscore
......@@ -5,6 +5,7 @@
<article class="new-post-article is-hidden"></article>
<div class="inline-discussion-thread-container">
<section class="inline-threads">
</section>
......@@ -18,5 +19,6 @@
<div class="forum-content">
</div>
</div>
</div>
</section>
common/static/common/templates/discussion/new-post.underscore
<form class="forum-new-post-form">
<% if (mode === 'inline') { %>
<h3 class="thread-title"><%- gettext("Add a Post") %></h3>
<button class="btn-default add-post-cancel">
<span class="sr"><%- gettext('Cancel') %></span>
<span class="fa fa-close" aria-hidden="true"></span>
</button>
<% } %>
<ul class="post-errors" style="display: none"></ul>
<div class="forum-new-post-form-wrapper"></div>
<% if (cohort_options) { %>
......
lms/djangoapps/discussion/static/discussion/js/views/discussion_board_view.js
......@@ -32,7 +32,6 @@
initialize: function(options) {
this.courseSettings = options.courseSettings;
this.showThreadPreview = true;
this.sidebar_padding = 10;
this.current_search = '';
this.mode = 'all';
......@@ -46,8 +45,7 @@
this.discussionThreadListView = new DiscussionThreadListView({
collection: this.discussion,
el: this.$('.discussion-thread-list-container'),
courseSettings: this.courseSettings,
showThreadPreview: this.showThreadPreview
courseSettings: this.courseSettings
}).render();
this.searchView = new DiscussionSearchView({
el: this.$('.forum-search')
......
lms/static/sass/discussion/_discussion.scss
......@@ -356,6 +356,7 @@ section.discussion {
}
.new-post-article {
.inner-wrapper {
max-width: 1180px;
min-width: 760px;
......@@ -369,6 +370,7 @@ section.discussion {
color: $gray-d3;
font-weight: 700;
}
}
.edit-post-form {
......
lms/static/sass/discussion/elements/_navigation.scss
......@@ -385,7 +385,9 @@
&:hover,
&:focus {
color: $forum-color-active-text;
background-color: $forum-color-active-thread;
// !important overrides the one set here:
// https://github.com/edx/edx-platform/blob/master/lms/static/sass/elements/_controls.scss#L472
background-color: $forum-color-active-thread !important;
}
}
......
lms/static/sass/discussion/views/_inline.scss
......@@ -39,4 +39,25 @@
.wmd-preview {
@include discussion-wmd-preview;
}
.new-post-article {
position: relative;
border: 1px solid $forum-color-border;
.add-post-cancel {
@include right($baseline / 2);
top: $baseline / 2;
position: absolute;
color: $uxpl-primary-blue;
&:hover,
&:focus {
border-color: transparent;
box-shadow: none;
background-color: transparent;
background-image: none;
}
}
}
}
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