Skip to content

Commit

Permalink
Global Stylesheets and layout fixes for the options page
Browse files Browse the repository at this point in the history
  • Loading branch information
@rduenasf
rduenasf committed May 19, 2011
1 parent 23d4fa7 commit c294d00
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 32 deletions.
49 changes: 45 additions & 4 deletions stylebot/js/options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ function fetchOptions() {
function attachListeners() {
// checkbox
$('.option input[type=checkbox]').change(function(e) {
alert("hola");
var name = e.target.name;
var value = translateOptionValue(name, e.target.checked);
bg_window.saveOption(name, value);
Expand Down Expand Up @@ -159,6 +160,8 @@ function fillCustomStyles() {
var container = $("#custom-styles");
container.html("");
for (var url in styles) {
// skip the global styles
if(url == "*") continue;
container.append(createCustomStyleOption(url));
}
}
Expand Down Expand Up @@ -231,7 +234,7 @@ function editStyle(e) {

var html = "<div class='popup-content' id='edit-css'>Edit the CSS for <strong>" + url + "</strong>:</div> \
<div id='stylebot-modal-buttons'> \
<button onclick='onSave();'>Save</button> \
<button onclick='onSave(\"" + url + "\");'>Save</button> \
<button onclick='cache.modal.hide();'>Cancel</button> \
</div>";

Expand All @@ -253,6 +256,41 @@ function editStyle(e) {
cache.modal.show();
}

// Displays the modal popup for editing the global stylesheet
function editGlobalStylesheet(e) {
if (styles["*"]){
var rules = styles["*"]['_rules'];
var css = CSSUtils.crunchFormattedCSS(rules, false);
}
else {
var css = "";
}

var html = "<div class='popup-content' id='edit-css'>Edit the <strong>Global Stylesheet</strong>:</div> \
<div id='stylebot-modal-buttons'> \
<button onclick='onSave(\"*\");'>Save</button> \
<button onclick='cache.modal.hide();'>Cancel</button> \
</div>";

initModal(html);

cache.modal.options.onOpen = function() {
var attachTo = cache.modal.box.find("div").get(0);
cache.modal.editor = CodeMirror(attachTo, {
value: css,
mode: "css",
lineNumbers: true,
indentUnit: 4,
onFocus: function() { cache.modal.editor.clearMarker(cache.modal.editor.errorLine); }
});
cache.modal.editor.errorLine = 0;
cache.modal.editor.setCursor(cache.modal.editor.lineCount(), 0);
};

cache.modal.show();
}


// Displays the modal popup to add a new style
function addStyle() {
var html = "<div class='popup-content' id='add-css'>URL: <input type='text'></input></div> \
Expand All @@ -277,7 +315,11 @@ function addStyle() {
// currently, we are just using an arbitrary value to determine when CodeMirror is finished setting up
//
setTimeout(function() {
cache.modal.box.find('input').focus();
cache.modal.box.find('input').focus()

.change(function() {
if($(this).val() == "*") $(this).val("");
});
}, 20);

cache.modal.editor.errorLine = 0;
Expand Down Expand Up @@ -326,8 +368,7 @@ function shareStyle(e) {

// Called when a style is updated (Update button is clicked)
//
function onSave() {
var url = cache.modal.box.find('div > strong').html();
function onSave(url) {
var css = cache.modal.editor.getValue();
if (saveStyle(url, css)) {
cache.modal.hide();
Expand Down
50 changes: 22 additions & 28 deletions stylebot/options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,14 @@ <h2>Basics</h2>
<h3>Browser UI</h3>
<ul class="option-subsection">
<li class="option">
<input type="checkbox" name="contextMenu" />
<label>
<input type="checkbox" name="contextMenu" />
<span class="option-field">Show Right Click Menu</span>
</label>
</li>
<li class="option">
<input type="checkbox" name="showPageAction" onclick="togglePageAction();" />
<label>
<input type="checkbox" name="showPageAction" onclick="togglePageAction();" />
<span class="option-field">Show <img src='images/css.png' style='margin-bottom: -6px;' /> Icon in Omnibar</span>
</label>
</li>
Expand All @@ -55,15 +55,13 @@ <h3>Browser UI</h3>
<h3>Accessibility</h3>
<ul class="option-subsection">
<li class="option">
<input type="checkbox" name="useShortcutKey" />
<label>
<input type="checkbox" name="useShortcutKey" />
<span class="option-field">Enable Shortcut Key to launch Stylebot</span>
</label>
</li>
<li class="option">
<label>
<span class="option-field">Shortcut Key Combo:</span>
</label>
<span class="option-field">Shortcut Key Combo:</span>
<select name="shortcutMetaKey">
<option value="ctrl">Ctrl</option>
<option value="shift">Shift</option>
Expand Down Expand Up @@ -99,23 +97,23 @@ <h2>Styles</h2>
<div class="option-section">
<h3>Search</h3>
<div class="option-subsection">
<div>
Search for styles on
<a rel="external" target="_blank" href="http://stylebot.me">Stylebot Social</a>
</div>
<div>
Search your own styles:
<input type="search" id="style-search-field" incremental placeholder="Type URL to search..."/>
</div>
Search for styles on
<a rel="external" target="_blank" href="http://stylebot.me">Stylebot Social</a>
<br>
Search your own styles:
<input type="search" id="style-search-field" incremental placeholder="Type URL to search..."/>
</div>
</div>
<div class="option-section">
<h3>Global Stylesheet</h3>
<div class="option-subsection">
<button onclick="editGlobalStylesheet();">Edit Global Stylesheet</button>
</div>
</div>
<div class="option-section">
<h3>Styles</h3>
<div class="option-subsection">
<div class="description">
</div>
<button onclick="addStyle();">Add a new style...</button>
<br style='clear:both;'/>
<div id="custom-styles">
</div>
</div>
Expand All @@ -126,24 +124,20 @@ <h2>Backup and Sync</h2>
<div class="option-section">
<h3>Backup</h3>
<div class='option-subsection'>
<li class='option'>
<button onclick="export();">Export Styles...</button>
<button onclick="import();">Import Styles...</button>
</li>
</div>
</div>
<div class="option-section" id="sync">
<h3>Sync <span class='alert'>experimental</span></h3>
<div class='option-subsection'>
<li class='option'>
Sync your styles across multiple computers.
<br>
Requires <a href="http://www.google.com/support/chrome/bin/answer.py?answer=185277" target='_blank'>Bookmark Sync</a>.
<br>
<div style='margin-top:18px'>
<button onclick="toggleSyncing();" id="sync-button">Enable Sync</button>
</div>
</li>
Sync your styles across multiple computers.
<br>
Requires <a href="http://www.google.com/support/chrome/bin/answer.py&amp;answer=185277" target='_blank'>Bookmark Sync</a>.
<br>
<div style='margin-top:18px'>
<button onclick="toggleSyncing();" id="sync-button">Enable Sync</button>
</div>
</div>
</div>
</div>
Expand Down

2 comments on commit c294d00

@ankit
Copy link

@ankit ankit commented on c294d00 May 19, 2011

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's name the next release 1.3. Too many features to not warrant a .x release :)

@rduenasf
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hahaha completely agree

Please sign in to comment.