Merge lp:~elachuni/ubuntu-webcatalog/featured-apps into lp:ubuntu-webcatalog

[Anthony Lenton]

Implemented a "featured apps" widget for the front page, similar to the one on https://developer.ubuntu.com/

Overview
========
This branch implements a "featured apps" widget for the front page, similar to the one on https://developer.ubuntu.com/

Details
=======
No javascript was taken from developer.u.c as we already have a YUI carousel widget in place for the exhibits widget. Instead, I generalized that a bit so that the controls could be placed outside of the main carousel container.

The list of featured apps was added via a setting. The data for each app is taken straight from the database. If anything in the app seems wrong this would need to be customized on the app itself, and currently would be overridden the next time app-install-data is imported.

The tidy solution for this would be to allow per-app customizations, but this was left for another branch.

A very short video showing off the featured apps widget: http://people.canonical.com/~anthony/featured_apps.ogv

[Danny Tamez (zematynnad)]

Nice stuff!

review: Approve

=== added file 'src/webcatalog/managers.py'
--- src/webcatalog/managers.py	1970-01-01 00:00:00 +0000
+++ src/webcatalog/managers.py	2012-03-08 18:33:37 +0000
@@ -0,0 +1,38 @@
+#   -*- coding: utf-8 -*-
+#   This file is part of the Apps Directory
+#   Copyright (C) 2011 Canonical Ltd.
+#
+#   This program is free software: you can redistribute it and/or modify
+#   it under the terms of the GNU Affero General Public License as
+#   published by the Free Software Foundation, either version 3 of the
+#   License, or (at your option) any later version.
+#
+#   This program is distributed in the hope that it will be useful,
+#   but WITHOUT ANY WARRANTY; without even the implied warranty of
+#   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#   GNU Affero General Public License for more details.
+#
+#   You should have received a copy of the GNU Affero General Public License
+#   along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+"""Django object managers."""
+
+from __future__ import (
+    absolute_import,
+    with_statement,
+    )
+
+
+__metaclass__ = type
+__all__ = [
+    'ApplicationManager',
+    ]
+
+from django.db import models
+
+
+class ApplicationManager(models.Manager):
+    def find_best(self, **kwargs):
+        options = self.filter(**kwargs).order_by('-distroseries__version')
+        if options.exists():
+            return options[0]

=== modified file 'src/webcatalog/models/applications.py'
--- src/webcatalog/models/applications.py	2012-03-01 21:38:31 +0000
+++ src/webcatalog/models/applications.py	2012-03-08 18:33:37 +0000
@@ -31,6 +31,7 @@
 from django.db import models
 
 from webcatalog.department_filters import department_filters
+from webcatalog.managers import ApplicationManager
 
 __metaclass__ = type
 __all__ = [
@@ -103,6 +104,8 @@
     # series etc.)
     description = models.TextField(blank=True)
 
+    objects = ApplicationManager()
+
     def __unicode__(self):
         return u"{0} ({1})".format(self.name, self.package_name)
 

=== modified file 'src/webcatalog/schema.py'
--- src/webcatalog/schema.py	2012-03-06 16:47:42 +0000
+++ src/webcatalog/schema.py	2012-03-08 18:33:37 +0000
@@ -17,8 +17,6 @@
 
 """configglue schema for the Apps Directory."""
 
-import django
-
 from configglue.pyschema import ConfigSection
 from configglue.pyschema.options import (
     BoolConfigOption,
@@ -63,6 +61,8 @@
     webcatalog.oauth_data_store = StringConfigOption(
         default='webcatalog.models.oauthtoken.DataStore')
     webcatalog.convoy_root = StringConfigOption()
+    webcatalog.featured_apps = LinesConfigOption(item=StringConfigOption(),
+        default=[])
 
     google = ConfigSection()
     google.google_analytics_id = StringConfigOption()

=== modified file 'src/webcatalog/static/css/carousel.css'
--- src/webcatalog/static/css/carousel.css	2012-03-06 16:55:20 +0000
+++ src/webcatalog/static/css/carousel.css	2012-03-08 18:33:37 +0000
@@ -1,96 +1,176 @@
+/* Base carousel */
 .carousel-wrapper {
     position: relative;
-    height: 200px;
     overflow: hidden;
 }
-#carousel  {
+.carousel  {
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     position: absolute;
-    background: #333;
     display: block;
 }
-#carousel .next, #carousel .prev {
-    background: url(/assets/images/arrow-sprite.png) no-repeat 0 0;
-    position: absolute;
-    z-index: 20;
-    width: 33px;
-    height: 66px;
-    margin-top: -33px;
-}
-#carousel .next:active, #carousel .prev:active {
-    margin-top: -32px;
-    outline: none;
-}
-#carousel .next span, #carousel .prev span {
-    position:absolute;
-    left: -9999em;
-    height: 0;
-    width: 0;
-}
-#carousel .prev {
-    left: 0;
-    top: 50%;
-    background-position:0 0;
-}
-#carousel .prev:hover, #carousel .prev:focus {
-    outline: none;
-    background-position: 0 -116px;
-}
-#carousel .next {
-    right: 0;
-    top: 50%;
-    background-position: 0 -232px;
-}
-#carousel .next:hover, #carousel .next:focus {
-    outline: none;
-    background-position: 0 -348px;
-}
-#carousel .pagination {
+.carousel .pagination {
     position: absolute;
     z-index: 20;
     left: 50%;
     top: 87%;
     margin-left: -35px;
 }
