Skip to content
This repository
Browse code

Initial upload to GitHub

  • Loading branch information...
commit 8590a4fc09c423fcd947d1b95b6ec3323eecddd3 0 parents
Christian Legnitto LegNeato authored
148 Bugzilla.class.php
... ... @@ -0,0 +1,148 @@
  1 +<?php
  2 +
  3 +require_once 'HTTP/Request2.php';
  4 +require_once('smarty/Smarty.class.php');
  5 +require_once(dirname(__FILE__) . '/Utils.php');
  6 +
  7 +class Bugzilla {
  8 +
  9 + // Set variables and initialize the backend
  10 + function __construct($url, $config=array(), $id=FALSE) {
  11 + $this->url = $url;
  12 + $this->id = $id;
  13 + $this->error = FALSE;
  14 + $this->data = FALSE;
  15 +
  16 + $this->_configure($config);
  17 + }
  18 +
  19 + private function _configure( $config ) {
  20 +
  21 + // Default configuration
  22 + // TODO: This should be in the main configuration
  23 + $this->config = array(
  24 + 'type' => 'bug',
  25 + 'display' => 'table',
  26 + );
  27 +
  28 + // Overlay user's desired configuration
  29 + foreach( $config as $key => $value ) {
  30 + $this->config[$key] = $value;
  31 + }
  32 + }
  33 +
  34 + // Connect and get the data
  35 + public function fetch( $query_opts_raw = FALSE ) {
  36 +
  37 + // Don't do anything if we already had an error
  38 + if( $this->error ) { return; }
  39 +
  40 + // TODO: To support loading from the DB in the future
  41 + if( $this->id ) {
  42 + $this->_fetch_by_id();
  43 + return;
  44 + }
  45 +
  46 + // Make sure query options are valid JSON
  47 + $opts = json_decode($query_opts_raw);
  48 + if( !$query_opts_raw || !$opts ) {
  49 + $this->error = 'Query options must be valid json';
  50 + return;
  51 + }
  52 +
  53 + // Do the actual fetching
  54 + $this->_fetch_by_options($opts);
  55 + }
  56 +
  57 + private function _fetch_by_id() {
  58 + // TODO: Stub
  59 + }
  60 +
  61 + // Load data from the Bugzilla REST API
  62 + private function _fetch_by_options($opts) {
  63 +
  64 + // Set up our HTTP request
  65 + $request = new HTTP_Request2($this->url . "/" . $this->config['type'],
  66 + HTTP_Request2::METHOD_GET,
  67 + array('follow_redirects' => TRUE,
  68 + // TODO: Not sure if I should do this
  69 + 'ssl_verify_peer' => FALSE));
  70 +
  71 + // The REST API requires these
  72 + $request->setHeader('Accept', 'application/json');
  73 + $request->setHeader('Content-Type', 'application/json');
  74 +
  75 + // Add in the requested query options
  76 + $url = $request->getUrl();
  77 + $url->setQueryVariables(get_object_vars($opts));
  78 +
  79 + // This is basically straight from the HTTP/Request2 docs
  80 + try {
  81 + $response = $request->send();
  82 + if (200 == $response->getStatus()) {
  83 + $this->data = json_decode($response->getBody());
  84 + } else {
  85 + $this->error = 'Server returned unexpected HTTP status: ' .
  86 + $response->getStatus() . ' ' .
  87 + $response->getReasonPhrase();
  88 + return;
  89 + }
  90 + } catch (HTTP_Request2_Exception $e) {
  91 + $this->error = $e->getMessage();
  92 + return;
  93 + }
  94 +
  95 + // Now that we have the data, process it
  96 + $this->_process_data();
  97 +
  98 + }
  99 +
  100 + private function _process_data() {
  101 + // TODO: Stub
  102 + }
  103 +
  104 + public function render() {
  105 +
  106 + global $wgBugzillaSmartyTemplateDir;
  107 + global $wgBugzillaSmartyCompileDir;
  108 + global $wgBugzillaSmartyConfigDir;
  109 + global $wgBugzillaSmartyCacheDir;
  110 +
  111 + // If we have an error, render it out instead
  112 + if( $this->error ) {
  113 + return $this->_render_error();
  114 + }
  115 +
  116 + // No error, we're good to go
  117 + $smarty = new Smarty();
  118 + $smarty->template_dir = $wgBugzillaSmartyTemplateDir;
  119 + $smarty->compile_dir = $wgBugzillaSmartyCompileDir;
  120 + $smarty->config_dir = $wgBugzillaSmartyConfigDir;
  121 + $smarty->cache_dir = $wgBugzillaSmartyCacheDir;
  122 +
  123 +
  124 + // TODO: This is basically a prototype, needs to be better
  125 + if( $this->config['display'] == 'table' ) {
  126 + $smarty->assign('bugs', $this->data->bugs);
  127 + return $smarty->fetch('bug/table.tpl');
  128 +
  129 + elseif( $this->config['display'] == 'bar' ) {
  130 + $smarty->assign('type', 'bhs');
  131 + #$smarty->assign('type', 'p');
  132 + $smarty->assign('size', '200x300');
  133 + $smarty->assign('x_labels', implode('|', $this->data->x_labels));
  134 + $smarty->assign('data', implode(',', $this->data->data));
  135 + return $smarty->fetch('count/bar.tpl');
  136 + }
  137 +
  138 + }
  139 +
  140 + public function _render_error() {
  141 + $what = (!empty($this->error)) ? $this->error : 'Unknown Error';
  142 + return "<div class='bugzilla error'>Bugzilla Error: $what</div>";
  143 + }
  144 +
  145 +}
  146 +
  147 +
  148 +?>
117 Bugzilla.php
... ... @@ -0,0 +1,117 @@
  1 +<?php
  2 +
  3 +
  4 +// -----------------------------------------------------------------------------
  5 +// Extension credits / metadata
  6 +// -----------------------------------------------------------------------------
  7 +
  8 +$wgExtensionCredits['other'][] = array(
  9 + 'name' => 'Bugzilla',
  10 + 'author' => 'Christian Legnitto',
  11 + 'url' => 'https://github.com/LegNeato/mediawiki-bugzilla',
  12 + 'description' => 'This extension allows read-only integration with '.
  13 + 'Bugzilla via the REST API',
  14 +);
  15 +
  16 +
  17 +// -----------------------------------------------------------------------------
  18 +// General setup
  19 +// -----------------------------------------------------------------------------
  20 +
  21 +// Register the classes to autoload
  22 +$wgAutoloadClasses['Bugzilla'] = dirname(__FILE__) . '/Bugzilla.class.php';
  23 +
  24 +// -----------------------------------------------------------------------------
  25 +// Register for MediaWiki hooks
  26 +// -----------------------------------------------------------------------------
  27 +
  28 +$wgHooks['BeforePageDisplay'][] = 'BugzillaIncludeHTML';
  29 +$wgHooks['ParserFirstCallInit'][] = 'BugzillaParserInit';
  30 +
  31 +// -----------------------------------------------------------------------------
  32 +// Hook work functions
  33 +// -----------------------------------------------------------------------------
  34 +
  35 +function BugzillaIncludeHTML( &$out, &$sk ) {
  36 +
  37 + global $wgScriptPath;
  38 +
  39 + // Use remote jquery
  40 + $out->addScript('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>');
  41 +
  42 + // Use remote jquery ui
  43 + $out->addScript('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>');
  44 +
  45 + // Add a local script file for the datatable
  46 + $out->addScriptFile("$wgScriptPath/extensions/Bugzilla/web/js/jquery.dataTables.js" );
  47 +
  48 + // Add a remote jquery css file
  49 + $out->addStyle("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css");
  50 +
  51 + // Add a remote jquery UI theme css file
  52 + $out->addStyle("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css");
  53 +
  54 + // Add local datatable styles
  55 + $out->addStyle("$wgScriptPath/extensions/Bugzilla/web/css/demo_page.css");
  56 + $out->addStyle("$wgScriptPath/extensions/Bugzilla/web/css/demo_table.css");
  57 +
  58 + // Add the script to do table magic
  59 + $out->addInlineScript('$(document).ready(function() {
  60 + $(".bugzilla").dataTable({
  61 + "bJQueryUI": true,
  62 + "sPaginationType": "full_numbers"
  63 + })});');
  64 +
  65 + // Let the other hooks keep processing
  66 + return true;
  67 +}
  68 +
  69 +// Hook our callback function into the parser
  70 +function BugzillaParserInit( Parser &$parser ) {
  71 + global $wgBugzillaTagName;
  72 +
  73 + // Register the desired tag
  74 + $parser->setHook( $wgBugzillaTagName, 'BugzillaRender' );
  75 +
  76 + // Let the other hooks keep processing
  77 + return true;
  78 +}
  79 +
  80 +// Function to be called when our tag is found by the parser
  81 +function BugzillaRender($input, array $args, Parser $parser ) {
  82 + global $wgBugzillaRESTURL;
  83 +
  84 + // We don't want the page to be cached
  85 + // TODO: Not sure if we need this
  86 + $parser->disableCache();
  87 +
  88 + // Create a new bugzilla object
  89 + $bz = new Bugzilla($wgBugzillaRESTURL, $args);
  90 +
  91 + // Talk to bugzilla
  92 + $bz->fetch($input);
  93 +
  94 + // Show the results (or an error if there was one)
  95 + return $bz->render();
  96 +}
  97 +
  98 +
  99 +// -----------------------------------------------------------------------------
  100 +// Default configuration
  101 +// -----------------------------------------------------------------------------
  102 +
  103 +$wgBugzillaRESTURL = 'https://api-dev.bugzilla.mozilla.org/latest';
  104 +$wgBugzillaURL = 'https://bugzilla.mozilla.org';
  105 +$wgBugzillaTagName = 'bugzilla';
  106 +$wgBugzillaUseCache = TRUE;
  107 +$wgBugzillaCacheMins = 5;
  108 +$wgBugzillaJqueryTable = FALSE;
  109 +
  110 +// We use smarty...
  111 +$wgBugzillaSmartyDir = '/usr/share/php/smarty/';
  112 +$wgBugzillaSmartyTemplateDir = dirname(__FILE__) . '/templates/';
  113 +$wgBugzillaSmartyCompileDir = '/tmp/';
  114 +$wgBugzillaSmartyConfigDir = dirname(__FILE__) . '/configs/';
  115 +$wgBugzillaSmartyCacheDir = '/tmp/';
  116 +
  117 +?>
