diff --git a/lms/static/coffee/src/discussion/content.coffee b/lms/static/coffee/src/discussion/content.coffee index 9549a93a43..ee6c50ecf7 100644 --- a/lms/static/coffee/src/discussion/content.coffee +++ b/lms/static/coffee/src/discussion/content.coffee @@ -16,7 +16,6 @@ if Backbone? urlMappers: {} urlFor: (name) -> - console.log @ @urlMappers[name].apply(@) can: (action) -> @@ -247,7 +246,6 @@ if Backbone? @model.set('votes_point', response.votes.point) toggleVote: (event) -> - console.log("HERE") $elem = $(event.target) value = $elem.attr("value") $elem.toggleClass("is-cast") @@ -449,6 +447,14 @@ if Backbone? @set('subscribed', false) @trigger "thread:unfollow" + vote: -> + @get("votes")["up_count"] = parseInt(@get("votes")["up_count"]) + 1 + @trigger "change" + + unvote: -> + @get("votes")["up_count"] = parseInt(@get("votes")["up_count"]) - 1 + @trigger "change" + display_body: -> if @has("highlighted_body") String(@get("highlighted_body")).replace(//g, '').replace(/<\/highlight>/g, '') diff --git a/lms/static/coffee/src/discussion/models/discussion_user.coffee b/lms/static/coffee/src/discussion/models/discussion_user.coffee index 6cf0dbedbb..6449e80b85 100644 --- a/lms/static/coffee/src/discussion/models/discussion_user.coffee +++ b/lms/static/coffee/src/discussion/models/discussion_user.coffee @@ -4,3 +4,11 @@ class @DiscussionUser extends Backbone.Model voted: (thread) -> _.include(@get('upvoted_ids'), thread.id) + + vote: (thread) -> + @get('upvoted_ids').push(thread.id) + thread.vote() + + unvote: (thread) -> + @set('upvoted_ids', _.without(@get('upvoted_ids'), thread.id)) + thread.unvote() diff --git a/lms/static/coffee/src/discussion/views/discussion_thread_view.coffee b/lms/static/coffee/src/discussion/views/discussion_thread_view.coffee index 04d89bf2e2..f302f364ce 100644 --- a/lms/static/coffee/src/discussion/views/discussion_thread_view.coffee +++ b/lms/static/coffee/src/discussion/views/discussion_thread_view.coffee @@ -22,22 +22,32 @@ class @DiscussionThreadView extends DiscussionContentView template: _.template($("#thread-template").html()) + initialize: -> + @model.on "change", @updateModelDetails + render: -> @$el.html(@template(@model.toJSON())) - @model.bind "change", @updateModelDetails - if window.user.following(@model) - @$(".dogear").addClass("is-followed") - - if window.user.voted(@model) - @$(".vote-btn").addClass("is-cast") + @renderDogear() + @renderVoted() @$("span.timeago").timeago() Markdown.makeWmdEditor @$(".reply-body"), "", DiscussionUtil.urlFor("upload"), (text) -> DiscussionUtil.postMathJaxProcessor(text) @convertMath() @renderResponses() @ + renderDogear: -> + if window.user.following(@model) + @$(".dogear").addClass("is-followed") + + renderVoted: => + if window.user.voted(@model) + @$("[data-role=discussion-vote]").addClass("is-cast") + else + @$("[data-role=discussion-vote]").removeClass("is-cast") + updateModelDetails: => - @$(".discussion-vote .votes-count-number").html(@model.get("votes")["up_count"]) + @renderVoted() + @$("[data-role=discussion-vote] .votes-count-number").html(@model.get("votes")["up_count"]) convertMath: -> element = @$(".post-body") @@ -64,10 +74,10 @@ class @DiscussionThreadView extends DiscussionContentView toggleVote: (event) -> event.preventDefault() - if not @model.get('voted')#@$(".discussion-vote").hasClass("is-cast") - @vote() - else + if window.user.voted(@model) @unvote() + else + @vote() toggleFollowing: (event) -> $elem = $(event.target) @@ -84,9 +94,8 @@ class @DiscussionThreadView extends DiscussionContentView type: "POST" vote: -> + window.user.vote(@model) url = @model.urlFor("upvote") - @model.set('votes_point', parseInt(@model.get('votes_point')) + 1) - #@$(".discussion-vote .votes-count-number").html(parseInt(@$(".discussion-vote .votes-count-number").html()) + 1) DiscussionUtil.safeAjax $elem: @$(".discussion-vote") url: url @@ -96,9 +105,8 @@ class @DiscussionThreadView extends DiscussionContentView @model.set(response) unvote: -> + window.user.unvote(@model) url = @model.urlFor("unvote") - @model.set('votes_point', parseInt(@model.get('votes_point')) - 1) - #@$(".discussion-vote .votes-count-number").html(parseInt(@$(".discussion-vote .votes-count-number").html()) - 1) DiscussionUtil.safeAjax $elem: @$(".discussion-vote") url: url diff --git a/lms/static/images/new-post-icons-full.png b/lms/static/images/new-post-icons-full.png new file mode 100644 index 0000000000..495273a7d3 Binary files /dev/null and b/lms/static/images/new-post-icons-full.png differ diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 0df6eceb85..9a0fddbcc8 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -55,12 +55,12 @@ @mixin discussion-wmd-preview { width: 100%; min-height: 40px; - padding: 10px; + padding: 25px 20px 10px 20px; box-sizing: border-box; border: 1px solid #aaa; border-top: none; border-radius: 0 0 3px 3px; - background: #eee; + background: #eee; color: #333; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; } @@ -82,7 +82,7 @@ .wmd-button-bar { width: 100%; - background-color: Silver; + background-color: Silver; } .wmd-input { @@ -129,25 +129,25 @@ } .wmd-button-row { - position: relative; + position: relative; margin-left: 5px; margin-right: 5px; margin-bottom: 5px; margin-top: 10px; - padding: 0px; + padding: 0px; height: 20px; overflow: hidden; @include transition(all, .2s, easeOut); } .wmd-spacer { - width: 1px; - height: 20px; + width: 1px; + height: 20px; margin-left: 14px; - + position: absolute; background-color: Silver; - display: inline-block; + display: inline-block; list-style: none; } @@ -301,7 +301,8 @@ body.discussion { border-top: 1px solid #5f5f5f; font-size: 14px; font-weight: 700; - color: #eee; + line-height: 18px; + color: #eee; &:hover { background-color: #666; @@ -332,7 +333,7 @@ body.discussion { width: 100%; height: 30px; padding: 0 15px; - box-sizing: border-box; + box-sizing: border-box; border-radius: 30px; border: 1px solid #333; box-shadow: 0 1px 3px rgba(0, 0, 0, .25) inset; @@ -350,6 +351,14 @@ body.discussion { padding: 40px; box-sizing: border-box; } + + .wmd-button { + background: none; + } + + .wmd-button span { + background: url(../images/new-post-icons-full.png) no-repeat; + } } .new-post-form { @@ -388,11 +397,11 @@ body.discussion { width: 100%; //height: 50px; margin-top: -1px; - padding: 10px; + padding: 25px 20px 10px 20px; box-sizing: border-box; border: 1px solid #333; border-radius: 0 0 3px 3px; - background: #e6e6e6; + background: #e6e6e6; color: #333; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; } @@ -400,10 +409,10 @@ body.discussion { .new-post-preview-label { position: absolute; top: 4px; - left: 4px; + left: 4px; font-size: 11px; color: #aaa; - text-transform: uppercase; + text-transform: uppercase; } .new-post-title, @@ -468,7 +477,7 @@ body.discussion { color: #333; background: #c5eeff; border: 1px solid #90c4d7; - font-size: 13px; + font-size: 13px; } .thread-title { @@ -478,7 +487,7 @@ body.discussion { color: #333; font-weight: 700; } - + @@ -567,7 +576,7 @@ body.discussion { height: 60px; border-bottom: 1px solid #a3a3a3; border-radius: 3px 0 0 0; - + .browse, .search { @@ -716,18 +725,24 @@ body.discussion { a { display: block; - height: 50px; padding: 0 20px; border-top: 1px solid #5f5f5f; font-size: 14px; font-weight: 700; - line-height: 48px; + line-height: 22px; color: #fff; + @include clearfix; &:hover { background-color: #636363; } + .board-name { + float: left; + width: 80%; + margin: 13px 0; + } + .unread { float: right; padding: 0 5px; @@ -762,7 +777,7 @@ body.discussion { width: 100%; height: 30px; padding: 0 15px; - box-sizing: border-box; + box-sizing: border-box; border-radius: 30px; border: 1px solid #333; box-shadow: 0 1px 3px rgba(0, 0, 0, .25) inset; @@ -929,7 +944,7 @@ body.discussion { box-shadow: 0 1px 0 #4697c1, 0 -1px 0 #4697c1; .title { - color: #333; + color: #333; } .votes-count, @@ -1077,7 +1092,7 @@ body.discussion { .responses { list-style: none; margin-top: 40px; - padding: 0; + padding: 0; > li { position: relative; @@ -1230,8 +1245,8 @@ body.discussion { background: #009FE2; font-size: 9px; font-weight: 700; - font-style: normal; - color: white; + font-style: normal; + color: white; text-transform: uppercase; } @@ -1386,7 +1401,7 @@ body.discussion { } #wmd-input { - @include discussion-wmd-input; + @include discussion-wmd-input; } #wmd-preview { @@ -1401,6 +1416,10 @@ body.discussion { @include blue-button; float: left; } + + .wmd-button { + width: 15px; + } } @@ -1418,7 +1437,53 @@ body.discussion { /* 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 { - .discussion-reply-new { - display:none + section.discussion { + /* Course content p has a default margin-bottom of 1.416, this is just to reset that */ + + .discussion-thread { + padding: 0.5em; + + p { + margin-bottom: 0em; + } + .discussion-article { + border: 1px solid; + border-radius: 3px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); + + .discussion-post { + header { + padding-bottom: 0.1em; + margin-bottom: 10px; + + } + .post-body { + font-size: 14px; + } + } + + .responses { + margin-top: 10px; + + header { + padding-bottom: 0em; + margin-bottom: 5px; + .posted-by { + font-size: 0.8em; + } + } + .response-body { + margin-bottom: 0.2em; + font-size: 14px; + } + + } + } + } } + + .discussion-reply-new { + display:none; + } + } diff --git a/lms/templates/discussion/_underscore_templates.html b/lms/templates/discussion/_underscore_templates.html index 64fca600e4..1a5fe6158d 100644 --- a/lms/templates/discussion/_underscore_templates.html +++ b/lms/templates/discussion/_underscore_templates.html @@ -3,7 +3,7 @@
- + ${'<%- votes["up_count"] %>'} + + ${'<%- votes["up_count"] %>'}

${'<%- title %>'}

${'<%- created_at %>'} by diff --git a/lms/templates/discussion/mustache/_inline_discussion.mustache b/lms/templates/discussion/mustache/_inline_discussion.mustache index eb8f12af43..f82b3810e5 100644 --- a/lms/templates/discussion/mustache/_inline_discussion.mustache +++ b/lms/templates/discussion/mustache/_inline_discussion.mustache @@ -1,6 +1,6 @@

{{#threads}} -
+
{{/threads}}