Skip to content

E
edx-platform
Commit 27d2c8e9 by Greg Price
Options

Merge pull request #2201 from edx/gprice/markdown-editor-i18n 

Internationalize the forums post Markdown editor
parents 6a1cc15d f8732a8b
Showing with 78 additions and 127 deletions
common/static/coffee/src/discussion/views/thread_response_view.coffee
...@@ -35,7 +35,7 @@ if Backbone? ...@@ -35,7 +35,7 @@ if Backbone?
hideEditorChrome: -> hideEditorChrome: ->
@$('.wmd-button-row').hide() @$('.wmd-button-row').hide()
@$('.wmd-preview').hide() @$('.wmd-preview-container').hide()
@$('.wmd-input').css({ @$('.wmd-input').css({
height: '35px', height: '35px',
padding: '5px' padding: '5px'
...@@ -44,7 +44,7 @@ if Backbone? ...@@ -44,7 +44,7 @@ if Backbone?
showEditorChrome: -> showEditorChrome: ->
@$('.wmd-button-row').show() @$('.wmd-button-row').show()
@$('.wmd-preview').show() @$('.wmd-preview-container').show()
@$('.comment-post-control').show() @$('.comment-post-control').show()
@$('.wmd-input').css({ @$('.wmd-input').css({
height: '125px', height: '125px',
......
lms/static/coffee/src/customwmd.coffee
...@@ -132,11 +132,14 @@ $ -> ...@@ -132,11 +132,14 @@ $ ->
$elem.empty() $elem.empty()
_append = appended_id || "" _append = appended_id || ""
wmdInputId = "wmd-input#{_append}" wmdInputId = "wmd-input#{_append}"
$wmdPreviewContainer = $("<div>").addClass("wmd-preview-container")
.append($("<div>").addClass("wmd-preview-label").text(gettext("Preview")))
.append($("<div>").attr("id", "wmd-preview#{_append}").addClass("wmd-panel wmd-preview"))
$wmdPanel = $("<div>").addClass("wmd-panel") $wmdPanel = $("<div>").addClass("wmd-panel")
.append($("<div>").attr("id", "wmd-button-bar#{_append}")) .append($("<div>").attr("id", "wmd-button-bar#{_append}"))
.append($("<label>").addClass("sr").attr("for", wmdInputId).text("Post body")) .append($("<label>").addClass("sr").attr("for", wmdInputId).text(gettext("Post body")))
.append($("<textarea>").addClass("wmd-input").attr("id", wmdInputId).html(initialText)) .append($("<textarea>").addClass("wmd-input").attr("id", wmdInputId).html(initialText))
.append($("<div>").attr("id", "wmd-preview#{_append}").addClass("wmd-panel wmd-preview")) .append($wmdPreviewContainer)
$elem.append($wmdPanel) $elem.append($wmdPanel)
converter = Markdown.getMathCompatibleConverter(postProcessor) converter = Markdown.getMathCompatibleConverter(postProcessor)
......
lms/static/js/Markdown.Editor.js
...@@ -27,15 +27,15 @@ ...@@ -27,15 +27,15 @@
// The text that appears on the upper part of the dialog box when // The text that appears on the upper part of the dialog box when
// entering links. // entering links.
var linkDialogText = "<p><b>Insert Hyperlink</b></p><p>http://example.com/ \"optional title\"</p>"; var linkDialogText = gettext("<p><b>Insert Hyperlink</b></p><p>http://example.com/ \"optional title\"</p>");
var imageDialogText = "<p><b>Insert Image (upload file or type url)</b></p><p>http://example.com/images/diagram.jpg \"optional title\"<br><br></p>"; var imageDialogText = gettext("<p><b>Insert Image (upload file or type url)</b></p><p>http://example.com/images/diagram.jpg \"optional title\"<br><br></p>");
// The default text that appears in the dialog input box when entering // The default text that appears in the dialog input box when entering
// links. // links.
var imageDefaultText = "http://"; var imageDefaultText = "http://";
var linkDefaultText = "http://"; var linkDefaultText = "http://";
var defaultHelpHoverTitle = "Markdown Editing Help"; var defaultHelpHoverTitle = gettext("Markdown Editing Help");
// ------------------------------------------------------------------- // -------------------------------------------------------------------
// END OF YOUR CHANGES // END OF YOUR CHANGES
...@@ -1444,33 +1444,33 @@ ...@@ -1444,33 +1444,33 @@
xPosition += 25; xPosition += 25;
} }
buttons.bold = makeButton("wmd-bold-button", "Bold (Ctrl+B)", "0px", bindCommand("doBold")); buttons.bold = makeButton("wmd-bold-button", gettext("Bold (Ctrl+B)"), "0px", bindCommand("doBold"));
buttons.italic = makeButton("wmd-italic-button", "Italic (Ctrl+I)", "-20px", bindCommand("doItalic")); buttons.italic = makeButton("wmd-italic-button", gettext("Italic (Ctrl+I)"), "-20px", bindCommand("doItalic"));
makeSpacer(1); makeSpacer(1);
buttons.link = makeButton("wmd-link-button", "Hyperlink (Ctrl+L)", "-40px", bindCommand(function (chunk, postProcessing) { buttons.link = makeButton("wmd-link-button", gettext("Hyperlink (Ctrl+L)"), "-40px", bindCommand(function (chunk, postProcessing) {
return this.doLinkOrImage(chunk, postProcessing, false); return this.doLinkOrImage(chunk, postProcessing, false);
})); }));
buttons.quote = makeButton("wmd-quote-button", "Blockquote (Ctrl+Q)", "-60px", bindCommand("doBlockquote")); buttons.quote = makeButton("wmd-quote-button", gettext("Blockquote (Ctrl+Q)"), "-60px", bindCommand("doBlockquote"));
buttons.code = makeButton("wmd-code-button", "Code Sample (Ctrl+K)", "-80px", bindCommand("doCode")); buttons.code = makeButton("wmd-code-button", gettext("Code Sample (Ctrl+K)"), "-80px", bindCommand("doCode"));
buttons.image = makeButton("wmd-image-button", "Image (Ctrl+G)", "-100px", bindCommand(function (chunk, postProcessing) { buttons.image = makeButton("wmd-image-button", gettext("Image (Ctrl+G)"), "-100px", bindCommand(function (chunk, postProcessing) {
return this.doLinkOrImage(chunk, postProcessing, true, imageUploadHandler); return this.doLinkOrImage(chunk, postProcessing, true, imageUploadHandler);
})); }));
makeSpacer(2); makeSpacer(2);
buttons.olist = makeButton("wmd-olist-button", "Numbered List (Ctrl+O)", "-120px", bindCommand(function (chunk, postProcessing) { buttons.olist = makeButton("wmd-olist-button", gettext("Numbered List (Ctrl+O)"), "-120px", bindCommand(function (chunk, postProcessing) {
this.doList(chunk, postProcessing, true); this.doList(chunk, postProcessing, true);
})); }));
buttons.ulist = makeButton("wmd-ulist-button", "Bulleted List (Ctrl+U)", "-140px", bindCommand(function (chunk, postProcessing) { buttons.ulist = makeButton("wmd-ulist-button", gettext("Bulleted List (Ctrl+U)"), "-140px", bindCommand(function (chunk, postProcessing) {
this.doList(chunk, postProcessing, false); this.doList(chunk, postProcessing, false);
})); }));
buttons.heading = makeButton("wmd-heading-button", "Heading (Ctrl+H)", "-160px", bindCommand("doHeading")); buttons.heading = makeButton("wmd-heading-button", gettext("Heading (Ctrl+H)"), "-160px", bindCommand("doHeading"));
buttons.hr = makeButton("wmd-hr-button", "Horizontal Rule (Ctrl+R)", "-180px", bindCommand("doHorizontalRule")); buttons.hr = makeButton("wmd-hr-button", gettext("Horizontal Rule (Ctrl+R)"), "-180px", bindCommand("doHorizontalRule"));
makeSpacer(3); makeSpacer(3);
buttons.undo = makeButton("wmd-undo-button", "Undo (Ctrl+Z)", "-200px", null); buttons.undo = makeButton("wmd-undo-button", gettext("Undo (Ctrl+Z)"), "-200px", null);
buttons.undo.execute = function (manager) { if (manager) manager.undo(); }; buttons.undo.execute = function (manager) { if (manager) manager.undo(); };
var redoTitle = /win/.test(nav.platform.toLowerCase()) ? var redoTitle = /win/.test(nav.platform.toLowerCase()) ?
"Redo (Ctrl+Y)" : gettext("Redo (Ctrl+Y)") :
"Redo (Ctrl+Shift+Z)"; // mac and other non-Windows platforms gettext("Redo (Ctrl+Shift+Z)"); // mac and other non-Windows platforms
buttons.redo = makeButton("wmd-redo-button", redoTitle, "-220px", null); buttons.redo = makeButton("wmd-redo-button", redoTitle, "-220px", null);
buttons.redo.execute = function (manager) { if (manager) manager.redo(); }; buttons.redo.execute = function (manager) { if (manager) manager.redo(); };
...@@ -1537,11 +1537,11 @@ ...@@ -1537,11 +1537,11 @@
}; };
commandProto.doBold = function (chunk, postProcessing) { commandProto.doBold = function (chunk, postProcessing) {
return this.doBorI(chunk, postProcessing, 2, "strong text"); return this.doBorI(chunk, postProcessing, 2, gettext("strong text"));
}; };
commandProto.doItalic = function (chunk, postProcessing) { commandProto.doItalic = function (chunk, postProcessing) {
return this.doBorI(chunk, postProcessing, 1, "emphasized text"); return this.doBorI(chunk, postProcessing, 1, gettext("emphasized text"));
}; };
// chunk: The selected region that will be enclosed with */** // chunk: The selected region that will be enclosed with */**
...@@ -1744,10 +1744,10 @@ ...@@ -1744,10 +1744,10 @@
if (!chunk.selection) { if (!chunk.selection) {
if (isImage) { if (isImage) {
chunk.selection = "enter image description here"; chunk.selection = gettext("enter image description here");
} }
else { else {
chunk.selection = "enter link description here"; chunk.selection = gettext("enter link description here");
} }
} }
} }
...@@ -1828,7 +1828,7 @@ ...@@ -1828,7 +1828,7 @@
}); });
chunk.selection = chunk.selection.replace(/^(\s|>)+$/, ""); chunk.selection = chunk.selection.replace(/^(\s|>)+$/, "");
chunk.selection = chunk.selection || "Blockquote"; chunk.selection = chunk.selection || gettext("Blockquote");
// The original code uses a regular expression to find out how much of the // The original code uses a regular expression to find out how much of the
// text *directly before* the selection already was a blockquote: // text *directly before* the selection already was a blockquote:
...@@ -1985,7 +1985,7 @@ ...@@ -1985,7 +1985,7 @@
if (!chunk.selection) { if (!chunk.selection) {
chunk.startTag = " "; chunk.startTag = " ";
chunk.selection = "enter code here"; chunk.selection = gettext("enter code here");
} }
else { else {
if (/^[ ]{0,3}\S/m.test(chunk.selection)) { if (/^[ ]{0,3}\S/m.test(chunk.selection)) {
...@@ -2008,7 +2008,7 @@ ...@@ -2008,7 +2008,7 @@
if (!chunk.startTag && !chunk.endTag) { if (!chunk.startTag && !chunk.endTag) {
chunk.startTag = chunk.endTag = "`"; chunk.startTag = chunk.endTag = "`";
if (!chunk.selection) { if (!chunk.selection) {
chunk.selection = "enter code here"; chunk.selection = gettext("enter code here");
} }
} }
else if (chunk.endTag && !chunk.startTag) { else if (chunk.endTag && !chunk.startTag) {
...@@ -2102,7 +2102,7 @@ ...@@ -2102,7 +2102,7 @@
}); });
if (!chunk.selection) { if (!chunk.selection) {
chunk.selection = "List item"; chunk.selection = gettext("List item");
} }
var prefix = getItemPrefix(); var prefix = getItemPrefix();
...@@ -2134,7 +2134,7 @@ ...@@ -2134,7 +2134,7 @@
// make a level 2 hash header around some default text. // make a level 2 hash header around some default text.
if (!chunk.selection) { if (!chunk.selection) {
chunk.startTag = "## "; chunk.startTag = "## ";
chunk.selection = "Heading"; chunk.selection = gettext("Heading");
chunk.endTag = " ##"; chunk.endTag = " ##";
return; return;
} }
......
lms/static/sass/_discussion.scss
...@@ -71,19 +71,37 @@ ...@@ -71,19 +71,37 @@
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
} }
@mixin discussion-wmd-preview { @mixin discussion-wmd-preview-container {
width: 100%; width: 100%;
min-height: 40px;
padding: 25px 20px 10px 20px;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #aaa; border: 1px solid #aaa;
border-top: none; border-top: none;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
background: #eee; background: #eee;
color: #333;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
} }
@mixin discussion-new-post-wmd-preview-container {
@include discussion-wmd-preview-container;
border-color: #333;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
}
@mixin discussion-wmd-preview-label {
width: 100%;
padding-top: 3px;
padding-left: 5px;
color: #bbb;
font-size: 11px;
text-transform: uppercase;
}
@mixin discussion-wmd-preview {
width: 100%;
padding: 10px 20px;
color: #333;
}
@-webkit-keyframes fadeIn { @-webkit-keyframes fadeIn {
0% { opacity: 0.0; } 0% { opacity: 0.0; }
100% { opacity: 1.0; } 100% { opacity: 1.0; }
...@@ -354,28 +372,16 @@ body.discussion { ...@@ -354,28 +372,16 @@ body.discussion {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
} }
.new-post-body .wmd-preview { .new-post-body .wmd-preview-container {
@include discussion-wmd-preview; @include discussion-new-post-wmd-preview-container;
position: relative;
width: 100%;
//height: 50px;
margin-top: -1px;
padding: 25px 20px 10px 20px;
@include 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 { .new-post-body .wmd-preview-label {
position: absolute; @include discussion-wmd-preview-label;
top: 4px; }
left: 4px;
color: #aaa; .new-post-body .wmd-preview {
text-transform: uppercase; @include discussion-wmd-preview;
font-size: 11px;
} }
.new-post-title { .new-post-title {
...@@ -501,33 +507,6 @@ body.discussion { ...@@ -501,33 +507,6 @@ body.discussion {
} }
} }
.wmd-preview {
@include box-sizing(border-box);
@include transition(all .2s ease-out 0s);
position: relative;
overflow: hidden;
margin-bottom: 5px;
padding: 25px $baseline $baseline/2 $baseline;
border: 1px solid #c8c8c8;
border-top-width: 0;
border-radius: 0 0 3px 3px;
font-family: $sans-serif;
&: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 { .wmd-button-row {
@include transition(all .2s ease-out 0s); @include transition(all .2s ease-out 0s);
position: relative; position: relative;
...@@ -1822,6 +1801,14 @@ body.discussion { ...@@ -1822,6 +1801,14 @@ body.discussion {
@include discussion-wmd-input; @include discussion-wmd-input;
} }
.wmd-preview-container {
@include discussion-wmd-preview-container;
}
.wmd-preview-label {
@include discussion-wmd-preview-label;
}
.wmd-preview { .wmd-preview {
@include discussion-wmd-preview; @include discussion-wmd-preview;
} }
...@@ -2102,28 +2089,16 @@ body.discussion { ...@@ -2102,28 +2089,16 @@ body.discussion {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
} }
.new-post-body .wmd-preview { .new-post-body .wmd-preview-container {
@include discussion-wmd-preview; @include discussion-new-post-wmd-preview-container;
position: relative;
width: 100%;
//height: 50px;
margin-top: -1px;
padding: 25px $baseline $baseline/2 $baseline;
@include 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 { .new-post-body .wmd-preview-label {
position: absolute; @include discussion-wmd-preview-label;
top: 4px; }
left: 4px;
font-size: 11px; .new-post-body .wmd-preview {
color: #aaa; @include discussion-wmd-preview;
text-transform: uppercase;
} }
.new-post-title{ .new-post-title{
...@@ -2262,33 +2237,6 @@ body.discussion { ...@@ -2262,33 +2237,6 @@ body.discussion {
} }
} }
.wmd-preview {
position: relative;
font-family: $sans-serif;
padding: 25px $baseline $baseline/2 $baseline;
margin-bottom: 5px;
@include box-sizing(border-box);
border: 1px solid #c8c8c8;
border-top-width: 0;
border-radius: 0 0 3px 3px;
overflow: hidden;
@include transition(all .2s ease-out 0s);
&: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 { .wmd-button-row {
position: relative; position: relative;
margin-left: 5px; margin-left: 5px;
......
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