35 Utils.php
... ... @@ -0,0 +1,35 @@
  1 +<?php
  2 +
  3 +
  4 +function gChartExtendedEncode($arrVals, $maxVal) {
  5 +// Same as simple encoding, but for extended encoding.
  6 + $EXTENDED_MAP=
  7 + 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-.';
  8 + $EXTENDED_MAP_LENGTH = strlen($EXTENDED_MAP);
  9 + $chartData = '';
  10 +
  11 + for($i = 0, $len = count($arrVals); $i < $len; $i++) {
  12 + // In case the array vals were translated to strings.
  13 + $numericVal = $arrVals[$i];
  14 + // Scale the value to maxVal.
  15 + $scaledVal = floor($EXTENDED_MAP_LENGTH *
  16 + $EXTENDED_MAP_LENGTH * $numericVal / $maxVal);
  17 +
  18 + if($scaledVal > ($EXTENDED_MAP_LENGTH * $EXTENDED_MAP_LENGTH) - 1) {
  19 + $chartData .= "..";
  20 + }elseif($scaledVal < 0) {
  21 + $chartData .= '__';
  22 + } else {
  23 + // Calculate first and second digits and add them to the output.
  24 + $quotient = floor($scaledVal / $EXTENDED_MAP_LENGTH);
  25 + $remainder = $scaledVal - $EXTENDED_MAP_LENGTH * $quotient;
  26 + $chartData .= $EXTENDED_MAP[$quotient] . $EXTENDED_MAP[$remainder];
  27 + }
  28 + }
  29 +
  30 + return $chartData;
  31 +}
  32 +
  33 +
  34 +
  35 +?>
