impalacization of themes (bug 680234)

2011-08-31 16:23:56 -07:00 · 2011-08-31 16:23:56 -07:00 · 82aa8af897
--- a/apps/addons/helpers.py
+++ b/apps/addons/helpers.py
@ -203,8 +203,13 @@ def addon_listing_header(context, url_base, sort_opts, selected):

@register.inclusion_tag('addons/impala/listing/sorter.html')
@jinja2.contextfunction
-def impala_addon_listing_header(context, url_base, sort_opts, selected,
-                                extra_sort_opts={}):
+def impala_addon_listing_header(context, url_base, sort_opts={}, selected=None,
+                                extra_sort_opts={}, search_filter=None):
+    if search_filter:
+        selected = search_filter.field
+        sort_opts = search_filter.opts
+        if hasattr(search_filter, 'extras'):
+            extra_sort_opts = search_filter.extras
    # When an "extra" sort option becomes selected, it will appear alongside
    # the normal sort options.
    old_extras = extra_sort_opts
@ -326,6 +331,16 @@ def impala_persona_grid(context, personas, src=None, pagesize=6):
    return new_context(**locals())


+@register.filter
+@jinja2.contextfilter
+@register.inclusion_tag('addons/impala/theme_grid.html')
+def theme_grid(context, themes, src=None, dl_src=None):
+    src = context.get('src', src)
+    if not dl_src:
+        dl_src = context.get('dl_src', src)
+    return new_context(**locals())
+
+
@register.inclusion_tag('addons/report_abuse.html')
@jinja2.contextfunction
 def addon_report_abuse(context, hide, addon):
--- a/apps/addons/templates/addons/impala/theme_grid.html
+++ b/apps/addons/templates/addons/impala/theme_grid.html
@ -0,0 +1,37 @@
+{% from "addons/macros.html" import vital %}
+{% if addons %}
+  {% set vital_type = {'updated': 'updated',
+                       'created': 'created',
+                       'rating': 'rating',
+                       'popular': 'downloads',
+                       'users': 'adu'}.get(sorting, 'adu') %}
+  <ul class="listing-grid theme-grid c">
+    {% for addon in addons %}
+      <li>
+        <div class="hovercard addon theme">
+          <a href="{{ addon.get_url_path()|urlparams(src=dl_src) }}">
+            <div class="summary">
+              <h3>{{ addon.name }}</h3>
+              <div><img src="{{ addon.thumbnail_url }}"></div>
+            </div>
+          </a>
+          <div class="more">
+            {{ install_button(addon, impala=True) }}
+            {{ addon.summary|truncate(250)|nl2br }}
+            <div class="byline">
+              {% trans users=users_list(addon.listed_authors, size=2) %}
+                by {{ users }}
+              {% endtrans %}
+            </div>
+            {% if vital_type != 'adu' %}
+              {{ vital(addon, 'adu') }}
+            {% endif %}
+          </div>
+          {{ vital(addon, vital_type) }}
+        </div>
+      </li>
+    {% endfor %}
+  </ul>
+{% else %}
+  {% include "search/no_results.html" %}
+{% endif %}
--- a/apps/addons/templates/addons/macros.html
+++ b/apps/addons/templates/addons/macros.html
@ -1,16 +1,34 @@
 {% macro vital(addon, type) %}
  <div class="vital">
