diff --git a/lms/static/coffee/src/discussion/discussion_module.coffee b/lms/static/coffee/src/discussion/discussion_module.coffee index c7e433b440..1bbac70396 100644 --- a/lms/static/coffee/src/discussion/discussion_module.coffee +++ b/lms/static/coffee/src/discussion/discussion_module.coffee @@ -2,7 +2,20 @@ if Backbone? class @DiscussionModuleView extends Backbone.View events: "click .discussion-show": "toggleDiscussion" + "click .new-post-btn": "toggleNewPost" + "click .new-post-cancel": "hideNewPost" + initialize: -> + + toggleNewPost: (event) -> + if @newPostForm.is(':hidden') + @newPostForm.slideDown(300) + else + @newPostForm.slideUp(300) + hideNewPost: (event) -> + @newPostForm.slideUp(300) + toggleDiscussion: (event) -> + console.log "doing stuff yo" if @showed @$("section.discussion").hide() $(event.target).html("Show Discussion") @@ -22,18 +35,25 @@ if Backbone? url: url type: "GET" dataType: 'json' - success: (response, textStatus) => - window.user = new DiscussionUser(response.user_info) - Content.loadContentInfos(response.annotated_content_info) - $(event.target).html("Hide Discussion") - discussion = new Discussion() - discussion.reset(response.discussion_data, {silent: false}) - $discussion = $(Mustache.render $("script#_inline_discussion").html(), {'threads':response.discussion_data}) - $(".discussion-module").append($discussion) - discussion.each (thread) -> - element = $("article#thread_#{thread.id}") - dtv = new DiscussionThreadInlineView el: element, model: thread - dtv.render() - DiscussionUtil.bulkUpdateContentInfo(window.$$annotated_content_info) - @retrieved = true - @showed = true + success: (response, textStatus, jqXHR) => @createDiscussion(event, response, textStatus) + + createDiscussion: (event, response, textStatus) => + console.log "HI" + console.log response + window.user = new DiscussionUser(response.user_info) + Content.loadContentInfos(response.annotated_content_info) + console.log "infod" + $(event.target).html("Hide Discussion") + discussion = new Discussion() + discussion.reset(response.discussion_data, {silent: false}) + $discussion = $(Mustache.render $("script#_inline_discussion").html(), {'threads':response.discussion_data}) + $(".discussion-module").append($discussion) + @newPostForm = $('.new-post-article') + discussion.each (thread) -> + element = $("article#thread_#{thread.id}") + dtv = new DiscussionThreadInlineView el: element, model: thread + dtv.render() + DiscussionUtil.bulkUpdateContentInfo(window.$$annotated_content_info) + @newPostView = new NewPostInlineView el: $('.new-post-article'), collection: discussion + @retrieved = true + @showed = true diff --git a/lms/static/coffee/src/discussion/views/new_post_inline_vew.coffee b/lms/static/coffee/src/discussion/views/new_post_inline_vew.coffee new file mode 100644 index 0000000000..f64454252c --- /dev/null +++ b/lms/static/coffee/src/discussion/views/new_post_inline_vew.coffee @@ -0,0 +1,55 @@ +class @NewPostInlineView extends Backbone.View + + initialize: () -> + + @topicId = @$(".topic").first().data("discussion_id") + + @maxNameWidth = 100 + + DiscussionUtil.makeWmdEditor @$el, $.proxy(@$, @), "new-post-body" + @$(".new-post-tags").tagsInput DiscussionUtil.tagsInputOptions() + + events: + "submit .new-post-form": "createPost" + + # Because we want the behavior that when the body is clicked the menu is + # closed, we need to ignore clicks in the search field and stop propagation. + # Without this, clicking the search field would also close the menu. + ignoreClick: (event) -> + event.stopPropagation() + + createPost: (event) -> + event.preventDefault() + title = @$(".new-post-title").val() + body = @$(".new-post-body").find(".wmd-input").val() + tags = @$(".new-post-tags").val() + + anonymous = false || @$("input.discussion-anonymous").is(":checked") + follow = false || @$("input.discussion-follow").is(":checked") + + url = DiscussionUtil.urlFor('create_thread', @topicId) + + DiscussionUtil.safeAjax + $elem: $(event.target) + $loading: $(event.target) if event + url: url + type: "POST" + dataType: 'json' + async: false # TODO when the rest of the stuff below is made to work properly.. + data: + title: title + body: body + tags: tags + anonymous: anonymous + auto_subscribe: follow + error: DiscussionUtil.formErrorHandler(@$(".new-post-form-errors")) + success: (response, textStatus) => + # TODO: Move this out of the callback, this makes it feel sluggish + thread = new Thread response['content'] + DiscussionUtil.clearFormErrors(@$(".new-post-form-errors")) + @$el.hide() + @$(".new-post-title").val("").attr("prev-text", "") + @$(".new-post-body").val("").attr("prev-text", "") + @$(".new-post-tags").val("") + @$(".new-post-tags").importTags("") + @collection.add thread diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 62b4c66db4..110dd9b11a 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -1472,14 +1472,10 @@ body.discussion { } .discussion-module { - @extend .discussion-body -} + @extend .discussion-body; -/* For some reason I have to do this to get the SCSS to compile, can't stick it under the above .discussion-module */ -.discussion-module { section.discussion { - /* Course content p has a default margin-bottom of 1.416, this is just to reset that */ - + /* Course content p has a default margin-bottom of 1.416em, this is just to reset that */ .discussion-thread { padding: 0.5em; @@ -1535,5 +1531,161 @@ body.discussion { } } + .new-post-article { + display: none; + margin-top: 20px; + .inner-wrapper { + max-width: 1180px; + min-width: 760px; + margin: auto; + } + + .new-post-form { + width: 100%; + margin-bottom: 20px; + border-radius: 3px; + background: rgba(0, 0, 0, .55); + color: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 rgba(255, 255, 255, .5); + @include clearfix; + + .form-row { + margin-bottom: 20px; + } + + .new-post-body .wmd-input { + @include discussion-wmd-input; + position: relative; + width: 100%; + height: 200px; + z-index: 1; + padding: 10px; + box-sizing: border-box; + border: 1px solid #333; + border-radius: 3px 3px 0 0; + background: #fff; + font-family: 'Monaco', monospace; + font-size: 13px; + line-height: 1.6; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; + } + + .new-post-body .wmd-preview { + @include discussion-wmd-preview; + position: relative; + width: 100%; + //height: 50px; + margin-top: -1px; + padding: 25px 20px 10px 20px; + box-sizing: border-box; + border: 1px solid #333; + border-radius: 0 0 3px 3px; + background: #e6e6e6; + color: #333; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; + } + + .new-post-preview-label { + position: absolute; + top: 4px; + left: 4px; + font-size: 11px; + color: #aaa; + text-transform: uppercase; + } + + .new-post-title, + .new-post-tags { + width: 100%; + height: 40px; + padding: 0 10px; + box-sizing: border-box; + border-radius: 3px; + border: 1px solid #333; + font-size: 16px; + font-family: 'Open Sans', sans-serif; + color: #333; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; + } + + .new-post-title { + font-weight: 700; + } + + .submit { + @include blue-button; + float: left; + height: 37px; + margin-top: 10px; + padding-bottom: 2px; + border-color: #333; + + &:hover { + border-color: #222; + } + } + + .new-post-cancel { + @include white-button; + float: left; + margin: 10px 0 0 15px; + } + + .options { + margin-top: 40px; + + label { + display: inline; + margin-left: 8px; + font-size: 15px; + color: #fff; + text-shadow: none; + } + } + .wmd-button { + background: none; + } + + .wmd-button span { + background: url(../images/new-post-icons-full.png) no-repeat; + } + } + + .thread-tags { + margin-top: 20px; + } + + .thread-tag { + padding: 3px 10px 6px; + border-radius: 3px; + color: #333; + background: #c5eeff; + border: 1px solid #90c4d7; + font-size: 13px; + } + + .thread-title { + display: block; + margin-bottom: 20px; + font-size: 21px; + color: #333; + font-weight: 700; + } + } + + .new-post-btn { + @include blue-button; + font-size: 13px; + margin-right: 4px; + } + + .new-post-icon { + display: block; + float: left; + width: 16px; + height: 17px; + margin: 8px 7px 0 0; + background: url(../images/new-post-icon.png) no-repeat; + } } diff --git a/lms/templates/discussion/_discussion_module.html b/lms/templates/discussion/_discussion_module.html index 99c0602b41..fb3cda4a85 100644 --- a/lms/templates/discussion/_discussion_module.html +++ b/lms/templates/discussion/_discussion_module.html @@ -1,5 +1,5 @@ <%include file="_underscore_templates.html" />
- Show Discussion + Show Discussion
diff --git a/lms/templates/discussion/_inline_new_post.html b/lms/templates/discussion/_inline_new_post.html new file mode 100644 index 0000000000..7bc17d4467 --- /dev/null +++ b/lms/templates/discussion/_inline_new_post.html @@ -0,0 +1,29 @@ +
+
+
+
+
+
+
+ +
+ +
+
+
+
+ +
+
+
+ +
+
+ +
+ + Cancel +
+
+
+
diff --git a/lms/templates/discussion/mustache/_inline_discussion.mustache b/lms/templates/discussion/mustache/_inline_discussion.mustache index f82b3810e5..ed1fc65ab9 100644 --- a/lms/templates/discussion/mustache/_inline_discussion.mustache +++ b/lms/templates/discussion/mustache/_inline_discussion.mustache @@ -1,6 +1,37 @@
- {{#threads}} + New Post + +
+
+
+
+
+
+
+ +
+
+
+ +
+
+ +
+ + Cancel +
+ +
+ +
+
+
+
+
+ + + {{#threads}}
- {{/threads}} + {{/threads}}