Bug 579086, Add to collections widget styling and JS

apps/addons/templates/addons/details.html

@@ -109,35 +109,7 @@
             alt="" width="200" height="150" />
         {% endif %}
 
-        <div class="collection-add"
-          data-listurl="{{ url('collections.ajax_list') }}"
-          data-addurl="{{ url('collections.ajax_add') }}"
-          data-removeurl="{{ url('collections.ajax_remove') }}"
-          data-newurl="{{ url('collections.ajax_new') }}"
-          >
-          <span><a href="#">Add to collection</a></span>
-        </div>
-        <div class="collection-add-dropdown install-note">
-        {% if user.is_anonymous() %}
-          <div class="collection-add-login">
-            <p>
-              {% trans %}
-              To create your own collections, you must have an add-ons
-              account.
-              {% endtrans %}
-            </p>
-            <p class="register-button">
-              <a href="{{ remora_url('users/register') }}">{{ _('Create an Add-ons Account') }}</a>
-            </p>
-
-            <p>
-              {% trans login=login_link() %}
-                or <a href="{{ login }}">log in to your current account</a>
-              {% endtrans %}
-            </p>
-          </div>
-        {% endif %}
-        </div>
+        {% include 'addons/includes/collection_add_widget.html' %}
 
         {{ addon_sharing(addon) }}
 

apps/addons/templates/addons/includes/collection_add_widget.html

@@ -0,0 +1,29 @@
+<div class="collection-add"
+  data-listurl="{{ url('collections.ajax_list') }}"
+  data-addurl="{{ url('collections.ajax_add') }}"
+  data-removeurl="{{ url('collections.ajax_remove') }}"
+  data-newurl="{{ url('collections.ajax_new') }}"
+  >
+  <span><a href="#">Add to collection</a></span>
+</div>
+<div class="collection-add-dropdown install-note">
+{% if user.is_anonymous() %}
+  <div class="collection-add-login">
+    <p>
+      {% trans %}
+      To create your own collections, you must have an add-ons
+      account.
+      {% endtrans %}
+    </p>
+    <p class="register-button">
+      <a class="button" href="{{ remora_url('users/register') }}">{{ _('Create an Add-ons Account') }}</a>
+    </p>
+
+    <p>
+      {% trans login=login_link() %}
+        or <a href="{{ login }}">log in to your current account</a>
+      {% endtrans %}
+    </p>
+  </div>
+{% endif %}
+</div>

apps/addons/templates/addons/personas_detail.html

@@ -17,7 +17,7 @@
   <h4 class="author">{{ _('by') }} {{ users_list(addon.listed_authors) }}</h4>
 </hgroup>
 
-<div id="persona" class="primary" role="main">
+<div id="persona" class="primary" role="main" data-id="{{ addon.id }}">
   <div class="featured">
     <div class="featured-inner object-lead">
 
@@ -63,6 +63,8 @@
 
           {{ big_install_button(addon, show_warning=False) }}
 
+          {% include 'addons/includes/collection_add_widget.html' %}
+
           {# TODO(davedash): Remove until zamboni does sharing
           {{ addon_sharing(addon) }}
           #}

apps/bandwagon/templates/bandwagon/ajax_list.html

@@ -1,12 +1,12 @@
 {% if collections %}
-<ul id="ajax_collections_list">
+<ul id="ajax_collections_list" class="addon-collections">
   {% for collection in collections %}
   <li {{ collection.has_addon|class_selected(True) }}
       data-id="{{ collection.id }}">
-    {{ collection.name }}
+    <span class="collectionitem">{{ collection.name }}</span>
   </li>
   {% endfor %}
 </ul>
 {% endif %}
 
-<p id="ajax_new_collection">{{ _('Start a new collection...') }}</p>
+<p id="ajax_new_collection"><a href="#">{{ _('Start a new collection...') }}</a></p>

apps/bandwagon/templates/bandwagon/ajax_new.html

@@ -3,27 +3,29 @@
 
   <form>
     <fieldset>
-      <p>
-        {{ form.errors['name']|safe }}
-        {{ form.name.label|safe }}
-        {{ form.name|safe }}
-      </p>
-      <p>
+      {{ field(form.name, _('Name:')) }}
+      <p id="collection-form-slug">
         {{ form.errors['slug']|safe }}
-        {{ form.slug.label|safe }}
+        <label>{{ form.slug.label|safe }}</label>
+        <span id="slug_edit">
         {{ url('collections.user', user.get_profile().nickname)|absolutify -}}
         {{ form.slug|safe }}
+        </span>
+        <span id="slug_readonly">
+          {{ url('collections.user', user.get_profile().nickname)|absolutify -}}<span id="slug_value"></span>
+          <a id="edit_slug" href="#">{{ _('Edit') }}</a>
+        </span>
       </p>
       <p>
-        {{ form.description.label|safe }} {{ _('(optional)') }}
+        <label for="id_description">{{ form.description.label|safe }}</label> {{ _('(optional)') }}
         {{ form.description|safe }}
       </p>
        <label>{{ form.listed.label }}</label>
        {{ form.listed|safe }}
     </fieldset>
     <p>
-      <button>{{ _('Create Collection') }}</button>
-      {% trans %}or <a id="collections-new-cancel">Cancel</a>{% endtrans %}
+      <input type="submit" value="{{ _('Create Collection') }}">
+      {% trans %}or <a id="collections-new-cancel" href="#">Cancel</a>{% endtrans %}
     </p>
   </form>
 </div>

media/css/main-mozilla.css

@@ -789,6 +789,10 @@ p.addon-search-message {
     max-width: 205px;
 }
 
+#addon .featured .secondary div {
+    margin-bottom: 1em;
+}
+
 #review-box button {
     padding: 0.1em 1em;
     margin-left: 18%;

