diff options
-rw-r--r-- | src/js/firefox/lib/main.js | 1 | ||||
-rw-r--r-- | src/js/fiveui/css/entry.css | 6 | ||||
-rw-r--r-- | src/js/fiveui/css/options.css | 4 | ||||
-rw-r--r-- | src/js/fiveui/js/entry.js | 47 | ||||
-rw-r--r-- | src/js/fiveui/options.html | 2 |
5 files changed, 41 insertions, 19 deletions
diff --git a/src/js/firefox/lib/main.js b/src/js/firefox/lib/main.js index 84619ea..7679fd2 100644 --- a/src/js/firefox/lib/main.js +++ b/src/js/firefox/lib/main.js @@ -188,6 +188,7 @@ fiveui.firefox.main = function() { , contentScriptWhen: 'end' , contentScriptFile: [ data.url('jquery/jquery-1.8.3.js') + , data.url('jquery/jquery-ui-1.9.2.custom.js') , data.url('underscore.js') , data.url('backbone.js') , data.url('js/settings.js') diff --git a/src/js/fiveui/css/entry.css b/src/js/fiveui/css/entry.css index ec4791c..5d91b3b 100644 --- a/src/js/fiveui/css/entry.css +++ b/src/js/fiveui/css/entry.css @@ -43,9 +43,9 @@ ul.entries li.entry:first-child { border-top: 0px; } -li.entry .button { - cursor: pointer; - cursor: hand; +li.entry button { + padding: 0px; + font-size: 0.75em; } li.entry .editable { diff --git a/src/js/fiveui/css/options.css b/src/js/fiveui/css/options.css index 5070572..efa4986 100644 --- a/src/js/fiveui/css/options.css +++ b/src/js/fiveui/css/options.css @@ -129,10 +129,6 @@ div.title { width: 50%; } -#upDownGroup button { - display: block -} - #upDownGroup { margin-top: auto; margin-bottom: auto; diff --git a/src/js/fiveui/js/entry.js b/src/js/fiveui/js/entry.js index 025034a..5d460b4 100644 --- a/src/js/fiveui/js/entry.js +++ b/src/js/fiveui/js/entry.js @@ -58,6 +58,10 @@ var editable = function(el, model, placeholder) { }; +var button = function(el, icon) { + el.button({ icons: icon, text: false }); +}; + /** UrlPat Entry Elements ****************************************************/ @@ -68,9 +72,9 @@ fiveui.UrlPatEntry = Backbone.View.extend({ className: 'entry', events: { - 'click span.save' : 'save', - 'click span.remove' : 'remove', - 'click span.edit' : 'edit', + 'click .save' : 'save', + 'click .remove' : 'remove', + 'click .edit' : 'edit', }, initialize:function() { @@ -82,25 +86,31 @@ fiveui.UrlPatEntry = Backbone.View.extend({ viewTemplate: _.template( [ '<div>' - , ' <span class="button remove">x</span>' - , ' <span class="button edit">edit</span>' + , ' <button class="remove">x</button>' + , ' <button class="edit">edit</button>' , ' <span><%= regex %></span>' , ' <span><%= rule_name %></span>' , '</div>' ].join('')), render:function() { + var attrs = _.clone(this.model.attributes); var ruleSet = this.options.rules.model.findWhere({ id: attrs.rule_id }) attrs.rule_name = ruleSet.get('name'); this.$el.html(this.viewTemplate(attrs)); + + // setup buttons + button(this.$el.find('.remove'), { primary: 'ui-icon-close' }); + button(this.$el.find('.edit'), { primary: 'ui-icon-pencil' }); + return this; }, editTemplate: _.template( [ '<div>' - , ' <span class="button remove">x</span>' - , ' <span class="button save">save</span>' + , ' <button class="remove">x</button>' + , ' <button class="save">save</button>' , ' <span class="regex"></span>' , ' <span class="rules"></span>' , '</div>' @@ -112,6 +122,10 @@ fiveui.UrlPatEntry = Backbone.View.extend({ this.$el.find('.rules').append(this.options.rules.render().$el); editable(this.$el.find('.regex'), this.model, 'url pattern'); + + button(this.$el.find('.remove'), { primary: 'ui-icon-close' }); + button(this.$el.find('.save'), { primary: 'ui-icon-disk' }); + return this; }, @@ -198,23 +212,29 @@ fiveui.RuleSetEntry = Backbone.View.extend({ viewTemplate: _.template( [ '<div class="content">' - , ' <span class="button remove">x</span>' - , ' <span class="button edit">edit</span>' - , ' <span class="button reload">reload</span>' + , ' <button class="button remove">remove</button>' + , ' <button class="edit">edit</button>' + , ' <button class="reload">reload</button>' , ' <span class="title"><%= name %></span>' , '</div>' ].join('')), render:function() { + var attrs = this.model.attributes; this.$el.html(this.viewTemplate(attrs)); + + button(this.$el.find('.remove'), { primary: 'ui-icon-close' }); + button(this.$el.find('.edit'), { primary: 'ui-icon-pencil' }); + button(this.$el.find('.reload'), { primary: 'ui-icon-refresh' }); + return this; }, editTemplate: _.template( [ '<div class="content">' - , ' <span class="button remove">x</span>' - , ' <span class="button save">save</span>' + , ' <button class="remove">x</button>' + , ' <button class="save">save</button>' , ' <span class="source"><%= source %></span>' , '</div>' ].join('')), @@ -223,6 +243,9 @@ fiveui.RuleSetEntry = Backbone.View.extend({ var attrs = this.model.attributes; this.$el.html(this.editTemplate(attrs)); + button(this.$el.find('.remove'), { primary: 'ui-icon-close' }); + button(this.$el.find('.save'), { primary: 'ui-icon-disk' }); + editable(this.$el.find('.source'), this.model, 'http://example.com/manifest.json') diff --git a/src/js/fiveui/options.html b/src/js/fiveui/options.html index 1da5e33..3864a36 100644 --- a/src/js/fiveui/options.html +++ b/src/js/fiveui/options.html @@ -28,7 +28,9 @@ <link id="favicon" rel="icon" href="images/fiveui-icon-16.png" /> <link rel="stylesheet" href="css/options.css" /> <link rel="stylesheet" href="css/entry.css" /> + <link rel="stylesheet" href="jquery/bundled.css" /> <script src="jquery/jquery-1.8.3.js"></script> + <script src="jquery/jquery-ui-1.9.2.custom.js"></script> <script src="underscore.js"></script> <script src="backbone.js"></script> <script src="js/settings.js"></script> |