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?
hideEditorChrome: ->
@$('.wmd-button-row').hide()
@$('.wmd-preview').hide()
@$('.wmd-preview-container').hide()
@$('.wmd-input').css({
height: '35px',
padding: '5px'
......@@ -44,7 +44,7 @@ if Backbone?
showEditorChrome: ->
@$('.wmd-button-row').show()
@$('.wmd-preview').show()
@$('.wmd-preview-container').show()
@$('.comment-post-control').show()
@$('.wmd-input').css({
height: '125px',
......
lms/static/coffee/src/customwmd.coffee
......@@ -132,11 +132,14 @@ $ ->
$elem.empty()
_append = appended_id || ""
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")
.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($("<div>").attr("id", "wmd-preview#{_append}").addClass("wmd-panel wmd-preview"))
.append($wmdPreviewContainer)
$elem.append($wmdPanel)
converter = Markdown.getMathCompatibleConverter(postProcessor)
......
lms/static/js/Markdown.Editor.js
......@@ -27,15 +27,15 @@
// The text that appears on the upper part of the dialog box when
// entering links.
var linkDialogText = "<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 linkDialogText = gettext("<p><b>Insert Hyperlink</b></p><p>http://example.com/ \"optional title\"</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
// links.
var imageDefaultText = "http://";
var linkDefaultText = "http://";
var defaultHelpHoverTitle = "Markdown Editing Help";
var defaultHelpHoverTitle = gettext("Markdown Editing Help");
// -------------------------------------------------------------------
// END OF YOUR CHANGES
......@@ -1444,33 +1444,33 @@
xPosition += 25;
}
buttons.bold = makeButton("wmd-bold-button", "Bold (Ctrl+B)", "0px", bindCommand("doBold"));
buttons.italic = makeButton("wmd-italic-button", "Italic (Ctrl+I)", "-20px", bindCommand("doItalic"));
buttons.bold = makeButton("wmd-bold-button", gettext("Bold (Ctrl+B)"), "0px", bindCommand("doBold"));
buttons.italic = makeButton("wmd-italic-button", gettext("Italic (Ctrl+I)"), "-20px", bindCommand("doItalic"));
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);
}));
buttons.quote = makeButton("wmd-quote-button", "Blockquote (Ctrl+Q)", "-60px", bindCommand("doBlockquote"));
buttons.code = makeButton("wmd-code-button", "Code Sample (Ctrl+K)", "-80px", bindCommand("doCode"));
buttons.image = makeButton("wmd-image-button", "Image (Ctrl+G)", "-100px", bindCommand(function (chunk, postProcessing) {
buttons.quote = makeButton("wmd-quote-button", gettext("Blockquote (Ctrl+Q)"), "-60px", bindCommand("doBlockquote"));
buttons.code = makeButton("wmd-code-button", gettext("Code Sample (Ctrl+K)"), "-80px", bindCommand("doCode"));
buttons.image = makeButton("wmd-image-button", gettext("Image (Ctrl+G)"), "-100px", bindCommand(function (chunk, postProcessing) {
return this.doLinkOrImage(chunk, postProcessing, true, imageUploadHandler);
}));
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);
}));
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);
}));
buttons.heading = makeButton("wmd-heading-button", "Heading (Ctrl+H)", "-160px", bindCommand("doHeading"));
buttons.hr = makeButton("wmd-hr-button", "Horizontal Rule (Ctrl+R)", "-180px", bindCommand("doHorizontalRule"));
buttons.heading = makeButton("wmd-heading-button", gettext("Heading (Ctrl+H)"), "-160px", bindCommand("doHeading"));
buttons.hr = makeButton("wmd-hr-button", gettext("Horizontal Rule (Ctrl+R)"), "-180px", bindCommand("doHorizontalRule"));
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(); };
var redoTitle = /win/.test(nav.platform.toLowerCase()) ?
"Redo (Ctrl+Y)" :
"Redo (Ctrl+Shift+Z)"; // mac and other non-Windows platforms
gettext("Redo (Ctrl+Y)") :
gettext("Redo (Ctrl+Shift+Z)"); // mac and other non-Windows platforms
buttons.redo = makeButton("wmd-redo-button", redoTitle, "-220px", null);
buttons.redo.execute = function (manager) { if (manager) manager.redo(); };
......@@ -1537,11 +1537,11 @@
};
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) {
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 */**
......@@ -1744,10 +1744,10 @@
if (!chunk.selection) {
if (isImage) {
chunk.selection = "enter image description here";
chunk.selection = gettext("enter image description here");
}
else {
chunk.selection = "enter link description here";
chunk.selection = gettext("enter link description here");
}
}
}
......@@ -1828,7 +1828,7 @@
});
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
// text *directly before* the selection already was a blockquote:
......@@ -1985,7 +1985,7 @@
if (!chunk.selection) {
chunk.startTag = " ";
chunk.selection = "enter code here";
chunk.selection = gettext("enter code here");
}
else {
if (/^[ ]{0,3}\S/m.test(chunk.selection)) {
......@@ -2008,7 +2008,7 @@
if (!chunk.startTag && !chunk.endTag) {
chunk.startTag = chunk.endTag = "`";
if (!chunk.selection) {
chunk.selection = "enter code here";
chunk.selection = gettext("enter code here");
}
}
else if (chunk.endTag && !chunk.startTag) {
......@@ -2102,7 +2102,7 @@
});
if (!chunk.selection) {
chunk.selection = "List item";
chunk.selection = gettext("List item");
}
var prefix = getItemPrefix();
......@@ -2134,7 +2134,7 @@
// make a level 2 hash header around some default text.
if (!chunk.selection) {
chunk.startTag = "## ";
chunk.selection = "Heading";
chunk.selection = gettext("Heading");
chunk.endTag = " ##";
return;
}
......
lms/static/sass/_discussion.scss
......@@ -71,19 +71,37 @@
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
}
@mixin discussion-wmd-preview {
@mixin discussion-wmd-preview-container {
width: 100%;
min-height: 40px;
padding: 25px 20px 10px 20px;
@include 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;
}
@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 {
0% { opacity: 0.0; }
100% { opacity: 1.0; }
......@@ -354,28 +372,16 @@ body.discussion {
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;
@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-body .wmd-preview-container {
@include discussion-new-post-wmd-preview-container;
}
.new-post-preview-label {
position: absolute;
top: 4px;
left: 4px;
color: #aaa;
text-transform: uppercase;
font-size: 11px;
.new-post-body .wmd-preview-label {
@include discussion-wmd-preview-label;
}
.new-post-body .wmd-preview {
@include discussion-wmd-preview;
}
.new-post-title {
......@@ -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 {
@include transition(all .2s ease-out 0s);
position: relative;
......@@ -1822,6 +1801,14 @@ body.discussion {
@include discussion-wmd-input;
}
.wmd-preview-container {
@include discussion-wmd-preview-container;
}
.wmd-preview-label {
@include discussion-wmd-preview-label;
}
.wmd-preview {
@include discussion-wmd-preview;
}
......@@ -2102,28 +2089,16 @@ body.discussion {
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 $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-body .wmd-preview-container {
@include discussion-new-post-wmd-preview-container;
}
.new-post-preview-label {
position: absolute;
top: 4px;
left: 4px;
font-size: 11px;
color: #aaa;
text-transform: uppercase;
.new-post-body .wmd-preview-label {
@include discussion-wmd-preview-label;
}
.new-post-body .wmd-preview {
@include discussion-wmd-preview;
}
.new-post-title{
......@@ -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 {
position: relative;
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