diff options
Diffstat (limited to 'pages/popup.html')
| -rw-r--r-- | pages/popup.html | 115 |
1 files changed, 57 insertions, 58 deletions
diff --git a/pages/popup.html b/pages/popup.html index 775d6c07..726ecc3f 100644 --- a/pages/popup.html +++ b/pages/popup.html @@ -1,85 +1,84 @@ <html> <head> + <link rel="stylesheet" type="text/css" href="options.css"> <style> * { margin: 0px; padding: 0px; } - #vimiumPopup { width: 400px; } - - #excludeControls { - padding: 10px; + #endSpace { + width: 450px; } - #popupPattern, #popupPassKeys { - margin: 5px; - width: 330px; - /* Match the corresponding font and font size used on the options page. */ - /* TODO (smblott): Match other styles from the options page. */ - font-family: Consolas, "Liberation Mono", Courier, monospace; - font-size: 14px; + #helpText, #optionsLink { + font-family : "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-size: 12px; } - #confirmationMessage { - display: inline-block; - width: 18px; - height: 13px; - background: url(icons/check.png) 3px 2px no-repeat; - display: none; + #helpText { + color: #979ca0; } - #popupRemove { margin: 5px; } - #popupExclude { margin: 5px; } - - #popupMenu ul { - list-style: none; + #exclusionAddButton { + width: 80px; } - #popupMenu li, #popupMenu a:active, #popupMenu a:visited { - color: #3F6EC2; - display: block; - border-top: 1px solid #DDDDDD; - padding: 3px; - padding-left: 10px; - } + /* Styles overwridden or changed from options.css. */ - #popupMenu a:hover { - background: #EEEEEE; + #footerWrapper { + width: 450px; /* As for #endSpace */ + margin-left: 0px; } - #optionsLink { - font-family : "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-size: 12px; - float: right; - } - #helpText { - color: #979ca0; - font-family : "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-size: 12px; - float: left; - display: none; + #endSpace { + /* Leave space for the fixed footer. */ + min-height: 36px; + max-height: 36px; } + </style> - <script src="popup.js"></script> + <script src="options.js"></script> </head> <body> - <div id="vimiumPopup"> - <div id="excludeControls"> - <input id="popupPattern" placeholder="Pattern against which to match URLs..." type="text" /><br/> - <input id="popupPassKeys" placeholder="Only exclude these keys..." type="text" /><br/> - <input id="popupRemove" type="button" value="Remove Rule" /> - <input id="popupExclude" type="button" value="Add or Update Rule" /> - <span id="confirmationMessage">Text is added in popup.coffee.</span> - </div> + <!-- Copied (almost) directly from options.html - start --> + <div id="exclusionScrollBox"> + <table id="exclusionRules"> + <tr> + <td><span class="exclusionHeaderText">URL Patterns</span></td> + <td><span class="exclusionHeaderText">Excluded Keys</span></td> + </tr> + </table> + <template id="exclusionRuleTemplate"> + <tr class="exclusionRuleTemplateInstance"> + <td><input/ type="text" class="pattern" placeholder="URL pattern"></td> + <td class="exclusionRulePassKeys"><input/ type="text" class="passKeys" placeholder="Excluded keys"></td> + <td class="exclusionRemoveButton"> + <input/ type="button" tabindex = "-1" class="exclusionRemoveButtonButton" value="✖"></td> + </tr> + </template> + </div> + <!-- Copied (almost) directly from options.html - end --> + + <!-- Some extra space which is hidden underneath the footer. --> + <div id="endSpace"/> - <div id="popupMenu"> - <ul> - <li> - <span id="helpText">Type <strong>Ctrl-Enter</strong> to save and close.</span> - <a id="optionsLink" target="_blank">Options</a> - </li> - </ul> + <div id="footer"> + <div id="footerWrapper"> + <table id="footerTable"> + <tr> + <td id="footerTableData"> + <span> + <span id="helpText">These are the matching exclusion rules for this page.</span> + <br/> + <span> <a id="optionsLink" target="_blank">Vimium Options</a>.</span> + </span> + </td> + <td> + <button id="exclusionAddButton">Add Rule</button> + </td> + </tr> + </table> </div> </div> </body> |