diff --git a/lms/static/coffee/src/discussion/views/new_post_view.coffee b/lms/static/coffee/src/discussion/views/new_post_view.coffee index fea87e4657..a60ddbe248 100644 --- a/lms/static/coffee/src/discussion/views/new_post_view.coffee +++ b/lms/static/coffee/src/discussion/views/new_post_view.coffee @@ -12,6 +12,9 @@ class @NewPostView extends Backbone.View @maxNameWidth = 100 @setSelectedTopic() + DiscussionUtil.makeWmdEditor @$el, $.proxy(@$, @), "new-post-body" + @$(".new-post-tags").tagsInput DiscussionUtil.tagsInputOptions() + events: "submit .new-post-form": "createPost" "click .topic_dropdown_button": "toggleTopicDropdown" @@ -69,7 +72,7 @@ class @NewPostView extends Backbone.View getNameWidth: (name) -> test = $("
") - test.css + test.css "font-size": @dropdownButton.css('font-size') opacity: 0 position: 'absolute' @@ -106,14 +109,14 @@ class @NewPostView extends Backbone.View createPost: (event) -> event.preventDefault() title = @$(".new-post-title").val() - body = @$(".new-post-body").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") - $formTopicDropBtn.bind('click', showFormTopicDrop); - $formTopicDropMenu.bind('click', setFormTopic); + $formTopicDropBtn.bind('click', showFormTopicDrop) + $formTopicDropMenu.bind('click', setFormTopic) url = DiscussionUtil.urlFor('create_thread', @topicId) diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 0d7453e5ad..6e92d8deed 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -37,7 +37,33 @@ } } +@mixin discussion-wmd-input { + width: 100%; + height: 240px; + margin-top: 0; + padding: 10px; + box-sizing: border-box; + border: 1px solid #aaa; + 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.15) inset; +} +@mixin discussion-wmd-preview { + width: 100%; + min-height: 40px; + padding: 10px; + box-sizing: border-box; + border: 1px solid #aaa; + border-top: none; + border-radius: 0 0 3px 3px; + background: #eee; + color: #333; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; +} @-webkit-keyframes fadeIn { 0% { opacity: 0; } @@ -47,6 +73,141 @@ +/*** base editor styles ***/ + +.wmd-panel { + width: 100%; + min-width: 500px; +} + +.wmd-button-bar { + width: 100%; + background-color: Silver; +} + +.wmd-input { + height: 150px; + width: 100%; + background-color: #e9e9e9; + border: 1px solid #c8c8c8; + font-family: Monaco, 'Lucida Console', monospace; + font-style: normal; + font-size: 0.8em; + line-height: 1.6em; + @include border-radius(3px 3px 0 0); + + &::-webkit-input-placeholder { + color: #888; + } +} + +.wmd-preview { + position: relative; + font-family: $sans-serif; + padding: 25px 20px 10px 20px; + margin-bottom: 5px; + box-sizing: border-box; + border: 1px solid #c8c8c8; + border-top-width: 0; + @include border-radius(0 0 3px 3px); + overflow: hidden; + @include transition(all, .2s, easeOut); + + &:before { + content: 'PREVIEW'; + position: absolute; + top: 3px; + left: 5px; + font-size: 11px; + color: #bbb; + } + + p { + font-family: $sans-serif; + } + background-color: #fafafa; +} + +.wmd-button-row { + position: relative; + margin-left: 5px; + margin-right: 5px; + margin-bottom: 5px; + margin-top: 10px; + padding: 0px; + height: 20px; + overflow: hidden; + @include transition(all, .2s, easeOut); +} + +.wmd-spacer { + width: 1px; + height: 20px; + margin-left: 14px; + + position: absolute; + background-color: Silver; + display: inline-block; + list-style: none; +} + +.wmd-button { + width: 20px; + height: 20px; + padding-left: 2px; + padding-right: 3px; + position: absolute; + display: inline-block; + list-style: none; + cursor: pointer; +} + +.wmd-button > span { + background-image: url('/static/images/wmd-buttons.png'); + background-repeat: no-repeat; + background-position: 0px 0px; + width: 20px; + height: 20px; + display: inline-block; +} + +.wmd-spacer1 { + left: 50px; +} +.wmd-spacer2 { + left: 175px; +} + +.wmd-spacer3 { + left: 300px; +} + +.wmd-prompt-background { + background-color: Black; +} + +.wmd-prompt-dialog { + border: 1px solid #999999; + background-color: #F5F5F5; +} + +.wmd-prompt-dialog > div { + font-size: 0.8em; + font-family: arial, helvetica, sans-serif; +} + + +.wmd-prompt-dialog > form > input[type="text"] { + border: 1px solid #999999; + color: black; +} + +.wmd-prompt-dialog > form > input[type="button"] { + border: 1px solid #888888; + font-family: trebuchet MS, helvetica, sans-serif; + font-size: 0.8em; + font-weight: bold; +} body.discussion { @@ -204,7 +365,8 @@ body.discussion { margin-bottom: 20px; } - .new-post-body { + .new-post-body .wmd-input { + @include discussion-wmd-input; position: relative; width: 100%; height: 200px; @@ -220,10 +382,11 @@ body.discussion { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; } - .new-post-preview { + .new-post-body .wmd-preview { + @include discussion-wmd-preview; position: relative; width: 100%; - height: 50px; + //height: 50px; margin-top: -1px; padding: 10px; box-sizing: border-box; @@ -1207,31 +1370,11 @@ body.discussion { } #wmd-input { - width: 100%; - height: 240px; - margin-top: 0; - padding: 10px; - box-sizing: border-box; - border: 1px solid #aaa; - 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.15) inset; + @include discussion-wmd-input; } #wmd-preview { - width: 100%; - min-height: 40px; - padding: 10px; - box-sizing: border-box; - border: 1px solid #aaa; - border-top: none; - border-radius: 0 0 3px 3px; - background: #eee; - color: #333; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; + @include discussion-wmd-preview; } .reply-post-control { diff --git a/lms/templates/discussion/_new_post.html b/lms/templates/discussion/_new_post.html index c5e4b41b0d..dde21c5a95 100644 --- a/lms/templates/discussion/_new_post.html +++ b/lms/templates/discussion/_new_post.html @@ -50,8 +50,8 @@
- -
Preview
+
+