diff options
Diffstat (limited to 'hyperkitty/static')
5 files changed, 203 insertions, 370 deletions
diff --git a/hyperkitty/static/hyperkitty/css/hyperkitty-common.css b/hyperkitty/static/hyperkitty/css/hyperkitty-common.css index c262308..310bfb4 100644 --- a/hyperkitty/static/hyperkitty/css/hyperkitty-common.css +++ b/hyperkitty/static/hyperkitty/css/hyperkitty-common.css @@ -78,7 +78,12 @@ form .buttons .submit { } -/* On the thread list and the overview page */ +/* On the thread list, overview page and list directory */ +ul.list-stats { + list-style-type: none; + margin: 0; + padding: 0; +} .participant, .discussion { padding-left: 20px; background: no-repeat scroll left center; diff --git a/hyperkitty/static/hyperkitty/css/hyperkitty-index.css b/hyperkitty/static/hyperkitty/css/hyperkitty-index.css index 0bd8889..9425f49 100644 --- a/hyperkitty/static/hyperkitty/css/hyperkitty-index.css +++ b/hyperkitty/static/hyperkitty/css/hyperkitty-index.css @@ -6,32 +6,79 @@ clear: both; } -h1.lists { + +.all-lists .lists-menu h2 { + font-size: 100%; + line-height: 100%; + font-weight: bold; + color: #666; + text-transform: uppercase; + margin: 0; + margin-bottom: 1em; + padding: 0; +} +.all-lists .lists-menu ul { + list-style-type: none; + margin-left: 1em; +} +.all-lists .lists-menu li { + margin: 0.5em 0; +} + +.all-lists h1.lists { margin-bottom: 0.5em; } -.all-lists .list-name { +.all-lists table.lists th { + color: #999; + text-transform: uppercase; + font-size: small; + font-weight: normal; +} +.all-lists table.lists tbody tr { + border: 1px solid #ccc; + margin: 0.2em 0; +} +.all-lists table.lists td { + vertical-align: middle; + padding: 5px 8px; + margin-bottom: 5px; +} +.all-lists table.lists .list-name { font-size: 120%; color: black; font-weight: bold; } -.all-lists .list-address { - font-size: 90%; +.all-lists table.lists .list-tags { + font-size: 80%; + color: #999; font-style: italic; } -.all-lists a { - display: block; - padding: 2em; - margin: 1em auto; - overflow: hidden; - border: 1px solid #ccc; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - color: black; +.all-lists table.lists .list-address { + font-size: 90%; +} +.all-lists table.lists td.activity { + width: 260px; +} +.all-lists table.lists ul.list-stats { + margin: 0; + text-align: center; +} +.all-lists table.lists ul.list-stats li { + display: inline; + font-size: 85%; } -.all-lists a:hover { - text-decoration: none; + +.all-lists table.lists tr.private { + background-color: #e6f2f5; +} +.all-lists table.lists tr.private .list-name { + color: #2e6c83; +} + +.all-lists table.lists tr.inactive { background-color: #eee; - color: black; +} +.all-lists table.lists tr.inactive .list-name { + color: #999; } diff --git a/hyperkitty/static/hyperkitty/js/hyperkitty-common.js b/hyperkitty/static/hyperkitty/js/hyperkitty-common.js index 1fb1eb3..41f2c3e 100644 --- a/hyperkitty/static/hyperkitty/js/hyperkitty-common.js +++ b/hyperkitty/static/hyperkitty/js/hyperkitty-common.js @@ -33,6 +33,7 @@ function form_to_json(form) { } + /* * Voting */ @@ -73,6 +74,7 @@ function setup_vote(baseElem) { } + /* * New messages (or replies) */ @@ -103,6 +105,136 @@ function setup_attachments(baseElem) { } + +/* + * Recent activity bar chart + */ +function chart(elem_id, data, default_props) { + /* Function for grid lines, for x-axis */ + function make_x_axis() { + return d3.svg.axis() + .scale(x) + .orient("bottom") + .ticks(d3.time.days, 1) + } + + /* Function for grid lines, for y-axis */ + function make_y_axis() { + return d3.svg.axis() + .scale(y) + .orient("left") + .ticks(5) + } + if (typeof default_props === "undefined") { + default_props = {}; + } + + var props = {width: 250, height: 50}; + $.extend(props, default_props); + var margin = {top: 0, right: 0, bottom: 0, left: 0}, + width = props.width - margin.left - margin.right, + height = props.height - margin.top - margin.bottom; + + var w = Math.floor(width / data.length); + + var format_in = d3.time.format("%Y-%m-%d"); + var format_out = d3.time.format(""); + + var x = d3.time.scale() + .range([0, width]); + + var y = d3.scale.linear() + .range([height, 0]); + + var xAxis = d3.svg.axis() + .scale(x) + .orient("bottom") + .tickSize(0,0) // change to 2,2 for ticks + .tickFormat(format_out) + .ticks(d3.time.days, 1); + + var yAxis = d3.svg.axis() + .scale(y) + .orient("left") + .tickSize(0,0) // change to 4,3 for ticks + .ticks("") // change to 2 for y-axis tick labels + .tickSubdivide(1); + + var area = d3.svg.area() + .x(function(d) { return x(d.date); }) + // .y0(height) + .y(function(d) { return y(d.count); }); + + var svg = d3.select(elem_id).append("svg") + .attr("id", "chart-data") + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g") + .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + + data.forEach(function(d) { + d.date = format_in.parse(d.date); + d.count = parseInt(d.count); + }); + + x.domain(d3.extent(data, function(d) { return d.date; })); + y.domain([0, d3.max(data, function(d) { return d.count; })]); + + + /* Draw the grid lines, for x-axis */ + svg.append("g") + .attr("class", "grid") + .attr("Transform", "translate(0, " + height + ")") + .call(make_x_axis() + .tickSize(height, 0, 0) + .tickFormat("") + ) + + /* Draw the grid lines, for y-axis */ + svg.append("g") + .attr("class", "grid") + .call(make_y_axis() + .tickSize(-width, 0, 0) + .tickFormat("") + ) + + svg.append("g").attr("class","bars").selectAll("rect") + .data(data) + .enter().append("rect") + .attr("x", function(d) { return x(d.date); }) + //.attr("y0", height) + .attr("y", function(d) { return y(d.count); }) + .attr("width", w) + .attr("height", function(d) { return height - y(d.count); }); + + /* draw x-axis */ + svg.append("g") + .attr("class", "x axis") + .attr("transform", "translate(0," + height + ")") + .call(xAxis) + /*.selectAll("text") + .attr("y", -5) + .attr("x", -30) + .attr("transform", function(d) { + return "rotate(-90)" + });*/ + + /* Y-axis label */ + svg.append("g") + .attr("class", "y axis") + .call(yAxis) + /*.append("text") + .attr("transform", "rotate(-90)") + .attr("y", 0) + .attr("x", 0 - height/2) + .attr("dy", "-3em") + .style("text-anchor", "middle") + .style("fill", "#777") + .text("Messages"); */ +} + + + /* * Misc. */ @@ -131,6 +263,7 @@ function setup_flash_messages() { } + /* * Activate */ diff --git a/hyperkitty/static/hyperkitty/js/hyperkitty-frontpage.js b/hyperkitty/static/hyperkitty/js/hyperkitty-frontpage.js deleted file mode 100644 index 2ba7d43..0000000 --- a/hyperkitty/static/hyperkitty/js/hyperkitty-frontpage.js +++ /dev/null @@ -1,67 +0,0 @@ -/* - * Copyright (C) 1998-2012 by the Free Software Foundation, Inc. - * - * This file is part of HyperKitty. - * - * HyperKitty is free software: you can redistribute it and/or modify it under - * the terms of the GNU General Public License as published by the Free - * Software Foundation, either version 3 of the License, or (at your option) - * any later version. - * - * HyperKitty 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 General Public License for - * more details. - * - * You should have received a copy of the GNU General Public License along with - * HyperKitty. If not, see <http://www.gnu.org/licenses/>. - * - * Author: Aurelien Bompard <abompard@fedoraproject.org> - */ - - -/* - * List descriptions on the front page - */ -function update_list_properties(url) { - // Don't try to update them all at once, there may be hundreds of lists - var bulksize = 5; - // If there is still an ajaxloader, then request the properties - var lists = $(".all-lists .mailinglist img.ajaxloader") - .slice(0, bulksize).parents(".mailinglist"); - if (lists.length === 0) { - return; - } - var listnames = $.makeArray(lists.find(".list-address").map( - function() { return $(this).text(); })); - $.ajax({ - dataType: "json", - url: url + "?name=" + listnames.join("&name="), - success: function(data) { - lists.each(function() { - var name = $(this).find(".list-address").text(); - if (!data[name]) { - return; - } - if (data[name]["display_name"]) { - $(this).find(".list-name").html(data[name]["display_name"]); - } - if (data[name]["description"]) { - $(this).find(".list-description") - .html(data[name]["description"]); - } - }); - }, - error: function(jqXHR, textStatus, errorThrown) { - //alert(jqXHR.responseText); - }, - complete: function(jqXHR, textStatus) { - // Request may have failed if mailman's REST server is unavailable, - // keep going anyway. - lists.find("img.ajaxloader").remove(); - // do it again, until all lists have been populated (or at least we - // tried to) - update_list_properties(url); - } - }); -} diff --git a/hyperkitty/static/hyperkitty/js/hyperkitty-overview.js b/hyperkitty/static/hyperkitty/js/hyperkitty-overview.js deleted file mode 100644 index e020554..0000000 --- a/hyperkitty/static/hyperkitty/js/hyperkitty-overview.js +++ /dev/null @@ -1,285 +0,0 @@ -/* - * Copyright (C) 1998-2012 by the Free Software Foundation, Inc. - * - * This file is part of HyperKitty. - * - * HyperKitty is free software: you can redistribute it and/or modify it under - * the terms of the GNU General Public License as published by the Free - * Software Foundation, either version 3 of the License, or (at your option) - * any later version. - * - * HyperKitty 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 General Public License for - * more details. - * - * You should have received a copy of the GNU General Public License along with - * HyperKitty. If not, see <http://www.gnu.org/licenses/>. - * - * Author: Aurelien Bompard <abompard@fedoraproject.org> - */ - - -/* - * Recent activity graph (area graph) - */ - -function activity_graph(elem_id, dates, counts, baseurl) { - function merge(dates, counts) { - result = [] - for(i = 0; i < dates.length; i++) { - result.push({ - "date": dates[i], - "count": counts[i] - }) - } - return result; - } - - /* Function for grid lines, for x-axis */ - function make_x_axis() { - return d3.svg.axis() - .scale(x) - .orient("bottom") - .ticks(d3.time.days, 1) - } - - /* Function for grid lines, for y-axis */ - function make_y_axis() { - return d3.svg.axis() - .scale(y) - .orient("left") - .ticks(5) - } - - var data = merge(dates, counts); - var margin = {top: 20, right: 20, bottom: 50, left: 40}, - width = 350 - margin.left - margin.right, - height = 150 - margin.top - margin.bottom; - - var format_in = d3.time.format("%Y-%m-%d"); - var format_out = d3.time.format(""); - - var x = d3.time.scale() - .range([0, width]); - - var y = d3.scale.linear() - .range([height, 0]); - - var xAxis = d3.svg.axis() - .scale(x) - .orient("bottom") - .tickSize(2,2) - .tickFormat(format_out) - .ticks(d3.time.days, 1); - - var yAxis = d3.svg.axis() - .scale(y) - .orient("left") - .tickSize(4,3) - .ticks(2) - .tickSubdivide(1); - - var area = d3.svg.area() - .interpolate("monotone") - .x(function(d) { return x(d.date); }) - .y0(height) - .y1(function(d) { return y(d.count); }); - - var svg = d3.select(elem_id).append("svg") - .attr("width", width + margin.left + margin.right) - .attr("height", height + margin.top + margin.bottom) - .append("g") - .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); - - data.forEach(function(d) { - d.date = format_in.parse(d.date); - d.count = parseInt(d.count); - }); - - x.domain(d3.extent(data, function(d) { return d.date; })); - y.domain([0, d3.max(data, function(d) { return d.count; })]); - - /* Draw the grid lines, for x-axis */ - svg.append("g") - .attr("class", "grid") - .attr("Transform", "translate(0, " + height + ")") - .call(make_x_axis() - .tickSize(height, 0, 0) - .tickFormat("") - ) - - /* Draw the grid lines, for y-axis */ - svg.append("g") - .attr("class", "grid") - .call(make_y_axis() - .tickSize(-width, 0, 0) - .tickFormat("") - ) - - svg.append("path") - .datum(data) - .attr("class", "area") - .attr("d", area); - - svg.append("g") - .attr("class", "x axis") - .attr("transform", "translate(0," + height + ")") - .call(xAxis) - .selectAll("text") - .attr("y", -5) - .attr("x", -30) - .attr("transform", function(d) { - return "rotate(-90)" - }); - - /* Y-axis label */ - svg.append("g") - .attr("class", "y axis") - .call(yAxis) - .append("text") - .attr("transform", "rotate(-90)") - .attr("y", 0) - .attr("x", 0 - height/2) - .attr("dy", "-3em") - .style("text-anchor", "middle") - .style("fill", "#777") - .text("Messages"); - -} - - -/* - * Recent activity bar chart - */ -function chart(elem_id, dates, counts, baseurl) { - function merge(dates, counts) { - result = [] - for(i = 0; i < dates.length; i++) { - result.push({ - "date": dates[i], - "count": counts[i] - }) - } - return result; - } - - /* Function for grid lines, for x-axis */ - function make_x_axis() { - return d3.svg.axis() - .scale(x) - .orient("bottom") - .ticks(d3.time.days, 1) - } - - /* Function for grid lines, for y-axis */ - function make_y_axis() { - return d3.svg.axis() - .scale(y) - .orient("left") - .ticks(5) - } - - var data = merge(dates, counts); - var margin = {top: 0, right: 0, bottom: 0, left: 0}, - width = 200 - margin.left - margin.right, - height = 50 - margin.top - margin.bottom; - - var w = 5; - - var format_in = d3.time.format("%Y-%m-%d"); - var format_out = d3.time.format(""); - - var x = d3.time.scale() - .range([0, width]); - - var y = d3.scale.linear() - .range([height, 0]); - - var xAxis = d3.svg.axis() - .scale(x) - .orient("bottom") - .tickSize(0,0) // change to 2,2 for ticks - .tickFormat(format_out) - .ticks(d3.time.days, 1); - - var yAxis = d3.svg.axis() - .scale(y) - .orient("left") - .tickSize(0,0) // change to 4,3 for ticks - .ticks("") // change to 2 for y-axis tick labels - .tickSubdivide(1); - - var area = d3.svg.area() - .x(function(d) { return x(d.date); }) - // .y0(height) - .y(function(d) { return y(d.count); }); - - var svg = d3.select(elem_id).append("svg") - .attr("id", "chart-data") - .attr("width", width + margin.left + margin.right) - .attr("height", height + margin.top + margin.bottom) - .append("g") - .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); - - data.forEach(function(d) { - d.date = format_in.parse(d.date); - d.count = parseInt(d.count); - }); - - x.domain(d3.extent(data, function(d) { return d.date; })); - y.domain([0, d3.max(data, function(d) { return d.count; })]); - - - /* Draw the grid lines, for x-axis */ - svg.append("g") - .attr("class", "grid") - .attr("Transform", "translate(0, " + height + ")") - .call(make_x_axis() - .tickSize(height, 0, 0) - .tickFormat("") - ) - - /* Draw the grid lines, for y-axis */ - svg.append("g") - .attr("class", "grid") - .call(make_y_axis() - .tickSize(-width, 0, 0) - .tickFormat("") - ) - - svg.append("g").attr("class","bars").selectAll("rect") - .data(data) - .enter().append("rect") - .attr("x", function(d) { return x(d.date); }) - //.attr("y0", height) - .attr("y", function(d) { return y(d.count); }) - .attr("width", w) - .attr("height", function(d) { return height - y(d.count); }); - - /* draw x-axis */ - svg.append("g") - .attr("class", "x axis") - .attr("transform", "translate(0," + height + ")") - .call(xAxis) - /*.selectAll("text") - .attr("y", -5) - .attr("x", -30) - .attr("transform", function(d) { - return "rotate(-90)" - });*/ - - /* Y-axis label */ - svg.append("g") - .attr("class", "y axis") - .call(yAxis) - /*.append("text") - .attr("transform", "rotate(-90)") - .attr("y", 0) - .attr("x", 0 - height/2) - .attr("dy", "-3em") - .style("text-anchor", "middle") - .style("fill", "#777") - .text("Messages"); */ - -} |