r105937 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r105936‎ | r105937 | r105938 >
Date:22:09, 12 December 2011
Author:tparscal
Status:deferred (Comments)
Tags:
Comment:
Added help view with keyboard shortcut info
Modified paths:
  • /trunk/extensions/VisualEditor/SpecialVisualEditorSandbox.php (modified) (history)
  • /trunk/extensions/VisualEditor/VisualEditor.i18n.php (modified) (history)
  • /trunk/extensions/VisualEditor/demo/index.html (modified) (history)
  • /trunk/extensions/VisualEditor/modules/es/images/help.png (added) (history)
  • /trunk/extensions/VisualEditor/modules/sandbox/sandbox.css (modified) (history)
  • /trunk/extensions/VisualEditor/modules/sandbox/sandbox.js (modified) (history)

Diff [purge]

Index: trunk/extensions/VisualEditor/SpecialVisualEditorSandbox.php
——@@ -25,6 +25,7 @@
2626 $modeHtml = wfMsgHtml( 'visualeditor-tooltip-html' );
2727 $modeRender = wfMsgHtml( 'visualeditor-tooltip-render' );
2828 $modeHistory = wfMsgHtml( 'visualeditor-tooltip-history' );
 29+ $modeHelp = wfMsgHtml( 'visualeditor-tooltip-help' );
2930 $out = <<<HTML
3031 <!-- VisualEditor Sandbox -->
3132 <div id="es-docs">
——@@ -39,6 +40,7 @@
4041 <div id="es-mode-html" class="es-modes-button" title="$modeHtml"></div>
4142 <div id="es-mode-render" class="es-modes-button" title="$modeRender"></div>
4243 <div id="es-mode-history" class="es-modes-button" title="$modeHistory"></div>
 44+ <div id="es-mode-help" class="es-modes-button" title="$modeHelp"></div>
4345 </div>
4446 <div style="clear:both"></div>
4547 <div id="es-toolbar-shadow"></div>
——@@ -53,6 +55,99 @@
5456 <div id="es-panel-html" class="es-panel es-code"></div>
5557 <div id="es-panel-render" class="es-panel es-render"></div>
5658 <div id="es-panel-history" class="es-panel es-code"></div>
 59+ <div id="es-panel-help" class="es-panel">
 60+ <div class="es-help-title">Keyboard Shortcuts</div>
 61+ <div class="es-help-shortcuts-title">Clipboard</div>
 62+ <div class="es-help-shortcut">
 63+ <span class="es-help-keys">
 64+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 65+ <span class="es-help-key">C</span>
 66+ </span>
 67+ Copy selected text
 68+ </div>
 69+ <div class="es-help-shortcut">
 70+ <span class="es-help-keys">
 71+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 72+ <span class="es-help-key">X</span>
 73+ </span>
 74+ Cut selected text
 75+ </div>
 76+ <div class="es-help-shortcut">
 77+ <span class="es-help-keys">
 78+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 79+ <span class="es-help-key">V</span>
 80+ </span>
 81+ Paste text at the cursor
 82+ </div>
 83+ <div class="es-help-shortcuts-title">History navigation</div>
 84+ <div class="es-help-shortcut">
 85+ <span class="es-help-keys">
 86+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 87+ <span class="es-help-key">Z</span>
 88+ </span>
 89+ Undo
 90+ </div>
 91+ <div class="es-help-shortcut">
 92+ <span class="es-help-keys">
 93+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 94+ <span class="es-help-key">Y</span>
 95+ </span>
 96+ Redo
 97+ </div>
 98+ <div class="es-help-shortcut">
 99+ <span class="es-help-keys">
 100+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 101+ <span class="es-help-key">&#8679;</span> +
 102+ <span class="es-help-key">Z</span>
 103+ </span>
 104+ Redo
 105+ </div>
 106+ <div class="es-help-shortcuts-title">Formatting</div>
 107+ <div class="es-help-shortcut">
 108+ <span class="es-help-keys">
 109+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 110+ <span class="es-help-key">B</span>
 111+ </span>
 112+ Make selected text bold
 113+ </div>
 114+ <div class="es-help-shortcut">
 115+ <span class="es-help-keys">
 116+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 117+ <span class="es-help-key">I</span>
 118+ </span>
 119+ Make selected text italic
 120+ </div>
 121+ <div class="es-help-shortcut">
 122+ <span class="es-help-keys">
 123+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 124+ <span class="es-help-key">K</span>
 125+ </span>
 126+ Make selected text a link
 127+ </div>
 128+ <div class="es-help-shortcuts-title">Selection</div>
 129+ <div class="es-help-shortcut">
 130+ <span class="es-help-keys">
 131+ <span class="es-help-key">&#8679;</span> +
 132+ <span class="es-help-key">Arrow</span>
 133+ </span>
 134+ Adjust selection
 135+ </div>
 136+ <div class="es-help-shortcut">
 137+ <span class="es-help-keys">
 138+ <span class="es-help-key">Alt</span> +
 139+ <span class="es-help-key">Arrow</span>
 140+ </span>
 141+ Move cursor by words or blocks
 142+ </div>
 143+ <div class="es-help-shortcut">
 144+ <span class="es-help-keys">
 145+ <span class="es-help-key">Alt</span> +
 146+ <span class="es-help-key">&#8679;</span> +
 147+ <span class="es-help-key">Arrow</span>
 148+ </span>
 149+ Adjust selection by words or blocks
 150+ </div>
 151+ </div>