-#carousel .pagination li {
+.carousel .pagination li {
     float: left;
     margin-right: 10px;
 }
-#carousel .pagination li a {
+.carousel .pagination li a {
     display: block;
     height: 10px;
     width: 10px;
     background: #aea79f;
     border-radius: 20px;
 }
-#carousel .pagination li a:hover, #carousel .pagination li a:focus,
-#carousel .pagination li a.active:hover, #carousel .pagination li a.active:focus {
+.carousel .pagination li a:hover, .carousel .pagination li a:focus,
+.carousel .pagination li a.active:hover, .carousel .pagination li a.active:focus {
     background-color: #dd4814;
 }
-#carousel .pagination li a.active {
+.carousel .pagination li a.active {
     background-color: #fff;
 }
-#carousel .pagination li a span {
+.carousel .pagination li a span {
     position: absolute;
     left: -999em;
 }
-#carousel .carousel {
+.carousel .carouselol {
     width: 10000px;
     overflow: hidden;
     position: relative;
 }
-#carousel .carousel li {
+.carousel .carouselol li {
     position: relative;
     display: block;
-    background: #333;
     float: left;
 }
-#carousel .carousel a {
+.carousel .carouselol a {
     cursor: hand;
 }
-#carousel .carousel .disabled {
+.carousel .carouselol .disabled {
     display: none;
 }
