Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Internationalize the forums post Markdown editor

Browse Source 
This includes removing the "PREVIEW" label for the preview pane from CSS
and adding it to the generated DOM.
This commit is contained in:
Greg Price
2014-01-16 14:03:48 -05:00
parent 9075dcefb6
commit f8732a8b3d
4 changed files with 78 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
common/static/coffee/src/discussion/views/thread_response_view.coffee
View File

@@ -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',

7
lms/static/coffee/src/customwmd.coffee
View File

@@ -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)

50
lms/static/js/Markdown.Editor.js
View File

@@ -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;
}

144
lms/static/sass/_discussion.scss
View File

@@ -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;