Merge branch 'master' of src.galois.com:/srv/git/FiveUI

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>