diff options
| author | Einar Egilsson | 2011-08-29 22:47:26 +0200 |
|---|---|---|
| committer | Einar Egilsson | 2011-08-29 22:47:26 +0200 |
| commit | b69f768ac83291de532161ae1da48ea20ffc01d6 (patch) | |
| tree | 1fe09119cb67333505ed5755e687a9b125103e3e | |
| parent | 66ad230105ccf1b504d9589886f174020c324b18 (diff) | |
CSS for settings page
| -rw-r--r-- | chrome/js/settings.js | 16 | ||||
| -rw-r--r-- | chrome/settings.html | 77 |
2 files changed, 69 insertions, 24 deletions
diff --git a/chrome/js/settings.js b/chrome/js/settings.js index 3ab7c25..fbbc332 100644 --- a/chrome/js/settings.js +++ b/chrome/js/settings.js @@ -73,13 +73,27 @@ $(document).ready(function() { } } + var template = $('#redirect-list').html().replace(/^\s*|\s$/g, ''); function databind() { + $('#redirect-list').html(''); for (var i = 0; i < Redirector.redirectCount; i++) { var redirect = Redirector.getRedirectAt(i); - $('#redirect-list'); + var node = $(template); + node.find('.pattern').html(redirect.includePattern); + node.find('.redirectTo').html(redirect.redirectUrl); + node.find('.exampleUrl').html(redirect.exampleUrl); + node.find('.redirectResult').html(redirect.getMatch(redirect.exampleUrl).redirectTo); + node.appendTo('#redirect-list'); + node.redirect = redirect; } + + $('#redirect-list li a').click(function() { + alert(this.parentNode.parentNode.redirect); + }); } + + databind(); $('#import').click(importRedirects); $('#export').click(exportRedirects); diff --git a/chrome/settings.html b/chrome/settings.html index cdf20fa..533118d 100644 --- a/chrome/settings.html +++ b/chrome/settings.html @@ -3,10 +3,41 @@ <head> <title>Redirector Extension Settings</title> <style type="text/css"> - body { font-family: Helvetica, Georgia, Arial, sans-serif; } - h1 { text-align:center; } + body { + font-family: Helvetica, Georgia, Arial, sans-serif; + font-size:10pt; + min-height:100%; + background:-moz-linear-gradient(top, #bcd, #fff); + margin:0; padding:0; + } + html { + height:100%; + margin:0; padding:0; + } + h1 { text-align:center; color:#555; text-shadow:0px 0px 15px white; font-size:34pt; padding:0px; margin:20px 0px 0px 0px; } label { display:table-cell; } input { display:table-cell; } + li { margin:0; padding:5px; border-top: dotted 1px grey;} + li:first-child { border-top:none;} + #actions { width:600px; margin:10px auto; text-align:center; } + #redirect-list { + border:solid 1px grey; + margin:auto; + padding:0px; + width: 700px; + list-style-type:none; + list-style-position:outside; + border-radius:3px; + box-shadow: 0px 0px 2px grey; + text-shadow: 1px 1px 1px white; + } + #config { display:none; } + button { border:solid 1px grey; border-radius:4px; background:-moz-linear-gradient(top, #ccc, #fff); cursor:pointer;} + h5 { text-align:center; margin:0px; padding-left:130px; } + .pattern, .redirectTo { color:blue; font-style:italic;} + .exampleUrl, .redirectResult { color:blue; } + #redirect-list li:nth-child(odd) { background:-moz-linear-gradient(top, #ddf, #cce); } + #redirect-list li:nth-child(even) { background-color:#fff; } #redirect-form div { display:table-row; } #redirect-form { display:none; } </style> @@ -15,31 +46,31 @@ </head> <body> <h1>Redirector</h1> - <nav> - <a href="">Redirects</a> - <a href="">Preferences</a> - <a href="">Help</a> - </nav> - <div id="redirect-list"> - <div> - Redirect asdfasdfasdfasdfasdf to ælasdtasdasdt - Example: hsdtasdt st to - </div> - </div> - <div id="crud"> - <button>Add</button> - <button>Edit</button> - <button>Delete</button> - <button>Move Up</button> - <button>Move Down</button> + <h5>Go where <em>YOU</em> want!</h5> + <div id="actions"> + <button id="new-redirect">New Redirect...</button> + <button id="configure">Configure</button> <button id="import">Import</button> <button id="export">Export</button> </div> + <ul id="redirect-list"> + <li> + <div>Redirect: <span class="pattern">pattern</span> to <span class="redirectTo"></span></div> + <div>Example: <span class="exampleUrl"></span> becomes <span class="redirectResult"></span></div> + <div> + <a href="#edit">Edit</a> + <a href="#delete">Delete</a> + <a href="#up">Up</a> + <a href="#down">Down</a> + </div> + </li> + </ul> <div id="config"> - <input type="checkbox" id="enable-redirector" data-pref="enabled" /> Enable Redirector - <input type="checkbox" id="show-status-bar-icon" data-pref="showStatusBarIcon"/> Show status bar icon - <input type="checkbox" id="show-context-menu" data-pref="showContextMenu"/> Show context menu - <input type="checkbox" id="enable-debug-output" data-pref="debugEnabled"/> Enable debug output + <h2>Configuration</h2> + <input type="checkbox" id="enable-redirector" data-pref="enabled" />Enabled + <input type="checkbox" id="show-status-bar-icon" data-pref="showStatusBarIcon"/> Statusbar icon + <input type="checkbox" id="show-context-menu" data-pref="showContextMenu"/> Context menu + <input type="checkbox" id="enable-debug-output" data-pref="debugEnabled"/> Debug output </div> <div id="redirect-form"> <div> |