[extensions-web] Add a prettier "Configure Extension" button

[Jasper St. Pierre <jstpierre src gnome org>]

commit 0b50a765b098fedcd450c252ff609d71e13a3d32
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Sun Apr 1 21:29:09 2012 -0400

    Add a prettier "Configure Extension" button

 .../extensions/templates/extensions/detail.html    |    1 +
 sweettooth/static/css/sweettooth.css               |   43 +++++++++++++++-----
 sweettooth/static/images/configure-extension.png   |  Bin 0 -> 1276 bytes
 sweettooth/static/js/extensions.js                 |   39 ++++--------------
 sweettooth/static/js/main.js                       |    2 +-
 .../templates/extensions/configure_button.mustache |    1 -
 .../js/templates/extensions/info_contents.mustache |    4 +-
 sweettooth/static/js/templates/templatedata.js     |    3 +-
 8 files changed, 45 insertions(+), 48 deletions(-)
---
diff --git a/sweettooth/extensions/templates/extensions/detail.html b/sweettooth/extensions/templates/extensions/detail.html
index e32e731..b665445 100644
--- a/sweettooth/extensions/templates/extensions/detail.html
+++ b/sweettooth/extensions/templates/extensions/detail.html
@@ -28,6 +28,7 @@
          data-ver-url-base="{% url extensions-version-detail ext_pk=extension.pk slug=extension.slug pk='' %}"
          data-svm="{{ shell_version_map }}">
       <div class="switch"></div>
+      <div class="configure-button"></div>
 
       {% block icon %}
       <img src="{{ extension.icon.url }}" class="icon">
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index c7d59c0..cfa23f7 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -332,9 +332,9 @@ li.extension:last-child {
     background-color: #d94a60;
 }
 