22 templates/bug/table.tpl
... ... @@ -0,0 +1,22 @@
  1 +{* SMARTY *}
  2 +
  3 +<table class="bugzilla ui-helper-reset">
  4 + <thead>
  5 + <tr>
  6 + <th>ID</th>
  7 + <th>Summary</th>
  8 + <th>Status</th>
  9 + <th>Priority</th>
  10 + </tr>
  11 + </thead>
  12 + <tbody>
  13 + {foreach from=$bugs item=bug}
  14 + <tr>
  15 + <td>{$bug->id|escape}</td>
  16 + <td>{$bug->summary|escape}</td>
  17 + <td>{$bug->status|escape}</td>
  18 + <td>{$bug->priority|escape}</td>
  19 + </tr>
  20 + {/foreach}
  21 + </tbody>
  22 +</table>
2  templates/count/bar.tpl
... ... @@ -0,0 +1,2 @@
  1 +{* SMARTY *}
  2 +<img src="http://chart.apis.google.com/chart?cht={$type|escape:'url'}&chs={$size|escape:'url'}&chds=a&chd=t:{$data|escape:'url'}&chxl=1:|{$x_labels|default:''|escape:'url'}&chxt=x,y&chtt={$title|default:''|escape:'url'}" />
63 vim
... ... @@ -0,0 +1,63 @@
  1 +MediaWiki extension for Bugzilla
  2 +================================
  3 +
  4 +This is a MediaWiki extension that provides read-only access to the
  5 +[Bugzilla REST API](https://wiki.mozilla.org/Bugzilla:REST_API)
  6 +
  7 +__Please note that this isn't finished / ready for production yet!__
  8 +
  9 +Requirements
  10 +================================
  11 +
  12 +* Requires HTTP_Request2 from PEAR
  13 +* Requires the SMARTY template library installed
  14 +
  15 +Usage
  16 +================================
  17 +
  18 +You use this extension in this way:
  19 +
  20 + <bugzilla>
  21 + (JSON REST API query key/value pairs)
  22 + </bugzilla>
  23 +
  24 +An example:
  25 +
  26 + <bugzilla>
  27 + {
  28 + "product": "Bugzilla",
  29 + "priority":"P1"
  30 + }
  31 + </bugzilla>
  32 +
  33 +For more details on how to query in various ways, see the documentation for
  34 +the [Bugzilla REST API](https://wiki.mozilla.org/Bugzilla:REST_API)
  35 +
  36 +Note that the tag name defaults to "bugzilla" but is configurable.
  37 +
  38 +There is also __exploratory__ support for charting:
  39 +
  40 + <bugzilla type="count" display="bar">
  41 + {
  42 + "product": "Bugzilla",
  43 + "priority": "P1",
  44 + "x_axis_field": "severity"
  45 + }
  46 + </bugzilla>
  47 +
  48 +Limitations
  49 +================================
  50 +
  51 +* This extension (by design) is read-only
  52 +* This extension currently queries as a public (not logged in) user
  53 +* Charts are fairly hardcoded and don't work in many cases
  54 +
  55 +TODO
  56 +================================
  57 +
  58 +# This is basically a prototype right now...needs to be cleaned up a lot
  59 +# The JQuery UI table doesn't render correctly...make it better
  60 +# Support more types of queries than just "bug" (the default)
  61 +# Support more types of wiki display than just a bug table
  62 +# Caching and cache invalidation for queries
  63 +# Support charting as a 1st class citizen
5 web/css/bugzilla.css
... ... @@ -0,0 +1,5 @@
  1 +/*
  2 +table.bugzilla {
  3 + width: 100%;
  4 +}
  5 +*/
99 web/css/demo_page.css
... ... @@ -0,0 +1,99 @@
  1 +
  2 +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  3 + * General page setup
  4 + */
  5 +#dt_example {
  6 + font: 80%/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  7 + margin: 0;
  8 + padding: 0;
  9 + color: #333;
  10 + background-color: #fff;
  11 +}
  12 +
  13 +
  14 +#dt_example #container {
  15 + width: 800px;
  16 + margin: 30px auto;
  17 + padding: 0;
  18 +}
  19 +
  20 +
  21 +#dt_example #footer {
  22 + margin: 50px auto 0 auto;
  23 + padding: 0;
  24 +}
  25 +
  26 +#dt_example #demo {
  27 + margin: 30px auto 0 auto;
  28 +}
  29 +
  30 +#dt_example .demo_jui {
  31 + margin: 30px auto 0 auto;
  32 +}
  33 +
  34 +#dt_example .big {
  35 + font-size: 1.3em;
  36 + font-weight: bold;
  37 + line-height: 1.6em;
  38 + color: #4E6CA3;
  39 +}
  40 +
  41 +#dt_example .spacer {
  42 + height: 20px;
  43 + clear: both;
  44 +}
  45 +
  46 +#dt_example .clear {
  47 + clear: both;
  48 +}
  49 +
  50 +#dt_example pre {
  51 + padding: 15px;
  52 + background-color: #F5F5F5;
  53 + border: 1px solid #CCCCCC;
  54 +}
  55 +
  56 +#dt_example h1 {
  57 + margin-top: 2em;
  58 + font-size: 1.3em;
  59 + font-weight: normal;
  60 + line-height: 1.6em;
  61 + color: #4E6CA3;
  62 + border-bottom: 1px solid #B0BED9;
  63 + clear: both;
  64 +}
  65 +
  66 +#dt_example h2 {
  67 + font-size: 1.2em;
  68 + font-weight: normal;
  69 + line-height: 1.6em;
  70 + color: #4E6CA3;
  71 + clear: both;
  72 +}
  73 +
  74 +#dt_example a {
  75 + color: #0063DC;
  76 + text-decoration: none;
  77 +}
  78 +
  79 +#dt_example a:hover {
  80 + text-decoration: underline;
  81 +}
  82 +
  83 +#dt_example ul {
  84 + color: #4E6CA3;
  85 +}
  86 +
  87 +.css_right {
  88 + float: right;
  89 +}
  90 +
  91 +.css_left {
  92 + float: left;
  93 +}
  94 +
  95 +.demo_links {
  96 + float: left;
  97 + width: 50%;
  98 + margin-bottom: 1em;
  99 +}
