projects/booket

diff booket.html @ 26:8c2f3e72d514

Create new view for notifications

Create new view for notifications which handles the keyboard shortcuts
overlay message and the unsaved changes notification. This ensures that
the unsaved changes notification is always visible, even when the save
form expander is closed.
author Guido Berhoerster <guido+booket@berhoerster.name>
date Mon Oct 06 13:52:50 2014 +0200 (2014-10-06)
parents 6cf1ec2e8955
children 780a8c711ff7
line diff
     1.1 --- a/booket.html	Sun Oct 05 20:25:51 2014 +0200
     1.2 +++ b/booket.html	Mon Oct 06 13:52:50 2014 +0200
     1.3 @@ -38,27 +38,32 @@
     1.4  
     1.5    <datalist id="tag-datalist"></datalist>
     1.6  
     1.7 -  <div id="keyboard-shortcuts">
     1.8 -    <h3>Keyboard Shortcuts</h3>
     1.9 -    <dl>
    1.10 -      <dt><kbd>Prefix</kbd>+<kbd>i</kbd></dt>
    1.11 -      <dd>Select bookmark file to load</dd>
    1.12 -      <dt><kbd>Prefix</kbd>+<kbd>l</kbd></dt>
    1.13 -      <dd>Load selected bookmark file</dd>
    1.14 -      <dt><kbd>Prefix</kbd>+<kbd>s</kbd></dt>
    1.15 -      <dd>Save bookmark file</dd>
    1.16 -      <dt><kbd>Prefix</kbd>+<kbd>a</kbd></dt>
    1.17 -      <dd>Focus bookmark editor</dd>
    1.18 -      <dt><kbd>Prefix</kbd>+<kbd>e</kbd></dt>
    1.19 -      <dd>Select bookmark file to import</dd>
    1.20 -      <dt><kbd>Prefix</kbd>+<kbd>m</kbd></dt>
    1.21 -      <dd>Import selected file</dd>
    1.22 -      <dt><kbd>Prefix</kbd>+<kbd>x</kbd></dt>
    1.23 -      <dd>Export selected file</dd>
    1.24 -      <dt><kbd>Prefix</kbd>+<kbd>f</kbd></dt>
    1.25 -      <dd>Focus search field</dd>
    1.26 -    </dl>
    1.27 -  </div>
    1.28 +  <section id="notifications">
    1.29 +    <div id="keyboard-shortcuts">
    1.30 +      <h3>Keyboard Shortcuts</h3>
    1.31 +      <dl>
    1.32 +        <dt><kbd>Prefix</kbd>+<kbd>i</kbd></dt>
    1.33 +        <dd>Select bookmark file to load</dd>
    1.34 +        <dt><kbd>Prefix</kbd>+<kbd>l</kbd></dt>
    1.35 +        <dd>Load selected bookmark file</dd>
    1.36 +        <dt><kbd>Prefix</kbd>+<kbd>s</kbd></dt>
    1.37 +        <dd>Save bookmark file</dd>
    1.38 +        <dt><kbd>Prefix</kbd>+<kbd>a</kbd></dt>
    1.39 +        <dd>Focus bookmark editor</dd>
    1.40 +        <dt><kbd>Prefix</kbd>+<kbd>e</kbd></dt>
    1.41 +        <dd>Select bookmark file to import</dd>
    1.42 +        <dt><kbd>Prefix</kbd>+<kbd>m</kbd></dt>
    1.43 +        <dd>Import selected file</dd>
    1.44 +        <dt><kbd>Prefix</kbd>+<kbd>x</kbd></dt>
    1.45 +        <dd>Export selected file</dd>
    1.46 +        <dt><kbd>Prefix</kbd>+<kbd>f</kbd></dt>
    1.47 +        <dd>Focus search field</dd>
    1.48 +      </dl>
    1.49 +    </div>
    1.50 +
    1.51 +    <p class="unsaved-changes-message" hidden="hidden"><strong>There are
    1.52 +    unsaved changes to your bookmarks.</strong></p>
    1.53 +  </section>
    1.54  
    1.55    <template id="tag-input-template">
    1.56      <li><label class="top-label">Tag <input type="text" name="tag"
    1.57 @@ -113,8 +118,6 @@
    1.58      <form id="save-form">
    1.59        <fieldset class="expander">
    1.60          <legend tabindex="0" class="expander-label">Save Bookmarks</legend>
    1.61 -        <p class="unsaved-changes-message" hidden="hidden"><strong>There are
    1.62 -        unsaved changes to your bookmarks.</strong></p>
    1.63          <a href="#" id="save-link" hidden="hidden"
    1.64          download="bookmarks.json"></a>
    1.65          <button type="submit" name="save-file"