Permalink
Browse files

Merge pull request #400 from markhop/shortcut_keys

Shortcut keys
  • Loading branch information...
2 parents 6e1b19b + e8651e8 commit cc4d8816454cc7c9d3a1ba1654aace97e0b4d86f @amolenaar amolenaar committed Feb 11, 2014
@@ -4,3 +4,7 @@ Some of the buttons on the wiki page have shortcut keys. These may or may not w
|'''Test'''|''ALT-t''|
|'''Search'''|''ALT-s''|
|'''Versions'''|''ALT-v''|
+
+Due to the above shortcut keys not working on most browsers a set of more modern shortcut keys have been provided. Pressing ? on any normal wiki page (not the edit page, etc.) will bring up a modal dialog showing the standard set of shortcut keys.
+
+!img http://files/fitnesse/images/keyboard_shortcuts.png
@@ -1,7 +1,6 @@
<?xml version="1.0"?>
<properties>
<Files/>
- <LastModified>20090228113824</LastModified>
<Properties/>
<RecentChanges>true</RecentChanges>
<Search/>
@@ -20,6 +20,7 @@
<link rel="stylesheet" type="text/css" href="/files/fitnesse/css/fitnesse_pages.css" />
<link rel="stylesheet" type="text/css" href="/files/fitnesse/wysiwyg/wysiwyg.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/files/fitnesse/bootstrap/css/fitnesse-bootstrap.css">
+ <link rel="stylesheet" type="text/css" href="/files/fitnesse/question.mark/question.mark.css" />
<link rel="wysiwyg.base" href="/" />
<link rel="wysiwyg.stylesheet" type="text/css" href="/files/fitnesse/css/fitnesse.css" media="screen" />
@@ -2,6 +2,6 @@
<form class="navbar-form navbar-right" role="search" action="?search">
<input type="hidden" name="responder" value="search" />
- <input type="text" name="searchString" class="form-control" placeholder="Search page" />
+ <input type="text" id="searchString" name="searchString" class="form-control" placeholder="Search page" />
<input type="hidden" name="searchType" value="Search Titles" />
</form>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -0,0 +1,155 @@
+.help-underlay * {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.help-underlay {
+ position: absolute;
+ background: #555;
+ background: rgba(0,0,0,0.5);
+ visibility: hidden;
+ opacity: 0;
+ -webkit-transition: opacity .2s linear;
+ -moz-transition: opacity .2s linear;
+ -o-transition: opacity .2s linear;
+ transition: opacity .2s linear;
+ left: 0; right: 0; top: 0; bottom: 0;
+}
+
+.ie8 .help-underlay {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=95)"; /* for IE8 in IE7 mode */
+ filter: alpha(opacity=95); /* for IE8 */
+ visibility: hidden;
+}
+
+.help-modal {
+ position: fixed;
+ z-index: 99999;
+ left: 0; right: 0; top: 0; bottom: 0;
+ width: 80%;
+ margin: auto;
+ background: #fff;
+ color: #676767;
+ max-height: 80%;
+ overflow: auto;
+ font-family: Arial, sans-serif;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -webkit-box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
+ box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
+ -webkit-transition: width .2s linear;
+ -moz-transition: width .2s linear;
+ -o-transition: width .2s linear;
+ transition: width .2s linear;
+}
+
+ .help-modal-content {
+ padding: 0 20px;
+ }
+
+ .help-close {
+ position: absolute;
+ top: .4em;
+ right: .5em;
+ font-size: 1.8em;
+ cursor: pointer;
+ -webkit-transition: color .2s linear;
+ -moz-transition: color .2s linear;
+ -o-transition: color .2s linear;
+ transition: color .2s linear;
+ }
+
+ .help-close:hover {
+ color: #000;
+ }
+
+.help-modal h1 {
+ text-align: center;
+ margin: .5em;
+ font-size: 1.5em;
+ padding-bottom: .4em;
+ border-bottom: solid 2px #ccc;
+ font-weight: normal;
+}
+
+ .help-modal h1 .help-key {
+ float: none;
+ line-height: 1.5;
+ position: relative;
+ bottom: 4px;
+ }
+
+.help-isVisible {
+ opacity: 1;
+ visibility: visible;
+ height: auto;
+ z-index: 8888;
+}
+
+.ie8 .help-underlay.help-isVisible {
+ visibility: visible;
+}
+
+.help-list-wrap {
+ overflow: hidden;
+ margin: 0 auto;
+ -webkit-transition: width .2s linear;
+ -moz-transition: width .2s linear;
+ -o-transition: width .2s linear;
+ transition: width .2s linear;
+}
+
+.help-list {
+ list-style: none;
+ margin: 0;
+ padding: 0 0 10px 0;
+ overflow: hidden;
+ float: left;
+ width: 280px;
+}
+
+ .help-list li {
+ margin-right: 40px;
+ }
+
+.help-key-unit {
+ line-height: 1.8;
+ margin-right: 2em;
+ padding: 5px 0;
+}
+
+.help-key {
+ min-width: 60px;
+ float: left;
+ clear: left;
+ position: relative;
+ bottom: 2px;
+}
+
+.help-key span {
+ font-size: 15px;
+ color: #555;
+ display: inline-block;
+ padding: 0 8px;
+ text-align: center;
+ background-color: #eee;
+ background-repeat: repeat-x;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#eee));
+ background-image: -webkit-linear-gradient(#f5f5f5 0%, #eee 100%);
+ background-image: -moz-linear-gradient(#f5f5f5 0%, #eee 100%);
+ background-image: -o-linear-gradient(#f5f5f5 0%, #eee 100%);
+ background-image: linear-gradient(#f5f5f5 0%, #eee 100%);
+ border: 1px solid #ccc;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc;
+ box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc;
+}
+
+.help-key-def {
+ display: inline-block;
+ margin-left: 1em;
+}
@@ -0,0 +1,59 @@
+<div id="helpUnderlay" class="help-underlay">
+ <div id="helpModal" class="help-modal">
+ <h1>Keyboard Shortcuts <kbd class="help-key"><span>?</span></kbd></h1>
+ <div id="helpClose" class="help-close">&times;</div><!-- .help-close -->
+
+ <div id="helpModalContent" class="help-modal-content">
+
+ <div id="helpListWrap" class="help-list-wrap">
+
+ <!--
+ Each <ul> below creates a column, as long as each has a class of
+ "help-list". Each <li> is a single key/definition pair.
+ The extra nested <span> is to help keep the definitions lined up
+ vertically, for aesthetic reasons.
+ If you hate the extra <span>, just remove it from each key/def pair.
+ -->
+
+ <ul class="help-list">
+
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>t</span></kbd>
+ <span class="help-key-def">Test</span>
+ </li>
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>e</span></kbd>
+ <span class="help-key-def">Edit page</span>
+ </li>
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>a</span></kbd>
+ <span class="help-key-def">Add new page</span>
+ </li>
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>p</span></kbd>
+ <span class="help-key-def">Properties</span>
+ </li>
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>w</span></kbd>
+ <span class="help-key-def">Where used?</span>
+ </li>
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>/</span></kbd>
+ <span class="help-key-def">Focus on search bar</span>
+ </li>
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>s</span></kbd>
+ <span class="help-key-def">Open search page</span>
+ </li>
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>g</span> <span>u</span></kbd>
+ <span class="help-key-def">Go to User Guide</span>
+ </li>
+
+ </ul><!-- .help-list -->
+
+ </div><!-- .help-list-wrap -->
+
+ </div><!-- .help-modal-content -->
+ </div><!-- .help-modal -->
+</div><!-- .help-underlay -->
Oops, something went wrong.

0 comments on commit cc4d881

Please sign in to comment.