57152 </div>
58153 <div style="clear:both"></div>
59154 </div>
Index: trunk/extensions/VisualEditor/demo/index.html
——@@ -72,11 +72,12 @@
7373 <div id="es-base">
7474 <div id="es-toolbar" class="es-toolbar">
7575 <div id="es-modes" class="es-modes">
76 - <div id="es-mode-wikitext" class="es-modes-button"></div>
77 - <div id="es-mode-json" class="es-modes-button"></div>
78 - <div id="es-mode-html" class="es-modes-button"></div>
79 - <div id="es-mode-render" class="es-modes-button"></div>
80 - <div id="es-mode-history" class="es-modes-button"></div>
 76+ <div id="es-mode-wikitext" class="es-modes-button" title="Toggle wikitext view"></div>
 77+ <div id="es-mode-json" class="es-modes-button" title="Toggle JSON view"></div>
 78+ <div id="es-mode-html" class="es-modes-button" title="Toggle HTML view"></div>
 79+ <div id="es-mode-render" class="es-modes-button" title="Toggle preview"></div>
 80+ <div id="es-mode-history" class="es-modes-button" title="Toggle transaction history view"></div>
 81+ <div id="es-mode-help" class="es-modes-button" title="Toggle help view"></div>
8182 </div>
8283 <div style="clear:both"></div>
8384 <div id="es-toolbar-shadow"></div>
——@@ -91,6 +92,99 @@
9293 <div id="es-panel-html" class="es-panel es-code"></div>
9394 <div id="es-panel-render" class="es-panel es-render"></div>
9495 <div id="es-panel-history" class="es-panel es-code"></div>
 96+ <div id="es-panel-help" class="es-panel">
 97+ <div class="es-help-title">Keyboard Shortcuts</div>
 98+ <div class="es-help-shortcuts-title">Clipboard</div>
 99+ <div class="es-help-shortcut">
 100+ <span class="es-help-keys">
 101+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 102+ <span class="es-help-key">C</span>
 103+ </span>
 104+ Copy selected text
 105+ </div>
 106+ <div class="es-help-shortcut">
 107+ <span class="es-help-keys">
 108+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 109+ <span class="es-help-key">X</span>
 110+ </span>
 111+ Cut selected text
 112+ </div>
 113+ <div class="es-help-shortcut">
 114+ <span class="es-help-keys">
 115+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 116+ <span class="es-help-key">V</span>
 117+ </span>
 118+ Paste text at the cursor
 119+ </div>
 120+ <div class="es-help-shortcuts-title">History navigation</div>
 121+ <div class="es-help-shortcut">
 122+ <span class="es-help-keys">
 123+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 124+ <span class="es-help-key">Z</span>
 125+ </span>
 126+ Undo
 127+ </div>
 128+ <div class="es-help-shortcut">
 129+ <span class="es-help-keys">
 130+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 131+ <span class="es-help-key">Y</span>
 132+ </span>
 133+ Redo
 134+ </div>
 135+ <div class="es-help-shortcut">
 136+ <span class="es-help-keys">
 137+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 138+ <span class="es-help-key">&#8679;</span> +
 139+ <span class="es-help-key">Z</span>
 140+ </span>
 141+ Redo
 142+ </div>
 143+ <div class="es-help-shortcuts-title">Formatting</div>
 144+ <div class="es-help-shortcut">
 145+ <span class="es-help-keys">
 146+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 147+ <span class="es-help-key">B</span>
 148+ </span>
 149+ Make selected text bold
 150+ </div>
 151+ <div class="es-help-shortcut">
 152+ <span class="es-help-keys">
 153+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 154+ <span class="es-help-key">I</span>
 155+ </span>
 156+ Make selected text italic
 157+ </div>
 158+ <div class="es-help-shortcut">
 159+ <span class="es-help-keys">
 160+ <span class="es-help-key">Ctl <span class="es-help-key-or">or</span> &#8984;</span> +
 161+ <span class="es-help-key">K</span>
 162+ </span>
 163+ Make selected text a link
 164+ </div>
 165+ <div class="es-help-shortcuts-title">Selection</div>
 166+ <div class="es-help-shortcut">
 167+ <span class="es-help-keys">
 168+ <span class="es-help-key">&#8679;</span> +
 169+ <span class="es-help-key">Arrow</span>
 170+ </span>
 171+ Adjust selection
 172+ </div>
 173+ <div class="es-help-shortcut">
 174+ <span class="es-help-keys">
 175+ <span class="es-help-key">Alt</span> +
 176+ <span class="es-help-key">Arrow</span>
 177+ </span>
 178+ Move cursor by words or blocks
 179+ </div>
 180+ <div class="es-help-shortcut">
 181+ <span class="es-help-keys">
 182+ <span class="es-help-key">Alt</span> +
 183+ <span class="es-help-key">&#8679;</span> +
 184+ <span class="es-help-key">Arrow</span>
 185+ </span>
 186+ Adjust selection by words or blocks
 187+ </div>
 188+ </div>
