GNOME.org
 

[extensions-web/feature/full-width: 3/3] layout: reformatted control buttons

commit 2cc36d7a070543576d7e6d28adfc7bcf378aeaef
Author: Yuri Konotopov <ykonotopov gnome org>
Date:   Mon Jan 16 23:52:23 2017 +0400

    layout: reformatted control buttons
    
    1. Removed left margin from pages with extension controls.
    This margin was introduced in commit 8655964e as temporal solution.
    2. Removed absolute positions from control buttons and aligned them
    to right side.
    3. Replaced standard GNOME action-delete icon with new delete icon
    stylized as all other control buttons.
    4. Removed useless delete icon from extensions list page

 .../extensions/templates/extensions/detail.html    |    2 +
 sweettooth/static/css/sweettooth.css               |   54 +++++++++-----------
 sweettooth/static/images/edit-delete.png           |  Bin 2100 -> 0 bytes
 sweettooth/static/images/uninstall-extension.png   |  Bin 0 -> 1303 bytes
 sweettooth/static/js/extensions.js                 |   25 ++++++----
 .../js/templates/extensions/info_contents.mustache |   19 ++++---
 sweettooth/static/js/templates/templatedata.js     |    2 +-
 7 files changed, 53 insertions(+), 49 deletions(-)
---
diff --git a/sweettooth/extensions/templates/extensions/detail.html 
b/sweettooth/extensions/templates/extensions/detail.html
index 83c5061..c1cde38 100644
--- a/sweettooth/extensions/templates/extensions/detail.html
+++ b/sweettooth/extensions/templates/extensions/detail.html
@@ -21,6 +21,8 @@
         <span class="author">by <a href="{% url 'auth-profile' user=extension.creator.username %}">{{ 
extension.creator }}</a></span>
       </div>
 
+      <div style="clear: both;"></div>
+
       <div class="extension-details">
           {% if extension.screenshot %}
               {% block screenshot %}
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index eac563e..9a919a9 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -317,14 +317,13 @@ li.extension:last-child {
     padding: 0;
     margin-top: 10px;
     position: relative;
-    margin-left: 172px;
 }
 
 .extension.out-of-date > * {
     opacity: 0.5;
 }
 
-.extension.out-of-date .uninstall,
+.extension.out-of-date .uninstall-button,
 .extension.out-of-date .upgrade-button {
     opacity: 1.0;
 }
@@ -342,6 +341,10 @@ li.extension:last-child {
     font-size: 1.3em;
 }
 
+.extension .extension-header .extension-name {
+    margin-left: 0;
+}
+
 .extension .extension-name a:hover {
     color: #445;
 }
@@ -361,22 +364,22 @@ li.extension:last-child {
     color: #666;
 }
 
-/* Upgrade, Configure buttons */
+/* Upgrade, Configure, Uninstall buttons */
 
 .extension .extra-buttons {
-    position: absolute;
-    margin-left: -172px;
+    float: right;
     margin-top: 4px;
-    width: 72px;
 }
 
 .extension .configure-button,