538 web/css/demo_table.css
... ... @@ -0,0 +1,538 @@
  1 +/*
  2 + * File: demo_table.css
  3 + * CVS: $Id$
  4 + * Description: CSS descriptions for DataTables demo pages
  5 + * Author: Allan Jardine
  6 + * Created: Tue May 12 06:47:22 BST 2009
  7 + * Modified: $Date$ by $Author$
  8 + * Language: CSS
  9 + * Project: DataTables
  10 + *
  11 + * Copyright 2009 Allan Jardine. All Rights Reserved.
  12 + *
  13 + * ***************************************************************************
  14 + * DESCRIPTION
  15 + *
  16 + * The styles given here are suitable for the demos that are used with the standard DataTables
  17 + * distribution (see www.datatables.net). You will most likely wish to modify these styles to
  18 + * meet the layout requirements of your site.
  19 + *
  20 + * Common issues:
  21 + * 'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is
  22 + * no conflict between the two pagination types. If you want to use full_numbers pagination
  23 + * ensure that you either have "example_alt_pagination" as a body class name, or better yet,
  24 + * modify that selector.
  25 + * Note that the path used for Images is relative. All images are by default located in
  26 + * ../images/ - relative to this CSS file.
  27 + */
  28 +
  29 +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  30 + * DataTables features
  31 + */
  32 +
  33 +.dataTables_wrapper {
  34 + position: relative;
  35 + min-height: 302px;
  36 + clear: both;
  37 + _height: 302px;
  38 + zoom: 1; /* Feeling sorry for IE */
  39 +}
  40 +
  41 +.dataTables_processing {
  42 + position: absolute;
  43 + top: 50%;
  44 + left: 50%;
  45 + width: 250px;
  46 + height: 30px;
  47 + margin-left: -125px;
  48 + margin-top: -15px;
  49 + padding: 14px 0 2px 0;
  50 + border: 1px solid #ddd;
  51 + text-align: center;
  52 + color: #999;
  53 + font-size: 14px;
  54 + background-color: white;
  55 +}
  56 +
  57 +.dataTables_length {
  58 + width: 40%;
  59 + float: left;
  60 +}
  61 +
  62 +.dataTables_filter {
  63 + width: 50%;
  64 + float: right;
  65 + text-align: right;
  66 +}
  67 +
  68 +.dataTables_info {
  69 + width: 60%;
  70 + float: left;
  71 +}
  72 +
  73 +.dataTables_paginate {
  74 + width: 44px;
  75 + * width: 50px;
  76 + float: right;
  77 + text-align: right;
  78 +}
  79 +
  80 +/* Pagination nested */
  81 +.paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
  82 + height: 19px;
  83 + width: 19px;
  84 + margin-left: 3px;
  85 + float: left;
  86 +}
  87 +
  88 +.paginate_disabled_previous {
  89 + background-image: url('../images/back_disabled.jpg');
  90 +}
  91 +
  92 +.paginate_enabled_previous {
  93 + background-image: url('../images/back_enabled.jpg');
  94 +}
  95 +
  96 +.paginate_disabled_next {
  97 + background-image: url('../images/forward_disabled.jpg');
  98 +}
  99 +
  100 +.paginate_enabled_next {
  101 + background-image: url('../images/forward_enabled.jpg');
  102 +}
  103 +
  104 +
  105 +
  106 +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  107 + * DataTables display
  108 + */
  109 +table.display {
  110 + margin: 0 auto;
  111 + clear: both;
  112 + width: 100%;
  113 +
  114 + /* Note Firefox 3.5 and before have a bug with border-collapse
  115 + * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 )
  116 + * border-spacing: 0; is one possible option. Conditional-css.com is
  117 + * useful for this kind of thing
  118 + *
  119 + * Further note IE 6/7 has problems when calculating widths with border width.
  120 + * It subtracts one px relative to the other browsers from the first column, and
  121 + * adds one to the end...
  122 + *
  123 + * If you want that effect I'd suggest setting a border-top/left on th/td's and
  124 + * then filling in the gaps with other borders.
  125 + */
  126 +}
  127 +
  128 +table.display thead th {
  129 + padding: 3px 18px 3px 10px;
  130 + border-bottom: 1px solid black;
  131 + font-weight: bold;
  132 + cursor: pointer;
  133 + * cursor: hand;
  134 +}
  135 +
  136 +table.display tfoot th {
  137 + padding: 3px 18px 3px 10px;
  138 + border-top: 1px solid black;
  139 + font-weight: bold;
  140 +}
  141 +
  142 +table.display tr.heading2 td {
  143 + border-bottom: 1px solid #aaa;
  144 +}
  145 +
  146 +table.display td {
  147 + padding: 3px 10px;
  148 +}
  149 +
  150 +table.display td.center {
  151 + text-align: center;
  152 +}
  153 +
  154 +
  155 +
  156 +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  157 + * DataTables sorting
  158 + */
  159 +
  160 +.sorting_asc {
  161 + background: url('../images/sort_asc.png') no-repeat center right;
  162 +}
  163 +
  164 +.sorting_desc {
  165 + background: url('../images/sort_desc.png') no-repeat center right;
  166 +}
  167 +
  168 +.sorting {
  169 + background: url('../images/sort_both.png') no-repeat center right;
  170 +}
  171 +
  172 +.sorting_asc_disabled {
  173 + background: url('../images/sort_asc_disabled.png') no-repeat center right;
  174 +}
  175 +
  176 +.sorting_desc_disabled {
  177 + background: url('../images/sort_desc_disabled.png') no-repeat center right;
  178 +}
  179 +
  180 +
  181 +
  182 +
  183 +
  184 +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  185 + * DataTables row classes
  186 + */
  187 +table.display tr.odd.gradeA {
  188 + background-color: #ddffdd;
  189 +}
  190 +
  191 +table.display tr.even.gradeA {
  192 + background-color: #eeffee;
  193 +}
  194 +
  195 +table.display tr.odd.gradeC {
  196 + background-color: #ddddff;
  197 +}
  198 +
  199 +table.display tr.even.gradeC {
  200 + background-color: #eeeeff;
  201 +}
  202 +
  203 +table.display tr.odd.gradeX {
  204 + background-color: #ffdddd;
  205 +}
  206 +
  207 +table.display tr.even.gradeX {
  208 + background-color: #ffeeee;
  209 +}
  210 +
  211 +table.display tr.odd.gradeU {
  212 + background-color: #ddd;
  213 +}
  214 +
  215 +table.display tr.even.gradeU {
  216 + background-color: #eee;
  217 +}
  218 +
  219 +
  220 +tr.odd {
  221 + background-color: #E2E4FF;
  222 +}
  223 +
  224 +tr.even {
  225 + background-color: white;
  226 +}
  227 +
  228 +
  229 +
  230 +
  231 +
  232 +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  233 + * Misc
  234 + */
  235 +.dataTables_scroll {
  236 + clear: both;
  237 +}
  238 +
  239 +.dataTables_scrollBody {
  240 + *margin-top: -1px;
  241 +}
  242 +
  243 +.top, .bottom {
  244 + padding: 15px;
  245 + background-color: #F5F5F5;
  246 + border: 1px solid #CCCCCC;
  247 +}
  248 +
  249 +.top .dataTables_info {
  250 + float: none;
  251 +}
  252 +
  253 +.clear {
  254 + clear: both;
  255 +}
  256 +
  257 +.dataTables_empty {
  258 + text-align: center;
  259 +}
  260 +
  261 +tfoot input {
  262 + margin: 0.5em 0;
  263 + width: 100%;
  264 + color: #444;
  265 +}
  266 +
  267 +tfoot input.search_init {
  268 + color: #999;
  269 +}
  270 +
  271 +td.group {
  272 + background-color: #d1cfd0;
  273 + border-bottom: 2px solid #A19B9E;
  274 + border-top: 2px solid #A19B9E;
  275 +}
  276 +
  277 +td.details {
  278 + background-color: #d1cfd0;
  279 + border: 2px solid #A19B9E;
  280 +}
  281 +
  282 +
  283 +.example_alt_pagination div.dataTables_info {
  284 + width: 40%;
  285 +}
  286 +
  287 +.paging_full_numbers {
  288 + width: 400px;
  289 + height: 22px;
  290 + line-height: 22px;
  291 +}
  292 +
  293 +.paging_full_numbers span.paginate_button,
  294 + .paging_full_numbers span.paginate_active {
  295 + border: 1px solid #aaa;
  296 + -webkit-border-radius: 5px;
  297 + -moz-border-radius: 5px;
  298 + padding: 2px 5px;
  299 + margin: 0 3px;
  300 + cursor: pointer;
  301 + *cursor: hand;
  302 +}
  303 +
  304 +.paging_full_numbers span.paginate_button {
  305 + background-color: #ddd;
  306 +}
  307 +
  308 +.paging_full_numbers span.paginate_button:hover {
  309 + background-color: #ccc;
  310 +}
  311 +
  312 +.paging_full_numbers span.paginate_active {
  313 + background-color: #99B3FF;
  314 +}
  315 +
  316 +table.display tr.even.row_selected td {
  317 + background-color: #B0BED9;
  318 +}
  319 +
  320 +table.display tr.odd.row_selected td {
  321 + background-color: #9FAFD1;
  322 +}
  323 +
  324 +
  325 +/*
  326 + * Sorting classes for columns
  327 + */
  328 +/* For the standard odd/even */
  329 +tr.odd td.sorting_1 {
  330 + background-color: #D3D6FF;
  331 +}
  332 +
  333 +tr.odd td.sorting_2 {
  334 + background-color: #DADCFF;
  335 +}
  336 +
  337 +tr.odd td.sorting_3 {
  338 + background-color: #E0E2FF;
  339 +}
  340 +
  341 +tr.even td.sorting_1 {
  342 + background-color: #EAEBFF;
  343 +}
  344 +
  345 +tr.even td.sorting_2 {
  346 + background-color: #F2F3FF;
  347 +}
  348 +
  349 +tr.even td.sorting_3 {
  350 + background-color: #F9F9FF;
  351 +}
  352 +
  353 +
  354 +/* For the Conditional-CSS grading rows */
  355 +/*
  356 + Colour calculations (based off the main row colours)
  357 + Level 1:
  358 + dd > c4
  359 + ee > d5
  360 + Level 2:
  361 + dd > d1
  362 + ee > e2
  363 + */
  364 +tr.odd.gradeA td.sorting_1 {
  365 + background-color: #c4ffc4;
  366 +}
  367 +
  368 +tr.odd.gradeA td.sorting_2 {
  369 + background-color: #d1ffd1;
  370 +}
  371 +
  372 +tr.odd.gradeA td.sorting_3 {
  373 + background-color: #d1ffd1;
  374 +}
  375 +
  376 +tr.even.gradeA td.sorting_1 {
  377 + background-color: #d5ffd5;
  378 +}
  379 +
  380 +tr.even.gradeA td.sorting_2 {
  381 + background-color: #e2ffe2;
  382 +}
  383 +
  384 +tr.even.gradeA td.sorting_3 {
  385 + background-color: #e2ffe2;
  386 +}
  387 +
  388 +tr.odd.gradeC td.sorting_1 {
  389 + background-color: #c4c4ff;
  390 +}
  391 +
  392 +tr.odd.gradeC td.sorting_2 {
  393 + background-color: #d1d1ff;
  394 +}
  395 +
  396 +tr.odd.gradeC td.sorting_3 {
  397 + background-color: #d1d1ff;
  398 +}
  399 +
  400 +tr.even.gradeC td.sorting_1 {
  401 + background-color: #d5d5ff;
  402 +}
  403 +
  404 +tr.even.gradeC td.sorting_2 {
  405 + background-color: #e2e2ff;
  406 +}
  407 +
  408 +tr.even.gradeC td.sorting_3 {
  409 + background-color: #e2e2ff;
  410 +}
  411 +
  412 +tr.odd.gradeX td.sorting_1 {
  413 + background-color: #ffc4c4;
  414 +}
  415 +
  416 +tr.odd.gradeX td.sorting_2 {
  417 + background-color: #ffd1d1;
  418 +}
  419 +
  420 +tr.odd.gradeX td.sorting_3 {
  421 + background-color: #ffd1d1;
  422 +}
  423 +
  424 +tr.even.gradeX td.sorting_1 {
  425 + background-color: #ffd5d5;
  426 +}
  427 +
  428 +tr.even.gradeX td.sorting_2 {
  429 + background-color: #ffe2e2;
  430 +}
  431 +
  432 +tr.even.gradeX td.sorting_3 {
  433 + background-color: #ffe2e2;
  434 +}
  435 +
  436 +tr.odd.gradeU td.sorting_1 {
  437 + background-color: #c4c4c4;
  438 +}
  439 +
  440 +tr.odd.gradeU td.sorting_2 {
  441 + background-color: #d1d1d1;
  442 +}
  443 +
  444 +tr.odd.gradeU td.sorting_3 {
  445 + background-color: #d1d1d1;
  446 +}
  447 +
  448 +tr.even.gradeU td.sorting_1 {
  449 + background-color: #d5d5d5;
  450 +}
  451 +
  452 +tr.even.gradeU td.sorting_2 {
  453 + background-color: #e2e2e2;
  454 +}
  455 +
  456 +tr.even.gradeU td.sorting_3 {
  457 + background-color: #e2e2e2;
  458 +}
  459 +
  460 +
  461 +/*
  462 + * Row highlighting example
  463 + */
  464 +.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
  465 + background-color: #ECFFB3;
  466 +}
  467 +
  468 +.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
  469 + background-color: #E6FF99;
  470 +}
  471 +
  472 +.ex_highlight_row #example tr.even:hover {
  473 + background-color: #ECFFB3;
  474 +}
  475 +
  476 +.ex_highlight_row #example tr.even:hover td.sorting_1 {
  477 + background-color: #DDFF75;
  478 +}
  479 +
  480 +.ex_highlight_row #example tr.even:hover td.sorting_2 {
  481 + background-color: #E7FF9E;
  482 +}
  483 +
  484 +.ex_highlight_row #example tr.even:hover td.sorting_3 {
  485 + background-color: #E2FF89;
  486 +}
  487 +
  488 +.ex_highlight_row #example tr.odd:hover {
  489 + background-color: #E6FF99;
  490 +}
  491 +
  492 +.ex_highlight_row #example tr.odd:hover td.sorting_1 {
  493 + background-color: #D6FF5C;
  494 +}
  495 +
  496 +.ex_highlight_row #example tr.odd:hover td.sorting_2 {
  497 + background-color: #E0FF84;
  498 +}
  499 +
  500 +.ex_highlight_row #example tr.odd:hover td.sorting_3 {
  501 + background-color: #DBFF70;
  502 +}
  503 +
  504 +
  505 +/*
  506 + * KeyTable
  507 + */
  508 +table.KeyTable td {
  509 + border: 3px solid transparent;
  510 +}
  511 +
  512 +table.KeyTable td.focus {
  513 + border: 3px solid #3366FF;
  514 +}
  515 +
  516 +table.display tr.gradeA {
  517 + background-color: #eeffee;
  518 +}
  519 +
  520 +table.display tr.gradeC {
  521 + background-color: #ddddff;
  522 +}
  523 +
  524 +table.display tr.gradeX {
  525 + background-color: #ffdddd;
  526 +}
  527 +
  528 +table.display tr.gradeU {
  529 + background-color: #ddd;
  530 +}
  531 +
  532 +div.box {
  533 + height: 100px;
  534 + padding: 10px;
  535 + overflow: auto;
  536 + border: 1px solid #8080FF;
  537 + background-color: #E5E5FF;
  538 +}