95189 </div>
96190 <div style="clear:both"></div>
97191 </div>
Index: trunk/extensions/VisualEditor/modules/es/images/help.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/VisualEditor/modules/es/images/help.png
___________________________________________________________________
Added: svn:mime-type
98192 + application/octet-stream
Index: trunk/extensions/VisualEditor/modules/sandbox/sandbox.css
——@@ -170,6 +170,10 @@
171171 background-image: url(../es/images/history.png);
172172 }
173173
 174+#es-mode-help:before {
 175+ background-image: url(../es/images/help.png);
 176+}
 177+
174178 #es-panel-history div {
175179 border-bottom: solid 1px #dddddd;
176180 padding: 0.5em 0;
——@@ -203,3 +207,47 @@
204208 padding: 0;
205209 display: inline-block;
206210 }
 211+
 212+.es-help-title {
 213+ font-size: 1.5em;
 214+}
 215+
 216+.es-help-shortcuts-title {
 217+ margin: 1em 0 0.5em 0;
 218+ padding: 0;
 219+ font-size: 1.25em;
 220+}
 221+
 222+.es-help-shortcut {
 223+ margin-bottom: 1em;
 224+ font-size: 0.8em;
 225+}
 226+
 227+.es-help-keys {
 228+ display: inline-block;
 229+ margin-right: 0.5em;
 230+}
 231+
 232+.es-help-key {
 233+ display: inline-block;
 234+ padding: 0.33em 0.5em;
 235+ min-width: 1em;
 236+ text-align: center;
 237+ cursor: default;
 238+ border: solid 1px #333333;
 239+ border-top-color: #666666;
 240+ border-bottom-color: #000000;
 241+ background-color: #333333;
 242+ color: #ffffff;
 243+ -webkit-border-radius: 0.25em;
 244+ -moz-border-radius: 0.25em;
 245+ -o-border-radius: 0.25em;
 246+ border-radius: 0.25em;
 247+ -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.5);
 248+ -moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.5);
 249+ box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.5);
 250+}
 251+
 252+.es-help-key-or {
 253+ color: #999999;
 254+}
Index: trunk/extensions/VisualEditor/modules/sandbox/sandbox.js
——@@ -552,6 +552,11 @@
553553 }
554554 this.$panel.html( events );
555555 }
 556+ },
 557+ 'help': {
 558+ '$': $( '#es-mode-help' ),
 559+ '$panel': $( '#es-panel-help' ),
 560+ 'update': function() {}
556561 }
557562 };
558563 $.each( modes, function( name, mode ) {
Index: trunk/extensions/VisualEditor/VisualEditor.i18n.php
——@@ -14,6 +14,7 @@
1515 'visualeditor-tooltip-html' => 'Toggle HTML view',
1616 'visualeditor-tooltip-render' => 'Toggle preview',
1717 'visualeditor-tooltip-history' => 'Toggle transaction history view',
 18+ 'visualeditor-tooltip-help' => 'Toggle help view',
1819 );
1920
2021 /** Message documentation

Comments

#Comment by Eloquence (talk | contribs)   02:50, 13 December 2011

The new help panel is cool, but it loads as an initial flash of unstyled content (the keyboard shortcuts) both in Chrome and FF for me. Would be nice if we could prevent that.

#Comment by NeilK (talk | contribs)   04:12, 13 December 2011

fixed in r105977

Status & tagging log