+/* End base carousel */
+
+/* Exhibits carousel */
+.exhibits-widget {
+    margin-bottom: 32px;
+}
+.exhibits-widget .carousel-wrapper{
+    height: 200px;
+}
+.exhibits-widget .carousel .next, .exhibits-widget .carousel .prev {
+    background: url(/assets/images/arrow-sprite.png) no-repeat 0 0;
+    position: absolute;
+    z-index: 20;
+    width: 33px;
+    height: 66px;
+    margin-top: -33px;
+}
+.exhibits-widget .carousel .next:active, .exhibits-widget .carousel .prev:active {
+    margin-top: -32px;
+    outline: none;
+}
+.exhibits-widget .carousel .next span, .exhibits-widget .carousel .prev span {
+    position:absolute;
+    left: -9999em;
+    height: 0;
+    width: 0;
+}
+.exhibits-widget .carousel .prev {
+    left: 0;
+    top: 50%;
+    background-position:0 0;
+}
+.exhibits-widget .carousel .prev:hover, .exhibits-widget .carousel .prev:focus {
+    outline: none;
+    background-position: 0 -116px;
+}
+.exhibits-widget .carousel .next {
+    right: 0;
+    top: 50%;
+    background-position: 0 -232px;
+}
+.exhibits-widget .carousel .next:hover, .exhibits-widget .carousel .next:focus {
+    outline: none;
+    background-position: 0 -348px;
+}
+
+/* End exhibits carousel */
+
+/* Featured apps carousel */
+.featured-widget {
+    background: url("/assets/images/pattern-featured.gif") repeat scroll 0 0 #ebe9e7;
+    border: 2px solid #aea79f;
+    border-radius: 4px 4px 4px 4px;
+    margin-bottom: 30px;
+    overflow: hidden;
+    padding: 5px;
+}
+.featured-widget .carousel-wrapper{
+    height: 140px;
+}
+.featured-widget div.carousel-container {
+    background-color: #fff;
+    border: 1px solid #aea79f;
+    border-radius: 4px 4px 4px 4px;
+    overflow: hidden;
+    padding: 10px;
+}
+
+#content .featured-widget table {
+    width: 874px;
+}
+#content .featured-widget table td {
+    border-right: 1px dotted #AEA79F;
+    border-bottom: 0;
+    padding: 0 10px;
+    width: 202px;
+}
+#featured-carousel .pagination li a.active {
+    background-color: #333;
+}
+
+#featured-controls {
+    width: 70px;
+    height: 32px;
+    float: right;
+}
+
+#featured-controls .next, #featured-controls .prev {
+    background: url(/assets/images/arrow-sliders.png) no-repeat 0 0;
+    float: left;
+    z-index: 20;
+    width: 32px;
+    height: 29px;
+}
+#featured-controls .next span, #featured-controls .prev span {
+    position:absolute;
+    left: -9999em;
+    height: 0;
+    width: 0;
+}
+#featured-controls .prev {
+    background-position:0 0;
+}
+#featured-controls .next {
+    background-position: -32px 0;
+}
+#featured-controls .prev:hover, #featured-controls .prev:focus,
+#featured-controls .next:hover, #featured-controls .next:focus {
+    outline: none;
+}
+
+.featured-widget img.icon64 {
+    margin: 0 8px 40px 0;
+    float: left;
+}
+.featured-widget h4 {
+    font-weight: bold;
+}