-    {% if type == 'rating' %}
+    {% if type in ('updated', 'created') %}
+      <span class="updated">
+        {% if sorting == 'updated' %}
+          {# L10n: {0} is a date. #}
+          {{ _('Updated {0}')|f(addon.last_updated|datetime) }}
+        {% else %}
+          {# L10n: {0} is a date. #}
+          {{ _('Added {0}')|f(addon.created|datetime) }}
+        {% endif %}
+      </span>
+    {% elif type == 'rating' %}
      {{ impala_reviews_link(addon) }}
-    {% endif %}
-    {% if type == 'adu' %}
+    {% elif type in ('downloads', 'adu') %}
      <span class="adu">
-        {% trans cnt=addon.average_daily_users,
-                 num=addon.average_daily_users|numberfmt %}
-          {{ num }} user
-        {% pluralize %}
-          {{ num }} users
-        {% endtrans %}
+        {% if type == 'downloads' %}
+          {% trans cnt=addon.weekly_downloads,
+                   num=addon.weekly_downloads|numberfmt %}
+            {{ num }} weekly download
+          {% pluralize %}
+            {{ num }} weekly downloads
+          {% endtrans %}
+        {% else %}
+          {% trans cnt=addon.average_daily_users,
+                   num=addon.average_daily_users|numberfmt %}
+            {{ num }} user
+          {% pluralize %}
+            {{ num }} users
+          {% endtrans %}
+        {% endif %}
      </span>
    {% endif %}
  </div>
--- a/apps/browse/templates/browse/extensions.html
+++ b/apps/browse/templates/browse/extensions.html
@ -11,7 +11,7 @@
  <h1>{{ title }}</h1>
  <div class="island hero c listing">
    <a href="{{ feed_url }}" id="subscribe">{{ _('Subscribe') }}</a>
-    {{ impala_addon_listing_header(base_url, filter.opts, sorting, filter.extras) }}
+    {{ impala_addon_listing_header(base_url, search_filter=filter) }}
    <div class="items">
      {{ impala_addon_listing_items(addons.object_list, sorting, src=src) }}
    </div>
--- a/apps/browse/templates/browse/impala/base_listing.html
+++ b/apps/browse/templates/browse/impala/base_listing.html
@ -3,14 +3,25 @@
 {% if category %}
  {% set title = category.name %}
 {% else %}
-  {% set title = {'featured': _('Featured Extensions'),
-                  'users': _('Most Popular Extensions'),
-                  'rating': _('Top-Rated Extensions'),
-                  'created': _('Newest Extensions'),
-                  'name': _('Extensions by Name'),
-                  'popular': _('Extensions by Weekly Downloads'),
-                  'updated': _('Recently Updated Extensions'),
-                  'hotness': _('Up & Coming Extensions')}.get(sorting) %}
+  {% if section == 'extensions' %}
+    {% set title = {'featured': _('Featured Extensions'),
+                    'users': _('Most Popular Extensions'),
+                    'rating': _('Top-Rated Extensions'),
+                    'created': _('Newest Extensions'),
+                    'name': _('Extensions by Name'),
+                    'popular': _('Extensions by Weekly Downloads'),
+                    'updated': _('Recently Updated Extensions'),
+                    'hotness': _('Up & Coming Extensions')}.get(sorting) %}
+  {% elif section == 'themes' %}
+    {% set title = {'featured': _('Featured Themes'),
+                    'users': _('Most Popular Themes'),
+                    'rating': _('Top-Rated Themes'),
+                    'created': _('Newest Themes'),
+                    'name': _('Themes by Name'),
+                    'popular': _('Themes by Weekly Downloads'),
+                    'updated': _('Recently Updated Themes'),
+                    'hotness': _('Up & Coming Themes')}.get(sorting) %}
+  {% endif %}
 {% endif %}

 {% block title %}
@ -18,8 +29,7 @@
 {% endblock %}

 {% if not request.MOBILE %}
-  {% block bodyclass %}s-{{ sorting }}{% endblock %}
-
+  {% block bodyclass %}{{ section }} s-{{ sorting }}{% endblock %}
  {% if category %}
    {% block extrahead %}
      <style>
@ -36,21 +46,22 @@
  {% endif %}
 {% endif %}

-{% if category %}
-  {% set feed = url('browse.extensions.rss', category.slug) %}
-{% else %}
-  {% set feed = url('browse.extensions.rss') %}
+{% if section == 'extensions' %}
+  {% if category %}
+    {% set feed = url('browse.extensions.rss', category.slug) %}
+  {% else %}
+    {% set feed = url('browse.extensions.rss') %}
+  {% endif %}
+  {% set feed_url = feed|urlparams(sort=sorting) %}
+  {% block rss_feed %}
+    <link rel="alternate" type="application/rss+xml" title="RSS"
+          href="{{ feed_url }}">
+  {% endblock %}
 {% endif %}

-{% set feed_url = feed|urlparams(sort=sorting) %}
-
-{% block rss_feed %}
-  <link rel="alternate" type="application/rss+xml" title="RSS"
-        href="{{ feed_url }}">
-{% endblock %}
-
+{% set browse_url = 'browse.%s' % section %}
 {% if category %}
-  {% set base_url = url('browse.extensions', category.slug) %}
+  {% set base_url = url(browse_url, category.slug) %}
 {% else %}
-  {% set base_url = url('browse.extensions') %}
+  {% set base_url = url(browse_url) %}
 {% endif %}
--- a/apps/browse/templates/browse/impala/category_landing.html
+++ b/apps/browse/templates/browse/impala/category_landing.html
@ -12,11 +12,11 @@
 {% block primary %}
 <section class="primary">
  {{ impala_breadcrumbs([(url('browse.extensions'), _('Extensions')),
-                         (None, category.name)]) }}
+                         (None, title)]) }}
+  <h1>{{ title }}</h1>
  {% set addons = addon_sets['featured'] %}
  {% if addons %}
    <div class="island hero c">