521 web/css/demo_table_jui.css
... ... @@ -0,0 +1,521 @@
  1 +/*
  2 + * File: demo_table_jui.css
  3 + * CVS: $Id$
  4 + * Description: CSS descriptions for DataTables demo pages
  5 + * Author: Allan Jardine
  6 + * Created: Tue May 12 06:47:22 BST 2009
  7 + * Modified: $Date$ by $Author$
  8 + * Language: CSS
  9 + * Project: DataTables
  10 + *
  11 + * Copyright 2009 Allan Jardine. All Rights Reserved.
  12 + *
  13 + * ***************************************************************************
  14 + * DESCRIPTION
  15 + *
  16 + * The styles given here are suitable for the demos that are used with the standard DataTables
  17 + * distribution (see www.datatables.net). You will most likely wish to modify these styles to
  18 + * meet the layout requirements of your site.
  19 + *
  20 + * Common issues:
  21 + * 'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is
  22 + * no conflict between the two pagination types. If you want to use full_numbers pagination
  23 + * ensure that you either have "example_alt_pagination" as a body class name, or better yet,
  24 + * modify that selector.
  25 + * Note that the path used for Images is relative. All images are by default located in
  26 + * ../images/ - relative to this CSS file.
  27 + */
  28 +
  29 +
  30 +/*
  31 + * jQuery UI specific styling
  32 + */
  33 +
  34 +.paging_two_button .ui-button {
  35 + float: left;
  36 + cursor: pointer;
  37 + * cursor: hand;
  38 +}
  39 +
  40 +.paging_full_numbers .ui-button {
  41 + padding: 2px 6px;
  42 + margin: 0;
  43 + cursor: pointer;
  44 + * cursor: hand;
  45 +}
  46 +
  47 +.dataTables_paginate .ui-button {
  48 + margin-right: -0.1em !important;
  49 +}
  50 +
  51 +.paging_full_numbers {
  52 + width: 350px !important;
  53 +}
  54 +
  55 +.dataTables_wrapper .ui-toolbar {
  56 + padding: 5px;
  57 +}
  58 +
  59 +.dataTables_paginate {
  60 + width: auto;
  61 +}
  62 +
  63 +.dataTables_info {
  64 + padding-top: 3px;
  65 +}
  66 +
  67 +table.display thead th {
  68 + padding: 3px 0px 3px 10px;
  69 + cursor: pointer;
  70 + * cursor: hand;
  71 +}
  72 +
  73 +div.dataTables_wrapper .ui-widget-header {
  74 + font-weight: normal;
  75 +}
  76 +
  77 +
  78 +/*
  79 + * Sort arrow icon positioning
  80 + */
  81 +table.display thead th div.DataTables_sort_wrapper {
  82 + position: relative;
  83 + padding-right: 20px;
  84 + padding-right: 20px;
  85 +}
  86 +
  87 +table.display thead th div.DataTables_sort_wrapper span {
  88 + position: absolute;
  89 + top: 50%;
  90 + margin-top: -8px;
  91 + right: 0;
  92 +}
  93 +
  94 +
  95 +
  96 +
  97 +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  98 + *
  99 + * Everything below this line is the same as demo_table.css. This file is
  100 + * required for 'cleanliness' of the markup
  101 + *
  102 + * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  103 +
  104 +
  105 +
  106 +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  107 + * DataTables features
  108 + */
  109 +
  110 +.dataTables_wrapper {
  111 + position: relative;
  112 + min-height: 302px;
  113 + _height: 302px;
  114 + clear: both;
  115 +}
  116 +
  117 +.dataTables_processing {
  118 + position: absolute;
  119 + top: 0px;
  120 + left: 50%;
  121 + width: 250px;
  122 + margin-left: -125px;
  123 + border: 1px solid #ddd;
  124 + text-align: center;
  125 + color: #999;
  126 + font-size: 11px;
  127 + padding: 2px 0;
  128 +}
  129 +
  130 +.dataTables_length {
  131 + width: 40%;
  132 + float: left;
  133 +}
  134 +
  135 +.dataTables_filter {
  136 + width: 50%;
  137 + float: right;
  138 + text-align: right;
  139 +}
  140 +
  141 +.dataTables_info {
  142 + width: 50%;
  143 + float: left;
  144 +}
  145 +
  146 +.dataTables_paginate {
  147 + float: right;
  148 + text-align: right;
  149 +}
  150 +
  151 +/* Pagination nested */
  152 +.paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
  153 + height: 19px;
  154 + width: 19px;
  155 + margin-left: 3px;
  156 + float: left;
  157 +}
  158 +
  159 +.paginate_disabled_previous {
  160 + background-image: url('../images/back_disabled.jpg');
  161 +}
  162 +
  163 +.paginate_enabled_previous {
  164 + background-image: url('../images/back_enabled.jpg');
  165 +}
  166 +
  167 +.paginate_disabled_next {
  168 + background-image: url('../images/forward_disabled.jpg');
  169 +}
  170 +
  171 +.paginate_enabled_next {
  172 + background-image: url('../images/forward_enabled.jpg');
  173 +}
  174 +