=== added file 'src/webcatalog/static/images/arrow-sliders.png'
Binary files src/webcatalog/static/images/arrow-sliders.png	1970-01-01 00:00:00 +0000 and src/webcatalog/static/images/arrow-sliders.png	2012-03-08 18:33:37 +0000 differ
=== added file 'src/webcatalog/static/images/pattern-featured.gif'
Binary files src/webcatalog/static/images/pattern-featured.gif	1970-01-01 00:00:00 +0000 and src/webcatalog/static/images/pattern-featured.gif	2012-03-08 18:33:37 +0000 differ
=== modified file 'src/webcatalog/static/js/carousel.js'
--- src/webcatalog/static/js/carousel.js	2012-03-05 23:14:54 +0000
+++ src/webcatalog/static/js/carousel.js	2012-03-08 18:33:37 +0000
@@ -91,12 +91,12 @@
         generateControls: function() {
             var prev = Y.Node.create('<a href="#" class="prev"><span>Previous Slide</span></a>'),
                 next = Y.Node.create('<a href="#" class="next"><span>Next Slide</span></a>'),
-                nodeContainer = this.get("nodeContainer");
+                controlsContainer = this.get("controlsContainer");
 
             next.on("click", this.next, this);
             prev.on("click", this.prev, this);
-            nodeContainer.appendChild(prev);
-            nodeContainer.appendChild(next);
+            controlsContainer.appendChild(prev);
+            controlsContainer.appendChild(next);
         },
         advance: function(e, val){
             if (e) {
@@ -157,7 +157,7 @@
     }, {
         NAME: "carousel",
         ATTRS: {
-            carouselClassName: { value: "carousel"},
+            carouselClassName: { value: "carouselol"},
             containerHeight: { value: null },
             containerWidth: { value: null },
             nodeContainer: {
@@ -169,6 +169,15 @@
                     return n;
                 }
             },
+            controlsContainer: {
+                setter: function(sel) {
+                    var n = Y.one(sel);
+                    if (!n) {
+                        Y.log('UWC:Carousel - invalid selector provided: ' + sel);
+                    }
+                    return n;
+                }
+            },
             slideAnimDuration: { value: 1 },
             slideAnimInterval: { value: 5000 },
             slideEasing: { value: Y.Easing.easeBoth },

=== modified file 'src/webcatalog/templates/webcatalog/exhibits_widget.html'
--- src/webcatalog/templates/webcatalog/exhibits_widget.html	2012-03-06 16:55:20 +0000
+++ src/webcatalog/templates/webcatalog/exhibits_widget.html	2012-03-08 18:33:37 +0000
@@ -1,6 +1,6 @@
 <div class="carousel-wrapper">
-    <div id="carousel">
-        <ol class="carousel">
+    <div id="exhibits-carousel" class="carousel">
+        <ol class="carouselol">
         {% autoescape off %}
         {% comment %}
 All slides except the first one start off with a "disabled" class, which will
@@ -22,7 +22,8 @@
 <script type="text/javascript">
 YUI({combine: true, comboBase: '{% url wc-combo %}?', root: 'yui/3.4.0/build/'}).use('uwc-carousel', function(Y) {
     var caro = new Y.uwc.Carousel({
-        nodeContainer: "#carousel",
+        nodeContainer: "#exhibits-carousel",
+        controlsContainer: "#exhibits-carousel",
         containerHeight: 200,
         containerWidth: 912,
         autoPlay: true

=== added file 'src/webcatalog/templates/webcatalog/featured_apps_widget.html'
--- src/webcatalog/templates/webcatalog/featured_apps_widget.html	1970-01-01 00:00:00 +0000
+++ src/webcatalog/templates/webcatalog/featured_apps_widget.html	2012-03-08 18:33:37 +0000
@@ -0,0 +1,52 @@
+<div id="featured-controls"></div>
+    <h3>Featured apps on the Ubuntu Software Centre</h3>
+<div class="carousel-container">
+    <div class="carousel-wrapper">
+        <div id="featured-carousel" class="carousel">
+            <ol class="carouselol">
+            {% autoescape off %}
+            {% comment %}
+All slides except the first one start off with a "disabled" class, which will
+make them "display: none".  This will avoid loading pointless remote resources
+(banners) if Javascript is disabled.  The "disabled" class is then removed via
+Javascript.
+            {% endcomment %}
+            <li class="slide{% if forloop.counter > 1%} disabled{% endif %}">
+                <table><tr>
+            {% for app in featured_apps %}
+                <td>
+                  {% if app.icon %}
+                      <img class="icon64" src="{{ app.icon.url }}"/>
+                  {% else %}
+                      <img class="icon64" src="{{ STATIC_URL }}images/applications-other-64.png"/>
+                  {% endif %}
+                <h4><a href="{% url wc-package-detail distro=app.distroseries.code_name package_name=app.package_name  %}">{{ app.name }}</a></h4>
+                <p>{{ app.departments.all.0.name }} | <b>{% if app.price %}${{ app.price }}{% else %}FREE{% endif %}</b></p>
+                <p>{{ app.comment }}</p>
+                </td>
+                {% if forloop.counter|divisibleby:4 %}
+                </tr></table>
+            </li>
+            <li class="slide{% if forloop.counter > 1%} disabled{% endif %}">
+                <table><tr>
+                {% endif %}
+            {% endfor %}
+                </tr></table>
+            </li>
+            {% endautoescape %}
+            </ol>
+        </div>
+    </div>
+</div>
+<script type="text/javascript">
+YUI({combine: true, comboBase: '{% url wc-combo %}?', root: 'yui/3.4.0/build/'}).use('uwc-carousel', function(Y) {
+    var caro = new Y.uwc.Carousel({
+        nodeContainer: "#featured-carousel",
+        controlsContainer: "#featured-controls",
+        containerHeight: 200,
+        containerWidth: 912,
+        autoPlay: false
+    });
+    Y.all('.slide').removeClass('disabled');
+});
+</script>

=== modified file 'src/webcatalog/templates/webcatalog/index.html'
--- src/webcatalog/templates/webcatalog/index.html	2012-03-05 23:14:54 +0000
+++ src/webcatalog/templates/webcatalog/index.html	2012-03-08 18:33:37 +0000
@@ -19,6 +19,12 @@
 </div>
 {% endif %}
 
+{% if featured_apps %}
+<div class="featured-widget">
+    {% include "webcatalog/featured_apps_widget.html" %}
+</div>
+{% endif %}
+
 <h3>{% trans "Browse application departments" %}:</h3>
 
 {% for dept in depts %}

=== modified file 'src/webcatalog/tests/__init__.py'
--- src/webcatalog/tests/__init__.py	2012-01-06 17:54:47 +0000
+++ src/webcatalog/tests/__init__.py	2012-03-08 18:33:37 +0000
@@ -23,6 +23,7 @@
 from .test_forms import *
 from .test_handlers import *
 from .test_models import *
+from .test_managers import *
 from .test_pep8 import *
 from .test_templatetags import *
 from .test_utilities import *

=== added file 'src/webcatalog/tests/test_managers.py'
--- src/webcatalog/tests/test_managers.py	1970-01-01 00:00:00 +0000
+++ src/webcatalog/tests/test_managers.py	2012-03-08 18:33:37 +0000
@@ -0,0 +1,50 @@
+#   -*- coding: utf-8 -*-
+#   This file is part of the Apps Directory
+#   Copyright (C) 2011 Canonical Ltd.
+#
+#   This program is free software: you can redistribute it and/or modify
+#   it under the terms of the GNU Affero General Public License as
+#   published by the Free Software Foundation, either version 3 of the
+#   License, or (at your option) any later version.
+#
+#   This program is distributed in the hope that it will be useful,
+#   but WITHOUT ANY WARRANTY; without even the implied warranty of
+#   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#   GNU Affero General Public License for more details.
+#
+#   You should have received a copy of the GNU Affero General Public License
+#   along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+"""Test cases for object managers."""
+
+from __future__ import (
+    absolute_import,
+    with_statement,
+    )
+
+
+from webcatalog.tests.factory import TestCaseWithFactory
+from webcatalog.models import Application
+
+__metaclass__ = type
+__all__ = [
+    'ApplicationManagerTestCase',
+    ]
+
+
+class ApplicationManagerTestCase(TestCaseWithFactory):
+    def test_find_best_returns_none(self):
+        self.assertIsNone(Application.objects.find_best(package_name='foo'))
+
+    def test_find_best_returns_latest(self):
+        latest = self.factory.make_distroseries(version='14.10')
+        older = self.factory.make_distroseries(version='14.04')
+
+        expected = self.factory.make_application(distroseries=latest)
+        self.factory.make_application(package_name=expected.package_name,
+            distroseries=older)
+
+        retrieved = Application.objects.find_best(
+            package_name=expected.package_name)
+
+        self.assertEqual(expected.id, retrieved.id)

=== modified file 'src/webcatalog/tests/test_views.py'
--- src/webcatalog/tests/test_views.py	2012-03-05 23:14:54 +0000
+++ src/webcatalog/tests/test_views.py	2012-03-08 18:33:37 +0000
@@ -421,6 +421,14 @@
 
         self.assertContains(response, '<li class="slide', count=1)
 
+    def test_featured_apps(self):
+        app = self.factory.make_application(package_name='foobar')
+
+        with patch_settings(FEATURED_APPS=['foobar', 'baz']):
+            response = self.client.get(reverse('wc-index'))
+
+        self.assertEqual([app], response.context[0]['featured_apps'])
+
 
 class OverviewTestCase(TestCaseWithFactory):
     def test_department_contains_links_to_subdepartments(self):

=== modified file 'src/webcatalog/views.py'
--- src/webcatalog/views.py	2012-03-06 16:47:42 +0000
+++ src/webcatalog/views.py	2012-03-08 18:33:37 +0000
@@ -117,10 +117,14 @@
     exhibits = list(Exhibit.objects.filter(Q(display=True) |
         Q(display=None, published=True,)))
     shuffle(exhibits)
+    featured_apps = [Application.objects.find_best(package_name=app)
+                     for app in settings.FEATURED_APPS]
+    featured_apps = [x for x in featured_apps if x]
 
     context = RequestContext(request, dict={
         'depts': depts,
         'exhibits': exhibits,
+        'featured_apps': featured_apps,
     })
     return render_to_response('webcatalog/index.html',
         context_instance=context)