-      <h1>{{ category.name }}</h1>
      {{ addons[:3]|featured_grid(src='cb-hc-featured',
                                  dl_src='cb-dl-featured') }}
      <div class="banner-box">
--- a/apps/browse/templates/browse/impala/themes.html
+++ b/apps/browse/templates/browse/impala/themes.html
@ -0,0 +1,20 @@
+{% extends "browse/impala/base_listing.html" %}
+
+{% block primary %}
+<section class="primary">
+  {% if category %}
+    {{ impala_breadcrumbs([(url('browse.themes'), _('Themes')),
+                           (None, title)]) }}
+  {% else %}
+    {{ impala_breadcrumbs([(None, _('Themes'))]) }}
+  {% endif %}
+  <h1>{{ title }}</h1>
+    <div class="island listing c">
+      {{ impala_addon_listing_header(base_url, search_filter=filter) }}
+      {{ addons.object_list|theme_grid }}
+    </div>
+  {% if sorting != 'featured' %}
+    {{ addons|impala_paginator }}
+  {% endif %}
+</section>
+{% endblock %}
--- a/apps/browse/urls.py
+++ b/apps/browse/urls.py
@ -6,9 +6,10 @@ from browse.feeds import CategoriesRss, FeaturedRss, SearchToolsRss
 from . import views

 impala_patterns = patterns('',
-    # TODO: Impalacize these views.
-    url('^themes/(?P<category>[^/]+)?$', views.themes,
+    url('^themes/(?P<category>[^/]+)?$', views.impala_themes,
        name='i_browse.themes'),
+
+    # TODO: Impalacize these views.
    url('^extensions/(?P<category>[^/]+)/featured$', views.creatured,
        name='i_browse.creatured'),
    url('^personas/(?P<category>[^ /]+)?$', views.personas,
--- a/apps/browse/views.py
+++ b/apps/browse/views.py
@ -157,11 +157,31 @@ def themes(request, category=None):
    return jingo.render(request, 'browse/themes.html',
                        {'categories': categories,
                         'themes': themes, 'category': category,
-                         'sorting': filter.field,
                         'sort_opts': filter.opts,
                         'search_cat': '%s,0' % amo.ADDON_THEME})


+def impala_themes(request, category=None):
+    TYPE = amo.ADDON_THEME
+    if category is not None:
+        q = Category.objects.filter(application=request.APP.id, type=TYPE)
+        category = get_object_or_404(q, slug=category)
+
+    addons, filter = addon_listing(request, [TYPE], is_impala=True)
+    sorting = filter.field
+    src = 'cb-btn-%s' % sorting
+    dl_src = 'cb-dl-%s' % sorting
+
+    if category is not None:
+        addons = addons.filter(categories__id=category.id)
+
+    addons = amo.utils.paginate(request, addons, 16, count=addons.count())
+    return jingo.render(request, 'browse/impala/themes.html',
+                {'section': 'themes', 'addon_type': TYPE, 'addons': addons,
+                 'category': category, 'filter': filter, 'sorting': sorting,
+                 'search_cat': '%s,0' % TYPE, 'src': src, 'dl_src': dl_src})
+
+
@mobile_template('browse/{mobile/}extensions.html')
 def extensions(request, category=None, template=None):
    TYPE = amo.ADDON_EXTENSION
@ -184,10 +204,11 @@ def extensions(request, category=None, template=None):

    addons = amo.utils.paginate(request, addons, count=addons.count())
    return jingo.render(request, template,
-                        {'category': category, 'addons': addons,
+                        {'section': 'extensions', 'addon_type': TYPE,
+                         'category': category, 'addons': addons,
                         'filter': filter, 'sorting': sorting,
-                         'sort_opts': filter.opts, 'src': src,
-                         'dl_src': dl_src, 'search_cat': '%s,0' % TYPE})
+                         'src': src, 'dl_src': dl_src,
+                         'search_cat': '%s,0' % TYPE})


@mobile_template('browse/{mobile/}extensions.html')
@ -208,7 +229,8 @@ def es_extensions(request, category=None, template=None):
                                status__in=amo.REVIEWED_STATUSES))
    filter = ESAddonFilter(request, qs, key='sort', default='popular')
    qs, sorting = filter.qs, filter.field
