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

make new post view overlay-ish

Browse Source
This commit is contained in:
alisan617
2016-11-21 18:38:39 -05:00
committed by Brian Jacobel
parent 5dad2afa44
commit 82d05c6eb7
11 changed files with 92 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
common/static/common/js/discussion/views/discussion_inline_view.js
View File

@@ -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);

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

@@ -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
});

16
common/static/common/js/discussion/views/new_post_view.js
View File

@@ -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,17 +157,26 @@
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.'))) {
return;
if (this.formModified()) {
if (!confirm(gettext('Your post will be discarded.'))) { // eslint-disable-line no-alert
return;
}
}
this.trigger('newPost:cancel');
return this.resetForm();

8
common/static/common/js/spec/discussion/view/discussion_inline_view_spec.js
View File

@@ -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() {

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

@@ -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);
});

22
common/static/common/templates/discussion/inline-discussion.underscore
View File

@@ -5,17 +5,19 @@
<article class="new-post-article is-hidden"></article>
<section class="inline-threads">
</section>
<div class="inline-discussion-thread-container">
<section class="inline-threads">
</section>
<div class="inline-thread">
<div class="forum-nav-bar">
<button class="btn-link all-posts-btn">
<span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
<span><%- gettext('All Posts') %></span>
</button>
</div>
<div class="forum-content">
<div class="inline-thread">
<div class="forum-nav-bar">
<button class="btn-link all-posts-btn">
<span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
<span><%- gettext('All Posts') %></span>
</button>
</div>
<div class="forum-content">
</div>
</div>
</div>
</section>

7
common/static/common/templates/discussion/new-post.underscore
View File

@@ -1,4 +1,11 @@
<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) { %>

4
lms/djangoapps/discussion/static/discussion/js/views/discussion_board_view.js
View File

@@ -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')

2
lms/static/sass/discussion/_discussion.scss
View File

@@ -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 {

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

@@ -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;
}
}

21
lms/static/sass/discussion/views/_inline.scss
View File

@@ -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;
}
}
}
}