-.extension .upgrade-button {
+.extension .upgrade-button,
+.extension .uninstall-button {
     display: none;
 }
 
 .extension.configurable .configure-button,
-.extension.upgradable .upgrade-button {
+.extension.upgradable .upgrade-button,
+.extension.installed .uninstall-button {
     float: right;
 
     display: block;
@@ -387,7 +390,7 @@ li.extension:last-child {
     border-style: solid;
     border-width: 2px;
     text-align: center;
-    margin-right: 8px;
+    margin-right: 3px;
 
     background-repeat: no-repeat;
     background-position: 50% 50%;
@@ -417,12 +420,23 @@ li.extension:last-child {
     border-color: #75a444;
 }
 
+.extension .uninstall-button {
+    background-color: #de2900;
+    background-image: url(../images/uninstall-extension.png);
+    border-color: #bf2000;
+}
+
+.extension .uninstall-button:hover {
+    background-color: #f22c00;
+    border-color: #d92400;
+}
+
 /* Extension switch */
 
 .extension ._gnome-switch {
-    position: absolute;
-    margin-left: -100px;
     margin-top: 4px;
+    margin-right: 32px;
+    float: right;
 }
 
 ._gnome-switch.customized .error {
@@ -498,24 +512,6 @@ li.extension:last-child {
 
 /* Various other things */
 
-.extension .uninstall {
-    text-indent: -9999em;
-    border: none;
-    padding: 0;
-
-    background-color: transparent;
-    background-image: url(../images/edit-delete.png);
-
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin-top: 0.8em;
-    cursor: pointer;
-    width: 32px;
-    height: 32px;
-}
-
 .extension dt, .extension dd {
     font-size: 1em;
     display: inline-block;
diff --git a/sweettooth/static/images/uninstall-extension.png 
b/sweettooth/static/images/uninstall-extension.png
new file mode 100644
index 0000000..65932d3
Binary files /dev/null and b/sweettooth/static/images/uninstall-extension.png differ
diff --git a/sweettooth/static/js/extensions.js b/sweettooth/static/js/extensions.js
index 6017bc1..df9efd4 100644
--- a/sweettooth/static/js/extensions.js
+++ b/sweettooth/static/js/extensions.js
@@ -110,6 +110,21 @@ function($, messages, dbusProxy, extensionUtils, templates) {
             });
         });
 
+        $elem.find('.uninstall-button').on('click', function () {
+                       dbusProxy.UninstallExtension(uuid).then(function (result) {
+                               if (result)
+                               {
+                                       $elem.fadeOut({queue: false}).slideUp({queue: false});
+                                       messages.addInfo(templates.get('extensions/uninstall')(meta));
+                               }
+                       });
+               });
+
+        if([ExtensionState.UNINSTALLED, ExtensionState.DOWNLOADING].indexOf(_state) == -1)
+        {
+            $elem.addClass('installed');
+        }
+
         $elem.data({'elem': $elem,
                     'state': _state});
 
@@ -203,15 +218,6 @@ function($, messages, dbusProxy, extensionUtils, templates) {
                     extensionValues.forEach(function(extension) {
                         var uuid = extension.uuid;
 
-                        function uninstall() {
-                            dbusProxy.UninstallExtension(uuid).then(function(result) {
-                                if (result) {
-                                    $elem.fadeOut({ queue: false }).slideUp({ queue: false });
-                                    messages.addInfo(templates.get('extensions/uninstall')(extension));
-                                }
-                            });
-                        }
-
                         // Give us a dummy element that we'll replace when
                         // rendering below, to keep renderExtension simple.
                         var $elem = $('<a>');
@@ -227,7 +233,6 @@ function($, messages, dbusProxy, extensionUtils, templates) {
                                 extension.first_line_of_description = extension.description.split('\n')[0];
 
                             $elem = $(templates.get('extensions/info')(extension)).replaceAll($elem);
-                            $elem.find('.uninstall').on('click', uninstall);
 
                             addExtensionSwitch(uuid, $elem, extension);
                         }
diff --git a/sweettooth/static/js/templates/extensions/info_contents.mustache 
b/sweettooth/static/js/templates/extensions/info_contents.mustache
index 8c604db..2babfb4 100644
--- a/sweettooth/static/js/templates/extensions/info_contents.mustache
+++ b/sweettooth/static/js/templates/extensions/info_contents.mustache
@@ -1,8 +1,3 @@
-<div class="switch"></div>
-<div class="extra-buttons">
-  <div class="upgrade-button" title="Upgrade this extension"></div>
-  <div class="configure-button" title="Configure this extension"></div>
-</div>
 <h3 class="extension-name">
   {{#link}}
     <a href="{{link}}" class="title-link"><img src="{{icon}}" class="icon">{{name}}</a>
@@ -12,12 +7,18 @@
   {{/link}}
 </h3>
 {{#creator}}
-  <span class="author">by <a href="{{creator_url}}"> {{creator}} </a></span>
+  <span class="author">by <a href="{{creator_url}}">{{creator}}</a></span>
 {{/creator}}
+<div class="switch"></div>
+<div class="extra-buttons">
+  <div class="upgrade-button" title="Upgrade this extension"></div>
+  <div class="configure-button" title="Configure this extension"></div>
+{{^system}}
+  <div class="uninstall-button" title="Uninstall this extension"></div>
+{{/system}}
+</div>
+<div style="clear: both"></div>
 {{#system}}
   <div class='system-extension' title='System extension should be uninstalled using package manager. See 
«About» page for more details.'>System extension</div>
 {{/system}}
 <p class="description">{{first_line_of_description}}</p>
-{{^system}}
-  <button class="uninstall" title="Uninstall">Uninstall</button>
-{{/system}}
diff --git a/sweettooth/static/js/templates/templatedata.js b/sweettooth/static/js/templates/templatedata.js
index a573415..5880671 100644
--- a/sweettooth/static/js/templates/templatedata.js
+++ b/sweettooth/static/js/templates/templatedata.js
@@ -6,7 +6,7 @@ define({
   "extensions/comments_list": "{{#comments}}\n  {{>extensions/comment}}\n  
<hr>\n{{/comments}}\n{{^show_all}}\n<p class=\"show-all\">Show more 
reviews</p>\n{{/show_all}}\n\n{{^comments}}\n  <p>There are no comments. Be the first!</p>\n{{/comments}}",
   "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}}",
   "extensions/info": "<div class=\"extension\" data-uuid=\"{{uuid}}\">\n  
{{>extensions/info_contents}}\n</div>",
-  "extensions/info_contents": "<div class=\"switch\"></div>\n<div class=\"extra-buttons\">\n  <div 
class=\"upgrade-button\" title=\"Upgrade this extension\"></div>\n  <div class=\"configure-button\" 
title=\"Configure this extension\"></div>\n</div>\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    <img src=\"/static/images/plugin-unknown.png\" class=\"icon\">{{name}}\n  
{{/link}}\n</h3>\n{{#creator}}\n  <span class=\"author\">by <a href=\"{{creator_url}}\"> {{creator}} 
</a></span>\n{{/creator}}\n{{#system}}\n  <div class='system-extension' title='System extension should be 
uninstalled using package manager. See \u00abAbout\u00bb page for more details.'>System 
extension</div>\n{{/system}}\n<p class=\"description\">{{first_line_of_description}}</p>\n{{^system}}\n  
<button class=\"uninstall\" title=\"Uninstall\">Uninstall</button>\n{{/system}}",
+  "extensions/info_contents": "<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    <img 
src=\"/static/images/plugin-unknown.png\" class=\"icon\">{{name}}\n  {{/link}}\n</h3>\n{{#creator}}\n  <span 
class=\"author\">by <a href=\"{{creator_url}}\">{{creator}}</a></span>\n{{/creator}}\n<div 
class=\"switch\"></div>\n<div class=\"extra-buttons\">\n  <div class=\"upgrade-button\" title=\"Upgrade this 
extension\"></div>\n  <div class=\"configure-button\" title=\"Configure this 
extension\"></div>\n{{^system}}\n  <div class=\"uninstall-button\" title=\"Uninstall this 
extension\"></div>\n{{/system}}\n</div>\n<div style=\"clear: both\"></div>\n{{#system}}\n  <div 
class='system-extension' title='System extension should be uninstalled using package manager. See 
\u00abAbout\u00bb page for more details.'>System extension</div>\n{{/system}}\n<p 
class=\"description\">{{first_
 line_of_description}}</p>",
   "extensions/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>",
   "extensions/uninstall": "You uninstalled <b>{{name}}</b>.",
   "messages/cannot_list_errors": "GNOME Shell Extensions cannot automatically detect any errors.",
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]