-    src = 'featured' if sorting == 'featured' else 'category'
+    src = 'cb-btn-%s' % sorting
+    dl_src = 'cb-dl-%s' % sorting

    if category:
        qs = qs.filter(category=category.id)
--- a/media/css/impala/hovercards.less
+++ b/media/css/impala/hovercards.less
@ -35,6 +35,14 @@
        max-height: 2.6em;
        overflow: hidden;
    }
+    .install-shell .extra {
+        + .extra {
+            margin: 0;
+        }
+        .notavail {
+            margin: 0 0 2px;
+        }
+    }
    h3 {
        color: @link;
        font-weight: bold;
@ -54,7 +62,7 @@
            margin-top: 0;
        }
    }
-    a {
+    > a {
        text-decoration: none;
    }
    .adu {
@ -152,8 +160,8 @@
                padding: 0;
            }
        }
-        .more .vital {
-            border-top: 1px dotted #CCCCCC;
+        &:hover .vital {
+            border-top: 1px dotted #ccc;
            padding: 8px 0 0;
            margin: 8px 0 4px;
        }
@ -220,7 +228,8 @@
        line-height: 12px;
    }
 }
-.featured {
+.featured,
+.theme-grid {
    h3 {
        font-size: 16px;
        line-height: 18px;
@ -268,6 +277,49 @@
        }
    }
 }
+.theme-grid {
+    li {
+        height: 205px;
+        margin-bottom: 1em;
+        width: 180px;
+    }
+    .incompatible {
+        img {
+            opacity: .4;
+        }
+        &:hover {
+            img {
+                opacity: 1;
+            }
+            > .notavail {
+                display: none;
+            }
+        }
+        > .notavail {
+            color: @note-gray;
+            display: block;
+            font: 10px/10px Arial, sans-serif;
+            margin-top: 8px;
+        }
+    }
+    .hovercard.addon .summary {
+        height: 157px;
+        div {
+            height: 135px;
+            width: 160px;
+            img {
+                width: 142px;
+            }
+        }
+    }
+    .hovercard.addon > .vital {
+        font-size: 11px;
+        margin-top: 8px;
+        .adu, .updated {
+            color: #390;
+        }
+    }
+}

 .secondary,
 .notice.upsell {
@ -327,4 +379,4 @@
            margin: 0;
        }
    }
-}
+}
--- a/media/css/impala/listing.less
+++ b/media/css/impala/listing.less
@ -301,7 +301,8 @@

 .item + .paginator,
 .items + .paginator,
-#sorter + .paginator {
+#sorter + .paginator,
+#sorter + .listing-grid {
    border-top: 1px dotted @border-blue;
    padding-top: 1em;
 }
--- a/media/js/impala/listing.js
+++ b/media/js/impala/listing.js
@ -6,7 +6,7 @@ $(function() {
    });

    // Mark incompatible add-ons on listing pages.
-    $('.listing .item.addon').each(function(i,p) {
+    $('.listing .item.addon').each(function() {
        var $this = $(this);
        if ($this.find('.acr-override').length) {
            $this.addClass('acr');
@ -15,6 +15,20 @@ $(function() {
        }
    });

+    $('.theme-grid .hovercard.theme').each(function() {
+        var $this = $(this);
+        if ($this.find('.acr-override').length) {
+            $this.addClass('acr');
+        } else if ($this.find('.concealed').length == $this.find('.button').length) {
+            $this.addClass('incompatible');
+            // L10n: {0} is an app name.
+            var msg = format(gettext('This theme is incompatible with your version of {0}'),
+                             [z.appName]);
+            $this.append(format('<span class="notavail">{0}</span>', msg));
+        }
+    });
+
+
    // Make this row appear 'static' so the installation buttons and pop-ups
    // stay open when hovering outside the item row.
    $(document.body).bind('newStatic', function() {