Mercurial > projects > booket
comparison 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, 06 Oct 2014 13:52:50 +0200 |
| parents | 6cf1ec2e8955 |
| children | 780a8c711ff7 |
comparison
equal
deleted
inserted
replaced
| 25:b2c9c4fb8d4c | 26:8c2f3e72d514 |
|---|---|
| 36 <p>Version 4</p> | 36 <p>Version 4</p> |
| 37 </header> | 37 </header> |
| 38 | 38 |
| 39 <datalist id="tag-datalist"></datalist> | 39 <datalist id="tag-datalist"></datalist> |
| 40 | 40 |
| 41 <div id="keyboard-shortcuts"> | 41 <section id="notifications"> |
| 42 <h3>Keyboard Shortcuts</h3> | 42 <div id="keyboard-shortcuts"> |
| 43 <dl> | 43 <h3>Keyboard Shortcuts</h3> |
| 44 <dt><kbd>Prefix</kbd>+<kbd>i</kbd></dt> | 44 <dl> |
| 45 <dd>Select bookmark file to load</dd> | 45 <dt><kbd>Prefix</kbd>+<kbd>i</kbd></dt> |
| 46 <dt><kbd>Prefix</kbd>+<kbd>l</kbd></dt> | 46 <dd>Select bookmark file to load</dd> |
| 47 <dd>Load selected bookmark file</dd> | 47 <dt><kbd>Prefix</kbd>+<kbd>l</kbd></dt> |
| 48 <dt><kbd>Prefix</kbd>+<kbd>s</kbd></dt> | 48 <dd>Load selected bookmark file</dd> |
| 49 <dd>Save bookmark file</dd> | 49 <dt><kbd>Prefix</kbd>+<kbd>s</kbd></dt> |
| 50 <dt><kbd>Prefix</kbd>+<kbd>a</kbd></dt> | 50 <dd>Save bookmark file</dd> |
| 51 <dd>Focus bookmark editor</dd> | 51 <dt><kbd>Prefix</kbd>+<kbd>a</kbd></dt> |
| 52 <dt><kbd>Prefix</kbd>+<kbd>e</kbd></dt> | 52 <dd>Focus bookmark editor</dd> |
| 53 <dd>Select bookmark file to import</dd> | 53 <dt><kbd>Prefix</kbd>+<kbd>e</kbd></dt> |
| 54 <dt><kbd>Prefix</kbd>+<kbd>m</kbd></dt> | 54 <dd>Select bookmark file to import</dd> |
| 55 <dd>Import selected file</dd> | 55 <dt><kbd>Prefix</kbd>+<kbd>m</kbd></dt> |
| 56 <dt><kbd>Prefix</kbd>+<kbd>x</kbd></dt> | 56 <dd>Import selected file</dd> |
| 57 <dd>Export selected file</dd> | 57 <dt><kbd>Prefix</kbd>+<kbd>x</kbd></dt> |
| 58 <dt><kbd>Prefix</kbd>+<kbd>f</kbd></dt> | 58 <dd>Export selected file</dd> |
| 59 <dd>Focus search field</dd> | 59 <dt><kbd>Prefix</kbd>+<kbd>f</kbd></dt> |
| 60 </dl> | 60 <dd>Focus search field</dd> |
| 61 </div> | 61 </dl> |
| 62 </div> | |
| 63 | |
| 64 <p class="unsaved-changes-message" hidden="hidden"><strong>There are | |
| 65 unsaved changes to your bookmarks.</strong></p> | |
| 66 </section> | |
| 62 | 67 |
| 63 <template id="tag-input-template"> | 68 <template id="tag-input-template"> |
| 64 <li><label class="top-label">Tag <input type="text" name="tag" | 69 <li><label class="top-label">Tag <input type="text" name="tag" |
| 65 pattern="[^,;]*" size="20" list="tag-datalist" placeholder="tag"></input> | 70 pattern="[^,;]*" size="20" list="tag-datalist" placeholder="tag"></input> |
| 66 </label></li> | 71 </label></li> |
| 111 </form> | 116 </form> |
| 112 | 117 |
| 113 <form id="save-form"> | 118 <form id="save-form"> |
| 114 <fieldset class="expander"> | 119 <fieldset class="expander"> |
| 115 <legend tabindex="0" class="expander-label">Save Bookmarks</legend> | 120 <legend tabindex="0" class="expander-label">Save Bookmarks</legend> |
| 116 <p class="unsaved-changes-message" hidden="hidden"><strong>There are | |
| 117 unsaved changes to your bookmarks.</strong></p> | |
| 118 <a href="#" id="save-link" hidden="hidden" | 121 <a href="#" id="save-link" hidden="hidden" |
| 119 download="bookmarks.json"></a> | 122 download="bookmarks.json"></a> |
| 120 <button type="submit" name="save-file" | 123 <button type="submit" name="save-file" |
| 121 accesskey="s">Save…</button> | 124 accesskey="s">Save…</button> |
| 122 </fieldset> | 125 </fieldset> |