diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/help_dialog.coffee | 9 | ||||
| -rw-r--r-- | pages/help_dialog.html | 128 | 
2 files changed, 81 insertions, 56 deletions
| diff --git a/pages/help_dialog.coffee b/pages/help_dialog.coffee index 401c3222..28aafb4a 100644 --- a/pages/help_dialog.coffee +++ b/pages/help_dialog.coffee @@ -15,11 +15,11 @@ HelpDialog =          clickEvent.preventDefault()          @hide()        false) -    @dialogElement.getElementsByClassName("optionsPage")[0].addEventListener("click", (clickEvent) -> +    document.getElementById("helpDialogOptionsPage").addEventListener("click", (clickEvent) ->          clickEvent.preventDefault()          chrome.runtime.sendMessage({handler: "openOptionsPageInNewTab"})        false) -    @dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].addEventListener("click", +    document.getElementById("toggleAdvancedCommands").addEventListener("click",        HelpDialog.toggleAdvancedCommands, false)      document.documentElement.addEventListener "click", (event) => @@ -38,7 +38,7 @@ HelpDialog =        do (element) ->          element.setAttribute "role", "link"          element.addEventListener "click", -> -          commandName = element.textContent.replace("(","").replace ")", "" +          commandName = element.textContent            chrome.runtime.sendMessage handler: "copyToClipboard", data: commandName            HUD.showForDuration("Yanked #{commandName}.", 2000) @@ -58,7 +58,7 @@ HelpDialog =      Settings.set("helpDialog_showAdvancedCommands", !showAdvanced)    showAdvancedCommands: (visible) -> -    HelpDialog.dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].innerHTML = +    document.getElementById("toggleAdvancedCommands").innerHTML =        if visible then "Hide advanced commands" else "Show advanced commands"      # Add/remove the showAdvanced class to show/hide advanced commands. @@ -82,3 +82,4 @@ UIComponentServer.registerHandler (event) ->  root = exports ? window  root.HelpDialog = HelpDialog +root.isVimiumHelpDialog = true diff --git a/pages/help_dialog.html b/pages/help_dialog.html index 3bfa3e5a..8ac000fb 100644 --- a/pages/help_dialog.html +++ b/pages/help_dialog.html @@ -15,61 +15,85 @@    <!-- Note that the template placeholders (e.g. "pageNavigation") will be filled in by the background         page with the up-to-date key bindings when the dialog is shown. --> -    <div id="vimiumHelpDialog" class="vimiumReset"> -      <a class="vimiumReset optionsPage" href="#">Options</a> -      <a class="vimiumReset wikiPage" href="https://github.com/philc/vimium/wiki" target="_blank">Wiki</a> -      <a class="vimiumReset closeButton" href="#">×</a> -      <div id="vimiumTitle" class="vimiumReset"><span class="vimiumReset" style="color:#2f508e">Vim</span>ium <span id="help-dialog-title"></span></div> -      <div class="vimiumReset vimiumColumn"> -        <table class="vimiumReset"> -          <thead class="vimiumReset"> -            <tr class="vimiumReset" ><td class="vimiumReset"></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating the page</td></tr> -          </thead> -          <tbody id="help-dialog-pageNavigation" class="vimiumReset"> -          </tbody> -        </table> -      </div> -      <div class="vimiumReset vimiumColumn"> -        <table class="vimiumReset" > -          <thead class="vimiumReset"> -          <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using the vomnibar</td></tr> -          </thead> -          <tbody class="vimiumReset" id="help-dialog-vomnibarCommands"></tbody> -          <thead class="vimiumReset"> -          <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using find</td></tr> -          </thead> -          <tbody class="vimiumReset" id="help-dialog-findCommands"></tbody> -          <thead class="vimiumReset"> -          <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating history</td></tr> -          </thead> -          <tbody class="vimiumReset" id="help-dialog-historyNavigation"></tbody> -          <thead class="vimiumReset"> -          <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Manipulating tabs</td></tr> -          </thead> -          <tbody class="vimiumReset" id="help-dialog-tabManipulation"></tbody> -          <thead class="vimiumReset"> -          <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Miscellaneous</td></tr> -          </thead> -          <tbody class="vimiumReset" id="help-dialog-misc"></tbody> -        </table> -      </div> +    <div id="vimiumHelpDialogContainer"> +      <div id="vimiumHelpDialog"> +        <div> +          <table> +            <tr> +              <td> +                <span id="vimiumTitle" class="vimiumReset"><span class="vimiumReset" style="color:#2f508e">Vim</span>ium <span id="help-dialog-title"></span></span> +              </td> +              <td class="vimiumHelpDialogTopButtons"> +                <a class="vimiumReset vimiumHelDialogLink" id="helpDialogOptionsPage" href="#">Options</a> +                <a class="vimiumReset vimiumHelDialogLink" id="helpDialogWikiPage" href="https://github.com/philc/vimium/wiki" target="_blank">Wiki</a> +                <a class="vimiumReset closeButton" href="#">×</a> +              </td> +            </tr> +          </table> +        </div> +        <div class="vimiumReset vimiumDivider"></div> +        <div class="vimiumReset vimiumColumn"> +          <table class="vimiumReset"> +            <thead class="vimiumReset"> +              <tr class="vimiumReset" ><td class="vimiumReset"></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating the page</td></tr> +            </thead> +            <tbody id="help-dialog-pageNavigation" class="vimiumReset"> +            </tbody> +          </table> +        </div> +        <div class="vimiumReset vimiumColumn"> +          <table class="vimiumReset" > +            <thead class="vimiumReset"> +            <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using the vomnibar</td></tr> +            </thead> +            <tbody class="vimiumReset" id="help-dialog-vomnibarCommands"></tbody> +            <thead class="vimiumReset"> +            <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using find</td></tr> +            </thead> +            <tbody class="vimiumReset" id="help-dialog-findCommands"></tbody> +            <thead class="vimiumReset"> +            <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating history</td></tr> +            </thead> +            <tbody class="vimiumReset" id="help-dialog-historyNavigation"></tbody> +            <thead class="vimiumReset"> +            <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Manipulating tabs</td></tr> +            </thead> +            <tbody class="vimiumReset" id="help-dialog-tabManipulation"></tbody> +            <thead class="vimiumReset"> +            <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Miscellaneous</td></tr> +            </thead> +            <tbody class="vimiumReset" id="help-dialog-misc"></tbody> +          </table> +        </div> -      <br clear="both"/> -      <div class="vimiumReset vimiumDivider"></div> +        <div> +          <table> +            <tr> +              <td class="helpDialogBottomLeft"> +                <span id="help-dialog-tip"></span> +              </td> +              <td class="helpDialogBottomRight vimiumHelDialogLink"> +                <a href="#" id="toggleAdvancedCommands">Show advanced commands</a> +              </td> +            </tr> +          </table> +        </div> -      <div id="vimiumHelpDialogFooter" class="vimiumReset"> -        <a href="#" class="vimiumReset toggleAdvancedCommands">Show advanced commands</a> +        <br clear="both"/> +        <div class="vimiumReset vimiumDivider"></div> -        <div class="vimiumReset vimiumColumn"> -          Enjoying Vimium? -          <a class="vimiumReset" target="_blank" -          href="https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb/reviews">Leave us -              feedback</a>.<br/> -          Found a bug? <a class="vimiumReset" target="_blank" href="http://github.com/philc/vimium/issues">Report it here</a>. -        </div> -        <div class="vimiumReset vimiumColumn" style="text-align:right"> -          <span class="vimiumReset">Version <span id="help-dialog-version"></span></span><br/> -          <a target="_blank" href="https://github.com/philc/vimium#release-notes" class="vimiumReset">What's new?</a> +        <div id="vimiumHelpDialogFooter" class="vimiumReset"> +          <div class="vimiumReset vimiumColumn"> +            Enjoying Vimium? +            <a class="vimiumHelDialogLink" target="_blank" +              href="https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb/reviews">Leave us +                  feedback</a>.<br/> +            Found a bug? <a class="vimiumHelDialogLink" target="_blank" href="http://github.com/philc/vimium/issues">Report it here</a>. +          </div> +          <div class="vimiumReset vimiumColumn" style="text-align:right"> +            <span class="vimiumReset">Version <span id="help-dialog-version"></span></span><br/> +            <a href="https://github.com/philc/vimium#release-notes" target="_blank" class="vimiumHelDialogLink">What's new?</a> +          </div>          </div>        </div>      </div> | 