- media screen and (max-width: 1165px) {
+ media screen and (max-width: 1244px) {
     .maxwidth {
-        margin-left: 105px;
+        margin-left: 144px;
     }
 }
 
@@ -811,16 +811,37 @@ input[type=submit], button {
     transform: rotate(90deg);
 }
 
-.launch-prefs-button {
-    background-color: #4D90FE;
-    border: 1px solid #3079ED;
-    border-radius: 2px;
-    color: white;
-    margin-left: 25px;
-    padding: 2px 10px;
+.extension .configure-button {
+    display: none;
+}
+
+.extension.configurable .configure-button {
+    display: block;
+
+    position: absolute;
+    margin-left: -136px;
+    margin-top: 8px;
+    height: 24px;
+    width: 24px;
+
+    /* stolen from switch.css */
+    font-weight: bold;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6),
+                 0 1px 0   rgba(0, 0, 0, 0.6);
+    border-style: solid;
+    border-width: 2px;
+    text-align: center;
+
+    background-color: #4a90d9;
+    background-image: url(../images/configure-extension.png);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    border-radius: 4px;
+    border-color: #3465a4;
     cursor: pointer;
 }
 
-.launch-prefs-button:hover {
-    background-color: #5EA1FF;
+.extension.configurable .configure-button:hover {
+    background-color: #5ba1ff;
+    border-color: #5485c4;
 }
diff --git a/sweettooth/static/images/configure-extension.png b/sweettooth/static/images/configure-extension.png
new file mode 100644
index 0000000..e83a491
Binary files /dev/null and b/sweettooth/static/images/configure-extension.png differ
diff --git a/sweettooth/static/js/extensions.js b/sweettooth/static/js/extensions.js
index 40e5919..6b350e8 100644
--- a/sweettooth/static/js/extensions.js
+++ b/sweettooth/static/js/extensions.js
@@ -62,10 +62,6 @@ function($, messages, dbusProxy, extensionUtils, templates) {
             return this;
         };
 
-        $.fn.addLaunchExtensionPrefsButton = function() {
-            return this;
-        };
-
         return;
     }
 
@@ -94,6 +90,15 @@ function($, messages, dbusProxy, extensionUtils, templates) {
         else
             _state = ExtensionState.UNINSTALLED;
 
+        if (meta && meta.hasPrefs && meta.state !== ExtensionState.OUT_OF_DATE) {
+            $elem
+                .addClass('configurable')
+                .find('.configure-button')
+                .on('click', function() {
+                    dbusProxy.LaunchExtensionPrefs(uuid);
+                });
+        }
+
         $elem.data({'elem': $elem,
                     'state': _state,
                     'uninstalled': false,
@@ -226,7 +231,6 @@ function($, messages, dbusProxy, extensionUtils, templates) {
                         var $elem = $('<a>');
 
                         function renderExtension() {
-                            extension.want_configure = (extension.hasPrefs && extension.state !== ExtensionState.OUT_OF_DATE);
                             extension.want_uninstall = true;
 
                             $elem = $(templates.extensions.info(extension)).replaceAll($elem);
@@ -313,29 +317,4 @@ function($, messages, dbusProxy, extensionUtils, templates) {
                 $elem.addClass('out-of-date');
         });
     };
-
-    $.fn.addLaunchExtensionPrefsButton = function(force) {
-        function launchExtensionPrefsButton($elem, uuid) {
-            $elem.
-                find('.description').
-                before($(templates.extensions.configure_button()).
-                       click(function() {
-                           dbusProxy.LaunchExtensionPrefs(uuid);
-                       }));
-        }
-
-        return this.each(function() {
-            var $elem = $(this);
-            var uuid = $elem.data('uuid');
-
-            if (force) {
-                launchExtensionPrefsButton($elem, uuid);
-            } else {
-                dbusProxy.GetExtensionInfo(uuid).done(function(data) {
-                    if (data.hasPrefs && data.state !== ExtensionState.OUT_OF_DATE)
-                        launchExtensionPrefsButton($elem, uuid);
-                });
-            }
-        });
-    };
 });
diff --git a/sweettooth/static/js/main.js b/sweettooth/static/js/main.js
index 736489f..4c7d7ce 100644
--- a/sweettooth/static/js/main.js
+++ b/sweettooth/static/js/main.js
@@ -81,7 +81,7 @@ function($, messages, modal) {
         });
 
         $('#local_extensions').addLocalExtensions();
-        $('.extension.single-page').addExtensionSwitch().addLaunchExtensionPrefsButton();
+        $('.extension.single-page').addExtensionSwitch();
 
         $.extend($.fn.raty.defaults, {
             path: '/static/images/',
diff --git a/sweettooth/static/js/templates/extensions/info_contents.mustache b/sweettooth/static/js/templates/extensions/info_contents.mustache
index c16e54c..d574876 100644
--- a/sweettooth/static/js/templates/extensions/info_contents.mustache
+++ b/sweettooth/static/js/templates/extensions/info_contents.mustache
@@ -1,4 +1,5 @@
 <div class="switch"></div>
+<div class="configure-button"></div>
 <img class="icon" src="{{icon}}">
 <h3 class="extension-name">
   {{#link}}
@@ -11,9 +12,6 @@
 {{#creator}}
   <span class="author">by <a href="{{creator_url}}"> {{creator}} </a></span>
 {{/creator}}
-{{#want_configure}}
-  {{>extensions.configure_button}}
-{{/want_configure}}
 <p class="description">
   {{description}}
 </p>
diff --git a/sweettooth/static/js/templates/templatedata.js b/sweettooth/static/js/templates/templatedata.js
index 93979b3..3615891 100644
--- a/sweettooth/static/js/templates/templatedata.js
+++ b/sweettooth/static/js/templates/templatedata.js
@@ -3,10 +3,9 @@
 
 define({
   "extensions": {
-    "configure_button": "<span class=\"launch-prefs-button\">Configure</span>", 
     "error_report_template": "What's wrong?\n\n\n\nWhat have you tried?\n\n\n\nAutomatically detected errors:\n\n{{#errors}}\n  {{.}}\n\n================\n{{/errors}}\n{{^errors}}\nGNOME Shell Extensions did not detect any errors with this extension.\n{{/errors}}\n\nVersion information:\n\n    Shell version: {{sv}}\n    Extension version: {{#ev}}{{ev}}{{/ev}}{{^ev}}Unknown{{/ev}}", 
     "info": "<div class=\"extension\" data-uuid=\"{{uuid}}\">\n  {{>extensions.info_contents}}\n</div>", 
-    "info_contents": "<div class=\"switch\"></div>\n<img class=\"icon\" src=\"{{icon}}\">\n<h3 class=\"extension-name\">\n  {{#link}}\n    <a href=\"{{link}}\" class=\"title-link\"> <img src=\"{{icon}}\" class=\"icon\"> {{name}} </a>\n  {{/link}}\n  {{^link}}\n  {{name}}\n  {{/link}}\n</h3>\n{{#creator}}\n  <span class=\"author\">by <a href=\"{{creator_url}}\"> {{creator}} </a></span>\n{{/creator}}\n{{#want_configure}}\n  {{>extensions.configure_button}}\n{{/want_configure}}\n<p class=\"description\">\n  {{description}}\n</p>\n{{#want_uninstall}}\n  <button class=\"uninstall\" title=\"Uninstall\">Uninstall</button>\n{{/want_uninstall}}", 
+    "info_contents": "<div class=\"switch\"></div>\n<div class=\"configure-button\"></div>\n<img class=\"icon\" src=\"{{icon}}\">\n<h3 class=\"extension-name\">\n  {{#link}}\n    <a href=\"{{link}}\" class=\"title-link\"> <img src=\"{{icon}}\" class=\"icon\"> {{name}} </a>\n  {{/link}}\n  {{^link}}\n  {{name}}\n  {{/link}}\n</h3>\n{{#creator}}\n  <span class=\"author\">by <a href=\"{{creator_url}}\"> {{creator}} </a></span>\n{{/creator}}\n<p class=\"description\">\n  {{description}}\n</p>\n{{#want_uninstall}}\n  <button class=\"uninstall\" title=\"Uninstall\">Uninstall</button>\n{{/want_uninstall}}", 
     "info_list": "<ul class=\"extensions\">\n{{#extensions}}\n  <li class=\"extension\" data-svm=\"{{shell_version_map}}\">\n    {{>extensions.info_contents}}\n  </li>\n{{/extensions}}\n</ul>", 
     "uninstall": "You uninstalled <b>{{name}}. <a href=\"#\">Undo?</a>"
   },