Permalink
Browse files

working with ui tool tip for a better interface

  • Loading branch information...
1 parent 5cf9baf commit d4d45ae15bd58a881e162a216de3490f92db1f0d casey becking committed Dec 12, 2011
Showing with 53 additions and 54 deletions.
  1. +5 −8 index.html
  2. +34 −28 magic.js
  3. +0 −18 style.css
  4. +1 −0 uitooltip.css
  5. +13 −0 uitooltip.min.js
View
@@ -1,7 +1,11 @@
<html>
<head>
<title>Bugs Ahoy - find relevant Mozilla bugs</title>
- <link rel="stylesheet" type="text/css" href="style.css"><link>
+ <link rel="stylesheet" type="text/css" href="style.css"></link>
+ <link rel="stylesheet" type="text/css" href="uitooltip.css"></link>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript" src="uitooltip.min.js"></script>
<script type="text/javascript" src="bz-0.2.1.js"></script>
<script type="text/javascript" src="magic.js"></script>
</head>
@@ -42,13 +46,6 @@
addCategories([["py", "Python"], ["java", "Java"], ["sh", "Shell/Makefile/Autoconf"],
["js", "Javascript"], ["cpp", "C++"], ["html", "HTML/CSS"]]);
</script>
-<br><br>
-Color Gradient:<br><br>
-<div class="bug assigned">Assigned to someone else</div>
-<div class="bug green">Unassigned, less than 5 days without a comment</div>
-<div class="bug blue">Unassigned, In between 5-10 days without a comment</div>
-<div class="bug orange">Unassigned, In between 10-20 days without a comment</div>
-<div class="bug red">Unassigned, Older than 20 days without a comment</div>
</div>
<div id="bugs">
View
@@ -18,16 +18,11 @@ function addSimpleMapping(cat, prod, components) {
addSearchMapping(cat, params);
}
-function timeFromModified(lastChangeTime){
- var lastModified =new Date(lastChangeTime) //Month is 0-11 in JavaScript
-
- today=new Date();
- //Get 1 day in milliseconds
- var one_day=1000*60*60*24;
-
- //Calculate difference btw the two dates, and convert to days
- return(Math.ceil((today.getTime()-lastModified.getTime())/(one_day)));
-
+function timeFromModified(lastChangeTime) {
+ var lastModified = new Date(lastChangeTime);
+ today = new Date();
+ var one_day = 1000*60*60*24;
+ return(Math.ceil((today.getTime() - lastModified.getTime()) / (one_day)));
}
function addLanguageMapping(cat, language) {
@@ -100,22 +95,9 @@ function rebuildTableContents() {
var daysOld = timeFromModified(orderedBugList[idx].last_change_time);
- //console.log(orderedBugList[idx].last_change_time);
- // easy way to find out if the bug has someone assigned to it
- // need to find out when the bug was modified and how long ago that was from today
- if (orderedBugList[idx].assigned_to.name !== 'nobody') {
- elem.setAttribute('class', "bug");
- }else{
- if(daysOld <= 5){
- elem.setAttribute('class', "bug green");
- }else if(daysOld <= 10){
- elem.setAttribute('class', "bug blue");
- }else if(daysOld <= 20){
- elem.setAttribute('class', "bug orange");
- }else{
- elem.setAttribute('class', "bug red");
- }
- }
+ elem.setAttribute('class', "bug moreInfo");
+ elem.setAttribute('alt', daysOld + " Days Since Last Comment<br /> Assigned to : " + orderedBugList[idx].assigned_to.name);
+
content.appendChild(elem);
}
@@ -135,7 +117,29 @@ function rebuildTableContents() {
document.getElementById('total').textContent = '(' + orderedBugList.length + ')';
document.getElementById('throbber').style.visibility = "hidden";
-}
+ jQuery('.moreInfo').qtip({
+ content: {
+ attr: 'alt'
+ },
+ position: {
+ my: 'bottom left',
+ target: 'mouse',
+ viewport: $(window),
+ // Keep it on-screen at all times if possible
+ adjust: {
+ x: 10,
+ y: 10
+ }
+ },
+ hide: {
+ fixed: true
+ // Helps to prevent the tooltip from hiding ocassionally when tracking!
+ },
+ style: {
+ classes: 'ui-tooltip-dark ui-tooltip-cluetip'
+ }
+ })
+ }
function retrieveResults(category) {
if (category in resultsCache) {
@@ -213,4 +217,6 @@ function switchHelp(e)
var box = document.getElementById("help");
box.innerHTML = helpText[id];
box.style.display = "table";*/
-}
+}
+
+
View
@@ -131,21 +131,3 @@ div .bug {
font-weight: normal;
}
-
-.bug.red{
- background:#333;
- color:#fff;
-}
-.bug.orange{
- background:#666;
- color:#fff;
-}
-.bug.blue{
- background:#999;
- color:#fff;
-}
-.bug.green{
- background:#ccc;
- color:#fff;
-}
-
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View

Large diffs are not rendered by default.

Oops, something went wrong.

0 comments on commit d4d45ae

Please sign in to comment.