[extensions-web] js: Don't require an out of date extension to show the upgrade button
- From: Jasper St. Pierre <jstpierre src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [extensions-web] js: Don't require an out of date extension to show the upgrade button
- Date: Mon, 16 Apr 2012 19:39:31 +0000 (UTC)
commit 57644c2858f1366349035ae7f4c616ec928f5cd2
Author: Jasper St. Pierre <jstpierre mecheye net>
Date: Mon Apr 16 15:38:37 2012 -0400
js: Don't require an out of date extension to show the upgrade button
Introduce a new "Upgrade" button, like the configure button, rather than
trumping the switch. If this is too unwieldy, we can revert this and
override the switch instead.
sweettooth/static/css/sweettooth.css | 57 +++++++++++--------
sweettooth/static/images/upgrade.png | Bin 0 -> 1186 bytes
sweettooth/static/js/extensions.js | 26 ++++-----
.../js/templates/extensions/info_contents.mustache | 5 ++-
sweettooth/static/js/templates/templatedata.js | 2 +-
5 files changed, 50 insertions(+), 40 deletions(-)
---
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 324d09d..51b750c 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -309,24 +309,14 @@ li.extension:last-child {
margin-top: 8px;
}
-._gnome-switch.customized .update {
- border-color: #559424;
- background-color: #60b94a;
- cursor: pointer;
-}
-
-._gnome-switch.customized .update:hover {
- background-color: #71ca5b;
-}
-
._gnome-switch.customized .error {
border-color: #a43465;
background-color: #d94a60;
}
- media screen and (max-width: 1244px) {
+ media screen and (max-width: 1308px) {
.maxwidth {
- margin-left: 144px;
+ margin-left: 176px;
}
}
@@ -797,37 +787,56 @@ input[type=submit], button {
transform: rotate(90deg);
}
-.extension .configure-button {
+.extension .extra-buttons {
+ position: absolute;
+ margin-left: -172px;
+ margin-top: 8px;
+ width: 72px;
+}
+
+.extension .configure-button,
+.extension .upgrade-button {
display: none;
}
-.extension.configurable .configure-button {
- display: block;
+.extension.configurable .configure-button,
+.extension.upgradable .upgrade-button {
+ float: right;
- position: absolute;
- margin-left: -136px;
- margin-top: 8px;
+ display: block;
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;
+ margin-right: 8px;
- 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;
}
+.extension.configurable .configure-button {
+ background-color: #4a90d9;
+ background-image: url(../images/configure-extension.png);
+ border-color: #3465a4;
+}
+
.extension.configurable .configure-button:hover {
background-color: #5ba1ff;
border-color: #5485c4;
}
+
+.extension.upgradable .upgrade-button {
+ background-color: #60b94a;
+ background-image: url(../images/upgrade.png);
+ border-color: #559424;
+}
+
+.extension.upgradable .upgrade-button:hover {
+ background-color: #71ca5b;
+ border-color: #75a444;
+}
diff --git a/sweettooth/static/images/upgrade.png b/sweettooth/static/images/upgrade.png
new file mode 100644
index 0000000..72f9bce
Binary files /dev/null and b/sweettooth/static/images/upgrade.png differ
diff --git a/sweettooth/static/js/extensions.js b/sweettooth/static/js/extensions.js
index ec97f44..33b6997 100644
--- a/sweettooth/static/js/extensions.js
+++ b/sweettooth/static/js/extensions.js
@@ -94,6 +94,12 @@ function($, messages, dbusProxy, extensionUtils, templates) {
dbusProxy.LaunchExtensionPrefs(uuid);
});
+ $elem.find('.upgrade-button').on('click', function() {
+ dbusProxy.UninstallExtension(uuid).done(function() {
+ dbusProxy.InstallExtension(uuid);
+ });
+ });
+
$elem.data({'elem': $elem,
'state': _state,
'uninstalled': false,
@@ -109,13 +115,6 @@ function($, messages, dbusProxy, extensionUtils, templates) {
action: action } });
}
- function upgradeExtension() {
- $switch.switchify('customize').off('button-changed', upgradeExtension);
- dbusProxy.UninstallExtension(uuid).done(function() {
- dbusProxy.InstallExtension(uuid);
- });
- }
-
// When the user flips the switch...
$switch.on('changed', function(e, newValue) {
var oldState = $elem.data('state');
@@ -138,6 +137,11 @@ function($, messages, dbusProxy, extensionUtils, templates) {
}
});
+ var svm = meta.shell_version_map || $elem.data('svm');
+ var latest = extensionUtils.grabProperExtensionVersion(svm, dbusProxy.ShellVersion);
+ if (latest !== null && latest.version > meta.version)
+ $elem.addClass('upgradable');
+
// When the extension changes state...
$elem.on('state-changed', function(e, newState) {
$elem.data('state', newState);
@@ -155,14 +159,8 @@ function($, messages, dbusProxy, extensionUtils, templates) {
} else if (newState == ExtensionState.ERROR) {
$switch.switchify('customize', "ERROR", 'error');
} else if (newState == ExtensionState.OUT_OF_DATE) {
- var svm = meta.shell_version_map || $elem.data('svm');
- var version = extensionUtils.grabProperExtensionVersion(svm, dbusProxy.ShellVersion);
$elem.addClass('out-of-date');
- if (version === null) {
- $switch.switchify('customize', "OUTDATED", 'outdated');
- } else {
- $switch.switchify('customize', "UPDATE", 'update').on('click', upgradeExtension);
- }
+ $switch.switchify('customize', "OUTDATED", 'outdated');
}
if ($elem.data('uninstalled') && (newState == ExtensionState.ENABLED ||
diff --git a/sweettooth/static/js/templates/extensions/info_contents.mustache b/sweettooth/static/js/templates/extensions/info_contents.mustache
index ac889ca..aa43b17 100644
--- a/sweettooth/static/js/templates/extensions/info_contents.mustache
+++ b/sweettooth/static/js/templates/extensions/info_contents.mustache
@@ -1,5 +1,8 @@
<div class="switch"></div>
-<div class="configure-button"></div>
+<div class="extra-buttons">
+ <div class="upgrade-button"></div>
+ <div class="configure-button"></div>
+</div>
<img class="icon" src="{{icon}}">
<h3 class="extension-name">
{{#link}}
diff --git a/sweettooth/static/js/templates/templatedata.js b/sweettooth/static/js/templates/templatedata.js
index 8d837b2..73819c9 100644
--- a/sweettooth/static/js/templates/templatedata.js
+++ b/sweettooth/static/js/templates/templatedata.js
@@ -5,7 +5,7 @@ define({
"extensions": {
"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<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 {{first_line_of_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=\"extra-buttons\">\n <div class=\"upgrade-button\"></div>\n <div class=\"configure-button\"></div>\n</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 {{first_line_of_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>"
},
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]