media/css/zamboni/zamboni.css

@@ -2377,12 +2377,70 @@ h6.author, .author a {
 }
 
 .collection-add {
+    left: -42px;
 }
 
 .collection-add-dropdown {
+    margin: 0;
     display: none;
+    width: 200px;
+    left: -42px;
+    padding: 1em;
 }
 
-.collection-add-dropdown .selected {
-    background: red;
+.collection-add-dropdown a {
+    color: #0055EE;
+}
+.collection-add-dropdown.new-collection {
+    width: 410px;
+}
+
+#collection-form-slug {
+    font-size: .9em;
+}
+
+#collections-new {
+    width: 400px;
+}
+#collections-new #id_name {
+    display: block;
+    width: 99%;
+}
+
+#ajax_collections_list {
+    margin: 0 0 .5em 0;
+}
+
+#ajax_new_collection {
+    border-top: 1px dashed #aecfda;
+    padding: .5em 0 0 30px;
+    margin: 0;
+}
+
+#slug_edit {
+    display: none;
+}
+#slug_value {
+    font-weight: bold;
+}
+#ajax_collections_list li {
+    cursor: pointer;
+    padding-left: 30px;
+    background-repeat: no-repeat;
+    background-position: 0 4px;
+    background-image: url(../../img/zamboni/icons/checks.png);
+    font-weight: bold;
+}
+
+#ajax_collections_list li:hover {
+    background-position: 0 -36px;
+}
+
+#ajax_collections_list li.selected {
+    background-position: 0 -76px;
+}
+
+#ajax_collections_list li.ajax-loading {
+   background-image: url(../../img/zamboni/loading-white.gif);
+   background-position: left bottom;
 }

media/js/zamboni/addon_details.js

@@ -109,40 +109,41 @@ $(document).ready(function () {
 
     btn.show();
 
-    var refreshHandlers = function() {
-        $('#collections-new button').click(handleSubmit);
-        $('#ajax_collections_list li').click(handleToggle);
-        $('#ajax_new_collection').click(handleNew);
-        $('#collections-new-cancel').click(handleClick);
-    };
-
     var list_url = btn.attr('data-listurl');
     var remove_url = btn.attr('data-removeurl');
     var add_url = btn.attr('data-addurl');
     var form_url = btn.attr('data-newurl');
-    var addon_id = $('#addon').attr('data-id');
+    var addon_id = $('#addon, #persona').attr('data-id');
 
-    var handleToggle = function() {
+    var handleToggle = function(e) {
         var data = {'addon_id': addon_id,
                     'id': this.getAttribute('data-id')};
         var url = this.className == "selected" ? remove_url
                                                : add_url;
-        $.post(url, data, handleClick);
+
+        $(this).addClass('ajax-loading');
+
+        e.preventDefault();
+        $.post(url, data, function(data) {
+            dropdown.removeClass('new-collection');
+            dropdown.html(data);
+        }, 'html');
     }
 
     var handleSubmit = function(e) {
-        e.preventDefault()
+        e.preventDefault();
         form_data = $('#collections-new form').serialize();
         $.post(form_url + '?addon_id=' + addon_id, form_data, function(d) {
             dropdown.html(d);
-            refreshHandlers();
         });
     }
 
     var handleNew = function(e) {
+        e.preventDefault();
         $.get(form_url, {'addon_id': addon_id}, function(d) {
+            dropdown.addClass('new-collection');
             dropdown.html(d);
-            refreshHandlers();
+            $("#id_name").focus();
         });
     }
 
@@ -153,12 +154,63 @@ $(document).ready(function () {
         if (!z.anonymous) {
             $.get(list_url, {'addon_id': addon_id}, function(data) {
                 dropdown.html(data);
-                refreshHandlers();
+                dropdown.removeClass('new-collection');
             }, 'html');
         }
+        e.preventDefault();
+
+        // Clear popup when we click outside it.
+        setTimeout(function(){
+            $(document.body).bind('click newPopup', cb);
+        }, 0);
     };
     btn.click(handleClick);
 
+    function show_slug_edit(e) {
+        $("#slug_readonly").hide();
+        $("#slug_edit").show();
+        $("#id_slug").focus();
+        e.preventDefault();
+    }
+
+    var url_customized = !!$('#id_slug').val();
+
+    function slugify() {
+      var slug = $('#id_slug');
+      if (!url_customized || !slug.val()) {
+          var s = $('#id_name').val().replace(/[^\w\s-]/g, '');
+          s = s.replace(/[-\s]+/g, '-').toLowerCase();
+          slug.val(s);
+          $('#slug_value').text(s);
+      }
+    }
+
+    dropdown.delegate('#ajax_collections_list li', 'click', handleToggle)
+        .delegate('#collections-new form', 'submit', handleSubmit)
+        .delegate('#ajax_new_collection', 'click', handleNew)
+        .delegate('#collections-new-cancel', 'click', handleClick)
+        .delegate('#collections-new #id_name', 'keyup', slugify)
+        .delegate('#collections-new #id_name', 'blur', slugify)
+        .delegate('#collections-new #edit_slug', 'click', show_slug_edit)
+        .delegate('#collections-new #id_slug', 'change', function() {
+            url_customized = true;
+            if (!$('#id_slug').val()) {
+              url_customized = false;
+              slugify();
+            }
+        });
+
+    var cb = function(e) {
+        _root = dropdown.get(0);
+        // Bail if the click was somewhere on the popup.
+        if (e.type == 'click' &&
+            _root == e.target ||
+            _.indexOf($(e.target).parents(), _root) != -1) {
+            return;
+        }
+        dropdown.hide();
+        $(document.body).unbind('click newPopup', cb);
+    }
 
 
 });