Skip to content
Browse files

[bug 967053] Add product picker to l10n dashboard

  • Loading branch information...
1 parent c79c0f8 commit a4cc12c2b6523787ff8cf26be6d7241db09dc319 @rehandalal rehandalal committed
View
3 kitsune/dashboards/templates/dashboards/aggregated_metrics.html
@@ -1,5 +1,6 @@
{% extends "base.html" %}
-{% from "dashboards/includes/macros.html" import localization_sidebar_nav, product_choice_list %}
+{% from "dashboards/includes/macros.html" import localization_sidebar_nav %}
+{% from "dashboards/includes/macros.html" import product_choice_list with context %}
{% set title = _('Aggregated Localization Metrics') %}
{% set scripts = ('wiki', 'rickshaw', 'wiki.dashboard') %}
{% set styles = ('rickshaw', 'kbdashboards') %}
View
36 kitsune/dashboards/templates/dashboards/includes/macros.html
@@ -206,29 +206,27 @@
{% endmacro %}
{% macro product_choice_list(products, current, url_) %}
- <div class="choice-list">
- <label>{{ _('Product:') }}</label>
- <ul>
- <li>
- {% if current %}
+ <div class="product-picker">
+ <div class="cf" data-ui-type="carousel" data-left="pp-left" data-right="pp-right">
+ <ul>
+ <li {{ current|class_selected(None) }}>
<a href="{{ url_ }}">
- {{ _('All Products') }}
+ <img src="{{ STATIC_URL }}img/blank.png" class="logo-sprite sumo">
+ <span>{{ _('All Products') }}</span>
</a>
- {% else %}
- {{ _('All Products') }}
- {% endif %}
- {% for p in products %}
- <li>
- {% if current == p %}
- {{ _(p.title, 'DB: products.Product.title') }}
- {% else %}
+ </li>
+ {% for p in products %}
+ <li {{ current|class_selected(p) }}>
<a href="{{ url_|urlparams(product=p.slug) }}">
- {{ _(p.title, 'DB: products.Product.title') }}
+ <img src="{{ STATIC_URL }}img/blank.png" class="logo-sprite" style="{% if p.image %}background-image: url({{ p.sprite_url() }}); background-position: -100px -{{ 100 + (p.image_offset * 296) }}px;{% else %}background-image: url({{ p.image_url }}){% endif %}" alt="" />
+ <span>{{ _(p.title, 'DB: products.Product.title') }}</span>
</a>
- {% endif %}
- </li>
- {% endfor %}
- </ul>
+ </li>
+ {% endfor %}
+ </ul>
+ </div>
+ <span class="left" id="pp-left"></span>
+ <span class="right" id="pp-right"></span>
</div>
{% endmacro %}
View
3 kitsune/dashboards/templates/dashboards/locale_metrics.html
@@ -1,5 +1,6 @@
{% extends "base.html" %}
-{% from "dashboards/includes/macros.html" import localization_sidebar_nav, product_choice_list %}
+{% from "dashboards/includes/macros.html" import localization_sidebar_nav %}
+{% from "dashboards/includes/macros.html" import product_choice_list with context %}
{% set title = _('[{locale}] Locale Metrics')|f(locale=current_locale) %}
{% set scripts = ('wiki', 'rickshaw', 'wiki.dashboard') %}
{% set styles = ('rickshaw', 'kbdashboards') %}
View
2 kitsune/questions/templates/questions/metrics.html
@@ -1,5 +1,5 @@
{% extends "questions/base.html" %}
-{% from "dashboards/includes/macros.html" import product_choice_list %}
+{% from "dashboards/includes/macros.html" import product_choice_list with context %}
{% set title = _('Support Forum Metrics') %}
{% set crumbs = [(url('questions.questions'), _('Support Forum')),
(None, _('Metrics'))] %}
View
BIN kitsune/sumo/static/img/carousel-arrow-sprite.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN kitsune/sumo/static/img/sumo-icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
46 kitsune/sumo/static/js/ui.js
@@ -79,6 +79,52 @@
});
});
+ $(window).load(function() {
+ $('[data-ui-type="carousel"]').each(function() {
+ var $this = $(this);
+ var $container = $(this).children().first()
+
+ var width = 0;
+ var height = 0;
+
+ $container.children().each(function() {
+ if (height < $(this).outerHeight()) {
+ height = $(this).outerHeight();
+ }
+ width += $(this).outerWidth() + parseInt($(this).css('marginRight')) + parseInt($(this).css('marginLeft'));
+ });
+
+ $this.css('height', height + 'px');
+ $container.css({'width': width + 'px', 'height': height + 'px'});
+ $container.children().css('height', height + 'px');
+
+ var $left = $('#' + $this.data('left'));
+ var $right = $('#' + $this.data('right'));
+
+ var scrollInterval;
+
+ $left.on('mouseover', function() {
+ scrollInterval = setInterval(function() {
+ $this.scrollLeft($this.scrollLeft() - 1);
+ }, 1);
+ });
+
+ $left.on('mouseout', function() {
+ clearInterval(scrollInterval);
+ });
+
+ $right.on('mouseover', function() {
+ scrollInterval = setInterval(function() {
+ $this.scrollLeft($this.scrollLeft() + 1);
+ }, 1);
+ });
+
+ $right.on('mouseout', function() {
+ clearInterval(scrollInterval);
+ });
+ });
+ });
+
function initFolding() {
var $folders = $('.sidebar-folding > li');
// When a header is clicked, expand/contract the menu items.
View
1 kitsune/sumo/static/less/kbdashboards.less
@@ -367,7 +367,6 @@
}
}
-
/* Some tweaks for Need Changes table */
#need-changes-table {
td {
View
94 kitsune/sumo/static/less/main.less
@@ -1571,3 +1571,97 @@ input[type=button],
}
}
}
+
+.product-picker {
+ position: relative;
+
+ > div {
+ margin: 20px 50px 0;
+ overflow: hidden;
+
+ > ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ > li {
+ display: block;
+ float: left;
+ margin-right: 20px;
+ opacity: 0.6;
+ .transition(opacity 0.4s);
+ width: 135px;
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ &:last-of-type {
+ margin-right: 0;
+ }
+
+ &.selected {
+ font-weight: bold;
+ opacity: 1;
+
+ > a,
+ > a:visited {
+ color: #000
+ }
+ }
+
+ > a,
+ > a:visited {
+ background: #fff;
+ border: 1px solid @borderLightGrey;
+ .border-radius(6px);
+ .box-sizing(border-box);
+ color: @textDarkGrey;
+ display: block;
+ height: 100%;
+ padding: 10px;
+ text-align: center;
+
+ > span {
+ display: block;
+ }
+
+ > .logo-sprite {
+ margin: 0 10px;
+ }
+ }
+
+ > a:hover {
+ text-decoration: none;
+ }
+ }
+ }
+ }
+
+ > .left,
+ > .right {
+ background-image: url('../img/carousel-arrow-sprite.png');
+ background-repeat: no-repeat;
+ bottom: 0;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ width: 50px;
+ }
+
+ > .left {
+ background-position: -50px center;
+ left: 0;
+ }
+
+ > .right {
+ background-position: -200px center;
+ right: 0;
+ }
+
+ .logo-sprite {
+ &.sumo {
+ background-image: url('../img/sumo-icon.png');
+ }
+ }
+}

0 comments on commit a4cc12c

Please sign in to comment.
Something went wrong with that request. Please try again.